@font-face{
  font-family:"TBJ Black Gold";
  src:url("media/fonts/TBJBlackGoldMini-Regular.otf") format("opentype"),
      url("media/fonts/TBJBlackGoldMini-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
/* ============================================================
   ZOOLOMASCOTAS — design tokens
   ============================================================ */
:root{
  --ink:          #12202C;   /* near-black navy, dark sections */
  --ink-soft:     #1B3346;
  --blue:         #2E6E93;   /* azul médico — primary accent */
  --blue-deep:    #204F6B;
  --blue-pale:    #E9F1F5;   /* azul médico claro — light section bg */
  --blue-pale-2:  #DCEAF0;
  --white:        #FFFFFF;
  --beige:        #F4EEE1;   /* beige cálido */
  --beige-deep:   #EADFC7;
  --grey:         #6B7680;   /* gris suave — secondary text */
  --grey-line:    #DDE1E3;
  --amber:        #D9A441;   /* acento negro/amarillo — used sparingly */
  --amber-deep:   #B9862E;
  --purple:       #8B6DF6;   /* morado de marca — amor / bienestar */
  --purple-deep:  #7554D6;
  --purple-pale:  #F1EDFD;
  --blue-light:   #A8D8F0;   /* azul claro de marca */
  --blue-dark:    #0A1D3D;   /* azul oscuro de marca */
  --stone:        #EAEAE6;   /* gris suave cálido — "habitación" confianza */
  --stone-deep:   #DCDCD5;

  --font-display: "TBJ Black Gold", "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-accent: "TBJ Black Gold", var(--font-display);

  --container: 1180px;
  --gap-section: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --radius: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  background:var(--beige);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure{ margin:0; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem); }

/* reveal-on-scroll: content is visible by default (defensive), JS only enhances */
.reveal{ opacity:1; transform:none; }
.reveal.js-ready{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.js-ready.is-in{ opacity:1; transform:translateY(0); }

/* ============================================================
   SPLASH
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--beige);
  animation: splash-hide 0s linear 1.6s forwards;
}
#splash.is-hidden{ display:none; }
.splash-mark{ width:64px; height:64px; animation: splash-pulse 1.1s ease-in-out infinite alternate; }
@keyframes splash-pulse{ from{ opacity:.55; transform:scale(.94);} to{ opacity:1; transform:scale(1);} }
@keyframes splash-hide{ to{ visibility:hidden; } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,5vw,3rem);
  color:var(--white);
  transition:background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.97);
  color:var(--ink);
  padding-block:.7rem;
  box-shadow:0 1px 0 var(--grey-line);
}
@media (max-width:860px){
  .site-header.nav-active{
    background:var(--ink) !important; color:var(--beige) !important;
    box-shadow:none;
  }
  .site-header.nav-active .brand-word .bw-2{ color:var(--purple) !important; }
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand-mark{ width:36px; height:36px; object-fit:contain; flex:none; }
.footer-mark{ width:32px; height:32px; }
.brand-word{ font-family:var(--font-sans); font-weight:700; font-size:1.1rem; letter-spacing:.01em; text-transform:uppercase; }
.brand-word .bw-1{ color:currentColor; }
.brand-word .bw-2{ color:var(--blue); }
.site-header.is-scrolled .brand-word .bw-2{ color:var(--blue-deep); }
.site-nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); font-size:1.05rem; font-weight:800; letter-spacing:.01em; }
.site-nav a{ opacity:.94; transition:opacity .25s; position:relative; }
.site-nav a:hover{ opacity:1; }
.nav-urgent{ color:var(--purple); }
.site-header.is-scrolled .nav-urgent{ color:var(--purple-deep); }
.header-right{ display:flex; align-items:center; gap:.85rem; position:relative; z-index:2; }
.spa-badge{
  display:flex; align-items:center; gap:.35rem; flex:none;
  padding:.3rem .7rem .3rem .4rem; border-radius:100px;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled .spa-badge{ background:var(--purple-pale); border-color:rgba(117,84,214,.25); }
.spa-badge:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(18,32,44,.22); }
.spa-badge-icon{ width:22px; height:22px; display:block; flex:none; color:var(--white); }
.spa-badge-word{
  font-family:var(--font-display); font-style:italic; font-weight:700; font-size:1rem;
  color:var(--white); line-height:1;
}
.site-header.is-scrolled .spa-badge-icon{ color:var(--purple-deep); }
.site-header.is-scrolled .spa-badge-word{ color:var(--purple-deep); }
@media (min-width:521px){
  .spa-badge{ padding:.4rem .9rem .4rem .5rem; gap:.45rem; }
  .spa-badge-icon{ width:26px; height:26px; }
  .spa-badge-word{ font-size:1.15rem; }
}
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:6px; position:relative; z-index:2; }
.nav-toggle span{ width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .35s var(--ease), opacity .25s var(--ease); }
.nav-backdrop{
  display:none; position:fixed; inset:0; background:rgba(7,14,20,.8);
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none; z-index:1;
}
.nav-extra{ display:none; }

@media (max-width: 860px){
  .nav-backdrop{ display:block; }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); z-index:2;
    background:var(--ink); color:var(--beige);
    border-left:1px solid rgba(255,255,255,.1);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    flex-wrap:nowrap; overflow-y:auto; -webkit-overflow-scrolling:touch;
    gap:1.4rem; padding:calc(5.5rem + env(safe-area-inset-top, 0px)) clamp(1.5rem,6vw,2.2rem) 2rem;
    transform:translateX(100%); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
    font-size:1.05rem;
  }
  .site-nav a{
    display:block; width:100%; white-space:normal; word-break:keep-all;
    line-height:1.3; flex:0 0 auto;
  }
  .site-nav.is-open{ transform:translateX(0); box-shadow:-30px 0 60px rgba(0,0,0,.45); }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .nav-extra{
    display:flex; flex-direction:column; gap:.8rem; width:100%; margin-top:.4rem;
    padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14);
  }
  .nav-extra-btn{
    display:block; width:100%; text-align:center; font-size:.92rem; font-weight:700;
    padding:.9rem 1rem; border-radius:100px; line-height:1.3;
    background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%); color:var(--white) !important;
    box-shadow:0 10px 24px rgba(139,109,246,.3);
  }
  .nav-extra-btn--ghost{
    background:transparent; box-shadow:none; color:var(--blue-light) !important;
    border:1px solid rgba(255,255,255,.25);
  }
}

/* ============================================================
   HERO — scroll-driven zoom that becomes the transition
   ============================================================ */
.hero{ position:relative; height:170vh; background:var(--ink); }
.hero-pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1); will-change:transform;
  transform-origin:52% 46%;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,32,44,.05) 0%, rgba(18,32,44,.15) 55%, rgba(18,32,44,.62) 100%);
}
.hero-dissolve{
  position:absolute; inset:0; background:var(--white); opacity:0; pointer-events:none;
}
.hero-content{
  position:absolute; left:0; right:0; bottom:clamp(.25rem,1.2vh,.85rem);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem;
  color:var(--white); padding-inline:1.25rem;
}
.hero-title{
  font-family:var(--font-display); font-weight:800; letter-spacing:.06em;
  font-size:clamp(2.1rem,8vw,4.6rem); line-height:1; margin-bottom:-.9rem;
}
.brand-mx{
  display:inline-block; font-size:.42em; font-weight:800; letter-spacing:.01em;
  vertical-align:top; position:relative; top:-.05em; margin-left:.1em;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.brand-suffix{
  font-family:var(--font-sans); font-weight:700; font-size:.68em; letter-spacing:.01em;
  text-transform:none; color:inherit; opacity:1; margin-left:.05em;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.hero-slogan{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(1rem,2.6vw,1.3rem); opacity:1; max-width:26ch;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.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;
}
.hero-ticker{
  width:100%; max-width:540px; overflow:hidden; margin-top:.7rem;
}
.hero-ticker-track{
  display:flex; align-items:center; gap:.7rem; width:max-content; white-space:nowrap;
  animation:hero-ticker-scroll 16s linear infinite;
  will-change:transform; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.hero-ticker-track span{
  font-family:var(--font-sans); font-weight:600; letter-spacing:.02em;
  font-size:clamp(1.05rem,2.9vw,1.3rem); color:var(--white);
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.hero-ticker-dot{ color:var(--amber) !important; font-weight:700; }
@keyframes hero-ticker-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-ticker-track{ animation:none; }
}
.hero-scrollcue{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  color:var(--white); opacity:.85; margin-top:.9rem;
}
.hero-scrollcue span{
  width:2px; height:22px; border-radius:2px; position:relative; overflow:hidden;
  background:var(--white);
  animation:cue-color 2.4s ease-in-out infinite;
}
.hero-scrollcue span::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:rgba(255,255,255,.9);
  animation:cue-run 1.8s ease-in-out infinite;
}
@keyframes cue-run{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }
@keyframes cue-color{
  0%, 100%{ background:var(--white); }
  50%{ background:var(--amber); }
}
@media (prefers-reduced-motion: reduce){
  .hero-scrollcue span{ animation:none; }
}
.hero-scrollcue em{ font-style:normal; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }

/* ============================================================
   SECTION TYPE SCALE
   ============================================================ */
.section-kicker{
  font-family:var(--font-sans); font-weight:800; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue-deep); margin-bottom:.9rem;
}
.section-kicker--light{ color:var(--purple); }
.section-title{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:1.08; letter-spacing:-.01em; max-width:16ch;
}
.section-title--light{ color:var(--white); }
.section-lede{
  font-size:clamp(1rem,1.6vw,1.15rem); color:var(--grey); max-width:52ch; margin-top:1.1rem; line-height:1.6;
}
.section-lede--light{ color:rgba(255,255,255,.82); }

/* ============================================================
   MUNDO / CATEGORY CARDS
   ============================================================ */
.mundo{ padding-block:var(--gap-section); background:var(--white); }
.mundo-intro{ text-align:center; max-width:820px; margin-inline:auto; margin-bottom:clamp(1.6rem,3vw,2.2rem); }
.mundo-intro .section-lede{ margin-inline:auto; font-size:clamp(1.05rem,1.8vw,1.25rem); max-width:56ch; }
.mundo-mark-wrap{
  display:flex; width:48px; height:48px; margin-inline:auto; margin-bottom:1.4rem; color:var(--purple);
}
.mundo-mark-wrap svg{ display:block; width:24px; height:48px; }
.mundo-mark-half{
  transform:translateX(-20px);
  transition:transform .9s var(--ease) .35s;
}
.mundo-mark-half--right{ transform:translateX(20px); }
.mundo-intro.is-in .mundo-mark-half{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){
  .mundo-mark-half{ transition:none; transform:none; }
}
.mundo-intro .section-kicker{
  font-family:var(--font-display); font-style:normal; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(1.85rem,8.4vw,5rem); line-height:1.05; margin-bottom:.6rem;
  white-space:nowrap;
  background:linear-gradient(100deg,
    var(--blue-light) 0%, var(--blue-dark) 30%, var(--purple) 55%,
    var(--blue-light) 80%, var(--blue-dark) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:mundo-kicker-gradient 2.8s linear infinite;
}
@keyframes mundo-kicker-gradient{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .mundo-intro .section-kicker{ animation:none; }
}
.mundo-brandword{
  font-style:normal; font-weight:700; color:var(--white); display:inline-block;
  -webkit-text-stroke:1.4px var(--ink); text-stroke:1.4px var(--ink); paint-order:stroke fill;
  transition:-webkit-text-stroke-width .8s var(--ease);
}
.mundo-hero-title{
  font-family:var(--font-sans); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  line-height:1.2; color:var(--blue-dark); font-size:clamp(.85rem,1.5vw,1rem); margin-top:-.4rem;
}

.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; max-width:820px; margin-inline:auto; }
@media (max-width:760px){ .cat-grid{ grid-template-columns:1fr; max-width:460px; } }

.cat-card{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink);
  cursor:pointer; outline:none; isolation:isolate;
}
.cat-media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--beige-deep);
}
.cat-media img{
  width:100%; height:100%; object-fit:contain;
  transition:transform .8s var(--ease);
}
.cat-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,32,44,0) 35%, rgba(18,32,44,.86) 100%);
}
.cat-face{
  position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.5rem 1.7rem;
  color:var(--white); z-index:2;
}
.cat-index{ font-size:.75rem; letter-spacing:.16em; opacity:.7; font-weight:700; }
.cat-title{ font-family:var(--font-sans); font-size:1.5rem; font-weight:700; margin-top:.25rem; }

