/* ═══ INDEX · estilos propios de esta página ═══
   Lo compartido por todo el sitio vive en comun.css, que se
   carga antes que este archivo. */

/* ── FUENTES OFICIALES IDG (self-hosted, subset latino) ── */
@font-face{font-family:"Monument Extended";src:url("fonts/monument-ultra.woff2") format("woff2");font-weight:800;font-display:swap}

@font-face{font-family:"Aktiv Grotesk";src:url("fonts/aktiv-400.woff2") format("woff2");font-weight:400;font-display:swap}

@font-face{font-family:"Aktiv Grotesk";src:url("fonts/aktiv-500.woff2") format("woff2");font-weight:500;font-display:swap}

@font-face{font-family:"Aktiv Grotesk";src:url("fonts/aktiv-700.woff2") format("woff2");font-weight:700;font-display:swap}

@font-face{font-family:"Monaco";src:url("fonts/monaco.woff2") format("woff2");font-weight:400;font-display:swap}

/* ══════════ TOKENS ══════════ */
:root{
  color-scheme:light;
  --ink:#0C0C0D;          /* Negro IDG */
  --paper:#FFFFFF;        /* Blanco IDG */
  --gris:#6E6E76;         /* Gris IDG */
  --morado:#3E22B2;       /* Morado logo — acento, con moderación */
  --violeta:#5A3FD6;
  --lavanda:#9E8BF2;
  --dark:#131215;         /* base de placeholders fotográficos */
  --hair:rgba(12,12,13,.14);
  --body:"paralucent-text","Aktiv Grotesk",system-ui,sans-serif;
  --display:"Monument Extended","paralucent","Aktiv Grotesk",sans-serif;
  --mono:"Monaco",ui-monospace,monospace;
  --pad:clamp(20px,4.5vw,64px);
  --nav-h:72px;
}

body{
  font-family:var(--body);
  font-size:var(--fz-in);line-height:1.6;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,iframe{max-width:100%;display:block}

/* tipografía display: expandida y pesada (look Monument del manual) */
/* line-height 1.0 y no 0.96: en Monument Extended la tilde de la Ñ sube un
   28% del tamaño de la letra (medido: la N mide 45.5px y la Ñ 63.7px a 65px).
   Con 0.96 faltaban entre 1 y 2px y la tilde tocaba la línea de arriba en
   cualquier título de más de una línea que llevara Ñ o vocal acentuada.
   Se veía en «DONDE NO LLEGA LA IGLESIA, LLEGA UNA SEÑAL».
   El mínimo medido para que no choquen es 0.98; 1.0 deja algo de holgura.
   SI SE CAMBIA LA FUENTE hay que rehacer la cuenta: cada tipografía pone la
   tilde a distinta altura. Se mide comparando «Ñ» contra «N» con
   measureText().actualBoundingBoxAscent. */
.d{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:0;
}

.label{
  font-family:var(--mono);
  font-size:var(--fz-m);font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;
}

/* grano fotográfico (estética del manual: oscura, cálida, con grano) */
.grain{position:relative;background:var(--dark);overflow:hidden;isolation:isolate}

.grain::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.grain::after{ /* calidez sutil */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 20% 100%, rgba(74,52,34,.38), transparent 55%),
             radial-gradient(90% 70% at 85% 0%, rgba(62,34,178,.16), transparent 60%);
}

/* ══════════ NAV ══════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  color:#fff;
  transition:background .35s ease,color .35s ease,box-shadow .35s ease;
}

.nav.solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--hair)}

.brand .logo-n{display:none}

.nav.solid .brand .logo-w,body.menu-open .brand .logo-w{display:none}

.nav.solid .brand .logo-n,body.menu-open .brand .logo-n{display:block}

.menu a:hover::after{width:100%}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border:1.5px solid currentColor;border-radius:var(--r-pill);
  font-size:var(--fz-m);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;
}

.btn-solid{background:currentColor}

.nav .btn-solid{border-color:#fff;background:#fff;color:var(--ink)}

.nav.solid .btn-solid{border-color:var(--ink);background:var(--ink);color:#fff}

/* overlay móvil */
.overlay{
  position:fixed;inset:0;z-index:55;background:var(--paper);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 24px) var(--pad) 34px;
  clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.7,0,.2,1);
}

