/* =====================================================================
   2.º Festival Internacional Inmobiliario de Las Terrenas
   Hoja de estilos compartida por index.html y primera-edicion.html

   Estaba dentro de index.html hasta que apareció la segunda página. Se sacó
   acá para no tener que hacer cada cambio dos veces, que es exactamente como
   se desincronizan los sitios de varias páginas.

   Las rutas de las imágenes son relativas a ESTE archivo. Como vive en la
   raíz, junto a los HTML, siguen siendo válidas tal cual.
   ===================================================================== */

:root{
  --logo:url("assets/logo.png");
  --fede:url("assets/fede.png");
  --destino:url("assets/destino.jpg");

  --deep:#1a302f;
  --deep-2:#142625;
  --ink:#464646;
  --navy:#31506b;
  /* AA sobre los tres fondos claros del sitio (#fff, surface, surface-2).
     El tono mas claro nunca baja de 4.5:1 sobre surface-2, el fondo mas oscuro de los tres. */
  --gray:#6f6f6f;
  --gray-2:#666;
  --seafoam:#9fcbca;
  --sage:#71ada6;
  --primary:#2c6767;
  --wa:#25d366;
  --surface:#f8fafa;
  --surface-2:#f2f4f4;
  --white:#fff;
  --outline:#d8dede;

  --display:'Manrope',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --max:1280px;
  --pad:48px;
  /* Valor de reserva. En cuanto carga el script se sustituye por la medida real
     del encabezado, que cambia si cambia el alto del logo o de la barra Organiza. */
  --nav-h:154px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
section[id],[id="galeria"]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h2{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(28px,3.4vw,44px);color:var(--navy);margin:0 0 18px}
h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:20px;margin:0 0 10px;color:var(--navy)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--primary);display:block;margin-bottom:14px}
.horizon{height:2px;border:0;margin:0 0 26px;width:180px;
  background:linear-gradient(90deg,var(--sage) 0%,var(--seafoam) 45%,rgba(159,203,202,0) 100%)}
.lead{font-size:17px;line-height:1.72;color:var(--ink);max-width:62ch}
p{margin:0 0 16px}

/* ---------- ENCABEZADO ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60}
.hdr-main{background:rgba(248,250,250,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(216,222,222,.9)}
.hdr-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px var(--pad)}
.mark{display:block;background:var(--logo) no-repeat left center/contain;width:172px;height:58px;flex:0 0 auto}
.tools{display:flex;align-items:center;gap:9px}
.orgbar{background:#fff;border-bottom:1px solid var(--outline)}
.orgbar-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:center;
  gap:13px;padding:8px var(--pad)}
.orgbar .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.orgbar .vr{width:1px;height:26px;background:var(--outline)}
.fede{display:block;background:var(--fede) no-repeat center/contain;width:92px;height:52px;flex:0 0 auto}

.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:transparent;
  border:1px solid transparent;color:var(--ink);font-family:var(--display);font-weight:600;font-size:13.5px;
  padding:11px 15px;border-radius:8px;transition:background .18s,border-color .18s}
.dd-btn:hover{background:#fff;border-color:var(--outline)}
.dd-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.chev{width:9px;height:9px;border-right:1.6px solid;border-bottom:1.6px solid;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s}
.dd.open .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:19px;height:14px}
.burger i{display:block;height:1.9px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.dd.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dd.open .burger i:nth-child(2){opacity:0}
.dd.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dd-panel{position:absolute;top:calc(100% + 9px);right:0;min-width:182px;background:#fff;
  border:1px solid var(--outline);border-radius:11px;padding:7px;box-shadow:0 16px 38px rgba(26,48,47,.2);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s;z-index:20}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-panel a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);padding:10px 12px;border-radius:7px}
.dd-panel a:hover{background:var(--surface);color:var(--primary)}
.dd-panel .code{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--gray)}
/* El idioma activo tiene que distinguirse del simple paso del ratón. Antes los
   dos usaban un fondo de intensidad parecida y cualquier opción bajo el cursor
   parecía la seleccionada. */