.cat-plus{
  position:absolute; top:1.1rem; right:1.1rem; z-index:3;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 6px 16px rgba(18,32,44,.25);
  animation:cat-plus-pulse 2.2s ease-in-out infinite;
  transition:background .3s var(--ease);
}
.cat-plus::after{
  content:""; position:absolute; top:50%; left:50%;
  width:9px; height:9px;
  border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
  border-radius:0 0 2px 0;
  transform:translate(-50%,-65%) rotate(45deg);
  transition:transform .45s var(--ease), border-color .3s var(--ease);
}
.cat-card.is-open .cat-plus{ background:var(--purple); animation:none; }
.cat-card.is-open .cat-plus::after{ border-color:var(--white); transform:translate(-50%,-35%) rotate(225deg); }
@keyframes cat-plus-pulse{
  0%,100%{ transform:scale(1); box-shadow:0 6px 16px rgba(18,32,44,.25); }
  50%{ transform:scale(1.12); box-shadow:0 8px 22px rgba(139,109,246,.45); }
}
@media (prefers-reduced-motion: reduce){
  .cat-plus{ animation:none; }
}

.cat-services{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); background:var(--blue-deep); }
.cat-services-inner{ overflow:hidden; }
.cat-services ul{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.9rem; }
.cat-services li{
  color:var(--white); padding-left:1.1rem; position:relative;
}
.cat-services li::before{
  content:""; position:absolute; left:0; top:.4em; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85);
}
.cat-services li strong{ display:block; font-weight:700; font-size:1.06rem; }
.cat-services li span{ display:block; font-weight:500; font-size:.86rem; color:rgba(255,255,255,.96); margin-top:.25rem; line-height:1.5; }
.cat-services li span em{ font-style:normal; color:rgba(255,255,255,.6); }

.cat-card.is-open .cat-media img{ transform:scale(1.06); }

.cat-card.is-open .cat-services{ grid-template-rows:1fr; }
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px rgba(18,32,44,.16); }
.cat-card{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }

/* ---- Asistente promo CTA (fin de servicios) ---- */
.asistente-promo{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  margin-top:2.2rem; max-width:820px; margin-inline:auto;
  padding:1.5rem 1.8rem; border-radius:24px;
  background:
    radial-gradient(circle at 85% 0%, rgba(255,255,255,.18) 0%, transparent 55%),
    linear-gradient(100deg, var(--purple-deep) 0%, var(--purple) 55%, var(--blue) 100%);
  box-shadow:0 20px 48px rgba(117,84,214,.32);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.asistente-promo:hover{ transform:translateY(-3px); box-shadow:0 26px 58px rgba(117,84,214,.42); }
.asistente-promo-eyebrow{
  display:inline-block; font-family:var(--font-sans); font-weight:800; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--purple-deep); background:var(--white); padding:.3rem .7rem; border-radius:100px; margin-bottom:.6rem;
}
.asistente-promo-title{
  font-family:var(--font-sans); font-weight:800; font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--white); line-height:1.25;
}
.asistente-promo-text{ font-size:.86rem; color:rgba(255,255,255,.85); margin-top:.4rem; max-width:46ch; line-height:1.5; }
.asistente-promo-cta{
  display:inline-flex; align-items:center; gap:.5rem; flex:none;
  background:var(--white); color:var(--purple-deep); font-weight:800; font-size:.92rem;
  padding:.85rem 1.3rem; border-radius:100px; white-space:nowrap;
  box-shadow:0 10px 24px rgba(18,32,44,.25);
  transition:transform .3s var(--ease);
}
.asistente-promo-cta svg{ width:18px; height:18px; }
.asistente-promo:hover .asistente-promo-cta{ transform:translateX(3px); }
@media (max-width:640px){
  .asistente-promo{ flex-direction:column; align-items:flex-start; text-align:left; }
  .asistente-promo-cta{ align-self:stretch; justify-content:center; }
}

/* ---- Promo ticker (jornada de esterilización) ---- */
.promo-ticker{
  width:100%; overflow:hidden;
  padding-block:1rem;
  background:linear-gradient(100deg, var(--blue-dark) 0%, var(--blue) 45%, var(--purple-deep) 100%);
  box-shadow:0 10px 30px rgba(10,29,61,.18);
}
.promo-ticker-track{
  display:flex; align-items:center; gap:1.1rem; width:max-content; white-space:nowrap;
  animation:promo-ticker-scroll 22s linear infinite;
  will-change:transform; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.promo-ticker-item{
  font-family:var(--font-sans); font-weight:600; letter-spacing:.01em;
  font-size:clamp(.92rem,1.6vw,1.05rem); color:rgba(255,255,255,.94);
}
.promo-ticker-item strong{ font-weight:800; color:var(--white); }
.promo-ticker-dot{ color:var(--blue-light); font-weight:700; }
@keyframes promo-ticker-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .promo-ticker-track{ animation:none; }
}

