/* ==========================================================================
   TEMA: REVELACIÓN DE SEXO  ·  dirección de arte "EQUIPO ROSA, EQUIPO AZUL"
   ESCRITO POR estilos.js — no lo edites a mano: cambia la receta y vuelve a correrlo.

   LA IDEA: la invitación NO revela nada (eso pasa en la fiesta): por eso todo va
   partido en dos, mitad rosa y mitad azul, y el morado —que sale de mezclarlos—
   es el color neutral que une a los dos equipos. El invitado hace su APUESTA
   (equipo niña / equipo niño) y viaja en su confirmación.
   TEORÍA DEL COLOR: rosa y azul son el código que todos entienden; el morado es
   su mezcla y queda para títulos y botón. 60 crema · 30 rosa y azul · 10 morado.

   CONTRASTE MEDIDO (fórmula WCAG, calculado al generar):
     sobre papel   #FFFBF7 → tinta 13.1 · suave 6.5 · marca 8.1 · acento 7.2
     sobre bloque  #DCEEFB → tinta 11.3 · suave 5.7 · marca 7.0 · acento hondo 9.0
     sobre fuerte  #3F2A63 → blanco 12.2 · etiqueta #E6DAF5 9.1
     blanco sobre el botón #6A3FA0 → 7.4
   ========================================================================== */
:root{
  --papel:#FFFBF7;  --papel-hondo:#DCEEFB;
  --tinta:#2E2A4F;  --tinta-suave:#5C5878;
  --marca:#5B3E8C;  --marca-claro:#B79BE0;
  --acento:#6A3FA0; --acento-hondo:#4E2C7A;
  --fuerte:#3F2A63;  --sol:#FFD27A;  --sombra-color:#F3A6C4;
  --f-display:"Fredoka", system-ui, sans-serif;
  --f-texto:"Nunito", system-ui, sans-serif;
  --radio:18px;
  --borde:2px solid var(--tinta);
}

