/* MEGALAND Bacano 2026 · estilos de la landing (sale de megaland-bacano-2026-sin-cintas.html).
   Imágenes: CDN https://eventos.tuboleta.com/hubfs/Piezas/ (copia de respaldo en ../img/). */
/* 1. TOKENS ─ el único sitio con colores escritos a mano */
:root{
  --ml-negro:#0B0B0B;
  --ml-blanco:#FFFFFF;
  --ml-lima:#CCFF00;     /* Pantone 381 C */
  --ml-coral:#FF5363;    /* Pantone 1785 C */
  --ml-cian:#00E9FF;     /* Pantone 311 C */
  --ml-azul:#0049FF;     /* Pantone 2935 C: nunca texto sobre negro (3,4:1) */
  --ml-gris:#B9B9B9;     /* texto de apoyo sobre negro (10:1) */
  --ml-linea:rgba(255,255,255,.28);
  --ml-textura:url("https://eventos.tuboleta.com/hubfs/Piezas/textura-negra.jpg");

  /* Colores de localidad medidos sobre el mapa oficial (https://eventos.tuboleta.com/hubfs/Piezas/mapa-megaland.png) */
  --z-general:#3FD8A0; --z-vip:#FF5363; --z-or-baja:#CDFF00; --z-or-alta:#01E9FF;
  --z-norte-alta:#E26E23; --z-norte-baja:#FEB601; --z-occ-baja:#7601FD; --z-occ-alta:#E0138B;

  --ml-fuente:"Alan Sans", system-ui, sans-serif;
  --ml-wrap:1180px;
  --ml-calle:clamp(16px,4vw,32px);
  --ml-sec-y:clamp(64px,8vw,112px);
  --ml-trazo:4px;
  --ml-foco:var(--ml-lima);
}

