/* ==========================================================================
   TEMA: HÉROE ARAÑA  ·  dirección de arte "ATARDECER DE CÓMIC"
   Rediseñado el 2 de octubre de 2026.

   LA IDEA: las fotos del niño son de atardecer cálido sobre la ciudad. La
   invitación era gris-azul pálida y por eso se sentía vacía a su lado.
   Ahora vive en el mismo mundo que las fotos:
     · un fondo ILUSTRADO (fondo.webp) abre la entrada y la portada
     · papel crema + bloques durazno + dos bloques de noche azul marino
     · tinta, trama de puntos, viñetas, globo de diálogo, calcomanías,
       una cinta que corre: el lenguaje del cómic
   Tendencias que se tomaron (2026): textura y grano, bloques de color
   fuertes, collage con calcomanías, tipografía en movimiento.

   TEORÍA DEL COLOR: naranja del atardecer y azul marino son COMPLEMENTARIOS.
   60 crema/durazno · 30 azul marino · 10 rojo (solo botones y acentos).

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre papel   #FFF4E3 → tinta 15.6 · suave 6.8 · marca 9.5 · acento 5.4
     sobre durazno #FFDDB0 → tinta 13.1 · suave 5.7 · marca 8.0 · acento-hondo 7.3
       (el rojo vivo ahí da 4.5 justo: las horas usan el rojo hondo)
     sobre un punto de la trama del durazno #FAC596 → suave 4.7 · marca 6.7
     sobre noche   #1D2D48 → blanco 13.8 · etiqueta #C9D6F5 9.5 · sol #FFC53D 8.7
     tinta sobre el amarillo de las calcomanías → 10.8
     blanco sobre el botón rojo → 5.9
   ========================================================================== */