.dd-panel a[aria-current]{background:var(--primary);color:#fff;font-weight:700}
.dd-panel a[aria-current] .code{color:rgba(255,255,255,.82)}
.dd-panel a[aria-current]:hover{background:var(--primary);color:#fff}
/* idiomas todavia sin traducir: se anuncian, no se ofrecen.
   Son <span>, no <a>: sin destino no debe haber enlace. */
.dd-panel .pronto{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--gray);
  padding:10px 12px;border-radius:7px;cursor:default}
.dd-panel .pronto .code{font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.menu-panel{min-width:256px;padding:9px}
.menu-panel a{justify-content:flex-start}
.menu-panel .sep{height:1px;background:var(--outline);margin:7px 10px}
.menu-panel .hl{color:var(--primary)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  white-space:nowrap;font-family:var(--display);font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:999px;transition:transform .18s,background .18s,box-shadow .18s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
/* El foco de teclado solo estaba resuelto en el menu y en las flechas del carrusel.
   Los botones de accion, que son el destino real de la pagina, quedaban con el
   contorno por defecto del navegador: sobre verde saturado casi no se ve. */
.btn:focus-visible,.wa-btn:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.btn-light:focus-visible{outline-color:#fff}
.btn-solid{background:var(--primary);color:#fff}
.btn-solid:hover{background:#245757}
.btn-line{border:1.6px solid var(--primary);color:var(--primary);background:transparent}
.btn-line:hover{background:rgba(44,103,103,.08)}
.btn-light{border:1.6px solid rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.1)}
.btn-light:hover{background:rgba(255,255,255,.2)}
.hdr .btn{padding:12px 22px;font-size:14px}

.wa-btn{display:inline-flex;align-items:center;gap:14px;text-decoration:none;background:var(--wa);color:#06301a;
  border-radius:999px;padding:13px 28px 13px 18px;box-shadow:0 10px 28px rgba(37,211,102,.32);
  transition:transform .18s,box-shadow .18s}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,211,102,.44)}
.wa-btn .glyph{width:40px;height:40px;fill:currentColor;flex:0 0 auto}
.wa-btn .txt{text-align:left;line-height:1.22}
.wa-btn .t1{display:block;font-family:var(--display);font-weight:800;font-size:17px}
.wa-btn .t2{display:block;font-size:12px;opacity:.74}

/* ---------- HERO ---------- */
/* Geometria del hero (3:2). Logo, pastillas y boton viven en UNA columna apilada,
   centrada en la mancha clara de la foto. El ancho de la columna manda: el logo
   ocupa el 100% de ella y su alto sale de la proporcion 760:519.
   La franja legible de la foto llega hasta el 75% del alto; por debajo entran
   las palmeras y el texto oscuro deja de leerse. */
/* El hero conserva su proporcion 3:2, pero nunca supera el alto util de la pantalla.
   Sin este tope, en un monitor de 2560 el hero media 1707 px y el boton quedaba
   fuera de vista; en un portatil de 1366x768 se cortaba por 64 px. Al recortar el
   alto, la foto se recorta arriba y abajo (background-size:cover), y el bloque de
   contenido se recoloca solo porque va centrado, no clavado a porcentajes fijos. */
/* El hero ocupa el ancho completo y su alto es el menor entre dos cosas: el que le
   corresponde por proporcion 3:2 (66.67vw) y el que queda libre en pantalla.

   OJO, aqui hubo un error: antes esto estaba escrito como aspect-ratio:3/2 mas
   max-height. El navegador recortaba el alto y despues ACHICABA EL ANCHO para
   conservar la proporcion, con lo que el hero dejaba una franja blanca a la derecha
   de casi un tercio de la pantalla. Dando el alto directo no hay proporcion que
   conservar: el ancho se queda al 100% y la caja simplemente se achata.
   La foto no se deforma porque .hero-bg usa background-size:cover. */
.hero{position:relative;margin-top:var(--nav-h);
  height:min(66.67vw, calc(100vh - var(--nav-h)));
  height:min(66.67vw, calc(100svh - var(--nav-h)));
  overflow:hidden;isolation:isolate}
/* El fondo vive en su propia capa: se mueve solo el paisaje, el contenido queda quieto.
   transform-origin en el centro del velo (24.9% / 46.8%) para que al ampliarse
   la zona aclarada se expanda ALREDEDOR del logo y nunca lo destape. */
@media (min-width:1500px){.hero-bg{background-image:url("assets/hero-2400.jpg");background-image:image-set(url("assets/hero-2400.webp") type("image/webp"),url("assets/hero-2400.jpg") type("image/jpeg"))}}
.hero-bg{position:absolute;inset:0;z-index:0;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  background-image:url("assets/hero-1800.jpg");background-image:image-set(url("assets/hero-1800.webp") type("image/webp"),url("assets/hero-1800.jpg") type("image/jpeg"));
  transform-origin:24.9% 46.8%;
  animation:respirar 26s ease-in-out infinite alternate;
  will-change:transform;backface-visibility:hidden}
@keyframes respirar{from{transform:scale(1)}to{transform:scale(1.11)}}
/* --ancho-logo: unica perilla del hero. Va en vw porque el hero ocupa el ancho
   completo de la pantalla, asi que 33vw es el mismo 33% de antes.

   La columna NO tiene ancho fijo: usa max-content, o sea que se ajusta a su pieza
   mas ancha. Antes valia lo contrario y era un problema: la columna se dimensionaba
   para el logo y le imponia ese ancho a la pastilla de ubicacion, que es mas larga
   y terminaba partida en dos renglones en casi todos los portatiles. Ahora el logo
   manda su tamano y la pastilla, si necesita mas, ensancha la columna sin agrandarlo.
   El max-width evita que la columna invada la mitad derecha de la foto. */
.hero-col{--ancho-logo:33vw;
  position:absolute;z-index:1;left:3.3%;top:46%;transform:translateY(-50%);
  width:max-content;max-width:52vw;
  display:flex;flex-direction:column;align-items:center;gap:22px}
.hero .h1{width:var(--ancho-logo);margin:0}
.hero .art{display:block;width:100%;aspect-ratio:760/519;background:var(--logo) no-repeat center/contain}
.hero .datos{width:100%}
.hero .accion{width:100%;display:flex;justify-content:center}
.pills{display:flex;flex-direction:column;align-items:center;gap:11px}
/* el texto de la pastilla se encoge con la pantalla: la direccion completa es larga
   y a 1024px no entraba en la columna */
.pill{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:999px;
  border:1px solid rgba(26,48,47,.3);background:rgba(255,255,255,.62);
  color:var(--deep);font-family:var(--display);font-weight:600;
  font-size:clamp(12px,1.05vw,15px);text-align:left}
.pill svg{width:16px;height:16px;opacity:.8;flex:0 0 auto}
/* Pantallas anchas pero bajas (los 1366x768 y 1280x800 de siempre): con el hero ya
   recortado, el bloque al 33% quedaba pegado a los bordes. Se achica para que respire.
   Ojo: la condicion es de ALTO, no de ancho; no tiene nada que ver con el corte movil. */
@media (min-width:761px) and (max-height:820px){
  .hero-col{--ancho-logo:26vw;gap:16px}
}

/* ---------- SECCIONES ---------- */
.sec{padding:96px 0;content-visibility:auto;contain-intrinsic-size:auto 700px}
#registro{content-visibility:visible}
.sec-alt{background:var(--surface)}
.sec-dark{background:var(--deep);color:#fff}
.sec-dark h2{color:#fff}
.sec-dark .kicker{color:var(--seafoam)}
.sec-dark .lead{color:rgba(255,255,255,.82)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.b{border-radius:16px;padding:30px}
.b h3{margin-bottom:8px}
.b p{font-size:14.5px;line-height:1.62;color:var(--gray-2);margin:0}
.b-1{grid-column:span 8;background:var(--surface-2);border:1px solid var(--outline)}
.b-2{grid-column:span 4;grid-row:span 2;background:var(--deep);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.b-2 h3{color:#fff}.b-2 p{color:rgba(255,255,255,.72)}
.b-3{grid-column:span 4;background:var(--surface-2);border:1px solid var(--outline)}
.b-4{grid-column:span 4;background:rgba(159,203,202,.16);border:1px solid rgba(113,173,166,.4)}
/* La quinta tarjeta ocupa una fila entera. La fila 2 ya esta llena: b-3 y b-4
   suman 8 columnas y b-2 se lleva las 4 restantes al extenderse hacia abajo. */
.b-5{grid-column:span 12;background:var(--surface-2);border:1px solid var(--outline);
  display:grid;grid-template-columns:1fr 1.05fr;gap:38px;align-items:center}
.b-5 .otras{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.b-5 .otras li{display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--outline);border-radius:999px;padding:9px 18px 9px 15px;
  background:#fff;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--deep)}
/* Iconos a 17 px: a ese tamano solo se leen formas simples, por eso cada uno
   son dos o tres trazos y nada mas. */
.b-5 .otras svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--primary);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* el ultimo no es una experiencia concreta sino la promesa de que hay mas */
.b-5 .otras li.mas{background:transparent;border-style:dashed;color:var(--primary)}
.b-5 .otras li.mas svg{stroke:var(--sage)}
.b-2 ul{list-style:none;margin:24px 0 0;padding:0}
.b-2 li{display:flex;align-items:center;gap:9px;font-size:14px;color:rgba(255,255,255,.86);margin-bottom:10px}
.b-2 li svg{width:15px;height:15px;fill:var(--seafoam);flex:0 0 auto}
.ico{width:34px;height:34px;fill:none;stroke:var(--primary);stroke-width:1.6;margin-bottom:14px}
.b-2 .ico{stroke:var(--seafoam)}

/* patrocinio */
/* ---------- PATROCINIO Y STANDS ---------- */

/* --- paquetes de patrocinio ---
   Dos representaciones del MISMO contenido, generadas a la vez:
   la tabla compara los cinco niveles de un vistazo y es lo que necesita quien
   decide cuánto invertir; las tarjetas apiladas son la única forma legible de
   leer 14 atributos por 5 niveles en un teléfono. Una se muestra y la otra se
   oculta según el ancho; nunca se ven las dos. */
/* overflow-x:auto es lo que impide que la tabla empuje la pagina entera.
   Con la primera columna fija, al desplazar se mantiene a la vista la
   etiqueta de cada fila. */
.comparativa-caja{margin-top:36px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.comparativa-caja:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:12px}
.comparativa{width:100%;border-collapse:separate;border-spacing:0;font-size:13.6px}
.comparativa th,.comparativa td{padding:13px 14px;text-align:center;vertical-align:middle;
  border-bottom:1px solid var(--outline)}
/* la columna de etiquetas se queda fija al desplazar en horizontal */
.comparativa th[scope="row"]{text-align:left;font-weight:500;color:var(--ink);
  position:sticky;left:0;background:#fff;z-index:2;min-width:230px;border-right:1px solid var(--outline)}
.comparativa th[scope="row"] em{display:block;font-style:normal;font-size:11.5px;color:var(--gray);margin-top:2px}
.comparativa thead th{border-bottom:2px solid var(--outline);vertical-align:top;padding:0 0 18px}
.comparativa thead th:first-child{background:#fff}
/* display:block es imprescindible: en un <span> en linea el border-top se
   dibuja como trocitos sueltos alrededor del texto, no como una franja. */
.nivel-cab{display:block;border-top:4px solid var(--tono);border-radius:12px 12px 0 0;
  padding:16px 14px 0}
/* min-height para que los precios queden a la misma altura aunque un nombre
   ocupe dos renglones */
.nivel-cab .n{display:flex;align-items:flex-end;justify-content:center;min-height:2.6em;
  font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--navy);line-height:1.25}
.nivel-cab .p{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:23px;color:var(--deep);margin:8px 0 10px}
.nivel-cab .rol{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tono);margin-bottom:8px}
.nivel-cab .f{display:block;font-size:12.3px;line-height:1.5;color:var(--gray-2);font-weight:400}
.comparativa tbody tr:nth-child(even) td{background:var(--surface)}
.comparativa tbody tr:nth-child(even) th[scope="row"]{background:var(--surface)}
.comparativa .si svg{width:17px;height:17px;fill:none;stroke:var(--primary);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.comparativa .no{color:var(--outline);font-size:16px}
.comparativa td.destacado{background:rgba(49,80,107,.05)}
.comparativa tbody tr:nth-child(even) td.destacado{background:rgba(49,80,107,.09)}

/* --- el mismo contenido, apilado por nivel, para pantallas chicas ---
   Aqui NO se repite la tabla: para el Colaborador, diez de las catorce filas
   son un guion, y una lista de diez guiones tapa las cuatro cosas que si
   incluye. Se listan los beneficios reales y lo que falta se resume al pie. */
.planes-movil{display:none}
.plan-m{background:#fff;border:1px solid var(--outline);border-radius:16px;overflow:hidden;
  margin-bottom:16px}
.plan-m .cab{border-top:4px solid var(--tono);padding:20px 20px 18px}
.plan-m .rol{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tono);display:block;margin-bottom:7px}
.plan-m .n{font-family:var(--display);font-weight:800;font-size:18px;color:var(--navy);display:block}
.plan-m .p{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:27px;
  color:var(--deep);display:block;margin:7px 0 9px}
.plan-m .f{font-size:14px;line-height:1.6;color:var(--gray-2)}
.plan-m ul{list-style:none;margin:0;padding:16px 20px 0;border-top:1px solid var(--outline)}
.plan-m li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--surface-2)}
.plan-m li:last-child{border-bottom:0}
.plan-m .et{font-size:13.4px;line-height:1.45;color:var(--gray-2)}
.plan-m .et em{font-style:normal;color:var(--gray);font-size:11.5px;display:block}
.plan-m .va{flex:0 0 auto;text-align:right;font-family:var(--display);font-weight:700;
  font-size:13.6px;color:var(--deep);max-width:46%}
.plan-m .va svg{width:16px;height:16px;fill:none;stroke:var(--primary);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.plan-m .fuera{margin:0;padding:14px 20px 18px;font-size:12.6px;line-height:1.6;color:var(--gray)}
.plan-m .fuera b{font-family:var(--display);font-weight:700;color:var(--gray-2)}

/* Corte a 1100 px, no a 900: con 230 px de etiquetas mas cinco columnas, la
   tabla necesita cerca de 1100 para entrar sin desplazarse. En tablet se
   muestran las tarjetas, que ahi se leen mejor que una tabla que no cabe. */
@media (max-width:1100px){
  .comparativa-caja{display:none}
  .planes-movil{display:block;margin-top:30px}
}

/* --- paquetes de stand --- */
/* Dos por fila y no cuatro: los renders del proveedor son horizontales (3:2) y
   en columnas angostas se recortaban a una tira vertical donde solo se leia el
   cartel "EXPOSITOR". Un stand se compra mirandolo; necesita ancho. */
.stands{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:34px 0 0}
.stand{background:#fff;border:1px solid var(--outline);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column}
/* Sin aspect-ratio ni object-fit: los cuatro archivos ya son exactamente 3:2
   (1200x800), asi que width:100% + height:auto da el formato correcto sin
   recortar nada y sin depender de ninguna propiedad moderna. Si el CSS no
   cargara, los atributos width y height del HTML dan la misma proporcion. */
.stand .render{display:block;width:100%;height:auto;background:var(--surface-2)}
.stand .pie{padding:18px 22px;border-top:3px solid var(--tono,var(--primary))}
.stand .quien{flex:1 1 auto;min-width:0}
.stand .nombre{font-family:var(--display);font-weight:800;font-size:20px;color:var(--navy);
  display:block;line-height:1.2}
.stand .medida{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;color:var(--gray);
  display:block;margin-top:5px}

/* --- lo que incluye todo stand --- */
.panel-incluye{margin-top:26px;background:var(--surface);border:1px solid var(--outline);
  border-radius:14px;padding:26px}
.panel-incluye h3{font-size:15px;margin-bottom:20px}
.incluye{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:20px}
.incluye li{text-align:center;font-size:13px;line-height:1.45;color:var(--gray-2)}
.incluye svg{width:26px;height:26px;fill:none;stroke:var(--primary);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin:0 auto 10px;display:block}
.incluye b{display:block;font-family:var(--display);font-weight:700;font-size:13.5px;
  color:var(--deep);margin-bottom:3px}

/* --- complementos opcionales --- */
.complementos{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:14px}
.complementos li{border:1px solid var(--outline);border-radius:12px;background:#fff;
  overflow:hidden;text-align:center;display:flex;flex-direction:column}
/* lienzo cuadrado: los productos tienen formas muy distintas (televisores anchos,
   un totem vertical, una mesa) y en la rejilla deben ocupar lo mismo */
/* height:auto es imprescindible: el <img> lleva height="520" como atributo y,
   si el CSS no fija la altura, ese atributo gana y la proporcion 1:1 no se
   aplica. La tarjeta se estiraba a 520 px de alto con la foto deformada. */
.complementos img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;
  background:#fff;padding:10px}
.complementos .q{display:block;font-size:12.5px;color:var(--gray-2);line-height:1.4;
  padding:0 12px 16px;margin-top:auto}

/* --- condiciones comerciales --- */
.condiciones{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding-top:24px;border-top:1px solid var(--outline)}
.condiciones div{font-size:13.6px;line-height:1.6;color:var(--gray-2)}
.condiciones b{display:block;font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--deep);margin-bottom:4px}

@media (max-width:1180px){
  .planes{grid-template-columns:repeat(2,1fr)}
  .incluye{grid-template-columns:repeat(3,1fr);gap:24px}
  .complementos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .condiciones{grid-template-columns:1fr;gap:16px}
}
@media (max-width:600px){
  .planes,.stands{grid-template-columns:1fr}
  .incluye,.complementos{grid-template-columns:repeat(2,1fr)}
  .plan .nombre{min-height:0}
  .panel-incluye{padding:20px}
}




/* novedades */
/* La seccion se dibuja sola desde novedades.js. Arranca oculta: si el archivo
   esta vacio o mal escrito, no queda un titulo huerfano sobre un hueco blanco. */
#novedades{display:none}
#novedades.hay{display:block}
.novedades{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;align-items:start;margin-top:34px}
.nov{background:#fff;border:1px solid var(--outline);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column}
/* El flyer se muestra entero, nunca recortado: un afiche recortado pierde justo
   la informacion que lo hace un afiche. Por eso alto automatico y grid con
   align-items:start, aunque las tarjetas queden de distinta altura. */
.nov-foto{display:block;width:100%;padding:0;border:0;background:var(--surface-2);
  cursor:zoom-in;line-height:0;font:inherit}
.nov-foto img{width:100%;height:auto;display:block;transition:opacity .18s}
.nov-foto:hover img{opacity:.9}
.nov-foto:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.nov-cuerpo{padding:22px}
.nov-fecha{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);display:block;margin-bottom:9px}
.nov h3{margin:0 0 9px;font-size:18px}
.nov p{font-size:14.5px;line-height:1.62;color:var(--gray-2);margin:0}
.nov-enlace{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--primary);
  text-decoration:none;border-bottom:1px solid rgba(44,103,103,.35)}
.nov-enlace:hover{border-bottom-color:var(--primary)}
.nov-enlace:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.nov-enlace svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}

/* visor: el flyer a tamano completo */
.visor{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(20,38,37,.92);padding:6vh 6vw;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.visor.abierto{opacity:1;visibility:visible}
.visor img{max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.visor-cerrar{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.visor-cerrar:hover{background:rgba(255,255,255,.24)}
.visor-cerrar:focus-visible{outline:3px solid #fff;outline-offset:2px}
.visor-cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}

/* galeria */
/* --- El Festival: texto arriba, carrusel debajo --- */
.intro{max-width:1000px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.cols .lead{margin:0;font-size:19px;line-height:1.65;color:var(--navy);font-weight:500}
.tira{margin-top:56px}
.rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--outline)}

.pista{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 0 18px;
  scrollbar-width:none;-ms-overflow-style:none}
.pista::-webkit-scrollbar{display:none}
.foto{flex:0 0 clamp(230px,25%,300px);scroll-snap-align:start;margin:0;position:relative;
  border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--surface-2);
  box-shadow:0 10px 26px rgba(26,48,47,.14)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 15px 14px;color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(20,38,37,.82),transparent)}
.mandos{display:flex;align-items:center;gap:12px;margin-top:10px}
.flecha{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--outline);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--primary);
  transition:border-color .18s,background .18s,opacity .18s}
.flecha:hover:not(:disabled){border-color:var(--primary);background:var(--surface)}
.flecha:disabled{opacity:.34;cursor:default}
.flecha:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.flecha svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.riel{flex:1 1 auto;height:2px;background:var(--outline);border-radius:2px;overflow:hidden;
  margin:0 4px;max-width:300px}
.riel span{display:block;height:100%;background:var(--primary);border-radius:2px;
  transform-origin:left;transition:transform .3s ease}
.avance{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gray)}

/* destino */
.destino{position:relative;background:var(--destino) no-repeat center/cover;isolation:isolate}
.destino::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(20,38,37,.72)}

/* formulario embebido */
.form-card{background:#fff;border:1px solid var(--outline);border-radius:20px;padding:14px;
  box-shadow:0 20px 50px rgba(26,48,47,.1);max-width:820px;margin:0 auto}
/* altura fija en px, no dvh: dentro de la pagina el alto de pantalla no es el alto util,
   y con dvh el iframe se estiraba mas alla de la tarjeta */
.form-marco{position:relative;height:720px;border-radius:12px;overflow:hidden;background:var(--surface);
  display:flex;align-items:center;justify-content:center}
/* mensaje de espera detras del iframe: si el formulario carga lo tapa,
   y si el servidor rechaza el marco queda esto en vez de un recuadro gris roto */
.form-marco::after{content:'Cargando el formulario…';position:absolute;z-index:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.form-marco iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;display:block}
.salidas{text-align:center;margin:20px auto 0;font-size:14px;color:var(--gray-2);max-width:820px}
.salidas a{color:var(--primary);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(44,103,103,.35)}
.salidas a:hover{border-bottom-color:var(--primary)}
.sep-o{margin:0 8px;color:var(--gray)}

/* cierre */
.cierre{text-align:center}
.cierre h2{font-size:clamp(30px,4vw,52px);margin-bottom:12px}

/* pie */
/* pie sobre blanco: los dos logos se apoyan directos, sin placas ni recuadros */
footer{background:#fff;color:var(--ink);padding:72px 0 26px;border-top:1px solid var(--outline)}
.pie{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.pie h4{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--navy);margin:0 0 16px}
.pie a{display:block;color:var(--ink);text-decoration:none;font-size:14px;margin-bottom:11px;transition:color .18s}
.pie a:hover{color:var(--primary)}
.pie p{color:var(--gray-2);font-size:14px;line-height:1.65}
.pie .mark-f{display:block;background:var(--logo) no-repeat left center/contain;
  width:190px;height:64px;margin-bottom:20px}
.pie-org{display:flex;align-items:center;gap:14px;margin-top:26px}
.pie-org .k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.pie-org .vr{width:1px;height:30px;background:var(--outline)}
.pie-org a{display:block;line-height:0}
.pie-org .fede{width:96px;height:54px}
.legal{border-top:1px solid var(--outline);margin-top:54px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--gray)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  :root{--pad:32px}
  .cols{grid-template-columns:1fr;gap:22px}
    .bento{grid-template-columns:repeat(6,1fr)}
  .b-1,.b-3,.b-4,.b-5{grid-column:span 6}
  .b-5{grid-template-columns:1fr;gap:22px}
  .b-2{grid-column:span 6;grid-row:auto}
  .foto{flex-basis:clamp(210px,32%,260px)}
  .pie{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--pad:20px;--nav-h:122px}
  .sec{padding:64px 0}
  .hdr-in{padding:11px var(--pad)}
  .mark{width:122px;height:42px}
  .hdr .btn{display:none}
  .orgbar-in{padding:8px var(--pad)}
  .orgbar .fede{width:74px;height:42px}
  .orgbar .vr{height:22px}
  /* fondo vertical propio: el velo esta recalculado para este encuadre.
     height:auto es imprescindible: aqui el hero no lleva alto calculado y crece
     con su contenido; con el alto de escritorio puesto, overflow:hidden cortaria
     el boton de WhatsApp. */
  .hero{height:auto;padding:9% 6% 10%;display:block}
  /* en movil: foto vertical propia, zoom algo mas contenido y origen sobre el logo */
  .hero-bg{background-image:url("assets/hero-movil-900.jpg");background-image:image-set(url("assets/hero-movil-900.webp") type("image/webp"),url("assets/hero-movil-900.jpg") type("image/jpeg"));background-position:center 44%;
    transform-origin:50% 40%;animation-duration:30s}
  @keyframes respirar{from{transform:scale(1)}to{transform:scale(1.085)}}
  /* en movil la columna se desarma: el hero vuelve a flujo normal y el orden
     logo -> pastillas -> boton ya lo da el propio HTML */
  .hero-col{position:static;transform:none;width:auto;max-width:none;display:block}
  /* relative, NO static: z-index solo funciona en elementos posicionados.
     Con static el contenido cae por debajo de .hero-bg y la foto lo tapa. */
  .hero .h1{position:relative;z-index:1;left:auto;top:auto;width:82%;max-width:340px;margin:0 0 7%}
  .hero .datos,.hero .accion{position:relative;z-index:1;left:auto;right:auto;top:auto;width:100%;max-width:none;display:block}
  .hero .datos{margin-bottom:20px}
  .pills{flex-direction:column;align-items:flex-start;gap:9px}
  .pill{font-size:13.5px;padding:10px 15px;max-width:100%;overflow-wrap:anywhere}
  .hero .wa-btn{width:100%;justify-content:center}
  .wa-btn{width:100%;justify-content:center}
  .novedades{grid-template-columns:1fr;gap:18px;margin-top:26px}
  .nov-cuerpo{padding:18px}
  .visor{padding:3vh 4vw}
  .form-card{padding:10px}
  .form-marco{height:78vh;min-height:560px}
  .pie{grid-template-columns:1fr;gap:32px}
  .legal{flex-direction:column;gap:8px}
  .pista{gap:14px;padding-bottom:14px}
  .foto{flex-basis:66%}
  .flecha{width:40px;height:40px}
  .riel{max-width:none}
}
@media (max-width:480px){
  .foto{flex-basis:78%}
}

/* accion siempre a mano en movil: el trafico llega del QR de la valla */
.cta-fija{display:none}
@media (max-width:760px){
  .cta-fija{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(248,250,250,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--outline);
    /* Arranca fuera de cuadro. En la primera pantalla ya esta el boton del hero:
       dos botones verdes identicos, uno sobre otro, se estorban. Esta barra entra
       cuando el hero sale de vista, que es cuando el visitante se queda sin accion.
       visibility:hidden ademas la saca del recorrido del tabulador mientras no esta. */
    transform:translateY(110%);visibility:hidden;
    transition:transform .28s ease,visibility .28s}
  .cta-fija.a-la-vista{transform:none;visibility:visible}
  .cta-fija .wa-btn{width:100%;justify-content:center;padding:11px 20px;box-shadow:none}
  .cta-fija .wa-btn .glyph{width:32px;height:32px}
  .cta-fija .wa-btn .t1{font-size:16px}
  body{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  .hero-bg{animation:none!important;transform:none!important}
}

/* ---------- VIDEOS: ASÍ FUE LA PRIMERA EDICIÓN ---------- */
/* Carga diferida a mano: al principio hay solo una miniatura y un botón.
   El reproductor de YouTube recién se inserta cuando alguien da play.
   Un iframe de YouTube arrastra cerca de un megabyte de JavaScript y planta
   cookies antes de que nadie toque nada; con siete videos eso hunde la página. */
.video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--deep);box-shadow:0 12px 32px rgba(20,38,37,.26)}
.video img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s ease,filter .3s ease}
.video:hover img{transform:scale(1.035);filter:brightness(.86)}
.video .play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video .play i{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.34);
  transition:transform .25s ease,background .25s ease}
