/* ==========================================================================
   TEMA: ANIVERSARIO · BODAS DE ORO — dirección de arte "LOS DEL PASTEL"
   Creada el 5 de octubre de 2026 (trabajo nocturno). Abdiel pidió demos para
   "señores grandes o señoras grandes". Un aniversario de bodas es la fiesta de
   gente mayor por excelencia, y no había ninguno en el muestrario.

   LA IDEA: los festejados son los novios del pastel. La invitación empieza en el
   pastel (se soplan las velas) y la portada es un "antes y ahora": se desliza la
   raya y se ven en 1977 y hoy, con el mismo traje y el mismo ramo, pero con canas,
   lentes y pancita. Los arcos de colores son de los setenta, cuando se casaron.
   Lo que la hace distinta: el ÁLBUM DE TODOS, donde los invitados suben fotos
   viejas con ellos. Letra más grande que en los demás temas: la va a leer gente mayor.

   TEORÍA DEL COLOR: marfil de base (60), azul petróleo en los bloques (30) y oro
   en lo que se toca (10). Petróleo y oro son casi complementarios (azul verdoso
   frente a amarillo anaranjado): el oro brilla sin necesidad de negro. El rubor y
   el azul cielo de los arcos son tintes suaves de esos mismos dos.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre marfil   #FBF4E6 → tinta 12.5 · suave 6.6 · petróleo 8.7 · oro hondo 5.8
     sobre petróleo #134B5F → marfil 8.7 · oro claro 6.4 · suave claro 6.7
     tinta sobre el botón de oro #E0BC62 → 7.5
   ========================================================================== */
:root{
  --marfil:#FBF4E6; --petroleo:#134B5F; --petroleo-hondo:#0E3A4A; --oro:#C9A24B; --oro-boton:#E0BC62; --oro-claro:#E8D29A; --rubor:#E9B7A6; --cielo:#8FB8C4;
  --papel:#FBF4E6;  --papel-hondo:#F3E7CF;
  --tinta:#12313D;  --tinta-suave:#3F5B66;
  --marca:#134B5F;  --marca-claro:#C9A24B;
  --acento:#7A5A12; --acento-hondo:#5E4409;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-texto:"Mulish", system-ui, sans-serif;
  --radio:18px;
  --sombra:0 14px 30px -18px rgba(18,49,61,.5);
  --sombra-alta:0 26px 50px -22px rgba(18,49,61,.55);
  /* medio arcoíris de los setenta: tres arcos, de afuera hacia adentro oro, rubor y cielo */
  --arcos:radial-gradient(circle at 50% 100%, transparent 0 27%, var(--cielo) 27.6% 38%, transparent 38.6% 41%, var(--rubor) 41.6% 52%, transparent 52.6% 55%, var(--oro) 55.6% 66%, transparent 66.6%);
}
body{ background:var(--papel); font-size:17px; }