:root{
  --papel:#FFF4E3;  --papel-hondo:#FFDDB0;
  --tinta:#141B33;  --tinta-suave:#4B5573;
  --marca:#1D3A8A;  --marca-claro:#5B8DEF;
  --acento:#C8102E; --acento-hondo:#8E0B20;
  --noche:#1D2D48;  --sol:#FFC53D;
  --f-display:"Fredoka", system-ui, sans-serif;
  --f-texto:"Nunito", system-ui, sans-serif;

  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .05 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
  --puntos:radial-gradient(circle, rgba(232,112,58,.12) 1.3px, transparent 1.8px);
  --puntos-durazno:radial-gradient(circle, rgba(232,112,58,.22) 1.4px, transparent 1.9px);
  --puntos-noche:radial-gradient(circle, rgba(255,255,255,.11) 1.3px, transparent 1.8px);
  --borde:2.5px solid var(--tinta);
  --brochazo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8C22 2 40 10 60 6s38-5 57 0' fill='none' stroke='%23C8102E' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --brochazo-sol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8C22 2 40 10 60 6s38-5 57 0' fill='none' stroke='%23FFC53D' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --estallido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124'%3E%3Cpolygon points='65,12 73.2,28.9 88,17.2 88.1,36.1 106.4,32 98.3,48.9 116.7,53.2 102,65 116.7,76.8 98.3,81.1 106.4,98 88.1,93.9 88,112.8 73.2,101.1 65,118 56.8,101.1 42,112.8 41.9,93.9 23.6,98 31.7,81.1 13.3,76.8 28,65 13.3,53.2 31.7,48.9 23.6,32 41.9,36.1 42,17.2 56.8,28.9' fill='%23141B33'/%3E%3Cpolygon points='60,7 68.2,23.9 83,12.2 83.1,31.1 101.4,27 93.3,43.9 111.7,48.2 97,60 111.7,71.8 93.3,76.1 101.4,93 83.1,88.9 83,107.8 68.2,96.1 60,113 51.8,96.1 37,107.8 36.9,88.9 18.6,93 26.7,76.1 8.3,71.8 23,60 8.3,48.2 26.7,43.9 18.6,27 36.9,31.1 37,12.2 51.8,23.9' fill='%23FFC53D' stroke='%23141B33' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* El papel: crema, con grano y una trama de puntos muy suave en TODO el fondo */
body{ background:var(--grano), var(--puntos) 0 0/14px 14px, var(--papel); }

/* Bangers SOLO en lo grande: a tamaño chico se vuelve ilegible */
.portada__nombre,.pie__nombre{ font-family:"Bangers", var(--f-display); letter-spacing:.03em; }

/* La telaraña de CSS de antes ya no hace falta: el fondo ilustrado trae las suyas */
.telarana{ display:none; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  overflow:hidden;
  background:
    radial-gradient(62% 36% at 50% 55%, rgba(255,244,227,.6), rgba(255,244,227,0) 72%),
    url("fondo.webp") center bottom/cover no-repeat,
    #FBA468;
}
/* Rayos de cómic que giran despacito detrás del emblema */
.entrada::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:56%; width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax;
  background:repeating-conic-gradient(rgba(255,255,255,.2) 0 5deg, transparent 5deg 10deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, rgba(0,0,0,.6) 14%, transparent 34%);
          mask-image:radial-gradient(circle, #000 0, rgba(0,0,0,.6) 14%, transparent 34%);
  animation:girarRayos 80s linear infinite;
}
.entrada--fuera::before{ animation:none; }
@keyframes girarRayos{ to{ transform:rotate(360deg); } }

.entrada__para{ color:var(--tinta); font-weight:800; }
/* El nombre va en un cartelito de cómic: se lee sobre cualquier cielo */
.entrada__nombre{
  background:#fff; color:var(--marca);
  border:var(--borde); border-radius:14px;
  padding:.2rem 1rem .3rem;
  box-shadow:5px 5px 0 var(--acento);
  transform:rotate(-1.5deg);
  margin:.35rem 0 1.1rem;
}
.hilo{
  width:3px; height:58px; margin-bottom:-14px; border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 60%);
  filter:drop-shadow(0 0 1px rgba(20,27,51,.7));
  position:relative; z-index:0;
}
.gancho.emblema{
  width:min(58vw,230px);
  position:relative; z-index:1;
  transform-origin:50% -44px;   /* se columpia desde el hilo */
  animation:columpiar 3.2s ease-in-out infinite;
}
.gancho.emblema .gancho__svg{
  filter:drop-shadow(0 16px 14px rgba(20,27,51,.38)) drop-shadow(0 3px 2px rgba(20,27,51,.3));
}
@keyframes columpiar{ 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(7deg); } }
/* Al abrir, sale disparado hacia arriba como si jalara la telaraña */
.gancho.emblema.abre{ animation:trepar .8s cubic-bezier(.5,-0.4,.7,.4) forwards; }
@keyframes trepar{
  0%  { transform:translateY(0) scale(1);       opacity:1; }
  25% { transform:translateY(26px) scale(1.08); opacity:1; }
  100%{ transform:translateY(-110vh) scale(.7); opacity:0; }
}
.entrada__pista{
  background:#fff; color:var(--tinta);
  border:var(--borde); border-radius:999px;
  padding:.4rem 1.15rem;
  box-shadow:4px 4px 0 var(--marca);
}
.entrada__marcador{
  color:var(--tinta); font-weight:800;
  text-shadow:0 0 4px #fff, 0 0 4px #fff, 0 0 9px #fff, 0 0 14px #fff;
}


/* ══════════════════════════════════════════════════════════════════════
   LA LLEGADA DE PELÍCULA (la mueve nucleo/cine-monito.js)
   Al tocar el emblema: humo de atardecer → el héroe llega columpiándose a SU
   azotea (azotea.webp: su misma foto, sin él) → cae agachado → se levanta con
   el puño arriba. El niño va armado por partes (monito.webp + monito.js).
   Aquí solo va cómo se ven el estallido y el letrero.
   ══════════════════════════════════════════════════════════════════════ */