.overlay nav a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(16px,4.4vw,21px);line-height:1;letter-spacing:.01em;
  padding:19px 0;border-bottom:1px solid var(--hair);
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease,color .2s ease;
}

/* ══════════ HERO / BANNERS ══════════ */
/* 88svh y no 100: con 100 la infobar —los horarios y la dirección— quedaba
   exactamente un píxel por debajo del borde de la pantalla, medido en
   escritorio y en celular. Ahora asoma. Y de paso el hero deja de ser una
   pared sin fondo: al ver que hay algo abajo, la gente baja. */
.hero{position:relative;height:88svh;min-height:540px;color:#fff}

/* En celular vuelve a 100svh. El 88% servía para que asomara la infobar en
   escritorio, pero en una pantalla angosta el título ocupa tres líneas y el
   contenido se subía encima del logo y del botón DAR. Y en celular el
   asomo no hacía falta: ahí la gente desliza sin que se le insinúe nada. */
@media(max-width:700px){ .hero{height:100svh;min-height:520px} }

.slide{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;
}

.slide.on{opacity:1;visibility:visible}

.slide .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(84px,12vh,130px)}

.slide .kicker{margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}

.slide .kicker::before{content:"✚";font-size:var(--fz-s)}

.slide h1,.slide .h1{
  font-size:clamp(34px,7vw,92px);
  max-width:14ch;text-wrap:balance;
}

.slide p{max-width:46ch;margin-top:20px;font-size:clamp(15px,1.4vw,18px);opacity:.92}

.slide .ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

.slide .btn{border-color:#fff}

.slide .btn-solid{background:#fff;color:var(--ink)}

.slide .btn-solid:hover{background:var(--lavanda);border-color:var(--lavanda);color:var(--ink)}

.slide .btn-ghost:hover{background:#fff;color:var(--ink)}

/* hero con foto real vs banner del equipo */
.slide.is-photo .grain-bg{background:transparent}

.slide.is-photo .grain-bg::after{opacity:.4}

.slide.is-banner .hero-veil{background:linear-gradient(to top, rgba(0,0,0,.45), transparent 40%)}

.grain-bg{position:absolute;inset:0}

.bimg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center}

.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.28) 100%)}

.hero-ui{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:26px;display:flex;align-items:center;justify-content:flex-start;color:#fff}

.hero-bottom{position:absolute;left:0;right:0;bottom:clamp(22px,3.4vw,42px);z-index:4}

.hero-bottom .wrap{display:flex;justify-content:flex-start}

.dots{display:flex;gap:8px}

.dots button{width:34px;height:22px;position:relative}

.dots button::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(255,255,255,.4);transition:background .3s}

.dots button.on::before{background:#fff}

/* ══════════ INFO BAR ══════════ */
/* ══ CIERRE EN DOS COLUMNAS ══
   Dar y visitar, lado a lado. Antes eran dos secciones centradas seguidas
   con hasta 300px de relleno entre ellas — ese era el vacío.
   Cada columna es igual a la otra: rótulo, titular, párrafo, botón y su
   letra chica. Al ser simétricas no hay hueco que rellenar, que es lo que
   hundió los intentos de columnas dentro de una sola sección. */
.cierre{background:var(--paper);color:var(--ink);border-top:1px solid var(--hair);
  padding:clamp(62px,7.5vw,104px) 0}

/* ── Las dos columnas con el MISMO peso ──
   Sin esto, la derecha pesaba más: su titular ocupa dos líneas y su botón
   es más largo, así que cada elemento caía a distinta altura que su pareja.

   Con subgrid las dos columnas comparten las filas de la fila madre, así
   que rótulo, titular, párrafo, botón y pie quedan a la MISMA altura en las
   dos. Medido: las cinco filas coinciden al píxel y las dos columnas miden
   335px exactos.

   Si un navegador viejo no soporta subgrid, cada columna vuelve a ser una
   pila normal: se pierde la alineación fina pero nada se rompe. */
.cierre-par{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,80px);grid-template-rows:auto auto 1fr auto auto;
  align-items:start}