.video .play:hover i{transform:scale(1.09);background:#fff}
.video .play svg{width:25px;height:25px;fill:var(--deep);margin-left:4px}
.video .play:focus-visible{outline:3px solid #fff;outline-offset:-5px;border-radius:14px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* portada: texto a un lado, video destacado al otro */
.asifue{display:grid;grid-template-columns:1fr 1.12fr;gap:48px;align-items:center}
.asifue .txt .lead{max-width:none}
.asifue .btn{margin-top:26px}
.sec-dark .btn{background:#fff;color:var(--deep)}
.sec-dark .btn:hover{background:var(--seafoam)}
.sec-dark .btn:focus-visible{outline-color:#fff}

/* página interna: uno grande arriba, seis en rejilla de tres */
.video-destacado{margin-top:34px}
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}

/* volver a la portada */
.volver{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
  font-size:14px;color:var(--primary);text-decoration:none;margin-bottom:26px}
.volver:hover{text-decoration:underline}
.volver:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
.volver svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}

@media (max-width:1024px){
  .videos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .asifue{grid-template-columns:1fr;gap:30px}
}
@media (max-width:760px){
  .videos{grid-template-columns:1fr;gap:18px}
  .video .play i{width:58px;height:58px}
  .video .play svg{width:21px;height:21px}
}

/* Video sin miniatura disponible en YouTube: queda el recuadro oscuro con el
   play, que funciona igual. Un leve degradado evita que parezca un hueco. */
.video.sin-miniatura{background:linear-gradient(140deg,#24413f 0%,var(--deep) 62%)}
.video.sin-miniatura .play i{background:#fff}

/* ---------- RELATO DE LA PRIMERA EDICIÓN ---------- */

/* prosa a dos columnas, para textos largos sin renglones interminables */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin-top:32px}
.duo h3{margin-bottom:12px}
.duo p{font-size:15.5px;line-height:1.72;color:var(--gray-2);margin:0 0 14px}
.duo p:last-child{margin-bottom:0}

/* línea de tiempo: tres hitos con una guía que los une */
.linea{list-style:none;margin:38px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
.linea::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--sage) 50%,rgba(159,203,202,.3) 100%)}
.linea li{position:relative;padding-top:42px}
.linea li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;
  border-radius:50%;background:#fff;border:4px solid var(--primary)}
.linea li.futuro::before{border-color:var(--sage);background:var(--sage)}
.linea .hito{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--primary);display:block;margin-bottom:9px}
.linea li.futuro .hito{color:var(--navy)}
.linea h3{font-size:19px;margin-bottom:9px}
.linea p{font-size:14.8px;line-height:1.68;color:var(--gray-2);margin:0}

/* los temas que se trataron */
.temas{list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tema{background:#fff;border:1px solid var(--outline);border-radius:14px;padding:24px 22px}
.tema svg{width:26px;height:26px;fill:none;stroke:var(--primary);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;display:block}
.tema h3{font-size:16px;margin-bottom:7px}
.tema p{font-size:14px;line-height:1.6;color:var(--gray-2);margin:0}

/* quiénes se encontraron: pastillas, no tarjetas, para no repetir la rejilla anterior */
.quienes{list-style:none;display:flex;flex-wrap:wrap;gap:11px;margin:28px 0 0;padding:0}
.quienes li{border:1px solid var(--outline);border-radius:999px;padding:10px 20px;background:#fff;
  font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--deep)}
.sec-dark .quienes li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}

/* lo que quedó: tres afirmaciones cortas, en grande */
.tres{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:34px 0 0;padding:0}
.tres li{border-top:2px solid var(--sage);padding-top:18px}
.tres b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(19px,2.1vw,25px);color:var(--navy);margin-bottom:8px;line-height:1.2}
.tres span{font-size:14.5px;line-height:1.65;color:var(--gray-2)}

