/* ============================================================
   UNA SORPRESA PARA USTEDES — Day Pass Xandari
   Sistema de diseño editorial · Bodoni Moda + Manrope
   ============================================================ */

:root{
  /* paleta */
  --c-cream:   #F7F2EC;
  --c-nude:    #EFE4DD;
  --c-terra:   #A65A62;
  --c-terra-d: #8B4750;
  --c-sage:    #6F7962;
  --c-carbon:  #303028;
  --c-white:   #FFFFFF;
  --c-terra-soft: rgba(166,90,98,.14);
  --c-sage-soft:  rgba(111,121,98,.16);
  --c-carbon-soft: rgba(48,48,40,.72);
  --c-sage-d: #5C6550;

  /* tipografia */
  --font-serif: "Bodoni Moda", "Times New Roman", serif;
  --font-sans:  "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ritmo */
  --pad-x: clamp(1.5rem, 6vw, 4rem);
  --section-pad-y: clamp(5rem, 14vh, 9rem);

  /* motion */
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-soft:    cubic-bezier(.22,.61,.36,1);
  --dur-fast: .4s;
  --dur-med:  .9s;
  --dur-slow: 1.4s;

  color-scheme: light;
}

/* ============ RESET ============ */
*, *::before, *::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--c-cream);
  color:var(--c-carbon);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
}
body.locked{ overflow:hidden; height:100dvh; }

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
svg{ display:block; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.eyebrow{
  font-family:var(--font-sans);
  font-size: clamp(.7rem, 1.6vw, .82rem);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-terra-d);
  margin:0 0 1.4rem;
}

/* ============ SCROLL REVEAL SYSTEM ============ */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity var(--dur-med) var(--ease-premium),
    transform var(--dur-med) var(--ease-premium),
    filter var(--dur-med) var(--ease-premium);
  transition-delay: calc(var(--d, 0) * 90ms);
}
[data-reveal].in-view{
  opacity:1;
  transform:none;
  filter:blur(0);
}

.mask-reveal{
  display:block;
  overflow:hidden;
}
.mask-reveal > * { display:block; }

/* ============ CORAZONES AMBIENTALES ============ */
.drift{
  width:34px; height:auto;
  color:var(--c-terra);
  opacity:.14;
}
.drift--slow{ width:46px; opacity:.18; }

@keyframes floatDrift{
  0%   { transform: translate(0,0) rotate(-4deg); }
  50%  { transform: translate(6px,-14px) rotate(3deg); }
  100% { transform: translate(0,0) rotate(-4deg); }
}
@keyframes pulseSlow{
  0%,100% { transform: scale(1); opacity:.14; }
  50%     { transform: scale(1.06); opacity:.22; }
}

.ambient-heart{
  position:absolute;
  pointer-events:none;
  z-index:1;
}
.ambient-heart svg{
  width:100%; height:100%;
  color:var(--c-sage);
}
.ambient-heart--1{ top:8%; right:6%; width:26px; animation: floatDrift 14s ease-in-out infinite; }
.ambient-heart--2{ bottom:12%; left:5%; width:20px; animation: floatDrift 19s ease-in-out infinite reverse; color:var(--c-terra); }

/* ============================================================
   PORTADA / APERTURA
   ============================================================ */
.cover{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(120% 120% at 50% 30%, var(--c-cream) 0%, var(--c-nude) 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition: opacity 1.1s var(--ease-premium), filter 1.1s var(--ease-premium);
}
.cover__grain{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(166,90,98,.05), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(111,121,98,.06), transparent 45%);
  pointer-events:none;
}
.cover__hearts{ position:absolute; inset:0; pointer-events:none; }
.cover__hearts svg{ position:absolute; width:22px; height:auto; }
.drift--a{ top:16%; left:12%; animation: floatDrift 16s ease-in-out infinite; }
.drift--b{ bottom:20%; right:10%; width:28px; animation: floatDrift 20s ease-in-out infinite reverse; }
.drift--c{ top:60%; left:8%; width:16px; animation: floatDrift 12s ease-in-out infinite; }

.cover__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: clamp(2rem, 6vh, 3.2rem);
  transition: opacity .5s ease, transform .5s ease;
}