.cierre-col{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;gap:14px;
  align-content:start;justify-items:start}

@supports not (grid-template-rows: subgrid){
  .cierre-col{display:flex;flex-direction:column;align-items:flex-start}
}

.cierre-col .label{color:var(--gris);display:inline-flex;align-items:center;gap:10px}

.cierre-col .label::before{content:"";width:26px;height:1.5px;background:var(--morado)}

.cierre-col h2{font-size:clamp(28px,3.4vw,46px);margin:0;max-width:14ch}

.cierre-col .lead{margin:0;color:#3c3c3f;font-size:clamp(15px,1.3vw,17px);max-width:42ch}

/* Mismo ancho los dos: «Dar ahora» mide 151px y «Planifica tu visita» 241.
   Uno al lado del otro, el más largo parecía la acción importante. */
.cierre-col .btn{margin-top:6px;border-color:var(--ink);background:var(--ink);color:#fff;
  padding:17px 38px;font-size:var(--fz-base);min-width:248px;text-align:center;
  display:inline-flex;align-items:center;justify-content:center}

.cierre-col .btn:hover{background:var(--morado);border-color:var(--morado);color:#fff}

.cierre-col small{color:var(--gris);font-family:var(--mono);font-size:var(--fz-mini);
  letter-spacing:.14em;text-transform:uppercase}

/* La línea que las separa, centrada en el hueco — igual que en la infobar */
.cierre-col:last-child{position:relative}

.cierre-col:last-child::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(clamp(36px,5vw,80px) / -2);width:1px;background:var(--hair)}

@media(max-width:860px){
  .cierre-par{grid-template-columns:1fr;gap:44px;grid-template-rows:none}
  .cierre-col{display:flex;flex-direction:column;align-items:flex-start;grid-row:auto}
  .cierre-col .btn{min-width:0;width:100%;max-width:320px}
  .cierre-col:last-child::before{left:0;right:0;top:-22px;bottom:auto;width:auto;height:1px}
}

/* ══════════════════════════════════════════════════════════════
   VIDEO DE FONDO EN EL BANNER DEL EVENTO
   ══════════════════════════════════════════════════════════════
   La imagen SIEMPRE está debajo. El video se pone encima solo cuando de
   verdad empieza a reproducirse, y por eso arranca invisible: si falla,
   no se ve un rectángulo negro, se ve la imagen.

   Se respeta «reducir movimiento» del sistema. Para quien lo tiene puesto
   —mareos, migrañas, epilepsia fotosensible— un bucle que no para de
   moverse es un problema real, no una preferencia estética. */
.ph video.ev-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;pointer-events:none}

.ph video.ev-video.suena{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ph video.ev-video{display:none}
}

.infobar{border-bottom:1px solid var(--hair)}

/* ── Por qué los divisores van con ::before y no con border-left ──
   Con border-left, el divisor queda pegado al borde de la celda y hay que
   separar el texto con padding-left. Eso dejaba la PRIMERA celda con el
   texto pegado a su borde (sangría 0, alineada con la página) y las otras
   tres con 26px de sangría. Medido: la fila se veía torcida y era eso.
   Ahora hay hueco entre columnas y el divisor va CENTRADO en ese hueco.
   Resultado: las cuatro celdas con sangría 0, la primera alineada con el
   resto de la página, y 22px iguales a cada lado de cada divisor. */