/* ---- Promo banner (jornada de esterilización — servicios) ---- */
.promo-banner{
  display:block; cursor:pointer;
  position:relative; overflow:hidden; margin-top:clamp(1.6rem,3vw,2.2rem); margin-bottom:clamp(2.5rem,5vw,3.5rem);
  padding:1.1rem 1.5rem 1rem;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  box-shadow:0 16px 36px rgba(117,84,214,.28);
  text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.promo-banner:hover{ transform:translateY(-3px); box-shadow:0 22px 46px rgba(117,84,214,.38); }
.promo-banner-title{
  text-align:center;
  font-family:var(--font-display); font-weight:700; letter-spacing:.01em;
  font-size:clamp(1.75rem,4.6vw,2.5rem); line-height:1.15;
  color:var(--white); text-shadow:0 2px 14px rgba(0,0,0,.2);
}
.promo-banner-date{
  text-align:center; margin-top:.4rem; margin-bottom:.9rem;
  font-family:var(--font-sans); font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:clamp(.95rem,2.3vw,1.2rem); color:var(--white);
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.promo-banner-ticker{ position:relative; z-index:1; width:100%; overflow:hidden; max-width:640px; margin-inline:auto; }
.promo-banner-ticker-track{
  display:flex; align-items:center; gap:1.1rem; width:max-content; white-space:nowrap; margin-inline:auto;
  animation:promo-ticker-scroll 16s linear infinite;
  will-change:transform; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden;
  font-family:var(--font-sans); font-weight:600; letter-spacing:.01em;
  font-size:clamp(.8rem,1.5vw,.92rem); color:rgba(255,255,255,.92);
}
.promo-banner-ticker-track .promo-ticker-dot{ color:var(--blue-light); }
@media (prefers-reduced-motion: reduce){
  .promo-banner-ticker-track{ animation:none; }
}

/* ============================================================
   CONÓCENOS
   ============================================================ */
.conocenos{ position:relative; padding-block:var(--gap-section); background:var(--blue-pale); overflow:hidden; }
.conocenos-media-bg{ position:absolute; inset:0; z-index:0; }
.conocenos-media-bg img{ width:100%; height:100%; object-fit:cover; }
.conocenos-fade-top{ position:absolute; inset:0 0 auto 0; height:32%; background:linear-gradient(180deg, var(--white), transparent); }
.conocenos-fade-bottom{ position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(0deg, var(--ink), transparent); }
.conocenos-content{ position:relative; z-index:1; }
.conocenos-copy{
  max-width:640px; background:rgba(255,255,255,.95);
  border-radius:28px; padding:clamp(1.8rem,5vw,3rem); box-shadow:0 30px 70px rgba(18,32,44,.14);
}
@media (max-width:1000px){
  .conocenos-copy{ background:rgba(255,255,255,.95); }
}

.accordion{ margin-top:2rem; border-top:1px solid var(--grey-line); }
.accordion-item{ border-bottom:1px solid var(--grey-line); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem .6rem; margin-inline:-0.6rem; border-radius:12px;
  font-family:var(--font-sans); font-size:1.05rem; font-weight:700; text-align:left;
  color:var(--ink); transition:color .3s var(--ease), background .3s var(--ease), text-shadow .3s var(--ease);
}
.accordion-trigger:hover{
  color:var(--blue-deep); background:rgba(46,110,147,.08);
  text-shadow:0 0 18px rgba(46,110,147,.35);
}
.accordion-plus{ position:relative; width:16px; height:16px; flex:none; }
.accordion-plus::before,.accordion-plus::after{
  content:""; position:absolute; background:var(--blue-deep); border-radius:2px;
}
.accordion-plus::before{ left:0; top:7px; width:16px; height:2px; }
.accordion-plus::after{ left:7px; top:0; width:2px; height:16px; transition:transform .35s var(--ease); }
.accordion-item.is-open .accordion-plus::after{ transform:rotate(90deg); }

.accordion-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.accordion-item.is-open .accordion-panel{ grid-template-rows:1fr; }
.accordion-panel-inner{ overflow:hidden; }
.accordion-panel-inner p{ padding-bottom:1.3rem; color:var(--grey); line-height:1.65; max-width:52ch; }
.accordion-photo{ border-radius:14px; margin-top:.3rem; margin-bottom:1.4rem; width:100%; aspect-ratio:16/9; object-fit:cover; }
.accordion-photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.3rem; margin-bottom:1.4rem; }
.accordion-photo-grid .accordion-photo{ margin:0; aspect-ratio:4/5; }
@media (max-width:480px){ .accordion-photo-grid{ gap:.45rem; } }

.team-reel{ margin-top:1.2rem; margin-bottom:.4rem; }
.team-reel-track{
  display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.2rem .2rem .7rem; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.team-reel-track::-webkit-scrollbar{ display:none; }
.team-slide{
  position:relative; flex:0 0 auto; width:160px; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  scroll-snap-align:start; background:var(--stone); box-shadow:0 10px 24px rgba(18,32,44,.14);
}
.team-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(10,20,32,.85) 100%);
}
.team-slide-caption{ position:absolute; left:0; right:0; bottom:0; padding:.75rem .85rem; z-index:1; color:var(--white); }
.team-slide-caption strong{ display:block; font-family:var(--font-sans); font-size:.9rem; font-weight:700; }
.team-slide-caption span{ display:block; font-size:.72rem; color:rgba(255,255,255,.85); margin-top:.1rem; }
.team-reel-hint{
  text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grey); margin:0;
}

/* ============================================================
   BIENESTAR / SPA
   ============================================================ */
