/* ══════════════════════════════════════════════════════════
   INVITACIÓN 06 · BABY SHOWER — "Nube"
   Tierno y contemporáneo: durazno, mantequilla, salvia y cielo.
   Formas orgánicas (blobs), olas y nubes flotantes.
   Tipografías: Fredoka · Quicksand
══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#FFF8F0;
  --peach:#F6C9B4;
  --peach-2:#EFA88A;
  --butter:#F7E7B4;
  --sage:#B9CDB5;
  --sky:#C5DCEB;
  --cocoa:#5B4A42;
  --soft:#8E7E75;
  --round:'Fredoka',system-ui,sans-serif;
  --body:'Quicksand',system-ui,sans-serif;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.25,.8,.25,1);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--cocoa);font:500 17px/1.7 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--butter)}
:focus-visible{outline:3px solid var(--peach-2);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.wrap--narrow{max-width:720px}
main,footer{position:relative;z-index:1}
section{position:relative;padding:clamp(4.5rem,11vw,7.5rem) 0;scroll-margin-top:70px}

/* Nubes flotantes de fondo */
.clouds{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.clouds i{position:absolute;width:160px;height:56px;border-radius:999px;background:#fff;opacity:.75;filter:blur(1px);animation:drift 50s linear infinite}
.clouds i::before,.clouds i::after{content:'';position:absolute;background:#fff;border-radius:50%}
.clouds i::before{width:70px;height:70px;left:24px;top:-34px}
.clouds i::after{width:54px;height:54px;left:80px;top:-22px}
.clouds i:nth-child(1){top:12%;animation-duration:70s;animation-delay:-10s}
.clouds i:nth-child(2){top:38%;transform:scale(.7);animation-duration:55s;animation-delay:-30s}
.clouds i:nth-child(3){top:62%;animation-duration:80s;animation-delay:-50s}
.clouds i:nth-child(4){top:82%;transform:scale(.6);animation-duration:60s;animation-delay:-5s}
.clouds i:nth-child(5){top:24%;transform:scale(.5);animation-duration:65s;animation-delay:-40s}
@keyframes drift{from{left:-200px}to{left:110%}}

.title{font:600 clamp(2.1rem,5.2vw,3.4rem)/1.1 var(--round);color:var(--cocoa);margin-bottom:1.2rem}
.title span{color:var(--peach-2)}
.title--center{text-align:center}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:.75rem 1.6rem;border-radius:999px;border:2px solid var(--cocoa);background:#fff;color:var(--cocoa);font:600 .95rem var(--round);text-decoration:none;cursor:pointer;transition:transform .35s var(--bounce),box-shadow .35s,background .3s,color .3s}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 20px -10px rgba(91,74,66,.5)}
.btn:active{transform:scale(.97)}
.btn--fill{background:var(--peach-2);border-color:var(--peach-2);color:#fff}
.btn--fill:hover{background:var(--cocoa);border-color:var(--cocoa)}
.btn--ghost{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.btn--ghost:hover{box-shadow:none;background:rgba(255,255,255,.6)}
.btn--block{width:100%}
.btn.is-copied{background:var(--sage);border-color:var(--sage)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.inv-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Cabecera ── */
.top{position:fixed;top:.8rem;left:50%;transform:translateX(-50%);z-index:100;width:min(1100px,calc(100% - 1.6rem));display:flex;align-items:center;gap:1rem;padding:.4rem .5rem .4rem 1.2rem;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px -18px rgba(91,74,66,.45)}
.top__logo{font:600 1.1rem var(--round);text-decoration:none;white-space:nowrap}
.top__logo span{color:var(--sky);font-size:1.3rem;margin-right:.2rem;text-shadow:0 0 1px var(--cocoa)}
.top__nav{display:flex;gap:.2rem;margin-left:auto}
.top__nav a{font:600 .9rem var(--round);text-decoration:none;padding:.5rem .9rem;border-radius:999px;transition:background .3s}
.top__nav a:hover{background:var(--butter)}
.top__nav a.is-active{background:var(--peach)}
.top__music,.top__burger{width:44px;height:44px;border-radius:50%;border:0;background:var(--butter);display:grid;place-items:center;cursor:pointer;color:var(--cocoa);flex-shrink:0;transition:transform .3s var(--bounce)}
.top__music svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.top__music:hover{transform:rotate(-10deg) scale(1.1)}
.top__music.is-playing{background:var(--peach-2);color:#fff;animation:wiggle 1.2s ease-in-out infinite}
@keyframes wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.top__burger{display:none;background:var(--peach)}
.top__burger span:first-child{width:18px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}

/* ══════════ HERO ══════════ */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;max-width:1180px;margin:0 auto;padding:7rem clamp(1.25rem,5vw,3rem) 6rem;overflow-x:clip}
.hero__eyebrow{font:600 .85rem var(--round);color:var(--peach-2);letter-spacing:.08em;text-transform:uppercase;animation:pop .8s var(--bounce) .1s both}
.hero__title{font:600 clamp(3.2rem,8vw,6rem)/1 var(--round);margin:.6rem 0 1rem;animation:pop .9s var(--bounce) .25s both}
.hero__title span{color:var(--peach-2);display:inline-block;position:relative}
.hero__title span::after{content:'';position:absolute;left:0;right:0;bottom:.08em;height:.18em;background:var(--butter);z-index:-1;border-radius:999px}
.hero__invite{font:500 1.3rem var(--round);animation:pop .9s var(--bounce) .4s both}
.hero__invite b{color:var(--peach-2)}
.hero__phrase{color:var(--soft);max-width:42ch;margin:.6rem 0 1.8rem;animation:pop .9s var(--bounce) .5s both}
.hero__date{display:inline-flex;align-items:center;gap:1rem;padding:.6rem 1.4rem .6rem .6rem;border-radius:999px;background:#fff;box-shadow:0 14px 30px -18px rgba(91,74,66,.5);animation:pop .9s var(--bounce) .6s both}
.hero__date-chip{background:var(--sage);border-radius:999px;padding:.5rem 1rem;font:600 .85rem var(--round)}
.hero__date b{font:600 2.6rem/1 var(--round);color:var(--peach-2)}
.hero__date span:last-child{font:600 .9rem/1.2 var(--round)}
.hero__visual{position:relative;display:grid;place-items:center;animation:pop 1.1s var(--bounce) .3s both}
.blob{position:absolute;border-radius:42% 58% 63% 37%/45% 41% 59% 55%;animation:morph 12s ease-in-out infinite}
.blob--a{width:95%;aspect-ratio:1;background:var(--peach);opacity:.75}
.blob--b{width:55%;aspect-ratio:1;background:var(--sky);right:-4%;top:-6%;animation-duration:9s;animation-direction:reverse}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37%/45% 41% 59% 55%;transform:rotate(0)}33%{border-radius:61% 39% 44% 56%/56% 61% 39% 44%}66%{border-radius:38% 62% 49% 51%/37% 47% 53% 63%;transform:rotate(10deg)}}
.hero__photo{position:relative;width:min(78%,380px);aspect-ratio:4/5;border-radius:48% 52% 45% 55%/40% 40% 60% 60%;overflow:hidden;border:8px solid #fff;box-shadow:0 30px 60px -30px rgba(91,74,66,.6)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero__badge{position:absolute;left:4%;bottom:12%;background:var(--butter);border-radius:999px;padding:.6rem 1.2rem;font:600 1.1rem var(--round);box-shadow:0 10px 20px -10px rgba(91,74,66,.5);transform:rotate(-8deg);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(-4deg) translateY(-8px)}}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:60px;fill:#fff}

/* ══════════ PAPÁS ══════════ */
.papas{background:#fff}
.papas__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.papas__photo{border-radius:999px 999px 40px 40px;overflow:hidden;aspect-ratio:3/4;border:8px solid var(--butter)}
.papas__photo img{width:100%;height:100%;object-fit:cover}
.papas__intro{color:var(--soft);margin-bottom:1.6rem}
.pill-cards{display:flex;flex-direction:column;gap:.9rem}
.pill-card{border-radius:28px;padding:1.2rem 1.6rem;transition:transform .4s var(--bounce)}
.pill-card:hover{transform:translateX(8px) rotate(-1deg)}
.pill-card--peach{background:var(--peach)}
.pill-card--sage{background:var(--sage)}
.pill-card span{display:block;font:600 .8rem var(--round);text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.pill-card b{font:600 1.35rem var(--round)}
.papas__cierre{margin-top:1.6rem;font:500 1.1rem var(--round);color:var(--peach-2)}

/* ══════════ FRASE ══════════ */
.quote{text-align:center;background:linear-gradient(180deg,#fff,var(--cream))}
.quote__icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--peach);color:#fff;font-size:2rem;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
.quote blockquote{font:600 clamp(1.7rem,4.4vw,2.8rem)/1.25 var(--round);margin:1.4rem 0 1.2rem}
.quote p{color:var(--soft);max-width:52ch;margin:0 auto}

/* ══════════ EL DÍA ══════════ */
.dia__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,2.5rem);margin-top:2rem}
.bubble{position:relative;background:#fff;border-radius:40px;padding:1rem 1rem 2rem;text-align:center;box-shadow:0 30px 60px -40px rgba(91,74,66,.55);transition:transform .45s var(--bounce)}
.bubble:hover{transform:translateY(-8px) rotate(-.5deg)}
.bubble__img{border-radius:30px;overflow:hidden;aspect-ratio:16/10}
.bubble__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bubble:hover .bubble__img img{transform:scale(1.06)}
.bubble__time{display:inline-block;margin-top:-1.6rem;position:relative;background:var(--butter);border:4px solid #fff;border-radius:999px;padding:.4rem 1.2rem;font:600 1.3rem var(--round)}
.bubble--b .bubble__time{background:var(--sky)}
.bubble__label{margin-top:.8rem;font:600 .82rem var(--round);text-transform:uppercase;letter-spacing:.08em;color:var(--peach-2)}
.bubble__place{font:600 1.6rem/1.2 var(--round);margin:.3rem 0}
.bubble__addr{color:var(--soft);margin-bottom:1.2rem}
.note{text-align:center;margin:2.4rem auto 0;max-width:620px;padding:.9rem 1.4rem;border-radius:999px;background:var(--butter)}
.note strong{color:var(--peach-2)}
.cal{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* ══════════ GALERÍA 1 · BLOBS ══════════ */
.espera{background:#fff}
.blobs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2rem);align-items:center;margin-top:2rem}
.blob-photo{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;cursor:zoom-in;border:6px solid var(--cream);transition:transform .5s var(--bounce),border-radius 1s var(--ease)}
.blob-photo--1{border-radius:62% 38% 46% 54%/52% 44% 56% 48%}
.blob-photo--2{border-radius:44% 56% 39% 61%/57% 39% 61% 43%;transform:translateY(-1.5rem)}
.blob-photo--3{border-radius:51% 49% 63% 37%/38% 59% 41% 62%}
.blob-photo:hover{border-radius:24px;transform:scale(1.03)}
.blob-photo img{width:100%;height:100%;object-fit:cover}
.blob-photo span{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);white-space:nowrap;background:#fff;border-radius:999px;padding:.3rem .9rem;font:600 .85rem var(--round)}

/* ══════════ CUENTA ══════════ */
.cuenta{text-align:center}
.cuenta__row{display:flex;justify-content:center;gap:clamp(.6rem,3vw,1.6rem);flex-wrap:wrap;margin-top:1rem}
.dot{width:clamp(110px,16vw,140px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:bob 4s ease-in-out infinite}
.dot:nth-child(2){animation-delay:-1s}
.dot:nth-child(3){animation-delay:-2s}
.dot:nth-child(4){animation-delay:-3s}
.dot--peach{background:var(--peach)}
.dot--butter{background:var(--butter)}
.dot--sage{background:var(--sage)}
.dot--sky{background:var(--sky)}
.dot b{font:600 clamp(2rem,5vw,2.8rem)/1 var(--round);font-variant-numeric:tabular-nums}
.dot b.is-tick{animation:pop .5s var(--bounce)}
.dot span{font:600 .8rem var(--round)}
.cuenta__sub{margin-top:1.8rem;color:var(--soft)}

/* ══════════ RASCA ══════════ */
.nombre{text-align:center;background:linear-gradient(180deg,var(--cream),#fff)}
.nombre__hint{color:var(--soft);margin-bottom:1.6rem}
.scratch{position:relative;width:min(100%,420px);aspect-ratio:3/2;margin:0 auto 1rem;border-radius:32px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(91,74,66,.55)}
.scratch__under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#FFE3EA,var(--peach))}
.scratch__under span{font:600 1rem var(--round);text-transform:uppercase;letter-spacing:.1em}
.scratch__under b{font:600 clamp(3.4rem,10vw,4.8rem)/1 var(--round);color:#fff;text-shadow:0 4px 0 var(--peach-2)}
.scratch__under small{font-style:italic;margin-top:.4rem}
.scratch__canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none;transition:opacity .8s}
.scratch.is-done .scratch__canvas{opacity:0;pointer-events:none}
.scratch.is-done .scratch__under b{animation:pop .8s var(--bounce)}

/* ══════════ CARRUSEL SUAVE ══════════ */
.favs{overflow:hidden}
.soft-car__track{gap:1.2rem;padding:1.5rem max(1.25rem,calc(50vw - 520px))}
.soft-car__slide{height:clamp(280px,40vw,420px);border-radius:36px;overflow:hidden;display:block;cursor:zoom-in;border:6px solid #fff;box-shadow:0 20px 40px -26px rgba(91,74,66,.55);transition:transform .5s var(--bounce)}
.soft-car__slide.is-active{transform:rotate(-1.5deg) scale(1.02)}
.soft-car__slide img{height:100%;width:auto;max-width:none;object-fit:cover}
.soft-car__ui{display:flex;justify-content:center;align-items:center;gap:1rem}
.soft-car__ui>button{width:48px;height:48px;border-radius:50%;border:0;background:var(--peach);font:600 1.6rem var(--round);color:var(--cocoa);cursor:pointer;transition:transform .3s var(--bounce)}
.soft-car__ui>button:hover{transform:scale(1.12)}
.soft-car__dots{display:flex;gap:.2rem}
.soft-car__dots button{width:26px;height:26px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.soft-car__dots button::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--sage);transition:width .3s var(--bounce),background .3s}
.soft-car__dots button.is-active::after{width:22px;border-radius:999px;background:var(--peach-2)}

/* ══════════ REGALOS ══════════ */
.regalos{background:#fff}
.regalos__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.regalos__grid>div p{color:var(--soft)}
.regalos__love{margin-top:1rem;font:600 1.1rem var(--round);color:var(--peach-2)!important}
.checklist{list-style:none;display:grid;gap:.6rem}
.checklist label{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:.6rem 1.2rem;border-radius:999px;background:var(--cream);cursor:pointer;transition:background .3s,transform .3s var(--bounce)}
.checklist label:hover{transform:translateX(6px)}
.checklist input{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--peach-2);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .3s}
.checklist input::after{content:'✓';color:#fff;font-weight:700;transform:scale(0);transition:transform .3s var(--bounce)}
.checklist input:checked{background:var(--peach-2)}
.checklist input:checked::after{transform:scale(1)}
.checklist input:checked+span{text-decoration:line-through;opacity:.6}
.checklist span{font:600 1rem var(--round)}

/* ══════════ QUINIELA ══════════ */
.quiniela{text-align:center}
.quiniela__hint{color:var(--soft);margin-bottom:1.6rem}
.guess{display:grid;grid-template-columns:1.2fr 1fr .7fr auto;gap:.6rem;align-items:end;text-align:left;background:#fff;padding:1rem;border-radius:28px;box-shadow:0 20px 40px -28px rgba(91,74,66,.5)}
.guess label span{display:block;font:600 .75rem var(--round);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .3rem .6rem;color:var(--soft)}
.guess input{width:100%;min-height:48px;border-radius:999px;border:2px solid var(--cream);background:var(--cream);padding:.5rem 1rem;font:600 1rem var(--body);color:var(--cocoa);outline:none}
.guess input:focus{border-color:var(--peach)}
.guess__list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem}
.guess__list li{background:var(--sky);border-radius:999px;padding:.4rem 1rem;font:600 .9rem var(--round);animation:pop .5s var(--bounce)}

/* ══════════ RSVP ══════════ */
.rsvp{background:linear-gradient(180deg,var(--cream),var(--peach))}
.rsvp__card{background:#fff;border-radius:40px;padding:clamp(2rem,6vw,3.4rem);box-shadow:0 40px 80px -40px rgba(91,74,66,.55)}
.rsvp__sub{text-align:center;color:var(--soft);margin:-.4rem 0 1.8rem}
.field{margin-bottom:1.4rem;border:0}
.field>label,.field legend{display:block;font:600 .85rem var(--round);margin:0 0 .4rem .4rem}
.field small{font-weight:400;color:var(--soft)}
.field input[type=text],.field textarea{width:100%;border-radius:24px;border:2px solid var(--cream);background:var(--cream);padding:.85rem 1.2rem;font:500 1.05rem var(--body);color:var(--cocoa);outline:none;transition:border-color .3s,background .3s}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--peach);background:#fff}
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.yesno legend{grid-column:span 2}
.yesno label{cursor:pointer}
.yesno input{position:absolute;opacity:0}
.yesno span{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--cream);font:600 .95rem var(--round);transition:all .35s var(--bounce)}
.yesno input:checked+span{background:var(--sage);transform:scale(1.04)}
.yesno input:focus-visible+span{outline:3px solid var(--peach-2);outline-offset:2px}
.stepper{display:inline-flex;align-items:center;gap:.4rem;background:var(--cream);border-radius:999px;padding:.3rem}
.stepper button{width:44px;height:44px;border-radius:50%;border:0;background:#fff;font:600 1.4rem var(--round);color:var(--cocoa);cursor:pointer;transition:transform .3s var(--bounce),background .3s}
.stepper button:hover{background:var(--peach);transform:scale(1.1)}
.stepper input{width:3rem;text-align:center;border:0;background:none;font:600 1.4rem var(--round);color:var(--cocoa);-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none}
.stepper input:focus{outline:none}
.field--guests{transition:opacity .3s}
.form.is-declining .field--guests{opacity:.35;pointer-events:none}
.form__error{display:none;margin-top:1rem;text-align:center;color:#C0503A;font-weight:600}
.form__error.is-visible{display:block;animation:pop .4s var(--bounce)}

/* ══════════ PIE ══════════ */
.footer{background:var(--cocoa);color:var(--cream);text-align:center;padding:0 1.5rem 4rem}
.footer__wave{display:block;width:calc(100% + 3rem);margin:0 -1.5rem 3rem;height:60px;fill:var(--peach)}
.footer__name{font:600 clamp(2.2rem,6vw,3.4rem) var(--round)}
.footer__phrase{opacity:.8;margin:.6rem 0 1rem}
.footer__date{font:600 .85rem var(--round);letter-spacing:.24em;color:var(--peach);margin-bottom:2rem}
.footer__share{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}
.footer .btn:not(.btn--fill){background:transparent;color:var(--cream);border-color:var(--cream)}

/* ══════════ MODAL / LIGHTBOX / TOAST ══════════ */
.inv-modal{background:rgba(91,74,66,.55);backdrop-filter:blur(6px)}
.modal{background:#fff;border-radius:40px;max-width:400px;width:100%;padding:2.6rem 2rem 2.2rem;text-align:center;transform:scale(.6);transition:transform .6s var(--bounce)}
.inv-modal.is-open .modal{transform:none}
.modal__icon{display:inline-grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--butter);font-size:2.4rem;margin-bottom:.8rem}
.modal__title{font:600 1.9rem var(--round);margin-bottom:.6rem}
.modal__text{color:var(--soft);margin-bottom:1rem}
.modal__note{font-size:.82rem;color:var(--peach-2);margin-bottom:1rem}
.inv-lb{background:rgba(255,248,240,.97)}
.inv-lb__img{border-radius:28px;border:6px solid #fff;box-shadow:0 30px 60px -30px rgba(91,74,66,.6)}
.inv-lb__btn{background:var(--peach);color:var(--cocoa);font-family:var(--round);font-weight:600}
.inv-lb__btn:hover{background:var(--peach-2);color:#fff}
.inv-lb__caption{font:600 1.1rem var(--round);color:var(--cocoa)}
.inv-lb__counter{color:var(--cocoa);font-family:var(--round)}
.inv-toast{background:var(--cocoa);font-family:var(--round)}

/* ══════════ REVEAL ══════════ */
.js [data-reveal]{opacity:0;transform:translateY(30px) scale(.96);transition:opacity .8s var(--ease),transform .9s var(--bounce)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js .blob-photo--2[data-reveal].is-visible{transform:translateY(-1.5rem)}
.js .blob-photo--2[data-reveal].is-visible:hover{transform:translateY(-1.5rem) scale(1.03)}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:900px){
  .top__burger{display:grid}
  .top__nav{position:absolute;top:calc(100% + .6rem);left:0;right:0;flex-direction:column;padding:.8rem;border-radius:28px;background:#fff;box-shadow:0 20px 40px -20px rgba(91,74,66,.5);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .35s var(--ease)}
  .top__nav.is-open{opacity:1;visibility:visible;transform:none}
  .top__nav a{font-size:1.1rem;padding:.8rem 1rem}
  .top__music{margin-left:auto}
  .hero{grid-template-columns:1fr;padding-top:6rem;text-align:center}
  .hero__visual{order:-1;max-width:420px;margin:0 auto;width:100%}
  .hero__phrase{margin-left:auto;margin-right:auto}
  .papas__grid,.dia__grid,.regalos__grid{grid-template-columns:1fr}
  .papas__photo{max-width:340px;margin:0 auto}
  .papas__grid>div{text-align:center}
  .blobs{grid-template-columns:1fr 1fr}
  .blob-photo--2{grid-column:span 2;order:-1;width:64%;margin:0 auto;transform:none}
  .js .blob-photo--2[data-reveal].is-visible{transform:none}
  .guess{grid-template-columns:1fr 1fr}
  .guess label:first-child,.guess button{grid-column:span 2}
}
@media (max-width:560px){
  body{font-size:16px}
  .top__logo{font-size:1rem}
  .dot{width:calc(50% - .6rem);max-width:140px}
  .yesno{grid-template-columns:1fr}
  .yesno legend{grid-column:auto}
  .guess{grid-template-columns:1fr}
  .guess label:first-child,.guess button{grid-column:auto}
  .inv-lb__prev,.inv-lb__next{top:auto;bottom:1.2rem;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .clouds{display:none}
}