/* ==========================================================
   Diseño "Ovejitas" · Bautizo · contar ovejitas
   Prado al atardecer → ovejitas saltan la cerca → noche → luna-cunita con la foto
   Paleta pastel: crema, azul cielo, menta, rosa palo y toques dorados suaves
   ========================================================== */

:root {
  --crema: #fff8ee;
  --cielo: #bfe3f7;
  --cielo-2: #8fc7ec;
  --azul: #5b93c4;
  --azul-2: #4a7fae;
  --menta: #c8eedb;
  --rosa: #ffd9e0;
  --rosa-2: #d58aa0;
  --oro: #e9c46f;
  --oro-2: #c99b45;
  --tinta: #4b4a6b;
  --lapiz: #5d6aac;
  --suave: #7d7b99;
  --fuente: "Fredoka", system-ui, sans-serif;
  --mano: "Caveat", "Fredoka", cursive;
  --script: "Pacifico", "Fredoka", cursive;
  --ov-w: min(24%, 17svh);                 /* ancho de cada ovejita del prado */
  --salto: 1.15s;

  --s-fondo: var(--crema);
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--azul);
  --s-acento-tinta: #fff;
  --s-tarjeta: #ffffff;
  --s-borde: rgba(140, 196, 232, .35);
  --s-radio: 26px;
  --s-sombra: 0 16px 30px -20px rgba(75, 90, 160, .45);
  --s-fuente: var(--fuente);
  --s-titulo: var(--script);
  --s-titulo-tam: clamp(1.9rem, 8.4vw, 2.4rem);
  --s-titulo-color: #6a8fc8;
  --s-etiqueta: var(--fuente);
  --s-num: var(--fuente);
  --s-num-color: var(--azul);
  --s-btn-linea-color: var(--tinta);
}

body {
  background:
    radial-gradient(circle at 20% 30%, rgba(191, 227, 247, .55) 0 6px, transparent 7px) 0 0 / 90px 90px,
    radial-gradient(circle at 70% 70%, rgba(255, 217, 224, .5) 0 5px, transparent 6px) 0 0 / 120px 120px,
    #eef5fa;
  color: var(--tinta);
  font-family: var(--fuente);
}
.ov-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ================= PRADO (INTRO) ================= */
.prado {
  position: relative;
  width: min(100%, 540px);
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 60px -30px rgba(75, 74, 107, .4);
}

/* Cielo: atardecer pastel que se funde con la noche */
.cielo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #9fd0ef 0%, #c4e2f5 26%, #f4e6dc 50%, #ffdccb 62%, #ffd0c3 74%);
}
.cielo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1f2757 0%, #323c79 34%, #5c5e9e 58%, #8a80bd 74%);
  opacity: 0;
  transition: opacity 2.6s ease;
}
.noche .cielo::after { opacity: 1; }

.sol {
  position: absolute;
  left: 58%;
  top: 43%;
  z-index: 0;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 30%, #ffe9b0 42%, rgba(255, 214, 160, .55) 56%, rgba(255, 214, 160, 0) 72%);
  transition: transform 2.4s ease-in, opacity 2s ease .4s;
}
.noche .sol { transform: translateY(70%); opacity: 0; }