/* la frase que cierra el relato */
.cita{font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(21px,2.8vw,33px);line-height:1.34;color:var(--navy);
  max-width:24ch;margin:0;border-left:3px solid var(--sage);padding-left:26px}
.sec-dark .cita{color:#fff;border-left-color:var(--seafoam)}
.cita+.pie-cita{margin-top:22px;font-size:15.5px;line-height:1.7;color:var(--gray-2);
  max-width:52ch;padding-left:29px}
.sec-dark .cita+.pie-cita{color:rgba(255,255,255,.8)}

/* bloque con foto al lado */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.split .foto-lado{border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(20,38,37,.3)}
/* destino.jpg es panoramica (1300x725). Con 4:3 se le comia un cuarto del
   ancho; 3:2 deja un recorte suave y conserva la vista de la costa. */
.split .foto-lado img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}

@media (max-width:1024px){
  .temas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .duo,.split{grid-template-columns:1fr;gap:28px}
  .tres{grid-template-columns:1fr;gap:20px}
  /* la línea de tiempo se pone vertical: la guía pasa a la izquierda */
  .linea{grid-template-columns:1fr;gap:0}
  .linea::before{left:8px;right:auto;top:8px;bottom:8px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--primary) 0%,var(--sage) 50%,rgba(159,203,202,.3) 100%)}
  .linea li{padding:0 0 30px 42px}
  .linea li:last-child{padding-bottom:0}
  .linea li::before{top:1px}
}
@media (max-width:760px){
  .temas{grid-template-columns:1fr}
  .cita{padding-left:20px}
  .cita+.pie-cita{padding-left:23px}
}

