/* ===================================================================
   AYNIMAL — Dra. Carmen Vílchez · Nutrición veterinaria
   DESIGN SYSTEM + LANDING · v2
   Newsreader (display) + Hanken Grotesk (texto) · Paleta oficial
   =================================================================== */

/* ============================ TOKENS ============================ */
:root{
  --petrol:#2c5f7f;
  --petrol-deep:#234d68;
  --petrol-ink:#152a38;
  --slate:#5b7a8f;
  --sky:#a8c5d8;
  --sage:#b8d4c8;
  --peach:#ff9f83;
  --peach-2:#ffb8a3;
  --peach-soft:#ffe6dc;

  --cream:#f5f1ed;
  --cream-2:#efe9e2;
  --cream-photo:#dccbc0;
  --white:#fcfaf7;
  --ink:#1f3240;
  --ink-soft:#45575f;
  --muted:#71828b;
  --line:rgba(44,95,127,.13);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --fs-display:clamp(2.5rem,4.5vw,4rem);
  --fs-h2:clamp(2rem,3.7vw,3.15rem);
  --fs-h3:clamp(1.3rem,1.9vw,1.65rem);
  --fs-lead:clamp(1.1rem,1.5vw,1.32rem);
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-kicker:.8rem;

  --container:1180px;
  --gutter:clamp(1.2rem,4vw,2.6rem);
  --section-y:clamp(4.5rem,9.5vw,8rem);

  --r-sm:12px;--r:20px;--r-lg:30px;--r-pill:999px;
  --shadow-sm:0 2px 12px -6px rgba(31,50,64,.22);
  --shadow:0 24px 50px -30px rgba(31,50,64,.42);
  --shadow-lg:0 40px 80px -36px rgba(44,95,127,.5);

  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ============================ BASE ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,picture,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.008em}
