/* ==========================================================================
   TEMA: PIÑATA DE NIÑA  ·  dirección de arte "FIESTA EN EL JARDÍN"
   Rediseñado el 2 de octubre de 2026.

   LA IDEA: una fiesta mexicana de jardín al caer la tarde. Papel picado,
   foquitos, piñata y pastel. El fondo ILUSTRADO (fondo.webp) abre la entrada
   y la portada; el resto de la invitación sale de ahí:
     · papel crema rosado + bloques rosa pastel + dos bloques ciruela (el
       color exacto de los arbustos del fondo, para que el jardín "baje")
     · lenguaje de PAPEL RECORTADO: guirnaldas de papel picado, tarjetas
       con puntada, foquitos encendidos, confeti, cinta adhesiva en la foto
   Mismo nivel que "Atardecer de cómic" del Héroe araña, con otra voz.

   TEORÍA DEL COLOR: rosa y lila son análogos (calma, ternura); el dorado
   de los foquitos es su complemento y da la chispa. El magenta queda solo
   para botones y acentos.  60 crema/rosa · 30 ciruela · 10 magenta.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre papel   #FFF6F1 → tinta 13.4 · suave 7.0 · marca 8.1 · acento 5.5
     sobre rosa    #FBDCE6 → tinta 11.2 · suave 5.9 · marca 6.7 · acento 4.6
     sobre ciruela #4A2147 → blanco 13.1 · etiqueta #F0D6EA 9.7 · dorado 9.2
     tinta sobre el dorado de las calcomanías → 10.0
     blanco sobre el botón magenta → 5.9
   ========================================================================== */