/* ¡PUM!: el mismo estallido amarillo de las calcomanías */
.cine__grito{
  background:var(--estallido) center/contain no-repeat;
  font-family:"Bangers", var(--f-display); font-size:2.05rem; letter-spacing:.03em; line-height:1;
  color:var(--acento); text-shadow:2px 2px 0 #fff;
  padding:0 .3rem .2rem 0;
}
.cine--llegada .cine__grito{ font-size:1.5rem; }
.cine--llegada .cine__cartel{ font-size:clamp(1.55rem,7.6vw,2.3rem); padding:.2rem 1rem .3rem; }
/* El letrero: recuadro de narrador, como el del nombre en la entrada */
.cine__cartel{
  background:#fff; color:var(--marca);
  border:var(--borde); border-radius:14px;
  box-shadow:5px 5px 0 var(--acento);
  padding:.3rem 1.1rem .4rem;
  font-family:"Bangers", var(--f-display); font-size:clamp(1.9rem,9.5vw,2.8rem); letter-spacing:.03em; line-height:1.05;
}

/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — el mismo cielo, con un resplandor crema detrás del número
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  isolation:isolate;
  background:
    radial-gradient(48% 27% at 50% 41%, rgba(255,244,227,.95) 0%, rgba(255,244,227,.72) 55%, rgba(255,244,227,0) 100%),
    url("fondo.webp") center bottom/cover no-repeat,
    #FBA468;
}
.portada__arriba,.portada__anos{ color:var(--tinta); font-weight:600; }
.portada__anos{ font-family:var(--f-display); font-size:1.2rem; margin-bottom:.5rem; }
.portada__edad{
  font-family:"Bangers", var(--f-display);
  font-size:clamp(6rem,34vw,11rem); line-height:.86; color:var(--acento);
  text-shadow:4px 4px 0 #fff, 9px 9px 0 var(--marca);
}
.portada__nombre{ color:var(--marca); text-shadow:3px 3px 0 #fff, 6px 6px 0 rgba(200,16,46,.4); }
/* La fecha: un recuadro de narrador, como en las viñetas */
.portada__fecha{
  background:#fff;
  border:var(--borde); border-radius:16px;
  box-shadow:6px 6px 0 var(--acento);
  padding:.6rem 1.25rem;
}
.portada__fecha .fcol{ color:var(--tinta); }
.portada__lugar{
  margin-top:1.15rem;
  background:var(--noche); color:#fff; font-weight:700;
  padding:.42rem 1rem; border-radius:999px;
  border:2px solid #fff;
}
.portada__flecha span{ border-color:#fff; filter:drop-shadow(0 2px 0 var(--tinta)); }


/* ══════════════════════════════════════════════════════════════════════
   BLOQUES DE NOCHE — la ciudad de la portada "baja" y se vuelve fondo
   ══════════════════════════════════════════════════════════════════════ */
.seccion.saludo{ max-width:none; padding-top:2.6rem; padding-bottom:1.8rem; }
.seccion.saludo > *{ max-width:640px; margin-left:auto; margin-right:auto; }
.saludo, .momento{
  background:
    var(--puntos-noche) 0 0/12px 12px,
    var(--noche);
}
.saludo .etiqueta{ color:#C9D6F5; }
.saludo__nombre{ color:#fff; }
.saludo__pases{ background:var(--sol); color:var(--tinta); border:2px solid var(--tinta); box-shadow:3px 3px 0 #fff; }

/* La foto grande: una viñeta sobre la noche, con rayos detrás */
.momento{
  padding-top:1.6rem; padding-bottom:4rem;
  background:
    var(--puntos-noche) 0 0/12px 12px,
    radial-gradient(70% 55% at 50% 46%, #33559F 0%, rgba(51,85,159,0) 72%),
    var(--noche);
  -webkit-clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
          clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
}
.momento__foto{
  position:relative; z-index:1;
  border:8px solid #fff;
  outline:var(--borde);
  box-shadow:11px 11px 0 var(--acento), 0 22px 40px -14px rgba(0,0,0,.6);
  transform:rotate(-1.6deg);
}
/* Calcomanía */
.momento::after{
  content:"¡ZAS!";
  position:absolute; z-index:2; top:.5rem; right:max(3%, calc(50% - 225px));
  width:92px; height:92px; display:grid; place-items:center;
  background:var(--estallido) center/contain no-repeat;
  font-family:"Bangers", var(--f-display); font-size:1.45rem; letter-spacing:.04em;
  color:var(--tinta);
  transform:rotate(13deg);
}


/* ══════════════════════════════════════════════════════════════════════
   BLOQUES DE ATARDECER (las secciones "alterna") — paneles de cómic
   ══════════════════════════════════════════════════════════════════════ */
.seccion.alterna{
  position:relative;
  padding-top:4.2rem; padding-bottom:4.4rem;
  background:
    var(--grano),
    radial-gradient(95% 60% at 100% 0%, rgba(255,197,61,.42), rgba(255,197,61,0) 62%),
    linear-gradient(180deg, #FFE9CB 0%, var(--papel-hondo) 100%);
  -webkit-clip-path:polygon(0 0, 100% 16px, 100% 100%, 0 calc(100% - 16px));
          clip-path:polygon(0 0, 100% 16px, 100% 100%, 0 calc(100% - 16px));
}
.seccion.alterna::before{    /* la trama asoma por dos esquinas y se apaga hacia el texto */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--puntos-durazno) 0 0/11px 11px;
  -webkit-mask-image:linear-gradient(135deg, #000 0%, transparent 34%, transparent 66%, #000 100%);
          mask-image:linear-gradient(135deg, #000 0%, transparent 34%, transparent 66%, #000 100%);
}
.seccion.alterna > *{ position:relative; }
/* El rojo vivo sobre durazno queda justo: ahí va el rojo hondo */
.seccion.alterna .linea__hora,
.seccion.alterna .faq__item summary::after{ color:var(--acento-hondo); }

/* Brochazo bajo cada título */
.titulo{ padding-bottom:.7rem; background:var(--brochazo) no-repeat center bottom/104px 11px; }

/* ── La cinta que corre (arriba de la cuenta regresiva) ─────────────── */
.cuenta{
  overflow:hidden; padding-top:7.3rem;
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 16px));
          clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 16px));
}
.cuenta::after{
  content:"★ MISIÓN: FIESTA   ★ SOLO HÉROES   ★ TRAE TU ANTIFAZ   ★ HABRÁ PIÑATA   ★ PASTEL Y BOLSITAS   ★ NO FALTES   ★ MISIÓN: FIESTA   ★ SOLO HÉROES   ★ TRAE TU ANTIFAZ   ★ HABRÁ PIÑATA   ★ PASTEL Y BOLSITAS   ★ NO FALTES   ★ MISIÓN: FIESTA   ★ SOLO HÉROES   ★ TRAE TU ANTIFAZ   ★ HABRÁ PIÑATA   ★ PASTEL Y BOLSITAS   ★ NO FALTES   ★ MISIÓN: FIESTA   ★ SOLO HÉROES   ★ TRAE TU ANTIFAZ   ★ HABRÁ PIÑATA   ★ PASTEL Y BOLSITAS   ★ NO FALTES   ";
  position:absolute; top:18px; left:0; z-index:1;
  white-space:pre; width:max-content;
  font-family:"Bangers", var(--f-display); font-size:1.3rem; letter-spacing:.09em;
  line-height:2.6rem; color:#fff;
  background:var(--acento);
  border-top:var(--borde); border-bottom:var(--borde);
  box-shadow:0 5px 0 var(--marca);
  animation:cinta 44s linear infinite;
}
@keyframes cinta{ to{ transform:translateX(-50%); } }


/* ══════════════════════════════════════════════════════════════════════
   PIEZAS — contorno de tinta y sombra dura
   ══════════════════════════════════════════════════════════════════════ */
.cuenta__caja,
.tarjeta{
  border:var(--borde);
  box-shadow:5px 5px 0 var(--marca);
  background:#fff;
  position:relative; overflow:hidden;
}
.cuenta__caja{ box-shadow:5px 5px 0 var(--acento); }
.cuenta__caja::after, .tarjeta::after{      /* trama en una esquina de la caja */
  content:""; position:absolute; top:0; right:0; width:62%; height:62%; pointer-events:none;
  background:var(--puntos-durazno) 0 0/8px 8px;
  -webkit-mask-image:radial-gradient(circle at 100% 0, #000 0, transparent 68%);
          mask-image:radial-gradient(circle at 100% 0, #000 0, transparent 68%);
}
.cuenta__caja > *, .tarjeta > *{ position:relative; z-index:1; }
.tarjeta__icono{
  width:58px; height:58px; padding:9px; border-radius:50%;
  background:var(--sol);
  border:2px solid var(--tinta);
  color:var(--tinta);
}

/* La dedicatoria: un globo de diálogo */
.dedicatoria__texto{
  position:relative;
  background:#fff;
  border:var(--borde); border-radius:24px;
  padding:1.3rem 1.2rem;
  box-shadow:6px 6px 0 var(--marca);
  margin-bottom:2.1rem;
}
.dedicatoria__texto::after{                 /* la colita del globo */
  content:""; position:absolute; left:50%; bottom:-13px;
  width:22px; height:22px; margin-left:-11px;
  background:#fff;
  border-right:var(--borde); border-bottom:var(--borde);
  transform:rotate(45deg);
}

/* Las fotos de la galería: viñetas un poco chuecas + calcomanía */
.galeria{ position:relative; }
.galeria::after{
  content:"¡WOW!";
  position:absolute; z-index:2; top:1.5rem; right:.5rem;
  width:84px; height:84px; display:grid; place-items:center;
  background:var(--estallido) center/contain no-repeat;
  font-family:"Bangers", var(--f-display); font-size:1.3rem; letter-spacing:.04em;
  color:var(--tinta);
  transform:rotate(-11deg);
}
.foto img{
  border:5px solid #fff;
  outline:2px solid var(--tinta);
  box-shadow:5px 5px 0 var(--marca);
}
.foto:nth-child(even) img{ transform:rotate(1.1deg); }
.foto:nth-child(odd) img{ transform:rotate(-1deg); }
.foto--ancha img{ transform:rotate(-.6deg); box-shadow:7px 7px 0 var(--acento); }
.galeria__grid{ gap:1rem; }
.foto__hueco{ border:var(--borde); background:#fff; }

/* Línea de tiempo, mapa, notas y dudas */
.linea__paso::before{ background:#fff; }
.mapa{ border:6px solid #fff; outline:var(--borde); box-shadow:7px 7px 0 var(--marca); }
.notas__lista li{ background:#fff; border:2px solid var(--tinta); border-left:7px solid var(--acento); box-shadow:4px 4px 0 var(--marca); }
.faq__item{ background:#fff; border:2px solid var(--tinta); box-shadow:4px 4px 0 var(--marca); }
.boton--linea{ background:#fff; border:var(--borde); box-shadow:4px 4px 0 var(--marca); color:var(--marca); }
.boton--linea:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--marca); }


/* ══════════════════════════════════════════════════════════════════════
   CONFIRMAR — segundo bloque de noche, para que el botón rojo jale el ojo
   ══════════════════════════════════════════════════════════════════════ */
.seccion.rsvp{
  background:
    var(--puntos-noche) 0 0/12px 12px,
    radial-gradient(80% 45% at 50% 0%, #33559F 0%, rgba(51,85,159,0) 70%),
    var(--noche);
  -webkit-clip-path:polygon(0 0, 100% 16px, 100% 100%, 0 100%);
          clip-path:polygon(0 0, 100% 16px, 100% 100%, 0 100%);
  padding-bottom:4rem;
}
.seccion.rsvp::before{ display:none; }
.rsvp .etiqueta{ color:#C9D6F5; }
.rsvp .titulo{ color:#fff; background-image:var(--brochazo-sol); }
.rsvp__intro{ color:#E3EAFB; }
.rsvp__intro b{ color:var(--sol); }
.formulario{ border:var(--borde); box-shadow:8px 8px 0 var(--sol); }


/* ══════════════════════════════════════════════════════════════════════
   EL PIE — la ciudad de noche
   ══════════════════════════════════════════════════════════════════════ */
.pie{
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--noche) 0%, rgba(29,45,72,.78) 40%, rgba(15,22,42,.84) 100%),
    url("ciudad.webp") center bottom/cover no-repeat,
    var(--noche);
}