/* IMPERAX — Sistema de identidad v2 (Edición Soberanía)
   Obsidiana #000000 · Nieve #F5F5F7 · Platino #86868B · Geist
   Un solo acento funcional: el verde del canal WhatsApp.
   Sin degradados, sin brillos, sin íconos decorativos. */

:root{
  --obsidiana:#000000; --nieve:#F5F5F7; --platino:#86868B;
  --linea-d:rgba(245,245,247,.13);
  --linea-c:rgba(0,0,0,.13);
  --velo-1:rgba(245,245,247,.035);   /* superficie apenas elevada, Nieve al 3.5% */
  --velo-2:rgba(245,245,247,.06);
  --wa:#25D366;
  --max:1280px;
  --curva:cubic-bezier(.22,.68,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; background:#000;}
body{font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#000; color:var(--nieve); -webkit-font-smoothing:antialiased;
  line-height:1.5; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}
@media(max-width:860px){ .wrap{padding:0 24px;} }
h1,h2,h3{letter-spacing:-.04em; font-weight:600; line-height:.98;}
.dim{color:var(--platino);}
.skip{position:absolute; left:-9999px; top:0; background:var(--nieve); color:#000; padding:12px 18px; z-index:200;}
.skip:focus{left:12px; top:12px;}
:focus-visible{outline:2px solid currentColor; outline-offset:4px;}

/* Barra de progreso de lectura */
.progreso{position:fixed; top:0; left:0; height:2px; width:0; background:var(--nieve); z-index:120; transition:width .1s linear;}

.kicker{display:inline-flex; align-items:center; gap:16px; font-size:.7rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--platino); font-weight:500;}
.kicker::before{content:""; width:44px; height:1px; background:currentColor; flex:none;}

.claro{background:var(--nieve); color:#0a0a0a;}
.claro .kicker{color:#57575d;}
.claro .dim{color:var(--platino);}

.flecha{display:inline-block; transition:transform .35s var(--curva);}
a:hover .flecha,.btn:hover .flecha{transform:translateX(7px);}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:11px; font-weight:500;
  font-size:.96rem; border-radius:100px; padding:16px 28px; min-height:52px; cursor:pointer;
  white-space:nowrap; border:1px solid transparent; position:relative;
  transition:transform .35s var(--curva), background-color .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);}
.btn:hover{transform:translateY(-2px);}
.btn-claro{background:var(--nieve); color:#000;}
.btn-claro:hover{background:#fff;}
.btn-wa{background:var(--wa); color:#fff;}
.btn-wa:hover{background:#1fb757;}
.btn-linea,.btn-ghost{border-color:rgba(245,245,247,.3); color:var(--nieve);}
.btn-linea:hover,.btn-ghost:hover{background:var(--nieve); color:#000; border-color:var(--nieve);}
.btn-dark{background:var(--nieve); color:#000;}
.btn-dark:hover{background:#fff;}
.claro .btn-linea,.claro .btn-ghost{border-color:rgba(0,0,0,.28); color:#000;}
.claro .btn-linea:hover,.claro .btn-ghost:hover{background:#000; color:var(--nieve); border-color:#000;}
.claro .btn-dark,.claro .btn-claro{background:#000; color:var(--nieve);}
.claro .btn-dark:hover,.claro .btn-claro:hover{background:#1a1a1c;}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:100; background:rgba(0,0,0,.7);
  backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--linea-d);}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{font-weight:600; font-size:1.05rem; letter-spacing:.3em; color:var(--nieve);}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{font-size:.9rem; color:#9a9aa1; transition:color .25s ease;}
.nav-links a:hover{color:var(--nieve);}
.nav-links a.btn{padding:12px 22px; min-height:44px; font-size:.9rem;}
.nav-links a.btn-dark,.nav-links a.btn-claro{color:#000;}
.nav-links a.btn-wa{color:#fff;}
.nav-links a.btn-linea,.nav-links a.btn-ghost{color:var(--nieve);}
.nav-links a.btn-linea:hover,.nav-links a.btn-ghost:hover{color:#000;}

.nav-toggle{display:none; background:none; border:1px solid var(--linea-d); border-radius:12px;
  width:48px; height:48px; align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle span{display:block; width:18px; height:1.5px; background:var(--nieve); position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:1.5px;
  background:var(--nieve); transition:transform .3s var(--curva);}
.nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg);}
@media(max-width:980px){
  .nav-toggle{display:flex;}
  .nav-links{position:absolute; top:76px; left:0; right:0; background:#000; border-bottom:1px solid var(--linea-d);
    flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 30px; display:none;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:19px 0; font-size:1.12rem; color:var(--nieve); border-bottom:1px solid var(--linea-d);}
  .nav-links .btn{margin-top:24px; border-bottom:none; justify-content:center;}
}

/* ---------- HERO partido ---------- */
.hero{padding:96px 0 88px; border-bottom:1px solid var(--linea-d); position:relative; overflow:hidden;}
.hero-split{display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center;}
@media(max-width:1040px){ .hero-split{grid-template-columns:1fr; gap:60px;} }
.hero h1{font-size:clamp(2.3rem,3.9vw,3.5rem); margin:32px 0 0;}
.hero p.lead{font-size:clamp(1.02rem,1.35vw,1.16rem); color:#96969d; max-width:520px; margin:30px 0 26px; line-height:1.65;}
.hero .tagline{font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--platino);
  font-weight:500; margin:0 0 40px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero-datos{margin-top:52px; padding-top:28px; border-top:1px solid var(--linea-d);
  display:grid; grid-template-columns:repeat(3,auto); gap:36px; justify-content:start;}
@media(max-width:560px){ .hero-datos{grid-template-columns:1fr 1fr; gap:26px;} }
.hero-dato b{display:block; font-size:1.5rem; font-weight:600; letter-spacing:-.04em;}
.hero-dato span{display:block; margin-top:6px; font-size:.82rem; color:var(--platino); line-height:1.4;}

/* Rejilla de fondo del hero (líneas Nieve al 3.5%, sin degradado) */
.hero-rejilla{position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--velo-1) 1px, transparent 1px),
                   linear-gradient(90deg, var(--velo-1) 1px, transparent 1px);
  background-size:88px 88px; mask-image:radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);}

/* ---------- Demo del agente (panel de conversación) ---------- */
.demo{border:1px solid var(--linea-d); border-radius:26px; background:#050506; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);}
.demo-barra{display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--linea-d);
  background:var(--velo-1);}
.demo-avatar{width:36px; height:36px; border-radius:50%; background:var(--nieve); color:#000; flex:none;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.82rem; letter-spacing:.04em;}
.demo-quien{flex:1; min-width:0;}
.demo-quien b{display:block; font-size:.92rem; font-weight:600;}
.demo-quien span{display:block; font-size:.76rem; color:var(--wa); margin-top:2px;}
.demo-hora{font-size:.72rem; color:var(--platino); flex:none;}
.demo-hilo{padding:26px 22px; display:flex; flex-direction:column; gap:14px; min-height:392px;}
.burbuja{max-width:80%; padding:14px 18px; border-radius:18px; font-size:.94rem; line-height:1.5;
  opacity:0; transform:translateY(12px); animation:entrar .5s var(--curva) forwards;}
.burbuja.entra{align-self:flex-start; background:var(--velo-2); border-bottom-left-radius:6px; color:#dcdce2;}
.burbuja.sale{align-self:flex-end; background:var(--nieve); color:#000; border-bottom-right-radius:6px;}
.burbuja small{display:block; margin-top:8px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--platino);}
.burbuja.sale small{color:#6a6a70;}
@keyframes entrar{to{opacity:1; transform:none;}}
.demo-pie{border-top:1px solid var(--linea-d); padding:16px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; background:var(--velo-1);}
.demo-pie span{font-size:.76rem; color:var(--platino); letter-spacing:.06em;}
.punto{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--wa); margin-right:8px;
  animation:latir 2s ease-in-out infinite;}
@keyframes latir{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- Marquesina de tecnologías ---------- */
.marquesina{border-bottom:1px solid var(--linea-d); padding:30px 0; overflow:hidden; position:relative;}
.marquesina .rotulo{font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:#5a5a60;
  margin-bottom:20px; padding:0 40px; max-width:var(--max); margin-left:auto; margin-right:auto;}
.cinta{display:flex; width:max-content; animation:correr 38s linear infinite;}
.cinta ul{display:flex; list-style:none; align-items:center;}
.cinta li{font-size:clamp(1.3rem,2.4vw,2rem); font-weight:500; letter-spacing:-.03em; color:#4e4e55;
  padding:0 34px; white-space:nowrap; transition:color .3s ease;}
.cinta li::after{content:"·"; margin-left:34px; color:#2c2c31;}
.marquesina:hover .cinta{animation-play-state:paused;}
.cinta li:hover{color:var(--nieve);}
@keyframes correr{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Declaración a gran escala ---------- */
.declaracion{padding:150px 0; border-bottom:1px solid var(--linea-d);}
.declaracion h2{font-size:clamp(2rem,5.4vw,4.6rem); max-width:1120px; line-height:1.02;}

/* ---------- Sección estrella con columna fija ---------- */
.estrella{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .estrella{padding:90px 0;} }
.estrella.claro{border-bottom-color:var(--linea-c);}
.estrella-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start;}
@media(max-width:1040px){ .estrella-split{grid-template-columns:1fr; gap:52px;} }
.estrella-fijo{position:sticky; top:130px;}
@media(max-width:1040px){ .estrella-fijo{position:static;} }
.estrella h2{font-size:clamp(2.2rem,4.6vw,3.6rem); margin-top:26px;}
.estrella .intro{margin-top:28px; font-size:1.08rem; color:#96969d; line-height:1.7; max-width:520px;}
.estrella.claro .intro{color:#4c4c53;}
.estrella .acciones{display:flex; gap:14px; flex-wrap:wrap; margin-top:40px;}

/* Lista de capacidades numeradas */
.caps{border-top:1px solid var(--linea-d);}
.claro .caps{border-top-color:var(--linea-c);}
.cap{display:grid; grid-template-columns:64px 1fr; gap:26px; padding:30px 0;
  border-bottom:1px solid var(--linea-d); transition:padding-left .4s var(--curva);}
.claro .cap{border-bottom-color:var(--linea-c);}
.cap:hover{padding-left:14px;}
.cap-n{font-size:.78rem; font-weight:600; letter-spacing:.14em; color:var(--platino); padding-top:6px;}
.cap h4{font-size:clamp(1.15rem,1.9vw,1.45rem); font-weight:600; margin-bottom:10px; letter-spacing:-.03em;}
.cap p{font-size:1rem; color:#8b8b92; line-height:1.6;}
.claro .cap p{color:#55555c;}

/* ---------- Filas de catálogo (se llenan al pasar el mouse) ---------- */
.filas{border-top:1px solid var(--linea-d); margin-top:72px;}
.claro .filas{border-top-color:var(--linea-c);}
.fila{position:relative; display:block; border-bottom:1px solid var(--linea-d); overflow:hidden;}
.claro .fila{border-bottom-color:var(--linea-c);}
.fila-in{position:relative; z-index:2; display:grid; grid-template-columns:92px 1fr 1.05fr 56px; gap:28px;
  align-items:center; padding:38px 0; transition:padding .45s var(--curva), color .45s var(--curva);}
@media(max-width:900px){
  .fila-in{grid-template-columns:52px 1fr; gap:16px 18px; padding:28px 0;}
  .fila-desc{grid-column:2; }
  .fila-flecha{display:none;}
}
.fila-n{font-size:.78rem; font-weight:600; letter-spacing:.16em; color:var(--platino);}
.fila h3{font-size:clamp(1.35rem,2.7vw,2.15rem); letter-spacing:-.04em; font-weight:600;}
.fila-desc{font-size:1rem; color:#8b8b92; line-height:1.6;}
.claro .fila-desc{color:#55555c;}
.fila-flecha{font-size:1.5rem; text-align:right; transition:transform .45s var(--curva);}
/* Relleno que sube desde abajo */
.fila::before{content:""; position:absolute; inset:0; background:var(--nieve); transform:translateY(101%);
  transition:transform .5s var(--curva); z-index:1;}
.claro .fila::before{background:#000;}
.fila:hover::before{transform:translateY(0);}
.fila:hover .fila-in{color:#000; padding-left:28px; padding-right:28px;}
.claro .fila:hover .fila-in{color:var(--nieve);}
.fila:hover .fila-desc{color:#3a3a40;}
.claro .fila:hover .fila-desc{color:#b6b6bd;}
.fila:hover .fila-n{color:#5c5c62;}
.fila:hover .fila-flecha{transform:translateX(10px);}

/* ---------- El puente: diagrama de 5 nodos ---------- */
.puente{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .puente{padding:90px 0;} }
.puente.claro{border-bottom-color:var(--linea-c);}
.nodos{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:80px; position:relative;}
@media(max-width:980px){ .nodos{grid-template-columns:1fr;} }
.nodo{position:relative; padding:0 22px 0 0;}
.nodo::before{content:""; position:absolute; top:9px; left:0; right:0; height:1px; background:var(--linea-d);}
.claro .nodo::before{background:var(--linea-c);}
.nodo:last-child::before{right:auto; width:20px;}
.nodo-punto{position:relative; z-index:2; width:19px; height:19px; border-radius:50%; border:1px solid var(--platino);
  background:#000; display:flex; align-items:center; justify-content:center;}
.claro .nodo-punto{background:var(--nieve);}
.nodo-punto::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--platino);
  transition:background-color .4s var(--curva), transform .4s var(--curva);}
.nodo:hover .nodo-punto{border-color:var(--nieve);}
.claro .nodo:hover .nodo-punto{border-color:#000;}
.nodo:hover .nodo-punto::after{background:var(--nieve); transform:scale(1.5);}
.claro .nodo:hover .nodo-punto::after{background:#000;}
.nodo-n{margin-top:30px; font-size:.74rem; letter-spacing:.18em; font-weight:600; color:var(--platino);}
.nodo h4{margin-top:14px; font-size:1.12rem; font-weight:600; letter-spacing:-.025em;}
.nodo p{margin-top:12px; font-size:.94rem; color:#8b8b92; line-height:1.55; padding-right:14px;}
.claro .nodo p{color:#55555c;}
@media(max-width:980px){
  .nodos{gap:0;}
  .nodo{padding:0 0 34px 34px;}
  .nodo::before{top:0; bottom:0; left:9px; right:auto; width:1px; height:auto;}
  .nodo:last-child::before{height:20px; width:1px;}
  .nodo-punto{position:absolute; left:0; top:0;}
  .nodo-n{margin-top:0;}
}

/* ---------- Métricas ---------- */
.resultados{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .resultados{padding:90px 0;} }
.resultados.claro{border-bottom-color:var(--linea-c);}
.resultados h2{font-size:clamp(2.1rem,4.6vw,3.6rem);}
.metricas{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:80px;
  border-top:1px solid var(--linea-d);}
.claro .metricas{border-top-color:var(--linea-c);}
@media(max-width:900px){ .metricas{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .metricas{grid-template-columns:1fr;} }
.metrica{padding:44px 30px 44px 0; border-right:1px solid var(--linea-d);}
.claro .metrica{border-right-color:var(--linea-c);}
.metrica:last-child{border-right:none;}
@media(max-width:900px){ .metrica:nth-child(2n){border-right:none;} }
@media(max-width:560px){ .metrica{border-right:none; border-bottom:1px solid var(--linea-d);} }
.metrica .valor{font-size:clamp(3.4rem,7vw,5.6rem); font-weight:600; letter-spacing:-.06em; line-height:.88;}
.metrica .etiqueta{margin-top:22px; font-size:.95rem; color:var(--platino); line-height:1.55; padding-right:16px;}
.nota-metricas{margin-top:60px; color:var(--platino); font-size:1.02rem; max-width:680px; line-height:1.7;}

/* ---------- Reseñas ---------- */
.resenas{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .resenas{padding:90px 0;} }
.resenas.claro{border-bottom-color:var(--linea-c);}
.resenas-resumen{margin-top:28px; color:var(--platino); font-size:1.05rem;}
.resenas-resumen b{font-weight:600; color:var(--nieve);}
.claro .resenas-resumen b{color:#000;}
.resenas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:70px;}
@media(max-width:960px){ .resenas-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:660px){ .resenas-grid{grid-template-columns:1fr;} }
.resena{border:1px solid var(--linea-d); border-radius:22px; padding:38px 34px; display:flex; flex-direction:column;
  background:var(--velo-1);
  transition:transform .4s var(--curva), background-color .4s var(--curva), color .4s var(--curva), border-color .4s var(--curva);}
.claro .resena{border-color:var(--linea-c); background:transparent;}
.resena:hover{transform:translateY(-6px); background:var(--nieve); color:#000; border-color:var(--nieve);}
.claro .resena:hover{background:#000; color:var(--nieve); border-color:#000;}
.resena-estrellas{letter-spacing:.18em; font-size:1rem;}
.resena blockquote{margin:22px 0 28px; font-size:1.06rem; line-height:1.6; color:#c2c2c9;}
.claro .resena blockquote{color:#2a2a30;}
.resena:hover blockquote{color:#2a2a30;}
.claro .resena:hover blockquote{color:#c2c2c9;}
.resena-autor{margin-top:auto; display:flex; align-items:center; gap:14px;}
.resena-autor span{display:flex; flex-direction:column; line-height:1.35;}
.resena-autor b{font-weight:600; font-size:.98rem;}
.resena-autor a:hover{text-decoration:underline;}
.resena-autor small{color:var(--platino); font-size:.84rem;}
.resena-foto{border-radius:50%; width:46px; height:46px; object-fit:cover; flex-shrink:0; background:#26262a;}
.resena-inicial{width:46px; height:46px; border-radius:50%; background:var(--nieve); color:#000;
  display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0;}
.resena:hover .resena-inicial{background:#000; color:var(--nieve);}
.resenas-enlace{display:inline-flex; align-items:center; gap:10px; margin-top:56px; font-size:1rem;}
.resenas-enlace:hover{text-decoration:underline;}

/* ---------- Método ---------- */
.metodo{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .metodo{padding:90px 0;} }
.metodo.claro{border-bottom-color:var(--linea-c);}
.promise{margin-top:90px; border-left:2px solid var(--nieve); padding:36px 44px;}
.claro .promise{border-left-color:#000;}
.promise .kicker{margin-bottom:20px;}
.promise p.frase{font-size:clamp(1.5rem,3.2vw,2.5rem); font-weight:600; letter-spacing:-.045em; line-height:1.12;}
.promise small{display:block; margin-top:20px; color:var(--platino); font-weight:400; font-size:1.02rem; line-height:1.7;}

/* ---------- FAQ ---------- */
.faq{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .faq{padding:90px 0;} }
.faq.claro{border-bottom-color:var(--linea-c);}
.faq-lista{margin-top:64px; border-top:1px solid var(--linea-d);}
.claro .faq-lista{border-top-color:var(--linea-c);}
.faq details{border-bottom:1px solid var(--linea-d); transition:padding-left .4s var(--curva);}
.claro .faq details{border-bottom-color:var(--linea-c);}
.faq details:hover{padding-left:12px;}
.faq summary{list-style:none; cursor:pointer; padding:34px 60px 34px 0;
  font-size:clamp(1.1rem,2.1vw,1.55rem); font-weight:500; letter-spacing:-.03em; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:16px; height:1.5px;
  background:currentColor;}
.faq summary::before{content:""; position:absolute; right:15px; top:50%; width:1.5px; height:16px;
  background:currentColor; margin-top:-7px; transition:opacity .3s var(--curva), transform .3s var(--curva);}
.faq details[open] summary::before{opacity:0; transform:rotate(90deg);}
.faq .respuesta{padding:0 0 36px; color:#8b8b92; font-size:1.05rem; max-width:820px; line-height:1.7;}
.claro .faq .respuesta{color:#4c4c53;}
.faq .respuesta p{margin-bottom:14px;}
.faq .respuesta p:last-child{margin-bottom:0;}
.faq .respuesta a{text-decoration:underline;}
.faq .respuesta strong{color:var(--nieve); font-weight:600;}
.claro .faq .respuesta strong{color:#000;}

/* ---------- Principios ---------- */
.princ{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .princ{padding:90px 0;} }
.princ.claro{border-bottom-color:var(--linea-c);}
.princ h2{font-size:clamp(2.2rem,5vw,4rem);}
.princ .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:80px;
  border-top:1px solid var(--linea-d);}
.princ.claro .grid{border-top-color:var(--linea-c);}
@media(max-width:860px){ .princ .grid{grid-template-columns:1fr;} }
.princ .p{padding:44px 34px 44px 0; border-right:1px solid var(--linea-d);}
.princ.claro .p{border-right-color:var(--linea-c);}
.princ .p:last-child{border-right:none;}
@media(max-width:860px){ .princ .p{border-right:none; border-bottom:1px solid var(--linea-d);} }
.princ .p h3{font-size:1.6rem; margin-bottom:16px;}
.princ .p p{color:#8b8b92; font-size:1rem; line-height:1.65;}
.princ.claro .p p{color:#55555c;}

/* ---------- Nosotros ---------- */
.nosotros{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .nosotros{padding:90px 0;} }
.nosotros.claro{border-bottom-color:var(--linea-c);}
.nosotros h2{font-size:clamp(2.1rem,4.6vw,3.6rem); margin-top:26px;}
.nos-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:80px; border-top:1px solid var(--linea-d);}
.claro .nos-grid{border-top-color:var(--linea-c);}
@media(max-width:860px){ .nos-grid{grid-template-columns:1fr;} }
.nos-block{padding:44px 44px 44px 0; border-right:1px solid var(--linea-d); border-bottom:1px solid var(--linea-d);}
.claro .nos-block{border-color:var(--linea-c);}
.nos-block:nth-child(2n){border-right:none; padding-left:44px;}
@media(max-width:860px){ .nos-block{border-right:none; padding-left:0 !important;} }
.nos-block h3{font-size:1.6rem; margin-bottom:18px;}
.nos-block p{color:#8b8b92; font-size:1.04rem; line-height:1.7;}
.claro .nos-block p{color:#4c4c53;}

/* ---------- Cierre ---------- */
.cierre-bloque{margin-top:80px; border-left:2px solid var(--nieve); padding:32px 40px;}
.claro .cierre-bloque{border-left-color:#000;}
.cierre-bloque p{font-size:clamp(1.4rem,3vw,2.2rem); font-weight:600; letter-spacing:-.04em; line-height:1.14;}
.cierre-bloque small{display:block; margin-top:18px; color:var(--platino); font-size:1.02rem; font-weight:400; line-height:1.7;}

/* ---------- CTA final ---------- */
.final{padding:170px 0 150px; text-align:center; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .final{padding:110px 0;} }
.final .kicker{justify-content:center;}
.final h2{font-size:clamp(2.3rem,6.4vw,5rem); margin-top:30px;}
.final p{color:var(--platino); max-width:600px; margin:32px auto 52px; font-size:1.1rem; line-height:1.7;}
.final .hero-cta{justify-content:center;}

/* ---------- Documento ---------- */
.doc{padding:110px 0 130px; max-width:840px;}
.doc h1{font-size:clamp(2.3rem,5vw,3.8rem); margin:24px 0 16px;}
.doc .actualizado{color:var(--platino); font-size:.95rem; margin-bottom:64px;}
.doc h2{font-size:clamp(1.4rem,2.6vw,2rem); margin:64px 0 18px;}
.doc h3{font-size:1.14rem; margin:34px 0 12px;}
.doc p,.doc li{color:#96969d; font-size:1.05rem; line-height:1.75;}
.doc p{margin-bottom:18px;}
.doc ul{margin:0 0 20px 22px;}
.doc li{margin-bottom:12px;}
.doc strong{color:var(--nieve); font-weight:600;}
.doc a{text-decoration:underline; color:var(--nieve);}
.doc .destacado{border-left:2px solid var(--nieve); padding:24px 30px; margin:34px 0;}
.doc .destacado p{margin:0; color:var(--nieve);}

/* ---------- 404 ---------- */
.p404{min-height:100vh; display:flex; align-items:center; text-align:center; padding:110px 0;}
.p404 .kicker{justify-content:center;}
.p404 h1{font-size:clamp(2.5rem,7vw,5rem); margin-top:28px;}
.p404 p{color:var(--platino); font-size:1.15rem; margin:28px auto 52px; max-width:540px;}
.p404 .hero-cta{justify-content:center;}

/* ---------- Footer con firma a gran escala ---------- */
footer{padding:100px 0 0; overflow:hidden;}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px;}
@media(max-width:980px){ .foot{grid-template-columns:1fr 1fr; gap:44px 30px;} }
@media(max-width:580px){ .foot{grid-template-columns:1fr;} }
.foot .brand{display:block; font-size:1.15rem;}
.foot .tagline{margin-top:16px; font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--platino); font-weight:500;}
.foot a{color:#8b8b92; transition:color .25s ease;} .foot a:hover{color:var(--nieve);}
.foot .lema{color:#68686e; max-width:320px; font-size:.94rem; margin-top:24px; line-height:1.65;}
.foot .ubicacion{margin-top:18px; font-size:.94rem; color:#68686e;}
.foot-col h5{color:var(--nieve); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  margin-bottom:22px; font-weight:500;}
.foot-col a{display:block; margin-bottom:14px; font-size:.96rem;}
.social{display:flex; gap:18px; margin-top:8px;}
.social a{display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center;}
.social svg{width:20px; height:20px; fill:currentColor;}
.foot-bottom{margin-top:80px; padding-top:30px; border-top:1px solid var(--linea-d);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; color:#68686e;}
.firma{margin-top:70px; line-height:.78; text-align:center; user-select:none;}
.firma span{display:block; font-size:clamp(3.4rem,15.5vw,15rem); font-weight:600; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1px rgba(245,245,247,.16); white-space:nowrap;}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed; right:26px; bottom:26px; z-index:110; background:var(--wa); color:#fff;
  width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 38px rgba(0,0,0,.5); opacity:0; transform:scale(.9);
  transition:opacity .5s var(--curva), transform .35s var(--curva);}
.wa-float.visible{opacity:1; transform:scale(1);}
.wa-float.oculto{opacity:0; transform:scale(.9); pointer-events:none;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:33px; height:33px;}
.wa-float .tooltip{position:absolute; right:78px; white-space:nowrap; background:var(--nieve); color:#000;
  font-size:.86rem; font-weight:500; padding:11px 17px; border-radius:100px; opacity:0; transform:translateX(8px);
  transition:opacity .28s var(--curva), transform .28s var(--curva); pointer-events:none;}
.wa-float:hover .tooltip,.wa-float:focus-visible .tooltip{opacity:1; transform:translateX(0);}
@media(max-width:560px){ .wa-float .tooltip{display:none;} }
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- Cookies ---------- */
.cookies{position:fixed; left:0; right:0; bottom:0; z-index:130; background:#000; color:var(--nieve);
  border-top:1px solid rgba(245,245,247,.26); padding:26px 0; transform:translateY(115%);
  transition:transform .5s var(--curva);}
.cookies.visible{transform:translateY(0);}
.cookies-in{display:flex; gap:28px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.cookies p{font-size:.95rem; color:#96969d; max-width:640px; line-height:1.6;}
.cookies p a{color:var(--nieve); text-decoration:underline;}
.cookies .acciones{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.cookies .btn-texto{background:none; border:none; color:var(--platino); font-size:.95rem; font-family:inherit;
  cursor:pointer; padding:15px 6px; min-height:52px;}
.cookies .btn-texto:hover{color:var(--nieve);}
.cookies .detalle{width:100%; margin-top:24px; padding-top:24px; border-top:1px solid var(--linea-d); display:none;}
.cookies .detalle.abierto{display:block;}
.cookies .detalle h4{font-size:.95rem; color:var(--nieve); margin-bottom:8px; font-weight:600;}
.cookies .detalle p{margin-bottom:18px;}

/* =======================================================
   COMPONENTES DE SUPERFICIE — paneles elevados, mosaicos,
   prueba social, banda de cifras y planes.
   Todo en Obsidiana/Nieve/Platino: la elevación se logra con
   Nieve a muy baja opacidad, nunca con degradados ni brillos.
   ======================================================= */

/* Hero centrado */
.hero-centro{text-align:center; padding:120px 0 0;}
.hero-centro .kicker{justify-content:center;}
.hero-centro h1{font-size:clamp(2.6rem,7.2vw,6rem); margin:34px auto 0; max-width:16ch;}
.hero-centro p.lead{margin:32px auto 0; max-width:620px; text-align:center;}
.hero-centro .tagline{margin:30px 0 40px;}
.hero-centro .hero-cta{justify-content:center;}

/* Prueba social bajo los CTA */
.social-proof{margin-top:40px; display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;}
.avatares{display:flex;}
.avatares span{width:38px; height:38px; border-radius:50%; background:#151517; border:1px solid rgba(245,245,247,.22);
  color:var(--nieve); font-size:.78rem; font-weight:600; display:flex; align-items:center; justify-content:center;
  margin-left:-11px;}
.avatares span:first-child{margin-left:0;}
.social-proof .dato{text-align:left; line-height:1.35;}
.social-proof .estrellas{font-size:.95rem; letter-spacing:.14em;}
.social-proof .detalle{font-size:.82rem; color:var(--platino); margin-top:3px;}

/* Tarjetas de diagnóstico bajo el hero */
.tarjetas{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:96px;}
@media(max-width:940px){ .tarjetas{grid-template-columns:1fr;} }
.tarjeta{background:var(--velo-1); border:1px solid var(--linea-d); border-radius:24px; padding:40px 34px;
  text-align:left; transition:transform .4s var(--curva), background-color .4s var(--curva),
  border-color .4s var(--curva), color .4s var(--curva);}
.tarjeta:hover{transform:translateY(-8px); background:var(--nieve); color:#000; border-color:var(--nieve);}
.tarjeta .marca{width:46px; height:46px; border-radius:13px; border:1px solid var(--linea-d);
  display:flex; align-items:center; justify-content:center; margin-bottom:26px; background:var(--velo-2);}
.tarjeta:hover .marca{border-color:rgba(0,0,0,.2); background:rgba(0,0,0,.06);}
.tarjeta .marca svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5;}
.tarjeta h3{font-size:1.35rem; letter-spacing:-.035em; margin-bottom:14px;}
.tarjeta p{font-size:.98rem; color:#8b8b92; line-height:1.65;}
.tarjeta:hover p{color:#3a3a40;}

/* Mosaico de marcas funcionales */
.mosaico{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:64px;}
@media(max-width:1040px){ .mosaico{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .mosaico{grid-template-columns:1fr;} }
.pieza{background:var(--velo-1); border:1px solid var(--linea-d); border-radius:20px; padding:30px 26px;
  transition:transform .4s var(--curva), background-color .4s var(--curva), border-color .4s var(--curva), color .4s var(--curva);}
.claro .pieza{background:rgba(0,0,0,.03); border-color:var(--linea-c);}
.pieza:hover{transform:translateY(-6px); background:var(--nieve); color:#000; border-color:var(--nieve);}
.claro .pieza:hover{background:#000; color:var(--nieve); border-color:#000;}
.pieza .marca{width:42px; height:42px; border-radius:12px; border:1px solid var(--linea-d); background:var(--velo-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.claro .pieza .marca{border-color:var(--linea-c); background:rgba(0,0,0,.05);}
.pieza .marca svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5;}
.pieza h4{font-size:1.08rem; letter-spacing:-.03em; margin-bottom:10px;}
.pieza p{font-size:.94rem; color:#8b8b92; line-height:1.6;}
.claro .pieza p{color:#55555c;}
.pieza:hover p{color:#3a3a40;}
.claro .pieza:hover p{color:#b6b6bd;}

/* Banda de cifras sobre panel elevado */
.banda{background:var(--velo-1); border:1px solid var(--linea-d); border-radius:28px; padding:8px;
  margin-top:76px;}
.banda-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea-d);
  border-radius:22px; overflow:hidden;}
@media(max-width:900px){ .banda-in{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .banda-in{grid-template-columns:1fr;} }
.banda-item{background:#050506; padding:44px 30px; transition:background-color .4s var(--curva), color .4s var(--curva);}
.claro .banda-item{background:var(--nieve);}
.banda-item:hover{background:var(--nieve); color:#000;}
.claro .banda-item:hover{background:#000; color:var(--nieve);}
.banda-item .valor{font-size:clamp(2.6rem,5vw,4rem); font-weight:600; letter-spacing:-.06em; line-height:.9;}
.banda-item .etiqueta{margin-top:18px; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--platino);}
.banda-item:hover .etiqueta{color:#55555c;}

/* Planes / modalidades de trabajo */
.planes{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .planes{padding:90px 0;} }
.planes.claro{border-bottom-color:var(--linea-c);}
.planes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:76px; align-items:stretch;}
@media(max-width:980px){ .planes-grid{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto;} }
.plan{background:var(--velo-1); border:1px solid var(--linea-d); border-radius:26px; padding:42px 36px;
  display:flex; flex-direction:column; transition:transform .4s var(--curva), border-color .4s var(--curva);}
.claro .plan{background:rgba(0,0,0,.03); border-color:var(--linea-c);}
.plan:hover{transform:translateY(-8px); border-color:rgba(245,245,247,.4);}
.claro .plan:hover{border-color:rgba(0,0,0,.4);}
.plan.destacado{background:var(--nieve); color:#000; border-color:var(--nieve);}
.plan.destacado:hover{border-color:var(--nieve);}
/* Sobre fondo Nieve el destacado se invierte a Obsidiana */
.claro .plan.destacado{background:#000; color:var(--nieve); border-color:#000;}
.claro .plan.destacado:hover{border-color:#000;}
.claro .plan.destacado .resumen{color:#b4b4bb;}
.claro .plan.destacado li{color:#c2c2c9;}
.claro .plan.destacado .sello{border-color:rgba(245,245,247,.25); color:var(--platino);}
.claro .plan.destacado .etiqueta-plan{color:var(--platino);}
.plan .etiqueta-plan{font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--platino); font-weight:600;}
.plan h3{font-size:1.75rem; letter-spacing:-.04em; margin:20px 0 14px;}
.plan .resumen{font-size:.98rem; color:#8b8b92; line-height:1.65; min-height:76px;}
.claro .plan .resumen{color:#55555c;}
.plan.destacado .resumen{color:#3a3a40;}
.plan .sello{display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:9px 16px; border-radius:100px;
  border:1px solid var(--linea-d); font-size:.82rem; color:var(--platino); align-self:flex-start;}
.plan.destacado .sello{border-color:rgba(0,0,0,.2); color:#55555c;}
.plan ul{list-style:none; margin:30px 0 34px; display:flex; flex-direction:column; gap:14px;}
.plan li{display:flex; gap:12px; font-size:.96rem; line-height:1.5; color:#b4b4bb;}
.claro .plan li{color:#3a3a40;}
.plan.destacado li{color:#2a2a30;}
.plan li::before{content:"✓"; flex:none; font-size:.86rem; opacity:.75;}
.plan .btn{margin-top:auto; width:100%;}
.plan-cinta{position:absolute; top:22px; right:24px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600;}
.plan{position:relative;}

/* ---------- Estructuras de las páginas internas ---------- */
.sec-head{max-width:840px; margin-bottom:64px;}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.6rem); margin-top:26px;}
.sec-head .intro{margin-top:28px; font-size:1.08rem; color:#96969d; max-width:680px; line-height:1.7;}
.claro .sec-head .intro{color:#4c4c53;}

/* Banda de declaración en páginas internas */
.auth{padding:130px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .auth{padding:84px 0;} }
.auth.claro{border-bottom-color:var(--linea-c);}
.auth h2{font-size:clamp(1.9rem,4.6vw,3.7rem); max-width:1080px; line-height:1.04;}

/* Rejilla de capacidades sin numerar (páginas de servicio) */
.capacidades{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:72px;
  background:var(--linea-d); border:1px solid var(--linea-d);}
.claro .capacidades{background:var(--linea-c); border-color:var(--linea-c);}
@media(max-width:900px){ .capacidades{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .capacidades{grid-template-columns:1fr;} }
.capacidades .cap{display:block; grid-template-columns:none; background:#000; padding:38px 34px;
  border-bottom:none; gap:0;
  transition:background-color .4s var(--curva), color .4s var(--curva), transform .4s var(--curva);}
.claro .capacidades .cap{background:var(--nieve);}
.capacidades .cap:hover{padding-left:34px; background:var(--nieve); color:#000; transform:translateY(-4px);
  position:relative; z-index:2;}
.capacidades .cap:hover p{color:#3a3a40;}
.claro .capacidades .cap:hover{background:#000; color:var(--nieve);}
.claro .capacidades .cap:hover p{color:#b6b6bd;}

/* Pasos numerados (páginas de servicio) */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:66px;
  background:var(--linea-d); border:1px solid var(--linea-d);}
.claro .steps{background:var(--linea-c); border-color:var(--linea-c);}
@media(max-width:900px){ .steps{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .steps{grid-template-columns:1fr;} }
.step{background:#000; padding:40px 32px;
  transition:background-color .4s var(--curva), color .4s var(--curva), transform .4s var(--curva);}
.claro .step{background:var(--nieve);}
.step .sn{font-size:2.4rem; font-weight:600; letter-spacing:-.055em; color:var(--platino); line-height:1;}
.step h4{font-size:1.18rem; font-weight:600; margin:20px 0 10px; letter-spacing:-.03em;}
.step p{font-size:.98rem; color:#8b8b92; line-height:1.6;}
.claro .step p{color:#55555c;}
.step:hover{background:var(--nieve); color:#000; transform:translateY(-4px); position:relative; z-index:2;}
.step:hover p{color:#3a3a40;} .step:hover .sn{color:#000;}
.claro .step:hover{background:#000; color:var(--nieve);}
.claro .step:hover p{color:#b6b6bd;} .claro .step:hover .sn{color:var(--nieve);}

/* Catálogo y cierre en /servicios */
.catalogo{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .catalogo{padding:90px 0;} }
.catalogo.claro{border-bottom-color:var(--linea-c);}
.cierre{margin-top:80px; border-left:2px solid var(--nieve); padding:32px 40px;}
.claro .cierre{border-left-color:#000;}
.cierre p{font-size:clamp(1.4rem,3vw,2.2rem); font-weight:600; letter-spacing:-.04em; line-height:1.14;}
.cierre small{display:block; margin-top:18px; color:var(--platino); font-size:1.02rem; font-weight:400; line-height:1.7;}

/* Bloque de dos columnas heredado */
.estrella .acciones,.catalogo .acciones{display:flex; gap:14px; flex-wrap:wrap; margin-top:56px;}

/* ---------- Entrada al scroll, con escalonado ----------
   El contenido es visible por defecto. La animación solo se activa
   cuando el JavaScript confirma que puede ejecutarse (clase .js en
   <html>), de modo que un fallo de script nunca deja la página en blanco. */
.reveal{opacity:1; transform:none;}
.js .reveal{opacity:0; transform:translateY(30px); transition:opacity .8s var(--curva), transform .8s var(--curva);}
.js .reveal.visible{opacity:1; transform:none;}
.reveal[data-retraso="1"]{transition-delay:.08s;}
.reveal[data-retraso="2"]{transition-delay:.16s;}
.reveal[data-retraso="3"]{transition-delay:.24s;}
.reveal[data-retraso="4"]{transition-delay:.32s;}

/* =======================================================
   ARQUITECTURA COMERCIAL — hero con indicadores, problema,
   planes con precio publicado, condiciones, garantía y sectores.
   Mismo sistema: Obsidiana / Nieve / Platino, un solo acento
   funcional (el verde del canal WhatsApp). Sin decoración nueva.
   ======================================================= */

/* El header es adhesivo: los anclajes no deben quedar debajo. */
section[id]{scroll-margin-top:96px;}

/* Indicadores breves bajo los botones del hero */
.hero-puntos{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:40px auto 0; max-width:760px;}
.hero-puntos li{display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:100px;
  border:1px solid var(--linea-d); background:var(--velo-1); font-size:.86rem; color:#b4b4bb;}
.hero-puntos li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--wa); flex:none;}
@media(max-width:560px){ .hero-puntos li{font-size:.8rem; padding:9px 15px;} }

/* Sección de problema comercial */
.problema{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .problema{padding:90px 0;} }
.problema.claro{border-bottom-color:var(--linea-c);}
.problema h2{font-size:clamp(2.1rem,4.8vw,3.8rem); margin-top:26px;}
.problema .tarjetas{margin-top:76px;}
.problema .cierre-bloque p{font-size:clamp(1.2rem,2.4vw,1.75rem);}

/* Bloque de precio dentro de cada plan */
.plan-precio{margin-top:26px; padding:24px 0 4px; border-top:1px solid var(--linea-d);}
.claro .plan-precio{border-top-color:var(--linea-c);}
.plan.destacado .plan-precio{border-top-color:rgba(0,0,0,.16);}
.claro .plan.destacado .plan-precio{border-top-color:rgba(245,245,247,.2);}
.plan-precio .cifra{display:block; font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:600; letter-spacing:-.05em;
  line-height:1;}
.plan-precio .nota{display:block; margin-top:12px; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--platino);}
.plan-precio .mensual{display:block; margin-top:18px; font-size:1.05rem; font-weight:500; letter-spacing:-.02em;}
.plan.destacado .plan-precio .nota{color:#5c5c62;}
.claro .plan.destacado .plan-precio .nota{color:var(--platino);}

/* Condiciones comerciales bajo los planes */
.condiciones{margin-top:76px; padding-top:34px; border-top:1px solid var(--linea-d); max-width:900px;}
.claro .condiciones{border-top-color:var(--linea-c);}
.condiciones .rotulo{font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--platino);
  margin-bottom:22px; font-weight:500;}
.condiciones p{font-size:.95rem; line-height:1.75; color:#8b8b92; margin-bottom:14px;}
.claro .condiciones p{color:#55555c;}
.condiciones p:last-child{margin-bottom:0;}

/* Garantía de implementación */
.garantia{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .garantia{padding:90px 0;} }
.garantia.claro{border-bottom-color:var(--linea-c);}
.garantia h2{font-size:clamp(2.1rem,4.8vw,3.8rem); margin-top:26px;}
.garantia .promise{margin-top:64px;}

/* Sectores */
.sectores{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .sectores{padding:90px 0;} }
.sectores.claro{border-bottom-color:var(--linea-c);}

/* Piezas del mosaico sin marca gráfica: el texto arranca arriba */
.mosaico .pieza h4:first-child{margin-top:0;}

/* ---------- Selector de idioma ----------
   Dos copias: una dentro del menú (escritorio) y otra siempre visible en la
   barra (móvil), porque el menú se colapsa. */
.idioma{display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--linea-d); border-radius:100px; flex:none;}
.claro .idioma{border-color:var(--linea-c);}
.idioma button{font-family:inherit; font-size:.76rem; font-weight:600; letter-spacing:.1em;
  cursor:pointer; padding:7px 13px; min-height:32px; border-radius:100px; border:none;
  background:none; color:#7a7a81;
  transition:background-color .3s var(--curva), color .3s var(--curva);}
.idioma button:hover{color:var(--nieve);}
.claro .idioma button:hover{color:#000;}
.idioma button[aria-pressed="true"]{background:var(--nieve); color:#000;}
.claro .idioma button[aria-pressed="true"]{background:#000; color:var(--nieve);}

.idioma-barra{display:none; margin-left:auto; margin-right:14px;}
@media(max-width:980px){
  .idioma-barra{display:inline-flex;}
  .idioma-menu{display:none;}
  /* Dentro del menú desplegado el selector no debe estirarse. */
  .nav-links .idioma{align-self:flex-start; margin-top:20px;}
}

/* `.sec-head .intro` sólo aplica a un descendiente; cuando ambas clases van
   en el mismo párrafo el margen superior nunca se activaba y el texto
   quedaba pegado al título. */
.sec-head.intro{margin-top:30px;}

/* ---------- Precio destacado en las páginas de servicio ---------- */
.precio-destacado{margin-top:44px; padding:26px 30px; border-left:2px solid var(--nieve);
  max-width:620px;}
.claro .precio-destacado{border-left-color:#000;}
.precio-destacado .rotulo{font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--platino); font-weight:600; margin-bottom:16px;}
.precio-destacado .cifra{font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:600; letter-spacing:-.05em;
  line-height:1.1;}
.precio-destacado .cifra span{font-size:.9rem; font-weight:400; letter-spacing:0; color:var(--platino);
  display:block; margin-top:6px;}
.precio-destacado .mensual{margin-top:14px; font-size:1.05rem; font-weight:500; letter-spacing:-.02em;}
.precio-destacado .nota{margin-top:18px; font-size:.92rem; color:var(--platino); line-height:1.65;}
.precio-destacado + .hero-cta{margin-top:36px;}

/* CTA duplicado justo debajo del precio: quien ya decidió no tiene que
   atravesar toda la lista de características para encontrar el botón. */
.plan .btn.arriba{margin-top:26px; margin-bottom:2px; width:100%;}

/* Lo que el plan NO incluye: misma tipografía, jerarquía menor, sin color de alarma */
.plan-excluye{margin:0 0 34px; padding-top:22px; border-top:1px solid var(--linea-d);}
.claro .plan-excluye{border-top-color:var(--linea-c);}
.plan.destacado .plan-excluye{border-top-color:rgba(0,0,0,.16);}
.claro .plan.destacado .plan-excluye{border-top-color:rgba(245,245,247,.2);}
.plan-excluye .rotulo{font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--platino);
  margin-bottom:16px; font-weight:600;}
.plan .lista-no{margin:0; gap:11px;}
.plan .lista-no li{color:var(--platino); font-size:.92rem;}
.claro .plan .lista-no li{color:#6a6a70;}
.plan.destacado .lista-no li{color:#6a6a70;}
.plan .lista-no li::before{content:"—"; opacity:.6;}

/* ---------- Presentación de demostraciones en la portada ---------- */
.demos-intro{padding:140px 0; border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .demos-intro{padding:90px 0;} }
.demos-intro.claro{border-bottom-color:var(--linea-c);}
.demos-intro h2{font-size:clamp(2.1rem,4.8vw,3.8rem); margin-top:26px;}
.etiqueta-demo{font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--platino);
  font-weight:600; margin-bottom:18px;}

/* La demo guiada usa tarjeta de contorno; la conversacional, panel elevado.
   La diferencia de jerarquía es la que separa las dos experiencias. */
.demos-cards{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:72px;}
@media(max-width:860px){ .demos-cards{grid-template-columns:1fr;} }
.demo-card{border:1px solid var(--linea-d); border-radius:24px; padding:40px 34px;
  display:flex; flex-direction:column; transition:border-color .4s var(--curva), transform .4s var(--curva);}
.claro .demo-card{border-color:var(--linea-c);}
.demo-card:hover{transform:translateY(-6px); border-color:rgba(245,245,247,.4);}
.claro .demo-card:hover{border-color:rgba(0,0,0,.4);}
.demo-card h3{font-size:1.6rem; letter-spacing:-.04em; margin-bottom:16px;}
.demo-card p{font-size:1rem; color:#8b8b92; line-height:1.65; margin-bottom:32px;}
.claro .demo-card p{color:#55555c;}
.demo-card .btn{margin-top:auto; align-self:flex-start;}

.demo-privada-cta{margin-top:22px; background:var(--velo-1); border:1px solid var(--linea-d);
  border-radius:24px; padding:48px 40px;}
.claro .demo-privada-cta{background:rgba(0,0,0,.03); border-color:var(--linea-c);}
.demo-privada-cta h3{font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.04em; margin-bottom:16px;}
.demo-privada-cta p{font-size:1.04rem; color:#8b8b92; line-height:1.7; max-width:680px; margin-bottom:34px;}
.claro .demo-privada-cta p{color:#55555c;}
@media(max-width:560px){ .demo-privada-cta{padding:36px 26px;} }

/* `overflow-x:hidden` en el body convierte el documento en contenedor de
   desplazamiento y anula `position:sticky` en todos sus descendientes — por
   eso el panel de las demos no se quedaba fijo. `clip` recorta igual el
   desbordamiento horizontal (firma gigante, marquesina) sin crear ese
   contenedor. */
body{overflow-x:clip;}

/* El banner de cookies llegaba a ocupar el 68% de una pantalla de móvil con
   el detalle abierto, tapando los CTA. Se limita su altura y el detalle
   desplaza por dentro. */
.cookies{max-height:min(72vh,560px); overflow-y:auto; overscroll-behavior:contain;}
.cookies .detalle{max-height:34vh; overflow-y:auto;}
@media(max-width:640px){
  .cookies{padding:20px 0; max-height:64vh;}
  .cookies p{font-size:.88rem; line-height:1.55;}
  .cookies-in{gap:16px;}
  .cookies .acciones{width:100%;}
  .cookies .acciones .btn{flex:1;}
  .cookies .detalle{margin-top:18px; padding-top:18px; max-height:28vh;}
  .cookies .detalle h4{font-size:.9rem;}
  .cookies .detalle p{margin-bottom:14px;}
}

/* =======================================================
   AJUSTES DE RITMO DEL HERO
   El titular es largo: a 6rem y 16ch se partía en cuatro líneas y
   los botones quedaban pegados al párrafo. Bajamos la escala,
   ensanchamos la caja y abrimos aire antes de los CTA.
   ======================================================= */
.hero-centro h1{font-size:clamp(2.4rem,5.4vw,4.4rem); max-width:19ch; margin-top:36px;}
.hero-centro p.lead{max-width:660px; margin-top:34px;}
.hero-centro .hero-cta{margin-top:56px;}
/* Los cuatro indicadores caben en una sola línea en escritorio: a 760px
   el cuarto quedaba huérfano en un segundo renglón. */
.hero-centro .hero-puntos{margin-top:46px; max-width:940px;}
.hero-centro .social-proof{margin-top:54px;}
@media(max-width:640px){
  .hero-centro h1{max-width:none;}
  .hero-centro .hero-cta{margin-top:40px;}
  .hero-centro .hero-puntos{margin-top:36px;}
  .hero-centro .social-proof{margin-top:40px;}
}

/* En móvil los dos CTA ocupan el ancho: dos botones a medias se leen peor. */
@media(max-width:560px){
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .btn{width:100%;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .btn:hover,.resena:hover{transform:none;}
  .cinta{animation:none;}
  .burbuja{opacity:1; transform:none; animation:none;}
  .punto{animation:none;}
  .wa-float{opacity:1; transform:none; transition:none;}
  .flecha{transition:none;}
}


/* ===============================================================
   SUPERFICIE TACTIL MINIMA — accesibilidad (WCAG 2.5.8)
   Corrige los elementos por debajo de 44 px detectados en la
   auditoría. Solo amplía el área sensible: no cambia tipografía,
   color ni posición visual de ningún componente.
   =============================================================== */

.nav .brand,
.pie .brand,
.foot-col a,
.pie-corto a,
.social-proof,
.idioma button,
.idioma a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Los enlaces del pie ocupan una fila completa: basta con separarlos
   verticalmente para que cada zona sensible alcance el mínimo. */
.foot-col a {
  padding: 10px 0;
}

.pie-corto a {
  padding: 12px 0;
}

/* Iconos sociales: el icono conserva su tamaño, el área crece. */
.social a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Casillas de verificación: la etiqueta completa es el objetivo táctil,
   pero la casilla en sí también debe poder pulsarse con comodidad. */
.check input[type="checkbox"],
.consentimiento-form input[type="checkbox"] {
  width: 24px;
  height: 24px;
}

/* Campos trampa antispam: invisibles y sin superficie táctil real. */
.trampa,
.trampa input,
.trampa label {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* El pie usa .foot-bottom y .foot-top: sus enlaces tambien deben
   alcanzar la superficie tactil minima. */
.foot-bottom a,
.foot-top .brand,
footer .brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
}