.spa{ position:relative; padding-block:var(--gap-section); overflow:hidden; background:var(--ink); }
.spa-media{ position:absolute; inset:0; z-index:0; }
.spa-media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.spa-fade-top{ position:absolute; inset:0 0 auto 0; height:35%; background:linear-gradient(180deg, var(--ink), transparent); }
.spa-fade-bottom{ position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(0deg, var(--ink), transparent); }
.spa-content{ position:relative; z-index:1; }
.spa-intro{ max-width:640px; }
.spa-brand-lockup{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.spa-brand-lockup-icon{ width:34px; height:34px; flex:none; color:#B7A2FF; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(139,109,246,.45)); }
.spa-brand-lockup-word{
  font-family:var(--font-sans); font-weight:800; font-size:1.05rem; letter-spacing:.02em;
  color:var(--white); text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.spa-brand-lockup-w1{ color:var(--white); }
.spa-brand-lockup-w2{
  color:#B7A2FF; font-weight:900;
  text-shadow:0 0 14px rgba(139,109,246,.65), 0 1px 4px rgba(0,0,0,.5);
}
.spa-brand-lockup-mx{ font-size:.55em; font-weight:800; color:var(--white); vertical-align:top; position:relative; top:-.1em; margin-left:.08em; }
.spa-brand-lockup-spa{ font-family:var(--font-display); font-style:italic; font-weight:700; color:var(--white); margin-left:.1em; }
@media (min-width:521px){
  .spa-brand-lockup-icon{ width:40px; height:40px; }
  .spa-brand-lockup-word{ font-size:1.25rem; }
}

.spa-tabs{ margin-top:clamp(2.5rem,5vw,3.5rem); max-width:640px; }
.spa-tab-buttons{ display:flex; flex-wrap:wrap; gap:.6rem; }
.spa-tab-btn{
  padding:.65rem 1.15rem; border-radius:100px; border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.82); font-weight:700; font-size:.88rem; transition:.3s var(--ease);
}
.spa-tab-btn.is-active{
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  border-color:transparent; color:var(--white);
}
.spa-tab-panels{ margin-top:1.6rem; min-height:4.5rem; }
.spa-tab-panel{ display:none; color:rgba(255,255,255,.86); font-size:1.05rem; line-height:1.7; max-width:52ch; animation:fade-in .5s var(--ease); }
.spa-tab-panel.is-active{ display:block; }
@keyframes fade-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.spa-wa-cta{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:.55rem;
  width:fit-content; margin-inline:auto;
  margin-top:clamp(1.6rem,3.2vw,2.2rem); padding:.75rem 1.25rem; border-radius:100px;
  background:#25D366; color:var(--white); font-weight:700; font-size:.84rem;
  box-shadow:0 12px 26px rgba(37,211,102,.32);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.spa-wa-cta:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(37,211,102,.42); }
.spa-wa-cta svg{ width:19px; height:19px; flex:none; }
@media (max-width:520px){
  .spa-wa-cta{ font-size:.76rem; padding:.7rem .95rem; text-align:center; }
}

/* ============================================================
   NUPEC
   ============================================================ */
.nupec{ padding-block:var(--gap-section); background:var(--white); }
.nupec-intro{ max-width:700px; margin-inline:auto; text-align:center; }
.nupec-brand-tag{
  display:inline-block; font-family:var(--font-sans); font-weight:800; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--purple-deep); background:var(--purple-pale);
  padding:.35rem .9rem; border-radius:100px; margin-bottom:1rem;
}
.nupec-intro .section-kicker{ text-align:center; }
.nupec-intro .section-title{ margin-inline:auto; max-width:20ch; }
.nupec-intro .section-lede{ margin-inline:auto; }
.nupec-brand-note{ margin-top:.6rem; font-size:.86rem; color:var(--grey); }
.nupec-brand-note strong{ color:var(--purple-deep); }

.nupec-grid{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem;
}
@media (max-width:640px){ .nupec-grid{ gap:.6rem; } }

.nupec-card{
  border-radius:16px; background:var(--blue-pale); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nupec-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(18,32,44,.14), 0 0 46px 8px rgba(var(--glow-rgb,139,109,246),.5);
}
.nupec-card--blue{ --glow-rgb:74,166,214; }
.nupec-card--green{ --glow-rgb:120,184,90; }
.nupec-card--brown{ --glow-rgb:158,110,64; }
.nupec-card--purple{ --glow-rgb:139,109,246; }
.nupec-card-media{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--white); padding:.6rem; }
.nupec-card-cta{
  position:absolute; left:.4rem; right:.4rem; bottom:.4rem; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:.25rem;
  padding:.5rem .5rem; border-radius:100px;
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  background-size:160% 100%; background-position:0% 50%;
  color:var(--white) !important; font-weight:800; font-size:.68rem; text-align:center;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), background-position .4s var(--ease);
  box-shadow:0 10px 20px rgba(18,32,44,.32);
}
.nupec-card:hover .nupec-card-cta,
.nupec-card.is-touched .nupec-card-cta{ opacity:1; transform:translateY(0); }
.nupec-card-cta:hover{ background-position:100% 50%; }
.nupec-card-media img{ width:100%; height:100%; object-fit:contain; }
.nupec-card-body{ padding:0 .6rem .8rem; display:flex; flex-direction:column; gap:.2rem; }
.nupec-card-tag{
  align-self:flex-start; font-size:.56rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:100px; color:var(--white); background:var(--blue);
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.nupec-card-tag--purple{ background:var(--purple); }
.nupec-card-body h4{ font-family:var(--font-sans); font-weight:700; font-size:.86rem; line-height:1.25; color:var(--blue-dark); margin-top:.3rem; }
.nupec-card-size{ font-size:.68rem; font-weight:700; color:var(--purple-deep); margin-top:.1rem; }
.nupec-card-price{ font-size:.82rem; font-weight:800; color:var(--blue-dark); margin-top:.05rem; }
@media (max-width:560px){
  .nupec-card-tag{ font-size:.5rem; padding:.16rem .4rem; }
  .nupec-card-body h4{ font-size:.72rem; }
  .nupec-card-size{ font-size:.6rem; }
}

.nupec-cta{ display:flex; justify-content:center; margin-top:clamp(2rem,4vw,2.6rem); }
.nupec-toggle{
  display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-sans); font-weight:800;
  font-size:.95rem; letter-spacing:.02em; color:var(--white);
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  padding:.95rem 1.7rem; border-radius:100px; box-shadow:0 14px 30px rgba(139,109,246,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nupec-toggle:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(139,109,246,.38); }
.nupec-toggle-plus{ position:relative; width:16px; height:16px; flex:none; }
.nupec-toggle-plus::before,.nupec-toggle-plus::after{
  content:""; position:absolute; background:var(--white); border-radius:2px;
}
.nupec-toggle-plus::before{ left:0; top:7px; width:16px; height:2px; }
.nupec-toggle-plus::after{ left:7px; top:0; width:2px; height:16px; transition:transform .35s var(--ease); }
.nupec-toggle.is-open .nupec-toggle-plus::after{ transform:rotate(90deg); }

.nupec-catalog{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); margin-top:.4rem; }
.nupec-catalog-inner{ overflow:hidden; }
.nupec-catalog.is-open{ grid-template-rows:1fr; }

/* ---- NUPEC mini asesor ---- */
.nupec-advisor{
  border-radius:22px; overflow:hidden;
  background:linear-gradient(155deg, var(--purple-pale) 0%, var(--blue-pale) 100%);
  border:1px solid rgba(139,109,246,.28);
  box-shadow:0 16px 36px rgba(117,84,214,.18);
}
.nupec-advisor-cover{ position:relative; height:120px; }
.nupec-advisor-cover img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.nupec-advisor-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,32,0) 35%, rgba(10,20,32,.6) 100%);
}
.nupec-advisor-badge{
  position:absolute; left:1.1rem; bottom:.8rem; z-index:1;
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-sans); font-weight:800; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  padding:.4rem .85rem; border-radius:100px; box-shadow:0 8px 18px rgba(18,32,44,.25);
}
.nupec-advisor-body{ padding:1.3rem 1.4rem 1.5rem; }
.nupec-advisor-title{ font-family:var(--font-sans); font-weight:800; font-size:1.1rem; color:var(--blue-dark); }
.nupec-advisor-copy{ font-size:.86rem; color:var(--grey); margin-top:.3rem; margin-bottom:1rem; }

.nupec-advisor-progress{ height:6px; background:rgba(139,109,246,.18); border-radius:100px; overflow:hidden; margin-bottom:1.2rem; }
.nupec-advisor-progress-bar{
  height:100%; width:20%; border-radius:100px;
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  transition:width .4s var(--ease);
}

.nupec-advisor-qlabel{ font-family:var(--font-sans); font-weight:800; font-size:.92rem; color:var(--blue-dark); margin-bottom:.8rem; }

.nupec-advisor-step{ display:none; }
.nupec-advisor-step.is-active{ display:block; animation:fade-in .4s var(--ease); }

.nupec-advisor-options{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.nupec-advisor-options--3{ grid-template-columns:repeat(3,1fr); }
.nupec-advisor-options--1col{ grid-template-columns:1fr; }
.nupec-advisor-opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  padding:1rem .6rem; border-radius:16px; background:var(--white);
  border:2px solid transparent; font-weight:700; font-size:.86rem; color:var(--ink);
  transition:.25s var(--ease);
}
.nupec-advisor-opt svg{ width:26px; height:26px; color:var(--purple); flex:none; }
.nupec-advisor-opt:hover{ border-color:var(--purple); transform:translateY(-2px); box-shadow:0 10px 22px rgba(117,84,214,.18); }

.nupec-advisor-back{
  display:block; margin-top:1rem; font-size:.8rem; font-weight:700; color:var(--purple-deep);
  text-align:center; width:100%;
}

.nupec-advisor-result{ display:flex; align-items:center; gap:1rem; }
.nupec-advisor-result img{ width:84px; height:84px; border-radius:14px; object-fit:contain; background:var(--white); flex:none; padding:.4rem; }
.nupec-advisor-result-tag{ font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--purple-deep); }
.nupec-advisor-result-copy h5{ font-family:var(--font-sans); font-weight:800; font-size:1.05rem; color:var(--blue-dark); margin-top:.15rem; }
.nupec-advisor-result-copy p{ font-size:.82rem; color:var(--grey); margin-top:.25rem; line-height:1.42; }

.nupec-advisor-cta{
  display:flex; width:100%; margin-top:1.2rem;
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  background-size:160% 100%; background-position:0% 50%;
  color:var(--white); font-weight:800;
  box-shadow:0 14px 30px rgba(139,109,246,.35);
  transition:background-position .4s var(--ease), transform .3s var(--ease);
}
.nupec-advisor-cta:hover{ background-position:100% 50%; transform:translateY(-2px); }

.nupec-species{ border-radius:20px; background:var(--blue-pale); margin-top:1rem; overflow:hidden; }
.nupec-species-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem 1.4rem; font-family:var(--font-sans); font-weight:800; font-size:1.02rem; color:var(--blue-dark);
}
.nupec-species-badge{
  display:inline-block; font-style:normal; font-weight:800; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  padding:.2rem .5rem; border-radius:100px; margin-left:.5rem; vertical-align:middle;
}
.nupec-species-plus{ position:relative; width:16px; height:16px; flex:none; }
.nupec-species-plus::before,.nupec-species-plus::after{ content:""; position:absolute; background:var(--blue-dark); }
.nupec-species-plus::before{ left:0; top:7px; width:16px; height:2px; }
.nupec-species-plus::after{ left:7px; top:0; width:2px; height:16px; transition:transform .35s var(--ease); }
.nupec-species.is-open .nupec-species-plus::after{ transform:rotate(90deg); }