.infobar .wrap{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(26px,3.4vw,48px)}

.infobar .wrap.con-radio{grid-template-columns:repeat(4,1fr)}

/* Con cuatro columnas cada celda tiene ~333px. A 19px el texto se partía.
   A 16.5 entran unas 35 letras, y con el mes escrito el texto más largo
   mide 31 — cabe en una línea con margen. */
.infobar .wrap.con-radio b{font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.35}

/* Canción arriba, artista abajo, las dos con corte de puntos suspensivos.
   inline-block y NO block: con block el elemento ocupaba todo el ancho de
   la celda y el subrayado del enlace se estiraba con él — una raya de 290px
   debajo de un título de 103px. Con inline-block la caja mide lo que mide
   el texto, y el subrayado lo abraza. */
#cell-radio b,#cell-radio .cell-sub{display:inline-block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}

.cell-sub{font-size:var(--fz-m);color:var(--gris);margin-top:-2px}

/* El rótulo de esta celda no se parte: es un flex con el punto latiendo, y
   al pasar a dos líneas el punto quedaba flotando en el medio. */
.infobar .cell.hoy .label{align-items:flex-start;white-space:nowrap}

/* ── OJO CON LA ESPECIFICIDAD ──
   Estas reglas repiten «.con-radio» a propósito. La regla de cuatro
   columnas es «.infobar .wrap.con-radio» (dos clases) y si aquí se
   escribiera solo «.infobar .wrap» (una clase) perdería el pulso: el
   celular se quedaba con las cuatro columnas de 110px y cada texto se
   partía en cuatro líneas. Pasó. */
@media(max-width:1100px){
  .infobar .wrap,
  .infobar .wrap.con-radio{grid-template-columns:repeat(2,1fr)}
  /* al pasar a dos columnas, la 3 y la 4 empiezan fila: su divisor vertical
     no aplica, se cambia por una línea arriba */
  .infobar .cell:nth-child(3)::before{display:none}
  .infobar .cell:nth-child(n+3){border-top:1px solid var(--hair);padding-top:20px}
  .infobar .cell:nth-child(-n+2){padding-bottom:20px}
}

@media(max-width:640px){
  .infobar .wrap,
  .infobar .wrap.con-radio{grid-template-columns:1fr}
  .infobar .cell{padding:16px 0}
  .infobar .cell + .cell::before{display:none}
  .infobar .cell + .cell{border-top:1px solid var(--hair)}
  .infobar .cell:first-child{padding-top:22px}
  .infobar .cell:last-child{padding-bottom:22px}
}

.infobar .cell{padding:26px 0;display:flex;flex-direction:column;gap:6px;position:relative}

.infobar .cell + .cell::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(clamp(26px,3.4vw,48px) / -2);width:1px;background:var(--hair)}

.infobar .label{color:var(--gris)}

/* Cuando es hoy, se nota. Un punto que late y el rótulo en morado: es el
   dato más útil de la página en ese momento exacto. */
.infobar .cell.hoy .label{color:var(--morado);display:flex;align-items:center;gap:7px}

.infobar .cell.hoy .label::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--morado);animation:hoy-late 1.8s ease-in-out infinite}

@keyframes hoy-late{0%,100%{opacity:1}50%{opacity:.3}}

@media(prefers-reduced-motion:reduce){ .infobar .cell.hoy .label::before{animation:none} }

.infobar b{font-size:clamp(16px,1.5vw,19px);font-weight:700;letter-spacing:-.01em}

.infobar a b{border-bottom:2px solid var(--ink);transition:color .2s,border-color .2s}

.infobar a:hover b{color:var(--morado);border-color:var(--morado)}

/* ══════════ SECCIONES ══════════ */
.sec{padding:clamp(72px,10vw,140px) 0}

.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(34px,4.5vw,60px)}

.sec-head h2{font-size:clamp(28px,5vw,64px)}