p{margin:0}
::selection{background:var(--peach);color:#fff}
:focus-visible{outline:2.5px solid var(--petrol);outline-offset:3px;border-radius:4px}

/* ============================ UTILIDADES ============================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--cream-2)}
.section--sky{background:linear-gradient(180deg,#eef4f7,#e6eef3)}
.section--dark{position:relative;background:var(--petrol-ink);color:#dbe4e9;overflow:hidden}
.section--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 15% 0%,rgba(90,140,170,.22),transparent 55%);pointer-events:none}
.section--dark>*{position:relative}
.section--dark h2,.section--dark h3{color:#fff}

.section-head{max-width:46rem;margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.section-head--center{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.1rem;
  font-size:var(--fs-kicker);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--petrol);
}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--peach);border-radius:2px}
.section-head--center .eyebrow{justify-content:center}
.section--dark .eyebrow{color:var(--peach-2)}

.section-title{font-size:var(--fs-h2);color:var(--ink);letter-spacing:-.02em}
.section-intro{margin-top:1.15rem;font-size:var(--fs-lead);line-height:1.5;color:var(--ink-soft);max-width:44ch}
.section-head--center .section-intro{margin-inline:auto}
.section--dark .section-intro{color:#c2d0d8}

/* palabra resaltada */
.mark{
  background:linear-gradient(transparent 64%,rgba(255,159,131,.40) 64%,rgba(255,159,131,.40) 92%,transparent 92%);
  padding:0 .02em;
}
.italic{font-style:italic}

/* iconos */
.ico{width:1.5em;height:1.5em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ============================ BOTONES ============================ */
.btn{
  --pad-y:.98em;--pad-x:1.6em;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;white-space:nowrap;
  padding:var(--pad-y) var(--pad-x);border-radius:var(--r-pill);cursor:pointer;border:1.5px solid transparent;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn--primary{background:var(--petrol);color:var(--white);box-shadow:0 1px 2px rgba(31,50,64,.2)}
.btn--primary:hover{background:var(--petrol-deep);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(44,95,127,.75)}
.btn--peach{background:var(--peach);color:#5a2416}
.btn--peach:hover{background:var(--peach-2);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(255,120,90,.6)}
.btn--ghost{background:transparent;border-color:rgba(44,95,127,.4);color:var(--petrol)}
.btn--ghost:hover{background:rgba(44,95,127,.08);border-color:var(--petrol)}
.btn--text{background:none;border:none;color:var(--petrol);font-weight:600;padding:.6em .2em}
.btn--text .ico{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
.btn--text:hover .ico{transform:translateX(4px)}
.btn--text__name{font-family:var(--serif);font-weight:600;font-style:italic}
.btn--lg{--pad-y:1.12em;--pad-x:2.1em;font-size:1.06rem}
.reassure{margin-top:.9rem;font-size:.82rem;color:var(--muted);display:inline-flex;align-items:center;gap:.45em}
.reassure .ico{width:1em;height:1em;stroke:var(--sage);stroke-width:2}

/* ============================ HEADER ============================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.85rem,1.8vw,1.3rem) var(--gutter);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.is-scrolled{background:rgba(250,246,241,.96);box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(31,50,64,.4)}
.brand{display:flex;flex-direction:column;line-height:1}
.brand__mark{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.3vw,1.9rem);color:var(--petrol);letter-spacing:-.01em}
.brand__by{font-size:.72rem;color:var(--slate);margin-top:.28rem;letter-spacing:.01em}
.site-nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.site-nav a:not(.btn){font-weight:500;font-size:.95rem;color:var(--ink);position:relative;padding:.2rem 0}
.site-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--peach);transition:right .3s var(--ease)}
.site-nav a:not(.btn):hover::after{right:0}

/* ============================ HERO ============================ */
.hero{position:relative;display:grid;min-height:min(94vh,900px);background:var(--cream-photo);overflow:hidden}
.hero>*{grid-area:1/1}
.hero__media{align-self:stretch;justify-self:stretch}
/* translateX corre a Carmen a la derecha para que el gato entre entero; revela crema (misma que el fondo) por la izquierda */
.hero__media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 58%;transform:translateX(14%)}
.hero__scrim{z-index:1;background:linear-gradient(100deg,var(--cream-photo) 0%,rgba(220,203,192,.92) 30%,rgba(220,203,192,.5) 48%,rgba(220,203,192,0) 64%)}
.hero__content{position:relative;z-index:2;align-self:center;justify-self:start;width:min(560px,100%);padding:clamp(6.5rem,12vh,9rem) var(--gutter) 2rem clamp(1.5rem,5vw,4.5rem)}
.hero__title{font-size:var(--fs-display);margin:0 0 1.5rem;color:var(--ink);letter-spacing:-.022em;line-height:1.05}
.hero__sub{margin:0 0 2.3rem;max-width:46ch;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft)}
.cta-row{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.5rem);flex-wrap:wrap}
.hero__reassure{margin:1.9rem 0 0}
.trust{margin:1.5rem 0 0;font-size:.84rem;line-height:1.5;color:var(--slate)}
.trust .pending{color:var(--muted);font-weight:500;padding:0 .12em}
.hero__pills{z-index:3;align-self:end;justify-self:end;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end;max-width:46%;padding:0 clamp(1.5rem,4vw,3.5rem) clamp(2rem,6vh,4rem)}
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.58em 1.05em;border-radius:var(--r-pill);background:rgba(252,250,247,.92);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-sm);font-size:.86rem;font-weight:600;color:var(--petrol)}
.pill .ico{width:1.05em;height:1.05em;stroke:var(--peach);stroke-width:2}
.pill:nth-child(2) .ico{stroke:var(--sage)}
.pill:nth-child(3) .ico{stroke:var(--slate)}

/* ============================ STATS ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(2rem,4vw,2.8rem)}
.stat__num{font-family:var(--serif);font-size:clamp(1.7rem,2.7vw,2.4rem);font-weight:600;color:var(--petrol);line-height:1;letter-spacing:-.01em}
.stat__label{margin-top:.55rem;font-size:.92rem;color:var(--ink-soft);line-height:1.4}

/* ============================ PROBLEMA ============================ */
.pains{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.4rem}
.pain{display:flex;gap:1rem;align-items:flex-start;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:1.2rem .2rem;box-shadow:none}
.pain__ic{flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;background:var(--peach-soft);color:#c65a3c}
.pain__ic .ico{width:1.35rem;height:1.35rem}
.pain p{font-size:1rem;line-height:1.5}
.pain p b{color:var(--ink);font-weight:600}
.pain-note{margin-top:2rem;font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.85rem);font-style:italic;font-weight:500;color:var(--petrol);max-width:30ch;line-height:1.3}

