/* ==========================================================================
   TEMA: SUPERHÉROE  ·  dirección de arte "CIUDAD DE CÓMIC, A PLENO DÍA"
   COPIADO de heroe-arana/tema.css por estilos.js y repintado: no lo edites a mano.
   Azul rey, rojo y amarillo (triada primaria: los colores del cómic clásico).
   Contraste medido: sobre #F4FAFF tinta 14.9 · suave 7.0 · marca 8.0 · acento 5.6;
   sobre el bloque #D9F1FB suave 6.3 · acento hondo 7.9; blanco sobre azul rey 8.4.
   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:#F4FAFF;  --papel-hondo:#D9F1FB;
  --tinta:#16233D;  --tinta-suave:#465672;
  --marca:#1B4A99;  --marca-claro:#2FA8E0;
  --acento:#C41C30; --acento-hondo:#8E1322;
  --noche:#1B4A99;  --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(47,168,224,.16) 1.3px, transparent 1.8px);
  --puntos-durazno:radial-gradient(circle, rgba(47,168,224,.3) 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(244,250,255,.66), rgba(244,250,255,0) 72%),
    url("fondo.svg") center bottom/cover no-repeat,
    #63CDF2;
}
/* 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 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(244,250,255,.96) 0%, rgba(244,250,255,.76) 55%, rgba(244,250,255,0) 100%),
    url("fondo.svg") center bottom/cover no-repeat,
    #63CDF2;
}
.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%, #2F6FD0 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:"¡POW!";
  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,.5), rgba(255,197,61,0) 62%),
    linear-gradient(180deg, #E6F6FD 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:"★ SE BUSCAN HÉROES   ★ TRAE TU CAPA   ★ MISIÓN: CUMPLEAÑOS   ★ HABRÁ PIÑATA   ★ PASTEL Y BOLSITAS   ★ NO FALTES   ★ SE BUSCAN HÉROES   ★ TRAE TU CAPA   ★ MISIÓN: CUMPLEAÑOS   ★ HABRÁ PIÑATA   ★ PASTEL Y BOLSITAS   ★ NO FALTES   ★ SE BUSCAN HÉROES   ★ TRAE TU CAPA   ★ MISIÓN: CUMPLEAÑOS   ★ HABRÁ PIÑATA   ★ PASTEL Y BOLSITAS   ★ NO FALTES   ★ SE BUSCAN HÉROES   ★ TRAE TU CAPA   ★ MISIÓN: CUMPLEAÑOS   ★ 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:"¡BAM!";
  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%, #2F6FD0 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(27,74,153,.78) 40%, rgba(16,40,92,.9) 100%),
    url("fondo.svg") center bottom/cover no-repeat,
    var(--noche);
}

/* ── Lo propio del Superhéroe: su gancho es un ESCUDO (no cuelga de un hilo) ── */
.gancho.escudo{ width:min(60vw,240px); }
.gancho.escudo .gancho__svg{ filter:drop-shadow(0 16px 14px rgba(22,35,61,.4)) drop-shadow(0 3px 2px rgba(22,35,61,.3)); }
.gancho.escudo:not(.golpe):not(.abre){ animation:palpitar 2.4s ease-in-out infinite; }
@keyframes palpitar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
/* Al activarse suelta un destello y se va hacia el frente */
.gancho.escudo.abre{ animation:activar .85s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes activar{ 0%{ transform:scale(1); filter:brightness(1); opacity:1; } 30%{ transform:scale(1.22); filter:brightness(2.6); } 100%{ transform:scale(2.6); filter:brightness(1); opacity:0; } }
.portada__edad{ color:var(--acento); text-shadow:4px 4px 0 #fff, 9px 9px 0 var(--sol); }