/* ---------- EN LA PRENSA ---------- */
/* Tarjetas de enlace a medios. Sin logos ni capturas: los logos son marcas
   ajenas y una captura de la nota es contenido de otro. El nombre del medio
   en tipografía monoespaciada alcanza para dar la referencia. */
.prensa{list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.nota-medio{display:flex;flex-direction:column;height:100%;text-decoration:none;
  background:#fff;border:1px solid var(--outline);border-radius:15px;padding:26px 26px 22px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.nota-medio:hover{transform:translateY(-3px);border-color:var(--sage);
  box-shadow:0 14px 34px rgba(20,38,37,.13)}
.nota-medio:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.nota-medio .medio{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--primary);margin-bottom:12px}
.nota-medio h3{font-size:17.5px;line-height:1.32;margin:0 0 auto;color:var(--navy)}
.nota-medio .ir{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--primary)}
.nota-medio .ir svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  transition:transform .22s ease}
.nota-medio:hover .ir svg{transform:translateX(3px)}

@media (max-width:760px){
  .prensa{grid-template-columns:1fr;gap:14px}
  .nota-medio{padding:22px}
  .nota-medio h3{font-size:16.5px}
}

/* ---------- PASE VIP ---------- */
/* Fondo claro, como el resto de la pagina. El relieve lo dan las tarjetas con
   degradado verde y el icono en un circulo blanco con sombra; la barra de
   precio en oscuro ancla el final de la seccion. */