/* 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:var(--ml-fuente);font-weight:400;font-size:17px;line-height:1.55;color:var(--ml-blanco);
  background:var(--ml-negro) var(--ml-textura) 0 0/700px repeat;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05;font-weight:900;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--ml-foco);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ml-lima);color:var(--ml-negro);padding:10px 16px;border-radius:999px;font-weight:700}
.saltar:focus{top:12px}
.wrap{position:relative;z-index:1;max-width:var(--ml-wrap);margin:0 auto;padding:0 var(--ml-calle)}
[data-pendiente]{outline:2px dashed var(--ml-coral);outline-offset:4px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;
  font:800 16px/1 var(--ml-fuente);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  border:var(--ml-trazo) solid var(--ml-negro);transition:background-color .15s,color .15s,box-shadow .15s}
.btn--lima{background:var(--ml-lima);color:var(--ml-negro);box-shadow:0 0 0 3px var(--ml-blanco)}
.btn--lima:hover{background:var(--ml-blanco)}
.btn--claro{background:transparent;color:var(--ml-blanco);border-color:var(--ml-blanco);border-width:3px}
.btn--claro:hover{background:var(--ml-blanco);color:var(--ml-negro)}
.btn svg{width:18px;height:18px;flex:none}

/* Titular tipo sticker (la píldora de la guía: relleno, trazo negro, anillo blanco, brillo) */
.pildora{position:relative;display:inline-block;padding:.28em .8em .32em;border-radius:999px;
  font-size:clamp(30px,5.4vw,60px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  background:var(--pil,var(--ml-lima));color:var(--ml-negro);border:var(--ml-trazo) solid var(--ml-negro);
  box-shadow:0 0 0 6px var(--ml-blanco),0 0 0 10px var(--ml-negro);transform:rotate(var(--rot,-3deg))}
.pildora::after{content:"";position:absolute;right:9%;top:12%;width:18%;height:.16em;min-height:6px;border-radius:999px;background:var(--ml-blanco);opacity:.9}
.pildora--coral{--pil:var(--ml-coral)} .pildora--cian{--pil:var(--ml-cian)} .pildora--blanca{--pil:var(--ml-blanco)}
.pildora--blanca::after{background:var(--ml-lima)}

/* Marco de rayos coral (encabezado de las láminas de la guía) */
.marco{position:relative;z-index:1;height:72px;color:var(--ml-coral)}
.marco--hero{margin:clamp(40px,6vw,72px) 0 clamp(24px,4vw,48px)}
.pie .marco{margin-bottom:clamp(24px,4vw,40px)}
.marco svg{position:absolute;left:0;top:0;width:100%;height:44px;fill:none;stroke:currentColor;stroke-width:1.5}
.marco__chips{display:flex;justify-content:space-between;align-items:center;gap:12px;position:absolute;left:0;right:0;top:44px;transform:translateY(-50%);
  padding:0 var(--ml-calle)}
.marco__chip{background:var(--ml-negro);border:2px solid currentColor;border-radius:999px;padding:6px 18px;font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap}
.marco__chip b{font-weight:900}
.marco--abajo{transform:scaleY(-1)}
.marco--abajo .marco__chips{transform:translateY(-50%) scaleY(-1)}
@media (max-width:559px){.marco__chip{font-size:13px;padding:5px 12px}}

/* Secciones: todas sobre la textura negra; el color entra con las ondas */
.sec{position:relative;padding:calc(var(--ml-sec-y) * .6) 0 var(--ml-sec-y)}
.sec__cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.sec__sticker{width:clamp(120px,18vw,230px);flex:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));animation:flotar 5s ease-in-out infinite}
.sec__sticker--der{rotate:8deg}
@media (max-width:559px){
  .sec__cabeza{align-items:center;gap:12px}
  .sec__cabeza .pildora{font-size:clamp(24px,7.4vw,30px)}
  .sec__sticker{width:clamp(72px,24vw,110px);flex:0 1 auto;min-width:0}
}
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Ondas de color (como el key visual): cintas anchas con degradado a negro + grano */
.ondas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent)}
.ondas svg.onda{opacity:.9}
.onda{position:absolute;width:var(--w,78vw);max-width:1200px;aspect-ratio:12/7;height:auto;fill:none;stroke-linecap:round;overflow:visible}
.onda--a{left:-14vw;top:-40px}
.onda--b{right:-16vw;top:-60px;transform:scaleX(-1)}
.onda--c{left:-18vw;bottom:-80px;transform:scaleY(-1)}
.onda--d{right:-14vw;bottom:-90px;transform:scale(-1,-1)}
@media (max-width:767px){.onda{--w:160vw}.onda--c,.onda--d{display:none}.onda--a{top:-20px;left:-40vw}.onda--b{right:-50vw}}

/* Iconografía de la guía: estrellas, corazones, garabatos, destellos */
.ico{position:absolute;left:var(--x);top:var(--y);width:var(--s,34px);height:var(--s,34px);color:var(--c,var(--ml-cian));
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;rotate:var(--g,0deg)}
.ico--relleno{fill:currentColor;stroke:var(--ml-negro);stroke-width:1.4}
@media (max-width:767px){.ico--solo-ancho{display:none}}

/* 3. COMPONENTES */

/* ── INICIO BARRA ─────────────────────────────────────── */
.barra{position:relative;z-index:5;background:var(--ml-negro);border-bottom:2px solid var(--ml-coral)}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.barra__logo img{height:26px;width:auto}
.barra .btn{min-height:44px;padding:0 20px;font-size:14px}
/* ── FIN BARRA ── */

/* ── INICIO HERO ──────────────────────────────────────── */
.hero{position:relative;background:var(--ml-negro);overflow:hidden}
.hero img{width:100%;aspect-ratio:9/8;object-fit:cover}
@media (min-width:768px){.hero img{aspect-ratio:1920/711}}
/* Parallax: el script mueve --px (px) al hacer scroll; el arte baja más lento que la página
   y se acerca un poco. Sin JS o con movimiento reducido, queda quieto. */
.js .hero img{transform:translate3d(0,var(--px,0px),0) scale(calc(1 + var(--pz,0)));transform-origin:50% 0;will-change:transform}

.boleta-halo{position:relative;z-index:3;margin:-48px auto 0;max-width:1080px;rotate:-1deg}
.boleta{position:relative;background:var(--ml-negro) var(--ml-textura) 0 0/700px;color:var(--ml-blanco);
  border:var(--ml-trazo) solid var(--ml-blanco);border-radius:28px;
  padding:clamp(24px,4vw,44px);display:grid;gap:24px}
