/* ═══════════════════════════════════════════════════════════════════
   SOMA — Landing Redesign  ·  "El cuerpo como sistema"
   Capa de presentación. Se carga DESPUÉS de landing.css y refina:
   tokens, tipografía, hero, ecosistema, stats, secciones y ritmo.
   Lo funcional (modales, registro, widget Zoe, carrusel, mapa) queda
   intacto en landing.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens refinados ─────────────────────────────────────────── */
:root{
  --c:#00b9e6; --cd:#0091b8; --cl:#e8f9fe; --clr:#38ddf7;
  --ink:#0a1628;            /* tinta profunda, más rica que el negro plano */
  --t:#0a1628; --t2:#51607a; --t3:#8a99ad;
  --bg:#fff; --sf:#f4f8fb; --sf2:#eef4f9; --bd:#e3eaf1; --bd2:#d3dde7;
  --r:16px; --rl:24px; --rxl:32px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
}

/* ─── Base tipográfica afinada ─────────────────────────────────── */
body{
  background:#fff;
  color:var(--ink);
  letter-spacing:-.011em;
}
/* Apagamos las estrellas laterales: el nuevo lenguaje usa el "hilo" + gradientes suaves */
body::before, body::after{ display:none !important; }

/* ─── Section header: eyebrow mono + display grande ────────────── */
.sh{ text-align:center; max-width:660px; margin:0 auto 56px; }
.sh-label{
  display:inline-block; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.04em; color:var(--cd); text-transform:none;
  background:none; border:none; padding:0; margin-bottom:18px;
  position:relative;
}
.sh h2{
  font-size:clamp(30px,4.4vw,52px); font-weight:800; line-height:1.04;
  letter-spacing:-.035em; color:var(--ink); margin-bottom:16px;
}
.sh h2 em{
  font-style:normal; color:var(--c);
  background:none; -webkit-text-fill-color:currentColor;
}
.sh p{ font-size:17px; line-height:1.6; color:var(--t2); max-width:560px; margin:0 auto; }
.sh-label-left{ text-align:left; }

/* spacing de secciones consistente */
.sec, .carousel-v2, .eco, .faq-v2{ padding:96px 0; position:relative; }
.sec-alt{ background:transparent; }
.w{ max-width:var(--maxw); }

