/* ══════════════════════════════════════
   TOKENS — light-first palette
══════════════════════════════════════ */
:root{
  --teal:   #00c9b1;
  --teal-d: #009e8e;
  --teal-l: #e6faf8;
  --sky:    #0ea5e9;
  --sky-l:  #e0f2fe;
  --ink:    #0d2137;
  --ink2:   #1a3454;
  --body:   #3d5166;
  --muted:  #6b8599;
  --bg:     #f5fffe;       /* very light teal tint — main bg */
  --bg2:    #edfcfa;       /* slightly deeper for alternating */
  --white:  #ffffff;
  --edge:   rgba(0,201,177,.16);
  --edge2:  rgba(0,201,177,.09);
  --grad:   linear-gradient(135deg,var(--teal) 0%,var(--sky) 100%);
  --shadow-card: 0 2px 16px rgba(0,180,160,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-hover: 0 12px 40px rgba(0,201,177,.15), 0 2px 8px rgba(0,0,0,.06);
  --ease: cubic-bezier(.16,1,.3,1);
  --r: 16px; --r2: 22px; --r3: 32px;
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--body);
  overflow-x:hidden;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:2px}

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.section{padding:100px 0}
.center{text-align:center}
.center .s-sub{margin:0 auto}

/* ══════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--teal);margin-bottom:14px;
}
.eyebrow::before{content:'';display:block;width:26px;height:2px;background:var(--grad);border-radius:1px;flex-shrink:0}
.s-title{
  font-family:'Fraunces',serif;
  font-size:clamp(2rem,4.8vw,9rem);
  font-weight:900;line-height:1.1;
  color:var(--ink);margin-bottom:14px;
}
.s-sub{font-size:1rem;color:var(--muted);line-height:1.8;max-width:560px}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ital{font-style:italic}

/* ══════════════════════════════════════
   REVEAL
══════════════════════════════════════ */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-rv="l"]{transform:translateX(-28px)}
[data-rv="r"]{transform:translateX(28px)}
[data-rv="s"]{transform:scale(.96) translateY(16px)}
[data-rv].vis{opacity:1;transform:none}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  border-radius:50px;padding:13px 28px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:.9rem;cursor:pointer;border:none;
  transition:transform .2s var(--ease),box-shadow .2s;white-space:nowrap;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 24px rgba(0,201,177,.3)}
.btn-primary:hover{box-shadow:0 8px 40px rgba(0,201,177,.5)}
.btn-outline{background:#fff;color:var(--teal);border:1.5px solid var(--edge);box-shadow:var(--shadow-card)}
.btn-outline:hover{border-color:var(--teal);background:var(--teal-l)}
.btn-sm{padding:10px 22px;font-size:.84rem}
.btn-wsp{background:#25d366;color:#fff;box-shadow:0 4px 20px rgba(37,211,102,.3)}
.btn-wsp:hover{box-shadow:0 8px 32px rgba(37,211,102,.5)}

/* ══════════════════════════════════════
   NAVBAR  (light, frosted on scroll)
══════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;transition:all .4s var(--ease);
}
#nav::before{
  content:'';position:absolute;inset:0;
  background:rgba(245,255,254,.0);backdrop-filter:blur(0);
  border-bottom:1px solid transparent;transition:all .4s;
}
#nav.sc{padding:12px 0}
#nav.sc::before{
  background:rgba(245,255,254,.92);backdrop-filter:blur(20px) saturate(1.6);
  border-color:var(--edge);
  box-shadow:0 2px 24px rgba(0,201,177,.08);
}
.nav-in{
  max-width:1280px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:1;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{
  width:40px;height:40px;border-radius:12px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;box-shadow:0 4px 16px rgba(0,201,177,.35);flex-shrink:0;
}
.logo-text{font-family:'Fraunces',serif;font-weight:900;font-size:1.2rem;color:var(--ink)}
.logo-text em{color:var(--teal);font-style:normal}
nav ul{display:flex;gap:32px;list-style:none}
nav ul a{
  color:var(--body);font-size:.86rem;font-weight:600;
  position:relative;padding-bottom:3px;transition:color .2s;
}
nav ul a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1.5px;background:var(--grad);
  border-radius:1px;transition:width .3s var(--ease);
}
nav ul a:hover{color:var(--ink)}
nav ul a:hover::after{width:100%}
.nav-btns{display:flex;gap:9px;align-items:center}
.hbg{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.hbg span{display:block;width:22px;height:2px;background:var(--ink);border-radius:1px;transition:all .3s}

@media(max-width:900px){
  nav ul,.nav-btns{display:none}
  .hbg{display:flex}
  nav ul.open{
    display:flex;
    flex-direction:column;
    gap:32px;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(245,255,254,0.92);
    backdrop-filter:blur(24px) saturate(1.5);
    box-shadow:0 8px 40px rgba(0,201,177,.13), 0 0 0 100vmax rgba(0,0,0,.08);
    padding:110px 32px 60px 32px;
    z-index:1001;
    animation:menuSlideIn .45s var(--ease);
    overflow-y:auto;
  }
  nav ul.open a{
    font-size:1.45rem;
    color:var(--ink2);
    font-weight:800;
    letter-spacing:0.01em;
    padding:18px 0;
    border-radius:18px;
    transition:background .18s, color .18s, box-shadow .18s;
    box-shadow:0 2px 12px rgba(0,201,177,.04);
    margin:0 0 0 0;
    text-align:left;
  }
  nav ul.open a:active, nav ul.open a:focus{
    background:var(--teal-l);
    color:var(--teal);
  }
  nav ul.open a:hover{
    background:var(--teal-l);
    color:var(--teal);
    box-shadow:0 4px 18px rgba(0,201,177,.08);
  }
  /* WhatsApp FAB arriba del menú móvil */
  .wsp-fab{
    position:fixed!important;
    right:24px;bottom:32px;
    z-index:1100;
    box-shadow:0 4px 24px rgba(37,211,102,.18);
    transition:box-shadow .2s;
  }
  .wsp-fab:active{box-shadow:0 2px 8px rgba(37,211,102,.18);}
}

@keyframes menuSlideIn{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:none}
}