.boleta__sello{display:inline-block;justify-self:start;background:var(--ml-coral);color:var(--ml-negro);border:3px solid var(--ml-negro);
  box-shadow:0 0 0 3px var(--ml-blanco);border-radius:999px;padding:6px 16px;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;rotate:-2deg}
.boleta__fecha{font-size:clamp(44px,8vw,92px);font-weight:900;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;color:var(--ml-lima);margin:14px 0 12px}
.boleta__fecha span{display:block;font-size:.42em;letter-spacing:0;color:var(--ml-cian)}
.boleta__lugar{font-size:clamp(18px,2vw,22px);font-weight:700;margin:0}
.boleta__der{display:grid;gap:24px}
.boleta__acciones{display:flex;flex-wrap:wrap;gap:14px}
.boleta__corto{font-size:16px;max-width:52ch;margin:0;color:var(--ml-gris)}
/* Brillo que recorre el borde de la tarjeta: un degradado cónico que gira.
   .boleta::before = el trazo nítido, encima del borde blanco.
   .boleta-halo::before = la misma luz desenfocada detrás de la tarjeta (el resplandor). */
@property --ml-giro{syntax:"<angle>";inherits:false;initial-value:0deg}
.boleta::before,.boleta-halo::before{content:"";position:absolute;pointer-events:none;
  background:conic-gradient(from var(--ml-giro),transparent 0deg 220deg,var(--ml-cian) 280deg,var(--ml-blanco) 320deg,var(--ml-lima) 345deg,transparent 360deg);
  animation:ml-girar 4s linear infinite}
