/* ==========================================================================
   TEMA: PUNTO DE CRUZ · LOS 70 DE LA ABUELA — dirección de arte "EL COSTURERO"
   Creada el 5 de octubre de 2026. Abdiel pidió demos para "señoras grandes" y
   después corrigió: "que sean de varios tipos de formas". Aquí no hay monito:
   todo es hilo sobre tela.

   LA IDEA: la invitación es su costurero. Se entra dándole dos puntadas al
   bastidor (el corazón se termina de bordar, con su 70). En la portada el 70 se
   borda solo, columna por columna, con la aguja por delante. Los bloques son de
   mezclilla, las tarjetas son parches cosidos (orilla punteada = hilván), la
   línea del itinerario es un hilván con botones y bajo cada título va la cenefa.
   El arte bordado se dibuja con código (herramientas/bordado-arte.html).

   TEORÍA DEL COLOR: lino de base (60); mezclilla añil en los bloques (30); rojo
   de hilo solo en lo que se toca y en los nombres (10). Rojo, azul y crudo son
   los tres colores del dechado clásico; los demás hilos (rosa, verde, amarillo)
   viven solo dentro de los bordados.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre lino   #F3EAD7 → tinta #2B2118 13.2 · suave #5B4A3B 7.1 · añil #25477E 7.7 · rojo #B81D2C 5.4
     sobre parche #FBF6EA → suave 7.8 · añil 8.5 · rojo 6.0
     sobre añil   #25477E → crema #FFFDF7 9.1 · azul claro #D9E2F0 7.1 · durazno #FFD9A0 6.9
     crema sobre el botón rojo #B81D2C → 6.4 · crema sobre el pie #1B3562 → 11.9

   LETRA: un escalón más grande que en los demás temas (es para gente mayor).
   ========================================================================== */
:root{
  --lino:#F3EAD7; --parche:#FBF6EA; --anil:#25477E; --anil-hondo:#1B3562; --rojo:#B81D2C; --hilo:#C8202F;
  --papel:#F3EAD7;  --papel-hondo:#E6D9BD;
  --tinta:#2B2118;  --tinta-suave:#5B4A3B;
  --marca:#2B2118;  --marca-claro:#25477E;
  --acento:#B81D2C; --acento-hondo:#8E1421;
  --f-display:"Oleo Script", Georgia, serif;
  --f-texto:"Nunito", system-ui, sans-serif;
  --radio:14px;
  --sombra:0 5px 0 rgba(43,33,24,.13);
  --sombra-alta:0 12px 24px rgba(43,33,24,.24);
  /* la trama de la tela, hecha con rayitas: clara para el lino, oscura para la mezclilla */
  --trama:repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 2px, transparent 2px 3px, rgba(120,92,55,.07) 3px 4px, transparent 4px 5px), repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 2px, transparent 2px 3px, rgba(120,92,55,.06) 3px 4px, transparent 4px 5px);
  --mezclilla:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 4px), repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px);
  font-synthesis:none;
}
html{ font-size:106.25%; }
body{ background:var(--trama), var(--papel); }