.vip-beneficios{list-style:none;margin:34px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:14px 20px}
/* el degradado va de verde a casi transparente: da volumen sin oscurecer el texto */
.vip-beneficios li{display:flex;align-items:flex-start;gap:15px;
  background:linear-gradient(135deg,rgba(159,203,202,.30),rgba(159,203,202,.10));
  border:1px solid rgba(113,173,166,.28);border-radius:14px;padding:16px 18px;
  transition:background .22s ease,border-color .22s ease}
.vip-beneficios li:hover{background:linear-gradient(135deg,rgba(159,203,202,.42),rgba(159,203,202,.16));
  border-color:rgba(113,173,166,.46)}
/* Circulo blanco con sombra: separa el icono del degradado y le da el relieve.
   Los tonos son los cinco del logo, en version saturada: los claros que se
   usaban sobre fondo oscuro no llegaban al minimo de contraste sobre blanco. */
.vip-beneficios .ico{width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:#fff;
  box-shadow:0 3px 10px rgba(20,38,37,.14);display:flex;align-items:center;justify-content:center}
.vip-beneficios .ico svg{width:20px;height:20px;fill:none;stroke:var(--t);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vip-beneficios b{display:block;font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--navy);line-height:1.35}
.vip-beneficios span{display:block;font-size:13.6px;line-height:1.5;color:var(--gray-2);margin-top:3px}