.boleta::before{inset:calc(var(--ml-trazo) * -1);border-radius:28px;padding:var(--ml-trazo);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.boleta-halo::before{inset:-12px;border-radius:38px;filter:blur(22px);opacity:.95;z-index:-1}
@keyframes ml-girar{to{--ml-giro:360deg}}
@media (min-width:1024px){
  .boleta{grid-template-columns:1.05fr 1fr;align-items:center;column-gap:48px}
  .boleta-halo{margin-top:-72px}
  .boleta__izq{border-right:3px dashed var(--ml-linea);padding-right:40px}

}
/* ── FIN HERO ── */

/* ── INICIO CINTAS ────────────────────────────────────── */
.cintas{position:relative;height:clamp(150px,16vw,200px);overflow:hidden;margin-top:clamp(32px,5vw,56px)}
.cinta{position:absolute;left:-5%;width:110%;top:50%;border-block:var(--ml-trazo) solid var(--ml-negro);overflow:hidden;
  font-weight:900;font-size:clamp(22px,3vw,34px);text-transform:uppercase;white-space:nowrap;line-height:1;padding:14px 0}
.cinta--lima{background:var(--ml-lima);color:var(--ml-negro);transform:translateY(-70%) rotate(-3deg);z-index:2}
.cinta--coral{background:var(--ml-coral);color:var(--ml-negro);transform:translateY(-20%) rotate(2.5deg)}
.cinta__pista{display:inline-flex;animation:correr 26s linear infinite}
.cinta--coral .cinta__pista{animation-direction:reverse;animation-duration:32s}
.cinta__pista span{padding:0 .6em}
.cinta__pista b{color:var(--ml-azul);font-weight:900}
.cinta--coral .cinta__pista b{color:var(--ml-blanco)}
@keyframes correr{to{transform:translateX(-50%)}}
/* ── FIN CINTAS ── */

/* ── INICIO DATOS ─────────────────────────────────────── */
.datos__rejilla{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;--gap-x:20px;gap:28px var(--gap-x)}
.datos__rejilla .dato{flex:0 0 calc((100% - var(--gap-x)) / 2)}  /* la fila incompleta queda centrada */
@media (min-width:768px){.datos__rejilla{--gap-x:32px;row-gap:40px}}
@media (min-width:1024px){.datos__rejilla{--gap-x:24px}.datos__rejilla{--gap-x:20px}.datos__rejilla .dato{flex-basis:calc((100% - 4 * var(--gap-x)) / 5);padding-inline:16px}.datos__rejilla .dato dd{font-size:min(22px,1.6vw)}}  /* 5 datos en una fila */
.dato{--c:var(--ml-lima);background:var(--c);color:var(--ml-negro);border:var(--ml-trazo) solid var(--ml-negro);border-radius:22px;
  box-shadow:0 0 0 5px var(--ml-blanco),0 0 0 9px var(--ml-negro);padding:20px 18px 22px;rotate:var(--r,-2deg);transition:rotate .25s,scale .25s}
/* Colores por tarjeta: Lugar blanco; Fecha lima; Apertura cian; Inicio coral; Edad azul */
.dato:nth-child(1){--c:var(--ml-blanco);--r:-2deg}
.dato:nth-child(2){--c:var(--ml-lima);--r:2deg}
.dato:nth-child(3){--c:var(--ml-cian);--r:-1deg}
.dato:nth-child(4){--c:var(--ml-coral);--r:1.5deg}
.dato:nth-child(5){--c:var(--ml-azul);--r:-2.5deg;color:var(--ml-blanco)}
.dato:hover{rotate:0deg;scale:1.03}
.dato dl{margin:0}
.dato dd.dato__nota{margin-top:8px;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none}  /* segunda edad (Oriental alta familiar) */
.datos__rejilla .dato dd.dato__nota{font-size:13px}
.dato dt{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.dato dd{margin:0;font-size:clamp(22px,3vw,34px);font-weight:900;line-height:1.05;text-transform:uppercase}
/* Móvil: tamaño atado al ancho para que "Viernes 20 de noviembre" quepa en dos líneas */
@media (max-width:559px){.datos__rejilla{--gap-x:14px;row-gap:24px}.dato{padding:16px 12px 18px}.dato dd{font-size:min(22px,calc(6.4vw - 7px))}}
/* ── FIN DATOS ── */

/* ── INICIO VENTA ─────────────────────────────────────── */
.etapas{list-style:none;margin:0;padding:0;display:grid;gap:36px}
@media (min-width:768px){.etapas{grid-template-columns:1fr 1fr;gap:40px}}
.etapa{--c:var(--ml-lima);background:var(--ml-negro);border:var(--ml-trazo) solid var(--c);border-radius:26px;box-shadow:0 0 0 5px var(--ml-negro),0 0 0 8px var(--ml-blanco);
  padding:36px clamp(20px,3vw,36px) 32px;position:relative;rotate:-1deg}
.etapa:nth-child(2){--c:var(--ml-cian);rotate:1deg}
.etapa__num{position:absolute;top:-28px;left:24px;width:56px;height:56px;display:grid;place-items:center;color:var(--ml-negro);font-weight:900;font-size:24px}
.etapa__num svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--c);stroke:var(--ml-negro);stroke-width:1.2}
.etapa__num span{position:relative}
.etapa h3{font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;margin:0 0 14px;color:var(--c)}
.etapa p{margin:0;font-size:18px}
.etapa strong{font-weight:800}
/* ── FIN VENTA ── */

/* ── INICIO PRECIOS ───────────────────────────────────── */
.precios__cuerpo{display:grid;gap:48px}
@media (min-width:1024px){.precios__cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}}
.precios__intro{font-weight:700;font-size:16px;margin:0 0 16px}
.tabla-caja{background:var(--ml-negro);border:var(--ml-trazo) solid var(--ml-blanco);border-radius:22px;
  max-height:440px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ml-lima) transparent}