:root{
  --papel:#FFF6F1;  --papel-hondo:#FBDCE6;
  --tinta:#3D2233;  --tinta-suave:#6E4A60;
  --marca:#7A2E6E;  --marca-claro:#E75A9B;
  --acento:#C2185B; --acento-hondo:#96123F;
  --noche:#4A2147;  --sol:#FFD27A;  --rosa:#F3A6C4;
  --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 .3 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.17'/%3E%3C/svg%3E");
  --confeti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg opacity='.34'%3E%3Ccircle cx='8' cy='149.8' r='1.9' fill='%23E75A9B'/%3E%3Crect x='52.5' y='40.4' width='7' height='2.6' rx='1.3' fill='%23E8A93B' transform='rotate(131 52.5 40.4)'/%3E%3Crect x='90' y='58.7' width='7' height='2.6' rx='1.3' fill='%23B48AD6' transform='rotate(135 90 58.7)'/%3E%3Ccircle cx='124.3' cy='91.6' r='1.9' fill='%235BB8A8'/%3E%3Crect x='113.4' y='105.9' width='7' height='2.6' rx='1.3' fill='%23F08A6C' transform='rotate(147 113.4 105.9)'/%3E%3Crect x='45.3' y='65.6' width='7' height='2.6' rx='1.3' fill='%23E75A9B' transform='rotate(127 45.3 65.6)'/%3E%3Ccircle cx='115.5' cy='16.3' r='1.9' fill='%23E8A93B'/%3E%3Crect x='113.3' y='80.1' width='7' height='2.6' rx='1.3' fill='%23B48AD6' transform='rotate(166 113.3 80.1)'/%3E%3Crect x='132.3' y='26.9' width='7' height='2.6' rx='1.3' fill='%235BB8A8' transform='rotate(92 132.3 26.9)'/%3E%3Ccircle cx='150.2' cy='114' r='1.9' fill='%23F08A6C'/%3E%3Crect x='107.1' y='96.9' width='7' height='2.6' rx='1.3' fill='%23E75A9B' transform='rotate(164 107.1 96.9)'/%3E%3Crect x='147.9' y='65.3' width='7' height='2.6' rx='1.3' fill='%23E8A93B' transform='rotate(60 147.9 65.3)'/%3E%3Ccircle cx='136.9' cy='59.2' r='1.9' fill='%23B48AD6'/%3E%3Crect x='31.5' y='53.8' width='7' height='2.6' rx='1.3' fill='%235BB8A8' transform='rotate(77 31.5 53.8)'/%3E%3Crect x='53.4' y='152.3' width='7' height='2.6' rx='1.3' fill='%23F08A6C' transform='rotate(100 53.4 152.3)'/%3E%3Ccircle cx='120.3' cy='143.2' r='1.9' fill='%23E75A9B'/%3E%3C/g%3E%3C/svg%3E");
  --guirnalda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='56' viewBox='0 0 260 56'%3E%3Cpath d='M0 7Q130 13 260 7' fill='none' stroke='%237A2E6E' stroke-width='2'/%3E%3Cpath d='M6 9h40v30l-5 6-5-6-5 6-5-6-5 6-5-6-5 6-5-6z' fill='%23F06FA4'/%3E%3Cg fill='%23fff' opacity='.78'%3E%3Ccircle cx='26' cy='24' r='3'/%3E%3Ccircle cx='26' cy='16.5' r='2.2'/%3E%3Ccircle cx='33.5' cy='24' r='2.2'/%3E%3Ccircle cx='26' cy='31.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='24' r='2.2'/%3E%3Crect x='12' y='13' width='28' height='1.6' rx='.8'/%3E%3C/g%3E%3Cpath d='M58 9h40v30l-5 6-5-6-5 6-5-6-5 6-5-6-5 6-5-6z' fill='%23FFC857'/%3E%3Cg fill='%23fff' opacity='.78'%3E%3Ccircle cx='78' cy='24' r='3'/%3E%3Ccircle cx='78' cy='16.5' r='2.2'/%3E%3Ccircle cx='85.5' cy='24' r='2.2'/%3E%3Ccircle cx='78' cy='31.5' r='2.2'/%3E%3Ccircle cx='70.5' cy='24' r='2.2'/%3E%3Crect x='64' y='13' width='28' height='1.6' rx='.8'/%3E%3C/g%3E%3Cpath d='M110 9h40v30l-5 6-5-6-5 6-5-6-5 6-5-6-5 6-5-6z' fill='%23B48AD6'/%3E%3Cg fill='%23fff' opacity='.78'%3E%3Ccircle cx='130' cy='24' r='3'/%3E%3Ccircle cx='130' cy='16.5' r='2.2'/%3E%3Ccircle cx='137.5' cy='24' r='2.2'/%3E%3Ccircle cx='130' cy='31.5' r='2.2'/%3E%3Ccircle cx='122.5' cy='24' r='2.2'/%3E%3Crect x='116' y='13' width='28' height='1.6' rx='.8'/%3E%3C/g%3E%3Cpath d='M162 9h40v30l-5 6-5-6-5 6-5-6-5 6-5-6-5 6-5-6z' fill='%235BC0B0'/%3E%3Cg fill='%23fff' opacity='.78'%3E%3Ccircle cx='182' cy='24' r='3'/%3E%3Ccircle cx='182' cy='16.5' r='2.2'/%3E%3Ccircle cx='189.5' cy='24' r='2.2'/%3E%3Ccircle cx='182' cy='31.5' r='2.2'/%3E%3Ccircle cx='174.5' cy='24' r='2.2'/%3E%3Crect x='168' y='13' width='28' height='1.6' rx='.8'/%3E%3C/g%3E%3Cpath d='M214 9h40v30l-5 6-5-6-5 6-5-6-5 6-5-6-5 6-5-6z' fill='%23FF9A76'/%3E%3Cg fill='%23fff' opacity='.78'%3E%3Ccircle cx='234' cy='24' r='3'/%3E%3Ccircle cx='234' cy='16.5' r='2.2'/%3E%3Ccircle cx='241.5' cy='24' r='2.2'/%3E%3Ccircle cx='234' cy='31.5' r='2.2'/%3E%3Ccircle cx='226.5' cy='24' r='2.2'/%3E%3Crect x='220' y='13' width='28' height='1.6' rx='.8'/%3E%3C/g%3E%3C/svg%3E");
  --foquitos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='46' viewBox='0 0 230 46'%3E%3Cpath d='M0 6Q57.5 30 115 6Q172.5 30 230 6' fill='none' stroke='%23D9C3D6' stroke-width='1.6'/%3E%3Ccircle cx='29' cy='21.5' r='10' fill='%23FFD27A' opacity='.26'/%3E%3Crect x='27' y='14.5' width='4' height='3.5' fill='%23D9C3D6'/%3E%3Cellipse cx='29' cy='22.5' rx='4' ry='5.6' fill='%23FFE7AE' stroke='%23E8A93B' stroke-width='1'/%3E%3Ccircle cx='57.5' cy='25' r='10' fill='%23FFD27A' opacity='.26'/%3E%3Crect x='55.5' y='18' width='4' height='3.5' fill='%23D9C3D6'/%3E%3Cellipse cx='57.5' cy='26' rx='4' ry='5.6' fill='%23FFE7AE' stroke='%23E8A93B' stroke-width='1'/%3E%3Ccircle cx='86' cy='21.5' r='10' fill='%23FFD27A' opacity='.26'/%3E%3Crect x='84' y='14.5' width='4' height='3.5' fill='%23D9C3D6'/%3E%3Cellipse cx='86' cy='22.5' rx='4' ry='5.6' fill='%23FFE7AE' stroke='%23E8A93B' stroke-width='1'/%3E%3Ccircle cx='144' cy='21.5' r='10' fill='%23FFD27A' opacity='.26'/%3E%3Crect x='142' y='14.5' width='4' height='3.5' fill='%23D9C3D6'/%3E%3Cellipse cx='144' cy='22.5' rx='4' ry='5.6' fill='%23FFE7AE' stroke='%23E8A93B' stroke-width='1'/%3E%3Ccircle cx='172.5' cy='25' r='10' fill='%23FFD27A' opacity='.26'/%3E%3Crect x='170.5' y='18' width='4' height='3.5' fill='%23D9C3D6'/%3E%3Cellipse cx='172.5' cy='26' rx='4' ry='5.6' fill='%23FFE7AE' stroke='%23E8A93B' stroke-width='1'/%3E%3Ccircle cx='201' cy='21.5' r='10' fill='%23FFD27A' opacity='.26'/%3E%3Crect x='199' y='14.5' width='4' height='3.5' fill='%23D9C3D6'/%3E%3Cellipse cx='201' cy='22.5' rx='4' ry='5.6' fill='%23FFE7AE' stroke='%23E8A93B' stroke-width='1'/%3E%3C/svg%3E");
  --estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124'%3E%3Cpolygon points='65,12 83.2,41.9 117.3,50 94.5,76.6 97.3,111.5 65,98 32.7,111.5 35.5,76.6 12.7,50 46.8,41.9' fill='%233D2233' stroke='%233D2233' stroke-width='8' stroke-linejoin='round'/%3E%3Cpolygon points='60,7 78.2,36.9 112.3,45 89.5,71.6 92.3,106.5 60,93 27.7,106.5 30.5,71.6 7.7,45 41.8,36.9' fill='%23FFD27A' stroke='%233D2233' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --borde:2px 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='%23E75A9B' 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='%23FFD27A' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* El papel: crema, con grano y confeti regado muy suave en TODO el fondo */
body{ background:var(--grano), var(--confeti) 0 0/170px 170px, var(--papel); }

/* El nombre de la festejada va en letra de pincel; solo en lo grande */
.portada__nombre,.pie__nombre{ font-family:"Pacifico", var(--f-display); font-weight:400; letter-spacing:0; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  overflow:hidden;
  background:
    radial-gradient(64% 38% at 50% 52%, rgba(255,246,241,.6), rgba(255,246,241,0) 72%),
    url("fondo.webp") center bottom/cover no-repeat,
    #F3C0CE;
}
/* Destellos que giran despacito detrás de la piñata */
.entrada::before{
  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,.24) 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; }
