:root{
  --ink:#0B1220;
  --ink-2:#334155;
  --muted:#64748B;
  --line:#E4E9EF;
  --line-soft:#EFF3F7;
  --bg:#FFFFFF;
  --bg-alt:#F7F9FB;
  /* Marca Kuxio — verde y morado del camaleón.
     El verde vivo (#26E585) no tiene contraste suficiente sobre blanco,
     así que para texto y botones se usa la versión oscura. */
  --brand:#0A7A4B;
  --brand-dark:#087043;
  --brand-vivo:#26E585;
  --brand-tint:#E4F7ED;
  --purple:#8436FB;
  --purple-light:#A78BFA;
  --amber:#B45309;
  --logo-grad:linear-gradient(135deg,var(--purple) 0%,var(--brand-vivo) 100%);
  --amber-tint:#FDF3E3;
  --dark:#0C0C0E;
  --radius:16px;
  --radius-sm:10px;
  --container:1280px;
  --shadow:0 1px 2px rgba(11,18,32,.04), 0 8px 24px -12px rgba(11,18,32,.10);
  --shadow-lg:0 2px 4px rgba(11,18,32,.04), 0 24px 48px -20px rgba(11,18,32,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"cv11" 1;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:680}
h1{font-size:clamp(2.15rem,1.35rem + 3.4vw,3.75rem);letter-spacing:-.035em}
h2{font-size:clamp(1.65rem,1.15rem + 2.1vw,2.6rem);letter-spacing:-.03em}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.32rem)}
p{margin:0}
/* El canal central. A 1140px, en una pantalla de 1920 sobraban 390px de
   vacio a cada lado y las cuatro puertas quedaban en columnas de 263px:
   texto largo en canutos flacos. Se ensancha el canal y el margen lateral
   crece con la pantalla en vez de quedarse en 20px fijos. Los parrafos NO
   se estiran con el: siguen topados en ch (.lede 62ch, .section-head 66ch),
   que es lo que se lee comodo. El ancho extra se lo quedan las rejillas. */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(20px,3vw,40px)}
section{padding:clamp(56px,7vw,104px) 0}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;
}
.lede{font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);color:var(--ink-2);max-width:62ch}
.section-head{max-width:66ch;margin-bottom:clamp(32px,4vw,52px)}
.section-head p{margin-top:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:11px;font-weight:640;font-size:.97rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .14s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  white-space:nowrap;line-height:1.2;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(8,112,67,.24),0 8px 20px -10px rgba(8,112,67,.55)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#C9D3DE;background:var(--bg-alt)}
.btn-dark{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.2)}
.btn-dark:hover{background:rgba(255,255,255,.16)}
.btn-lg{padding:16px 30px;font-size:1.02rem}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:760;letter-spacing:-.03em;font-size:1.22rem}
.logo-mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:var(--dark);display:grid;place-items:center;overflow:hidden;
}
.logo-mark img{width:76%;height:auto}
.nav-links{display:none;gap:clamp(14px,1.7vw,30px);font-size:.94rem;font-weight:520;color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--brand)}
@media(min-width:940px){.nav-links{display:flex;align-items:center}}

/* ── El menu desplegable ────────────────────────────────────────────
   Abre al pasar el mouse Y al hacer clic. Solo con hover, quien navega
   con teclado o llega desde un celular con mouse conectado no puede
   abrirlo; solo con clic, se siente lento para el que ya sabe a donde
   va. Las dos, y el clic manda. */
