/* ==================================================================
   Portal Pastoral Vocacional de Yucatán — hoja de estilo única

   Regla de color: NADA de degradados. La profundidad se construye con
   pasos discretos de una escala, no con mezclas. Cada paso tiene un
   único trabajo (fondo / superficie / borde / sólido / texto), siguiendo
   el criterio de escalas de 12 pasos de Radix Colors.
   ================================================================== */
:root{
  /* ---- Gama cromática oficial (Manual de Identidad) ---- */
  --navy:      #001871;   /* Pantone 2119 C · CMYK 100 86 0 35 */
  --lavanda:   #606EB2;   /* Pantone 7456 C · CMYK 69 56 0 0   */
  --coral:     #E5554F;   /* Pantone 2348 C · CMYK 0 79 64 0   */
  --verde:     #86AD3F;   /* Pantone 4212 C · CMYK 48 2 88 9   */
  --blanco:    #FFFFFF;

  /* ---- Escala de superficie, tema claro ----
     El azul institucional es TINTA, no fondo: de ahí venía la sensación de
     "todo azul". Los cuatro colores del manual quedan como acento.
     f1/f2/f3 fondos · s1/s2 superficies · bd bordes · t1/t2 texto */
  --f3: #FBFBFB;   /* papel base — el mismo blanco del archivo del logotipo */
  --f2: #EFF2F9;   /* banda alterna */
  --f1: #E8ECF6;   /* nav y pie */
  --s1: #FFFFFF;   /* superficie: tarjetas, blancas sobre el papel */
  --s2: #F2F5FC;   /* superficie en hover */
  --bd: #DBE1EF;   /* bordes: son ellos los que separan, no las sombras */
  --t1: #17203D;   /* texto principal */
  --t2: #5A647E;   /* texto secundario */

  /* Variantes planas de los acentos, para estados.
     Sobre fondo claro el coral hay que OSCURECERLO, no aclararlo: el coral
     base sobre blanco da 3.5:1, suficiente para titulares pero no para texto. */
  --coral-hover:  #C9443D;   /* fondo de botón en hover */
  --coral-txt:    #B93028;   /* coral legible como texto (6.4:1 sobre el papel) */
  --coral-boton:  #CF463F;   /* relleno de botón: con texto blanco da 4.6:1 */
  --lavanda-hover:#4F5C9E;
  --navy-hover:   #002099;

  --max: 1180px;
  --f: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --paso: clamp(3.5rem, 7vw, 6rem);
  --nav-h: 4.75rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--f3); scroll-padding-top:6.5rem; }
body{
  margin:0; font-family:var(--f); color:var(--t1); line-height:1.65;
  background:var(--f3);
  -webkit-font-smoothing:antialiased;
}
/* height:auto es obligatorio: el atributo height del <img> pisa la relación de aspecto */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:1.5rem; }
.wrap-angosto{ max-width:860px; }

/* ---------- Aviso de maqueta ---------- */
.maqueta-bar{
  background:#FBE9E7; color:#A32F27; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; text-align:center; padding:.45rem 1rem; font-weight:600;
  position:relative; z-index:120;
}

/* ==================================================================
   NAVEGACIÓN
   ================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--f1); border-bottom:1px solid var(--bd);
}
.nav .wrap{ display:flex; align-items:center; gap:1.5rem; height:var(--nav-h); }
.nav .marca{ width:158px; flex:0 0 auto; }
.nav-links{ display:flex; gap:1.5rem; margin-left:auto; align-items:center; }
.nav-links a{
  font-size:.85rem; font-weight:600; color:var(--t2);
  padding:.4rem 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav-links a:hover{ color:var(--t1); border-color:var(--coral); }
.nav-links a[aria-current="page"]{ color:var(--t1); border-color:var(--coral); }
.nav .btn{ flex:0 0 auto; }
.menu-btn{
  display:none; margin-left:auto; background:none; border:1px solid var(--bd);
  color:var(--t1); padding:.5rem .8rem; border-radius:8px; font:inherit;
  font-size:.82rem; font-weight:600; cursor:pointer;
}
.menu-panel{ display:none; background:var(--f1); border-bottom:1px solid var(--bd); padding:1rem 1.5rem 1.6rem; }
.menu-panel.abierto{ display:block; }
.menu-panel a{ display:block; padding:.75rem 0; font-weight:600; font-size:.95rem; border-bottom:1px solid var(--bd); }
.menu-panel .btn{ width:100%; margin-top:1.2rem; }

/* ==================================================================
   TIPOGRAFÍA
   ================================================================== */