.entrada__nombre{
  background:#fff; color:var(--marca);
  border:var(--borde); border-radius:16px;
  padding:.2rem 1rem .3rem;
  box-shadow:5px 5px 0 var(--rosa);
  transform:rotate(-1.5deg);
  margin:.35rem 0 .9rem;
}
/* El mecate del que cuelga */
.cuerda{
  width:3px; height:30px; border-radius:2px;
  background:repeating-linear-gradient(180deg,#C7A77A 0 6px,#A98A5E 6px 12px);
}
.gancho.pinata{
  width:min(74vw,300px);
  transform-origin:50% -34px;   /* gira desde el mecate, como colgada */
  animation:colgar 3.4s ease-in-out infinite;
}
.gancho.pinata .gancho__svg{ filter:drop-shadow(0 16px 14px rgba(61,34,51,.3)) drop-shadow(0 3px 2px rgba(61,34,51,.25)); }
@keyframes colgar{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.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;
}


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — el mismo cielo, con un resplandor crema detrás del número
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  isolation:isolate;
  background:
    radial-gradient(50% 28% at 50% 43%, rgba(255,246,241,.95) 0%, rgba(255,246,241,.72) 55%, rgba(255,246,241,0) 100%),
    url("fondo.webp") center bottom/cover no-repeat,
    #F3C0CE;
}
.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(--rosa);
}
.portada__nombre{ color:var(--marca); text-shadow:3px 3px 0 #fff, 6px 6px 0 rgba(243,166,196,.9); line-height:1.25; margin-top:0; }
.portada__fecha{
  background:#fff;
  border:var(--borde); border-radius:18px;
  box-shadow:6px 6px 0 var(--rosa);
  padding:.6rem 1.25rem;
  outline:2px dashed rgba(194,24,91,.35); outline-offset:-7px;      /* la puntada */
}
.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 CIRUELA — el jardín de la portada "baja" y se vuelve fondo
   ══════════════════════════════════════════════════════════════════════ */
.seccion.saludo{ max-width:none; padding-top:4.4rem; padding-bottom:1.8rem; position:relative; }
.seccion.saludo > *{ max-width:640px; margin-left:auto; margin-right:auto; position:relative; }
.saludo, .momento{ background:var(--confeti) 0 0/170px 170px, var(--noche); }
/* Foquitos encendidos colgando arriba del bloque */
.saludo::before, .seccion.rsvp::after{
  content:""; position:absolute; top:6px; left:0; right:0; height:46px; pointer-events:none;
  background:var(--foquitos) center top/230px 46px repeat-x;
}
.saludo .etiqueta{ color:#F0D6EA; }
.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 instantánea pegada con cinta */
.momento{
  padding-top:2.4rem; padding-bottom:4rem;
  background:
    var(--confeti) 0 0/170px 170px,
    radial-gradient(70% 55% at 50% 46%, #7A3A78 0%, rgba(122,58,120,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:9px solid #fff; border-bottom-width:26px;
  box-shadow:10px 10px 0 var(--rosa), 0 22px 40px -14px rgba(0,0,0,.6);
  transform:rotate(-1.8deg);
  border-radius:6px;
}
.momento::before{                           /* la cinta adhesiva */
  content:""; position:absolute; z-index:2; top:1.5rem; left:50%;
  width:112px; height:30px; margin-left:-56px;
  background:repeating-linear-gradient(135deg, rgba(255,210,122,.92) 0 9px, rgba(255,226,160,.92) 9px 18px);
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  transform:rotate(3deg);
}
.momento::after{                            /* calcomanía */
  content:"¡DALE!";
  position:absolute; z-index:2; top:.9rem; right:max(3%, calc(50% - 225px));
  width:96px; height:96px; display:grid; place-items:center; padding-top:8px;
  background:var(--estrella) center/contain no-repeat;
  font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:.02em;
  color:var(--tinta);
  transform:rotate(12deg);
}


/* ══════════════════════════════════════════════════════════════════════
   BLOQUES ROSA (las secciones "alterna") — con su guirnalda de papel picado
   ══════════════════════════════════════════════════════════════════════ */
.seccion.alterna{
  position:relative;
  padding-top:5.6rem; padding-bottom:4rem;
  background:
    var(--grano),
    var(--confeti) 0 0/170px 170px,
    radial-gradient(95% 60% at 100% 0%, rgba(255,210,122,.42), rgba(255,210,122,0) 62%),
    linear-gradient(180deg, #FDE7EE 0%, var(--papel-hondo) 100%);
}
.seccion.alterna::before{                   /* la guirnalda cuelga del borde de arriba */
  content:""; position:absolute; top:0; left:0; right:0; height:56px; pointer-events:none;
  background:var(--guirnalda) center top/260px 56px repeat-x;
}
.seccion.alterna > *{ position:relative; }
/* El magenta sobre rosa queda justo: ahí va el magenta 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; }
.cuenta::before{ display:none; }            /* aquí la cinta hace de guirnalda */
.cuenta::after{
  content:"★ ¡DALE A LA PIÑATA!   ★ HABRÁ DULCES   ★ PASTEL Y BOLSITAS   ★ PINTACARITAS   ★ BRINCOLÍN   ★ NO FALTES   ★ ¡DALE A LA PIÑATA!   ★ HABRÁ DULCES   ★ PASTEL Y BOLSITAS   ★ PINTACARITAS   ★ BRINCOLÍN   ★ NO FALTES   ★ ¡DALE A LA PIÑATA!   ★ HABRÁ DULCES   ★ PASTEL Y BOLSITAS   ★ PINTACARITAS   ★ BRINCOLÍN   ★ NO FALTES   ★ ¡DALE A LA PIÑATA!   ★ HABRÁ DULCES   ★ PASTEL Y BOLSITAS   ★ PINTACARITAS   ★ BRINCOLÍN   ★ 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%); } }


/* ══════════════════════════════════════════════════════════════════════
   PIEZAS — papel recortado: borde fino, sombra rosa y puntada
   ══════════════════════════════════════════════════════════════════════ */
.cuenta__caja,
.tarjeta{
  border:var(--borde);
  border-radius:20px;
  box-shadow:5px 5px 0 var(--rosa);
  background:#fff;
  position:relative;
  outline:2px dashed rgba(194,24,91,.3); outline-offset:-7px;
}
.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);
}

/* La dedicatoria: una tarjetita con colita, como globo de diálogo */
.dedicatoria__texto{
  position:relative;
  background:#fff;
  border:var(--borde); border-radius:26px;
  padding:1.3rem 1.2rem;
  box-shadow:6px 6px 0 var(--rosa);
  margin-bottom:2.1rem;
}
.dedicatoria__texto::after{
  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);
}

/* La galería: instantáneas un poco chuecas + calcomanía */
.galeria{ position:relative; }
.galeria::after{
  content:"¡FIESTA!";
  position:absolute; z-index:2; top:1.3rem; right:.3rem;
  width:92px; height:92px; display:grid; place-items:center; padding-top:8px;
  background:var(--estrella) center/contain no-repeat;
  font-family:var(--f-display); font-weight:700; font-size:.74rem; letter-spacing:.01em;
  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(--rosa), 0 10px 22px -10px rgba(61,34,51,.5);
}
.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 10px 22px -10px rgba(61,34,51,.5); }
.galeria__grid{ gap:1rem; }
.foto__hueco{ border:2px dashed var(--marca-claro); background:#fff; border-radius:14px; }

/* 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(--rosa); }
.notas__lista li{ background:#fff; border:2px solid var(--tinta); border-left:7px solid var(--acento); box-shadow:4px 4px 0 var(--rosa); }
.faq__item{ background:#fff; border:2px solid var(--tinta); box-shadow:4px 4px 0 var(--rosa); }
.boton--linea{ background:#fff; border:var(--borde); box-shadow:4px 4px 0 var(--rosa); color:var(--marca); }
.boton--linea:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--rosa); }


/* ══════════════════════════════════════════════════════════════════════
   CONFIRMAR — segundo bloque ciruela, para que el botón magenta jale el ojo
   ══════════════════════════════════════════════════════════════════════ */
.seccion.rsvp{
  background:
    var(--confeti) 0 0/170px 170px,
    radial-gradient(80% 45% at 50% 0%, #7A3A78 0%, rgba(122,58,120,0) 70%),
    var(--noche);
  padding-top:5.4rem; padding-bottom:4rem;
}
.seccion.rsvp::before{ display:none; }
.rsvp .etiqueta{ color:#F0D6EA; }
.rsvp .titulo{ color:#fff; background-image:var(--brochazo-sol); }
.rsvp__intro{ color:#F6E6F1; }
.rsvp__intro b{ color:var(--sol); }
.formulario{ border:var(--borde); box-shadow:8px 8px 0 var(--sol); }


/* ══════════════════════════════════════════════════════════════════════
   EL PIE — el jardín de noche
   ══════════════════════════════════════════════════════════════════════ */
.pie{
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--noche) 0%, rgba(74,33,71,.72) 42%, rgba(40,16,40,.86) 100%),
    url("fondo.webp") center bottom/cover no-repeat,
    var(--noche);
}