/* ============================ MÉTODO / 3 BASES ============================ */
.name-story{max-width:42rem;margin-top:1.5rem;font-size:var(--fs-lead);line-height:1.55;color:#cfdae1}
.bases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2.6rem,4vw,3.6rem)}
.base{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:clamp(1.7rem,2.5vw,2.3rem)}
.base__ic{width:2.6rem;height:2.6rem;border-radius:12px;background:rgba(255,159,131,.16);display:grid;place-items:center;color:var(--peach-2);margin-bottom:1.1rem}
.base__ic .ico{width:1.4rem;height:1.4rem}
.base__n{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--peach-2)}
.base h3{margin:.35rem 0 .6rem;color:#fff;font-size:var(--fs-h3)}
.base p{color:#bcc8d4;color:#bcccd4;line-height:1.55;font-size:1rem}

/* ============================ CÓMO FUNCIONA ============================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem);position:relative}
.steps::before{content:"";position:absolute;top:1.15rem;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.step{position:relative;padding-top:3.4rem}
.step__num{position:absolute;top:0;left:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--peach-soft);color:#c65a3c;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1.1rem}
.step h3{font-size:var(--fs-h3);margin-bottom:.55rem}
.step p{color:var(--ink-soft);font-size:.98rem;line-height:1.55}
.step__meta{display:inline-flex;align-items:center;gap:.4em;margin-top:.8rem;font-size:.8rem;font-weight:600;color:var(--petrol);background:#fff;border:1px solid var(--line);padding:.34em .75em;border-radius:var(--r-pill)}
.step__meta .ico{width:.95em;height:.95em;stroke:var(--peach)}

/* ============================ PARA QUIÉN ============================ */
.species{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)}
.spec{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.7rem,2.5vw,2.4rem);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.spec:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.spec__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.spec__ic{width:3.2rem;height:3.2rem;border-radius:16px;background:var(--cream);display:grid;place-items:center;color:var(--petrol)}
.spec__ic .ico{width:1.8rem;height:1.8rem;stroke-width:1.5}
.spec__tag{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--petrol);background:var(--cream);padding:.45em .85em;border-radius:var(--r-pill)}
.spec h3{font-size:var(--fs-h3);margin-bottom:.6rem}
.spec p{color:var(--ink-soft);line-height:1.55;font-size:1rem}
.spec--star{border-color:rgba(255,159,131,.6);box-shadow:0 24px 50px -30px rgba(255,120,90,.55)}
.spec--star .spec__ic{background:var(--peach-soft);color:#c65a3c}
.spec--star .spec__tag{background:var(--peach-soft);color:#c65a3c}

/* ============================ VÍDEO ============================ */
.video{max-width:940px;margin-inline:auto}
.video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,var(--petrol),var(--petrol-ink));box-shadow:var(--shadow-lg);display:grid;place-items:center;cursor:pointer}
.video-embed::after{content:"Vídeo pendiente · Reel «Esto es AYNIMAL»";position:absolute;bottom:1rem;left:1rem;font-size:.8rem;color:rgba(255,255,255,.72);background:rgba(0,0,0,.28);padding:.34em .8em;border-radius:var(--r-pill)}
.play{position:relative;width:5.2rem;height:5.2rem;border-radius:50%;background:var(--peach);display:grid;place-items:center}
.play::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--peach);opacity:.4;z-index:-1;animation:pulse 2.8s var(--ease) infinite}
.play svg{margin-left:4px}
@keyframes pulse{0%{transform:scale(1);opacity:.4}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.play::before{animation:none}}

/* ============================ QUIÉN SOY ============================ */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.8rem,4vw,4rem);align-items:center}
.about__photo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-photo);aspect-ratio:4/5;box-shadow:var(--shadow)}
.about__photo img{width:100%;height:100%;object-fit:cover}
.creds{list-style:none;padding:0;margin:1.7rem 0 0;display:grid;gap:.85rem}
.creds li{display:flex;gap:.75rem;align-items:center;font-size:1rem;color:var(--ink)}
.creds__ic{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--sage);display:grid;place-items:center;color:#1f4a3c}
.creds__ic .ico{width:.95rem;height:.95rem;stroke-width:2.4}

/* ============================ TESTIMONIOS ============================ */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.6rem,2.4vw,2.1rem);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:1.15rem}
.tcard__stars{display:flex;gap:.15rem;color:var(--peach)}
.tcard__stars .ico{width:1.05rem;height:1.05rem;fill:var(--peach);stroke:none}
.tcard__quote{font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:var(--ink)}
.tcard__who{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.tcard__av{width:2.8rem;height:2.8rem;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--sage));flex:0 0 auto}
.tcard__name{font-weight:600;font-size:.95rem}
.tcard__meta{font-size:.82rem;color:var(--muted)}
.ph-note{margin-top:1.7rem;text-align:center;font-size:.85rem;color:var(--muted);display:flex;justify-content:center;gap:.5em;align-items:center}
.ph-note .ico{width:1em;height:1em;stroke:var(--peach)}