.nupec-species-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.nupec-species.is-open .nupec-species-panel{ grid-template-rows:1fr; }
.nupec-species-panel-inner{ overflow:hidden; padding-top:.3rem; }

.nupec-subgroup{ border-top:1px solid rgba(10,29,61,.08); }
.nupec-subgroup:first-child{ border-top:none; }
.nupec-subgroup-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:.95rem 1.4rem; font-family:var(--font-sans); font-weight:800; font-size:.86rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--purple-deep);
}
.nupec-subgroup-plus{ position:relative; width:13px; height:13px; flex:none; }
.nupec-subgroup-plus::before,.nupec-subgroup-plus::after{ content:""; position:absolute; background:var(--purple-deep); border-radius:1px; }
.nupec-subgroup-plus::before{ left:0; top:5.5px; width:13px; height:2px; }
.nupec-subgroup-plus::after{ left:5.5px; top:0; width:2px; height:13px; transition:transform .3s var(--ease); }
.nupec-subgroup.is-open .nupec-subgroup-plus::after{ transform:rotate(90deg); }
.nupec-subgroup.is-open .nupec-subgroup-trigger{ color:var(--blue-dark); }

.nupec-subgroup-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.nupec-subgroup.is-open .nupec-subgroup-panel{ grid-template-rows:1fr; }
.nupec-subgroup-panel-inner{ overflow:hidden; }

.nupec-row-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; padding-inline:1.4rem; margin-bottom:1.3rem; }
@media (max-width:640px){ .nupec-row-grid{ grid-template-columns:1fr; } }
.nupec-row{
  background:var(--white); border-radius:12px; padding:.6rem .9rem .6rem .6rem;
  display:flex; align-items:center; gap:.75rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nupec-row:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(18,32,44,.1); }
.nupec-row img{
  width:46px; height:46px; border-radius:9px; object-fit:contain; background:var(--blue-pale); flex:none; padding:.2rem;
}
.nupec-row-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.nupec-row strong{ font-size:.88rem; font-weight:700; color:var(--ink); }
.nupec-row span{ font-size:.74rem; font-weight:700; color:var(--blue-deep); }
.nupec-row em{ font-style:normal; font-size:.78rem; color:var(--grey); line-height:1.4; }
.nupec-row-price{ font-weight:800; font-size:.78rem; color:var(--purple-deep); margin-top:.15rem; }

/* ---- Petshop ticker (between spa and confianza) ---- */
.shop-ticker-wrap{
  display:block; cursor:pointer;
  background:
    radial-gradient(circle at 50% 0%, rgba(139,109,246,.28) 0%, transparent 55%),
    var(--ink);
  padding-block:clamp(3rem,6vw,4.2rem); position:relative; overflow:hidden;
  transition:background .3s var(--ease);
  -webkit-transform:translateZ(0); transform:translateZ(0);
}
.shop-ticker-wrap:hover{
  background:
    radial-gradient(circle at 50% 0%, rgba(139,109,246,.4) 0%, transparent 55%),
    var(--ink);
}
.shop-ticker-head{ text-align:center; margin-bottom:clamp(1.6rem,3vw,2.2rem); }
.shop-cart-icon{
  width:clamp(48px,7vw,64px); height:auto; color:var(--white); margin-bottom:.6rem;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));
}
.shop-ticker-eyebrow{
  font-family:var(--font-sans); font-weight:700; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:.2rem;
}
.shop-ticker-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,6vw,3.4rem);
  text-transform:uppercase; letter-spacing:.02em; line-height:1;
  background:linear-gradient(100deg, var(--blue-light) 0%, var(--purple) 55%, var(--purple-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.shop-ticker{ width:100%; overflow:hidden; }
.shop-ticker-track{
  display:flex; align-items:center; gap:1.5rem; width:max-content; white-space:nowrap;
  animation:shop-ticker-scroll 30s linear infinite;
  will-change:transform; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.shop-word{
  font-family:var(--font-sans); font-weight:600; font-size:clamp(1.05rem,2vw,1.28rem); color:rgba(255,255,255,.92);
}
.shop-dot{ color:var(--purple); font-weight:700; }
.shop-chip{
  display:inline-flex; align-items:center; gap:.65rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  padding:.4rem 1.1rem .4rem .4rem; border-radius:100px;
}
.shop-chip img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.shop-chip em{ font-style:normal; font-weight:700; font-size:.94rem; color:var(--white); }
.shop-chip-ic{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--blue) 0%, var(--purple) 100%); color:var(--white);
}
.shop-chip-ic svg{ width:22px; height:22px; }
@keyframes shop-ticker-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .shop-ticker-track{ animation:none; }
}

/* ============================================================
   CONFIANZA
   ============================================================ */
.confianza{
  position:relative; padding-block:var(--gap-section); overflow:hidden;
  background:var(--stone);
}
.confianza-media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.confianza-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.confianza-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--ink) 0%, transparent 100%) top / 100% clamp(220px,32vw,380px) no-repeat,
    linear-gradient(0deg, var(--ink) 0%, transparent 100%) bottom / 100% clamp(180px,26vw,300px) no-repeat;
}
.confianza-copy{
  position:relative; z-index:1; text-align:center; max-width:640px; margin-inline:auto;
  background:rgba(234,234,230,.92);
  border-radius:28px; padding:clamp(2rem,5vw,3rem) clamp(1.5rem,4vw,2.5rem);
}
.confianza-copy .section-kicker{ text-align:center; font-size:1.05rem; }
.confianza-copy .section-title{ max-width:22ch; margin-inline:auto; }
.confianza-list{
  margin-top:2.4rem; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2rem; text-align:left;
}
@media (max-width:640px){ .confianza-list{ grid-template-columns:1fr; } }
.confianza-list li{
  display:flex; flex-direction:column; gap:.3rem; padding:.9rem 1rem .9rem 1.6rem; position:relative;
  border-radius:14px; cursor:default;
  transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), padding-left .35s var(--ease);
}
.confianza-list li::before{
  content:""; position:absolute; left:1rem; top:1.15rem; width:8px; height:8px; border-radius:50%;
  background:var(--blue); transition:background .3s var(--ease), transform .3s var(--ease);
}
.confianza-list strong{ font-family:var(--font-sans); font-size:1rem; font-weight:700; transition:color .3s var(--ease); }
.confianza-list span{ color:var(--grey); font-size:.92rem; }
.confianza-list li:hover{
  background:var(--white); transform:translateY(-3px) translateX(4px); padding-left:1.9rem;
  box-shadow:0 18px 34px rgba(18,32,44,.14);
}
.confianza-list li:hover::before{ transform:scale(1.7); }
.confianza-list li.tint-blue:hover{ box-shadow:0 18px 34px rgba(46,110,147,.18); }
.confianza-list li.tint-blue:hover strong{ color:var(--blue-deep); text-shadow:0 0 16px rgba(46,110,147,.4); }
.confianza-list li.tint-blue:hover::before{ background:var(--blue-deep); }
.confianza-list li.tint-purple:hover{ box-shadow:0 18px 34px rgba(139,109,246,.22); }
.confianza-list li.tint-purple:hover strong{ color:var(--purple-deep); text-shadow:0 0 16px rgba(139,109,246,.45); }
.confianza-list li.tint-purple:hover::before{ background:var(--purple-deep); }

/* ============================================================
   URGENCIAS
   ============================================================ */
