/* ══════════════════════════════════════════════════════════
   Para Pollo, de Motas — hoja de estilo
   Paleta: algodón de azúcar + pollito + lila. Glassmorfismo.
   ══════════════════════════════════════════════════════════ */

:root{
  --rosa:        #FF6FA5;
  --rosa-fuerte: #F0448A;   /* rellenos: corazones, sellos, numeritos */
  --rosa-texto:  #CE2168;   /* texto rosa: 5.0:1 sobre la tarjeta */
  --rosa-suave:  #FFD3E2;
  --durazno:     #FFC9A9;
  --pollito:     #FFD84D;
  --pollito-sua: #FFF0B8;
  --lila:        #C9B6FF;
  --crema:       #FFF7F2;
  --tinta:       #4E2B39;
  --tinta-sua:   #8A6172;

  --glass:       rgba(255,255,255,.52);
  --glass-fuerte:rgba(255,255,255,.72);
  --borde:       rgba(255,255,255,.75);

  --sombra-s: 0 2px 8px rgba(200,90,140,.10);
  --sombra-m: 0 10px 30px -8px rgba(200,90,140,.24), 0 2px 8px rgba(200,90,140,.10);
  --sombra-l: 0 30px 70px -22px rgba(180,70,120,.35), 0 8px 24px -10px rgba(200,90,140,.22);

  --r-s: 14px;
  --r-m: 22px;
  --r-l: 32px;
  --r-xl: 44px;

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --texto: "Quicksand", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;

  --suave: cubic-bezier(.22,.9,.28,1);
  --brinco: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  font-family:var(--texto);
  font-size:clamp(16px,1rem + .2vw,18px);
  line-height:1.65;
  color:var(--tinta);
  background:var(--crema);
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

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

:focus-visible{
  outline:3px solid var(--rosa-fuerte);
  outline-offset:3px;
  border-radius:6px;
}

/* ══════════════ Fondo vivo ══════════════ */
.cielo{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(120% 90% at 10% 0%,  #FFE9F1 0%, transparent 55%),
    radial-gradient(110% 80% at 92% 8%,  #FFF3C9 0%, transparent 52%),
    radial-gradient(120% 90% at 50% 100%,#F3E9FF 0%, transparent 58%),
    linear-gradient(170deg,#FFF9F5 0%, #FFF1F5 45%, #FDF3FF 100%);
}
.blob{
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.55;
  animation:vagar 24s var(--suave) infinite alternate;
  will-change:transform;
}
.blob--1{ width:46vmax; height:46vmax; top:-14vmax; left:-10vmax; background:#FFB7D2; }
.blob--2{ width:38vmax; height:38vmax; top:8vmax;  right:-12vmax; background:#FFE28A; animation-duration:31s; animation-delay:-6s; }
.blob--3{ width:42vmax; height:42vmax; bottom:-16vmax; left:14vmax; background:#D9C7FF; animation-duration:27s; animation-delay:-12s; }
.blob--4{ width:26vmax; height:26vmax; bottom:6vmax; right:6vmax; background:#FFC9A9; animation-duration:19s; animation-delay:-3s; }

@keyframes vagar{
  0%  { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(4vmax,-3vmax,0) scale(1.12); }
  100%{ transform:translate3d(-3vmax,4vmax,0) scale(.94); }
}

.grano{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

/* corazoncitos / pollitos / huellas flotando */
.flotantes{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.flotantes svg{
  position:absolute; bottom:-60px;
  animation:subir linear infinite;
  will-change:transform,opacity;
}
@keyframes subir{
  0%  { transform:translateY(0) rotate(0deg) scale(.85); opacity:0; }
  10% { opacity:var(--op,.5); }
  90% { opacity:var(--op,.5); }
  100%{ transform:translateY(-118svh) rotate(var(--giro,180deg)) scale(1.05); opacity:0; }
}

/* ══════════════ Barra de avance ══════════════ */
.barra{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:10px clamp(12px,3vw,28px);
  padding-top:max(10px,env(safe-area-inset-top));
}
.barra[hidden]{ display:none; }

.barra__glass{
  flex:1;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 18px;
  border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--borde);
  box-shadow:var(--sombra-s);
}
.barra__etiqueta{
  font-size:.74rem; font-weight:700; letter-spacing:.04em;
  color:var(--tinta-sua); text-transform:lowercase;
}
.huellas{ display:flex; gap:6px; align-items:center; }
.huellas svg{
  width:19px; height:19px; flex:none;
  fill:rgba(180,120,150,.26);
  transform:rotate(-14deg);
  transition:fill .5s var(--suave), transform .5s var(--brinco);
}
.huellas svg.pisada{
  fill:var(--rosa);
  transform:rotate(-14deg) scale(1.22);
}

.sonido{
  flex:none;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  background:var(--glass); border:1px solid var(--borde);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:var(--sombra-s);
  color:var(--tinta-sua);
  transition:transform .25s var(--brinco), color .25s;
}
.sonido:hover{ transform:scale(1.08); color:var(--rosa-texto); }
.sonido svg{ width:21px; height:21px; fill:currentColor; }
.sonido .sonido__ondas{ opacity:.25; transition:opacity .25s; }
.sonido[aria-pressed="true"]{ color:var(--rosa-texto); }
.sonido[aria-pressed="true"] .sonido__ondas{ opacity:1; }

/* ══════════════ Escenas ══════════════ */
.escenario{
  display:grid;
  padding:clamp(14px,3vw,36px);
  padding-bottom:clamp(40px,8vw,80px);
}
.escena{
  grid-area:1/1;
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100svh - 150px);
  padding:8px 0;
}
.escena[hidden]{ display:none; }

.escena--entra .tarjeta{ animation:entrar .72s var(--suave) both; }
.escena--sale  .tarjeta{ animation:salir .34s var(--suave) both; }

@keyframes entrar{
  from{ opacity:0; transform:translateY(38px) scale(.965) rotate(-.6deg); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes salir{
  from{ opacity:1; transform:none; filter:blur(0); }
  to  { opacity:0; transform:translateY(-26px) scale(.97); filter:blur(6px); }
}

/* ══════════════ Tarjeta glass ══════════════ */
.tarjeta{
  position:relative;
  width:min(100%,720px);
  padding:clamp(26px,4.4vw,52px);
  border-radius:var(--r-xl);
  background:
    linear-gradient(150deg, rgba(255,255,255,.80), rgba(255,255,255,.42) 44%, rgba(255,240,247,.56));
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid var(--borde);
  box-shadow:var(--sombra-l), inset 0 1px 0 rgba(255,255,255,.9);
}
/* brillo superior del cristal */
.tarjeta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.55), transparent 38%);
  mix-blend-mode:screen;
}
.tarjeta--centro{ text-align:center; }
.tarjeta--ancha{ width:min(100%,900px); text-align:center; }
.tarjeta--duo{
  width:min(100%,880px);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3.4vw,40px); align-items:center;
}
.tarjeta--invertida{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.tarjeta--invertida .retrato{ order:2; }

@media (max-width:760px){
  .tarjeta--duo{ grid-template-columns:1fr; text-align:center; }
  .tarjeta--invertida .retrato{ order:0; }
}

/* ══════════════ Tipografía ══════════════ */
.susurro{
  margin:0 0 12px;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rosa-texto);
}
.titular{
  margin:0 0 18px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem,1.35rem + 3.1vw,3.4rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--tinta);
  text-wrap:balance;
}
.titular em{
  font-style:italic; font-weight:400;
  background:linear-gradient(100deg,#C21B60,#D93A7C 45%,#B87A15);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.titular--xl{ font-size:clamp(2.2rem,1.4rem + 3.9vw,4rem); }

.parrafo{ margin:0 0 14px; color:var(--tinta-sua); text-wrap:pretty; }
.parrafo strong{ color:var(--tinta); font-weight:700; }
.parrafo.grande{
  font-size:clamp(1.1rem,1rem + .6vw,1.42rem);
  font-weight:600; color:var(--tinta); line-height:1.45;
}
.parrafo.chiste{
  font-size:.95rem; font-style:italic;
  color:var(--tinta-sua);
}
.pista{
  margin:16px 0 0; font-size:.84rem; color:var(--tinta-sua);
}
.corazoncito{
  display:inline-block; color:var(--rosa-texto); font-weight:700;
  animation:latir 1.6s ease-in-out infinite;
}

/* mascota pollito del portón */
.mascota{ display:grid; place-items:center; margin-bottom:8px; }
.mascota__svg{
  width:clamp(88px,16vw,124px); height:auto;
  filter:drop-shadow(0 12px 18px rgba(200,120,60,.28));
  animation:brincar 2.6s var(--suave) infinite;
}
@keyframes brincar{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%    { transform:translateY(-14px) rotate(3deg); }
}

.corazon-grande{ display:grid; place-items:center; margin-bottom:6px; }
.corazon-grande svg{
  width:74px; height:74px;
  fill:var(--rosa-fuerte);
  filter:drop-shadow(0 10px 22px rgba(240,68,138,.4));
  animation:latir 1.35s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{ transform:scale(1); }
  14%    { transform:scale(1.16); }
  28%    { transform:scale(.98); }
  42%    { transform:scale(1.09); }
}

/* ══════════════ Retratos y fotos ══════════════ */
.retrato{ margin:0; }
.retrato img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 32%;
  border-radius:var(--r-l);
  border:5px solid rgba(255,255,255,.85);
  box-shadow:var(--sombra-m);
  transform:rotate(-2deg);
  transition:transform .5s var(--brinco);
}
.retrato:hover img{ transform:rotate(0deg) scale(1.02); }
.retrato figcaption{
  margin-top:12px; font-size:.84rem; color:var(--tinta-sua); text-align:center;
}
.retrato figcaption strong{ color:var(--rosa-texto); }

.polaroid{
  margin:22px auto; width:min(240px,62%);
  padding:12px 12px 40px;
  background:#fff; border-radius:8px;
  box-shadow:var(--sombra-m);
  transform:rotate(-3deg);
  transition:transform .5s var(--brinco), box-shadow .5s;
  position:relative;
}
.polaroid img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 32%; border-radius:3px; }
.polaroid--sola img{ aspect-ratio:4/5; }
.polaroid figcaption{
  position:absolute; left:0; right:0; bottom:12px;
  font-family:var(--display); font-style:italic;
  font-size:.9rem; color:var(--tinta-sua); text-align:center;
}
.polaroid:hover{ transform:rotate(1deg) scale(1.04); box-shadow:var(--sombra-l); }

/* galería */
.galeria{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,20px);
  margin:26px 0 20px;
}
.galeria .polaroid{
  width:100%; margin:0;
  padding:9px 9px 30px;
  animation:aparecer .6s var(--suave) both;
}
.galeria .polaroid:nth-child(odd){ transform:rotate(2deg); }
.galeria .polaroid:nth-child(3n){ transform:rotate(-3deg); }
.galeria .polaroid figcaption{ bottom:8px; font-size:.76rem; }
@keyframes aparecer{
  from{ opacity:0; transform:translateY(20px) scale(.9) rotate(0deg); }
}

/* ══════════════ Botones ══════════════ */
.pregunta{
  margin-top:clamp(22px,3.4vw,34px);
  padding-top:clamp(18px,3vw,26px);
  border-top:1px dashed rgba(240,68,138,.3);
}
.pregunta__texto{
  margin:0 0 16px;
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  color:var(--tinta);
}
.botones{
  position:relative;
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:center; align-items:center;
  min-height:64px;
}
.tarjeta--duo .botones{ justify-content:flex-start; }
@media (max-width:760px){ .tarjeta--duo .botones{ justify-content:center; } }

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px;
  font-family:var(--texto); font-size:1.14rem; font-weight:700;
  border:0; border-radius:999px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:transform .3s var(--brinco), box-shadow .3s var(--suave), filter .3s, opacity .3s;
  will-change:transform;
}
.btn:active{ transform:scale(.95); }

.btn--si{
  color:#fff;
  background:linear-gradient(135deg,#E13D82 0%, #C81D6B 55%, #AD1450 100%);
  box-shadow:0 12px 26px -8px rgba(240,68,138,.62), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--si::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.5),transparent 45%);
  opacity:.7; pointer-events:none;
}
.btn--si:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 20px 34px -10px rgba(240,68,138,.7); }

.btn--no{
  color:var(--tinta-sua);
  background:var(--glass-fuerte);
  border:1px solid var(--borde);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:var(--sombra-s);
}
.btn--no:hover{ color:var(--tinta); }

.btn--fantasma{
  margin-top:20px;
  min-height:44px; padding:10px 22px;
  font-size:.86rem; font-weight:600;
  color:var(--tinta-sua); background:transparent;
  border:1px dashed rgba(138,97,114,.4);
}
.btn--fantasma:hover{ color:var(--rosa-texto); border-color:var(--rosa-texto); }

.btn--wa{
  margin:6px 0 14px;
  font-size:1.1rem; padding:18px 34px; min-height:60px;
  color:#fff;
  background:linear-gradient(135deg,#1FA855,#0F8A41 55%,#0B6E33);
  box-shadow:0 14px 30px -8px rgba(30,178,87,.6), inset 0 1px 0 rgba(255,255,255,.4);
  animation:pulsoWa 2.6s var(--suave) infinite;
}
.btn--wa svg{ width:26px; height:26px; fill:currentColor; flex:none; }
.btn--wa:hover{ transform:translateY(-3px) scale(1.04); animation-play-state:paused; }
@keyframes pulsoWa{
  0%,100%{ box-shadow:0 14px 30px -8px rgba(30,178,87,.55), 0 0 0 0 rgba(47,208,107,.5); }
  60%    { box-shadow:0 14px 30px -8px rgba(30,178,87,.55), 0 0 0 20px rgba(47,208,107,0); }
}

/* estados de los trucos del botón "No" */
.btn--no.huyendo{ transition:transform .22s var(--suave), color .3s; }
.btn--no.encogido{ transition:transform .35s var(--brinco), opacity .35s; }
.btn--no.cayendo{
  animation:caerse 1.15s cubic-bezier(.5,0,.9,.6) forwards;
  pointer-events:none;
}
@keyframes caerse{
  0%  { transform:translateY(0) rotate(0deg); opacity:1; }
  15% { transform:translateY(-18px) rotate(-8deg); }
  100%{ transform:translateY(72svh) rotate(64deg); opacity:0; }
}
.btn--no.convertido{
  color:#fff;
  background:linear-gradient(135deg,#E13D82 0%, #AD1450 100%);
  border-color:transparent;
  box-shadow:0 12px 26px -8px rgba(240,68,138,.62);
  transform:scale(1.06) rotate(-2deg);
}
.btn--si.crecido{ animation:crecer .5s var(--brinco) both; }
@keyframes crecer{ from{ transform:scale(.9); } to{ transform:scale(1); } }

/* ══════════════ Sobre (escena 6) ══════════════ */
.sobre-zona{ display:grid; justify-items:center; gap:6px; margin:22px 0 10px; }

.sobre{
  position:relative;
  width:min(260px,80%); aspect-ratio:3/2;
  border:0; padding:0; cursor:pointer; background:none;
  transition:transform .55s var(--brinco), opacity .55s;
}
.sobre:hover{ transform:translateY(-5px) rotate(-1.4deg); }
.sobre.abierto{ transform:scale(.6) rotate(-6deg) translateY(14px); opacity:.75; cursor:default; }

/* la cara del sobre, con sus dobleces */
.sobre__frente{
  position:absolute; inset:0;
  border-radius:var(--r-m);
  background:linear-gradient(160deg,#FFE2EC,#FFC2D7);
  box-shadow:var(--sombra-m), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
/* la solapa: un triangulo desde arriba, que es lo que hace que se lea "sobre" */
.sobre__frente::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(165deg,#FFCFE0,#FFB3CC);
  clip-path:polygon(0 0, 50% 58%, 100% 0);
  border-bottom:1px solid rgba(255,255,255,.9);
  transition:clip-path .6s var(--suave), opacity .5s;
}
/* al abrirse la solapa se levanta */
.sobre.abierto .sobre__frente::after{ clip-path:polygon(0 0, 50% 18%, 100% 0); opacity:.55; }
.sobre__sello{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:48px; height:48px; display:grid; place-items:center;
  border-radius:50%; background:var(--rosa-fuerte);
  box-shadow:0 6px 16px -4px rgba(240,68,138,.7);
  transition:opacity .45s, transform .5s var(--brinco);
}
.sobre__sello svg{ width:25px; height:25px; fill:#fff; }
.sobre.abierto .sobre__sello{ opacity:0; transform:translate(-50%,-160%) scale(.35) rotate(40deg); }

.sobre__texto{
  position:absolute; left:0; right:0; bottom:12px;
  font-family:var(--display); font-style:italic; font-size:.95rem;
  color:var(--rosa-texto);
  transition:opacity .3s;
}
.sobre.abierto .sobre__texto{ opacity:0; }

/* la carta que salió del sobre */
.sobre__carta{
  margin:0; max-width:min(420px,94%);
  padding:20px 24px;
  border-radius:var(--r-m);
  background:#fff;
  box-shadow:var(--sombra-l);
  font-family:var(--display); font-style:italic;
  font-size:clamp(1rem,.95rem + .35vw,1.22rem); line-height:1.45;
  color:var(--tinta);
  animation:salirDelSobre .75s var(--brinco) both;
}
.sobre__carta[hidden]{ display:none; }
.sobre__carta strong{ font-style:normal; color:var(--rosa-texto); }
@keyframes salirDelSobre{
  from{ opacity:0; transform:translateY(-34px) scale(.86) rotate(3deg); }
  to  { opacity:1; transform:none; }
}

/* ══════════════ Calendario (escena 7) ══════════════ */
.calendario{
  margin:26px auto; width:min(300px,86%);
  padding:16px; border-radius:var(--r-m);
  background:var(--glass-fuerte); border:1px solid var(--borde);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:var(--sombra-m);
}
.calendario__top{
  font-family:var(--display); font-style:italic; font-size:.95rem;
  color:var(--rosa-texto); margin-bottom:12px;
}
.calendario__dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.calendario__dias span{
  aspect-ratio:1; border-radius:8px;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(240,68,138,.09);
}
.calendario__marcado{
  display:grid !important; place-items:center;
  background:linear-gradient(135deg,var(--rosa),var(--rosa-fuerte)) !important;
  box-shadow:0 6px 14px -4px rgba(240,68,138,.6) !important;
  animation:latir 1.5s ease-in-out infinite;
}
.calendario__marcado svg{ width:60%; height:60%; fill:#fff; }

/* ══════════════ Cláusulas (escena 8) ══════════════ */
.clausulas{
  margin:26px 0 18px; padding:0; list-style:none;
  display:grid; gap:12px; text-align:left;
  counter-reset:c;
}
.clausulas li{
  counter-increment:c;
  position:relative;
  padding:15px 18px 15px 58px;
  border-radius:var(--r-m);
  background:var(--glass-fuerte);
  border:1px solid var(--borde);
  box-shadow:var(--sombra-s);
  font-size:.96rem; color:var(--tinta-sua);
  transition:transform .35s var(--brinco), box-shadow .35s;
}
.clausulas li::before{
  content:counter(c);
  position:absolute; left:15px; top:14px;
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--rosa),var(--rosa-fuerte));
  color:#fff; font-weight:700; font-size:.85rem;
  box-shadow:0 5px 12px -3px rgba(240,68,138,.6);
}
.clausulas li span{ display:block; font-weight:700; color:var(--tinta); }
.clausulas li:hover{ transform:translateX(6px); box-shadow:var(--sombra-m); }

.firma{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 0 6px;
  font-family:var(--display); font-style:italic;
  color:var(--tinta-sua);
}
.firma strong{ color:var(--rosa-texto); font-style:normal; }
.firma__pata{ width:24px; height:24px; fill:var(--rosa); transform:rotate(-16deg); }

/* ══════════════ La animación del beso ══════════════ */
.beso{
  overflow:hidden;
  margin:22px auto 10px;
  width:min(100%,460px);
  padding:14px;
  border-radius:var(--r-l);
  background:radial-gradient(120% 100% at 50% 20%, rgba(255,255,255,.8), rgba(255,236,244,.5));
  border:1px solid var(--borde);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:var(--sombra-m), inset 0 1px 0 rgba(255,255,255,.9);
}
.beso__svg{ width:100%; height:auto; display:block; }
.beso__pie{
  margin:6px 0 2px;
  font-family:var(--display); font-style:italic; font-size:.9rem;
  color:var(--tinta-sua);
}
.beso__mua{
  margin:0 .4em;
  color:var(--rosa-texto); font-weight:600;
  animation:latir 1.6s ease-in-out infinite;
  display:inline-block;
}

/* — el cachorro se acerca y besa — */
.b-motas{
  transform-box:fill-box; transform-origin:75% 90%;
  animation:motasAcerca 5.2s var(--suave) infinite;
}
@keyframes motasAcerca{
  0%,10%   { transform:translateX(0) rotate(0deg); }
  32%      { transform:translateX(30px) rotate(5deg); }
  44%,58%  { transform:translateX(38px) rotate(7deg); }
  76%      { transform:translateX(4px) rotate(-1deg); }
  88%,100% { transform:translateX(0) rotate(0deg); }
}
.b-cabeza{
  transform-box:fill-box; transform-origin:30% 80%;
  animation:cabezaLadea 5.2s var(--suave) infinite;
}
@keyframes cabezaLadea{
  0%,12%  { transform:rotate(0deg); }
  40%,60% { transform:rotate(9deg) translateY(4px); }
  85%,100%{ transform:rotate(0deg); }
}
.b-oreja{
  transform-box:fill-box; transform-origin:top right;
  animation:orejaVuela 5.2s var(--suave) infinite;
}
@keyframes orejaVuela{
  0%,20%  { transform:rotate(0deg); }
  36%     { transform:rotate(-12deg); }
  52%     { transform:rotate(6deg); }
  70%,100%{ transform:rotate(0deg); }
}
.b-cola{
  transform-box:fill-box; transform-origin:bottom right;
  animation:colaMenea .42s ease-in-out infinite alternate;
}
@keyframes colaMenea{
  from{ transform:rotate(-16deg); } to{ transform:rotate(20deg); }
}

/* — el pollito se apena — */
.b-pollo{
  transform-box:fill-box; transform-origin:bottom center;
  animation:polloApena 5.2s var(--suave) infinite;
}
@keyframes polloApena{
  0%,26%   { transform:translateX(0) rotate(0deg); }
  46%,62%  { transform:translateX(9px) rotate(4deg); }
  80%,100% { transform:translateX(0) rotate(0deg); }
}
.b-mono{
  transform-box:fill-box; transform-origin:center bottom;
  animation:monoTiembla 1.9s ease-in-out infinite;
}
@keyframes monoTiembla{
  0%,100%{ transform:rotate(-7deg) scale(1); }
  50%    { transform:rotate(7deg) scale(1.06); }
}
.b-ala{
  transform-box:fill-box; transform-origin:top center;
  animation:alaAletea 5.2s var(--suave) infinite;
}
@keyframes alaAletea{
  0%,38%  { transform:rotate(0deg); }
  48%     { transform:rotate(26deg) translateX(4px); }
  58%     { transform:rotate(6deg); }
  70%,100%{ transform:rotate(0deg); }
}
.b-rubor{ opacity:0; animation:ruborizar 5.2s var(--suave) infinite; }
@keyframes ruborizar{
  0%,30%  { opacity:0; }
  46%,72% { opacity:1; }
  88%,100%{ opacity:.25; }
}
/* el cachorro cierra los ojos al acercarse a besar y los vuelve a abrir */
.b-ojos-perro-abre{ animation:perroAbre 5.2s steps(1,end) infinite; }
.b-ojos-perro-cierra{ opacity:0; animation:perroCierra 5.2s steps(1,end) infinite; }
@keyframes perroAbre{ 0%,26%{opacity:1;} 27%,80%{opacity:0;} 81%,100%{opacity:1;} }
@keyframes perroCierra{ 0%,26%{opacity:0;} 27%,80%{opacity:1;} 81%,100%{opacity:0;} }

.b-ojos-abiertos{ animation:ojosAbre 5.2s steps(1,end) infinite; }
.b-ojos-felices{ opacity:0; animation:ojosCierra 5.2s steps(1,end) infinite; }
@keyframes ojosAbre{ 0%,40%{opacity:1;} 41%,74%{opacity:0;} 75%,100%{opacity:1;} }
@keyframes ojosCierra{ 0%,40%{opacity:0;} 41%,74%{opacity:1;} 75%,100%{opacity:0;} }

/* — corazones y destellos — */
.b-hc{
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:corazonSube 5.2s var(--suave) infinite;
}
.b-hc--2{ animation-delay:.24s; }
.b-hc--3{ animation-delay:.46s; }
@keyframes corazonSube{
  0%,42%  { opacity:0; transform:translateY(10px) scale(.3); }
  50%     { opacity:1; transform:translateY(-6px) scale(1.15); }
  62%     { opacity:.95; transform:translateY(-32px) scale(1) rotate(-9deg); }
  78%     { opacity:0; transform:translateY(-72px) scale(.75) rotate(10deg); }
  100%    { opacity:0; transform:translateY(-72px) scale(.75); }
}
.b-br{
  transform-box:fill-box; transform-origin:center;
  animation:destellar 2.4s ease-in-out infinite;
}
.b-br--2{ animation-delay:.7s; }
.b-br--3{ animation-delay:1.3s; }
@keyframes destellar{
  0%,100%{ opacity:.15; transform:scale(.6) rotate(0deg); }
  50%    { opacity:.95; transform:scale(1.15) rotate(35deg); }
}

/* ══════════════ La animación del avión (escena 9) ══════════════ */
.avion{
  margin:18px auto 18px;
  width:min(100%,480px);
  padding:10px 10px 4px;
  border-radius:var(--r-l);
  background:linear-gradient(180deg, rgba(224,244,255,.72), rgba(255,240,247,.6));
  border:1px solid var(--borde);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:var(--sombra-m), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.avion__svg{ width:100%; height:auto; display:block; }
.avion__pie{
  margin:2px 0 6px;
  font-family:var(--display); font-style:italic; font-size:.86rem;
  color:var(--tinta-sua);
}
.avion__pie span{ color:var(--rosa-texto); }

/* nubes que pasan */
.v-nube{ animation:nubePasa linear infinite; will-change:transform; }
.v-nube--1{ animation-duration:19s; }
.v-nube--2{ animation-duration:26s; animation-delay:-9s; }
.v-nube--3{ animation-duration:15s; animation-delay:-5s; }
@keyframes nubePasa{
  from{ transform:translateX(520px); }
  to  { transform:translateX(-70px); }
}

/* el avión respira un poquito */
.v-avion{
  transform-box:fill-box; transform-origin:center;
  animation:avionFlota 4.2s ease-in-out infinite;
}
@keyframes avionFlota{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-4px) rotate(-.5deg); }
}

/* Motas sube las escaleras */
.v-perro{ animation:abordar 8s ease-in-out infinite; will-change:transform,opacity; }
@keyframes abordar{
  0%   { transform:translate(0,0);      opacity:0; }
  4%   { transform:translate(3px,-3px); opacity:1; }
  16%  { transform:translate(16px,-16px); }
  28%  { transform:translate(32px,-31px); }
  40%  { transform:translate(48px,-46px); }
  52%  { transform:translate(62px,-60px); }
  60%  { transform:translate(74px,-70px); opacity:1; }
  72%  { transform:translate(74px,-70px); opacity:1; }
  80%  { transform:translate(92px,-70px); opacity:1; }
  86%  { transform:translate(104px,-70px); opacity:0; }
  99%  { transform:translate(0,0);      opacity:0; }
  100% { transform:translate(0,0);      opacity:0; }
}
/* el brinquito de caminar (se calma cuando saluda) */
.v-brinco{
  transform-box:fill-box; transform-origin:bottom center;
  animation:pasitos 8s linear infinite;
}
@keyframes pasitos{
  0%,58%   { transform:translateY(0) rotate(0deg); }
  2%,10%,18%,26%,34%,42%,50%{ transform:translateY(-3px) rotate(-2deg); }
  6%,14%,22%,30%,38%,46%,54%{ transform:translateY(0) rotate(2deg); }
  60%,100% { transform:translateY(0) rotate(0deg); }
}
.v-cola{
  transform-box:fill-box; transform-origin:bottom right;
  animation:colita .34s ease-in-out infinite alternate;
}
@keyframes colita{ from{ transform:rotate(-18deg); } to{ transform:rotate(22deg); } }

.v-cabeza{
  transform-box:fill-box; transform-origin:30% 90%;
  animation:volteaCabeza 8s ease-in-out infinite;
}
@keyframes volteaCabeza{
  0%,58%  { transform:rotate(0deg); }
  64%,72% { transform:rotate(-12deg); }
  78%,100%{ transform:rotate(0deg); }
}
/* la patita del adiós */
.v-saludo{
  opacity:0;
  transform-box:fill-box; transform-origin:bottom center;
  animation:adiosPata 8s ease-in-out infinite;
}
@keyframes adiosPata{
  0%,59%  { opacity:0; transform:rotate(0deg) scale(.5); }
  62%     { opacity:1; transform:rotate(-22deg) scale(1); }
  66%     { opacity:1; transform:rotate(22deg) scale(1); }
  69%     { opacity:1; transform:rotate(-18deg) scale(1); }
  72%     { opacity:1; transform:rotate(16deg) scale(1); }
  76%,100%{ opacity:0; transform:rotate(0deg) scale(.5); }
}
.v-adios{
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:adiosCorazon 8s ease-out infinite;
}
@keyframes adiosCorazon{
  0%,60%  { opacity:0; transform:translateY(8px) scale(.4); }
  66%     { opacity:1; transform:translateY(-4px) scale(1.1); }
  74%     { opacity:0; transform:translateY(-26px) scale(.8); }
  100%    { opacity:0; transform:translateY(-26px) scale(.8); }
}
.v-maleta{
  transform-box:fill-box; transform-origin:center;
  animation:maletita .34s ease-in-out infinite alternate;
}
@keyframes maletita{ from{ transform:rotate(-4deg); } to{ transform:rotate(4deg); } }

/* el corazón que sale por la ventanilla cuando ya subió */
.v-corazon{
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:ventanilla 8s ease-out infinite;
}
@keyframes ventanilla{
  0%,86%  { opacity:0; transform:translateY(14px) scale(.4); }
  90%     { opacity:1; transform:translateY(0) scale(1.15); }
  98%     { opacity:0; transform:translateY(-24px) scale(.85) rotate(12deg); }
  100%    { opacity:0; transform:translateY(-24px) scale(.85); }
}

/* ══════════════ Botón "ver la propuesta completa" ══════════════ */
.btn--plan{
  display:flex; align-items:center; gap:14px;
  width:min(100%,460px); margin:22px auto 10px;
  padding:16px 24px; min-height:64px;
  text-align:left; white-space:normal;
  border-radius:var(--r-l);
  color:var(--tinta);
  background:var(--glass-fuerte);
  border:1px solid var(--borde);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:var(--sombra-m), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn--plan svg{ width:28px; height:28px; flex:none; color:var(--rosa-texto); }
.btn__doble{ display:grid; gap:2px; }
.btn__doble strong{ font-size:1rem; font-weight:700; line-height:1.25; }
.btn__doble em{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:.92rem; color:var(--tinta-sua);
}
.btn--plan:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:var(--sombra-l), inset 0 1px 0 rgba(255,255,255,.9);
  border-color:var(--rosa);
}

/* ══════════════ Visor del plan (documento aparte, en iframe) ══════════════ */
.visor{
  position:fixed; inset:0; z-index:90;
  display:grid; grid-template-rows:auto 1fr;
  background:rgba(78,43,57,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:visorEntra .38s var(--suave) both;
}
.visor[hidden]{ display:none; }
@keyframes visorEntra{
  from{ opacity:0; }
  to  { opacity:1; }
}

.visor__barra{
  display:flex; align-items:center; gap:12px;
  padding:10px clamp(12px,3vw,20px);
  padding-top:max(10px,env(safe-area-inset-top));
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,244,249,.88));
  border-bottom:1px solid var(--borde);
  box-shadow:0 6px 20px -10px rgba(180,70,120,.5);
}
.visor__titulo{
  display:flex; align-items:center; gap:9px;
  margin:0; flex:1; min-width:0;
  font-family:var(--display); font-weight:600;
  font-size:1.02rem; color:var(--tinta);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.visor__titulo svg{ width:21px; height:21px; flex:none; color:var(--rosa-texto); }

.visor__aparte{
  flex:none; padding:10px 14px; min-height:44px;
  display:inline-flex; align-items:center;
  font-size:.84rem; font-weight:600;
  color:var(--rosa-texto); text-decoration:none;
  border-radius:999px; border:1px dashed rgba(206,33,104,.4);
}
.visor__aparte:hover{ background:rgba(255,214,230,.5); }

.visor__cerrar{
  flex:none; width:44px; height:44px;
  display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:50%;
  color:#fff; background:linear-gradient(135deg,#E13D82,#AD1450);
  box-shadow:0 8px 18px -6px rgba(240,68,138,.65);
  transition:transform .25s var(--brinco);
}
.visor__cerrar:hover{ transform:scale(1.08) rotate(90deg); }
.visor__cerrar svg{ width:20px; height:20px; }

.visor__marco{
  width:100%; height:100%;
  border:0; display:block;
  background:#F6F5F1;
  animation:marcoEntra .5s var(--suave) both;
}
@keyframes marcoEntra{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* mientras el visor está abierto, la carta de atrás no se mueve */
body.visor-abierto{ overflow:hidden; }

@media (max-width:640px){
  .btn--plan{ width:100%; padding:14px 18px; gap:11px; }
  .btn__doble strong{ font-size:.97rem; }
  .btn__doble em{ font-size:.87rem; }
  .btn--plan svg{ width:25px; height:25px; }
  .visor__barra{ gap:8px; padding:8px 10px; padding-top:max(8px,env(safe-area-inset-top)); }
  .visor__titulo{ font-size:.94rem; }
  .visor__aparte{ padding:10px 11px; font-size:.78rem; }
}
@media (max-width:340px){
  .visor__aparte{ display:none; }   /* solo en pantallas muy angostas gana el título */
}

/* ══════════════ Aviso flotante (los chistes del "No") ══════════════ */
.aviso{
  position:fixed; z-index:80;
  left:50%; bottom:max(24px,env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  max-width:min(90vw,440px);
  padding:14px 24px;
  border-radius:999px;
  background:var(--glass-fuerte);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--borde);
  box-shadow:var(--sombra-l);
  font-size:.95rem; font-weight:600; text-align:center; color:var(--tinta);
  opacity:0; pointer-events:none;
  transition:transform .5s var(--brinco), opacity .4s;
}
.aviso.visible{ transform:translate(-50%,0); opacity:1; }

/* ══════════════ Confeti ══════════════ */
.confeti{ position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden; }
.confeti svg{
  position:absolute; will-change:transform,opacity;
  animation:confetear var(--dur,1.5s) cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes confetear{
  0%  { opacity:1; transform:translate(0,0) rotate(0deg) scale(.4); }
  100%{ opacity:0; transform:translate(var(--dx,0),var(--dy,-160px)) rotate(var(--rot,220deg)) scale(1.1); }
}

/* ══════════════ Pie ══════════════ */
.pie{
  padding:22px 16px max(28px,env(safe-area-inset-bottom));
  text-align:center; font-size:.84rem; color:var(--tinta-sua);
}
.pie p{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center; margin:0; }
.pie__ico{ width:18px; height:18px; fill:var(--rosa); }
.pie__ico--pollo{ width:22px; height:22px; fill:none; }

/* ══════════════ Accesibilidad: menos movimiento ══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* deja el beso congelado justo en el momento bonito */
  .b-motas{ transform:translateX(38px) rotate(7deg); }
  .b-cabeza{ transform:rotate(9deg) translateY(4px); }
  .b-pollo{ transform:translateX(9px) rotate(4deg); }
  .b-rubor{ opacity:1; }
  .b-ojos-abiertos{ opacity:0; }
  .b-ojos-felices{ opacity:1; }
  .b-ojos-perro-abre{ opacity:0; }
  .b-ojos-perro-cierra{ opacity:1; }
  .b-hc{ opacity:1; }
  .v-perro{ transform:translate(74px,-70px); opacity:1; }
  .v-saludo{ opacity:1; }
  .v-adios{ opacity:1; transform:translateY(-4px); }
  .v-corazon{ opacity:1; }
  .blob{ opacity:.4; }
  .flotantes{ display:none; }
}

/* ══════════════════════════════════════════════════════════
   Móvil primero de verdad: el 99% lo va a leer en el celular
   ══════════════════════════════════════════════════════════ */
@media (max-width:640px){
  body{ line-height:1.6; }

  .escenario{ padding:10px 12px 28px; }
  .escena{ min-height:calc(100svh - 130px); padding:4px 0; }

  .tarjeta{
    width:100%;
    padding:24px 20px 28px;
    border-radius:30px;
  }
  .tarjeta--duo{ gap:18px; }

  .barra{ padding:8px 10px; padding-top:max(8px,env(safe-area-inset-top)); gap:8px; }
  .barra__glass{ padding:7px 12px; gap:8px; justify-content:center; }
  .barra__etiqueta{ display:none; }
  .huellas{ gap:4px; }
  .huellas svg{ width:16px; height:16px; }
  .sonido{ width:44px; height:44px; }

  .susurro{ font-size:.74rem; letter-spacing:.1em; margin-bottom:8px; }
  .titular{ margin-bottom:14px; }
  .parrafo{ font-size:1rem; }
  .parrafo.chiste{ font-size:.94rem; }

  /* fotos: cuadradas para que la tarjeta no se estire */
  .retrato img{ aspect-ratio:1/1; border-width:4px; border-radius:26px; }
  .retrato figcaption{ font-size:.8rem; margin-top:9px; }
  .polaroid--sola{ width:min(200px,70%); padding:9px 9px 32px; }
  .polaroid--sola img{ aspect-ratio:1/1; }

  .galeria{
    grid-template-columns:repeat(3,1fr);
    gap:9px; margin:20px 0 16px;
  }
  .galeria .polaroid{ padding:6px 6px 24px; border-radius:6px; }
  .galeria .polaroid figcaption{ bottom:5px; font-size:.72rem; }

  .corazon-grande svg{ width:60px; height:60px; }
  .mascota__svg{ width:96px; }

  /* botones: dedo gordo bienvenido */
  .pregunta{ margin-top:20px; padding-top:16px; }
  .botones{ gap:10px; min-height:58px; }
  .btn{ min-height:50px; padding:13px 26px; font-size:1.12rem; }
  .btn--wa{ width:100%; padding:17px 20px; font-size:1.1rem; }
  .btn--wa svg{ width:23px; height:23px; }

  .clausulas li{ padding:13px 15px 13px 50px; font-size:.95rem; }
  .clausulas li::before{ left:12px; top:12px; width:27px; height:27px; font-size:.8rem; }
  .clausulas li:hover{ transform:none; }

  .sobre-zona{ gap:14px; margin:18px 0 8px; }
  .sobre{ width:min(210px,72%); }
  .sobre__carta{ padding:16px 18px; }

  .calendario{ width:min(260px,92%); padding:13px; }
  .beso{ padding:8px; border-radius:26px; }
  .avion{ padding:8px 8px 2px; border-radius:26px; margin:14px auto; }
  .avion__pie{ font-size:.84rem; }

  .aviso{ font-size:.88rem; padding:12px 18px; bottom:max(16px,env(safe-area-inset-bottom)); }
}

/* pantallas muy angostas (iPhone SE y compañía) */
@media (max-width:380px){
  .tarjeta{ padding:20px 15px 24px; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .btn{ padding:12px 20px; font-size:.95rem; }
}