/* ══════════════════════════════════════
   HERO  — light with soft teal accents
══════════════════════════════════════ */
#hero{
  min-height:100vh;display:flex;align-items:center;
  background:var(--bg);position:relative;overflow:hidden;
}
/* Soft bg shapes */
.hero-blob1{
  position:absolute;top:-200px;right:-150px;width:700px;height:700px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,201,177,.1) 0%,transparent 65%);
  pointer-events:none;
}
.hero-blob2{
  position:absolute;bottom:-150px;left:-100px;width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.08) 0%,transparent 65%);
  pointer-events:none;
}
/* Dot grid — very subtle */
.hero-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,180,160,.18) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 80%);
  pointer-events:none;opacity:.6;
}

.hero-in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  max-width:1160px;margin:0 auto;padding:110px 32px 80px;width:100%;
}

/* Badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--teal-l);border:1px solid rgba(0,201,177,.3);
  border-radius:50px;padding:6px 16px 6px 6px;
  margin-bottom:26px;animation:fadeUp .5s var(--ease) both;
}
.badge-dot{
  width:26px;height:26px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  position:relative;
}
.badge-dot::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid rgba(0,201,177,.35);
  animation:ripple 2s ease-out infinite;
}
@keyframes ripple{0%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
.hero-badge span{font-size:.75rem;font-weight:700;color:var(--teal-d);letter-spacing:.3px}

/* Headline */
.hero-h1{
  font-family:'Fraunces',serif;
  font-size:clamp(2.8rem,5vw,4.4rem);
  font-weight:900;line-height:1.0;
  color:var(--ink);margin-bottom:22px;
  animation:fadeUp .55s .1s var(--ease) both;
}
.tw-line{
  display:block;position:relative;
  min-height:1.05em;overflow:hidden;
}
.tw-el{
  display:block;position:absolute;left:0;top:0;
  background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tw-el.in {animation:twIn  .42s var(--ease) forwards}
.tw-el.out{animation:twOut .32s ease-in  forwards}
@keyframes twIn {from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:translateY(0)}}
@keyframes twOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-105%)}}

.hero-p{
  font-size:1.05rem;color:var(--body);line-height:1.82;
  max-width:470px;margin-bottom:34px;
  animation:fadeUp .55s .2s var(--ease) both;
}
.hero-p strong{color:var(--ink);font-weight:700}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp .55s .3s var(--ease) both}