/* video */
.video-split{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,4vw,56px);align-items:start}

.video-frame{position:relative;aspect-ratio:16/9;background:var(--dark);border-radius:var(--r-s);overflow:hidden}

.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vplay{position:absolute;inset:0;cursor:pointer;display:block;width:100%;height:100%}

.vplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.vp-veil{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%)}

.vp-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .25s ease,background .25s ease,color .25s ease;box-shadow:0 14px 40px rgba(0,0,0,.35)}

.vp-btn svg{margin-left:4px}

.vplay:hover .vp-btn{transform:translate(-50%,-50%) scale(1.08);background:var(--morado);color:#fff}

.vp-tag{position:absolute;left:22px;bottom:20px;color:#fff;letter-spacing:.16em}

.video-side{display:flex;flex-direction:column;gap:16px}

.video-side .label{color:var(--gris)}

.vtitle{font-size:clamp(17px,1.7vw,21px);font-weight:700;letter-spacing:-.01em;line-height:1.3}

.vdesc{color:#3c3c3f;font-size:var(--fz-base);display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}

.vmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding-top:12px;border-top:1px solid var(--hair)}

.auto-pill{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;padding:9px 15px;border:1px solid var(--hair);border-radius:var(--r-pill);font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.14em;text-transform:uppercase;color:#4a4a4e}

.auto-pill i{width:7px;height:7px;border-radius:50%;background:var(--morado);animation:pulse 1.8s ease-in-out infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fz-base);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--ink);padding-bottom:4px;align-self:flex-start;transition:color .2s,border-color .2s}

.link-arrow:hover{color:var(--morado);border-color:var(--morado)}

.link-arrow svg{transition:transform .25s}

.link-arrow:hover svg{transform:translateX(4px)}

/* visita */
.visit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:start}

.faq{border-top:1px solid var(--hair);margin-top:34px}

.faq-item{border-bottom:1px solid var(--hair)}

.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;text-align:left;font-size:clamp(16px,1.5vw,19px);font-weight:700}

.faq-q .x{position:relative;width:16px;height:16px;flex:0 0 auto}

.faq-q .x::before,.faq-q .x::after{content:"";position:absolute;background:var(--ink);inset:7px 0;transition:transform .3s ease}

.faq-q .x::after{transform:rotate(90deg)}

.faq-item.open .faq-q .x::after{transform:rotate(0)}

.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}

.faq-a p{padding:0 34px 22px 0;color:#3c3c3f;font-size:var(--fz-base)}

.visit-card{
  border:1.5px solid var(--ink);border-radius:var(--r-s);padding:clamp(26px,3vw,40px);
  position:sticky;top:calc(var(--nav-h) + 20px);
  box-shadow:8px 8px 0 rgba(12,12,13,.06);
}

.visit-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.7vw,21px);line-height:1.05;margin-bottom:8px}