.estrellas { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 64%; opacity: 0; transition: opacity 2.4s ease 1s; }
.noche .estrellas { opacity: 1; }
.noche .st { animation: titilar 3.2s ease-in-out infinite; }
.noche .st--1 { animation-duration: 2.6s; animation-delay: -.9s; }
.noche .st--2 { animation-duration: 3.8s; animation-delay: -1.7s; }
.noche .st--3 { animation-duration: 2.2s; animation-delay: -.4s; }
@keyframes titilar { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.nube { position: absolute; z-index: 1; height: auto; fill: #fff; opacity: .92; animation: nube-va 40s ease-in-out infinite alternate; transition: opacity 2s ease; }
.nube--1 { width: 30%; left: 4%; top: 15%; }
.nube--2 { width: 22%; left: 72%; top: 29%; opacity: .78; animation-duration: 52s; animation-direction: alternate-reverse; }
.nube--3 { width: 17%; left: 38%; top: 40%; opacity: .66; animation-duration: 46s; }
@keyframes nube-va { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
.noche .nube { opacity: .16; }

/* Tierra: colinas del fondo y suelo del frente (con la cerca) */
.tierra { position: absolute; inset: 0; pointer-events: none; transition: transform 2.6s cubic-bezier(.5, 0, .3, 1), filter 2.6s ease; }
.tierra--fondo { z-index: 1; }
.tierra--frente { z-index: 3; }
.noche .tierra { transform: translateY(13%); filter: brightness(.48) saturate(.7); }
.colinas { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 50%; }
.arbolito { position: absolute; width: 6.5%; height: auto; }
.arbolito--1 { left: 11%; bottom: 44.6%; }
.arbolito--2 { left: 77%; bottom: 41.5%; width: 5.5%; }
.colina--1 { fill: #d3f0e0; }
.colina--2 { fill: #b5e4c8; }
.suelo { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 30%; }
.suelo__base { fill: #a6dcba; }
.suelo__brillo { fill: #c2e9d1; opacity: .8; }
.flores { position: absolute; left: 0; bottom: 9%; width: 100%; height: 12%; }

.cerca { position: absolute; left: 50%; bottom: 25.5%; width: min(34%, 26svh); transform: translateX(-50%); }
.cerca__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cerca__letrero {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: min(64vw, 300px);
  margin: 0;
  padding: 3px 12px 4px;
  border-radius: 10px;
  border: 1.5px dashed #eaa7b9;
  background: #fffaf1;
  box-shadow: 0 0 0 3px #fffaf1, 0 8px 12px -8px rgba(75, 74, 107, .55);
  font-family: var(--mano);
  font-weight: 700;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  line-height: 1.05;
  text-align: center;
  color: #6276b5;
  overflow-wrap: anywhere;
  transform: translateX(-50%) rotate(-3deg);
}
.cerca__letrero::before, .cerca__letrero::after { content: ""; position: absolute; top: -10px; width: 1.5px; height: 9px; background: var(--oro-2); }
.cerca__letrero::before { left: 20%; }
.cerca__letrero::after { right: 20%; }

/* ---------- Ovejitas ---------- */
.oveja { display: block; width: 100%; height: auto; overflow: visible; }
.oveja__sombra { fill: #2f3768; opacity: .12; }
.pata { fill: #8b7a83; transform-box: fill-box; transform-origin: 50% 10%; }
.pata--lejos { fill: #6f5f68; }
.cinta { fill: var(--cinta, #bfe3f7); stroke: rgba(75, 74, 107, .12); stroke-width: .6; }
.ojos--abiertos { transform-box: fill-box; transform-origin: center; animation: parpadeo 4.4s infinite; }
.ojos--cerrados { opacity: 0; }
@keyframes parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.oveja--1, .pista--1 { --cinta: #bfe3f7; }
.oveja--2, .pista--2 { --cinta: #c8eedb; }
.oveja--3, .pista--3 { --cinta: #ffd1da; }
.oveja--4, .pista--4 { --cinta: #fde7b0; }
.oveja--5, .pista--5 { --cinta: #dccff5; }
.oveja--cordero { --cinta: #ffc4d1; }
.oveja--2 .ojos--abiertos { animation-delay: -1.2s; }
.oveja--3 .ojos--abiertos { animation-delay: -2.5s; }
.oveja--4 .ojos--abiertos { animation-delay: -.6s; }
.oveja--5 .ojos--abiertos { animation-delay: -3.3s; }

/* Rebaño: aparece donde aterriza la saltarina y camina a su lugar */
.oveja-r {
  --nd: 0s;
  position: absolute;
  left: calc(65% + var(--ov-w) / 2);
  top: 74%;
  z-index: 4;
  width: var(--ov-w);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
}
.oveja-r .oveja { transform-origin: 50% 100%; animation: respira 3.4s ease-in-out infinite; }
.oveja-r--2 .oveja { animation-delay: -.8s; }
.oveja-r--3 .oveja { animation-delay: -1.9s; }
.oveja-r--4 .oveja { animation-delay: -2.6s; }
.oveja-r--5 .oveja { animation-delay: -1.3s; }
@keyframes respira { 0%, 100% { transform: none; } 50% { transform: scale(1.02, 1.035); } }
.oveja-r.llego { opacity: 1; }
.oveja-r.andando .oveja { animation: trote .32s ease-in-out infinite; }
@keyframes trote { 0%, 100% { transform: none; } 50% { transform: translateY(-7%) rotate(-2deg); } }
.oveja-r.en-sitio {
  left: var(--dx);
  top: var(--dy);
  transform: translate(-50%, -100%) scale(var(--ds));
  transition: left var(--wd) ease-in-out, top var(--wd) ease-in-out, transform var(--wd) ease-in-out;
}
.oveja-r--1 { --dx: 82%; --dy: 79%; --ds: 1; --wd: .7s; }
.oveja-r--2 { --dx: 91%; --dy: 70.5%; --ds: .72; --wd: .9s; --nd: .12s; z-index: 2; }
.oveja-r--3 { --dx: 70%; --dy: 66.5%; --ds: .58; --wd: .9s; --nd: .24s; z-index: 2; }
.oveja-r--4 { --dx: 17%; --dy: 61%; --ds: .52; --wd: 1.8s; --nd: .36s; z-index: 2; }
.oveja-r--5 { --dx: 22%; --dy: 87%; --ds: .92; --wd: 1.6s; --nd: .48s; }
.oveja-r--4 .oveja-r__giro, .oveja-r--5 .oveja-r__giro { transform: scaleX(-1); }   /* caminan (y miran) hacia la izquierda */
/* De noche suben flotando hacia la cunita y se desvanecen (allá aparecen dormidas) */
.noche .oveja-r {
  left: 50%;
  top: 30%;
  opacity: 0;
  transform: translate(-50%, -100%) scale(.3);
  transition: left 1.8s ease-in-out var(--nd), top 1.8s ease-in-out var(--nd), transform 1.8s ease-in-out var(--nd), opacity 1s ease calc(var(--nd) + .9s);
}

/* Saltarina: la pista recorre el ancho (translateX en % del prado) y la ovejita hace el arco */
.pista { position: absolute; left: 0; right: 0; bottom: 26%; z-index: 5; height: 0; pointer-events: none; }
.pista__x { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; }
.saltarina { position: absolute; left: 0; bottom: 0; width: var(--ov-w); transform-origin: 50% 100%; }
.saltarina .oveja__sombra { display: none; }
.pista.salta .pista__x { opacity: 1; animation: ov-x var(--salto) linear both; }
.pista.salta .saltarina { animation: ov-salto var(--salto) linear both; }
.pista.salta .pata--del { animation: pata-del var(--salto) linear both; }
.pista.salta .pata--tras { animation: pata-tras var(--salto) linear both; }
@keyframes ov-x {
  0% { transform: translateX(-30%); }
  30% { transform: translateX(11%); }
  70%, 100% { transform: translateX(65%); }
}
@keyframes ov-salto {
  0% { translate: 0 0; rotate: 0deg; scale: 1 1; }
  6% { translate: 0 -7%; }
  12% { translate: 0 0; }
  18% { translate: 0 -7%; }
  24% { translate: 0 0; scale: 1 1; }
  29% { translate: 0 2%; scale: 1.08 .88; rotate: 0deg; }
  35% { translate: 0 -79%; scale: .96 1.05; rotate: -10deg; }
  40% { translate: 0 -135%; scale: 1 1; rotate: -8deg; }
  45% { translate: 0 -169%; }
  50% { translate: 0 -180%; rotate: 0deg; }
  55% { translate: 0 -169%; }
  60% { translate: 0 -135%; rotate: 8deg; }
  65% { translate: 0 -79%; rotate: 10deg; }
  70% { translate: 0 0; scale: 1 1; rotate: 4deg; }
  75% { translate: 0 2%; scale: 1.1 .86; rotate: 0deg; }
  85% { translate: 0 -10%; scale: .96 1.05; }
  93% { translate: 0 0; scale: 1.03 .97; }
  100% { translate: 0 0; scale: 1 1; rotate: 0deg; }
}
@keyframes pata-del { 0%, 12%, 24%, 30% { rotate: 0deg; } 6%, 18% { rotate: -22deg; } 36%, 64% { rotate: -50deg; } 72%, 100% { rotate: 0deg; } }
@keyframes pata-tras { 0%, 12%, 24%, 30% { rotate: 0deg; } 6%, 18% { rotate: 22deg; } 36%, 64% { rotate: 48deg; } 72%, 100% { rotate: 0deg; } }

/* ---------- Encabezado, contador y botón ---------- */
.prado__cab {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 4.5svh);
  left: 20px;
  right: 20px;
  z-index: 6;
  text-align: center;
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.prado__eyebrow { margin: 0; font-weight: 600; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #6a7fb8; }
.prado__titulo {
  margin: 6px auto 0;
  max-width: 13em;
  font-family: var(--mano);
  font-weight: 700;
  font-size: clamp(1.75rem, 7.6vw, 2.25rem);
  line-height: 1.08;
  color: var(--tinta);
  animation: ov-aparecer 1.1s .2s ease both;
}
.jugando .prado__cab { opacity: .6; transform: scale(.94); }
.noche .prado__cab { opacity: 0; transform: translateY(-20px); }

.contador {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 19svh);
  left: 16px;
  right: 16px;
  z-index: 6;
  text-align: center;
  pointer-events: none;
  transition: opacity .8s ease;
}
.contador__nums {
  min-height: clamp(4.4rem, min(22vw, 14svh), 6.6rem);
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--mano);
  font-weight: 700;
  line-height: 1;
  color: var(--lapiz);
  text-shadow: 0 2px 0 #fff, 0 0 16px rgba(255, 255, 255, .85);
}
.contador__nums .n,
.contador__nums .coma { display: inline-block; font-size: clamp(1.7rem, 7.5vw, 2.3rem); opacity: .6; transition: font-size .45s ease, opacity .45s ease; }
.contador__nums .coma { margin-right: .14em; opacity: .45; }
.contador__nums .n.nueva { font-size: clamp(4.4rem, min(22vw, 14svh), 6.6rem); opacity: 1; animation: escribir .75s cubic-bezier(.3, .9, .4, 1) both; }
@keyframes escribir {
  0% { opacity: 0; clip-path: inset(-30% 100% -30% -30%); transform: rotate(-10deg) scale(.7); }
  30% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(-30% -30% -30% -30%); transform: rotate(-3deg) scale(1); }
}
.contador__lbl { min-height: 1.3em; margin: 2px 0 0; font-weight: 600; font-size: .92rem; letter-spacing: .04em; color: #5a5f8f; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.pips { margin-top: 8px; display: flex; justify-content: center; gap: 8px; }
.pips i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 6px rgba(93, 106, 172, .2);
  transition: background-color .3s, transform .4s cubic-bezier(.3, 1.8, .5, 1), box-shadow .3s;
}
.pips i.lleno { background: #fff; transform: scale(1.25); box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(233, 196, 111, .6); }
.noche .contador { opacity: 0; }

/* Superficie táctil: botón accesible del tamaño de la pantalla */
.prado__zona {
  all: unset;
  position: absolute;
  inset: 0;
  z-index: 7;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.prado__zona:focus-visible { outline: 2px dashed #6a7fb8; outline-offset: -12px; border-radius: 26px; }

.prado__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 8;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: opacity .6s ease;
}
.btn-ov {
  all: unset;
  box-sizing: border-box;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cielo-2), #6aa6d6);
  color: #fff;
  font-family: var(--fuente);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--azul-2), 0 14px 22px -10px rgba(47, 70, 130, .55);
  transition: transform .15s ease, box-shadow .15s ease, opacity .3s;
}
.btn-ov:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--azul-2); }
.btn-ov:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn-ov:disabled { opacity: .6; cursor: default; }
.noche .prado__pie { opacity: 0; }
.noche .btn-ov { pointer-events: none; }

/* ---------- Noche: luna-cunita, ovejitas dormidas y nombre ---------- */
.noche-capa {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1svh;
  padding: calc(env(safe-area-inset-top) + 2svh) 16px calc(env(safe-area-inset-bottom) + 62px);
  pointer-events: none;
}
.cuna {
  position: relative;
  flex: none;
  width: min(94%, 400px, 50svh);
  aspect-ratio: 400 / 340;
  transform: translateY(-120svh);
  transition: transform 2.8s cubic-bezier(.25, .8, .3, 1.04) .8s;
}
.cuna::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  bottom: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 180, .38), rgba(255, 238, 180, 0));
}
.noche .cuna { transform: none; }
.cuna__mece { width: 100%; height: 100%; transform-origin: 50% -80%; }
.noche .cuna__mece { animation: mecer 6s ease-in-out 3.6s infinite; }
.cuna.mecida .cuna__mece { animation: mecer-fuerte 1.9s ease-in-out; }
@keyframes mecer { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(2deg); } 75% { transform: rotate(-2deg); } }
@keyframes mecer-fuerte { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(6deg); } 45% { transform: rotate(-5deg); } 70% { transform: rotate(3deg); } 88% { transform: rotate(-1deg); } }
.cuna__svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.cuna__hilos { opacity: .8; }

.dormida { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.noche .dormida { animation: dormir-entra 1s ease both, respira 3.4s ease-in-out infinite; animation-delay: 3.3s, 4.3s; }
.noche .dormida--2 { animation-delay: 3.45s, 5s; }
.noche .dormida--3 { animation-delay: 3.6s, 4.6s; }
.noche .dormida--4 { animation-delay: 3.75s, 5.3s; }
.noche .dormida--5 { animation-delay: 3.9s, 4.9s; }
@keyframes dormir-entra { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }

.zzz { opacity: 0; transform-box: fill-box; transform-origin: center; }
.zzz text { font-family: var(--fuente); font-weight: 600; font-size: 22px; fill: #fff4cf; }
.zzz .zzz__chico { font-size: 15px; }
.noche .zzz { animation: zzz 3.6s ease-in-out 4.8s infinite; }
.noche .zzz--2 { animation-delay: 5.9s; }
.noche .zzz--3 { animation-delay: 6.8s; }
@keyframes zzz {
  0% { opacity: 0; transform: translate(0, 6px) scale(.8); }
  25% { opacity: 1; }
  75% { opacity: .9; }
  100% { opacity: 0; transform: translate(10px, -16px) scale(1.1); }
}

.paloma { display: block; height: auto; overflow: visible; }
.paloma__ala { transform-box: fill-box; transform-origin: 50% 100%; animation: aletear .45s ease-in-out infinite alternate; }
@keyframes aletear { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
.paloma--cielo { position: absolute; top: -3%; right: 2%; width: 15%; opacity: 0; transform: translate(120%, -60%); }
.noche .paloma--cielo { animation: paloma-llega 2.4s ease-out 3.8s both, flota 4s ease-in-out 6.2s infinite; }
@keyframes paloma-llega { from { opacity: 0; transform: translate(120%, -60%); } to { opacity: 1; transform: none; } }
@keyframes flota { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }

.cuna__btn {
  all: unset;
  position: absolute;
  left: 18%;
  right: 18%;
  top: 8%;
  bottom: 12%;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.cuna__btn:focus-visible { outline: 2px dashed #fff4cf; outline-offset: 4px; }

.revela { position: relative; text-align: center; color: #fff; pointer-events: none; }
.revela__nombre {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.8rem, min(14vw, 9svh), 4.2rem);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 236, 170, .55), 0 4px 14px rgba(20, 24, 60, .5);
  opacity: 0;
}
.revela__titulo { margin: 0; font-family: var(--mano); font-weight: 700; font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.1; color: #ffe6a3; text-shadow: 0 2px 10px rgba(20, 24, 60, .5); opacity: 0; }
.revela__fecha {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ecebff;
  text-shadow: 0 2px 8px rgba(20, 24, 60, .5);
  opacity: 0;
}
.revela__dia {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid #f0d184;
  background: rgba(255, 255, 255, .12);
  font-size: 1.5rem;
  letter-spacing: 0;
  color: #fff4cf;
}
.noche .revela__nombre { animation: ov-aparecer 1.2s 3.9s ease both; }
.noche .revela__titulo { animation: ov-aparecer 1s 4.4s ease both; }
.noche .revela__fecha { animation: ov-aparecer 1s 4.8s ease both; }
@keyframes ov-aparecer { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.prado .desliza-c { z-index: 8; color: #fff; font-family: var(--fuente); }

/* ================= INVITACIÓN ================= */
.contenido { position: relative; background: var(--crema); }
.contenido::before {                         /* borde de nubecitas sobre el prado */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  height: 18px;
  background: radial-gradient(circle at 50% 100%, var(--crema) 16px, transparent 17px) 0 0 / 34px 18px repeat-x;
}

.separador { display: block; width: 180px; height: 28px; margin: -14px auto; }

.mantita-sec { padding-top: 76px; }
.mantita { position: relative; width: min(100%, 360px); }
.mantita__tela {
  padding: 16px;
  border-radius: 30px;
  background-color: #fdf3e4;
  background-image:
    linear-gradient(45deg, rgba(191, 227, 247, .65) 25%, transparent 25%, transparent 75%, rgba(191, 227, 247, .65) 75%),
    linear-gradient(45deg, rgba(200, 238, 219, .65) 25%, transparent 25%, transparent 75%, rgba(200, 238, 219, .65) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  outline: 2px dashed rgba(255, 255, 255, .95);
  outline-offset: -8px;
  box-shadow: 0 18px 30px -20px rgba(75, 74, 107, .55);
  transform: rotate(-1.5deg);
}
.mantita__parche { padding: 26px 18px 22px; border-radius: 22px; border: 2px dashed #f2b3c3; background: #fffaf2; text-align: center; }
.mantita__pre { margin: 0; font-weight: 600; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rosa-2); }
.mantita__nombre { margin: 6px 0 0; font-family: var(--mano); font-weight: 700; font-size: clamp(2.1rem, 9.5vw, 2.7rem); line-height: 1.05; color: var(--lapiz); overflow-wrap: anywhere; text-shadow: 0 1px 0 #fff; }
.mantita__te { margin: 2px 0 0; font-family: var(--mano); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: #e58fa6; }
.mantita__pases { margin: 12px 0 0; display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--menta); font-size: .85rem; font-weight: 600; color: #3f7d5f; }
.cordero { position: absolute; right: -12px; top: -66px; width: 112px; transform: rotate(6deg); }
.cordero .oveja { transform-origin: 50% 100%; animation: cordero 3s ease-in-out infinite; }
@keyframes cordero { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-2deg); } }
.mensaje { margin: 30px 0 0; max-width: 22em; font-size: 1.1rem; line-height: 1.65; }

.familia { padding-top: 40px; }
.paloma--sep { width: 84px; margin-bottom: 6px; }
.paloma--sep .paloma__ala { animation-duration: .9s; }
.familia__rejilla { width: 100%; display: grid; gap: 16px; }
.familia__item { padding: 24px 18px; border-radius: var(--s-radio); background: #fff; box-shadow: var(--s-sombra); outline: 2px dashed rgba(140, 196, 232, .5); outline-offset: -9px; }
.familia__t { margin: 0; font-weight: 600; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rosa-2); }
.familia__n { margin: 6px 0 0; font-family: var(--mano); font-weight: 700; font-size: 1.75rem; line-height: 1.15; }
@media (min-width: 480px) { .familia__rejilla { grid-template-columns: 1fr 1fr; } }

.s-cuenta { background: linear-gradient(180deg, var(--crema), rgba(191, 227, 247, .45) 55%, var(--crema)); }
.s-cuenta__caja { outline: 2px dashed rgba(140, 196, 232, .45); outline-offset: -6px; }
.s-cuenta__num { font-weight: 600; }
.s-evento { outline: 2px dashed rgba(140, 196, 232, .5); outline-offset: -9px; }
.s-evento__icono { background: var(--cielo); border-color: transparent; color: var(--azul-2); }
.s-evento__titulo { color: var(--rosa-2); }
.s-evento__hora { font-weight: 600; }

.frase { padding-top: 40px; background: linear-gradient(180deg, var(--crema), rgba(255, 217, 224, .4) 55%, var(--crema)); }
.frase__marco { width: min(86%, 340px); }
.frase__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 22px rgba(91, 110, 170, .25)); }
.frase__txt { margin: 18px 0 0; max-width: 15em; font-family: var(--mano); font-weight: 700; font-size: clamp(1.8rem, 8vw, 2.3rem); line-height: 1.2; color: #6276b5; }

.s-foto { border: 6px solid #fff; }
.s-galeria__rejilla--5 .s-foto:first-child { grid-column: 1 / -1; }
.s-galeria__rejilla--5 .s-foto:first-child img { aspect-ratio: 16 / 10; }

.s-vestimenta { background: linear-gradient(180deg, var(--crema), rgba(200, 238, 219, .45) 55%, var(--crema)); }
.s-vestimenta__tipo { font-family: var(--mano); font-weight: 700; font-size: 2.1rem; color: #6276b5; }
.s-paleta li { background: #fff; }

.s-rsvp { background: radial-gradient(80% 60% at 50% 40%, rgba(191, 227, 247, .5), transparent 75%); }
.s-rsvp__saludo { font-family: var(--mano); font-weight: 700; font-size: 1.75rem; color: var(--rosa-2); }
.s-btn { font-weight: 600; }
.s-btn--lleno { background: linear-gradient(180deg, var(--cielo-2), var(--azul)); box-shadow: 0 5px 0 var(--azul-2), 0 14px 22px -12px rgba(47, 70, 130, .55); }
.s-btn--lleno:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--azul-2); }
.s-pie__n { font-family: var(--script); font-size: 2.4rem; color: #6a8fc8; }

/* ================= MOVIMIENTO REDUCIDO ================= */
@media (prefers-reduced-motion: reduce) {
  .nube, .noche .st, .ojos--abiertos, .oveja-r .oveja, .cordero .oveja, .paloma__ala,
  .noche .cuna__mece, .cuna.mecida .cuna__mece, .prado__titulo { animation: none !important; }
  .pista { display: none; }
  .oveja-r.en-sitio { transition: opacity .4s ease; }
  .noche .oveja-r { transition: opacity .6s ease; }
  .tierra, .sol { transition-duration: .8s; }
  .cuna { transform: none; opacity: 0; transition: opacity 1s ease .3s; }
  .noche .cuna { opacity: 1; }
  .noche .dormida, .noche .revela__nombre, .noche .revela__titulo, .noche .revela__fecha,
  .noche .paloma--cielo { animation: ov-quieto .8s ease 1s both !important; }
  .paloma--cielo { transform: none; }
  .noche .zzz { animation: none; opacity: .85; }
  .contador__nums .n.nueva { animation: ov-quieto .3s ease both; }
  @keyframes ov-quieto { from { opacity: 0; } to { opacity: 1; } }
}