/* sobre petróleo las letras se voltean a claro; las tarjetas de adentro regresan a tinta sobre marfil */
.entrada, .seccion.alterna, .pie{ --tinta:#FBF4E6; --tinta-suave:#C8DCE2; --marca:#E8D29A; --acento:#E8D29A; color:var(--tinta); }
.seccion.alterna :is(.cuenta__caja, .tarjeta, .formulario, .notas__lista li){ --tinta:#12313D; --tinta-suave:#3F5B66; --marca:#134B5F; --acento:#7A5A12; color:var(--tinta); }

.etiqueta{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--f-texto); font-weight:800; font-size:.72rem; letter-spacing:.24em; color:var(--acento); }
.etiqueta::before, .etiqueta::after{ content:""; width:22px; height:2px; background:currentColor; opacity:.7; }
.titulo{ font-family:var(--f-display); font-weight:800; line-height:1.08; font-size:clamp(2rem,9vw,2.8rem); margin:.6rem 0 1.4rem; color:var(--marca); letter-spacing:-.01em; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el pastel. Se soplan las velas (dos toques) y se abre.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:radial-gradient(circle at 50% 58%, #1D6078 0, var(--petroleo) 46%, var(--petroleo-hondo) 100%); transition:opacity .7s ease .9s, visibility 0s linear 1.6s; }
.entrada::before{                              /* los arcos, grandes, detrás del pastel */
  content:""; position:absolute; left:50%; top:64%; width:min(128vw,560px); aspect-ratio:2/1; transform:translate(-50%,-100%); opacity:.2; pointer-events:none;
  background:var(--arcos);
}
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ font-family:var(--f-texto); font-weight:800; letter-spacing:.3em; font-size:.72rem; color:var(--oro-claro); }
.entrada__nombre{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:clamp(1.9rem,8.4vw,2.5rem); line-height:1.1; margin:.3rem 0 .4rem; color:var(--marfil); }
.gancho.pastel-velas{ position:relative; width:min(64vw,262px); aspect-ratio:600/760; }
.gancho.pastel-velas::before{                  /* la luz de las velas */
  content:""; position:absolute; left:50%; top:44%; width:130%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,120,.38) 0, rgba(255,214,120,0) 62%); animation:pv-luz 1.7s ease-in-out infinite;
}
@keyframes pv-luz{ 0%,100%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 45%{ opacity:.72; transform:translate(-50%,-50%) scale(.95); } 70%{ opacity:.9; } }
.pastel{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .35s ease; }
.pastel--apagado{ opacity:0; }
/* primer soplido: el pastel se cimbra y la luz parpadea */
.gancho.pastel-velas.golpe{ animation:pv-cimbra .5s ease; }
@keyframes pv-cimbra{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-3deg) translateX(-5px); } 55%{ transform:rotate(2.4deg) translateX(4px); } 80%{ transform:rotate(-1deg); } }
.gancho.pastel-velas.golpe::before{ animation:pv-parpadeo .5s ease; }
@keyframes pv-parpadeo{ 0%,100%{ opacity:1; } 30%{ opacity:.25; } 60%{ opacity:.8; } 80%{ opacity:.4; } }
/* segundo: se apagan (queda el humito) y el pastel se acerca */
.gancho.pastel-velas.abre .pastel--prendido{ opacity:0; }
.gancho.pastel-velas.abre .pastel--apagado{ opacity:1; }
.gancho.pastel-velas.abre::before{ animation:none; opacity:0; transition:opacity .35s ease; }
.gancho.pastel-velas.abre{ animation:pv-abre 1.1s ease-in .45s forwards; }
@keyframes pv-abre{ to{ transform:scale(1.5) translateY(6%); opacity:0; } }
.entrada__pista{
  margin-top:1.3rem; padding:.7rem 1.6rem .66rem; border-radius:999px;
  background:linear-gradient(180deg, #EBCB7C, var(--oro-boton)); color:#12313D; box-shadow:0 5px 0 #A8842F, 0 14px 24px -12px rgba(0,0,0,.6);
  font-family:var(--f-texto); font-weight:800; font-size:1.05rem;
  animation:pv-late 1.7s ease-in-out infinite;
}
@keyframes pv-late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.entrada__marcador{ margin-top:.9rem; color:var(--oro-claro); font-weight:700; letter-spacing:.1em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — antes y ahora: se desliza la raya
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; gap:0; padding-top:2.6rem; background:radial-gradient(circle at 50% 30%, #FFFBF1 0, var(--papel) 60%, var(--papel-hondo) 100%); }
.portada__arriba{ font-family:var(--f-texto); font-weight:800; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--acento); }
.comparador{
  --corte:50%;
  position:relative; width:min(82vw,330px); aspect-ratio:720/900; margin:1.2rem auto .9rem; overflow:hidden;
  border-radius:999px 999px 22px 22px;          /* un arco, como los del fondo */
  box-shadow:0 0 0 5px var(--marfil), 0 0 0 8px var(--oro), var(--sombra-alta);
  touch-action:pan-y; cursor:ew-resize; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; background:var(--papel-hondo);
}
.comparador img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.comparador__antes{ clip-path:inset(0 calc(100% - var(--corte)) 0 0); }
.comparador__raya{ position:absolute; top:0; bottom:0; left:var(--corte); width:4px; margin-left:-2px; background:#fff; box-shadow:0 0 0 1px rgba(18,49,61,.2); pointer-events:none; }
.comparador__raya i{                           /* la perilla, con sus dos flechitas */
  position:absolute; left:50%; top:60%; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%;
  background:linear-gradient(180deg, #EBCB7C, var(--oro-boton)); box-shadow:0 0 0 3px #fff, 0 6px 14px rgba(18,49,61,.45);
}
.comparador__raya i::before, .comparador__raya i::after{ content:""; position:absolute; top:50%; width:9px; height:9px; margin-top:-5px; border:solid #12313D; border-width:0 0 3px 3px; }
.comparador__raya i::before{ left:11px; transform:rotate(45deg); }
.comparador__raya i::after{ right:11px; transform:rotate(-135deg); }
.comparador__anio{
  position:absolute; bottom:14px; padding:.2rem .7rem .24rem; border-radius:999px; pointer-events:none;
  background:var(--petroleo); color:var(--marfil); font-family:var(--f-display); font-weight:800; font-size:1.05rem; box-shadow:0 0 0 2px var(--oro-claro);
}
.comparador__anio--antes{ left:14px; } .comparador__anio--ahora{ right:14px; }
.comparador__control{ position:absolute; left:0; bottom:0; width:100%; height:44px; margin:0; opacity:0; pointer-events:none; }
.comparador:focus-within{ outline:3px solid var(--petroleo); outline-offset:11px; }
.comparador__pista{ font-family:var(--f-texto); font-weight:800; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acento); }
.comparador__pista::before{ content:"‹ "; } .comparador__pista::after{ content:" ›"; }
.portada__nombre{ font-family:var(--f-display); font-weight:800; line-height:.98; letter-spacing:-.02em; font-size:clamp(3.2rem,15.5vw,4.7rem); margin:1.1rem 0 1.1rem; color:var(--petroleo); }
.portada__nombre .amp{ display:block; font-style:italic; font-weight:500; font-size:.56em; line-height:1.25; color:var(--acento); }
.portada__fecha{ border-top:2px solid var(--oro); border-bottom:2px solid var(--oro); padding:.6rem 1rem; gap:1rem; }
.portada__fecha .fcol{ color:var(--tinta); font-weight:800; letter-spacing:.16em; font-size:.74rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:800; font-size:2.9rem; color:var(--petroleo); }
.portada__lugar{ margin-top:1.1rem; color:var(--tinta-suave); font-weight:600; max-width:19rem; }
.portada__flecha span{ border-color:var(--oro); }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — marfil y petróleo, con filo de oro
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:clamp(1.9rem,8vw,2.4rem); line-height:1.12; color:var(--petroleo); }
.saludo__pases{ background:var(--petroleo); color:var(--marfil); border-radius:999px; font-weight:700; }

.seccion.alterna{ position:relative; background:linear-gradient(180deg, var(--petroleo) 0%, var(--petroleo-hondo) 100%); border-top:4px solid var(--oro); border-bottom:4px solid var(--oro); }
.seccion.alterna .etiqueta{ color:var(--oro-claro); }
.seccion.alterna .titulo{ color:var(--oro-claro); }
.seccion.alterna .parrafo b{ color:var(--oro-claro); }

.momento{ padding-top:1.6rem; padding-bottom:3.2rem; }
.momento__foto{ border:0; border-radius:999px 999px 20px 20px; box-shadow:0 0 0 5px var(--marfil), 0 0 0 8px var(--oro), var(--sombra-alta); background:var(--papel-hondo); }
.flotantes{ display:none; }

.cuenta__caja, .tarjeta, .notas__lista li, .formulario{ background:var(--marfil); border:0; border-radius:var(--radio); box-shadow:0 0 0 2px var(--oro), var(--sombra); }
.cuenta__caja .n{ font-family:var(--f-display); font-weight:800; color:#134B5F; }
.cuenta__caja .l{ color:#3F5B66; font-weight:700; }
.tarjeta__icono{ color:#134B5F; background:#F3E7CF; border-radius:50%; padding:9px; width:60px; height:60px; box-sizing:border-box; box-shadow:0 0 0 2px var(--oro); }
.tarjeta b{ font-family:var(--f-display); font-weight:800; font-size:1.2rem; line-height:1.15; }
.tarjeta small{ font-size:.9rem; }

.dedicatoria{ position:relative; }
.dedicatoria::before{ content:""; display:block; width:150px; aspect-ratio:2/1; margin:0 auto 1.2rem; background:var(--arcos); }
.dedicatoria__texto{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.42rem; line-height:1.5; color:var(--tinta); }
.dedicatoria__firma{ font-family:var(--f-display); font-weight:800; font-size:1.4rem; color:var(--petroleo); }

.galeria__grid{ gap:1rem; }
.foto img{ border:5px solid #fff; border-radius:16px; box-shadow:0 0 0 2px var(--oro), var(--sombra); background:var(--papel-hondo); }
.foto:nth-child(even) img{ transform:rotate(1deg); } .foto:nth-child(odd) img{ transform:rotate(-1deg); }
.foto--ancha img{ transform:none; }
.foto__hueco{ border:2px dashed var(--oro); border-radius:16px; }

.linea::before{ background:linear-gradient(180deg, var(--oro-claro), var(--oro)); width:3px; }
.linea__paso::before{ background:var(--petroleo); border:3px solid var(--oro-claro); }
.linea__paso.destaca::before{ background:var(--oro-boton); border-color:var(--marfil); }
.linea__hora{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; color:var(--oro-claro); }
.linea__que b{ font-family:var(--f-display); font-weight:600; font-size:1.2rem; color:var(--marfil); }
.linea__que small{ font-size:.92rem; }

.lugares__hora{ font-weight:800; color:var(--acento); }
.mapa{ border:5px solid #fff; border-radius:var(--radio); box-shadow:0 0 0 2px var(--oro), var(--sombra); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:8px solid var(--oro); }
.faq__item{ background:#fff; border-radius:14px; box-shadow:0 0 0 2px #E6D7B4, var(--sombra); }
.faq__item summary{ font-family:var(--f-display); font-weight:600; font-size:1.1rem; color:var(--tinta); }
.faq__item p{ font-size:1rem; }

.boton{
  background:linear-gradient(180deg, #EBCB7C, var(--oro-boton)); color:#12313D; border:0; border-radius:999px;
  box-shadow:0 5px 0 #A8842F, 0 16px 26px -14px rgba(18,49,61,.7); font-family:var(--f-texto); font-weight:800; font-size:1.08rem; letter-spacing:.01em;
}
.boton:active{ transform:translateY(4px); box-shadow:0 1px 0 #A8842F; }
.boton--linea{ background:transparent; color:var(--marca); border:2px solid currentColor; box-shadow:none; }

.formulario{ padding:1.4rem 1.1rem 1.5rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:2px solid #D9C9A3; border-radius:12px; background:#fff; color:#12313D; font-size:1.05rem; }
.rsvp__intro b{ color:var(--oro-claro); }

.pie{ position:relative; background:var(--petroleo-hondo); }
.pie::before{ content:""; display:block; width:170px; aspect-ratio:2/1; margin:0 auto 1rem; background:var(--arcos); }
.pie__nombre{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:2.3rem; line-height:1.1; color:var(--oro-claro); }

@media (prefers-reduced-motion:reduce){
  .gancho.pastel-velas::before, .entrada__pista{ animation:none; }
}