/* ==========================================================================
   TEMA: PRIMER AÑITO · MUNDO DE FELPA  —  dirección de arte "TODO ESTÁ COSIDO"
   Creada el 3 de octubre de 2026, con una idea de Abdiel: un video que vio
   "con figuras hechas de telita, de felpa, de colores".

   LA IDEA: la invitación parece hecha a mano en fieltro. Nada es plano:
     · los animalitos y el globo son figuras de felpa (generador local)
     · cada bloque es un PARCHE de fieltro con su pespunte (la puntada blanca)
     · las franjas de color traen la orilla de TIJERA DE PICOS
     · el fondo es lino, y la entrada es una estrella de fieltro con su botón
       de madera, colgada de un hilo
   Es el lenguaje de los juguetes de tela de un bebé.

   TEORÍA DEL COLOR: los colores del fieltro de mercería, apagados para que no
   griten: mostaza, verde salvia, rosa viejo y azul cielo sobre lino (análogos
   cálidos + dos fríos suaves). El terracota es el único acento fuerte y se
   guarda para lo que se toca. 60 lino · 30 parches de color · 10 terracota.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre lino     #F6EFE2 → tinta 9.4 · suave 5.5 · terracota 4.7 · verde hondo 5.3
     tinta #4A3B32 sobre mostaza 5.7 · salvia 5.7 · rosa 6.2 · cielo 6.5
     blanco sobre el botón terracota #B5472F → 5.4
   ========================================================================== */
:root{
  --papel:#F6EFE2;  --papel-hondo:#EDE2CF;
  --tinta:#4A3B32;  --tinta-suave:#6E5D52;
  --marca:#3F6B52;  --marca-claro:#A9C5A0;
  --acento:#B5472F; --acento-hondo:#8E3421;
  --mostaza:#E9B44C; --salvia:#A9C5A0; --rosa:#F0B8B8; --cielo:#A9CFE6; --crema:#FFF6DD;
  --f-display:"Fredoka", system-ui, sans-serif;
  --f-texto:"Nunito", system-ui, sans-serif;
  --radio:22px;
  --sombra:0 3px 0 rgba(74,59,50,.12), 0 14px 22px -14px rgba(74,59,50,.55);
  --sombra-alta:0 4px 0 rgba(74,59,50,.14), 0 26px 40px -22px rgba(74,59,50,.6);

  /* el pelito del fieltro: un grano fino que se pone encima de cualquier color */
  --pelo: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='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 -.26'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  /* el tejido del lino: hilos cruzados */
  --lino:repeating-linear-gradient(0deg, rgba(120,95,70,.055) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120,95,70,.05) 0 1px, transparent 1px 3px);
  /* la orilla de tijera de picos (se usa como máscara arriba y abajo de las franjas) */
  --picos:conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 18px 9px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 18px 9px repeat-x, linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 18px) no-repeat;
}

body{ background:var(--lino), var(--papel); }

.etiqueta{ font-family:var(--f-texto); font-weight:700; letter-spacing:.22em; color:var(--acento); font-size:.72rem; }
.titulo{
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.9rem,8.6vw,2.6rem); line-height:1.1; color:var(--marca);
  display:inline-block; padding-bottom:.5rem; margin:.3rem 0 1.5rem;
  border-bottom:3px dashed var(--mostaza);          /* cada título lleva su puntada */
}