body{ background: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 0.3 0 0 0 0 0.2 0 0 0 0 0.4 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.14'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg opacity='0.4'%3E%3Ccircle cx='8' cy='149.8' r='1.9' fill='%23F58FB5'/%3E%3Crect x='52.5' y='40.4' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(131 52.5 40.4)'/%3E%3Crect x='90' y='58.7' width='7' height='2.6' rx='1.3' fill='%23B79BE0' transform='rotate(135 90 58.7)'/%3E%3Ccircle cx='124.3' cy='91.6' r='1.9' fill='%23FFD27A'/%3E%3Crect x='113.4' y='105.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(147 113.4 105.9)'/%3E%3Crect x='45.3' y='65.6' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(127 45.3 65.6)'/%3E%3Ccircle cx='115.5' cy='16.3' r='1.9' fill='%23B79BE0'/%3E%3Crect x='113.3' y='80.1' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(166 113.3 80.1)'/%3E%3Crect x='132.3' y='26.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(92 132.3 26.9)'/%3E%3Ccircle cx='150.2' cy='114' r='1.9' fill='%236FB6EE'/%3E%3Crect x='107.1' y='96.9' width='7' height='2.6' rx='1.3' fill='%23B79BE0' transform='rotate(164 107.1 96.9)'/%3E%3Crect x='147.9' y='65.3' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(60 147.9 65.3)'/%3E%3Ccircle cx='136.9' cy='59.2' r='1.9' fill='%23F58FB5'/%3E%3Crect x='31.5' y='53.8' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(77 31.5 53.8)'/%3E%3Crect x='53.4' y='152.3' width='7' height='2.6' rx='1.3' fill='%23B79BE0' transform='rotate(100 53.4 152.3)'/%3E%3Ccircle cx='120.3' cy='143.2' r='1.9' fill='%23FFD27A'/%3E%3C/g%3E%3C/svg%3E") 0 0/170px 170px, var(--papel); }
.portada__nombre,.pie__nombre{ font-family:"Fredoka", system-ui, sans-serif; font-weight:700; letter-spacing:0; }


/* ══════════ LA ENTRADA ══════════ */
.entrada{
  overflow:hidden;
  background:
    radial-gradient(64% 36% at 50% 52%, rgba(255,251,247,.72), transparent 74%),
    url("fondo.svg") center bottom/cover no-repeat,
    #EADFF3;
}
.entrada::before{                       /* destellos que giran despacito detrás del gancho */
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:53%; width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax;
  background:repeating-conic-gradient(rgba(255,255,255,.3) 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:#2E2A4F; font-weight:800;  }
.entrada__nombre{
  background:#fff; color:var(--marca);
  border:var(--borde); border-radius:16px;
  padding:.2rem 1.1rem .3rem;
  box-shadow:5px 5px 0 var(--sombra-color);
  transform:rotate(-1.5deg);
  margin:.35rem 0 .9rem;
}
.entrada__pista{
  background:#fff; color:var(--tinta);
  border:var(--borde); border-radius:999px;
  padding:.4rem 1.15rem;
  box-shadow:4px 4px 0 var(--sol);
}
.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; }
.gancho.globo{ width:min(54vw,214px); transform-origin:50% 100%; }
.gancho.globo .gancho__svg{ filter:drop-shadow(0 14px 16px rgba(46,42,79,.3)); }
.gancho.globo:not(.golpe):not(.abre){ animation:flotar 3.8s ease-in-out infinite; }
@keyframes flotar{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-14px) rotate(2deg); } }
/* Revienta: se infla de golpe y desaparece */
.gancho.globo.abre{ animation:tronar .5s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes tronar{ 0%{ transform:scale(1); opacity:1; } 35%{ transform:scale(1.38) rotate(-4deg); opacity:1; } 55%{ transform:scale(1.52) rotate(3deg); opacity:.55; } 100%{ transform:scale(.2) rotate(12deg); opacity:0; } }


/* ══════════ LA PORTADA ══════════ */
.portada{
  isolation:isolate;
  background:
    radial-gradient(52% 29% at 50% 43%, rgba(255,251,247,.96) 0%, rgba(255,251,247,.72) 55%, transparent 100%),
    url("fondo.svg") center bottom/cover no-repeat,
    #EADFF3;
}
.portada__arriba,.portada__anos{ color:var(--tinta); font-weight:600; }
.portada__anos{ font-family:var(--f-display); font-size:1.2rem; margin-bottom:.3rem; }
.portada__edad{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(6rem,34vw,11rem); line-height:.86; color:var(--acento);
  text-shadow:4px 4px 0 #fff, 9px 9px 0 var(--sombra-color);
}
.portada__nombre{ color:var(--marca); text-shadow:3px 3px 0 #fff, 6px 6px 0 #F3A6C4; line-height:1.2; font-size:clamp(2.2rem,11.5vw,3.6rem); }
.portada__fecha{
  background:#fff;
  border:var(--borde); border-radius:18px;
  box-shadow:6px 6px 0 var(--sombra-color);
  padding:.6rem 1.25rem;
}
.portada__fecha .fcol{ color:var(--tinta); }
.portada__lugar{
  margin-top:1.15rem;
  background:var(--fuerte); color:#fff; font-weight:700;
  padding:.42rem 1rem; border-radius:999px;
  border:2px solid #fff;
}
.portada__lugar{ font-size:.86rem; }
.portada__flecha span{ border-color:#fff; filter:drop-shadow(0 2px 0 #2E2A4F); }


/* ══════════ BLOQUES FUERTES — el color hondo del fondo baja y se vuelve sección ══════════ */
.seccion.saludo{ max-width:none; padding-top:4.2rem; padding-bottom:1.8rem; position:relative; }
.seccion.saludo > *{ max-width:640px; margin-left:auto; margin-right:auto; position:relative; }
.saludo, .momento{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg opacity='0.5'%3E%3Ccircle cx='8' cy='149.8' r='1.9' fill='%23F58FB5'/%3E%3Crect x='52.5' y='40.4' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(131 52.5 40.4)'/%3E%3Crect x='90' y='58.7' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(135 90 58.7)'/%3E%3Ccircle cx='124.3' cy='91.6' r='1.9' fill='%23FFFFFF'/%3E%3Crect x='113.4' y='105.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(147 113.4 105.9)'/%3E%3Crect x='45.3' y='65.6' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(127 45.3 65.6)'/%3E%3Ccircle cx='115.5' cy='16.3' r='1.9' fill='%23FFD27A'/%3E%3Crect x='113.3' y='80.1' width='7' height='2.6' rx='1.3' fill='%23FFFFFF' transform='rotate(166 113.3 80.1)'/%3E%3Crect x='132.3' y='26.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(92 132.3 26.9)'/%3E%3Ccircle cx='150.2' cy='114' r='1.9' fill='%236FB6EE'/%3E%3Crect x='107.1' y='96.9' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(164 107.1 96.9)'/%3E%3Crect x='147.9' y='65.3' width='7' height='2.6' rx='1.3' fill='%23FFFFFF' transform='rotate(60 147.9 65.3)'/%3E%3Ccircle cx='136.9' cy='59.2' r='1.9' fill='%23F58FB5'/%3E%3Crect x='31.5' y='53.8' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(77 31.5 53.8)'/%3E%3Crect x='53.4' y='152.3' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(100 53.4 152.3)'/%3E%3Ccircle cx='120.3' cy='143.2' r='1.9' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E") 0 0/170px 170px, var(--fuerte); }
.saludo::before{
  content:""; position:absolute; top:0; left:0; right:0; height:46px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='46' viewBox='0 0 260 46'%3E%3Cpath d='M0 6H260' stroke='%23E6DAF5' stroke-width='2'/%3E%3Cpath d='M8 7h34l-17 34z' fill='%23F58FB5' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M50 7h34l-17 34z' fill='%23FFFFFF' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M92 7h34l-17 34z' fill='%236FB6EE' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M134 7h34l-17 34z' fill='%23FFD27A' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M176 7h34l-17 34z' fill='%23F58FB5' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M218 7h34l-17 34z' fill='%236FB6EE' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center top/260px 46px repeat-x;
}
.saludo .etiqueta{ color:#E6DAF5; }
.saludo__nombre{ color:#fff; }
.saludo__pases{ background:var(--sol); color:var(--tinta); border:2px solid var(--tinta); box-shadow:3px 3px 0 #fff; }

.momento{
  padding-top:2.4rem; padding-bottom:4rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg opacity='0.5'%3E%3Ccircle cx='8' cy='149.8' r='1.9' fill='%23F58FB5'/%3E%3Crect x='52.5' y='40.4' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(131 52.5 40.4)'/%3E%3Crect x='90' y='58.7' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(135 90 58.7)'/%3E%3Ccircle cx='124.3' cy='91.6' r='1.9' fill='%23FFFFFF'/%3E%3Crect x='113.4' y='105.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(147 113.4 105.9)'/%3E%3Crect x='45.3' y='65.6' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(127 45.3 65.6)'/%3E%3Ccircle cx='115.5' cy='16.3' r='1.9' fill='%23FFD27A'/%3E%3Crect x='113.3' y='80.1' width='7' height='2.6' rx='1.3' fill='%23FFFFFF' transform='rotate(166 113.3 80.1)'/%3E%3Crect x='132.3' y='26.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(92 132.3 26.9)'/%3E%3Ccircle cx='150.2' cy='114' r='1.9' fill='%236FB6EE'/%3E%3Crect x='107.1' y='96.9' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(164 107.1 96.9)'/%3E%3Crect x='147.9' y='65.3' width='7' height='2.6' rx='1.3' fill='%23FFFFFF' transform='rotate(60 147.9 65.3)'/%3E%3Ccircle cx='136.9' cy='59.2' r='1.9' fill='%23F58FB5'/%3E%3Crect x='31.5' y='53.8' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(77 31.5 53.8)'/%3E%3Crect x='53.4' y='152.3' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(100 53.4 152.3)'/%3E%3Ccircle cx='120.3' cy='143.2' r='1.9' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E") 0 0/170px 170px,
    radial-gradient(70% 55% at 50% 46%, #6A4AA0 0%, transparent 72%),
    var(--fuerte);
}
.momento__foto{
  position:relative; z-index:1;
  border:9px solid #fff; border-bottom-width:26px; border-radius:6px; transform:rotate(-1.8deg);
  box-shadow:10px 10px 0 var(--sombra-color), 0 22px 40px -14px rgba(0,0,0,.55);
}
.momento::after{                        /* calcomanía */
  content:"¿...?";
  position:absolute; z-index:2; top:.8rem; right:max(3%, calc(50% - 225px));
  width:94px; height:94px; display:grid; place-items:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124'%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' transform='translate(4 4)' fill='%232E2A4F' opacity='.9'/%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' fill='%23FFD27A' stroke='%232E2A4F' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  font-family:var(--f-display); font-weight:700; font-size:.92rem; color:var(--tinta);
  transform:rotate(12deg);
}


/* ══════════ BLOQUES SUAVES (las secciones "alterna") ══════════ */
.seccion.alterna{
  position:relative;
  padding-top:5.4rem; padding-bottom:4rem;
  background: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 0.3 0 0 0 0 0.2 0 0 0 0 0.4 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E"), linear-gradient(104deg, #FCE3EC 0%, #FCE3EC 49.6%, #DCEEFB 50.4%, #DCEEFB 100%);
}
.seccion.alterna::before{
  content:""; position:absolute; top:0; left:0; right:0; height:46px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='46' viewBox='0 0 260 46'%3E%3Cpath d='M0 6H260' stroke='%232E2A4F' stroke-width='2'/%3E%3Cpath d='M8 7h34l-17 34z' fill='%23F58FB5' stroke='%232E2A4F' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M50 7h34l-17 34z' fill='%23FFFFFF' stroke='%232E2A4F' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M92 7h34l-17 34z' fill='%236FB6EE' stroke='%232E2A4F' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M134 7h34l-17 34z' fill='%23FFD27A' stroke='%232E2A4F' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M176 7h34l-17 34z' fill='%23B79BE0' stroke='%232E2A4F' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M218 7h34l-17 34z' fill='%23FFFFFF' stroke='%232E2A4F' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center top/260px 46px repeat-x;
}
.seccion.alterna > *{ position:relative; }
.seccion.alterna .linea__hora,
.seccion.alterna .faq__item summary::after{ color:var(--acento-hondo); }

.titulo{ padding-bottom:.7rem; background: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='%23F58FB5' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom/104px 11px; }

/* La cinta que corre, arriba de la cuenta regresiva */
.cuenta{ overflow:hidden; padding-top:7.3rem; }
.cuenta::before{ display:none; }
.cuenta::after{
  content:"★ ¿NIÑO O NIÑA?   ★ HAZ TU APUESTA   ★ EQUIPO ROSA   ★ EQUIPO AZUL   ★ NO FALTES   ★ ¿NIÑO O NIÑA?   ★ HAZ TU APUESTA   ★ EQUIPO ROSA   ★ EQUIPO AZUL   ★ NO FALTES   ★ ¿NIÑO O NIÑA?   ★ HAZ TU APUESTA   ★ EQUIPO ROSA   ★ EQUIPO AZUL   ★ NO FALTES   ★ ¿NIÑO O NIÑA?   ★ HAZ TU APUESTA   ★ EQUIPO ROSA   ★ EQUIPO AZUL   ★ NO FALTES   ";
  position:absolute; top:18px; left:0; z-index:1;
  white-space:pre; width:max-content;
  font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:.1em;
  line-height:2.6rem; color:#fff;
  background:var(--acento);
  border-top:var(--borde); border-bottom:var(--borde);
  box-shadow:0 5px 0 var(--sol);
  animation:cinta 46s linear infinite;
}
@keyframes cinta{ to{ transform:translateX(-50%); } }


/* ══════════ LAS PIEZAS ══════════ */
.cuenta__caja,
.tarjeta{
  border:var(--borde);
  border-radius:20px;
  box-shadow:5px 5px 0 var(--sombra-color);
  background:#fff;
  position:relative;
}
.cuenta__caja{ box-shadow:5px 5px 0 var(--sol); }
.tarjeta__icono{
  width:58px; height:58px; padding:9px; border-radius:50%;
  background:var(--sol);
  border:2px solid var(--tinta);
  color:var(--tinta);
}
.dedicatoria__texto{
  position:relative;
  background:#fff;
  border:var(--borde); border-radius:26px;
  padding:1.3rem 1.2rem;
  box-shadow:6px 6px 0 var(--sombra-color);
  margin-bottom:2.1rem;
}
.dedicatoria__texto::after{             /* la colita del globo de diálogo */
  content:""; position:absolute; left:50%; bottom:-12px;
  width:22px; height:22px; margin-left:-11px;
  background:#fff;
  border-right:var(--borde); border-bottom:var(--borde);
  transform:rotate(45deg);
}
.galeria{ position:relative; }
.galeria::after{
  content:"¡PUM!";
  position:absolute; z-index:2; top:1.3rem; right:.3rem;
  width:88px; height:88px; display:grid; place-items:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124'%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' transform='translate(4 4)' fill='%232E2A4F' opacity='.9'/%3E%3Cpath d='M118 62L111 71.8L113.7 83.4L103.6 89.8L101.6 101.6L89.8 103.6L83.4 113.7L71.8 111L62 118L52.2 111L40.6 113.7L34.2 103.6L22.4 101.6L20.4 89.8L10.3 83.4L13 71.8L6 62L13 52.2L10.3 40.6L20.4 34.2L22.4 22.4L34.2 20.4L40.6 10.3L52.2 13L62 6L71.8 13L83.4 10.3L89.8 20.4L101.6 22.4L103.6 34.2L113.7 40.6L111 52.2Z' fill='%23FFD27A' stroke='%232E2A4F' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  font-family:var(--f-display); font-weight:700; font-size:.82rem; color:var(--tinta);
  transform:rotate(-11deg);
}
.foto img{
  border:6px solid #fff; border-bottom-width:16px; border-radius:6px;
  box-shadow:5px 5px 0 var(--sombra-color), 0 12px 24px -12px rgba(63,42,99,.4);
}
.foto:nth-child(even) img{ transform:rotate(1.3deg); }
.foto:nth-child(odd) img{ transform:rotate(-1.1deg); }
.foto--ancha img{ transform:rotate(-.6deg); box-shadow:7px 7px 0 var(--sol), 0 12px 24px -12px rgba(63,42,99,.4); }
.galeria__grid{ gap:1rem; }
.foto__hueco{ border:2px dashed var(--marca-claro); background:#fff; border-radius:14px; }
.linea__paso::before{ background:#fff; }
.mapa{ border:6px solid #fff; outline:var(--borde); box-shadow:7px 7px 0 var(--sombra-color); }
.notas__lista li{ background:#fff; border:2px solid var(--tinta); border-left:7px solid var(--acento); box-shadow:4px 4px 0 var(--sombra-color); }
.faq__item{ background:#fff; border:2px solid var(--tinta); box-shadow:4px 4px 0 var(--sombra-color); }
.boton--linea{ background:#fff; border:var(--borde); box-shadow:4px 4px 0 var(--sombra-color); color:var(--marca); }
.boton--linea:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--sombra-color); }


/* ══════════ CONFIRMAR — el segundo bloque fuerte: aquí el botón jala el ojo ══════════
   (va DESPUÉS de .seccion.alterna: las dos reglas pesan igual y gana la última) */
.seccion.rsvp{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg opacity='0.5'%3E%3Ccircle cx='8' cy='149.8' r='1.9' fill='%23F58FB5'/%3E%3Crect x='52.5' y='40.4' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(131 52.5 40.4)'/%3E%3Crect x='90' y='58.7' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(135 90 58.7)'/%3E%3Ccircle cx='124.3' cy='91.6' r='1.9' fill='%23FFFFFF'/%3E%3Crect x='113.4' y='105.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(147 113.4 105.9)'/%3E%3Crect x='45.3' y='65.6' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(127 45.3 65.6)'/%3E%3Ccircle cx='115.5' cy='16.3' r='1.9' fill='%23FFD27A'/%3E%3Crect x='113.3' y='80.1' width='7' height='2.6' rx='1.3' fill='%23FFFFFF' transform='rotate(166 113.3 80.1)'/%3E%3Crect x='132.3' y='26.9' width='7' height='2.6' rx='1.3' fill='%23F58FB5' transform='rotate(92 132.3 26.9)'/%3E%3Ccircle cx='150.2' cy='114' r='1.9' fill='%236FB6EE'/%3E%3Crect x='107.1' y='96.9' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(164 107.1 96.9)'/%3E%3Crect x='147.9' y='65.3' width='7' height='2.6' rx='1.3' fill='%23FFFFFF' transform='rotate(60 147.9 65.3)'/%3E%3Ccircle cx='136.9' cy='59.2' r='1.9' fill='%23F58FB5'/%3E%3Crect x='31.5' y='53.8' width='7' height='2.6' rx='1.3' fill='%236FB6EE' transform='rotate(77 31.5 53.8)'/%3E%3Crect x='53.4' y='152.3' width='7' height='2.6' rx='1.3' fill='%23FFD27A' transform='rotate(100 53.4 152.3)'/%3E%3Ccircle cx='120.3' cy='143.2' r='1.9' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E") 0 0/170px 170px,
    radial-gradient(80% 45% at 50% 0%, #6A4AA0 0%, transparent 70%),
    var(--fuerte);
  padding-top:5.4rem; padding-bottom:4rem;
}
.seccion.rsvp::before{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='46' viewBox='0 0 260 46'%3E%3Cpath d='M0 6H260' stroke='%23E6DAF5' stroke-width='2'/%3E%3Cpath d='M8 7h34l-17 34z' fill='%23F58FB5' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M50 7h34l-17 34z' fill='%23FFFFFF' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M92 7h34l-17 34z' fill='%236FB6EE' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M134 7h34l-17 34z' fill='%23FFD27A' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M176 7h34l-17 34z' fill='%23F58FB5' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M218 7h34l-17 34z' fill='%236FB6EE' stroke='%23E6DAF5' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center top/260px 46px repeat-x; }
.rsvp .etiqueta{ color:#E6DAF5; }
.rsvp .titulo{ color:#fff; background-image: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='%23FFD27A' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.rsvp__intro{ color:#E6DAF5; }
.rsvp__intro b{ color:var(--sol); }
.formulario{ border:var(--borde); box-shadow:8px 8px 0 var(--sol); }


/* ══════════ EL PIE ══════════ */
.pie{
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--fuerte) 0%, rgba(63,42,99,.7) 42%, rgba(40,24,66,.88) 100%),
    url("fondo.svg") center bottom/cover no-repeat,
    var(--fuerte);
}

/* Cada tarjeta trae su sombra de los dos equipos */
.tarjeta:nth-child(odd){ box-shadow:5px 5px 0 #F3A6C4; }
.tarjeta:nth-child(even){ box-shadow:5px 5px 0 #8EC5F0; }

/* LA APUESTA: un botón rosa y uno azul */
.voto__boton{ border:2px solid var(--tinta); border-radius:22px; font-weight:600; }
.voto__boton--a{ background:#FCE3EC; box-shadow:5px 5px 0 #F3A6C4; }
.voto__boton--b{ background:#DCEEFB; box-shadow:5px 5px 0 #8EC5F0; }
.voto__boton[aria-pressed="true"]{ border-color:var(--acento); border-width:3px; }
.voto__boton--a[aria-pressed="true"]{ background:#F9B2CC; }
.voto__boton--b[aria-pressed="true"]{ background:#A5D3F5; }
.voto__nota{ font-weight:700; color:var(--marca); }