.cover__eyebrow{
  font-family:var(--font-sans);
  font-size: clamp(.85rem, 3vw, 1.05rem);
  font-weight:500;
  letter-spacing:.06em;
  color: var(--c-carbon-soft);
  max-width: 18ch;
  margin:0;
}

.heart-trigger{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
}

.heart-trigger__stage{
  position:relative;
  width: clamp(110px, 30vw, 160px);
  height: calc(clamp(110px, 30vw, 160px) * .9);
}

.heart-trigger__half{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color: var(--c-terra);
  filter: drop-shadow(0 10px 26px rgba(166,90,98,.28));
  animation: pulseAmbient 4.5s ease-in-out infinite;
  transition:
    transform 1s var(--ease-premium),
    opacity .8s var(--ease-premium);
}
.heart-trigger__half--left{ clip-path: inset(0 50% 0 0); }
.heart-trigger__half--right{ clip-path: inset(0 0 0 50%); }

@keyframes pulseAmbient{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}

.heart-trigger__label{
  font-family:var(--font-sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-carbon);
  position:relative;
  padding-bottom:.5rem;
}
.heart-trigger__label::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:28px; height:1px;
  background:var(--c-terra);
  transform:translateX(-50%);
  transition: width .4s var(--ease-soft);
}
.heart-trigger:hover .heart-trigger__label::after{ width:44px; }

/* --- secuencia de apertura --- */
.cover.pulsing .heart-trigger__half{
  animation: heartPulse .5s var(--ease-spring);
}
@keyframes heartPulse{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.12); }
  100%{ transform:scale(1.04); }
}

.cover.expanding .heart-trigger__stage{
  transition: transform .5s var(--ease-spring);
  transform: scale(1.18);
}

.cover.splitting .heart-trigger__half{ animation:none; }
.cover.splitting .heart-trigger__half--left{
  transform: translate3d(-115vw, -6vh, 0) rotate(-8deg);
  opacity:0;
}
.cover.splitting .heart-trigger__half--right{
  transform: translate3d(115vw, -6vh, 0) rotate(8deg);
  opacity:0;
}
.cover.splitting .cover__inner{
  opacity:0;
  transform: translateY(-12px) scale(.98);
}
.cover.splitting .cover__eyebrow,
.cover.splitting .heart-trigger__label{
  transition: opacity .35s ease;
  opacity:0;
}

.cover.hidden{
  opacity:0;
  filter: blur(6px);
  pointer-events:none;
}