/* ── el parche: la pieza de fieltro con su pespunte. Lo usan casi todos los bloques ── */
.cuenta__caja, .tarjeta, .notas__lista li, .faq__item, .formulario, .dedicatoria, .portada__tarjeta{
  position:relative;
  background:var(--pelo), var(--crema);
  border:0; border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.cuenta__caja::after, .tarjeta::after, .formulario::after, .dedicatoria::after, .portada__tarjeta::after{
  content:""; position:absolute; inset:7px; pointer-events:none;
  border:2px dashed rgba(74,59,50,.3); border-radius:calc(var(--radio) - 7px);
}


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — una estrella de fieltro colgada de un hilo, sobre lino
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:var(--lino), radial-gradient(90% 60% at 50% 45%, #FFF8EA 0%, var(--papel) 60%, var(--papel-hondo) 100%); }
.entrada::before{                      /* una franja de fieltro arriba, con su orilla de picos */
  content:""; position:absolute; left:0; right:0; top:0; height:5.2rem;
  background:var(--pelo), var(--salvia);
  -webkit-mask:var(--picos); mask:var(--picos);
}
.entrada::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4.2rem;
  background:var(--pelo), var(--rosa);
  -webkit-mask:var(--picos); mask:var(--picos);
}
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ font-family:var(--f-texto); font-weight:700; color:var(--acento); letter-spacing:.3em; }
.entrada__nombre{ font-family:var(--f-display); font-weight:600; color:var(--marca); font-size:clamp(1.6rem,7vw,2.1rem); margin-bottom:0; }
.hilo{ width:0; height:9dvh; border-left:3px dashed var(--tinta-suave); opacity:.6; margin-top:.4rem; }
.gancho.estrella-fieltro{ width:min(56vw,220px); margin-top:-.6rem; transform-origin:50% -9dvh; animation:colgar 3.4s ease-in-out infinite; }
.gancho.estrella-fieltro .gancho__svg{ filter:drop-shadow(0 12px 12px rgba(74,59,50,.3)); }
@keyframes colgar{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.gancho.estrella-fieltro.abre{ animation:descoser .8s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes descoser{
  0%  { transform:scale(1) rotate(0); opacity:1; }
  30% { transform:scale(1.18) rotate(-10deg); opacity:1; }
  100%{ transform:scale(.3) rotate(140deg) translateY(-40px); opacity:0; }
}
.entrada__pista{
  font-family:var(--f-display); font-weight:600; font-size:1rem; color:#fff;
  background:var(--pelo), var(--acento); padding:.5rem 1.2rem; border-radius:999px;
  box-shadow:var(--sombra); outline:2px dashed rgba(255,246,221,.8); outline-offset:-5px;
  margin-top:1.4rem;
}
.entrada__marcador{ color:var(--tinta-suave); }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — su mundo de felpa: banderines, nubes, el globo y los animalitos
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  isolation:isolate; overflow:hidden;
  padding:5.4rem 1.2rem 9.5rem;
  background:
    var(--pelo) 0 100% / 180px 180px,
    linear-gradient(180deg, transparent 0 calc(100% - 7.5rem), var(--salvia) calc(100% - 7.5rem)),     /* el pasto de fieltro */
    var(--lino), linear-gradient(180deg, #DDEDF6 0%, #F3EFE4 62%, var(--papel) 100%);
}
.portada__flecha{ display:none; }
.f{ position:absolute; height:auto; pointer-events:none; filter:drop-shadow(0 8px 8px rgba(74,59,50,.28)); }
/* las nubes: tres bolitas de fieltro blanco, recortadas y cosidas */
.f-nube{
  position:absolute; z-index:-1; aspect-ratio:2.1 / 1; pointer-events:none;
  background:
    radial-gradient(circle at 27% 64%, #fff 0 25%, transparent 26%),
    radial-gradient(circle at 52% 44%, #fff 0 33%, transparent 34%),
    radial-gradient(circle at 76% 66%, #fff 0 23%, transparent 24%),
    linear-gradient(#fff 0 0) 51% 96% / 54% 34% no-repeat;
  filter:drop-shadow(0 5px 4px rgba(74,59,50,.2));
}
.f-nube--a{ left:-6%; top:6.2rem; width:40%; animation:flotar 9s ease-in-out infinite alternate; }
.f-nube--b{ right:20%; top:3.6rem; width:26%; animation:flotar 11s ease-in-out -4s infinite alternate; }
.f-globo{ right:5%; top:4.6rem; width:19%; z-index:-1; animation:subir-globo 7s ease-in-out infinite alternate; }
.f-elefante{ left:1%; bottom:.9rem; width:33%; transform-origin:50% 100%; animation:apapacho 4.2s ease-in-out infinite; }
.f-oso{ left:38%; bottom:.5rem; width:23%; transform-origin:50% 100%; animation:apapacho 5.2s ease-in-out -2.4s infinite; }
.f-leon{ right:3%; bottom:.9rem; width:25%; transform-origin:50% 100%; animation:apapacho 4.8s ease-in-out -1.6s infinite; }
@keyframes flotar{ to{ translate:14px -6px; } }
@keyframes subir-globo{ from{ translate:0 0; rotate:-3deg; } to{ translate:-6px -18px; rotate:3deg; } }
/* los de felpa no caminan: se aplastan tantito y se ladean, como cuando los abrazas */
@keyframes apapacho{ 0%,100%{ transform:scale(1,1) rotate(-2deg); } 50%{ transform:scale(1.04,.96) rotate(2.5deg); } }
/* los banderines de fieltro, colgados de su hilo */
.banderines{ position:absolute; left:-2%; right:-2%; top:1.2rem; height:3.6rem; display:flex; justify-content:space-around; align-items:flex-start; z-index:-1; border-top:3px dashed var(--tinta-suave); border-radius:0 0 50% 50% / 0 0 100% 100%; transform:rotate(-1.5deg); }
.banderines i{ width:11%; aspect-ratio:1 / 1.15; margin-top:-2px; background:var(--pelo), var(--mostaza); clip-path:polygon(0 0, 100% 0, 50% 100%); filter:drop-shadow(0 3px 2px rgba(74,59,50,.25)); }
.banderines i:nth-child(4n+2){ background:var(--pelo), var(--rosa); margin-top:.45rem; }
.banderines i:nth-child(4n+3){ background:var(--pelo), var(--cielo); margin-top:.7rem; }
.banderines i:nth-child(4n){ background:var(--pelo), var(--salvia); margin-top:.45rem; }
.banderines i:nth-child(7){ margin-top:-2px; }

.portada__tarjeta{
  width:min(100%, 330px); margin:0 auto; padding:1.7rem 1.2rem 1.6rem;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:var(--sombra-alta);
}
.portada__arriba{
  font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:.04em; color:var(--tinta);
  background:var(--pelo), var(--mostaza); padding:.3rem 1rem; border-radius:999px;
}
.portada__nombre{
  font-family:var(--f-display); font-weight:700; font-size:clamp(3.4rem,18vw,5rem); line-height:1;
  color:var(--acento); margin:.5rem 0 .9rem;
  text-shadow:0 3px 0 var(--acento-hondo), 0 9px 12px rgba(74,59,50,.25);      /* letras gorditas, como recortadas en fieltro */
}
.portada__fecha{ border:0; padding:.5rem 1.1rem; gap:.9rem; background:var(--pelo), var(--cielo); border-radius:16px; outline:2px dashed rgba(255,255,255,.85); outline-offset:-5px; }
.portada__fecha .fcol{ color:var(--tinta); font-weight:700; letter-spacing:.14em; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:700; font-size:2.6rem; color:var(--tinta); }
.portada__lugar{ margin-top:.9rem; color:var(--tinta-suave); font-weight:600; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-weight:600; color:var(--marca); }
.saludo__pases{ background:var(--pelo), var(--mostaza); color:var(--tinta); font-weight:700; border-radius:999px; outline:2px dashed rgba(255,255,255,.85); outline-offset:-5px; padding:.55rem 1.3rem; }

/* franjas de fieltro de color, con orilla de tijera de picos; cada una de un color */
.seccion.alterna, .momento{
  background:var(--pelo), var(--salvia);
  -webkit-mask:var(--picos); mask:var(--picos);
  padding-top:4rem; padding-bottom:4rem;
}
.cuenta.alterna{ background:var(--pelo), var(--cielo); }
#detalles.alterna{ background:var(--pelo), var(--rosa); }
#plan.alterna{ background:var(--pelo), var(--mostaza); }
.seccion.alterna .titulo{ color:var(--tinta); border-bottom-color:rgba(255,255,255,.9); }
.seccion.alterna .etiqueta{ color:var(--tinta); }

/* la foto grande: en un marco de fieltro con botones en las esquinas */
.momento{ padding-top:3.6rem; padding-bottom:3.8rem; }
.momento__foto, .foto img{
  border:9px solid var(--crema); border-radius:20px;
  box-shadow:0 0 0 3px var(--mostaza), var(--sombra-alta);
}
.foto img{ border-width:6px; box-shadow:0 0 0 2px var(--rosa), var(--sombra); }
.foto:nth-child(3n) img{ box-shadow:0 0 0 2px var(--cielo), var(--sombra); }
.foto:nth-child(3n+1) img{ box-shadow:0 0 0 2px var(--salvia), var(--sombra); }
.foto__hueco{ border:2px dashed var(--tinta-suave); background:var(--papel-hondo); border-radius:20px; }
.flotantes{ display:none; }

.cuenta__caja{ padding:1rem .2rem .8rem; }
.cuenta__caja .n{ font-family:var(--f-display); font-weight:700; color:var(--acento); font-size:clamp(1.9rem,8.6vw,2.5rem); }
.cuenta__caja .l{ font-weight:700; letter-spacing:.14em; font-size:.6rem; color:var(--tinta-suave); }
.tarjeta{ padding:1.5rem .8rem 1.3rem; }
.tarjeta__icono{ color:var(--acento); }
.tarjeta b{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--tinta); }
.tarjeta small{ color:var(--tinta-suave); }
.notas__lista li{ border-left:6px solid var(--mostaza); }
.faq__item summary{ font-family:var(--f-display); font-weight:600; color:var(--tinta); }
.faq__item summary::after{ color:var(--acento); }

.dedicatoria{ padding:2.4rem 1.3rem 2rem; margin-top:2rem; margin-bottom:2rem; width:min(100% - 2.4rem, 600px); }
.dedicatoria__texto{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.15rem,5vw,1.4rem); line-height:1.5; color:var(--tinta); }
.dedicatoria__firma{ font-family:var(--f-display); font-weight:600; color:var(--acento); font-size:1.2rem; }

.linea::before{ width:0; border-left:3px dashed var(--tinta); background:none; opacity:.55; }
.linea__paso::before{ width:16px; height:16px; left:-7px; top:1.1rem; border:0; background:var(--crema); box-shadow:0 0 0 3px var(--tinta); }   /* botoncitos */
.linea__paso.destaca::before{ background:var(--acento); box-shadow:0 0 0 3px var(--crema), 0 0 0 5px var(--acento); }
.linea__hora{ font-family:var(--f-display); font-weight:700; color:var(--tinta); }
.linea__que b{ font-family:var(--f-display); font-weight:600; color:var(--tinta); }
.linea__que small{ color:#5A4A40; }

.mapa{ border:8px solid var(--crema); border-radius:var(--radio); box-shadow:0 0 0 3px var(--cielo), var(--sombra); }

/* los botones: fieltro terracota con su pespunte */
.boton{
  font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:#fff;
  background:var(--pelo), var(--acento); border-radius:999px; padding:.9rem 1.7rem;
  box-shadow:0 5px 0 var(--acento-hondo), var(--sombra);
  outline:2px dashed rgba(255,246,221,.85); outline-offset:-6px;
}
.boton:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--acento-hondo); }
.boton--linea{ background:var(--pelo), var(--crema); color:var(--acento); border:0; box-shadow:0 5px 0 rgba(74,59,50,.18), var(--sombra); outline-color:rgba(181,71,47,.55); }

.formulario{ padding:1.9rem 1.4rem 1.6rem; }
.campo select,.campo textarea,.campo input{ background:#fff; color:var(--tinta); border:2px solid rgba(74,59,50,.3); border-radius:14px; }

.pie{ background:var(--pelo), var(--marca); -webkit-mask:var(--picos); mask:var(--picos); padding-top:4rem; }
.pie__nombre{ font-family:var(--f-display); font-weight:700; font-size:2.6rem; color:var(--crema); }