/* el precio: barra oscura, lo unico con peso fuerte en la seccion */
.pase-unico{margin-top:34px;background:var(--deep);border-radius:18px;padding:26px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.pase-unico .tipo{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--seafoam);display:block;margin-bottom:6px}
.pase-unico .monto{font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:44px;color:#fff;display:block;line-height:1}
.pase-unico .nota{display:block;margin-top:8px;font-size:14px;line-height:1.55;
  color:rgba(255,255,255,.76)}

.vip-legal{margin-top:18px;font-size:12.8px;line-height:1.6;color:var(--gray)}

@media (max-width:900px){
  .vip-beneficios{grid-template-columns:1fr;gap:12px}
  .pase-unico{flex-direction:column;align-items:stretch;gap:20px;padding:24px}
}
@media (max-width:760px){
  .pase-unico .monto{font-size:38px}
  .vip-beneficios li{padding:14px 16px;gap:13px}
  .vip-beneficios .ico{width:36px;height:36px}
  .vip-beneficios .ico svg{width:18px;height:18px}
}

/* ---------- STANDS GASTRONÓMICOS ---------- */
.gastro{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start;margin-top:34px}
/* Dos fotos, la segunda desplazada hacia abajo: en paralelo perfecto parecen
   un error de maquetación; con el desfase se leen como un par intencional. */
.gastro-fotos{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.gastro-fotos figure{margin:0;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 36px rgba(20,38,37,.18)}
.gastro-fotos figure:last-child{margin-top:42px}
.gastro-fotos img{width:100%;height:auto;display:block;background:var(--surface-2)}

/* el precio, en oscuro como el del pase VIP: los dos son el mismo gesto */
.gastro-precio{margin-top:26px;background:var(--deep);border-radius:16px;padding:24px 26px}
.gastro-precio .et{display:inline-block;background:var(--primary);color:#fff;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 15px;border-radius:999px;margin-bottom:16px}
.gastro-precio .monto{display:block;font-family:var(--display);font-weight:800;
  letter-spacing:-.025em;font-size:44px;color:#fff;line-height:1}
.gastro-precio .plazo{display:block;margin-top:12px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.8)}
.gastro-precio .plazo b{color:var(--seafoam);font-weight:700}

/* los tres puntos del food court */
.foodcourt{list-style:none;margin:40px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px}
.foodcourt li{background:#fff;border:1px solid var(--outline);border-radius:14px;padding:24px}
.foodcourt .n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--t);color:#fff;font-family:var(--display);
  font-weight:800;font-size:16px;margin-bottom:15px}
.foodcourt b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;
  color:var(--navy);margin-bottom:7px}
.foodcourt span{display:block;font-size:14px;line-height:1.6;color:var(--gray-2)}

/* el aviso de montaje: lo que el expositor tiene que traer por su cuenta */
.montaje{margin-top:22px;background:rgba(224,122,47,.08);border:1px solid rgba(224,122,47,.3);
  border-radius:14px;padding:22px 24px}
.montaje b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;
  color:#b45f1d;margin-bottom:8px}
.montaje p{margin:0;font-size:14px;line-height:1.65;color:var(--gray-2)}
.gastro-legal{margin-top:18px;font-size:12.6px;line-height:1.6;color:var(--gray)}

@media (max-width:900px){
  .gastro{grid-template-columns:1fr;gap:32px}
  .foodcourt{grid-template-columns:1fr;gap:14px}
}
@media (max-width:760px){
  .gastro-fotos{gap:12px}
  .gastro-fotos figure:last-child{margin-top:26px}
  .gastro-precio{padding:22px}
  .gastro-precio .monto{font-size:38px}
  .foodcourt li{padding:20px}
  .montaje{padding:18px 20px}
}
/* ---------- COBERTURA DE UN EVENTO ---------- */
/* Bloques de texto con subtítulo, para una nota larga. Más angosto que el
   ancho completo: una línea de 100 caracteres cansa de leer. */
.nota-cuerpo{max-width:68ch;margin-top:34px}
.nota-cuerpo h3{font-size:20px;margin:38px 0 12px}
.nota-cuerpo h3:first-child{margin-top:0}
.nota-cuerpo p{font-size:16px;line-height:1.75;color:var(--gray-2);margin:0 0 16px}
.nota-cuerpo p:last-child{margin-bottom:0}
.nota-cuerpo strong{color:var(--deep);font-weight:600}

/* Los cinco días: temas agrupados, no una lista larga de actividades sueltas */
.agenda{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:18px;max-width:none}
.agenda li{background:#fff;border:1px solid var(--outline);border-radius:14px;padding:24px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.agenda li:hover{transform:translateY(-3px);border-color:var(--sage);
  box-shadow:0 12px 30px rgba(20,38,37,.1)}
/* El icono va en una pastilla redonda con el verde del sitio al 12%: da color
   sin competir con el texto, que es lo que hay que leer. */
.agenda .ico{width:44px;height:44px;border-radius:50%;background:rgba(159,203,202,.22);
  display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.agenda .ico svg{width:22px;height:22px;fill:none;stroke:var(--primary);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.agenda b{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--navy);margin-bottom:7px}
.agenda span{font-size:14.5px;line-height:1.65;color:var(--gray-2)}

@media (max-width:760px){
  .nota-cuerpo h3{font-size:18.5px;margin-top:30px}
  .nota-cuerpo p{font-size:15.5px}
  .agenda{grid-template-columns:1fr;gap:14px}
  .agenda li{padding:20px}
  .agenda .ico{width:38px;height:38px;margin-bottom:12px}
  .agenda .ico svg{width:19px;height:19px}
}

/* ---------- VIDEO DE CAMPAÑA ---------- */
/* preload="none" en el HTML: el archivo pesa 13 MB y no debe descargarse hasta
   que alguien lo pida. Lo unico que carga de entrada es la imagen de portada,
   de 90 KB. */
.video-campana{margin:48px 0 0;border-radius:16px;overflow:hidden;background:var(--deep);
  box-shadow:0 16px 42px rgba(20,38,37,.22)}
.video-campana video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--deep)}
.video-campana figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);padding:12px 18px;text-align:center}