/* particulas ascendentes */
.particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:3;
}
.particle{
  position:absolute;
  bottom:38%;
  left:50%;
  width:14px; height:auto;
  color:var(--c-terra);
  opacity:0;
  animation: particleUp var(--dur, 1.8s) var(--ease-soft) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes particleUp{
  0%{ opacity:0; transform: translate(0,0) scale(.6) rotate(0deg); }
  15%{ opacity:.9; }
  100%{ opacity:0; transform: translate(var(--x, 0px), -46vh) scale(1) rotate(var(--r, 20deg)); }
}

/* ============================================================
   CONTENIDO PRINCIPAL
   ============================================================ */
.content{
  position:relative;
  filter: blur(10px);
  opacity:0;
  transform: translateY(10px);
  transition: opacity 1.3s var(--ease-premium), filter 1.3s var(--ease-premium), transform 1.3s var(--ease-premium);
}
.content.revealed{
  filter: blur(0);
  opacity:1;
  transform:none;
}

.section{
  position:relative;
  padding: var(--section-pad-y) var(--pad-x);
  max-width: 1240px;
  margin: 0 auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top: calc(var(--section-pad-y) + env(safe-area-inset-top));
  padding-bottom: calc(var(--section-pad-y) + env(safe-area-inset-bottom));
}
.hero .eyebrow{ text-align:center; }

.names-grid{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: .32em;
}

/* --- name-slot: controla alineación / posición editorial (sin tamaño) --- */
.name-slot{ display:block; }
.name-slot--carol{ text-align:left; }
.name-slot--laura{ text-align:center; }
.name-slot--yendry{ text-align:center; }
.name-slot--karla{ text-align:left; }
.name-slot--keylin{ text-align:right; }
.name-slot--keila{ text-align:center; }

/* --- name-item: capa de movimiento "burbuja" (transform propio) --- */
.name-item{
  display:inline-block;
  animation-name: bubbleFloatA;
  animation-duration: var(--fdur, 11s);
  animation-delay: var(--fdelay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
.name-item--a{ animation-name: bubbleFloatA; }
.name-item--b{ animation-name: bubbleFloatB; }
.name-item--c{ animation-name: bubbleFloatC; }

@keyframes bubbleFloatA{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  33%     { transform: translate(9px,-13px) rotate(-1.1deg); }
  66%     { transform: translate(-7px,-4px) rotate(.9deg); }
}
@keyframes bubbleFloatB{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  40%     { transform: translate(-11px,9px) rotate(1.3deg); }
  75%     { transform: translate(6px,13px) rotate(-.9deg); }
}
@keyframes bubbleFloatC{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  30%     { transform: translate(8px,11px) rotate(-1deg); }
  70%     { transform: translate(-9px,-10px) rotate(1.2deg); }
}

/* --- name: tipografía uniforme + interacción de hover/tap --- */
.name{
  display:inline-block;
  font-family:var(--font-serif);
  font-weight:500;
  font-style:italic;
  line-height:.94;
  letter-spacing:-.01em;
  font-size: clamp(2.6rem, 13vw, 5.2rem);
  color:var(--c-carbon);
  cursor:default;
  transform-origin:center;
  transition: transform .55s var(--ease-spring), color .4s var(--ease-soft);
}
.name--accent{ color:var(--c-terra); }
.name:hover,
.name:focus-visible,
.name:active{
  transform: scale(1.16);
  color:var(--c-terra);
}

.name-heart{
  display:flex;
  color:var(--c-sage);
  opacity:.5;
}
.name-heart svg{ width:20px; height:auto; }
.name-heart{ justify-content:flex-end; padding:.3em 0; }
.name-heart--b{ justify-content:center; }

.scroll-cue{
  margin: clamp(2.5rem, 8vh, 4rem) auto 0;
  width:1px; height:46px;
  background: linear-gradient(var(--c-carbon-soft), transparent);
  position:relative;
  opacity:.5;
}
.scroll-cue span{
  position:absolute; top:0; left:-2.5px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--c-terra);
  animation: scrollCue 2.4s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(0); opacity:1; }
  80%{ opacity:0; }
  100%{ transform:translateY(40px); opacity:0; }
}

/* ============================================================
   MENSAJE
   ============================================================ */
.message{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: clamp(4rem, 14vh, 7rem);
}
.message__block{ max-width: 22ch; }
.message__line{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height:1.35;
  color:var(--c-carbon);
  margin:0;
}
.message__line--lg{
  font-size: clamp(1.8rem, 6.4vw, 2.7rem);
  color:var(--c-terra);
}

.message__pause{ height: clamp(3rem, 10vh, 6rem); display:flex; align-items:center; justify-content:center; }
.message__pause svg{ animation: pulseSlow 5s ease-in-out infinite; }

.message__reveal{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.message__big{
  font-family:var(--font-serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size: clamp(2.4rem, 10vw, 4.6rem);
  color:var(--c-carbon);
  margin:0;
}
.message__sub{
  font-family:var(--font-sans);
  font-size: clamp(.85rem, 2.2vw, 1rem);
  letter-spacing:.1em;
  color:var(--c-terra-d);
  margin:0;
  text-transform:uppercase;
}

/* ============================================================
   XANDARI
   ============================================================ */
.xandari{ padding-top:0; padding-bottom:0; }
.xandari__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  padding: var(--section-pad-y) 0;
}
.xandari__text{ padding: 0 var(--pad-x) 1rem; }
.xandari__title{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  line-height:1.05;
  margin: 0 0 1.4rem;
  color:var(--c-carbon);
}
.xandari__copy{
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
  line-height:1.7;
  color: var(--c-carbon-soft);
  max-width:38ch;
  margin:0 0 1.4rem;
}
.xandari__location{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-sage-d);
  margin:0;
}

.photo-frame{
  position:relative;
  margin: 0 var(--pad-x);
  overflow:hidden;
  border-radius: 2px;
  background:
    linear-gradient(155deg, var(--c-nude) 0%, var(--c-cream) 60%, var(--c-sage-soft) 100%);
}
.photo-frame img{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease-soft);
}
.photo-frame.in-view img{ transform: scale(1); }