/* ============================ PRECIO ============================ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.8rem,2.6vw,2.4rem);box-shadow:var(--shadow-sm)}
.price-card--feat{border:1.5px solid var(--petrol);box-shadow:var(--shadow);transform:translateY(-8px)}
.price-badge{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--petrol);color:var(--white);font-size:.74rem;font-weight:600;letter-spacing:.04em;padding:.42em 1.05em;border-radius:var(--r-pill);white-space:nowrap}
.price-card h3{font-size:1.32rem}
.price-card__price{font-family:var(--serif);font-size:2.7rem;font-weight:600;color:var(--petrol);margin:.55rem 0 .2rem;letter-spacing:-.01em}
.price-card__price small{font-size:1rem;color:var(--muted);font-family:var(--sans);font-weight:500}
.price-card__desc{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.3rem}
.plist{list-style:none;padding:0;margin:0 0 1.7rem;display:grid;gap:.7rem}
.plist li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--ink);line-height:1.4}
.plist .ico{flex:0 0 auto;width:1.2em;height:1.2em;stroke:var(--petrol);stroke-width:2.2;margin-top:.12em}
.price-card .btn{margin-top:auto}
.value-anchor{margin-top:2rem;display:flex;gap:.9rem;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap;background:var(--peach-soft);border-radius:var(--r);padding:1.1rem 1.4rem;font-size:.95rem;color:var(--ink-soft);max-width:40rem;margin-inline:auto}
.value-anchor b{color:var(--ink)}
.launch-note{margin-top:1.3rem;text-align:center;font-size:.9rem;color:var(--muted)}

/* ============================ FAQ ============================ */
.faq{max-width:760px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:1.08rem;color:var(--ink);padding:1.35rem 2.5rem 1.35rem 0;position:relative;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"";position:absolute;right:.35rem;top:1.75rem;width:.85rem;height:.85rem;background:
  linear-gradient(var(--petrol),var(--petrol)) center/100% 2px no-repeat,
  linear-gradient(var(--petrol),var(--petrol)) center/2px 100% no-repeat;transition:transform .3s var(--ease)}