.urgencias{
  position:relative; background:var(--ink); color:var(--white);
  padding-block:clamp(5.5rem,11vw,8.5rem); overflow:hidden;
}
.urgencias-media{ position:absolute; inset:0; z-index:0; }
.urgencias-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; opacity:.85; }
.urgencias-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(139,109,246,.22) 0%, transparent 45%),
    linear-gradient(180deg,
      var(--ink) 0%,
      rgba(18,32,44,.55) 10%,
      rgba(18,32,44,.38) 30%,
      rgba(18,32,44,.44) 55%,
      rgba(18,32,44,.62) 100%
    );
}
.urgencias-inner{ position:relative; z-index:1; max-width:680px; text-align:center; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.urgencias-tag{
  display:inline-block; padding:.6rem 1.3rem; border-radius:100px; background:var(--purple);
  box-shadow:0 8px 24px rgba(139,109,246,.5), 0 0 0 1px rgba(255,255,255,.25) inset;
  color:var(--white); font-weight:800; font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.6rem;
}
.urgencias-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(2.6rem,7.5vw,4.6rem); color:var(--white);
  text-shadow:0 0 40px rgba(139,109,246,.55), 0 3px 18px rgba(0,0,0,.6);
  animation:urgencias-pulse 2.6s ease-in-out infinite;
}
.urgencias-title em{
  font-style:normal; color:#C4B3FF;
  text-shadow:0 0 26px rgba(139,109,246,.9), 0 3px 16px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.6);
}
@keyframes urgencias-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}
@media (prefers-reduced-motion: reduce){
  .urgencias-title{ animation:none; }
}
.urgencias-lede{
  margin-top:1.2rem; font-size:clamp(1.05rem,2vw,1.25rem); font-weight:700; color:var(--white); line-height:1.6; max-width:44ch;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
  background:rgba(10,20,32,.4); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:.9rem 1.3rem;
}
.urgencias-actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.2rem; }
.urgencias-note{
  margin-top:1.8rem; font-size:1rem; font-weight:600; color:rgba(255,255,255,.95);
  max-width:52ch; margin-inline:auto; line-height:1.55;
  background:rgba(10,20,32,.55); border:1px solid rgba(255,255,255,.18);
  border-radius:18px; padding:1.1rem 1.4rem; box-shadow:0 14px 34px rgba(0,0,0,.25);
}
.urgencias-note strong{ color:var(--white); font-weight:800; }

/* ---- Urgencias: quick triage assistant ---- */
.urg-wrap{ position:relative; z-index:1; margin-top:clamp(3rem,7vw,5rem); }
.urg-divider{ text-align:center; margin-bottom:1.6rem; }
.urg-divider span{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.urg-card{
  max-width:600px; margin-inline:auto; background:var(--white); color:var(--ink);
  border-radius:28px; padding:clamp(1.8rem,5vw,2.8rem); box-shadow:0 30px 70px rgba(0,0,0,.4);
  text-align:center;
  border-top:4px solid transparent;
  background-image:linear-gradient(var(--white), var(--white)), linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%);
  background-origin:border-box; background-clip:padding-box, border-box;
}
.urg-panel{ display:none; }
.urg-panel.is-active{ display:block; animation:quiz-slide-in .45s var(--ease); }
.urg-card-title{ font-family:var(--font-sans); font-size:1.2rem; font-weight:700; }
.urg-card-copy{ color:var(--grey); margin-top:.7rem; margin-bottom:1.6rem; }
.urg-panel[data-ustep="start"] .quiz-field{ text-align:left; }
.urg-privacy{ font-size:.76rem; color:var(--grey); margin-top:1.2rem; margin-bottom:1.4rem; }

.urg-panel[data-ustep="questions"] .quiz-question{ text-align:left; }
.urg-panel[data-ustep="questions"] .quiz-step-count{ text-align:left; }

.urg-yesno{ display:flex; gap:.9rem; margin-top:1.8rem; }
.urg-yn-btn{
  flex:1; padding:1.1rem; border-radius:16px; border:1.5px solid var(--grey-line);
  font-weight:800; font-size:1.05rem; transition:.25s var(--ease);
}
.urg-yn-btn:hover{ border-color:var(--purple-deep); background:rgba(139,109,246,.08); transform:translateY(-2px); }
.urg-yn-btn--no:hover{ border-color:var(--blue); background:var(--blue-pale); }

.urg-result-badge{
  display:inline-block; padding:.5rem 1.1rem; border-radius:100px; font-weight:800;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.2rem;
}
.urg-result-badge--emergency{ background:rgba(139,109,246,.16); color:var(--purple-deep); }
.urg-result-badge--ok{ background:var(--blue-pale); color:var(--blue-deep); }
.urg-disclaimer{ font-size:.86rem; color:var(--grey); line-height:1.6; max-width:44ch; margin-inline:auto; }
.urg-disclaimer strong{ color:var(--ink); }

.urg-map{ margin-top:1.6rem; border-radius:16px; overflow:hidden; aspect-ratio:16/10; }
.urg-map img{ width:100%; height:100%; object-fit:cover; display:block; }

.urg-map-cols{
  position:relative; z-index:1; margin-top:clamp(3rem,7vw,4.5rem);
  display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;
}
@media (max-width:700px){ .urg-map-cols{ gap:.7rem; } }
.urg-map-col{
  display:flex; flex-direction:column;
  background:rgba(10,20,32,.6); border:1px solid rgba(255,255,255,.14); border-radius:22px;
  overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.urg-map-col-address{ flex:1; }
.urg-map-col-title{
  font-family:var(--font-sans); font-weight:800; font-size:1.05rem; color:var(--white);
  padding:1.1rem 1.3rem .7rem;
}
.urg-map-col-embed{ position:relative; display:block; aspect-ratio:16/10; }
.urg-map-col-embed img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.urg-map-col-embed:hover img{ transform:scale(1.04); }
.urg-map-col-badge{
  position:absolute; right:.8rem; bottom:.8rem; background:rgba(10,20,32,.82); color:var(--white);
  font-size:.72rem; font-weight:700; padding:.4rem .8rem; border-radius:100px;
}
.urg-map-col-address{ padding:1rem 1.3rem 0; color:rgba(255,255,255,.85); font-size:.88rem; line-height:1.5; }
.urg-map-col-address em{ font-style:normal; opacity:.75; }
.urg-map-col-wa{
  display:block; margin:1rem 1.3rem 1.3rem; text-align:center;
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  color:var(--white); font-weight:700; font-size:.9rem; padding:.85rem 1rem; border-radius:100px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.urg-map-col-wa:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(139,109,246,.35); }
@media (max-width:520px){
  .urg-map-col-title{ font-size:.86rem; padding:.7rem .7rem .4rem; }
  .urg-map-col-address{ padding:.6rem .7rem 0; font-size:.72rem; }
  .urg-map-col-wa{ margin:.6rem .7rem .7rem; padding:.6rem .5rem; font-size:.72rem; border-radius:14px; line-height:1.3; }
  .urg-map-col-badge{ font-size:.6rem; padding:.3rem .5rem; right:.5rem; bottom:.5rem; }
}

.urg-map-wrap{ position:relative; z-index:1; margin-top:clamp(3rem,7vw,4.5rem); }
.urg-map-embed{
  display:block; position:relative; max-width:600px; margin-inline:auto; aspect-ratio:16/9;
  border-radius:24px 24px 0 0; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.urg-map-embed img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.urg-map-embed:hover img{ transform:scale(1.04); }
.urg-map-embed-badge{
  position:absolute; right:.9rem; bottom:.9rem; background:rgba(10,20,32,.82); color:var(--white);
  font-size:.78rem; font-weight:700; padding:.5rem .9rem; border-radius:100px;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.urg-map-controls{
  max-width:600px; margin-inline:auto; background:rgba(10,20,32,.74); border-radius:0 0 24px 24px;
  border:1px solid rgba(255,255,255,.14); border-top:none;
  padding:1.1rem 1.4rem 1.4rem; box-shadow:0 24px 60px rgba(0,0,0,.35); margin-top:-1px;
}
.urg-map-controls label{ font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-light); }
.urg-map-controls select{
  display:block; width:100%; margin-top:.5rem; padding:.85rem 1.1rem; border-radius:14px;
  border:1.5px solid rgba(255,255,255,.22); font:inherit; font-weight:700; color:var(--white); background:rgba(255,255,255,.08);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23FFFFFF'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px;
}
.urg-map-controls select:focus{ outline:none; border-color:var(--purple); }
.urg-map-controls select option{ color:var(--ink); }
.urg-map-directions{
  display:flex; flex-direction:column; gap:.2rem; margin-top:1.1rem; padding:.9rem 1.1rem;
  border-radius:14px; background:rgba(255,255,255,.08);
  color:var(--white); transition:transform .25s var(--ease);
}
.urg-map-directions:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); }
.urg-map-directions strong{ font-family:var(--font-sans); font-size:.98rem; font-weight:700; }
.urg-map-directions em{ font-style:normal; opacity:.8; }
.urg-map-directions span{ font-size:.8rem; color:rgba(255,255,255,.6); }

.urg-map-contacts{ display:flex; gap:.7rem; margin-top:1rem; }
.urg-map-contacts a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.6rem .5rem; border-radius:12px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); transition:.2s var(--ease); text-align:center;
}
.urg-map-contacts a:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.urg-map-contacts a strong{ font-size:.8rem; color:var(--white); font-weight:700; letter-spacing:.02em; }
.urg-map-contacts a span{ font-size:.72rem; color:rgba(255,255,255,.6); }