@media (max-width:760px){
  .video-campana{margin-top:34px;border-radius:12px}
  .video-campana figcaption{font-size:9.5px;padding:10px 14px}
}

/* ---------- ZONA INFANTIL ---------- */
/* Dos tarifas enfrentadas: la gratuita en claro y la de pago en oscuro.
   El contraste entre las dos es el mensaje: se entra sin pagar y se sigue
   pagando solo si se quiere. */
.infantil{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.tarifa{border-radius:18px;padding:28px 30px}
.tarifa .et{display:inline-block;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 15px;border-radius:999px;
  margin-bottom:18px}
.tarifa .que{display:block;font-family:var(--display);font-weight:800;font-size:19px;
  color:var(--navy);line-height:1.2}
.tarifa .cuanto{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:50px;line-height:1;margin-top:4px}
.tarifa .quien{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:12px}
.tarifa .detalle{display:block;margin-top:14px;padding-top:14px;font-size:14px;line-height:1.6}

/* la gratuita */
.tarifa.libre{background:rgba(159,203,202,.2);border:1px solid rgba(113,173,166,.34)}
.tarifa.libre .et{background:var(--primary);color:#fff}
.tarifa.libre .cuanto{color:#c22d5c}
.tarifa.libre .detalle{color:var(--gray-2);border-top:1px solid rgba(113,173,166,.34)}

/* la de pago */
.tarifa.paga{background:var(--deep)}
.tarifa.paga .et{background:#c2701d;color:#fff}
.tarifa.paga .que,.tarifa.paga .cuanto{color:#fff}
.tarifa.paga .quien{color:var(--seafoam)}
.tarifa.paga .detalle{color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.18)}

.infantil-nota{margin-top:20px;display:flex;align-items:flex-start;gap:16px;
  background:rgba(224,122,47,.08);border:1px solid rgba(224,122,47,.3);
  border-radius:14px;padding:20px 22px}
.infantil-nota .ico{width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:#c2701d;
  display:flex;align-items:center;justify-content:center}
.infantil-nota .ico svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.infantil-nota b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;
  color:#b45f1d;margin-bottom:5px}
.infantil-nota p{margin:0;font-size:14px;line-height:1.6;color:var(--gray-2)}

.infantil-cuando{margin-top:24px;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--primary)}
.infantil-legal{margin-top:8px;font-size:12.6px;line-height:1.6;color:var(--gray)}
.infantil-cierre{margin-top:26px;font-family:var(--display);font-weight:800;font-size:19px;
  color:var(--navy)}

@media (max-width:760px){
  .infantil{grid-template-columns:1fr;gap:14px}
  .tarifa{padding:24px}
  .tarifa .cuanto{font-size:42px}
  .infantil-nota{padding:18px 20px;gap:13px}
}