/* los bloques de mezclilla: la letra se aclara, y adentro de los parches vuelve a ser oscura */
.seccion.alterna, .pie{ --tinta:#FFFDF7; --tinta-suave:#D9E2F0; --marca:#FFFDF7; --acento:#FFD9A0; color:var(--tinta); }
.seccion.alterna :is(.cuenta__caja, .tarjeta, .formulario, .notas__lista li, .faq__item, .buscar){ --tinta:#2B2118; --tinta-suave:#5B4A3B; --marca:#2B2118; --acento:#B81D2C; color:var(--tinta); }

.etiqueta{ font-family:var(--f-texto); font-weight:800; font-size:.72rem; letter-spacing:.24em; color:var(--anil); }
.seccion.alterna .etiqueta{ color:#D9E2F0; }
.titulo{ font-family:var(--f-display); font-weight:700; line-height:1.08; font-size:clamp(2.1rem,9.6vw,2.9rem); margin:.5rem 0 1.5rem; color:var(--tinta); }
.titulo::after{ content:""; display:block; width:144px; height:18px; margin:.7rem auto 0; background:url(cenefa.png) center / 48px 18px repeat-x; }
.seccion.alterna .titulo::after{ filter:brightness(0) invert(1); opacity:.9; }
.parrafo b{ color:var(--acento); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el bastidor. Dos puntadas y el corazón queda terminado.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:var(--trama), var(--papel); transition:opacity .45s ease .4s, visibility 0s linear .85s; }   /* el motor quita la entrada 1.6 s después del último toque: todo cabe ahí */
.entrada::before, .entrada::after{ content:""; position:absolute; left:0; right:0; height:24px; background:url(cenefa.png) center / 64px 24px repeat-x; }
.entrada::before{ top:18px; } .entrada::after{ bottom:18px; }
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ font-family:var(--f-texto); font-weight:800; letter-spacing:.26em; font-size:.72rem; color:var(--anil); }
.entrada__nombre{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.9rem,8.6vw,2.6rem); line-height:1.1; margin:.2rem 0 .6rem; color:var(--rojo); }
.gancho.bastidor{ position:relative; width:min(78vw,320px); aspect-ratio:640/664; filter:drop-shadow(0 12px 12px rgba(43,33,24,.24)); animation:aro-mece 4.2s ease-in-out infinite; transform-origin:50% 8%; }
@keyframes aro-mece{ 0%,100%{ transform:rotate(-2.2deg); } 50%{ transform:rotate(2.2deg); } }
.aro{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .3s ease; }
.aro--2, .aro--3{ opacity:0; }
/* primera puntada: el corazón avanza a la mitad (y se queda) */
.gancho.bastidor.golpe{ animation:aro-puntada .45s ease; }
@keyframes aro-puntada{ 0%,100%{ transform:scale(1); } 35%{ transform:scale(.95) rotate(-2deg); } 70%{ transform:scale(1.03) rotate(1deg); } }
.gancho.bastidor.golpe .aro--1{ opacity:0; } .gancho.bastidor.golpe .aro--2{ opacity:1; }
/* segunda: queda terminado, se luce un momento y uno entra por el aro */
.gancho.bastidor.abre .aro--1, .gancho.bastidor.abre .aro--2{ opacity:0; }
.gancho.bastidor.abre .aro--3{ opacity:1; }
.gancho.bastidor.abre{ animation:aro-listo .45s ease, aro-entra .65s cubic-bezier(.6,0,.9,.4) .85s forwards; }
@keyframes aro-listo{ 0%{ transform:scale(.94); } 55%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
@keyframes aro-entra{ to{ transform:scale(3.4); opacity:0; } }
.entrada__pista{
  margin-top:1.3rem; padding:.62rem 1.5rem; border-radius:12px; background:var(--rojo); color:#FFFDF7; box-shadow:var(--sombra);
  outline:2px dashed rgba(255,253,247,.8); outline-offset:-6px;
  font-family:var(--f-texto); font-weight:800; font-size:1.08rem;
  animation:aro-late 1.7s ease-in-out infinite;
}
@keyframes aro-late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.entrada__marcador{ margin-top:.8rem; color:var(--anil); font-weight:800; letter-spacing:.14em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — el 70 se borda solo, con la aguja por delante
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; gap:0; padding-top:4rem; background:var(--trama), var(--papel); }
.portada::before{ content:""; position:absolute; left:0; right:0; top:18px; height:24px; background:url(cenefa.png) center / 64px 24px repeat-x; }
.portada__arriba{ font-family:var(--f-texto); font-weight:800; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--anil); }
.bordado70{ position:relative; width:min(80vw,330px); margin:1.3rem auto .2rem; }
.bordado70__img{ display:block; width:100%; height:auto; filter:drop-shadow(0 2px 1px rgba(43,33,24,.22)); }
.bordado70::after{                              /* la aguja con su hilo */
  content:""; position:absolute; left:0; top:-16%; width:13%; height:72%; margin-left:-3%; opacity:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 120'%3E%3Cpath d='M26 14C46 26 44 62 24 84' fill='none' stroke='%23C8202F' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M29 6L11 112' stroke='%238F96A3' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M28 9l-2.4 14' stroke='%23F3EAD7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.revelado .bordado70__img{ animation:se-borda 2.4s steps(22) 1.7s backwards; }
@keyframes se-borda{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
body.revelado .bordado70::after{ animation:aguja-va 2.4s steps(22) 1.7s both, aguja-pica .22s ease-in-out 1.7s 11 alternate; }
@keyframes aguja-va{ 0%{ left:0; opacity:1; } 94%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes aguja-pica{ from{ translate:0 0; } to{ translate:0 9%; } }
.portada__nombre{ font-family:var(--f-display); font-weight:700; line-height:1; font-size:clamp(3.1rem,15.4vw,4.6rem); margin:.9rem 0 1.2rem; color:var(--rojo); }
.portada__nombre .amp{ display:block; margin-top:.7rem; font-family:var(--f-texto); font-weight:800; font-size:.26em; line-height:1.2; letter-spacing:.24em; text-transform:uppercase; color:var(--anil); }
.portada__fecha{ background:var(--parche); border:0; border-radius:12px; outline:2px dashed rgba(200,32,47,.8); outline-offset:-7px; box-shadow:var(--sombra); padding:.9rem 1.5rem .8rem; gap:1rem; }
.portada__fecha .fcol{ color:var(--tinta); font-weight:800; letter-spacing:.12em; font-size:.74rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:700; font-size:2.9rem; color:var(--rojo); }
.portada__lugar{ margin-top:1.3rem; color:var(--tinta); font-weight:700; font-size:1rem; }
.portada__flecha span{ border-color:var(--anil); }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — mezclilla, parches cosidos e hilván
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.9rem,8.2vw,2.5rem); line-height:1.1; color:var(--tinta); }
.saludo__pases{ background:var(--anil); color:#FFFDF7; border-radius:999px; font-weight:800; }

.seccion.alterna{ position:relative; background:var(--mezclilla), var(--anil); padding-top:4.2rem; padding-bottom:4.2rem; }
.seccion.alterna::before, .seccion.alterna::after{                 /* la costura de la mezclilla, arriba y abajo */
  content:""; position:absolute; left:0; right:0; height:0; max-width:none; border-top:3px dashed #FFD9A0; opacity:.85;
}
.seccion.alterna::before{ top:12px; } .seccion.alterna::after{ bottom:12px; }
.seccion.alterna .titulo{ color:#FFFDF7; }
.seccion.alterna .parrafo b{ color:#FFD9A0; }

.momento{ padding-top:1.4rem; padding-bottom:3.4rem; }
.momento__foto{ border:11px solid #C89B62; border-radius:6px; box-shadow:inset 0 0 0 2px rgba(90,58,34,.4), 0 0 0 2px #8A5E32, var(--sombra-alta); transform:rotate(-1.4deg); background:var(--lino); }
.flotantes{ display:none; }

/* los parches */
.cuenta__caja, .tarjeta, .notas__lista li, .formulario, .faq__item, .buscar{
  background:var(--parche); border:0; border-radius:var(--radio); box-shadow:var(--sombra);
  outline:2px dashed rgba(200,32,47,.72); outline-offset:-7px;
}
.cuenta__caja .n{ font-family:var(--f-display); font-weight:700; color:#B81D2C; }
.cuenta__caja .l{ color:#5B4A3B; font-weight:800; }
.tarjeta{ padding-top:1.5rem; padding-bottom:1.4rem; }
.tarjeta__icono{ color:#25477E; }
.tarjeta b{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; line-height:1.1; color:#B81D2C; }
.tarjeta:nth-child(odd){ transform:rotate(-1.2deg); } .tarjeta:nth-child(even){ transform:rotate(1.2deg); }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:600; font-size:1.2rem; line-height:1.6; color:var(--tinta); }
.dedicatoria__firma{ font-family:var(--f-display); font-weight:700; font-size:1.9rem; color:var(--rojo); }

.galeria__grid{ gap:.9rem; }
.foto img{ border:6px solid var(--parche); border-radius:10px; box-shadow:0 0 0 1px rgba(43,33,24,.16), var(--sombra); background:var(--lino); box-sizing:border-box; }
.foto:nth-child(even) img{ transform:rotate(1.2deg); } .foto:nth-child(odd) img{ transform:rotate(-1.2deg); }
.foto--ancha img{ transform:none; aspect-ratio:1100/620; }
.foto__hueco{ border:2px dashed var(--anil); border-radius:10px; }

/* el itinerario: un hilván con botones */
.linea::before{ width:0; background:none; border-left:3px dashed rgba(255,253,247,.75); border-radius:0; left:5px; }
.linea__paso::before{
  left:-9px; top:1.05rem; width:20px; height:20px; border:0;
  background:radial-gradient(circle at 36% 50%, #1B3562 0 1.6px, transparent 2.2px), radial-gradient(circle at 64% 50%, #1B3562 0 1.6px, transparent 2.2px), #FFFDF7;
  box-shadow:inset 0 0 0 2px rgba(27,53,98,.35), 0 2px 0 rgba(0,0,0,.25);
}
.linea__paso.destaca::before{ background:radial-gradient(circle at 36% 50%, #FFFDF7 0 1.6px, transparent 2.2px), radial-gradient(circle at 64% 50%, #FFFDF7 0 1.6px, transparent 2.2px), var(--hilo); box-shadow:inset 0 0 0 2px rgba(0,0,0,.2), 0 2px 0 rgba(0,0,0,.25); }
.linea__hora{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:#FFD9A0; min-width:3.4rem; }
.linea__que b{ font-family:var(--f-texto); font-weight:800; font-size:1.12rem; color:#FFFDF7; }
.linea__que small{ font-size:.92rem; }

.lugares__hora{ font-weight:800; color:var(--acento); }
.mapa{ border:7px solid var(--parche); border-radius:12px; box-shadow:0 0 0 1px rgba(43,33,24,.16), var(--sombra); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:0; font-weight:600; padding-left:1.3rem; padding-right:1.3rem; }
.faq__item summary{ font-family:var(--f-texto); font-weight:800; font-size:1.05rem; color:var(--tinta); }

.boton{
  background:var(--rojo); color:#FFFDF7; border:0; border-radius:12px; box-shadow:0 5px 0 #7E1320;
  outline:2px dashed rgba(255,253,247,.8); outline-offset:-6px;
  font-family:var(--f-texto); font-weight:800; font-size:1.08rem; letter-spacing:.02em;
}
.boton:active{ transform:translateY(4px); box-shadow:0 1px 0 #7E1320; }
.boton--linea{ background:var(--parche); color:var(--tinta); box-shadow:0 5px 0 rgba(43,33,24,.18); outline-color:rgba(37,71,126,.7); font-size:1rem; }

.formulario{ padding:1.6rem 1.2rem 1.6rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:1.5px solid rgba(43,33,24,.55); border-radius:10px; background:#fff; color:#2B2118; font-size:1rem; }
.rsvp__intro b{ color:#FFD9A0; }

.pie{ background:var(--mezclilla), var(--anil-hondo); }
.pie__nombre{ font-family:var(--f-display); font-weight:700; font-size:2.7rem; line-height:1.1; color:#FFFDF7; }

@media (prefers-reduced-motion:reduce){
  .gancho.bastidor, .entrada__pista{ animation:none; }
  body.revelado .bordado70__img{ animation:none; }
  body.revelado .bordado70::after{ animation:none; opacity:0; }
}