.tabla{width:100%;border-collapse:separate;border-spacing:0}
@media (min-width:1024px){
  .tabla-caja{max-height:470px}
  .tabla thead th{position:sticky;top:0;z-index:1}
}
.tabla th,.tabla td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--ml-linea);vertical-align:middle}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}
.tabla thead th{background:var(--ml-blanco);color:var(--ml-negro);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-bottom:0}
.tabla tbody th{font-weight:800;text-transform:uppercase;font-size:16px}
.zona{display:inline-flex;align-items:center;gap:10px}
.zona::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--z);border:2px solid var(--ml-blanco);flex:none}
.precio{display:block;font-weight:900;font-size:22px;line-height:1.1}
.col-preventa .precio{color:var(--ml-lima)}
.col-general .precio{color:var(--ml-cian)}
.desglose{display:block;font-size:13px;color:var(--ml-gris)}
/* Aforo debajo del nombre de la localidad (se pide por temas legales) */
.aforo{display:block;margin:4px 0 0 26px;font-size:12px;font-weight:500;line-height:1.35;text-transform:none;letter-spacing:0;color:var(--ml-gris)}
.tabla tr.vip .aforo{color:var(--ml-negro)}
.aforo span{display:block;white-space:nowrap}
@media (min-width:1024px){.aforo{margin-left:21px}}
@media (max-width:559px){.aforo span{display:inline}.aforo span+span::before{content:" · "}}
/* Nota bajo el nombre de una localidad (p. ej. edad mínima de Oriental alta familiar) */
.zona__nota{display:block;margin:4px 0 0 26px;font-size:13px;font-weight:600;line-height:1.35;text-transform:none;letter-spacing:0;color:var(--ml-cian)}
@media (min-width:1024px){.zona__nota{margin-left:21px;font-size:12px}}
.tabla tr.vip{background:var(--ml-lima);color:var(--ml-negro)}
.tabla tr.vip .precio{color:var(--ml-negro)}
.tabla tr.vip .desglose{color:var(--ml-negro)}
.tabla tr.vip .zona::before{border-color:var(--ml-negro)}
@media (min-width:1024px){
  .tabla th,.tabla td{padding:10px}
  .tabla thead th{font-size:12px}
  .tabla tbody th{font-size:14px}
  .zona{gap:8px}.zona::before{width:13px;height:13px}
  .precio{font-size:18px}
  .desglose{font-size:12px}
  .tabla-caja{overflow-x:hidden}
}
.precios__nota{font-size:15px;margin:16px 0 0;color:var(--ml-gris)}
@media (max-width:559px){
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block}
  .tabla tr{padding:14px 16px;border-bottom:1px solid var(--ml-linea);display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
  .tabla tbody th{grid-column:1/-1;padding:0 0 4px;border:0}
  .tabla td{padding:0;border:0}
  .tabla td::before{content:attr(data-col);display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
}
/* Mapa: imagen fija (sin mapa interactivo). Fondo transparente y borde blanco tipo sticker,
   así se asienta sobre la textura. En escritorio acompaña a la tabla al hacer scroll. */
.mapa{margin:0;rotate:1deg}
@media (min-width:1024px){.mapa{position:sticky;top:24px}}
.mapa img{width:100%;height:auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.55))}
/* ── FIN PRECIOS ── */

/* ── INICIO APORTE ────────────────────────────────────── */
.aporte__montos{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:18px}
.aporte__montos li{display:inline-flex;align-items:center;gap:10px;background:var(--ml-blanco);color:var(--ml-negro);border:var(--ml-trazo) solid var(--ml-negro);
  box-shadow:0 0 0 4px var(--ml-blanco);border-radius:999px;padding:10px 22px;font-weight:900;font-size:clamp(22px,3vw,30px);rotate:var(--r,-2deg)}
.aporte__montos li:nth-child(even){--r:2deg;background:var(--ml-lima);box-shadow:0 0 0 4px var(--ml-lima)}
.aporte__montos svg{width:.8em;height:.8em;fill:var(--ml-coral);stroke:var(--ml-negro);stroke-width:1.6;flex:none}
.aporte p{font-size:18px;max-width:60ch}
.aporte__tyc{margin-top:8px}
@media (max-width:559px){.aporte__tyc{width:100%;justify-content:space-between;font-size:14px;line-height:1.25;text-align:left;padding:10px 20px}}
/* Móvil: montos más compactos para que queden en dos filas (3 + 2) */
@media (max-width:559px){
  .aporte__montos{gap:12px 10px;margin-bottom:24px}
  .aporte__montos li{gap:5px;padding:7px 11px;font-size:min(18px,calc(4.4vw - 1px));border-width:3px;box-shadow:0 0 0 3px var(--ml-blanco)}
  .aporte__montos li:nth-child(even){box-shadow:0 0 0 3px var(--ml-lima)}
}
/* ── FIN APORTE ── */