.urg-contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.4rem; text-align:left; }
@media (max-width:600px){ .urg-contact-grid{ grid-template-columns:1fr; } }
.urg-contact-grid a, .urg-contact-grid .urg-contact-static{
  display:block; padding:.9rem 1rem; border-radius:14px; background:var(--blue-pale); transition:.25s var(--ease);
}
.urg-contact-grid a:hover{ background:var(--blue-pale-2); transform:translateY(-2px); }
.urg-contact-grid strong{ display:block; font-size:.86rem; font-weight:700; color:var(--ink); }
.urg-contact-grid span{ display:block; font-size:.78rem; color:var(--grey); margin-top:.2rem; line-height:1.4; }
.urg-panel .quiz-cta{ justify-content:center; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border-radius:100px; font-weight:700; font-size:.95rem;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn--primary{ background:var(--blue); color:var(--white); }
.btn--primary:hover{ background:var(--blue-deep); transform:translateY(-2px); }
#quizStart, #urgStart{
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  background-size:160% 100%; background-position:0% 50%;
  transition:background-position .4s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
#quizStart:hover, #urgStart:hover{ background-position:100% 50%; transform:translateY(-2px); }
.btn--secondary{ background:var(--white); color:var(--ink); }
.btn--secondary:hover{ transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--grey-line); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn--ghost-light{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.35); }
.btn--ghost-light:hover{ border-color:var(--white); }
.btn--urgent{
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  background-size:160% 100%; background-position:0% 50%; color:var(--white);
  transition:background-position .4s var(--ease), transform .3s var(--ease);
}
.btn--urgent:hover{ background-position:100% 50%; transform:translateY(-2px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }

/* ============================================================
   ASISTENTE / QUIZ
   ============================================================ */
.asistente{
  position:relative; overflow:hidden; padding-block:var(--gap-section);
  background:var(--white);
}
.asistente-backdrop{ position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.asistente-backdrop img{ width:auto; height:100%; max-width:none; object-fit:contain; opacity:.42; }
.asistente-backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--ink) 0%, transparent 100%) top / 100% clamp(140px,20vw,240px) no-repeat,
    linear-gradient(180deg, var(--white) 0%, rgba(255,255,255,.5) 18%, rgba(255,255,255,.55) 100%);
}
.asistente-intro{ position:relative; z-index:1; max-width:640px; margin-inline:auto; text-align:center; }
.asistente-intro .section-kicker{
  font-size:1.25rem; font-weight:800; letter-spacing:.1em;
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 50%, var(--blue-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:mundo-kicker-gradient 3.2s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .asistente-intro .section-kicker{ animation:none; }
}
.asistente-intro .section-lede{
  margin-inline:auto; color:var(--ink); font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.35rem); line-height:1.55;
}
.asistente-intro strong{ color:var(--ink); }
.asistente-intro .section-title{ font-family:var(--font-accent); text-transform:uppercase; letter-spacing:.02em; max-width:none; color:var(--ink); }

.asistente-deco{ position:absolute; z-index:0; color:var(--blue-deep); opacity:.1; pointer-events:none; }
.asistente-deco svg{ width:100%; height:100%; display:block; }
.asistente-deco.is-amber{ color:var(--purple); }
.asistente-deco--paw1{ width:64px; top:8%; left:6%; --r:-18deg; animation:deco-float 7s ease-in-out infinite; }
.asistente-deco--paw2{ width:40px; bottom:14%; left:11%; --r:24deg; animation:deco-float 8.5s ease-in-out infinite 1.2s; }
.asistente-deco--bowl{ width:70px; top:14%; right:8%; --r:0deg; animation:deco-float 9s ease-in-out infinite .5s; }
.asistente-deco--stetho{ width:86px; bottom:8%; right:6%; --r:6deg; animation:deco-float 7.5s ease-in-out infinite 2s; }
.asistente-deco--bone{ width:56px; top:46%; left:3%; --r:-12deg; animation:deco-float 8s ease-in-out infinite .8s; }
.asistente-deco--cross{ width:34px; top:40%; right:4%; --r:0deg; animation:deco-float 6.5s ease-in-out infinite 1.6s; }
@keyframes deco-float{
  0%, 100%{ transform:translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform:translateY(-12px) rotate(var(--r, 0deg)); }
}
@media (max-width:760px){
  .asistente-deco--stetho, .asistente-deco--bone{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .asistente-deco{ animation:none !important; }
}

.quiz{
  position:relative; z-index:1; overflow:hidden;
  margin-top:clamp(2.5rem,5vw,4rem); max-width:440px; margin-inline:auto;
  background:rgba(255,255,255,.97);
  border-radius:28px; padding:clamp(1.5rem,4.2vw,2.6rem);
  box-shadow:0 34px 80px rgba(18,32,44,.22), 0 1px 0 rgba(255,255,255,.6) inset;
}
.quiz-brand{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:calc(-1 * clamp(1.5rem,4.2vw,2.6rem)) calc(-1 * clamp(1.5rem,4.2vw,2.6rem)) 1.7rem;
  padding:1.15rem clamp(1.5rem,4.2vw,2.6rem);
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  border-radius:24px 24px 0 0;
}
.quiz-brand img{
  width:24px; height:24px; object-fit:contain; background:var(--white);
  border-radius:50%; padding:5px; box-shadow:0 2px 8px rgba(18,32,44,.25);
}
.quiz-brand span{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.96);
}
.quiz-panel{ display:none; }
.quiz-panel.is-active{ display:block; animation:quiz-slide-in .45s var(--ease); }
@keyframes quiz-slide-in{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:translateX(0);} }

.quiz-hero-img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:18px; margin-bottom:1.6rem; }
.quiz-start-copy{ color:var(--grey); margin-bottom:1.4rem; }

.quiz-panel[data-step="start"]{ text-align:center; }
.quiz-cover{
  position:relative; border-radius:24px; padding:9px; margin:.6rem 0 1.7rem;
  background:linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 35%, var(--purple) 72%, var(--purple-deep) 100%);
  background-size:220% 220%;
  animation:quiz-cover-shift 7s ease-in-out infinite;
  box-shadow:0 20px 44px rgba(139,109,246,.4);
}
.quiz-cover img{ display:block; width:100%; aspect-ratio:4/3.1; object-fit:cover; border-radius:17px; }
.quiz-cover-badge{
  position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; white-space:nowrap;
  background:var(--white); color:var(--purple-deep); font-weight:800; font-size:.7rem; letter-spacing:.03em;
  padding:.45rem .95rem; border-radius:100px; box-shadow:0 10px 20px rgba(18,32,44,.3);
}
.quiz-cover-badge svg{ width:15px; height:15px; flex:none; }
@keyframes quiz-cover-shift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.quiz-panel[data-step="start"] #quizStart{
  animation:quiz-start-btn-pulse 2.4s ease-in-out infinite;
}
@keyframes quiz-start-btn-pulse{
  0%,100%{ box-shadow:0 8px 20px rgba(139,109,246,.35); }
  50%{ box-shadow:0 10px 28px rgba(139,109,246,.6); }
}
@media (prefers-reduced-motion: reduce){
  .quiz-cover{ animation:none; }
  .quiz-panel[data-step="start"] #quizStart{ animation:none; }
}

.quiz-field{ margin-top:1.5rem; }
.quiz-field label{ display:block; font-size:.82rem; font-weight:700; color:var(--grey); margin-bottom:.5rem; }
.quiz-field label em{ font-style:normal; font-weight:500; opacity:.75; }
.quiz-field input, .quiz-field select{
  width:100%; padding:.9rem 1.1rem; border-radius:14px; border:1.5px solid var(--grey-line);
  font:inherit; font-weight:600; color:var(--ink); background:var(--white); transition:border-color .25s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.quiz-field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7680'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px;
}
.quiz-field input:focus, .quiz-field select:focus{ outline:none; border-color:var(--blue); }

.quiz-species{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.quiz-species-btn{
  padding:1rem .5rem; border-radius:16px; border:none;
  font:inherit; font-weight:700; font-size:.82rem; color:var(--blue-deep); background:var(--blue-pale);
  transition:.25s var(--ease); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
}
.quiz-species-btn svg{ width:26px; height:26px; }
.quiz-species-btn:hover{ transform:translateY(-3px); }
.quiz-species-btn.is-selected{
  background:linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  color:var(--white); box-shadow:0 12px 26px rgba(139,109,246,.4); transform:translateY(-3px);
}

.quiz-dots{ display:flex; gap:.4rem; margin-top:.2rem; }
.quiz-dots span{ width:7px; height:7px; border-radius:50%; background:var(--blue-pale-2); transition:background .3s var(--ease), transform .3s var(--ease); }
.quiz-dots span.is-done{ background:var(--purple); }
.quiz-dots span.is-current{ background:var(--blue); transform:scale(1.5); box-shadow:0 0 0 4px var(--blue-pale); }

.quiz-progress{ height:8px; background:var(--blue-pale); border-radius:100px; overflow:hidden; margin-top:1.2rem; }
.quiz-progress-bar{
  height:100%; width:0%; border-radius:100px; transition:width .4s var(--ease);
  background:linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%);
}
.quiz-step-count{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--purple-deep); margin-top:1rem; }
.quiz-question{ font-family:var(--font-sans); font-size:clamp(1.15rem,2.7vw,1.45rem); font-weight:700; margin-top:.6rem; }