/* Proof */
.proof-row{
  display:flex;align-items:center;gap:14px;
  margin-top:32px;animation:fadeUp .55s .42s var(--ease) both;
}
.proof-avs{display:flex}
.proof-av{
  width:34px;height:34px;border-radius:50%;
  border:2.5px solid var(--bg);
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#fff;
  margin-left:-10px;flex-shrink:0;
}
.proof-av:first-child{margin-left:0}
.proof-stars{color:#f59e0b;font-size:.75rem;letter-spacing:1px}
.proof-txt{font-size:.82rem;color:var(--muted)}
.proof-txt strong{color:var(--ink)}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ── Dashboard card (light skin) ── */
.dash-wrap{position:relative;animation:fadeUp .7s .2s var(--ease) both}
.dash-card{
  background:var(--white);
  border:1px solid rgba(0,201,177,.18);
  border-radius:var(--r3);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.1),0 4px 20px rgba(0,201,177,.1);
}
.dash-bar{
  background:var(--teal-l);border-bottom:1px solid var(--edge);
  padding:12px 18px;display:flex;align-items:center;gap:7px;
}
.db-dot{width:10px;height:10px;border-radius:50%}
.db-dot:nth-child(1){background:#ff5f57}
.db-dot:nth-child(2){background:#ffbd2e}
.db-dot:nth-child(3){background:#28ca41}
.db-url{
  flex:1;margin-left:10px;background:rgba(255,255,255,.7);
  border-radius:6px;padding:4px 12px;
  font-size:.68rem;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.db-url i{color:var(--teal);font-size:.6rem}
.dash-body{padding:18px}

.dash-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.kpi{
  background:linear-gradient(135deg,var(--teal-l),var(--sky-l));
  border:1px solid var(--edge);border-radius:14px;padding:12px 13px;
}
.kpi-val{font-family:'Fraunces',serif;font-size:1.45rem;font-weight:900;color:var(--ink);line-height:1}
.kpi-val em{color:var(--teal);font-style:normal;font-size:.95rem}
.kpi-lbl{font-size:.65rem;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.kpi-trend{font-size:.65rem;color:#16a34a;margin-top:2px;font-weight:600}

.dash-pets{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.pet-row{
  background:var(--bg);border:1px solid var(--edge2);
  border-radius:11px;padding:9px 13px;
  display:flex;align-items:center;gap:9px;
}
.pet-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.pet-info{flex:1}
.pet-info h6{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1}
.pet-info p{font-size:.66rem;color:var(--muted);margin-top:2px}
.pet-tag{font-size:.61rem;font-weight:700;border-radius:50px;padding:3px 10px;flex-shrink:0}
.tag-ok  {background:rgba(22,163,74,.1);color:#16a34a}
.tag-warn{background:rgba(245,158,11,.12);color:#d97706}
.tag-new {background:rgba(0,201,177,.12);color:var(--teal-d)}

.dash-prog{background:var(--bg);border:1px solid var(--edge2);border-radius:11px;padding:13px}
.pr{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pr:last-child{margin:0}
.pr-lbl{font-size:.67rem;color:var(--muted);width:70px;flex-shrink:0}
.pr-track{flex:1;height:5px;background:rgba(0,0,0,.06);border-radius:3px;overflow:hidden}
.pr-fill{height:100%;border-radius:3px;animation:fillBar 1.8s var(--ease) forwards;width:0}
.prf1{background:var(--grad);animation-delay:.5s}
.prf2{background:linear-gradient(90deg,#f472b6,#a855f7);animation-delay:.7s}
.prf3{background:linear-gradient(90deg,#fbbf24,#f97316);animation-delay:.9s}
@keyframes fillBar{to{width:var(--w)}}
.pr-pct{font-size:.67rem;font-weight:700;color:var(--ink);width:27px;text-align:right}

/* Floating chips — light */
.fchip{
  position:absolute;background:var(--white);
  border:1px solid var(--edge);border-radius:14px;
  padding:10px 14px;backdrop-filter:blur(12px);
  box-shadow:0 8px 28px rgba(0,0,0,.1);
  display:flex;align-items:center;gap:10px;
}
.fchip-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.fchip-txt p{font-size:.62rem;color:var(--muted)}
.fchip-txt strong{font-size:.78rem;color:var(--ink);display:block}
.fchip1{top:-18px;right:-20px;animation:chipY 5s ease-in-out infinite}
.fchip2{bottom:-18px;left:-22px;animation:chipY 5s ease-in-out infinite 2.5s}

@keyframes chipY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@media(max-width:960px){
  .hero-in{grid-template-columns:1fr;padding-top:120px}
  .dash-wrap{display:none}
}

/* ══════════════════════════════════════
   LOGOS STRIP  — infinite dual-row
══════════════════════════════════════ */
.logos-strip{
  padding:36px 0;
  background:var(--white);
  border-top:1px solid var(--edge2);
  border-bottom:1px solid var(--edge2);
  overflow:hidden;position:relative;
}
/* Fade edges for infinite feel */
.logos-strip::before,.logos-strip::after{
  content:'';position:absolute;top:0;bottom:0;width:180px;z-index:2;pointer-events:none;
}
.logos-strip::before{left:0;background:linear-gradient(90deg,var(--white) 0%,transparent 100%)}
.logos-strip::after{right:0;background:linear-gradient(270deg,var(--white) 0%,transparent 100%)}

.logos-eyebrow{
  text-align:center;font-size:.68rem;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;
}
.logos-rows{display:flex;flex-direction:column;gap:16px}
.logos-track-wrap{overflow:hidden}
.logos-track{display:flex;gap:14px;width:max-content;align-items:center}
.row1 .logos-track{animation:scrollL 30s linear infinite}
.row2 .logos-track{animation:scrollR 24s linear infinite}
.logos-track-wrap:hover .logos-track{animation-play-state:paused}
@keyframes scrollL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scrollR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

/* Logo pill card */
.logo-pill{
  display:flex;align-items:center;gap:11px;
  background:var(--bg);border:1px solid var(--edge2);
  border-radius:50px;padding:8px 18px 8px 8px;
  flex-shrink:0;
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
  cursor:default;
}
.logo-pill:hover{
  background:var(--teal-l);border-color:rgba(0,201,177,.3);
  transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,201,177,.15);
}
.logo-pill img{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  background:var(--white);border:1.5px solid var(--edge);flex-shrink:0;
}
.logo-pill span{
  font-size:.78rem;font-weight:700;color:var(--body);white-space:nowrap;
}

/* ══════════════════════════════════════
   STATS BAND  — light teal strip
══════════════════════════════════════ */
.stats-band{
  background:linear-gradient(135deg,var(--teal) 0%,var(--sky) 100%);
  padding:60px 0;position:relative;overflow:hidden;
}
.stats-band::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.stat{text-align:center;padding:24px 16px;border-right:1px solid rgba(255,255,255,.2)}
.stat:last-child{border:none}
.stat-num{
  font-family:'Fraunces',serif;font-size:2.8rem;font-weight:900;
  color:#fff;line-height:1;
}
.stat-num sub{font-size:1.5rem;vertical-align:baseline}
.stat-lbl{font-size:.78rem;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.8px;margin-top:7px}
@media(max-width:768px){
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}
}

/* ══════════════════════════════════════
   BENEFITS  — light cards
══════════════════════════════════════ */
#beneficios{background:var(--bg)}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.ben-card{
  background:var(--white);
  border:1px solid var(--edge2);
  border-radius:var(--r2);padding:28px 24px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
  cursor:default;
}
.ben-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(0,201,177,.3)}

/* top accent bar on hover */
.ben-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:0;background:var(--grad);
  transition:height .3s var(--ease);border-radius:var(--r2) var(--r2) 0 0;
}
.ben-card:hover::before{height:3px}

/* Featured cards */
.ben-card.feat-teal{
  background:linear-gradient(135deg,var(--teal) 0%,#00b8a0 100%);
  border:none;color:#fff;
}
.ben-card.feat-teal::before{display:none}
.ben-card.feat-teal:hover{box-shadow:0 16px 48px rgba(0,201,177,.35)}
.ben-card.feat-teal .ben-ico{background:rgba(255,255,255,.2);color:#fff}
.ben-card.feat-teal h3,.ben-card.feat-teal p{color:#fff}
.ben-card.feat-teal h3{color:#fff}
.ben-card.feat-teal p{color:rgba(255,255,255,.85)}

.ben-card.feat-sky{
  background:linear-gradient(135deg,var(--sky) 0%,#0284c7 100%);
  border:none;
}
.ben-card.feat-sky::before{display:none}
.ben-card.feat-sky:hover{box-shadow:0 16px 48px rgba(14,165,233,.35)}
.ben-card.feat-sky .ben-ico{background:rgba(255,255,255,.2);color:#fff}
.ben-card.feat-sky h3,.ben-card.feat-sky p{color:#fff}
.ben-card.feat-sky p{color:rgba(255,255,255,.85)}

.ben-card.dashed{
  border:2px dashed rgba(0,201,177,.25)!important;
  background:var(--teal-l)!important;
  box-shadow:none;
}
.ben-card.dashed::before{display:none}
.ben-card.dashed:hover{background:rgba(0,201,177,.08)!important}

.ben-ico{
  width:50px;height:50px;border-radius:14px;
  background:var(--teal-l);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:18px;
  transition:transform .3s;
}
.ben-card:hover .ben-ico{transform:scale(1.1) rotate(-5deg)}
.ben-card h3{
  font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;
  color:var(--ink);margin-bottom:9px;line-height:1.25;
}
.ben-card p{font-size:.87rem;color:var(--body);line-height:1.7}

@media(max-width:900px){.ben-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ben-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════ */
#como{background:var(--white)}
.how-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:relative;margin-top:64px}
.how-row::before{
  content:'';position:absolute;top:40px;
  left:calc(12.5% + 8px);right:calc(12.5% + 8px);
  height:1px;background:var(--grad);opacity:.25;z-index:0;
}
.how-step{text-align:center;padding:0 14px;position:relative;z-index:1}
.how-num{
  width:56px;height:56px;border-radius:50%;
  background:var(--grad);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:1.3rem;font-weight:900;color:#fff;
  box-shadow:0 4px 20px rgba(0,201,177,.3);position:relative;
}
.how-num::before{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(0,201,177,.2);
}
.how-step h4{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:8px}
.how-step p{font-size:.85rem;color:var(--body);line-height:1.65}
@media(max-width:768px){
  .how-row{grid-template-columns:1fr 1fr;gap:32px}
  .how-row::before{display:none}
}

/* ══════════════════════════════════════
   VIDEOS  — light section
══════════════════════════════════════ */
#videos{background:var(--bg2)}
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.vid-card{
  background:var(--white);border:1px solid var(--edge2);
  border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.vid-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.vid-header{
  padding:12px 16px;display:flex;align-items:center;gap:9px;
  border-bottom:1px solid var(--edge2);background:var(--teal-l);
}
.vid-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);flex-shrink:0}
.vid-header span{font-size:.84rem;font-weight:700;color:var(--ink)}
.vid-card iframe{width:100%;aspect-ratio:16/9;border:none;display:block}
@media(max-width:900px){.vid-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vid-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
#testi{background:var(--white)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{
  background:var(--bg);border:1px solid var(--edge2);
  border-radius:var(--r2);padding:28px 24px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.testi-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.testi-q{
  position:absolute;top:16px;right:18px;
  font-family:'Fraunces',serif;font-size:4.5rem;font-weight:900;
  line-height:1;color:rgba(0,201,177,.12);pointer-events:none;
}
.testi-stars{font-size:.78rem;color:#f59e0b;letter-spacing:2px;margin-bottom:12px}
.testi-card p{font-size:.9rem;color:var(--body);line-height:1.78;font-style:italic;margin-bottom:20px}
.testi-foot{display:flex;align-items:center;gap:12px}
.testi-av{
  width:44px;height:44px;border-radius:50%;
  background-size:cover;background-position:center;
  border:2px solid var(--edge);flex-shrink:0;
}
.testi-name{font-size:.9rem;font-weight:700;color:var(--ink)}
.testi-role{font-size:.75rem;color:var(--teal-d);margin-top:2px;font-weight:600}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.testi-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════
   CTA  — teal gradient
══════════════════════════════════════ */
#contacto{
  background:linear-gradient(135deg,#00c9b1 0%,#0ea5e9 100%);
  padding:110px 0;position:relative;overflow:hidden;
}
#contacto::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.cta-box{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center}
.cta-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  border-radius:50px;padding:6px 18px;
  font-size:.76rem;font-weight:700;color:#fff;
  letter-spacing:.3px;margin-bottom:24px;
}
.cta-h2{
  font-family:'Fraunces',serif;
  font-size:clamp(2rem,4vw,3.1rem);font-weight:900;
  color:#fff;line-height:1.1;margin-bottom:14px;
}
.cta-sub{font-size:1rem;color:rgba(255,255,255,.82);line-height:1.75;margin-bottom:36px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-white-solid{
  background:#fff;color:var(--teal-d);
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.btn-white-solid:hover{box-shadow:0 8px 32px rgba(0,0,0,.2)}
.btn-ghost-white{
  background:rgba(255,255,255,.15);color:#fff;
  border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(8px);
}
.btn-ghost-white:hover{background:rgba(255,255,255,.25)}
.cta-links{
  display:flex;align-items:center;justify-content:center;gap:20px;
  flex-wrap:wrap;margin-top:28px;
}
.cta-lnk{
  display:flex;align-items:center;gap:7px;
  font-size:.84rem;color:rgba(255,255,255,.8);transition:color .2s;
}
.cta-lnk:hover{color:#fff}
.cta-lnk i{font-size:.82rem}
.cta-div{width:1px;height:12px;background:rgba(255,255,255,.3)}
.cta-author{margin-top:32px;font-size:.82rem;color:rgba(255,255,255,.65)}
.cta-author strong{color:rgba(255,255,255,.9)}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{
  background:var(--ink);
  border-top:1px solid rgba(255,255,255,.06);
  padding:56px 0 28px;
}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:48px}
.ft-p{font-size:.86rem;color:rgba(255,255,255,.42);line-height:1.75;margin-top:14px;max-width:270px}
.ft-socs{display:flex;gap:8px;margin-top:18px}
.ft-soc{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.45);font-size:.85rem;transition:all .2s;
}
.ft-soc:hover{background:var(--grad);color:#fff;border-color:transparent}
.ft-col h5{
  font-family:'Fraunces',serif;color:#fff;
  font-size:.84rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;
}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-col ul li a{
  font-size:.85rem;color:rgba(255,255,255,.42);
  display:flex;align-items:center;gap:8px;transition:color .2s;
}
.ft-col ul li a:hover{color:var(--teal)}
.ft-col ul li a i{font-size:.78rem;width:13px}
.ft-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:22px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:10px;
}
.ft-bottom p{font-size:.78rem;color:rgba(255,255,255,.3)}
.ft-bottom a{color:var(--teal)}
@media(max-width:768px){.ft-grid{grid-template-columns:1fr;gap:28px}}

/* ══════════════════════════════════════
   FAB BUTTONS
══════════════════════════════════════ */
.wsp-fab{
  position:fixed;bottom:26px;right:26px;z-index:9999;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;font-size:1.45rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  animation:wspP 2.5s ease-out infinite;transition:transform .2s;
}
.wsp-fab:hover{transform:scale(1.1)}
@keyframes wspP{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.btt{
  position:fixed;bottom:92px;right:26px;z-index:9999;
  width:42px;height:42px;border-radius:11px;
  background:var(--teal);color:#fff;font-size:.85rem;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,201,177,.35);transition:all .2s;
}
.btt.show{display:flex}
.btt:hover{background:var(--teal-d);transform:translateY(-2px)}
         .img-movilcat {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 120px;
                max-width: 30vw;
                z-index: 0;
                pointer-events: none;
                user-select: none;
              }
              #hero {
                position: relative;
                overflow: hidden;
              }

                        .close-menu-btn {
            display: none;
            position: fixed;
            top: 24px;
            right: 28px;
            z-index: 1200;
            background: rgba(255,255,255,0.95);
            border: none;
            font-size: 2.3rem;
            color: var(--teal);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            box-shadow: 0 2px 12px rgba(0,201,177,.10);
            cursor: pointer;
            transition: background .2s, color .2s;
          }
          .close-menu-btn:hover {
            background: var(--teal-l);
            color: var(--ink2);
          }
          @media(max-width:900px){
            .close-menu-btn {display: block;}
          }

            .img-movilcat {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    max-width: 30vw;
    z-index: 10;
    pointer-events: none;
    user-select: none;
  }
  .img-fondodot {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 140px;
    max-width: 32vw;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  #hero {
    position: relative;
    overflow: hidden;
  }