.faq-item[open] .faq-q::after{transform:rotate(90deg);opacity:.6}
.faq-a{padding:0 2.5rem 1.5rem 0;color:var(--ink-soft);line-height:1.65;font-size:1rem}
.disclaimer-box{margin-top:2.6rem;background:var(--cream-2);border:1px solid var(--line);border-left:3px solid var(--peach);border-radius:var(--r);padding:1.35rem 1.6rem;font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.disclaimer-box b{color:var(--ink)}

/* ============================ CTA FINAL ============================ */
.final-cta{text-align:center}
.final-cta h2{font-size:clamp(2.1rem,4.2vw,3.4rem);max-width:18ch;margin-inline:auto;color:#fff}
.final-cta p{margin:1.3rem auto 2.1rem;max-width:42ch;color:#c2d0d8;font-size:var(--fs-lead)}
.final-cta .reassure{color:#8ea4ae;margin-top:1.5rem;justify-content:center}
.final-cta .reassure .ico{stroke:var(--sage)}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--petrol-ink);color:#aebcc4;padding-block:clamp(3.2rem,6vw,4.6rem) 2rem}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem}
.footer-brand .brand__mark{color:#fff}
.footer-brand p{margin-top:1rem;max-width:32ch;font-size:.95rem;line-height:1.65}
.footer-col h4{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--peach-2);margin-bottom:1.05rem}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.footer-col a{font-size:.95rem;color:#aebcc4;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{margin-top:3rem;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#849aa3}
.footer-bottom a:hover{color:#fff}
.footer-legal-note{margin-top:1rem;font-size:.78rem;color:#728891;line-height:1.55;max-width:72ch}

/* ============================ REVEAL ============================ */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  [data-reveal].in{opacity:1;transform:none}
  .hero__content>*{opacity:0;transform:translateY(14px);animation:rise .8s var(--ease) forwards}
  .hero__content>*:nth-child(1){animation-delay:.05s}
  .hero__content>*:nth-child(2){animation-delay:.15s}
  .hero__content>*:nth-child(3){animation-delay:.25s}
  .hero__content>*:nth-child(4){animation-delay:.35s}
  .hero__content>*:nth-child(5){animation-delay:.45s}
  .hero__pills .pill{opacity:0;animation:rise .7s var(--ease) forwards}
  .hero__pills .pill:nth-child(1){animation-delay:.6s}
  .hero__pills .pill:nth-child(2){animation-delay:.72s}
  .hero__pills .pill:nth-child(3){animation-delay:.84s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  .about{grid-template-columns:1fr}
  .about__photo{max-width:420px}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.7rem}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
  .steps::before{display:none}
  .bases,.species,.tgrid,.price-grid{grid-template-columns:1fr;gap:1.1rem}
  .price-card--feat{transform:none}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .site-nav a:not(.btn){display:none}
  .hero{min-height:94svh}
  .hero__media img{object-position:center 20%;transform:none}
  .hero__scrim{background:linear-gradient(to bottom,var(--cream-photo) 0%,rgba(220,203,192,.9) 24%,rgba(220,203,192,.35) 44%,rgba(220,203,192,0) 58%)}
  .hero__content{align-self:start;justify-self:stretch;width:100%;padding:clamp(5.5rem,15vh,7.5rem) var(--gutter) 1.4rem}
  .hero__pills{display:none}
  .hero__sub{max-width:40ch}
  .hero .btn--primary{width:100%}
  .pains{grid-template-columns:1fr}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr 1fr;gap:1.4rem}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}
@media (max-width:400px){.hero__title{font-size:2.3rem}}

/* ============================ COMPARTIDOS (garantía · urgencia · CTA móvil) ============================ */
.guarantee{display:flex;gap:1.1rem;align-items:flex-start;background:linear-gradient(180deg,#e8f1ec,#dcebe2);border-radius:var(--r);padding:1.5rem 1.7rem;max-width:640px;margin:1.6rem auto 0}
.guarantee svg{flex:0 0 auto;width:2.2rem;height:2.2rem;stroke:#2c6a54;fill:none;stroke-width:1.6}
.guarantee p{font-size:1rem;line-height:1.55;color:#234a3c}
.guarantee b{color:#123528}
.urgency{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:600;color:#c65a3c;background:var(--peach-soft);padding:.5em 1em;border-radius:var(--r-pill);margin-bottom:1.4rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mobile-cta{display:none}
@media (max-width:768px){
  .mobile-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;justify-content:center;align-items:center;gap:.5em;background:var(--petrol);color:var(--white);font-family:var(--sans);font-weight:600;padding:1rem;box-shadow:0 -8px 24px -12px rgba(31,50,64,.5)}
  body{padding-bottom:3.6rem}
}

/* ============================ PÁGINAS LEGALES ============================ */
.legal-wrap{max-width:760px;margin-inline:auto;padding:clamp(6.5rem,12vh,9rem) var(--gutter) 4rem}
.lg-warn{background:var(--peach-soft);border-left:3px solid var(--peach);border-radius:0 var(--r) var(--r) 0;padding:1rem 1.3rem;margin-bottom:2.4rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.lg-warn b{color:var(--ink)}
.legal .lg-title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:0 0 .4rem}
.legal .lg-updated{color:var(--muted);font-size:.9rem;margin:0 0 2rem}
.legal h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--petrol);margin:2.4rem 0 .8rem;letter-spacing:-.01em}
.legal h3{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--ink);margin:1.6rem 0 .5rem}
.legal p{margin:0 0 1rem;line-height:1.7;color:var(--ink-soft)}
.legal strong,.legal b{color:var(--ink);font-weight:600}
.legal ul,.legal ol{margin:0 0 1.2rem;padding-left:1.4rem;color:var(--ink-soft);line-height:1.65}
.legal li{margin:0 0 .5rem}
.legal a{color:var(--petrol);text-decoration:underline;text-underline-offset:2px}
.legal [class*="placeholder"],.legal .ph{color:#c86a4e}
.lg-table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.9rem}
.lg-table th{background:var(--petrol);color:#fff;text-align:left;padding:.6rem .8rem;font-weight:600;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase}
.lg-table td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
.lg-nav{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.9rem}
.lg-nav a{color:var(--slate);font-weight:500}
.lg-nav a:hover{color:var(--petrol)}
.lg-nav a[aria-current]{color:var(--petrol);font-weight:600}

/* ============================ PÓSTER DE VÍDEO (hero VSL + puente en la landing) ============================ */
.video-embed--poster{background:linear-gradient(rgba(21,42,56,.32),rgba(21,42,56,.5)),url(assets/hero-desktop.jpg) center/cover}
.video-embed--poster::after{display:none}
a.video-embed{text-decoration:none}