.visit-card > p{color:#3c3c3f;font-size:var(--fz-base);margin-bottom:22px}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}

.field label{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.16em;text-transform:uppercase;color:#4a4a4e}

.field input,.field select{
  font:inherit;font-size:var(--fz-base);padding:13px 14px;border:1px solid rgba(12,12,13,.25);
  border-radius:var(--r-s);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%;
}

.field input:focus,.field select:focus{outline:0;border-color:var(--morado);box-shadow:0 0 0 3px rgba(62,34,178,.12)}

.visit-card .btn{width:100%;border-color:var(--ink);background:var(--ink);color:#fff;margin-top:6px}

.visit-card .btn:hover{background:var(--morado);border-color:var(--morado)}

.form-ok{display:none;margin-top:14px;padding:13px 15px;border:1px solid var(--morado);border-radius:var(--r-s);color:var(--morado);font-size:var(--fz-base);line-height:1.45}

.form-ok.show{display:block}

.demo-note{margin-top:14px;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

/* ministerios (tarjetas verticales con nombre encima — primeras entregas) */
.min-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.min-card{position:relative;aspect-ratio:3/4;border-radius:var(--r-s);color:#fff;display:flex;align-items:flex-end;overflow:hidden;transition:transform .35s cubic-bezier(.22,.7,.3,1)}

.min-card:hover{transform:translateY(-8px)}

.min-card .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.min-card.grain::after{opacity:.45}

.min-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to top, rgba(0,0,0,.62), transparent 55%)}

.min-card .inner{position:relative;z-index:2;padding:22px;display:flex;flex-direction:column;gap:8px;width:100%}

.min-card .label{opacity:.95;font-size:var(--fz-s);letter-spacing:.14em}

.min-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(15px,1.5vw,21px);line-height:1.05}

.min-card .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}

.min-card:hover .go{opacity:1;transform:none;color:var(--lavanda)}

/* eventos — carrusel oscuro centrado con auto-avance */
.evsec{background:var(--ink);color:#fff;padding:clamp(42px,5.5vw,72px) 0}

.evsec .sec-head{align-items:center;text-align:center;margin-bottom:clamp(22px,3.2vw,38px)}

.evsec .sec-head .label{color:var(--lavanda)}

.evsec .sec-head .label::before{display:none}

.evsec .sec-head h2{color:#fff}

.evsec .sec-head .lead{color:#b7b7bd;margin:0 auto}

.ec-viewport{overflow:hidden}

.ec-track{display:flex;gap:22px;transition:transform .65s cubic-bezier(.25,.7,.25,1);will-change:transform}

.ec-slide{flex:0 0 min(1180px,90vw);opacity:.4;transition:opacity .5s ease}

.ec-slide.on{opacity:1}

.ec-slide .ph{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-s);background:#000}

.ec-slide img{width:100%;height:100%;object-fit:cover;display:block}

.ec-caption{margin-top:16px;text-align:center;transition:opacity .3s ease;min-height:1.5em}

.ec-caption b{font-size:clamp(15px,1.6vw,19px);font-weight:700;letter-spacing:-.01em;color:#fff}

.ec-caption span{color:#9a9aa1;font-size:var(--fz-m)}

.ec-caption span::before{content:" · ";color:#5a5a60}

.ec-dots{display:flex;justify-content:center;gap:9px;margin-top:20px}

.ec-dots button{width:8px;height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.35);transition:width .3s ease,background .3s ease}

.ec-dots button.on{width:26px;background:#fff}

.evsec .footnote{text-align:center;color:#7f7f86}

.ec-all{border-color:#fff;color:#fff}

.ec-all:hover{background:#fff;color:var(--ink)}

.footnote{margin-top:18px;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

/* galería experiencia (mosaico) */
.gallery{padding:clamp(30px,4vw,60px) 0 clamp(72px,10vw,140px)}

.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.mosaic .tile{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-s);position:relative}

.mosaic .tile.w{grid-column:span 2;aspect-ratio:16/10}

.mosaic .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .9s ease}

/* contador oración */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 20px}

.cd div{border:1px solid var(--hair);border-radius:var(--r-s);padding:12px 6px;text-align:center}

.cd b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(18px,2.2vw,26px);line-height:1}

.cd span{font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

.map-embed{margin-top:clamp(26px,4vw,48px);aspect-ratio:21/9;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--hair);filter:grayscale(1) contrast(1.05)}

.map-embed iframe{width:100%;height:100%;border:0;display:block}

/* del blog, en el inicio */
.hb{padding:clamp(52px,7vw,104px) 0;border-top:1px solid var(--hair)}

.hb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3.4vw,42px)}

.hb-head h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,3.6vw,46px);line-height:1.02}

.hb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,34px) 20px}

.hb-card{display:block}

.hb-card .ph{aspect-ratio:16/10;border-radius:var(--r-s);overflow:hidden;background:var(--dark)}

.hb-card .ph.sin{display:grid;place-items:center;background:#f4f4f5;color:var(--gris);font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.16em;text-transform:uppercase}

.hb-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}

.hb-card:hover img{transform:scale(1.04)}

.hb-card h3{margin-top:14px;font-size:var(--fz-lg);font-weight:800;letter-spacing:-.01em;line-height:1.3}

.hb-card p{margin-top:7px;color:#3c3c3f;font-size:var(--fz-base);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.hb-card .meta{margin-top:9px;font-family:var(--mono);font-size:var(--fz-mini);letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}

@media (max-width:1020px){.hb-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:640px){.hb-grid{grid-template-columns:1fr}}

/* whatsapp */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .25s ease;
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1020px){
  .min-grid{grid-template-columns:repeat(2,1fr)}
  .video-split{grid-template-columns:1fr}
  .visit{grid-template-columns:1fr}
  .visit-card{position:static}
}

@media (max-width:760px){
  .menu{display:none}
  .burger{display:flex}
  .nav .btn-solid{padding:11px 20px}
  .brand .logo{height:27px}
  .infobar .wrap{grid-template-columns:1fr}
  .infobar .cell{padding:18px 0}
  .infobar .cell + .cell{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:18px}
  .f-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .map-embed{aspect-ratio:4/3}
}

@media (max-width:480px){
  .f-brand p{white-space:normal}
  .min-grid{grid-template-columns:1fr}
  .min-card{aspect-ratio:4/3}
  .f-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   PANTALLAS SIN RATÓN · DESHACER LOS EFECTOS DE HOVER
   ══════════════════════════════════════════════════════════════
   En un teléfono no hay puntero, pero al tocar un elemento el navegador le
   aplica :hover Y SE QUEDA PEGADO hasta que tocas en otro lado. Eso hacía
   que un título tocado se quedara morado, que una foto se quedara con el
   zoom puesto, y que los enlaces del pie cambiaran de color al deslizar el
   dedo por encima.

   Es «hover: none» y no «max-width» a propósito: en un portátil con pantalla
   táctil el ratón sigue funcionando, y ahí no se desactiva nada. Decide el
   dispositivo, no el ancho.

   VA AL FINAL DEL <style>. Si se mueve hacia arriba, las reglas de hover que
   queden después vuelven a ganar y el problema regresa.
   ══════════════════════════════════════════════════════════════ */
@media (hover:none){
  /* textos y enlaces que cambiaban de color */
  .bcard:hover h3,.bl-dest a:hover h2,.book:hover .go,.more:hover,.ar-back:hover,
  .overlay nav a:hover,.f-col a:hover,.f-legal a:hover,.f-legal .powered:hover,
  .menu a:hover,.ecard:hover h3,.mcard:hover h3,.gcard:hover h3,.scard:hover h3,
  .links a:hover{color:inherit;background:inherit;border-color:inherit}

  /* fotos que se quedaban con el zoom */
  .bcard:hover img,.bl-dest a:hover img,.book:hover img,.exp:hover img,
  .mblock:hover img,.ecard:hover img,.mcard:hover img,.gcard:hover img,
  .scard:hover img,.f-legal .powered a:hover img{transform:none}

  /* cajas y botones que se levantaban o cambiaban de fondo */
  .who:hover,.btn:hover,.f-social a:hover,.wa:hover,.links a:hover,
  .ecard:hover,.mcard:hover,.gcard:hover,.scard:hover{transform:none}
  .nav .btn-solid:hover,.books-cta .btn:hover,.cta-final .btn:hover,
  .gr-cta .btn:hover,.mdl-save:hover,.mdl-x:hover,.cierre-col .btn:hover,
  .links a.solid:hover{background:inherit;border-color:inherit;color:inherit}

  /* la flecha de «leer» que se separaba */
  .bl-dest a:hover .leer{gap:10px;color:inherit;border-color:inherit}
}