.photo-frame--main{ aspect-ratio: 4 / 3; }
.photo-frame--side{ aspect-ratio: 4 / 3; margin-top: -0.5rem; margin-left: 18%; }
.photo-frame--wide{ aspect-ratio: 20 / 9; margin-top: 1.5rem; }

.photo-frame__fallback{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  color: var(--c-terra);
  opacity:.55;
}
.photo-frame__fallback svg{ width:34px; height:auto; }
.photo-frame__fallback span{
  font-family:var(--font-sans);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--c-carbon-soft);
}

/* ============================================================
   FECHA
   ============================================================ */
.date{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: linear-gradient(180deg, var(--c-cream), var(--c-nude));
}
.date__display{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:.86;
}
.date__day{
  font-family:var(--font-serif);
  font-weight:700;
  font-size: clamp(6rem, 32vw, 13rem);
  color:var(--c-carbon);
}
.date__month{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(2.2rem, 11vw, 4.4rem);
  color:var(--c-terra);
  margin-top: -.08em;
}
.date__sub{
  margin: 1.6rem 0 2rem;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--c-carbon-soft);
}
.date__heart{ width:30px; opacity:.3; animation: pulseSlow 6s ease-in-out infinite; margin-bottom:2rem; }
.date__place{
  font-family:var(--font-sans);
  font-size:.95rem;
  line-height:1.6;
  color:var(--c-carbon-soft);
}

/* mask reveal para los numeros */
.mask-reveal{ position:relative; }
.mask-reveal > *{
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-premium);
}
.mask-reveal.in-view > *{ transform:translateY(0); }
.date__day.mask-reveal, .date__month.mask-reveal{ overflow:hidden; }

/* ============================================================
   FAMILIA / GRATITUD
   ============================================================ */
.familia{ text-align:center; }

.familia__title{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  line-height:1.28;
  max-width:19ch;
  margin: 0 auto clamp(3rem, 9vh, 5rem);
  color:var(--c-carbon);
}

.familia__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin: 0 0 clamp(4rem, 11vh, 6.5rem);
}

.child-card figure{
  position:relative;
  margin:0;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  border-radius:2px;
  background: linear-gradient(155deg, var(--c-nude) 0%, var(--c-cream) 60%, var(--c-sage-soft) 100%);
}
.child-card img{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.06);
  filter: saturate(.94);
  transition: transform 1.4s var(--ease-soft);
}
.child-card.in-view img{ transform: scale(1); }

/* ilustración (Keila): se muestra completa, sin recortar como una foto */
.child-card--illustration figure{ background: var(--c-cream); }
.child-card--illustration img{
  object-fit: contain;
  padding: 12%;
  box-sizing: border-box;
  background: var(--c-cream);
  filter: none;
}
.child-card--illustration figcaption{
  background: linear-gradient(0deg, rgba(247,242,236,.92) 0%, rgba(247,242,236,0) 70%);
  color: var(--c-carbon);
}

.child-card__fallback{
  position:absolute; inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-terra);
  opacity:.4;
}
.child-card__fallback svg{ width:26px; height:auto; }

.child-card figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding: 2.2rem .5rem .85rem;
  background: linear-gradient(0deg, rgba(48,48,40,.6) 0%, rgba(48,48,40,0) 75%);
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(.95rem, 3vw, 1.15rem);
  color:var(--c-white);
  letter-spacing:.01em;
}

.gratitud{
  max-width:34ch;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(1.6rem, 5vh, 2.4rem);
}
.gratitud__lead{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color:var(--c-carbon);
  margin:0;
}
.gratitud__body{
  font-family:var(--font-sans);
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  line-height:1.75;
  color:var(--c-carbon-soft);
  margin:0;
}
.gratitud__big{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:600;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  line-height:1.35;
  color:var(--c-terra-d);
  margin:0;
}
.gratitud__close{
  font-family:var(--font-sans);
  font-size:.9rem;
  letter-spacing:.05em;
  color:var(--c-sage-d);
  margin:0;
}

/* ============================================================
   EMOCIONAL
   ============================================================ */