.titulo{ font-weight:800; font-size:clamp(1.75rem,3.7vw,2.6rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 .7rem; }
.titulo-chico{ font-weight:800; font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.2; letter-spacing:-.015em; margin:0 0 .6rem; }
.subtitulo{ font-size:clamp(.95rem,1.4vw,1.05rem); color:var(--t2); margin:0; font-weight:400; }
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--t2); margin:0 0 .9rem;
}
.centro{ text-align:center; }
.sec-cabeza{ margin-bottom:clamp(2.2rem,4.5vw,3.5rem); }
.sec-cabeza.centro{ max-width:64ch; margin-inline:auto; }
p{ font-weight:400; }
.texto-suave{ color:var(--t2); }

.hl{
  background:var(--coral-boton); color:var(--blanco); padding:.05em .34em .13em;
  display:inline-block; border-radius:3px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hl-torcido{ transform:rotate(-1.4deg); }
.coral{ color:var(--coral-txt); }
.verde{ color:#5C7A2A; }   /* el verde del manual no es legible como texto sobre claro */

/* ==================================================================
   BOTONES — color plano, sin resplandores
   ================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:.85rem 1.9rem; border-radius:100px; border:0; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.btn-sm{ padding:.6rem 1.3rem; font-size:.85rem; }
.btn-coral{ background:var(--coral-boton); color:var(--blanco); }
.btn-coral:hover{ background:var(--coral-hover); }
/* Secundario. Sobre papel claro un botón blanco no se ve: pasa a contorno navy. */
.btn-blanco{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-blanco:hover{ background:var(--navy); color:#fff; }
/* Sobre la banda lavanda el secundario vuelve a ser blanco: navy sobre lavanda
   se queda en 3.3:1, por debajo del mínimo para texto de botón. */
.banda-lavanda .btn-blanco{ background:#fff; color:var(--navy); border-color:#fff; }
.banda-lavanda .btn-blanco:hover{ background:#E7EAF7; color:var(--navy); }
.btn-navy{ background:var(--navy); color:var(--blanco); border-radius:12px; width:100%; }
.btn-navy:hover{ background:var(--navy-hover); }
.btn-linea{ border:1.5px solid var(--bd); color:var(--t1); background:transparent; }
.btn-linea:hover{ border-color:var(--navy); background:var(--s2); }
.enlace-flecha{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.86rem; color:var(--coral-txt); }
.enlace-flecha:hover{ gap:.7rem; }
.enlace-flecha svg{ transition:transform .16s; }

/* ==================================================================
   SECCIONES Y BANDAS — cada una un color plano
   ================================================================== */
section{ padding-block:var(--paso); }
.banda-honda{ background:var(--f2); }
.banda-lavanda{ background:var(--lavanda); color:#fff; }
.banda-lavanda .eyebrow, .banda-lavanda .subtitulo{ color:#fff; }
.banda-vidrio{ background:var(--s1); }
.divisor-coral{ height:4px; background:var(--coral); }
.divisor-cuatro{ height:5px; display:grid; grid-template-columns:repeat(4,1fr); }
.divisor-cuatro i{ display:block; }

/* ---------- Encabezado de página interior ---------- */
.cabecera{
  position:relative; padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);
  background:var(--f2); border-bottom:4px solid var(--coral);
}
.migas{ font-size:.78rem; color:var(--t2); margin:0 0 1rem; font-weight:500; }
.migas a:hover{ color:var(--coral-txt); }
.migas span{ opacity:.55; margin:0 .45rem; }
.cabecera h1{ font-size:clamp(2rem,4.4vw,3rem); font-weight:800; letter-spacing:-.025em; line-height:1.12; margin:0 0 .8rem; }
.cabecera p{ max-width:58ch; margin:0; color:var(--t2); font-size:1.02rem; }

/* ==================================================================
   PIEZAS REUTILIZABLES
   ================================================================== */
/* Marco para imagen pendiente */
.ph{
  position:relative; border-radius:14px; display:grid; place-items:center;
  background:var(--s1); border:1px dashed var(--bd);
  color:var(--t2); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; text-align:center; padding:1rem;
  aspect-ratio:1/1;
}
.ph.solida{ border-style:solid; }
.ph.ancha{ aspect-ratio:16/10; }

/* Tarjeta genérica */
.tarjeta{
  background:var(--s1); border:1px solid var(--bd); border-radius:16px;
  padding:1.9rem 1.7rem; transition:background .16s, border-color .16s;
}
a.tarjeta:hover{ background:var(--s2); border-color:var(--lavanda); }
.tarjeta h3{ font-size:1.1rem; font-weight:700; margin:0 0 .5rem; letter-spacing:-.01em; }
.tarjeta p{ margin:0; font-size:.92rem; color:var(--t2); line-height:1.7; }
.tarjeta .pie-tarjeta{ margin-top:1.3rem; }

.rejilla{ display:grid; gap:1.5rem; }
.rejilla-2{ grid-template-columns:repeat(2,1fr); }
.rejilla-3{ grid-template-columns:repeat(3,1fr); }
.rejilla-4{ grid-template-columns:repeat(4,1fr); }

/* Icono en caja de color plano */
.caja-ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  flex:0 0 auto; color:var(--blanco); margin-bottom:1.2rem;
}
.ico-coral{ background:var(--coral); }
.ico-lavanda{ background:var(--lavanda); }
.ico-verde{ background:var(--verde); }
.ico-navy{ background:var(--navy-hover); }

/* Etiqueta pequeña */
.etiqueta{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:.3rem .7rem; border-radius:100px;
}
.et-coral{ background:#FBE9E7; color:#A32F27; }
.et-verde{ background:#EDF4E0; color:#4C6A21; }
.et-lavanda{ background:#E9ECF8; color:#3A4795; }

/* ---------- Los cuatro caminos ---------- */
.caminos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.camino{
  position:relative; overflow:hidden; border-radius:16px; padding:2rem 1.6rem 1.8rem;
  background:var(--s1); border:1px solid var(--bd);
  display:flex; flex-direction:column; transition:background .16s;
}
.camino:hover{ background:var(--s2); }
.camino::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.camino.c1::before{ background:var(--coral); }
.camino.c2::before{ background:var(--lavanda); }
.camino.c3::before{ background:var(--verde); }
.camino.c4::before{ background:var(--navy); }
.camino h3{ font-size:1.15rem; font-weight:800; margin:0 0 .5rem; letter-spacing:-.015em; }
.camino p{ margin:0 0 1.4rem; font-size:.9rem; color:var(--t2); flex:1; }

/* ---------- Equipo ---------- */
.equipo{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.persona{ background:var(--s1); border:1px solid var(--bd); border-radius:16px; overflow:hidden; }
.persona .retrato{
  aspect-ratio:1/1; filter:grayscale(1); background:#9BA0A8;
  display:grid; place-items:center; color:#2F333A;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.persona .info{ padding:1.1rem 1.1rem 1.5rem; text-align:center; }
.persona h3{ font-size:.98rem; font-weight:700; margin:0 0 .3rem; letter-spacing:-.01em; }
.persona .cargo{ margin:0 0 .6rem; font-size:.76rem; color:var(--coral-txt); font-weight:600; }
.persona .correo{ font-size:.74rem; color:var(--t2); word-break:break-all; }

/* ---------- Lista de eventos ---------- */
.evento{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:center;
  background:var(--s1); border:1px solid var(--bd); border-radius:14px;
  padding:1.4rem 1.6rem; margin-bottom:1rem; transition:background .16s;
}
.evento:hover{ background:var(--s2); }
.evento .fecha{
  flex:0 0 auto; width:72px; text-align:center; background:var(--f1);
  border-radius:12px; padding:.7rem .4rem; border:1px solid var(--bd);
}
.evento .fecha b{ color:var(--navy); display:block; font-size:1.5rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
.evento .fecha span{ font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--t2); font-weight:700; }
.evento h3{ font-size:1.05rem; font-weight:700; margin:0 0 .3rem; letter-spacing:-.01em; }
.evento p{ margin:0; font-size:.86rem; color:var(--t2); }

/* ---------- Recurso descargable ---------- */
.recurso{
  display:flex; align-items:center; gap:1.1rem;
  background:var(--s1); border:1px solid var(--bd); border-radius:12px;
  padding:1.1rem 1.3rem; transition:background .16s, border-color .16s;
}
.recurso:hover{ background:var(--s2); border-color:var(--lavanda); }
.recurso .tipo{
  flex:0 0 auto; width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background:#FBE9E7; color:#A32F27; font-size:.62rem; font-weight:800; letter-spacing:.06em;
}
.recurso h3{ font-size:.94rem; font-weight:700; margin:0 0 .15rem; }
.recurso p{ margin:0; font-size:.78rem; color:var(--t2); }

/* ---------- Tarjeta blanca ---------- */
/* Pieza destacada. En tema claro se invierte: bloque navy sobre papel. */
.tarjeta-blanca{
  background:var(--navy); color:#fff; border-radius:20px; padding:2.4rem 2.2rem;
}
.tarjeta-blanca h3{ font-size:1.3rem; font-weight:800; margin:0 0 .6rem; letter-spacing:-.015em; }
.tarjeta-blanca p{ color:#D3D9F2; font-size:.95rem; }
/* Sombra sólida de borde duro: recurso de imprenta, no un resplandor */
.sombra-coral{ box-shadow:9px 9px 0 var(--coral); }

/* ---------- FAQ ---------- */
.faq details{
  background:var(--s1); border:1px solid var(--bd); border-radius:14px; margin-bottom:1rem; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 3.4rem 1.25rem 1.7rem;
  font-weight:700; font-size:.97rem; color:var(--navy); position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.7rem; top:50%; width:10px; height:10px;
  border-right:2px solid var(--coral); border-bottom:2px solid var(--coral);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .cuerpo{ padding:0 1.7rem 1.4rem; color:#39415C; font-size:.92rem; line-height:1.75; }

/* ---------- Testimonio ---------- */
.testi{
  background:var(--s1); border:1px solid var(--bd); border-radius:16px;
  padding:2.4rem 2.4rem 2rem; position:relative;
}
.testi .comillas{
  position:absolute; left:1.4rem; top:.7rem; font-family:Georgia,serif;
  font-size:4rem; line-height:1; color:var(--coral);
}
.testi blockquote{ margin:0 0 1.2rem; font-size:1rem; line-height:1.75; color:var(--t1); position:relative; }
.testi .quien{ font-weight:700; font-size:.94rem; }
.testi .quien small{ display:block; font-weight:500; font-size:.78rem; color:var(--t2); margin-top:.15rem; }

/* ---------- Bloque de oración ---------- */
.oracion{
  border-left:5px solid var(--coral); background:var(--s1); border-radius:0 14px 14px 0;
  padding:2rem 2.2rem;
}
.oracion p{ font-size:1.02rem; line-height:1.9; margin:0 0 1rem; color:var(--t1); }
.oracion p:last-child{ margin:0; }
.oracion .firma{ font-size:.82rem; color:var(--t2); font-weight:600; }

/* ---------- Formulario ---------- */
.formulario{ display:grid; gap:1.1rem; }
.campo label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:.4rem; letter-spacing:.02em; }
.campo input, .campo select, .campo textarea{
  width:100%; font:inherit; font-size:.93rem; padding:.8rem 1rem; border-radius:10px;
  background:var(--s1); border:1px solid var(--bd); color:var(--t1);
}
.campo input::placeholder, .campo textarea::placeholder{ color:#8B93AD; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:2px solid var(--coral); outline-offset:1px; border-color:var(--coral);
}
.campo select option{ background:var(--s1); }
.campo textarea{ min-height:130px; resize:vertical; }
.fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.nota-form{ font-size:.76rem; color:var(--t2); margin:0; }

/* Trampa para robots: fuera de la vista pero SIN display:none ni visibility,
   porque muchos bots ignoran los campos así ocultos y entonces no caen. */
.trampa{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}

/* Respuesta del formulario */
.respuesta-form{
  margin:0; font-size:.88rem; font-weight:600; line-height:1.5;
  padding:.75rem 1rem; border-radius:10px; border:1px solid var(--bd);
}
.respuesta-form[data-estado="espera"]{ color:var(--t2); background:var(--s2); }
.respuesta-form[data-estado="exito"]{ color:#2A5A2E; background:#EDF4E0; border-color:#C6DCA4; }
.respuesta-form[data-estado="error"]{ color:#A32F27; background:#FBE9E7; border-color:#F0C4C0; }

/* ---------- Datos de contacto ---------- */
.dato-contacto{ display:flex; gap:1.1rem; margin-bottom:1.8rem; }
.dato-contacto:last-child{ margin-bottom:0; }
.dato-contacto .caja-ico{ width:44px; height:44px; border-radius:11px; margin-bottom:0; }
.dato-contacto h3{ font-size:.95rem; font-weight:700; margin:0 0 .2rem; }
.dato-contacto p{ margin:0; font-size:.92rem; color:var(--t2); }
.dato-contacto a:hover{ color:var(--coral-txt); }

/* ---------- Cifras ---------- */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.cifra b{ display:block; font-size:clamp(2rem,4vw,2.9rem); font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--navy); }
.cifra span{ font-size:.8rem; color:var(--t2); font-weight:600; }

/* ---------- Llamado final ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-weight:800; font-size:clamp(1.8rem,4.2vw,2.7rem); letter-spacing:-.025em; margin:0 0 1rem; }
.cta-final p{ max-width:54ch; margin:0 auto 2rem; color:var(--t2); }
.banda-lavanda .cta-final p{ color:#fff; }
.acciones{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* ==================================================================
   PIE
   ================================================================== */
footer{ background:var(--f1); padding:3.5rem 0 2rem; border-top:1px solid var(--bd); }
.pie-rejilla{ display:grid; grid-template-columns:1.6fr 1fr 1.4fr; gap:2.5rem; padding-bottom:2.5rem; }
.pie-rejilla h4{ font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--t2); margin:0 0 1.1rem; }
.pie-rejilla ul{ list-style:none; margin:0; padding:0; }
.pie-rejilla li{ margin-bottom:.6rem; }
.pie-rejilla a{ font-size:.86rem; color:var(--t2); }
.pie-rejilla a:hover{ color:var(--coral-txt); }
.pie-marca{ width:210px; margin-bottom:1.2rem; }
.pie-rejilla .lema{ font-size:.85rem; color:var(--t2); max-width:34ch; margin:0; }
.redes{ list-style:none; margin:1.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.redes a{ display:inline-flex; align-items:center; gap:.65rem; font-size:.85rem; color:var(--t2); }
.redes a:hover{ color:var(--coral-txt); }
.redes .ico{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--s1); border:1px solid var(--bd); transition:background .16s, border-color .16s, color .16s;
}
.redes a:hover .ico{ background:var(--coral-boton); border-color:var(--coral-boton); color:#fff; }
.pie-bajo{
  border-top:1px solid var(--bd); padding-top:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.76rem; color:var(--t2);
}

/* ==================================================================
   FLOTANTE DE WHATSAPP
   ================================================================== */
.chat{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:90; display:flex; align-items:center; gap:.6rem; }
.chat .globo{
  background:var(--blanco); color:var(--navy); border-radius:8px; padding:.5rem .8rem;
  font-size:.73rem; line-height:1.35; font-weight:500; border:1px solid #C9CEE4;
}
.chat .globo b{ display:block; font-weight:700; }
.chat .wa{
  width:52px; height:52px; border-radius:50%; background:#25D366; display:grid;
  place-items:center; flex:0 0 auto; transition:background .16s;
}
.chat .wa:hover{ background:#1FB855; }

/* ==================================================================
   APARICIÓN AL HACER SCROLL
   ================================================================== */
.rev{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.rev.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==================================================================
   RESPONSIVO
   ================================================================== */
@media (max-width:1040px){
  .nav-links{ display:none; }
  .nav .btn{ display:none; }
  .menu-btn{ display:block; }
  .rejilla-4, .equipo, .caminos, .cifras{ grid-template-columns:repeat(2,1fr); }
  .rejilla-3{ grid-template-columns:repeat(2,1fr); }
  .pie-rejilla{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:640px){
  .rejilla-2,.rejilla-3,.rejilla-4,.equipo,.caminos{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:repeat(2,1fr); }
  .fila-2{ grid-template-columns:1fr; }
  .evento{ grid-template-columns:auto 1fr; }
  .evento .btn{ grid-column:1 / -1; }
  .pie-rejilla{ grid-template-columns:1fr; }
  .pie-bajo{ flex-direction:column; }
  .chat .globo{ display:none; }
  .tarjeta-blanca{ padding:1.8rem 1.4rem; }
  .sombra-coral{ box-shadow:6px 6px 0 var(--coral); }
}