/* ── INICIO FESTIVAL ──────────────────────────────────── */
/* Texto en dos columnas: la frase destacada a la izquierda y el cuerpo a la derecha */
.festival__texto{display:grid;gap:24px}
@media (min-width:1024px){.festival__texto{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.festival__lead{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.25;color:var(--ml-lima)}
.festival__cuerpo-texto p{font-size:clamp(17px,1.5vw,19px)}
.festival__cuerpo-texto p:last-child{margin-bottom:0}
.festival__pie{display:grid;gap:48px;align-items:center;margin-top:clamp(48px,6vw,80px)}
@media (min-width:1024px){.festival__pie{grid-template-columns:1fr 1fr;gap:64px}}
.festival__arte{position:relative;max-width:560px;justify-self:center}
.festival__arte .collage{rotate:-4deg}
.festival__arte .iloveml{position:absolute;right:-8px;bottom:-40px;width:42%;rotate:9deg;animation:flotar 6s ease-in-out infinite}
.festival__creditos img{width:100%;max-width:560px;height:auto}
/* ── FIN FESTIVAL ── */

/* ── INICIO TEN EN CUENTA ─────────────────────────────── */
.cuenta{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:768px){.cuenta{grid-template-columns:1fr 1fr;gap:16px 40px}}
.cuenta li{display:flex;gap:14px;align-items:flex-start;font-size:18px;font-weight:500;padding:14px 0;border-bottom:2px dashed var(--ml-linea)}
.cuenta svg{width:24px;height:24px;flex:none;margin-top:2px;fill:var(--c,var(--ml-lima));stroke:var(--ml-negro);stroke-width:1.2}
.cuenta li:nth-child(3n+2) svg{--c:var(--ml-cian)}
.cuenta li:nth-child(3n+3) svg{--c:var(--ml-coral)}
.legal{margin-top:40px;font-size:14px;color:var(--ml-gris)}
/* ── FIN TEN EN CUENTA ── */

/* ── INICIO CIERRE Y PIE ──────────────────────────────── */
.cierre{text-align:center;padding-block:clamp(96px,12vw,160px)}
.cierre .pildora{font-size:clamp(28px,7vw,84px);max-width:calc(100% - 24px)}
.cierre__acciones{margin-top:56px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.pie{padding:clamp(40px,6vw,72px) 0 40px;font-size:14px;color:var(--ml-gris)}
.pie .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.pie img{height:24px;width:auto}
/* ── FIN CIERRE Y PIE ── */

/* ── INICIO BARRA DE COMPRA MÓVIL ─────────────────────── */
.comprar-movil{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1.25fr 1fr;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--ml-negro) var(--ml-textura) 0 0/700px;
  border-top:3px solid var(--ml-lima);box-shadow:0 -8px 24px rgba(0,0,0,.55)}
.comprar-movil .btn{min-height:48px;padding:0 12px;font-size:13px;letter-spacing:.01em;white-space:nowrap}
.comprar-movil .btn--lima{box-shadow:none;border-color:var(--ml-lima)}
@media (min-width:768px){.comprar-movil{display:none}}
@media (max-width:767px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
/* ── FIN BARRA DE COMPRA MÓVIL ── */


/* ── INICIO ANIMACIONES DE ENTRADA ────────────────────── */
/* Solo si el script puso .entradas en <html> (con JS y sin movimiento reducido).
   Cada elemento marcado con .entra sube y aparece; --i escalona los de una misma lista.
   Se usan las propiedades translate/scale sueltas para no pisar el rotate de las piezas. */
.entradas .entra{opacity:0;translate:0 32px}
.entradas .entra.visible{
  transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1),scale .7s cubic-bezier(.3,1.5,.5,1),rotate .25s;
  transition-delay:calc(var(--i,0) * 90ms)}
.entradas .entra--pop{translate:0 0;scale:.6}
.entradas .entra--lado{translate:-40px 0}
.entradas .entra.visible{opacity:1;translate:0 0;scale:1}
.entradas .dato.entra.visible:hover{scale:1.03;transition-delay:0s}
/* ── FIN ANIMACIONES DE ENTRADA ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}