.emotional{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(3rem, 10vh, 5rem);
}
.emotional__title{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size: clamp(1.9rem, 7vw, 3rem);
  margin:0;
  color:var(--c-carbon);
}
.emotional__list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.emotional__list p{
  font-family:var(--font-sans);
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  color: var(--c-carbon-soft);
  margin:0;
}
.emotional__names{
  font-family:var(--font-sans);
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-sage-d);
  margin:0;
}

/* ============================================================
   FINAL
   ============================================================ */
.final{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1.6rem;
  padding-bottom: calc(var(--section-pad-y) + env(safe-area-inset-bottom));
}
.final__heart{
  width:38px;
  opacity:.4;
  margin-bottom:1rem;
  animation: pulseSlow 7s ease-in-out infinite;
}
.final__line{
  font-family:var(--font-serif);
  font-style:italic;
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  color:var(--c-carbon);
  margin:0;
}
.final__line--sub{ color:var(--c-terra); }
.final__date{
  font-family:var(--font-sans);
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--c-carbon-soft);
  margin: .4rem 0 1.6rem;
}
.final__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-carbon);
  text-decoration:none;
  padding: 1rem 1.2rem .9rem;
  margin: -1rem -1.2rem 0;
  touch-action:manipulation;
}
.final__cta::after{
  content:"";
  position:absolute;
  left:1.2rem; right:1.2rem; bottom:.5rem;
  height:1px;
  background:var(--c-terra);
  transform-origin:left;
  transition: transform .4s var(--ease-soft);
}
.final__cta:hover::after,
.final__cta:focus-visible::after{ transform:scaleX(1.15); }
.final__cta span{ transition: transform .35s var(--ease-soft); }
.final__cta:hover span{ transform:translate(3px,-3px); }

/* ============================================================
   RESPONSIVE — TABLET / DESKTOP
   ============================================================ */
@media (min-width: 700px){
  .names-grid{ gap:.5em; }
  .name-slot--keylin{ margin-right: 4%; }
  .name-slot--karla{ margin-left: 2%; }

  .familia__grid{ grid-template-columns: repeat(3, 1fr); gap:1.4rem; }

  .xandari__grid{
    grid-template-columns: 1.1fr .9fr;
    grid-template-areas:
      "text  side"
      "main  side"
      "wide  wide";
    align-items:start;
  }
  .xandari__text{ grid-area:text; align-self:end; padding-bottom:2rem; }
  .photo-frame--main{ grid-area:main; margin-right:2.5rem; }
  .photo-frame--side{ grid-area:side; margin-left:0; margin-top:0; align-self:start; }
  .photo-frame--wide{ grid-area:wide; margin-left: var(--pad-x); margin-right: var(--pad-x); }
}

@media (min-width: 1024px){
  :root{ --section-pad-y: clamp(6rem, 16vh, 11rem); }

  .names-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    align-items:center;
    row-gap:1.2rem;
  }
  /* grid-row explícito: la composición visual no depende del orden en el DOM,
     así Laura puede ir primero en el HTML (mobile) y seguir centrada arriba aquí */
  .name-slot--laura{ grid-column: 4 / 10; grid-row: 1; margin-bottom:.4rem; }
  .name-slot--carol{ grid-column: 1 / 6; grid-row: 2; }
  .name-heart{ grid-column: 9 / 12; grid-row: 2; padding:.6rem 0; }
  .name-slot--yendry{ grid-column: 4 / 10; grid-row: 3; margin: 1.6rem 0; }
  .name-slot--karla{ grid-column: 2 / 7; grid-row: 4; }
  .name-slot--keylin{ grid-column: 7 / 12; grid-row: 4; }
  .name-heart--b{ grid-column: 6 / 9; grid-row: 5; }
  .name-slot--keila{ grid-column: 5 / 10; grid-row: 6; margin-top:1.2rem; }

  .xandari__grid{ gap:2rem; }
  .photo-frame--main{ margin-right:4rem; }
}

/* ============================================================
   ACCESIBILIDAD — MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.25s !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ filter:none !important; transform:none !important; }
  .content{ filter:none !important; transform:none !important; }
  .heart-trigger__half, .drift, .ambient-heart, .date__heart, .final__heart, .message__pause svg, .name-item{
    animation:none !important;
    transform:none !important;
  }
}