/* fondos alternados sutiles para dar ritmo sin "cajas" */
.eco{ background:linear-gradient(180deg,#fff,var(--sf) 60%,#fff); }
.stats-section{ background:#fff; position:relative; overflow:hidden; }
.proof-section{ background:linear-gradient(180deg,#fff,var(--sf)); }
.plans-v2{ background:linear-gradient(180deg,var(--sf),#fff); }

/* ═══════════════════════════════════════════════════════════════
   HILO CONDUCTOR (signature)
   ═══════════════════════════════════════════════════════════════ */
.thread{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:2px; height:100%;
  background:linear-gradient(180deg,transparent,rgba(0,185,230,.0) 8%,rgba(0,185,230,.35) 50%,rgba(0,185,230,0) 100%);
  pointer-events:none; z-index:0;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER (refinado)
   ═══════════════════════════════════════════════════════════════ */
.hdr{ top:16px; background:rgba(255,255,255,.72); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border-color:rgba(227,234,241,.9); box-shadow:0 2px 12px rgba(10,22,40,.04),0 12px 40px rgba(10,22,40,.06); }
.hdr-login{ background:none; border:none; cursor:pointer; padding:7px 14px; border-radius:999px; font-family:var(--f); font-size:13.5px; font-weight:600; color:var(--t2); transition:.2s; }
.hdr-login:hover{ color:var(--ink); background:var(--sf); }
.nav-cta,.nav-cta:hover,.nav-cta:visited{ background:var(--ink); box-shadow:none; }
.nav-cta:hover{ background:#16243c; transform:translateY(-1px); }
.mob-login{ display:block; width:100%; text-align:center; padding:12px 14px; border:none; border-radius:12px; font-family:var(--f); font-weight:700; font-size:15px; color:#fff; cursor:pointer; background:linear-gradient(135deg,var(--clr),var(--c) 55%,var(--cd)); box-shadow:0 6px 18px rgba(0,185,230,.3); margin-top:6px; transition:.25s var(--ease); }
.mob-login:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,185,230,.4); }
.mob-cta{ display:block; margin-top:6px; padding:12px 14px; background:var(--ink); color:#fff; border-radius:12px; text-align:center; font-weight:700; }
.mob-p a.mob-cta,.mob-p a.mob-cta:hover{ color:#fff; background:var(--ink); }
.mob-p a.mob-cta:hover{ background:#16243c; }

/* ═══════════════════════════════════════════════════════════════
   HERO — 2 columnas, asimétrico, editorial
   ═══════════════════════════════════════════════════════════════ */
.hero{ padding:140px 0 64px; overflow:visible; }
.hero::before,.hero::after{ display:none; }   /* quitamos los blobs viejos */
.hero .w{ display:block; text-align:left; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero-text{ max-width:none; }
.hero-tag{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 11px;
  background:#fff; border:1px solid var(--bd); border-radius:999px;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--cd); text-transform:none; margin-bottom:26px;
  box-shadow:0 1px 4px rgba(10,22,40,.04); animation:none;
}
.hero-tag-dot{ width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 0 0 rgba(0,185,230,.5); animation:pulseDot 2.4s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{box-shadow:0 0 0 0 rgba(0,185,230,.5)} 60%{box-shadow:0 0 0 7px rgba(0,185,230,0)} }

.hero h1{
  font-size:clamp(40px,5.6vw,68px); font-weight:800; line-height:.98;
  letter-spacing:-.045em; color:var(--ink); margin:0 0 22px; max-width:none;
  animation:none;
}
.hero-h1-accent{ color:var(--c); position:relative; display:inline-block; }

.hero-sub{ font-size:18.5px; line-height:1.62; color:var(--t2); max-width:520px; margin:0 0 32px; animation:none; }
.ia-grad{ color:var(--cd); font-weight:700; background:none; -webkit-text-fill-color:currentColor; }
.hero-btns{ display:flex; gap:13px; flex-wrap:wrap; justify-content:flex-start; margin-bottom:20px; animation:none; }
.hero-cta-main{ background:var(--ink); font-size:16px; padding:16px 30px; box-shadow:0 10px 30px rgba(10,22,40,.18); animation:none; }
.hero-cta-main:hover{ background:#16243c; transform:translateY(-3px); box-shadow:0 16px 40px rgba(10,22,40,.26); }
.hero-cta-main::after{ background:rgba(255,255,255,.12); }
.play-tri{ width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;display:inline-block; }
.hero-note{ font-family:var(--mono); font-size:12.5px; color:var(--t3); animation:none; }
.hero-note b{ color:var(--ink); font-weight:600; }

/* imagen hero */
.hero-img{ position:relative; display:flex; justify-content:center; }
.hero-img-glow{
  position:absolute; inset:-8% -4% 0 -4%; z-index:0;
  background:radial-gradient(60% 55% at 50% 40%,rgba(0,185,230,.16),transparent 70%);
  filter:blur(8px); pointer-events:none;
}
.hero-img picture,.hero-img img{ position:relative; z-index:1; }
.hero-img img{ max-height:560px; width:auto; filter:drop-shadow(0 30px 60px rgba(10,22,40,.18)); animation:floatPhone 6s ease-in-out infinite; }
@keyframes floatPhone{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* tira de confianza */
.hero-proof{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:48px; animation:none;
}
.hero-proof-item{
  display:flex; align-items:center; gap:7px;
  padding:9px 16px; background:var(--sf); border:1px solid var(--bd);
  border-radius:12px; font-size:13.5px; color:var(--t2); font-weight:500;
  transition:.25s var(--ease);
}
.hero-proof-item:hover{ border-color:var(--bd2); transform:translateY(-2px); box-shadow:0 6px 18px rgba(10,22,40,.06); }
.hpi-k{ font-family:var(--mono); font-weight:700; color:var(--ink); font-size:15px; }
.hero-proof-sep{ display:none; }

/* ═══════════════════════════════════════════════════════════════
   ECOSISTEMA — split Pro / Zoe + tira de beneficios
   ═══════════════════════════════════════════════════════════════ */
.eco-split{
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  max-width:1000px; margin:0 auto;
}
.eco-side{
  background:#fff; border:1px solid var(--bd); border-radius:var(--rxl);
  padding:38px 34px; display:flex; flex-direction:column; gap:24px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.eco-side:hover{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(10,22,40,.10); border-color:var(--bd2); }
.eco-pro{ background:linear-gradient(165deg,#fff,var(--cl)); border-color:rgba(0,185,230,.25); }
.eco-side-kicker{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--cd); }
.eco-side-kicker.alt{ color:var(--t3); }
.eco-side-ic{
  width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:var(--c); color:#fff; box-shadow:0 8px 22px rgba(0,185,230,.3); margin-top:10px;
}
.eco-side-ic svg{ width:26px; height:26px; }
.eco-side-ic.alt{ background:var(--ink); box-shadow:0 8px 22px rgba(10,22,40,.18); }
.eco-side h3{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink); margin-top:6px; }
.eco-side-desc{ font-size:15px; line-height:1.6; color:var(--t2); }
.eco-side-list{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.eco-side-list li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.4; }
.eco-li-ic{ flex-shrink:0; width:20px; height:20px; border-radius:6px; background:var(--cl); color:var(--cd); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.eco-li-ic svg{ width:12px; height:12px; }

.eco-sync{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:0 22px; color:var(--c); align-self:center;
}
.eco-sync svg{ width:30px; height:30px; animation:spinSync 8s linear infinite; }
@keyframes spinSync{ to{transform:rotate(360deg)} }
.eco-sync span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--t3); }

/* beneficios */
.eco-benefits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  max-width:1000px; margin:42px auto 0;
}
.eco-ben{ padding:24px 22px; border-radius:var(--rl); background:#fff; border:1px solid var(--bd); transition:transform .35s var(--ease),box-shadow .35s var(--ease); }
.eco-ben:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,22,40,.08); }
.eco-ben-ic{ display:inline-flex; width:42px; height:42px; border-radius:12px; background:var(--cl); color:var(--cd); align-items:center; justify-content:center; margin-bottom:16px; }
.eco-ben-ic svg{ width:21px; height:21px; }
.eco-ben-ic-ai{ background:linear-gradient(135deg,#fff4ef,#ffe8e0); color:#e63946; }
.eco-ben h4{ font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin-bottom:6px; }
.eco-ben p{ font-size:13.5px; line-height:1.5; color:var(--t2); }

/* ═══════════════════════════════════════════════════════════════
   STATS — sobre fondo tinta, estilo dato clínico
   ═══════════════════════════════════════════════════════════════ */
/* Fondo SVG animado: líneas que se dibujan, diagonales y nodos */
.stats-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.stats-bg svg{ width:100%; height:100%; display:block; }

/* blobs suaves de base (un poco más visibles) */
.stats-section::before,
.stats-section::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(70px);
}
.stats-section::before{ width:560px; height:560px; top:-200px; left:-140px; background:radial-gradient(circle,rgba(0,185,230,.10),transparent 70%); animation:statsBlob1 18s ease-in-out infinite; }
.stats-section::after{ width:500px; height:500px; bottom:-180px; right:-120px; background:radial-gradient(circle,rgba(56,221,247,.10),transparent 70%); animation:statsBlob2 22s ease-in-out infinite; }
@keyframes statsBlob1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(70px,50px) scale(1.15)} }
@keyframes statsBlob2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-60px,-40px) scale(1.1)} }

/* trazos tipo cometa: segmento que viaja con punta afilada y degradé */
.cm{
  stroke-dasharray:240 1600;
  stroke-dashoffset:1840;
  opacity:.85;
}
.cm1{ animation:comet 7s linear infinite; }
.cm2{ animation:comet 9s linear infinite 1.2s; }
.cm3{ animation:comet 11s linear infinite 2.6s; opacity:.6; }
.cm4{ animation:comet 8.5s linear infinite 4s; opacity:.55; }
@keyframes comet{
  0%{ stroke-dashoffset:1840; }
  100%{ stroke-dashoffset:0; }
}

/* nodos que laten */
.nd{ opacity:0; transform-box:fill-box; transform-origin:center; }
.nd1{ animation:node 4s ease-in-out infinite; }
.nd2{ animation:node 4s ease-in-out infinite 1.3s; }
.nd3{ animation:node 5s ease-in-out infinite 2.2s; }
@keyframes node{
  0%,100%{ opacity:0; transform:scale(.4); }
  50%{ opacity:.9; transform:scale(1); }
}
.stats-section .w{ position:relative; z-index:2; }

.stats-section .sh-label{ color:var(--cd); }
.stats-section .sh h2{ color:var(--ink); }
.stats-section .sh h2 em{ color:var(--c); border-bottom:none; padding-bottom:0; -webkit-text-fill-color:var(--c); }
.stats-section .sh p{ color:var(--t2); }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; background:none; border:none; border-radius:0; overflow:visible; max-width:920px; margin:0 auto; }
.stat-card{ background:#fff; padding:34px 28px; text-align:center; border:1px solid var(--bd); border-radius:var(--rl); box-shadow:0 2px 12px rgba(10,22,40,.04); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); }
.stat-card:hover{ background:#fff; transform:translateY(-4px); box-shadow:0 18px 44px rgba(10,22,40,.10); border-color:rgba(0,185,230,.4); }
.stat-num{ font-family:var(--mono); font-size:clamp(36px,5vw,52px); font-weight:700; color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); -webkit-background-clip:initial; background-clip:initial; line-height:1; letter-spacing:-.03em; display:flex; align-items:baseline; justify-content:center; gap:2px; margin-bottom:0; }
.stat-suffix{ color:var(--c); -webkit-text-fill-color:var(--c); }
.stat-divider{ color:var(--t3); -webkit-text-fill-color:var(--t3); margin:0 2px; }
.stat-label{ margin-top:12px; font-size:13.5px; color:var(--t2); letter-spacing:.01em; }

/* ═══════════════════════════════════════════════════════════════
   PRESENCIA + CONFIANZA (mapa + testimonios marquee)
   ═══════════════════════════════════════════════════════════════ */
.tes-marquee{ margin-top:64px; overflow:hidden; position:relative; display:flex; gap:18px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.tes-track{ display:flex; gap:18px; flex-shrink:0; animation:tesScroll 48s linear infinite; }
.proof-section:hover .tes-track{ animation-play-state:paused; }
@keyframes tesScroll{ to{transform:translateX(calc(-100% - 18px))} }
.tes-card{ flex:0 0 360px; width:360px; background:#fff; border:1px solid var(--bd); border-radius:var(--rl); padding:26px 24px; box-shadow:0 2px 10px rgba(10,22,40,.04); display:flex; flex-direction:column; gap:14px; }
.tes-stars{ color:#ffb800; font-size:14px; letter-spacing:2px; }
.tes-text{ font-size:14.5px; line-height:1.55; color:var(--ink); font-style:normal; }
.tes-foot{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.tes-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--c),var(--cd)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; overflow:hidden; flex-shrink:0; }
.tes-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.tes-name{ font-size:14px; font-weight:700; color:var(--ink); }
.tes-role{ font-size:12px; color:var(--t3); }

/* ═══════════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .hero-img img,.eco-sync svg,.tes-track,.hero-tag-dot,.stats-section::before,.stats-section::after,.cm,.nd{ animation:none !important; }
  .cm{ stroke-dashoffset:600 !important; opacity:.5 !important; }
  .nd{ opacity:.5 !important; }
  .tes-track:nth-child(2){ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .hero .w{ text-align:center; }
  .hero-tag,.hero-btns{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-img{ order:0; }
  .hero-img img{ max-height:420px; }
  .hero-proof{ justify-content:center; }
  .eco-split{ grid-template-columns:1fr; gap:18px; max-width:480px; }
  .eco-sync{ flex-direction:row; padding:6px 0; }
  .eco-sync svg{ width:24px; height:24px; }
  .eco-benefits{ grid-template-columns:repeat(2,1fr); max-width:480px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); max-width:480px; }
}
@media(max-width:560px){
  .hero{ padding:110px 0 40px; }
  /* Hero compacto en celular: ocultamos el mockup (que en mobile, con sus
     etiquetas quemadas en la imagen, ocupaba ~1 pantalla entera y rompía el
     scroll temprano). El mockup completo se ve igual más abajo en la sección
     "client-view". Así el hero entra casi en 1 pantalla → reviews y CTA llegan antes. */
  .hero-img{ display:none; }
  .hero-grid{ gap:0; }
  .hero-btns{ margin-top:4px; }
  .sec,.carousel-v2,.eco,.faq-v2{ padding:56px 0; }
  .sh{ margin-bottom:32px; }
  /* eco más compacta: cards con menos padding y beneficios 2x2 */
  .eco-split{ gap:14px; }
  .eco-side{ padding:26px 22px; gap:18px; }
  .eco-side-desc{ font-size:14px; }
  .eco-benefits{ grid-template-columns:repeat(2,1fr); gap:12px; margin-top:32px; }
  .eco-ben{ padding:18px 16px; }
  .eco-ben-ic{ width:38px; height:38px; margin-bottom:12px; }
  .eco-ben h4{ font-size:14.5px; }
  .eco-ben p{ font-size:12.5px; }
  /* stats 2x2 para que no se haga tan larga */
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .stat-card{ padding:26px 16px; }
  /* el fondo animado debe verse: bajamos blobs y mantenemos líneas visibles */
  .stats-bg svg{ opacity:1; }
  .stats-section::before{ width:300px; height:300px; top:-100px; left:-80px; }
  .stats-section::after{ width:280px; height:280px; bottom:-100px; right:-70px; }
  .tes-card{ flex-basis:300px; width:300px; }
  .hero-proof{ gap:10px; }
  .hero-proof-item{ padding:8px 13px; font-size:12.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESEÑAS TOP — validación social después del hero
   ═══════════════════════════════════════════════════════════════ */
.reviews-top{ padding:56px 0 80px; }
.reviews-top-head{ text-align:center; margin-bottom:38px; }
.reviews-stars-big{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; padding:12px 22px; background:var(--sf); border:1px solid var(--bd); border-radius:999px; }
.rsb-stars{ color:#ffb800; font-size:18px; letter-spacing:3px; }
.rsb-text{ font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
/* el marquee dentro de reviews-top hereda los estilos .tes-* ya definidos */
.reviews-top .tes-marquee{ margin-top:0; }

@media(max-width:560px){
  .reviews-top{ padding:36px 0 56px; }
  .rsb-text{ font-size:13.5px; }
  .rsb-stars{ font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════════
   "ASÍ LO VE TU CLIENTE" — reorden mobile
   Orden: título+texto → imagen → 5 features en grid (última full)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  .client-view .show-v2{ display:flex; flex-direction:column; gap:22px; text-align:left; }
  /* el texto se vuelve "transparente" como caja: sus hijos entran al flex padre */
  .client-view .show-txt{ display:contents; }
  /* orden explícito de cada pieza */
  .client-view .show-txt .sh-label-left{ order:1; text-align:left; }
  .client-view .show-txt h2{ order:2; text-align:left; }
  .client-view .show-txt > p{ order:3; text-align:left; }
  .client-view .show-img-v2{ order:4 !important; margin:4px 0; }
  .client-view .fl-v2{ order:5; }
  .client-view .show-img-v2 img{ max-height:340px; }

  /* features como grid 2 columnas */
  .client-view .fl-v2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:0; }
  .client-view .fl-v2 li{
    background:#fff; border:1px solid var(--bd); border-radius:14px;
    padding:14px 14px; margin:0; align-items:flex-start; gap:10px;
    font-size:13.5px; line-height:1.35; box-shadow:0 1px 4px rgba(10,22,40,.04);
  }
  /* la última (Instrucciones) ocupa todo el ancho, alineada igual que las demás */
  .client-view .fl-v2 li:last-child{
    grid-column:1 / -1; justify-self:stretch; align-self:stretch;
    width:auto; max-width:none; margin:0;
    flex-direction:row; align-items:center; justify-content:flex-start;
  }
}
@media(max-width:380px){
  .client-view .fl-v2{ grid-template-columns:1fr; }
  .client-view .fl-v2 li:last-child{ grid-column:auto; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — reacomodado en mobile (una columna, centrado, simétrico)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .ftr-v2{ padding:52px 0 28px; }
  /* una sola columna, ancho completo y centrada de verdad */
  .ftr-v2 .ftr-cols{
    grid-template-columns:1fr !important; gap:0 !important;
    width:100% !important; max-width:none !important; margin:0 0 32px !important;
    justify-items:center !important; text-align:center !important;
  }
  .ftr-col{ width:100%; text-align:center !important; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:center; }
  .ftr-col:last-child{ border-bottom:none; }

  /* brand arriba */
  .ftr-col-brand{ grid-column:auto; padding-top:0; padding-bottom:26px; }
  .ftr-col-brand .ftr-logo{ margin:0 auto 14px !important; }
  .ftr-col-brand .ftr-tagline{ max-width:340px; margin:0 auto 18px !important; text-align:center; }
  .ftr-col-brand .ftr-social{ justify-content:center !important; }

  /* títulos y listas centrados */
  .ftr-col h4{ margin-bottom:14px; text-align:center; }
  .ftr-col ul{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; padding:0; }
  .ftr-col li{ margin:0; text-align:center; }
  .ftr-col a{ justify-content:center; }
  /* App Store / Google Play en fila centrada */
  .ftr-col:last-child ul{ flex-direction:row; justify-content:center; gap:24px; flex-wrap:wrap; }
  .ftr-store{ justify-content:center !important; }

  /* bottom centrado */
  .ftr-bottom{ flex-direction:column; text-align:center; gap:14px; justify-content:center; align-items:center; }
  .ftr-bottom-links{ justify-content:center; }
}

/* ════════════════════════════════════════════════════════════════
   HERO SIEMPRE VISIBLE — fix de retención (Clarity: 23s / 19% scroll)
   El tráfico es 99% mobile vía WebView de Instagram, donde el JS que
   dispara las animaciones .rv puede tardar o no ejecutarse, dejando el
   hero en opacity:0 (invisible) los primeros segundos → la gente se va.
   Esta regla fuerza a TODO el contenido del hero a estado visible al
   instante, sin depender de JS. El resto de la página conserva sus
   animaciones de reveal intactas.
   ════════════════════════════════════════════════════════════════ */
.hero .rv,
.hero .rv-tilt,
.hero .rv-scale,
.hero .rv-blur,
.hero .rv-left,
.hero .rv-right,
.hero .rv-fade{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}