.quiz-options{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem; }
.quiz-option{
  text-align:left; padding:1rem 1.2rem; border-radius:16px; border:2px solid var(--blue-pale-2);
  font-weight:600; transition:.2s var(--ease); display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:var(--white);
}
.quiz-option:hover{ border-color:var(--purple); transform:translateY(-2px); }
.quiz-option:active{ transform:scale(.98); }
.quiz-option.is-selected{
  border-color:transparent; color:var(--white);
  background:linear-gradient(100deg, var(--blue) 0%, var(--purple) 100%);
  box-shadow:0 12px 26px rgba(139,109,246,.4);
}
.quiz-option-check{
  width:22px; height:22px; border-radius:50%; border:2px solid var(--blue-pale-2); flex:none; position:relative;
  transition:.2s var(--ease);
}
.quiz-option.is-selected .quiz-option-check{ border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.22); }
.quiz-option.is-selected .quiz-option-check::after{
  content:""; position:absolute; left:50%; top:44%; width:5px; height:9px; border:solid var(--white);
  border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg);
}

.quiz-nav{ display:flex; justify-content:space-between; margin-top:2rem; }

.quiz-results-name{ text-align:center; font-family:var(--font-sans); font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:1.4rem; }

#scoreGradient stop:first-child{ stop-color:var(--blue); }
#scoreGradient stop:last-child{ stop-color:var(--purple); }
.quiz-score{
  position:relative; width:164px; height:164px; margin-inline:auto;
  background:radial-gradient(circle, var(--purple-pale) 0%, transparent 70%);
}
.quiz-score-ring{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--blue-pale); stroke-width:10; }
.ring-fill{ fill:none; stroke:url(#scoreGradient); stroke-width:10; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 1.1s var(--ease); }
.quiz-score-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:2rem; font-weight:800; color:var(--blue-deep);
}
.quiz-score-label{ text-align:center; color:var(--grey); font-size:.88rem; margin-top:1rem; }

.quiz-results-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:2.2rem; }
@media (max-width:520px){ .quiz-results-grid{ grid-template-columns:1fr; } }
.quiz-results-col h5{ font-family:var(--font-sans); font-size:.95rem; font-weight:700; margin-bottom:.7rem; }
.quiz-results-col ul{ display:flex; flex-direction:column; gap:.55rem; }
.quiz-results-col li{ font-size:.92rem; color:var(--grey); padding-left:1.9rem; position:relative; line-height:1.45; }
.quiz-results-col li::before{
  content:"✓"; position:absolute; left:0; top:-.05em; width:20px; height:20px; border-radius:50%;
  background:var(--blue); color:var(--white); font-size:.68rem; font-weight:900; line-height:20px; text-align:center;
}
#quizImprove li::before{ content:"→"; background:var(--purple); }

.quiz-route{ margin-top:2.2rem; }
.quiz-route h5{ font-family:var(--font-sans); font-size:.95rem; font-weight:700; }
.quiz-plan-detail{ font-size:.92rem; color:var(--ink); line-height:1.55; margin-top:.5rem; }
.quiz-route-hint{ font-size:.82rem; color:var(--grey); margin-top:.5rem; margin-bottom:.9rem; }
.quiz-contact-hint{ font-size:.82rem; color:var(--grey); margin-top:1rem; }
.quiz-restart-link{
  display:block; margin:1.2rem auto 0; font-size:.84rem; font-weight:700; color:var(--grey);
  text-decoration:underline; text-underline-offset:3px;
}
.quiz-restart-link:hover{ color:var(--ink); }
.quiz-route-chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.quiz-route-chips button{
  padding:.55rem 1.1rem; border-radius:100px; border:1.5px solid transparent;
  background:linear-gradient(100deg, var(--blue-pale) 0%, var(--purple-pale) 100%);
  color:var(--blue-deep); font-size:.85rem; font-weight:700; transition:.25s var(--ease);
  cursor:pointer;
}
.quiz-route-chips button:hover{ transform:translateY(-2px); }
.quiz-route-chips button.is-off{
  background:transparent; border-color:var(--grey-line); color:var(--grey); text-decoration:line-through; opacity:.65;
}
.quiz-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--blue-light); color:var(--blue-dark); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:2.5rem; border-bottom:1px solid rgba(10,29,61,.18);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:2.2rem; } }
.footer-brand{ display:flex; flex-direction:column; gap:.6rem; }
.footer-brand-icons{ display:flex; align-items:center; justify-content:flex-start; gap:.7rem; margin-bottom:.2rem; }
.footer-spa-icon{ width:32px; height:32px; color:var(--purple-deep); }
.footer-brand .brand-mark{ color:var(--blue-dark); }
.footer-brand .brand-word{ font-family:var(--font-sans); font-weight:700; font-size:1.1rem; color:var(--blue-dark); }
.footer-brand .brand-word .bw-2{ color:var(--white); text-shadow:0 1px 3px rgba(10,29,61,.4); }
.footer-brand p{ color:rgba(10,29,61,.75); font-size:.88rem; max-width:24ch; margin-top:.3rem; }
.footer-spa-badge{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.7rem;
  padding:.3rem .8rem .3rem .4rem; border-radius:100px;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(117,84,214,.25);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.footer-spa-badge:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(18,32,44,.18); }
.footer-spa-badge .spa-badge-icon{ width:20px; height:20px; color:var(--purple-deep); }
.footer-spa-badge .spa-badge-word{ font-size:.95rem; color:var(--purple-deep); }
.footer-col h6{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white); font-weight:800; margin-bottom:.7rem;
  text-shadow:0 1px 3px rgba(10,29,61,.4);
}
.footer-col p{ font-size:.92rem; line-height:1.6; color:var(--blue-dark); font-weight:500; }
.footer-line{ display:flex; align-items:flex-start; gap:.55rem; margin-top:.9rem; }
.footer-line:first-of-type{ margin-top:.7rem; }
.footer-ic{ width:17px; height:17px; flex:none; margin-top:.2rem; color:var(--white); }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-block:1.6rem; font-size:.82rem; color:rgba(10,29,61,.7); }
.footer-bottom a:hover{ color:var(--blue-dark); }

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.wa-float{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:800; }
.wa-float-btn{
  width:56px; height:56px; border-radius:50%; background:#25D366; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(18,32,44,.35); transition:transform .25s var(--ease);
}
.wa-float-btn:hover{ transform:scale(1.08); }
.wa-float-btn svg{ width:28px; height:28px; color:var(--white); }
.wa-float-menu{
  position:absolute; right:0; bottom:68px; width:220px;
  background:var(--white); border-radius:16px; box-shadow:0 20px 50px rgba(18,32,44,.28);
  padding:.6rem; display:flex; flex-direction:column; gap:.4rem;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:.25s var(--ease);
}
.wa-float.is-open .wa-float-menu, .ig-float.is-open .wa-float-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }
.wa-float-menu a{
  display:flex; flex-direction:column; padding:.7rem .9rem; border-radius:12px;
  background:var(--blue-pale); transition:.2s var(--ease);
}
.wa-float-menu a:hover{ background:var(--purple-pale); transform:translateY(-1px); }
.wa-float-menu a strong{ font-size:.88rem; color:var(--ink); }
.wa-float-menu a span{ font-size:.78rem; color:var(--grey); }
@media (max-width:600px){
  .wa-float{ right:.9rem; bottom:.9rem; }
}

/* ============================================================
   FLOATING INSTAGRAM / FACEBOOK BUTTONS
   ============================================================ */
.social-float-btn{
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--white);
  box-shadow:0 8px 22px rgba(18,32,44,.3); transition:transform .25s var(--ease);
}
.social-float-btn:hover{ transform:scale(1.08); }
.social-float-btn svg{ width:22px; height:22px; }

.fb-float{ position:fixed; right:1.475rem; bottom:8.55rem; z-index:800; background:#1877F2; }
.ig-float{ position:fixed; right:1.475rem; bottom:5.2rem; z-index:800; }
.ig-float .social-float-btn{
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.ig-float-menu{ bottom:56px; }

@media (max-width:600px){
  .fb-float{ right:1.275rem; bottom:8.35rem; }
  .ig-float{ right:1.275rem; bottom:5rem; }
}