.nav-desplegable{position:relative}
.nav-boton{
  display:inline-flex;align-items:center;gap:5px;
  font:inherit;font-weight:520;color:var(--ink-2);
  background:none;border:0;padding:6px 0;cursor:pointer;
}
.nav-boton:hover,.nav-boton[aria-expanded="true"]{color:var(--brand)}
.nav-boton svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.nav-boton[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-boton:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.nav-hoja{
  position:absolute;top:calc(100% + 10px);left:-14px;z-index:60;
  min-width:280px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(16,32,48,.28);
}
.nav-hoja[hidden]{display:none}
.nav-hoja a{
  display:block;padding:10px 12px;border-radius:9px;
  text-decoration:none;color:var(--ink);line-height:1.3;
}
.nav-hoja a:hover{background:var(--bg-alt)}
.nav-hoja a b{display:block;font-weight:640;font-size:.95rem}
.nav-hoja a span{display:block;font-size:.83rem;color:var(--ink-2);margin-top:1px}
/* La hoja tapa contenido: el foco tiene que verse aunque este encima. */
.nav-hoja a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* Los rotulos del menu movil: agrupan sin ser botones. */
.hojas-titulo{
  display:block;padding:12px 2px 4px;font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);opacity:.7;
}
.hojas-titulo:first-child{padding-top:2px}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:10px 18px;font-size:.9rem}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(40px,5vw,72px)}
.hero-grid{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.06fr .94fr}}
.hero h1{margin-bottom:22px;text-wrap:balance}
.hero .lede{font-size:clamp(1.06rem,1rem + .42vw,1.24rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:16px;font-size:.86rem;color:var(--muted)}
.trust-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:44px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media(min-width:720px){.trust-strip{grid-template-columns:repeat(4,1fr)}}
.trust-item{background:#fff;padding:18px 16px}
.trust-item strong{display:block;font-size:.94rem;font-weight:660;letter-spacing:-.01em}
.trust-item span{display:block;font-size:.8rem;color:var(--muted);margin-top:3px;line-height:1.45}

/* ---------- phone / chat demo ---------- */
.phone{
  width:100%;max-width:352px;margin:0 auto;background:#0E1B26;border-radius:34px;
  padding:11px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.09);
}
.phone-screen{background:#E9E3DC;border-radius:25px;overflow:hidden;position:relative}
.phone-bar{
  background:#0A7A4B;color:#fff;padding:11px 14px;display:flex;align-items:center;gap:10px;
}
.phone-avatar{width:34px;height:34px;border-radius:50%;background:#0C0C0E;display:grid;place-items:center;flex:none;overflow:hidden}
.phone-avatar img{width:78%;height:auto}
.phone-name{font-size:.9rem;font-weight:640;line-height:1.25}
.phone-status{font-size:.7rem;opacity:.82;line-height:1.3}
.chat{padding:14px 12px;min-height:400px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.bubble{
  max-width:82%;padding:9px 12px;border-radius:12px;font-size:.855rem;line-height:1.5;
  box-shadow:0 1px 1px rgba(11,18,32,.09);opacity:0;transform:translateY(8px);
  animation:pop .32s ease forwards;color:#0B1220;
}
@keyframes pop{to{opacity:1;transform:none}}
.bubble.in{background:#fff;border-top-left-radius:3px;align-self:flex-start}
.bubble.out{background:#D6F5C8;border-top-right-radius:3px;align-self:flex-end}
.bubble .time{display:block;font-size:.62rem;color:#64748B;text-align:right;margin-top:2px}
.typing{
  align-self:flex-start;background:#fff;padding:11px 14px;border-radius:12px;border-top-left-radius:3px;
  display:flex;gap:4px;box-shadow:0 1px 1px rgba(11,18,32,.09);
}
.typing i{width:6px;height:6px;border-radius:50%;background:#94A3B8;animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.phone-caption{text-align:center;font-size:.82rem;color:var(--muted);margin-top:18px}

/* ---------- dark band ---------- */
.band-dark{background:var(--dark);color:#fff}
.band-dark h2{color:#fff}
.band-dark .lede{color:#A9BAC6}
.band-dark .eyebrow{color:var(--brand-vivo)}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:clamp(16px,1.5vw,26px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media(min-width:640px){.g2,.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;
  transition:border-color .16s ease,box-shadow .18s ease,transform .18s ease;
}
.card:hover{border-color:#CDD8E3;box-shadow:var(--shadow);transform:translateY(-2px)}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.94rem}
.card-icon{
  width:42px;height:42px;border-radius:11px;background:var(--brand-tint);color:var(--brand-dark);
  display:grid;place-items:center;margin-bottom:18px;
}
.card-icon svg{width:21px;height:21px}
.card-price{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:.85rem;color:var(--muted);
}
.card-price b{color:var(--ink);font-weight:660}

/* ---------- KPI row ---------- */
.kpi-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media(min-width:820px){.kpi-row{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff;padding:26px 22px}
.kpi-value{
  font-size:clamp(2.1rem,1.5rem + 2vw,2.85rem);font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.kpi-value small{font-size:.44em;font-weight:640;letter-spacing:-.02em;margin-left:2px;color:var(--ink-2)}
.kpi-label{margin-top:11px;font-size:.87rem;font-weight:600;color:var(--ink)}
.kpi-note{margin-top:4px;font-size:.78rem;color:var(--muted);line-height:1.45}

/* ---------- placeholder ---------- */
.ph{
  background:var(--amber-tint);color:var(--amber);border:1px dashed #D9A441;
  border-radius:6px;padding:0 6px;font-weight:640;font-size:.94em;
  overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.ph-note{
  margin-top:20px;padding:15px 18px;background:var(--amber-tint);border:1px dashed #D9A441;
  border-radius:var(--radius-sm);font-size:.86rem;color:#78400A;line-height:1.6;
}
.ph-note b{color:var(--amber)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:18px}
/* Son CUATRO pasos. En tres columnas el cuarto quedaba solo en una fila
   aparte, como si sobrara. 2x2 en tablet, los cuatro en fila en escritorio. */
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.step::before{
  counter-increment:s;content:counter(s);
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:.9rem;font-weight:700;margin-bottom:16px;
}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.94rem}

/* ---------- pricing ---------- */
.plans{display:grid;gap:clamp(16px,1.5vw,26px);align-items:start}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{
  border:1px solid var(--line);border-radius:18px;background:#fff;padding:30px 26px;
  display:flex;flex-direction:column;height:100%;
}
.plan.featured{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint),var(--shadow);position:relative}
.plan-flag{
  position:absolute;top:-13px;left:26px;background:var(--brand);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;
}
.plan-name{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.plan-for{font-size:.86rem;color:var(--muted);margin-top:5px;min-height:2.6em}
.plan-price{margin:20px 0 4px;display:flex;align-items:baseline;gap:5px}
.plan-price b{font-size:2.1rem;font-weight:720;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan-price span{font-size:.9rem;color:var(--muted)}
.plan-billing{font-size:.8rem;color:var(--muted);min-height:2.4em}
/* flex:1 para que el boton quede abajo en las tres tarjetas, pero la
   lista NO reparte el sobrante entre sus items: en el plan Esencial, el
   mas corto, los cuatro puntos quedaban separados por huecos enormes. */
.plan ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px;flex:1;align-content:start;justify-content:flex-start}
.plan li{display:flex;gap:10px;font-size:.91rem;color:var(--ink-2);line-height:1.5}
.plan li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--brand)}
.plan .btn{width:100%}
.plans-note{margin-top:24px;font-size:.87rem;color:var(--muted);text-align:center}

/* ---------- conmutador de plazo: mes a mes / pago anual ----------
   Dos radios escondidos y el CSS; ni una linea de JavaScript. Asi el
   precio correcto ya esta en el HTML cuando carga la pagina -Google lo
   lee, y quien tenga el JS bloqueado tambien- y el conmutador funciona
   con teclado sin que nadie tenga que programarlo. Lo pinta
   construir-planes.mjs cuando TODOS los planes de la familia traen los
   dos plazos en el catalogo. */
.per-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.per-switch{
  display:flex;width:max-content;max-width:100%;flex-wrap:wrap;justify-content:center;
  gap:4px;padding:5px;margin:0 auto clamp(22px,3vw,34px);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
}
.per-op{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  padding:9px 18px;border-radius:999px;font-size:.94rem;font-weight:620;color:var(--ink-2);
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.per-op:hover{color:var(--ink)}
.per-off{
  font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:99px;
  background:var(--brand-tint);color:var(--brand-dark);
}
.r-mes:checked ~ .per-switch .op-mes,
.r-largo:checked ~ .per-switch .op-largo{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.r-largo:checked ~ .per-switch .op-largo .per-off{background:var(--brand);color:#fff}
.r-mes:focus-visible ~ .per-switch .op-mes,
.r-largo:focus-visible ~ .per-switch .op-largo{outline:2px solid var(--brand);outline-offset:2px}

/* Lo que se ve en cada plazo. Por defecto, el mensual. */
.per-elige .p-largo{display:none}
.r-largo:checked ~ .grid .p-mes{display:none}
.r-largo:checked ~ .grid s.p-largo{display:inline}
.r-largo:checked ~ .grid b.p-largo,
.r-largo:checked ~ .grid p.p-largo{display:block}
.r-largo:checked ~ .grid a.p-largo{display:inline-flex}
.plan-antes{font-size:1.05rem;font-weight:600;color:var(--muted);text-decoration:line-through}
.plan-plazo{margin:2px 0 0;font-size:.82rem;font-weight:640;color:var(--ink-2)}
.per-nota{margin:18px auto 0;max-width:72ch;text-align:center;font-size:.86rem;color:var(--muted);line-height:1.55}
@media (max-width:560px){
  .per-op{padding:8px 13px;font-size:.88rem;gap:6px}
  .per-off{font-size:.68rem;padding:2px 6px}
}

/* El renglon del anual en planes.html: la tarjeta de ahi manda a la
   pagina del plan, pero el precio del año se dice desde la tarjeta. */
.plan-anual{margin:4px 0 0;font-size:.84rem;color:var(--brand-dark);font-weight:620}
.plan-anual b{font-weight:720;font-variant-numeric:tabular-nums}

/* ---------- testimonials ---------- */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;
  display:flex;flex-direction:column;height:100%;
}
.quote-stars{color:#B45309;font-size:.9rem;letter-spacing:2px;margin-bottom:14px}
.quote p{font-size:.98rem;line-height:1.6;flex:1}
.quote-by{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.quote-av{width:40px;height:40px;border-radius:50%;background:var(--brand-tint);color:var(--brand-dark);display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none}
.quote-by strong{display:block;font-size:.9rem;font-weight:640}
.quote-by span{display:block;font-size:.8rem;color:var(--muted)}

/* ---------- guarantee ---------- */
.guarantee{
  display:grid;gap:24px;align-items:center;padding:clamp(28px,3.6vw,44px);
  border:1px solid var(--line);border-radius:20px;background:var(--bg-alt);
}
@media(min-width:800px){.guarantee{grid-template-columns:auto 1fr auto}}
.guarantee-seal{
  width:76px;height:76px;border-radius:50%;background:#fff;border:2px solid var(--brand);
  display:grid;place-items:center;color:var(--brand-dark);flex:none;margin:0 auto;
}
.guarantee-seal svg{width:34px;height:34px}
.guarantee h3{margin-bottom:8px}
.guarantee p{color:var(--ink-2);font-size:.95rem}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto}
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{
  cursor:pointer;padding:18px 34px 18px 0;font-weight:620;font-size:1.02rem;
  list-style:none;position:relative;letter-spacing:-.01em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 20px;color:var(--ink-2);font-size:.96rem;max-width:68ch}

/* ---------- final cta ---------- */
.final{
  background:var(--dark);color:#fff;border-radius:22px;padding:clamp(36px,5vw,68px) clamp(24px,4vw,56px);
  text-align:center;
}
.final h2{color:#fff;margin-bottom:16px;text-wrap:balance}
.final p{color:#A9BAC6;max-width:56ch;margin:0 auto}
.final .hero-cta{justify-content:center;margin-top:30px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(44px,5vw,64px) 0 34px;background:var(--bg-alt)}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot-col h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-col a{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--brand)}
.foot-about p{font-size:.9rem;color:var(--ink-2);margin-top:14px;max-width:36ch}
.foot-legal{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:.82rem;color:var(--muted);
}
.foot-legal a{text-decoration:none}

/* ---------- wa float ---------- */
/* El sitio para el flotante lo deja el pie (footer{padding-bottom:96px},
   mas abajo), no el cuerpo: con los dos sumaban 192 px de blanco al
   final de cada pagina. Y mientras el pie esta en pantalla el boton se
   esconde solo. */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#0A7A4B;color:#fff;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 8px 24px -6px rgba(8,112,67,.6);transition:transform .2s ease,opacity .2s ease;
}
.wa:hover{transform:scale(1.06)}
/* Se aparta mientras hay un boton verde de verdad en pantalla. Se va
   hacia abajo en vez de desaparecer de golpe: si alguien lo estaba
   mirando, entiende que se movio y no que se rompio. */
.wa-quieto{opacity:0;transform:translateY(80px) scale(.9);pointer-events:none}
.wa svg{width:28px;height:28px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .bubble{opacity:1;transform:none}
}

@media print{.wa{display:none}}

/* ---------- marca ---------- */
.final{position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-grad);
}

/* ---------- mascota ---------- */
.demo-grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:900px){.demo-grid{grid-template-columns:1.15fr .85fr}}
.mascota{
  width:min(340px,80%);height:auto;margin:0 auto;
  filter:drop-shadow(0 24px 48px rgba(132,54,251,.45));
  animation:flotar 5s ease-in-out infinite;
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.mascota{animation:none}}
/* En el cierre va mas chica: es el saludo antes de pedir, no el tema de
   la seccion. El titulo tiene que seguir siendo lo primero que se lee. */
.final .mascota{width:min(150px,42%);margin-bottom:20px}
@media (min-width:760px){.final .mascota{width:180px}}

/* ---------- páginas de planes ---------- */
.franja{background:var(--bg-alt)}
.plan-ancho{
  display:grid;gap:clamp(24px,3vw,40px);align-items:center;
  border:1px solid var(--line);border-radius:20px;background:#fff;
  padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow);
}
@media(min-width:900px){.plan-ancho{grid-template-columns:1.25fr .75fr}}
.plan-ancho-precio{border-left:0;padding-left:0}
@media(min-width:900px){.plan-ancho-precio{border-left:1px solid var(--line-soft);padding-left:clamp(24px,3vw,40px)}}
.lista-inline{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.lista-inline li{
  font-size:.84rem;color:var(--ink-2);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:99px;padding:6px 13px;
}
.lista-inline.claro li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#CBD7E0}
.periodos{display:grid;gap:8px;margin-bottom:18px}
.periodo{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;
  padding:12px 16px;border:1px solid var(--line);border-radius:12px;
}
.periodo span{font-size:.85rem;color:var(--muted);font-weight:600}
.periodo b{font-size:1.25rem;font-weight:720;letter-spacing:-.03em;text-align:right;font-variant-numeric:tabular-nums}
.periodo small{font-size:.75rem;color:var(--muted);grid-column:2/4;text-align:right}
.periodo.destacado{border-color:var(--brand);background:var(--brand-tint)}
.periodo.destacado b{color:var(--brand-dark)}

/* combo */
.combo{
  background:var(--dark);color:#fff;border-radius:22px;overflow:hidden;
  padding:clamp(30px,4vw,52px);display:grid;gap:clamp(28px,4vw,48px);align-items:center;
  position:relative;
}
.combo::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-grad)}
@media(min-width:900px){.combo{grid-template-columns:1.3fr .7fr}}
.combo-flag{
  display:inline-block;background:var(--brand-vivo);color:#06301C;
  font-size:.72rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:99px;margin-bottom:16px;
}
.combo-precio{text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:26px 22px}
.combo-antes{font-size:.85rem;color:#7C8B99;text-decoration:line-through;margin-bottom:6px}
.combo-valor{font-size:clamp(2.2rem,1.6rem + 2vw,3rem);font-weight:740;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.combo-valor span{font-size:.36em;font-weight:600;color:#A9BAC6;letter-spacing:0}
.combo-nota{font-size:.85rem;color:var(--brand-vivo);margin:12px 0 20px;line-height:1.5}

/* detalle de plan */
.detalle-hero{padding-bottom:clamp(48px,6vw,80px)}
.detalle-hero .lede{max-width:56ch}
.plan-flag.estatico{position:static;display:inline-block}
.precio-caja{
  display:inline-block;margin:34px auto 26px;padding:26px 44px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;
}
.precio-grande{font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem);font-weight:740;letter-spacing:-.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.precio-grande span{font-size:.32em;font-weight:600;color:#A9BAC6;letter-spacing:0}
.precio-nota{margin-top:12px;font-size:.85rem;color:#A9BAC6}

/* ---------- periodos elegibles ---------- */
.periodos-titulo{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;text-align:center}
.periodos{display:grid;gap:10px;margin-bottom:18px}
@media(min-width:760px){.periodos.oscuro{grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto 8px}}
.periodo{
  display:block;text-decoration:none;padding:16px 18px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:border-color .16s,box-shadow .18s,transform .16s;
}
.periodo:hover{border-color:var(--brand);box-shadow:0 8px 24px -14px rgba(8,112,67,.6);transform:translateY(-2px)}
.periodo-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.periodo-cab span{font-size:.88rem;font-weight:660;color:var(--ink)}
.periodo-cab em{
  font-style:normal;font-size:.66rem;font-weight:760;letter-spacing:.07em;text-transform:uppercase;
  background:var(--brand);color:#fff;padding:4px 9px;border-radius:99px;
}
.periodo b{font-size:1.5rem;font-weight:730;letter-spacing:-.035em;font-variant-numeric:tabular-nums;display:block;line-height:1.1}
.periodo b small{font-size:.5em;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:5px}
.periodo-pie{font-size:.76rem;color:var(--muted);margin-top:5px;line-height:1.45}
.periodo-ahorro{font-size:.76rem;color:var(--brand);font-weight:640;margin-top:6px;line-height:1.45}
.periodo.destacado{border-color:var(--brand);background:var(--brand-tint)}
.periodo.destacado b{color:var(--brand-dark)}
.periodo-btn{
  display:block;margin-top:14px;text-align:center;padding:11px 16px;border-radius:10px;
  background:var(--brand);color:#fff;font-size:.9rem;font-weight:660;
}
.periodo:not(.destacado) .periodo-btn{background:transparent;color:var(--brand);border:1px solid var(--line)}
.periodo:not(.destacado):hover .periodo-btn{border-color:var(--brand)}

/* selector sobre fondo oscuro (páginas de detalle) */
.periodos.oscuro .periodo{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);text-align:left}
.periodos.oscuro .periodo-cab span{color:#fff}
.periodos.oscuro .periodo b{color:#fff}
.periodos.oscuro .periodo b small{color:#A9BAC6}
.periodos.oscuro .periodo-pie{color:#8FA1AF}
.periodos.oscuro .periodo-ahorro{color:var(--brand-vivo)}
.periodos.oscuro .periodo.destacado{background:rgba(38,229,133,.10);border-color:var(--brand-vivo)}
.periodos.oscuro .periodo.destacado b{color:#fff}
.periodos.oscuro .periodo-cab em{background:var(--brand-vivo);color:#06301C}
.periodos.oscuro .periodo:not(.destacado) .periodo-btn{color:#fff;border-color:rgba(255,255,255,.24)}
.periodos.oscuro .periodo:hover{border-color:var(--brand-vivo)}

/* el botón del periodo destacado necesita más especificidad que las reglas
   genéricas de <span> que heredan de las tarjetas de plan */
.periodos .periodo.destacado .periodo-btn{background:var(--brand);color:#fff}
.periodos.oscuro .periodo.destacado .periodo-btn{background:var(--brand-vivo);color:#06301C}
.periodos .periodo:not(.destacado) .periodo-btn{color:var(--brand)}
.periodos.oscuro .periodo:not(.destacado) .periodo-btn{color:#fff}

/* ---------- páginas legales ---------- */
.legal{padding-top:clamp(40px,5vw,64px)}
.legal .container{max-width:820px}
.legal-cab{margin-bottom:clamp(28px,3.5vw,40px)}
.legal-cab h1{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.6rem);margin-bottom:16px}
.legal-fecha{margin-top:18px;font-size:.84rem;color:var(--muted)}
.legal-nav{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4vw,44px);
  padding-bottom:clamp(24px,3vw,32px);border-bottom:1px solid var(--line);
}
.legal-nav a{
  font-size:.85rem;font-weight:600;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line);border-radius:99px;padding:8px 15px;
  transition:border-color .16s,color .16s,background .16s;
}
.legal-nav a:hover{border-color:var(--brand);color:var(--brand)}
.legal-nav a.actual{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark)}
.legal-cuerpo h2{
  font-size:clamp(1.12rem,1rem + .5vw,1.35rem);margin:clamp(34px,4vw,46px) 0 14px;
  padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--line-soft);
}
.legal-cuerpo h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-cuerpo p{color:var(--ink-2);margin-bottom:14px;font-size:1rem;line-height:1.7}
.legal-cuerpo ul{margin:0 0 16px;padding-left:22px;display:grid;gap:10px}
.legal-cuerpo li{color:var(--ink-2);font-size:1rem;line-height:1.65}
.legal-cuerpo a{color:var(--brand);font-weight:600}
.legal-cuerpo b{color:var(--ink);font-weight:660}

/* ══════════════════════════════════════════════════════════════════════
   Página principal reorganizada · agosto 2026
   Todo con los tokens de arriba: no entra ni un color nuevo. El objetivo
   de este bloque es que el visitante elija su camino en un segundo y vea
   solo los tres planes que le sirven.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Elegir el camino ── */
.elegir-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.elegir-grid{grid-template-columns:1fr}}

.elegir-card{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  text-align:left;font:inherit;cursor:pointer;
  background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.elegir-card:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.elegir-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.elegir-card[aria-pressed="true"]{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.elegir-card[aria-pressed="true"] .elegir-tag{background:var(--brand);color:#fff}

.elegir-tag{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--brand-tint);color:var(--brand-dark);
  font-size:.76rem;font-weight:700;letter-spacing:.02em;
}
.elegir-card h3{margin:2px 0 0;font-size:1.35rem;letter-spacing:-.02em}
.elegir-card p{margin:0;color:var(--ink-2);font-size:.97rem}
.elegir-card .lista-inline{margin:4px 0 0}

.elegir-marcas{
  margin-top:22px;padding:16px 20px;border-radius:var(--radius-sm);
  background:var(--bg);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  color:var(--ink-2);font-size:.94rem;
}

/* ── Tarjeta de plan: solo lo que decide la compra ── */
.plan-lista li::before{
  content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.plan-limite{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:.84rem;color:var(--muted);line-height:1.5;
}
.btn-bloque{display:block;width:100%;text-align:center;margin-top:18px}

/* ── Comparación ── */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.tabla-comparar{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.tabla-comparar th{
  text-align:left;padding:14px 18px;background:var(--bg-alt);
  border-bottom:1px solid var(--line);font-size:.86rem;letter-spacing:.02em;
}
.tabla-comparar th:not(:first-child),
.tabla-comparar td:not(:first-child){text-align:center;width:26%}
.tabla-comparar td{padding:13px 18px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.tabla-comparar tr:last-child td{border-bottom:0}
.tabla-comparar td:first-child{color:var(--ink);font-weight:500}

/* El "si" es un chulo verde y el "no" una raya gris. La palabra sigue
   ahi para quien usa lector de pantalla -.lector-, pero el ojo ya no
   tiene que leer veintidos "No" para encontrar las cuatro cosas que si.
   La raya no lleva color de alerta: no tenerlo no es un error, es que
   ese sistema es para otra cosa. */
.tabla-comparar td.si{color:var(--brand)}
.tabla-comparar td.si svg{
  width:19px;height:19px;display:inline-block;vertical-align:-4px;
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.tabla-comparar td.no{color:var(--line);font-size:1.1rem;line-height:1}
.tabla-comparar td.mas{color:var(--ink-2);font-size:.88rem}
.tabla-comparar th[scope="row"]{
  text-align:left;background:transparent;border-bottom:1px solid var(--line-soft);
  padding:13px 18px;color:var(--ink);font-weight:500;font-size:.95rem;letter-spacing:0;
}
.tabla-comparar tr:last-child th[scope="row"]{border-bottom:0}
.lector{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.tabla-nota{
  margin:16px 2px 0;font-size:.88rem;line-height:1.55;color:var(--muted);max-width:70ch;
}
.tabla-nota b{color:var(--ink-2);font-weight:700}

/* [hidden] tiene que ganarle a cualquier display de arriba: sin esto, un
   .plans{display:grid} deja visible el grupo que se acaba de ocultar. */
[hidden]{display:none !important}

/* ══════════════════════════════════════════════════════════════════════
   EL CELULAR.

   Casi todo el sitio ya se adapta solo, pero tres cosas se rompian de
   verdad en pantalla chica y ninguna avisaba: se veian "casi bien".
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. La tabla de comparacion se cortaba ────────────────────────────
   Tenia min-width:520px dentro de una envoltura con overflow-x:auto. O
   sea que SI se podia deslizar... si uno adivinaba que se podia. Lo que
   se veia era la columna del bot cortada a la mitad y ni rastro de la
   de Cortek: justo la comparacion que la persona vino a hacer.

   A 360px la tabla entra completa bajando letra y respiro. Se prefiere
   que quepa antes que ensenar a deslizar: una tabla de tres columnas y
   once filas se lee de un vistazo o no se lee. */
@media (max-width:680px){
  .tabla-comparar{min-width:0;font-size:.78rem}
  .tabla-comparar th,
  .tabla-comparar td{padding:9px 8px}
  .tabla-comparar th{font-size:.72rem;line-height:1.25}
  .tabla-comparar th:not(:first-child),
  .tabla-comparar td:not(:first-child){width:24%}
  .tabla-comparar td:first-child,
  .tabla-comparar th[scope="row"]{line-height:1.35;padding:9px 8px;font-size:.78rem}
}

/* Y por si en un telefono mas angosto todavia sobra tabla, que al menos
   se note que hay algo mas a la derecha. */
.tabla-envoltura{
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(255,255,255,0)),
    linear-gradient(to left, var(--bg) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(11,18,32,.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(11,18,32,.14), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* ── 2. En el celular no habia menu ───────────────────────────────────
   Los enlaces se ocultaban bajo 900px y no aparecia nada en su lugar:
   quedaba el logo, el boton de planes, y ninguna forma de saltar a las
   preguntas o a los modulos sin recorrer nueve mil pixeles a dedo.

   Se abre con <details>, que es un desplegable de HTML: sin JavaScript
   que se pueda romper y funciona aunque el script no cargue. */
.menu-movil{position:relative;border-bottom:0;padding:0}
.menu-movil summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;
  width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);
}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil summary::marker{content:''}
/* El sitio le pinta un chevron a TODO <summary> —lo usa el FAQ— y aqui
   salia junto a las tres rayas. Este boton trae su propio icono. */
.menu-movil summary::after{content:none}
.menu-movil summary:hover{border-color:#C9D3DE;background:var(--bg-alt)}
.menu-movil summary svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu-movil[open] summary{border-color:var(--brand);color:var(--brand)}
.menu-movil .hojas{
  position:absolute;right:0;top:calc(100% + 10px);z-index:80;min-width:14rem;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:8px;display:grid;
}
.menu-movil .hojas a{
  text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:520;
  padding:12px 14px;border-radius:9px;
}
.menu-movil .hojas a:hover{background:var(--bg-alt);color:var(--brand)}
@media (min-width:940px){ .menu-movil{display:none} }

/* ── 3. Cosas demasiado chicas para un dedo ───────────────────────────
   "Ver Cortek →" media 25px de alto y "Ver todo lo que incluye" 24. La
   recomendacion de Apple y de Google es 44 y 48. En un boton de compra
   eso no es un detalle de accesibilidad: es una venta que no ocurre
   porque el dedo cae al lado. */
@media (max-width:900px){
  .foot-col a,
  .foot-legal a{display:inline-flex;align-items:center;min-height:40px}
  /* Los enlaces sueltos dentro de un parrafo: el "Miralo aqui" de la nota
     de planes y el correo y el telefono de las paginas legales. Se les da
     alto sin sacarlos del renglon. */
  .plans-note a,
  .lede a,
  .tras-nota a,
  .legal li a,
  .legal p a{display:inline-block;padding:12px 0;line-height:20px}
  /* Los dos enlaces del pie de cada tarjeta en "Nuestros sistemas"
     median 24px: son la puerta a cada producto. */
  .sistema-pie a{display:inline-flex;align-items:center;min-height:44px}
  .foot-legal{gap:4px 18px;flex-wrap:wrap}
  .nav .logo{min-height:44px}
  /* El boton verde de arriba: es el unico atajo a precios que se ve
     sin abrir el menu, y medía 39px. */
  .nav-cta .btn{min-height:44px;display:inline-flex;align-items:center}
}

/* ── 4. El boton de WhatsApp tapaba el final de la pagina ─────────────
   Flota fijo abajo a la derecha y en el celular se sentaba encima de la
   ultima linea del pie. Se le hace sitio. */
@media (max-width:900px){
  footer{padding-bottom:96px}
  .wa{right:14px;bottom:14px}
}

/* ── 5. El header no cabia en un telefono angosto ─────────────────────
   Las paginas con DOS botones arriba —"Entrar" mas el de venta— sumaban
   352px de barra en una pantalla de 360, con el margen ya descontado. La
   pagina se iba de lado y el boton de la derecha se sentaba encima de
   las tres rayas: literalmente no se podia abrir el menu.

   En el celular arriba queda solo el boton que manda; el otro no se
   pierde, baja al desplegable. */
@media (max-width:939.98px){
  .nav-cta .btn:not(.btn-primary){display:none}
  .nav-cta{gap:8px}
}
.hojas-botones{
  display:grid;gap:8px;margin-top:8px;padding-top:10px;
  border-top:1px solid var(--line-soft);
}
.hoja-boton{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  padding:11px 14px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);text-decoration:none;
  font-size:.92rem;font-weight:620;
}
.hoja-boton:hover{border-color:var(--brand);color:var(--brand);background:var(--bg-alt)}

/* ══════════════════════════════════════════════════════════════════════
   ELEGIR CAMINO.

   Eran dos cajas grises apretadas, del mismo peso visual que cualquier
   otro recuadro de la pagina. Como no se veian como una eleccion, nadie
   elegia: se pasaba de largo y se llegaba a los planes sin haber filtrado
   nada. Y ahi abajo esperan seis planes que se llaman igual de a dos.

   Ahora son dos caminos de verdad: icono, precio desde, y una senal
   explicita de cual se esta viendo.
   ══════════════════════════════════════════════════════════════════════ */

.elegir-grid{gap:16px}
.elegir-card{
  position:relative;gap:0;padding:24px 22px 20px;
  border-width:1.5px;border-radius:18px;overflow:hidden;
}
/* La franja de arriba solo aparece en la elegida: es la senal mas barata
   de "estas viendo esta" sin gritar con color de fondo. */
.elegir-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:var(--brand);opacity:0;transition:opacity .18s ease;
}
.elegir-card[aria-pressed="true"]::before{opacity:1}
.elegir-card[aria-pressed="true"]{
  border-color:var(--brand);background:linear-gradient(180deg,var(--brand-tint) 0%,var(--bg) 42%);
}
.elegir-card[aria-pressed="false"]{opacity:.9}
.elegir-card[aria-pressed="false"]:hover{opacity:1;transform:translateY(-2px)}

.elegir-marca{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--brand-tint);color:var(--brand);margin-bottom:14px;
}
.elegir-card[aria-pressed="true"] .elegir-marca{background:var(--brand);color:#fff}

.elegir-card .elegir-tag{margin-bottom:10px}
.elegir-card h3{margin:0 0 6px;font-size:1.3rem}
.elegir-card p{margin:0 0 4px}
.elegir-card .lista-inline{margin:14px 0 0}

.elegir-pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  flex-wrap:wrap;
}
/* Lo que trae el "desde": un precio sin decir que incluye se compara mal.
   Ocupa la fila entera, debajo del precio, en letra chica. */

/* ── Lo que va pegado al precio en TODAS las tarjetas de plan ──
   "Precio final: sin IVA" debajo del precio, y la garantia debajo del
   boton. Van en todas las tarjetas del sitio, generadas o a mano. */
.plan-final{margin:2px 0 6px;font-size:.78rem;font-weight:640;color:var(--brand-dark);letter-spacing:.01em}
.plan-final.oscuro{color:var(--brand-vivo);margin-top:6px}
.plan-garantia{margin:10px 0 0;font-size:.78rem;color:var(--muted);text-align:center}

/* "Viendo estos planes" solo existe en la tarjeta elegida. En la otra su
   sitio lo ocupa la invitacion a cambiarse. */
.elegir-elegido{
  display:none;align-items:center;gap:6px;
  font-size:.8rem;font-weight:700;color:var(--brand);
}
.elegir-elegido::before{
  content:"";width:16px;height:16px;border-radius:50%;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.elegir-card[aria-pressed="true"] .elegir-elegido{display:inline-flex}
.elegir-card[aria-pressed="false"] .elegir-pie::after{
  content:"Ver estos →";font-size:.8rem;font-weight:700;color:var(--brand);
}

/* ── El rotulo de que lista se esta viendo ────────────────────────────
   Los dos productos usan los mismos nombres de plan y precios distintos.
   Con tres a la vista no se nota, pero quien alterna encuentra un
   "Esencial" de $119.900 y despues otro de $89.900. Sin decir de que es
   cada lista, eso no parece una eleccion: parece un error de precios. */
.planes-de{
  display:flex;align-items:center;justify-content:space-between;gap:12px 18px;
  flex-wrap:wrap;margin:-14px 0 26px;padding:13px 18px;
  background:var(--brand-tint);border:1px solid #CDE9DA;border-radius:12px;
  font-size:.93rem;color:var(--ink-2);
}
.planes-cambiar{
  font:inherit;font-size:.87rem;font-weight:700;cursor:pointer;
  background:var(--bg);color:var(--brand-dark);
  border:1px solid #CDE9DA;border-radius:99px;padding:8px 15px;
  min-height:40px;white-space:nowrap;
}

@media (max-width:560px){
}


/* ── La maqueta gratis ───────────────────────────────────────────────
   Va sobre el verde de la marca y no sobre el fondo tinta: es la unica
   oferta gratis del sitio y tiene que romper el ritmo de las secciones
   que vienen antes. Si se pintara igual que las demas, se lee como una
   seccion mas y esta es la que hay que ver. */
.maqueta{padding:0 0 clamp(48px,7vw,80px)}
.maqueta-caja{
  display:flex;flex-direction:column;gap:22px;align-items:flex-start;
  background:linear-gradient(135deg,#0F5132 0%,#12703F 100%);
  border-radius:22px;padding:clamp(28px,5vw,46px);
}
.maqueta-caja h2{color:#fff;margin:.35rem 0 .5rem;font-size:clamp(1.5rem,3.4vw,2.1rem)}
.maqueta-caja p{color:#CFEBD9;max-width:52ch;margin:0}
.maqueta-eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#26E585;
}
.maqueta-boton{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  background:#26E585;color:#06301C;border-color:#26E585;
}
.maqueta-boton:hover{background:#3DEF95;border-color:#3DEF95}
@media(min-width:820px){
  .maqueta-caja{flex-direction:row;align-items:center;justify-content:space-between;gap:36px}
}

/* La nota que aclara que la pagina web cobra implementacion aparte. Mas
   chica y mas apagada que el lede: es letra menuda honesta, no un
   argumento de venta. */

/* ══════════════════════════════════════════════════════════════════════
   Las tarjetas de camino, ahora que no alternan nada
   ══════════════════════════════════════════════════════════════════════
   Dejaron de ser botones que cambiaban una lista de precios abajo y
   pasaron a ser tarjetas que llevan a la pagina del sistema. Eso cambia
   dos cosas: ya no hay una "elegida" (se caen todas las reglas de
   aria-pressed, que ahora no encuentran a nadie) y las tres tienen que
   verse igual de vivas, porque cualquiera de las tres puede ser la del
   que esta mirando. */
.elegir-card{cursor:default}
.elegir-card::before{opacity:1;background:var(--line)}
.elegir-card:hover::before{background:var(--brand)}
.elegir-card:hover{transform:translateY(-2px)}
.elegir-card:focus-within{border-color:var(--brand);box-shadow:var(--shadow)}

/* El pie se pega abajo para que el precio y los botones queden a la
   misma altura en las tres, aunque los textos midan distinto. */
.elegir-card .elegir-pie{margin-top:auto}


.elegir-aclara{
  margin:14px 0 0;font-size:.85rem;line-height:1.45;color:var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════
   Capturas del sistema
   ══════════════════════════════════════════════════════════════════════
   Los marcos son CSS, no imagenes: pesan cero y se adaptan solos.

   En el celular NO hay marco. Un bisel de telefono dibujado alrededor de
   una captura le quita como un 30% del ancho, y a esa escala los nombres
   de la agenda quedan en cuatro pixeles: se ve bonito y no se lee nada.
   Abajo de 900px la captura va a lo ancho del contenedor, casi 1:1 con
   lo que la persona veria en su propio telefono. El bisel y la barra de
   navegador aparecen solo cuando sobra ancho para regalar.

   Cada figura carga UNA imagen: <picture> con media elige el archivo, en
   vez de bajar las dos y esconder una. */
.vistas{display:grid;gap:clamp(30px,4vw,40px);align-items:start}
@media (min-width:900px){.vistas{grid-template-columns:1.6fr 1fr;gap:34px;align-items:end}}

.vista{margin:0}
.vista figcaption{
  margin-top:14px;font-size:.92rem;line-height:1.5;color:var(--ink-2);max-width:46ch;
}
.marco{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.marco img{display:block;width:100%;height:auto}

/* ── Barra de navegador: solo cuando hay ancho ── */
.marco-nav{display:none}
@media (min-width:900px){
  .marco-nav{
    display:flex;align-items:center;gap:12px;
    padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg-alt);
  }
  .marco-luces{display:flex;gap:6px}
  .marco-luces i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
  .marco-url{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding:4px 12px;border-radius:99px;background:var(--bg);
    font-size:.76rem;color:var(--muted);border:1px solid var(--line-soft);
  }
}

/* ── Bisel de celular: tambien solo cuando hay ancho ── */
.marco-oreja{display:none}
@media (min-width:900px){
  .marco-tel{
    position:relative;width:100%;max-width:280px;margin-inline:0;
    padding:9px;border:0;border-radius:34px;background:var(--dark);
    box-shadow:var(--shadow-lg);overflow:visible;
  }
  .marco-tel img{border-radius:26px}
  .marco-oreja{
    display:block;position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:34%;height:17px;border-radius:0 0 11px 11px;background:var(--dark);z-index:1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Lo que cambia entre un plan y el siguiente
   ══════════════════════════════════════════════════════════════════════
   Los tres planes de una familia repiten los puntos del anterior. Puestos
   en tres columnas quedan tres listas casi iguales y la pregunta que la
   persona trae -por que pagaria mas- se responde comparando renglon por
   renglon. Se sigue mostrando todo; lo que cambia es que lo repetido se
   apaga y lo nuevo se pinta con el verde de la marca. */
.plan li.li-igual{color:var(--muted)}
.plan li.li-igual svg{color:var(--line)}
.plan li.li-nuevo{color:var(--ink);font-weight:600}
.plan li.li-nuevo svg{color:var(--brand)}
.plan-leyenda{
  margin:14px 0 0;font-size:.79rem;line-height:1.4;color:var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════
   Caso real  ·  el bloque esta OCULTO hasta que haya uno de verdad
   ══════════════════════════════════════════════════════════════════════
   Se deja el estilo escrito para que publicarlo sea quitar el hidden y
   llenar cuatro huecos, no volver a disenar bajo el afan de tener por
   fin un caso que mostrar. */

.caso-cifra b{
  font-size:clamp(2.6rem,1.6rem + 4vw,4rem);line-height:1;letter-spacing:-.03em;
  color:var(--brand);font-variant-numeric:tabular-nums;
}
.caso-cifra span{font-size:1.1rem;font-weight:700;color:var(--brand)}

.caso-cita p{margin:0;font-size:clamp(1.05rem,1rem + .4vw,1.25rem);line-height:1.5;color:var(--ink)}
.caso-cita p::before{content:'\201C'}
.caso-cita p::after{content:'\201D'}
.caso-cita footer{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}

.caso-foto{
  width:min(160px,45%);height:auto;border-radius:50%;object-fit:cover;aspect-ratio:1;
  margin-inline:auto;display:block;
}
.caso-foto:not([src]),.caso-foto[src=""]{display:none}

/* ══════════════════════════════════════════════════════════════════════
   Ritmo vertical en el celular
   ══════════════════════════════════════════════════════════════════════
   Las dos capturas sumaron 1.874px a la portada. Valen la pena -son la
   unica prueba de que el sistema existe- pero no gratis: la pagina ya
   iba en once mil pixeles y la promesa es que se recorra en menos de un
   minuto. Se recupera el alto en dos sitios donde no se pierde nada. */

/* 1. Las capturas se muestran altas pero no completas. La escala no
      cambia -que es lo que las hace legibles- y se ve la parte que
      informa: en la agenda, la fecha y las citas; en el escritorio,
      los numeros. El degradado de abajo dice que la pantalla sigue, en
      vez de parecer una imagen cortada por error. Los archivos ya vienen
      recortados desde arriba (ver _herramientas/cortek-fotos.mjs), asi
      que aqui NO se sube la imagen con margin-top negativo: eso tapaba
      la fecha del sabado que el pie de foto nombra. */
@media (max-width:899px){
  .marco{position:relative;max-height:520px;overflow:hidden}
  .marco::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:72px;
    background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg));
    pointer-events:none;
  }
  .vista img{display:block;width:100%;height:auto}
}

/* 2. El pie eran cuatro columnas una debajo de otra: 1.220px de enlaces
      en fila india. Las tres listas cortas caben de a dos. */
@media (max-width:759px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot-about{grid-column:1 / -1}
}

/* ── Pulido ───────────────────────────────────────────────────────── */

/* Las tarjetas de plan reservan alto fijo en el subtitulo y en la nota
   para que las tres queden alineadas. En el celular van una debajo de
   otra: no hay nada que alinear y ese alto queda de hueco. */
@media (max-width:759px){
  .plan-for,
  .plan-billing{min-height:0}
}

/* La linea antes del precio casi no se veia y la aclaracion quedaba
   pegada a los chips, como si fuera parte de la lista. */
.elegir-card .elegir-pie{border-top-color:var(--line)}

/* ══════════════════════════════════════════════════════════════════════
   PORTADA · septiembre 2026 (Fase 2 de la auditoria de conversion)
   ══════════════════════════════════════════════════════════════════════
   La portada dejo de ser un catalogo y paso a ser un enrutador: en un
   minuto la persona entiende que hace Kuxio, ve el bot andando, sabe
   cual de los tres sistemas es el suyo y tiene por donde escribir.

   Reglas de este bloque:
   - Todo con los tokens de arriba. Entra UN color nuevo, el morado
     tinta, y entra con nombre: es el color de las acciones que se
     quedan dentro del sitio (ir a planes, ver un sistema), para que
     el verde quede reservado a WhatsApp. Un visitante que ve verde
     sabe que va a abrir un chat; si ve morado, sigue navegando.
   - Los componentes que ya existian (.phone, .bubble, .trust-strip,
     .guarantee, .hero-grid, .quote, .kpi-row, .steps, .faq, .final) se
     usan tal cual. Aqui solo hay lo que no existia.
   - Las reglas de compactar van bajo body.portada: la portada tiene
     que caber en 6.000 px de celular y las paginas internas no cambian
     hasta la Fase 3. */

:root{
  --purple-ink:#5B2ECC;
  --purple-ink-dark:#4B23AE;
  --purple-ink-tint:#EFE9FB;
}

/* ── Boton de accion interna ── */
.btn-primary-int{
  background:var(--purple-ink);color:#fff;
  box-shadow:0 1px 2px rgba(91,46,204,.22),0 8px 20px -10px rgba(91,46,204,.55);
}
.btn-primary-int:hover{background:var(--purple-ink-dark);color:#fff}
.btn-primary-int:focus-visible,.btn-primary:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn svg.ico{width:18px;height:18px;flex:none}

/* ── Encabezado: telefono a la vista y WhatsApp en verde ──
   En escritorio el numero va escrito al lado del boton: hay gente que
   prefiere marcar o copiarlo, y un numero visible es una senal de que
   detras hay alguien. En el celular sobra: el boton verde ya abre el
   chat con ese mismo numero. */
/* El numero salio de la barra el 11 de septiembre de 2026, a pedido del
   dueño: al lado estaba el boton verde, que abre un chat con ESE mismo
   numero, y el sitio entero se atiende por WhatsApp. Con el fuera cabe
   "Crear cuenta gratis", que es lo que se queria arriba. El numero sigue
   en el pie, en los legales y en cada pagina de plan. */
/* El numero aparece mas tarde que antes: desde que al lado hay un boton
   de "Crear cuenta gratis", a 1024px los tres elementos no caben y la
   cabecera se desbordaba 59px. Entre 1024 y 1240 manda la cuenta gratis;
   el numero sigue en el pie y el boton verde abre el mismo chat. */

/* El boton de la cuenta gratis: mas angosto que los demas de la cabecera,
   que ahi cada pixel se pelea. Debajo de 900 se va al menu del celular
   (la regla de .nav-cta .btn:not(.btn-primary) lo esconde solo). */
.nav-cta .btn.nav-gratis{padding:10px 16px;font-size:.9rem;font-weight:700;white-space:nowrap}
/* "Probar el bot" cede el sitio en las pantallas mas angostas de escritorio:
   es un ancla de esta misma pagina, el hero ya lleva ese boton en grande y en
   el menu del celular sigue estando. El limite sale de medir, no de tantear. */
@media (max-width:1039.98px){.nav-probar{display:none}}
.hojas-botones .hoja-boton.hoja-gratis{font-weight:700;color:var(--purple-ink);border-color:var(--purple-ink);background:var(--purple-ink-tint)}

/* ── Hero ── */
.hero-titulo{margin-bottom:18px}
.hero .lede b{color:var(--ink);font-weight:660}
.hero-meta{margin-top:14px;font-size:.82rem;color:var(--muted)}
/* Las burbujas del demo entran una tras otra, como en un chat de
   verdad, con la misma animacion pop de siempre. Con
   prefers-reduced-motion la regla de arriba ya las deja quietas. */
.chat .bubble:nth-child(1){animation-delay:.15s}
.chat .bubble:nth-child(2){animation-delay:.9s}
.chat .bubble:nth-child(3){animation-delay:1.7s}
.chat .bubble:nth-child(4){animation-delay:2.5s}
.chat .bubble:nth-child(5){animation-delay:3.3s}
.chat .bubble:nth-child(6){animation-delay:4.1s}
.chat .bubble:nth-child(7){animation-delay:4.9s}
.chat .typing{opacity:0;animation:pop .3s ease 5.6s forwards}
@media(prefers-reduced-motion:reduce){.chat .typing{opacity:1}}
.phone-caption a{color:var(--brand);font-weight:640}

/* ── "¿Te pasa esto?": tres tarjetas ── */
.pasa .card{display:flex;flex-direction:column}
.pasa .card-icon{margin-bottom:14px}
.pasa .card p{font-size:.94rem}

/* ── "Asi se ve tu dia": tres momentos que se deslizan en el celular ──
   En pantalla chica es un carrusel con scroll-snap del navegador: cada
   momento ocupa casi todo el ancho y se pasa con el dedo. Sin
   JavaScript, sin flechas que programar: es scroll normal con imanes.
   En escritorio sobra ancho y los tres van en fila. */
.dia{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,340px);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:2px 20px 14px;margin:0 -20px;scrollbar-width:none;
}
.dia-hora{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark);
  background:var(--brand-tint);padding:5px 11px;border-radius:99px;
}
@media(min-width:900px){
}

/* ── "Pruebalo tu mismo": banda oscura con QR ──
   El QR se ve solo en escritorio: en el celular nadie escanea su propia
   pantalla, ahi manda el boton. Es un SVG generado en el build
   (lib/qr.mjs), no una imagen pedida a un servicio. */
.probar{padding:clamp(48px,6vw,84px) 0}
.probar-grid{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media(min-width:900px){.probar-grid{grid-template-columns:1.15fr .85fr}}
.probar h2{margin-bottom:14px}
.probar .lede{margin-bottom:26px}
.probar-pasos{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;counter-reset:pp}
.probar-pasos li{display:flex;gap:12px;align-items:flex-start;color:#CBD7E0;font-size:.97rem;line-height:1.5}
.probar-pasos li::before{
  counter-increment:pp;content:counter(pp);flex:none;
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(38,229,133,.14);color:var(--brand-vivo);font-size:.82rem;font-weight:700;
}
.probar-qr{display:none}
@media(min-width:900px){
  .probar-qr{
    display:grid;justify-items:center;gap:14px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;
    padding:clamp(22px,3vw,34px);
  }
  .probar-qr svg{width:min(220px,100%);height:auto;border-radius:12px;background:#fff;padding:8px;box-sizing:border-box}
  .probar-qr p{font-size:.86rem;color:#A9BAC6;text-align:center;max-width:26ch}
}
.probar-nota{font-size:.84rem;color:#8FA1AF;margin-top:14px}
.probar-otro{font-size:.92rem;color:#A9BAC6;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);line-height:1.65;max-width:34rem}
.probar-otro a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.probar-otro a:hover{color:var(--brand-vivo)}

/* ── Las tres puertas ("¿Cual es para tu negocio?") ──
   Reusan .elegir-card. Cambia el pie: una sola accion por puerta, en
   morado porque se queda dentro del sitio. Cortek y Bonita comparten
   la puerta de las citas con dos enlaces, porque son dos productos con
   dos paginas y una sola pregunta: ¿trabajas con citas? */
.puertas{grid-template-columns:1fr}
/* Dos y dos, no tres y una huerfana. Con la cuarta puerta —la tienda— la
   fila de tres dejaba al bot solo con dos huecos al lado, y una rejilla a
   medias se lee como una pagina rota. Cuatro en fila tampoco: estas
   tarjetas llevan parrafo, precio y recomendacion, y a 25% de ancho el
   texto queda en columnas de tres palabras. */
@media(min-width:761px){.puertas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1240px){.puertas{grid-template-columns:repeat(4,1fr)}}

/* Las cuatro puertas, renglon con renglon.
   En flex cada tarjeta reparte su propio alto: el titulo de una ocupa dos
   lineas y el de la de al lado una, y de ahi para abajo nada coincide. El
   boton de Restok quedaba 96px por encima del de la tienda dentro de
   tarjetas del MISMO alto. (El `margin-top:auto` de .puerta-desde que
   intentaba arreglarlo nunca llego a aplicarse: `.elegir-card p{margin:0}`
   le gana por especificidad. Se deja el arreglo en el subgrid, que es el
   que si alinea.)

   Con subgrid las ocho filas -etiqueta, titulo, marca, parrafo, desde,
   incluye, recomendado y accion- son las MISMAS filas para las cuatro
   tarjetas, asi que los precios quedan a la misma altura y los botones
   tambien. El row-gap propio en 0 porque, si no, el hueco de 16px de la
   rejilla se cuela entre los renglones de cada tarjeta. */
@supports (grid-template-rows:subgrid){
  @media(min-width:761px){
    .puerta{
      display:grid;grid-template-rows:subgrid;grid-row:span 8;
      row-gap:0;justify-items:start;align-content:start;
    }
    .puerta > .btn-bloque,.puerta > .puerta-dos{align-self:end;width:100%}
    /* El sobrante de cada renglon cae DEBAJO del contenido. En el titulo
       y en la marca eso abria un hueco en mitad de un bloque de texto
       -"Restok" y su parrafo separados por dos renglones vacios-, asi que
       esos dos se pegan abajo: el aire queda junto a la etiqueta, donde
       se lee como respiro y no como error. */
    .puerta > h3,.puerta > .puerta-sub{align-self:end}
    /* Al alinear los renglones, las tarjetas de texto corto abren un
       espacio antes del precio. Con una linea fina ese espacio deja de
       parecer un hueco y pasa a ser lo que es: donde termina la
       explicacion y empieza lo que cuesta. */
    .puerta > .puerta-desde{border-top:1px solid var(--line);width:100%;padding-top:18px}
  }
}
.puerta{padding:24px 22px 22px}
.puerta h3{margin:0 0 6px;font-size:1.25rem}
.puerta > p{color:var(--ink-2);font-size:.95rem;margin:0}
.puerta-desde{margin-top:auto;padding-top:16px;font-size:.93rem;color:var(--ink-2)}
.puerta-desde b{color:var(--ink);font-weight:760;font-size:1.06rem;letter-spacing:-.02em}
.puerta .btn-bloque{margin-top:14px}
.puerta-dos{display:grid;gap:8px;margin-top:14px;width:100%}
.puerta-dos a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:46px;padding:10px 16px;border-radius:11px;text-decoration:none;
  border:1.5px solid var(--purple-ink);color:var(--purple-ink);font-weight:660;font-size:.95rem;
  transition:background .15s,color .15s;
}
.puerta-dos a:hover{background:var(--purple-ink);color:#fff}
.puerta-dos a span{font-weight:500;font-size:.84rem;opacity:.85}
.puertas-comun{
  margin-top:20px;padding:16px 20px;border-radius:var(--radius-sm);
  background:var(--bg);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;
  color:var(--ink-2);font-size:.93rem;line-height:1.5;
}
.puertas-comun a{color:var(--purple-ink);font-weight:640;text-decoration:none;white-space:nowrap}
.puertas-comun a:hover{text-decoration:underline}

/* ── "Por que Kuxio y no…": cuatro columnas ──
   La tabla de comparacion de siempre, con Kuxio en la primera columna
   de datos y en verde suave, para que se lea de un vistazo cual es la
   nuestra. En el celular se compacta con las reglas que ya existian. */
.tabla-comparar th.kuxio,.tabla-comparar td.kuxio{background:var(--brand-tint)}
.tabla-comparar td.kuxio{color:var(--ink);font-weight:600}
.tabla-comparar th.kuxio{color:var(--brand-dark)}
.tabla-comparar td.mas b{color:var(--ink);font-weight:640}
.tabla-nota small{display:block;margin-top:8px;font-size:.8rem;line-height:1.5}

/* ── "Quien esta detras" ── */
.equipo-grid{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:900px){.equipo-grid{grid-template-columns:1.1fr .9fr}}
.equipo-texto p{color:var(--ink-2);margin-top:14px;max-width:58ch}
.equipo-texto p b{color:var(--ink);font-weight:660}
.equipo-figura{margin:0;display:grid;gap:14px;justify-items:center;text-align:center}
.equipo-figura .mascota{width:min(240px,62%);filter:drop-shadow(0 18px 36px rgba(132,54,251,.28))}
.equipo-figura figcaption{font-size:.84rem;color:var(--muted);max-width:30ch}
.equipo-local{width:100%;border-radius:var(--radius);border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}

/* Las redes van escritas, no dibujadas: los logos de Instagram, TikTok
   y Facebook son marcas de otros. Un chip con el nombre y el usuario se
   lee igual de rapido y no copia nada. */
.redes{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.redes a{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:99px;
  border:1px solid var(--line);background:var(--bg);text-decoration:none;color:var(--ink);
  font-size:.88rem;font-weight:600;
}
.redes a span{color:var(--muted);font-weight:500}
.redes a:hover{border-color:var(--brand);color:var(--brand)}

/* Los primeros negocios: la unica prueba social honesta mientras no
   haya pilotos publicados. Va en morado claro, no en verde, porque es
   un llamado y no una garantia. */
.primeros{
  margin-top:clamp(28px,4vw,44px);padding:clamp(24px,3.4vw,36px);
  border-radius:20px;background:var(--purple-ink-tint);border:1px solid #DDD2F6;
  display:grid;gap:18px;align-items:center;
}
@media(min-width:860px){.primeros{grid-template-columns:1fr auto}}
.primeros h3{margin-bottom:8px;color:var(--purple-ink-dark)}
.primeros p{color:var(--ink-2);font-size:.96rem;max-width:56ch}
.primeros .btn{white-space:normal;text-align:center}

/* Los pilotos (.quote) y el caso con cifras (.kpi-row) llegan ocultos:
   se destapan quitando el hidden cuando exista lo que cuentan. */
.pilotos{margin-top:clamp(28px,4vw,44px)}

/* ── "Como arrancamos": lo que hay que tener a mano ── */
.a-mano{
  margin-top:clamp(22px,3vw,32px);padding:18px 20px;border-radius:var(--radius-sm);
  background:var(--bg-alt);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:.9rem;color:var(--ink-2);
}
.a-mano b{color:var(--ink);font-weight:660;margin-right:4px}
.a-mano .lista-inline{margin:0}

/* ── FAQ: el cierre ── */
.faq-mas{margin:22px auto 0;max-width:760px;text-align:center;font-size:.96rem;color:var(--ink-2)}
.faq-mas a{color:var(--brand);font-weight:640}

/* ── Pie nuevo ── */
.foot-descriptor{font-size:.95rem;color:var(--ink);font-weight:520;margin-top:14px;max-width:34ch;line-height:1.5}
.foot-col li span{font-size:.9rem;color:var(--ink-2);display:block;line-height:1.5}
.foot-col .redes{margin-top:12px}
.foot-col .redes a{min-height:36px;padding:6px 12px;font-size:.84rem}
.foot-meta{margin-top:26px;font-size:.82rem;color:var(--muted);max-width:70ch;line-height:1.55}
@media(min-width:760px){.foot-grid{grid-template-columns:1.5fr 1fr 1.2fr .9fr}}

/* ══ Compactar en el celular ══
   La portada entera tiene que recorrerse en menos de 6.000 px a 375 de
   ancho. Cada regla de aqui quita aire, no contenido. */
@media(max-width:759px){
  body.portada section{padding:clamp(40px,9vw,56px) 0}
  body.portada .section-head{margin-bottom:24px}
  body.portada .section-head p{margin-top:10px}
  body.portada .hero{padding-top:34px;padding-bottom:36px}
  body.portada .hero-cta{margin-top:22px}
  body.portada .trust-strip{margin-top:30px}
  body.portada .trust-item{padding:13px 13px}
  body.portada .chat{min-height:0;padding:12px 10px}
  body.portada .phone{max-width:320px}
  body.portada .card{padding:20px 18px}
  body.portada .card-icon{width:38px;height:38px;margin-bottom:12px}
  body.portada .grid{gap:12px}
  body.portada .puerta{padding:20px 18px}
  body.portada .puertas{gap:12px}
  body.portada .step{padding:20px 18px}
  body.portada .step::before{width:28px;height:28px;font-size:.82rem;margin-bottom:10px}
  body.portada .steps{gap:10px}
  body.portada .guarantee{padding:22px 20px;gap:16px}
  body.portada .guarantee-seal{width:60px;height:60px}
  body.portada .guarantee-seal svg{width:28px;height:28px}
  body.portada .maqueta{padding-bottom:40px}
  body.portada .maqueta-caja{padding:24px 22px;gap:16px}
  body.portada .probar{padding:40px 0}
  body.portada .equipo-grid{gap:22px}
  body.portada .primeros{padding:22px 20px;margin-top:22px}
  body.portada summary{padding:13px 30px 13px 0;font-size:.97rem}
  body.portada details p{padding-bottom:14px;font-size:.93rem}
  body.portada .final{padding:34px 22px}
  body.portada .final .mascota{width:110px;margin-bottom:14px}
  body.portada footer{padding-top:36px}
  body.portada .foot-grid{gap:20px 16px}
}

/* ── Redes en una linea ──
   En "Quien esta detras" las tres redes van en un renglon de texto:
   tres chips en el celular eran tres filas. */

/* ── Pie en el celular ──
   Contacto ocupa el ancho entero (los chips de redes caben en dos
   filas, no en cuatro) y va de ultimo. La lista Legal se esconde: las
   mismas tres cosas estan en la barra de abajo. */
@media (max-width:759px){
  .foot-contacto{grid-column:1 / -1;order:5}
  .foot-col .foot-legal-lista,.foot-col ul.foot-legal-lista{display:none}
  .foot-col ul{gap:0}
  .foot-col a{min-height:38px}
  .foot-meta{margin-top:18px}
  .foot-legal{margin-top:22px;padding-top:16px}
  .foot-col .redes-linea{margin-top:8px;font-size:.88rem}
  /* El flotante se esconde solo mientras el pie esta a la vista; el
     sitio que se deja abajo es por si el guion no corre. */
  footer{padding-bottom:56px}
}

/* ── Los pasos, en el celular, como lista y no como tarjetas ──
   Cuatro tarjetas apiladas eran 700 px. Con el numero a la izquierda y
   el texto al lado, la misma informacion cabe en la mitad. */
@media (max-width:639px){
  body.portada .step{
    display:grid;grid-template-columns:30px 1fr;column-gap:12px;row-gap:2px;
    padding:16px 16px;align-items:start;
  }
  body.portada .step::before{grid-row:1 / span 2;margin:0;width:30px;height:30px}
  body.portada .step h3{grid-column:2;margin:3px 0 2px;font-size:1.04rem}
  body.portada .step p{grid-column:2;font-size:.92rem}
}

/* En el celular los dos botones del hero caben en una fila si el texto
   es corto; si no caben, se envuelven solos. */
@media (max-width:759px){
  body.portada .hero-cta .btn-lg{padding:14px 20px;font-size:.97rem}
}

/* ── FAQ doblado ──
   Las primeras siete a la vista; las demas dentro de un <details> que
   dice cuantas hay. Sin JavaScript. */
.faq-resto{border-bottom:0;padding:0}
.faq-resto > summary{color:var(--brand);font-weight:640;padding:16px 34px 16px 0}
.faq-resto > summary::after{border-color:var(--brand)}
.faq-resto[open] > summary{border-bottom:1px solid var(--line)}
.faq-resto-lista details:last-child{border-bottom:0}

/* ── Pie en el celular: las listas de enlaces en linea ──
   Diez enlaces uno debajo de otro eran 400 px. En linea, con espacio
   para el dedo, caben en dos renglones cada lista. */
@media (max-width:759px){
  .foot-grid{grid-template-columns:1fr}
  .foot-col ul:not(.redes){display:flex;flex-wrap:wrap;gap:0 18px}
  .foot-contacto ul{flex-direction:column;gap:0}
  .foot-col a{min-height:36px}
  body.portada section{padding:clamp(34px,8vw,48px) 0}
  body.portada .guarantee .btn{width:100%}
}

/* "Ten a mano…" como una frase, no como chips: tres renglones en vez de
   cuatro fichas apiladas. */
p.a-mano{display:block;font-size:.92rem;line-height:1.55}

/* ── Mas compactacion en el celular (portada) ──
   Cada regla quita aire o adorno, no contenido. */
@media (max-width:759px){
  /* las cuatro fichas de confianza: rejilla 2x2 compacta */
  body.portada .trust-strip{margin-top:22px}
  body.portada .trust-item{padding:11px 12px}
  body.portada .trust-item strong{font-size:.86rem}
  body.portada .trust-item span{font-size:.76rem}
  /* "¿Te pasa esto?": icono al lado del titulo, no encima */
  body.portada .pasa .card{display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:start;padding:16px 16px}
  body.portada .pasa .card-icon{width:36px;height:36px;margin:0;grid-row:1 / span 2}
  body.portada .pasa .card h3{grid-column:2;font-size:1.02rem;margin:4px 0 4px}
  body.portada .pasa .card p{grid-column:2;font-size:.9rem}
  /* las puertas sin icono grande */
  body.portada .puerta .elegir-marca{display:none}
  body.portada .puerta .elegir-tag{margin-bottom:8px}
  body.portada .puerta h3{font-size:1.15rem}
  body.portada .puerta-desde{padding-top:12px;font-size:.9rem}
  body.portada .puertas-comun{margin-top:14px;padding:12px 14px;font-size:.88rem}
  /* el sello de la garantia y la mascota del cierre, mas chicos */
  body.portada .guarantee{grid-template-columns:1fr}
  body.portada .guarantee-seal{display:none}
  body.portada .final .mascota{width:92px;margin-bottom:10px}
  /* el pie: la lista legal si se esconde (gana a la regla de flex) */
  .foot-col ul.foot-legal-lista{display:none}
  /* la tabla: celdas cortas, letra chica */
  body.portada .tabla-comparar td,body.portada .tabla-comparar th{padding:8px 6px}
}

/* Sin frase comun, la caja de abajo de las puertas es solo el enlace. */
.puertas-comun:not(:has(span)){justify-content:center;background:none;border:0;padding:6px 0 0}

@media (max-width:759px){
  /* "Quien esta detras": la mascota al lado del titulo, no debajo del texto */
  body.portada .equipo-grid{grid-template-columns:minmax(0,1fr) 96px;gap:14px;align-items:start}
  body.portada .equipo-figura .mascota{width:96px;filter:none}
  body.portada .equipo-texto p{margin-top:10px;font-size:.95rem}
  body.portada .redes-linea{margin-top:10px}
  body.portada .primeros{margin-top:18px}
  /* el cierre: los dos botones en una fila si caben */
  body.portada .final .hero-cta{gap:10px}
  body.portada .final .btn-lg{padding:14px 18px;font-size:.95rem}
  /* los pasos, un poco mas juntos */
  body.portada .step{padding:13px 14px}
  /* el pie, mas apretado */
  body.portada .foot-grid{gap:14px}
  body.portada .foot-col h4{margin-bottom:6px}
  body.portada .foot-contacto a,body.portada .foot-contacto span{min-height:32px}
  body.portada .foot-meta{margin-top:14px;font-size:.78rem}
}

@media (max-width:759px){
  body.portada section{padding:30px 0}
  body.portada .hero{padding-top:28px;padding-bottom:30px}
  body.portada h1{font-size:2rem}
  body.portada .chat{gap:7px}
  body.portada .bubble{font-size:.83rem;padding:8px 11px}
  body.portada .dia-momento .marco{aspect-ratio:16/10}
  body.portada #faq .section-head{margin-bottom:12px}
  body.portada summary{padding:12px 30px 12px 0}
  body.portada .faq-resto > summary{padding:14px 30px 14px 0}
  body.portada .faq-mas{margin-top:14px}
  body.portada .maqueta{padding-bottom:30px}
  body.portada .maqueta-caja{padding:22px 20px}
  body.portada .maqueta-caja h2{font-size:1.4rem}
}

/* ══ Ajustes al copy literal del brief (v2) ══ */

/* "¿Te pasa esto?": tres tarjetas cortas sin icono, el titulo en
   negrita dentro del parrafo, y la linea de cierre. */
.pasa .card p{font-size:.97rem;line-height:1.55;color:var(--ink-2)}
.pasa .card p b{color:var(--ink);font-weight:680}
.pasa-cierre{margin-top:22px;font-size:1.02rem;font-weight:620;color:var(--ink);max-width:60ch}

/* El hero: la linea de Meta va debajo de las fichas, con su icono. */
.hero-meta{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:.84rem;color:var(--muted);line-height:1.5}
.hero-meta svg{width:16px;height:16px;flex:none;margin-top:3px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* "Asi se ve tu dia": el montaje de siempre en escritorio; en el
   celular las dos capturas se deslizan (scroll-snap, sin JS), una a la
   vista, con 420 px de alto maximo. */
@media (max-width:899px){
  .vistas{
    display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px 20px 12px;margin:0 -20px;scrollbar-width:none;
  }
  .vistas::-webkit-scrollbar{display:none}
  .vista{scroll-snap-align:center;margin:0}
  .vistas .marco{max-height:420px}
  .vistas .marco-tel{max-width:none}
}
@media (min-width:900px){.dia-pista{display:none}}

/* Tres resultados en una fila: texto, sin tarjetas. */
.resultados{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;display:grid;gap:12px}
@media (min-width:760px){.resultados{grid-template-columns:repeat(3,1fr);gap:24px}}
.resultados li{position:relative;padding-left:26px;font-size:.97rem;line-height:1.5;color:var(--ink)}
.resultados li::before{
  content:"";position:absolute;left:2px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg);
}

/* Las puertas: marca como subtitulo, inclusiones y recomendado. */
.puerta-sub{font-size:.86rem;font-weight:640;color:var(--purple-ink);margin:-2px 0 8px}
.puerta > p:not(.puerta-sub):not(.puerta-desde):not(.puerta-incluye):not(.puerta-rec){color:var(--ink-2);font-size:.95rem;margin:0}
.puerta-incluye{font-size:.84rem;line-height:1.5;color:var(--ink-2);margin:6px 0 0}
.puerta-rec{font-size:.84rem;line-height:1.5;color:var(--brand-dark);font-weight:620;margin:8px 0 0}
.puerta .btn-bloque{margin-top:16px}
.puerta-dos{margin-top:16px}
.puertas-comun{display:block;line-height:1.6}
.puertas-comun a{display:inline-block;margin-top:8px}

/* "Por que Kuxio y no…": Kuxio de ultima; en el celular la tabla se
   desliza y la primera columna se queda pegada. */
.tabla-porque th:not(:first-child),.tabla-porque td:not(:first-child){width:auto;min-width:118px;text-align:left}
.tabla-porque th[scope="row"]{min-width:132px}
.tabla-porque td.kuxio,.tabla-porque th.kuxio{background:var(--brand-tint)}
.tabla-porque td.mas{font-size:.9rem;color:var(--ink-2)}
.tabla-pegajosa .tabla-porque th[scope="row"],.tabla-pegajosa .tabla-porque thead td:first-child{
  position:sticky;left:0;z-index:1;background:var(--bg);
  box-shadow:1px 0 0 var(--line);
}
@media (max-width:680px){
  .tabla-porque{min-width:640px;font-size:.8rem}
  .tabla-porque th[scope="row"]{min-width:120px;font-size:.8rem}
  .tabla-porque td.mas{font-size:.8rem}
  .tabla-porque th:not(:first-child),.tabla-porque td:not(:first-child){min-width:120px}
}

/* "Quien esta detras": boton verde bajo el texto, redes con usuario. */
.equipo-boton{margin-top:18px}
.equipo-texto .redes{margin-top:16px}

/* "Lo que necesitas tener a mano" como lista de chips otra vez. */
.a-mano{display:flex}

/* El cierre: la linea de "te atiende una persona". */
.final-linea{margin-top:10px;font-size:.92rem;color:#A9BAC6}

/* El pie: la columna Legal existe otra vez (en el celular va en linea
   con las demas). */
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr .9fr .8fr 1.2fr .9fr}}

/* En el celular la tabla se desliza: se dice, porque la columna de
   Kuxio queda a la derecha. */
.tabla-pista{margin-top:10px;font-size:.8rem;color:var(--muted);text-align:center}
@media (min-width:681px){.tabla-pista{display:none}}

/* ── Lo que se dobla en el celular ──
   La tabla de comparacion y la lista de "lo que necesitas tener a mano"
   son de consulta: quien baja por primera vez no las lee de corrido, y
   en 375 px suman casi mil pixeles. En escritorio van abiertas y sin
   nada que tocar; el resumen solo existe abajo de 760 px. */
.doblar{border-bottom:0;padding:0}
.doblar > summary{display:none}
.doblar-mano > .a-mano{margin-top:14px}
@media (max-width:759px){
  .doblar > summary{
    display:block;cursor:pointer;list-style:none;position:relative;
    margin-top:6px;padding:13px 34px 13px 16px;
    border:1px solid var(--line);border-radius:11px;background:var(--bg);
    font-size:.94rem;font-weight:640;color:var(--ink);
  }
  .doblar > summary::-webkit-details-marker{display:none}
  .doblar > summary::after{right:16px;border-color:var(--brand)}
  .doblar[open] > summary{margin-bottom:12px;border-color:var(--brand);color:var(--brand)}
  .doblar > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .doblar-mano > .a-mano{margin-top:10px}
}


/* ══════════════════════════════════════════════════════════════════════
   EL ENCABEZADO Y EL PIE NO HEREDAN LA PIEL DE LA PAGINA
   ══════════════════════════════════════════════════════════════════════
   Cortek y Restok se visten redefiniendo los tokens en su propio
   :root -—es como se les dio identidad sin escribir un color dentro del
   HTML—- y eso funcionaba mientras cada una tenia su encabezado. Desde
   la Fase 3 el encabezado y el pie son los mismos en todo el sitio, y
   heredando los tokens de Restok salian con letra crema sobre blanco:
   ilegibles. Aqui van con valores fijos, los mismos del :root de arriba,
   para que se vean IGUAL en las veintidos paginas pase lo que pase con
   los tokens de cada una. Es la unica parte del sitio donde el color va
   escrito y no por variable, y es a proposito. */
header{background:rgba(255,255,255,.86);border-bottom:1px solid #EFF3F7;color:#0B1220}
header .logo{color:#0B1220}
header .nav-links a,header .nav-boton{color:#334155}
header .nav-links a:hover,header .nav-boton:hover,header .nav-boton[aria-expanded="true"]{color:#0A7A4B}
header .nav-hoja{background:#fff;border-color:#E4E9EF}
header .nav-hoja a{color:#0B1220}
header .nav-hoja a:hover{background:#F7F9FB}
header .nav-hoja a span{color:#334155}
header .hojas-titulo{color:#334155}
header .menu-movil summary{background:#fff;border-color:#E4E9EF;color:#0B1220}
header .menu-movil .hojas{background:#fff;border-color:#E4E9EF}
header .menu-movil .hojas a{color:#0B1220}
header .hoja-boton{background:#fff;border-color:#E4E9EF;color:#0B1220}
header .btn-primary,.wa{background:#0A7A4B;color:#fff;border-color:transparent}
header .btn-primary:hover,.wa:hover{background:#087043;color:#fff}

footer{background:#F7F9FB;border-top:1px solid #E4E9EF;color:#0B1220}
footer .logo,footer .foot-descriptor{color:#0B1220}
footer .foot-col h4{color:#64748B}
footer .foot-col a,footer .foot-col li span{color:#334155}
footer .foot-col a:hover{color:#0A7A4B}
footer .redes a{background:#fff;border-color:#E4E9EF;color:#0B1220}
footer .redes a span{color:#64748B}
footer .redes a:hover{border-color:#0A7A4B;color:#0A7A4B}
footer .foot-meta,footer .foot-legal,footer .foot-legal a{color:#64748B}

/* ── Ultimo apretón en el celular ──
   Nada de esto quita contenido: quita aire alrededor de las tres
   puertas, que son la seccion mas alta de la portada. */
@media (max-width:759px){
  body.portada .puerta{padding:18px 16px}
  body.portada .puerta h3{font-size:1.12rem;margin-bottom:4px}
  body.portada .puerta-sub{font-size:.82rem;margin:0 0 6px}
  body.portada .puerta > p{font-size:.92rem}
  body.portada .puerta-incluye,body.portada .puerta-rec{font-size:.82rem;margin-top:6px}
  body.portada .puerta-desde{padding-top:10px;margin-top:10px;border-top:1px solid var(--line)}
  body.portada .puerta .btn-bloque,body.portada .puerta-dos{margin-top:10px}
  body.portada .puertas{gap:10px}
  body.portada .resultados{gap:8px;margin-top:16px}
  body.portada .trust-item{padding:10px 11px}
}