/* Vende CMS · sitio de ventas (borrador). Sin recursos externos: fuentes del sistema y SVG en línea. */
:root{
  --tinta:#0d1740; --tinta-2:#141f55; --tinta-3:#1f2c70; --linea-osc:#1f3d80;
  --texto:#26304f; --suave:#5d6685; --linea:#e4e8f5; --fondo:#fff; --fondo-2:#f3f8ff; --fondo-3:#e8f0fb;
  --azul:#0b5fd6; --azul-2:#084cb0; --azul-claro:#a8d0ff; --azul-fondo:#e8f2ff;
  --verde:#14804a; --verde-fondo:#e6f6ee; --ambar:#8a5a00; --ambar-fondo:#fff4d6; --cielo:#0a6fb8; --cielo-fondo:#e1f1ff;
  --radio:14px; --radio-s:9px; --ancho:1160px;
  --sombra:0 1px 2px rgba(13,23,64,.06),0 10px 30px rgba(13,23,64,.1);
  --fuente:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fuente);color:var(--texto);background:var(--fondo);line-height:1.55;font-size:1rem;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--azul)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;color:var(--tinta);letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.3vw,2.55rem);font-weight:780;letter-spacing:-.025em}
h3{font-size:1.2rem;font-weight:720}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
code{background:var(--fondo-3);padding:1px 6px;border-radius:5px;font-size:.88em}
[hidden]{display:none!important}
.contenedor{width:min(100% - 32px,var(--ancho));margin-inline:auto}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:#fff;color:var(--tinta);padding:10px 14px;border-radius:8px;z-index:200}
.saltar:focus{left:8px}
:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
.sec-cab p,.lead,.tarjeta p{text-wrap:pretty}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.22em}


/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;font:inherit;font-weight:650;font-size:.97rem;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--primario{background:var(--azul);color:#fff}
.btn--primario:hover{background:var(--azul-2)}
.btn--oscuro{background:var(--tinta-3);color:#fff}
.btn--oscuro:hover{background:var(--tinta)}
.btn--claro{background:#fff;color:var(--tinta);border-color:#cfd6de}
.btn--claro:hover{border-color:var(--tinta)}
.btn--contorno{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn--contorno:hover{border-color:#fff}
.btn--ancho{width:100%}
.btn--chico{min-height:40px;padding:0 16px;font-size:.9rem}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Encabezado */
.cabecera{position:sticky;top:0;z-index:100;background:transparent;color:#fff;transition:background .2s,box-shadow .2s}
.cabecera.es-blanca{background:#fff;box-shadow:0 6px 24px rgba(13,23,64,.1)}
.cabecera .contenedor{display:flex;align-items:center;gap:18px;min-height:64px}
.marca{display:flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;white-space:nowrap}
.marca svg{width:30px;height:30px}
.cabecera:not(.es-blanca) .marca svg rect{fill:#fff}
.cabecera:not(.es-blanca) .marca svg path{stroke:var(--azul)}
.cabecera.es-blanca .marca{color:var(--tinta)}
.cabecera.es-blanca .marca svg rect{fill:var(--azul)}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav > li:first-child{margin-left:auto}
.nav > li:nth-last-child(2){margin-right:auto}
.nav > li:last-child{margin-left:14px}
.nav > li{position:relative;display:flex;align-items:center;border-radius:999px;transition:background .15s}
.nav a.top{color:#fff;text-decoration:none;font-size:.95rem;font-weight:550;padding:9px 12px;border-radius:999px;white-space:nowrap}
.nav > li.has-sub a.top{padding-right:4px}
.nav > li:not(:last-child):hover,.nav > li:not(:last-child):focus-within,.nav > li:has(> a[aria-current="page"]){background:rgba(255,255,255,.16)}
.cabecera.es-blanca .nav > li:not(:last-child):hover,.cabecera.es-blanca .nav > li:not(:last-child):focus-within,.cabecera.es-blanca .nav > li:has(> a[aria-current="page"]){background:var(--fondo-3)}
.cabecera.es-blanca .nav a.top{color:var(--tinta)}
.nav .sub-btn{background:none;border:0;color:rgba(255,255,255,.85);cursor:pointer;padding:8px 10px 8px 2px;border-radius:999px;display:inline-flex}
.cabecera.es-blanca .nav .sub-btn{color:var(--suave)}
.nav .sub-btn:hover{color:#fff}
.cabecera.es-blanca .nav .sub-btn:hover{color:var(--tinta)}
.cabecera:not(.es-blanca) .nav .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.cabecera:not(.es-blanca) .nav .btn:hover{background:#fff;color:var(--azul)}
.nav .sub-btn .ico{width:1em;height:1em;transition:transform .15s}
.has-sub.abierto .sub-btn .ico{transform:rotate(180deg)}
.panel{display:none;position:absolute;top:100%;left:-8px;min-width:330px;padding:10px;background:#fff;color:var(--texto);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);gap:2px;z-index:5}
.panel a{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--texto)}
.panel a:hover{background:var(--fondo-2)}
.panel a .ico{grid-row:1/3;align-self:center;width:34px;height:34px;padding:7px;border-radius:9px;background:var(--azul-fondo);color:var(--azul)}
.panel a strong{font-size:.95rem;color:var(--tinta)}
.panel a span{font-size:.83rem;color:var(--suave);line-height:1.35}
@media (min-width:1101px){
  .has-sub:hover .panel,.has-sub:focus-within .panel,.has-sub.abierto .panel{display:grid}
}
.nav .btn{margin-left:8px;min-height:40px;padding:0 16px;font-size:.9rem}
.menu-btn{display:none;margin-left:auto;background:none;border:0;color:#fff;border-radius:12px;min-height:44px;min-width:44px;padding:0;cursor:pointer;align-items:center;justify-content:center}
.menu-btn .ico{width:28px;height:28px;stroke-width:2.2}
.cabecera.es-blanca .menu-btn{color:var(--tinta)}

/* Hero */
.hero{position:relative;overflow:hidden;margin-top:-64px;background:linear-gradient(135deg,#0a46a8 0%,#1d6fe0 55%,#3d8bf0 100%);color:#e6f0ff;padding:calc(64px + clamp(36px,6vw,76px)) 0 clamp(96px,10vw,140px)}
.hero::before{content:"";position:absolute;right:-9%;top:-24%;width:min(70vw,880px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,8vw,124px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 64 C220 118 470 20 760 56 C1050 92 1230 34 1440 64 L1440 120 L0 120Z' fill='%23ffffff' fill-opacity='.4'/%3E%3Cpath d='M0 96 C250 52 520 112 800 84 C1080 56 1260 98 1440 80 L1440 120 L0 120Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;pointer-events:none}
.hero:has(+ .alt)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 64 C220 118 470 20 760 56 C1050 92 1230 34 1440 64 L1440 120 L0 120Z' fill='%23ffffff' fill-opacity='.4'/%3E%3Cpath d='M0 96 C250 52 520 112 800 84 C1080 56 1260 98 1440 80 L1440 120 L0 120Z' fill='%23f6f7ff'/%3E%3C/svg%3E")}
.hero > .contenedor{position:relative;z-index:1}
.hero h1{color:#fff}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:#e2eeff;max-width:38rem}
.hero .contenedor{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero .ceja{display:inline-block;background:rgba(255,255,255,.16);color:#fff;padding:6px 14px;border-radius:18px;line-height:1.35;letter-spacing:.07em}
.hero .resalta{color:#fff;background:linear-gradient(transparent 64%,rgba(255,255,255,.28) 64%)}
.hero .btn--primario{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.hero .btn--primario:hover{background:#fff;color:var(--azul)}
.hero .btn--contorno{border:0;border-radius:8px;background:none;min-height:44px;padding:0 4px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.6);text-decoration-thickness:1.5px;text-underline-offset:7px;align-self:center;font-weight:650}
.hero .btn--contorno::after{content:"\2192";margin-left:2px;display:inline-block;text-decoration:none}
.hero .btn--contorno:hover{text-decoration-color:#fff;transform:none}
.hero .btns{gap:18px 26px}
.hero .enlace-flecha{color:#fff;font-weight:650;text-decoration:none;display:inline-flex;gap:6px;align-items:center;align-self:center;border-bottom:1.5px solid rgba(255,255,255,.55);padding-bottom:2px}
[id]{scroll-margin-top:84px}
.hero-int{padding:calc(64px + clamp(30px,5vw,60px)) 0 clamp(80px,8vw,110px)}
.hero--home .contenedor{grid-template-columns:.92fr 1.08fr}
@media (min-width:1101px){.hero--home .laptop-wrap{margin-right:-5vw}}
.hero-int .contenedor{grid-template-columns:1fr;max-width:62rem}
.hero-int .lead{max-width:44rem}
.verificaciones{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:22px 0 0;font-size:.92rem;color:#e2eeff}
.verificaciones li{display:flex;gap:8px;align-items:flex-start}
.verificaciones .ico{color:#9df0c0;margin-top:2px}
.ceja{font-size:.8rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--azul);margin:0 0 12px}

/* Secciones */
section{padding:clamp(60px,8vw,104px) 0}
section.alt{background:var(--fondo-2)}
section.oscura{background:var(--tinta);color:#dfe5ec}
section.oscura h2,section.oscura h3{color:#fff}
section.oscura .ceja{color:var(--azul-claro)}
.sec-cab{max-width:46rem;margin:0 auto clamp(26px,4vw,44px);text-align:center}
.sec-cab.izq{margin-inline:0;text-align:left}
.sec-cab p{color:var(--suave);font-size:1.05rem}
section.oscura .sec-cab p{color:#aab3bf}
.rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px;display:flex;flex-direction:column;gap:8px;align-content:start;transition:box-shadow .2s,transform .2s,border-color .2s}
a.tarjeta{text-decoration:none;color:inherit}
a.tarjeta:hover{box-shadow:var(--sombra);transform:translateY(-2px);border-color:#c9d3df}
.tarjeta h3{margin:0}
.tarjeta p{margin:0;color:var(--suave);font-size:.95rem}
.tarjeta .mas{margin-top:auto;padding-top:8px;font-weight:650;color:var(--azul);font-size:.92rem;display:inline-flex;gap:6px;align-items:center}
.ico-caja{width:44px;height:44px;border-radius:12px;background:var(--azul-fondo);color:var(--azul);display:grid;place-items:center;margin-bottom:6px}
.ico-caja .ico{width:22px;height:22px}
.ico-caja.cielo{background:var(--cielo-fondo);color:var(--cielo)}
.ico-caja.verde{background:var(--verde-fondo);color:var(--verde)}
section.oscura .tarjeta{background:var(--tinta-2);border-color:var(--linea-osc)}
section.oscura .tarjeta p{color:#aab3bf}
.lista-ok{display:grid;gap:9px}
.lista-ok li{display:flex;gap:9px;align-items:flex-start;font-size:.95rem}
.lista-ok .ico{color:var(--verde);margin-top:3px;width:1em;height:1em}
.lista-no .ico{color:#b3261e}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px);align-items:center}
.dos-col--arriba{align-items:start}

/* Cifras */
.cifras{background:var(--tinta-2);color:#fff;padding:26px 0}
.cifras ul{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.cifras strong{display:block;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em}
.cifras span{color:#aab3bf;font-size:.9rem}

/* Chat de ejemplo */
.chat{background:var(--tinta-2);border:1px solid var(--linea-osc);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;color:#dfe5ec;font-size:.9rem}
.chat__cab{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--linea-osc);font-weight:650}
.chat__cab .punto{width:8px;height:8px;border-radius:50%;background:#35c47a}
.chat__cab small{margin-left:auto;font-weight:500;color:#8d97a5}
.chat__cuerpo{padding:16px;display:grid;gap:10px}
.msg{padding:10px 14px;border-radius:14px;max-width:88%}
.msg--yo{background:var(--azul);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.msg--ia{background:var(--tinta-3);border-bottom-left-radius:4px}
.propuesta{background:#fff;color:var(--texto);border-radius:12px;padding:14px;display:grid;gap:8px}
.propuesta header{display:flex;justify-content:space-between;gap:8px;font-weight:700;color:var(--tinta);font-size:.88rem}
.propuesta header em{font-style:normal;font-size:.72rem;background:var(--azul-fondo);color:var(--azul-2);padding:2px 8px;border-radius:99px;align-self:center}
.antes,.despues{border-radius:8px;padding:8px 10px;font-size:.84rem}
.antes{background:#fdecea;color:#7a1c16}
.despues{background:var(--verde-fondo);color:#0d4f2e}
.antes b,.despues b{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.propuesta .acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.propuesta .acciones span{text-align:center;border-radius:8px;padding:8px;font-weight:650;font-size:.85rem}
.propuesta .acciones .ap{background:var(--azul);color:#fff}
.propuesta .acciones .de{background:var(--fondo-3);color:var(--tinta)}
.chat__pie{padding:10px 16px;border-top:1px solid var(--linea-osc);color:#8d97a5;font-size:.8rem;display:flex;gap:8px;align-items:center}

/* Pasos */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:paso}
.paso{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;position:relative;counter-increment:paso}
.paso::before{content:counter(paso);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tinta);color:#fff;font-weight:750;font-size:.9rem;margin-bottom:12px}
.paso h3{font-size:1.05rem}
.paso p{margin:0;color:var(--suave);font-size:.93rem}
.pasos--5{grid-template-columns:repeat(5,1fr)}

/* Planes */
.controles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-bottom:10px}
.segmento{display:inline-flex;background:#fff;border:1px solid var(--linea);border-radius:99px;padding:4px;gap:2px;margin:0}
.segmento legend{padding:0}
.segmento label{cursor:pointer}
.segmento input{position:absolute;opacity:0;width:1px;height:1px}
.segmento span{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;font-weight:650;font-size:.92rem;color:var(--suave)}
.segmento input:checked + span{background:var(--tinta);color:#fff}
.segmento input:focus-visible + span{outline:3px solid var(--azul-claro);outline-offset:2px}
.promo{background:var(--verde-fondo);color:var(--verde);font-size:.78rem;padding:2px 8px;border-radius:99px}
.segmento input:checked + span .promo{background:#fff}
.nota-ctl{text-align:center;color:var(--suave);font-size:.9rem;min-height:1.5em;margin:6px 0 26px}
.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:31px 22px 26px;display:flex;flex-direction:column;gap:16px;position:relative}
.plan--popular{border:2px solid var(--azul);box-shadow:var(--sombra);padding:30px 21px 25px}
.plan__cinta{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--azul);color:#fff;font-size:.8rem;font-weight:750;padding:5px 14px;border-radius:0 0 10px 10px;letter-spacing:.04em;white-space:nowrap}
.plan--medida{background:var(--tinta);border-color:var(--tinta);color:#dfe5ec}
.plan--medida h3,.plan--medida .monto{color:#fff}
.plan--medida .plan__para,.plan--medida .sub{color:#aab3bf}
.plan--medida li .ico{color:var(--azul-claro)}
.plan h3{font-size:1.25rem;margin:0}
.plan__para{color:var(--suave);font-size:.93rem;margin:0}
.planes > *{min-width:0}
.plan .btn{white-space:normal;text-align:center;padding-block:10px}
@media (min-width:1101px){
  .plan__para{min-height:5.2em}
  .plan [data-sub]{min-height:1.4em}
  .rejilla--4 .tarjeta h3{min-height:2.6em}
  .plan__otro{min-height:1.5em}
}
.monto{font-size:2.2rem;font-weight:800;color:var(--tinta);letter-spacing:-.03em;line-height:1.1}
.monto small{font-size:.9rem;font-weight:600;color:var(--suave);letter-spacing:0}
.sub{font-size:.84rem;color:var(--suave)}
.plan__otro{font-size:.84rem;color:var(--suave);margin:-6px 0 0}
.plan__otro strong{color:var(--tinta)}
.limites{display:grid;margin:0;border:1px solid var(--linea);border-radius:var(--radio-s);overflow:hidden;font-size:.88rem}
.limites div{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid var(--linea)}
.limites div:first-child{border-top:0}
.limites dt{color:var(--suave)}
.limites dd{margin:0;font-weight:700;color:var(--tinta);text-align:right}
.limites dd small{font-weight:400;color:var(--suave);font-size:.8rem}
.plan ul{display:grid;gap:9px;font-size:.92rem;flex:1;align-content:start}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li .ico{color:var(--verde);margin-top:3px;width:1em;height:1em}
.plan li.titulo{font-weight:700;color:var(--tinta);margin-top:6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.plan--medida li.titulo{color:#fff}
.plan li.titulo .ico{display:none}
.plan li.ia .ico{color:var(--cielo)}
.al-pie-planes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:26px;color:var(--suave);font-size:.92rem}
.al-pie-planes li{display:flex;gap:7px;align-items:center}
.al-pie-planes .ico{color:var(--verde)}

/* Tabla de comparación */
.comparar{position:relative}
.tabla-wrap{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow-x:auto}
.tabla{border-collapse:collapse;width:100%;min-width:720px;font-size:.92rem}
.tabla th,.tabla td{padding:11px 14px;border-top:1px solid var(--linea);text-align:center;vertical-align:top}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.tabla thead th{border-top:0;background:var(--fondo-2);color:var(--tinta);font-size:.92rem;vertical-align:bottom}
.tabla thead th small{display:block;font-weight:500;color:var(--suave);font-size:.78rem;margin-top:3px}
.tabla tbody th{font-weight:620;color:var(--tinta)}
.tabla tbody th small{display:block;font-weight:400;color:var(--suave);margin-top:2px}
.tabla .grupo th{background:var(--fondo-2);font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--suave);text-align:left}
.tabla .si{color:var(--verde);font-weight:800}
.tabla .no{color:#6a7390}
.tabla .etq{display:inline-block;margin-left:6px;font-size:.76rem;font-weight:700;color:var(--suave);background:var(--fondo-3);border-radius:99px;padding:1px 7px;vertical-align:1px}
.tabla td.dato{font-weight:650;color:var(--tinta);white-space:nowrap}
.tabla .col-medida{background:#f9fafc}

/* Consumo de IA */
.consumo-reglas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.consumo-reglas div{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);padding:14px 16px;font-size:.9rem;color:var(--suave)}
.consumo-reglas strong{display:block;color:var(--tinta);margin-bottom:2px}
.aviso{font-size:.85rem;color:var(--suave);margin-top:14px}
.cuadro-azul{background:var(--azul-fondo);border:1px solid #cfe3ff;border-radius:var(--radio);padding:16px 20px;color:#0b3a8f;font-size:.95rem}

/* FAQ */
.faq{max-width:52rem;margin:0 auto;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);padding:0 18px}
.faq summary{cursor:pointer;font-weight:650;padding:15px 0;color:var(--tinta);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--suave);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--suave);padding-bottom:6px;margin:0 0 12px}

/* Chips y etiquetas */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{background:#fff;border:1px solid var(--linea);border-radius:99px;padding:7px 14px;font-size:.9rem;color:var(--suave)}
.chips b{color:var(--tinta)}
.etiqueta{display:inline-block;font-size:.78rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:var(--azul-fondo);color:var(--azul-2)}

/* Marcadores de espacio (casos reales) */
.caso{border:2px dashed #c3ccd6;border-radius:var(--radio);padding:26px;display:grid;gap:8px;background:#fff;color:var(--suave)}
.caso strong{color:var(--tinta)}

/* Formulario */
.contacto{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:start}
.formulario{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(20px,3vw,32px);box-shadow:var(--sombra);display:grid;gap:16px}
.formulario .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:grid;gap:6px;min-width:0}
.campo label{font-weight:650;font-size:.9rem;color:var(--tinta)}
.campo input,.campo select,.campo textarea{font:inherit;color:var(--texto);padding:0 14px;min-height:46px;border:1.5px solid #cfd6de;border-radius:var(--radio-s);background:#fff;width:100%}
.campo textarea{padding:12px 14px;min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(10,108,220,.18)}
.nota-form{font-size:.82rem;color:var(--suave);margin:0}
.datos-contacto{display:grid;gap:14px;margin-top:20px}
.datos-contacto li{display:flex;gap:12px;align-items:flex-start}
.datos-contacto .ico{color:var(--azul);margin-top:3px}

/* CTA final */
.cta-final{background:radial-gradient(900px 400px at 15% 120%,rgba(10,108,220,.4),transparent 60%),var(--tinta);color:#dfe5ec;text-align:center}
.cta-final h2{color:#fff}
.cta-final p{color:#c4ccd6;max-width:38rem;margin-inline:auto}
.cta-final .btns{justify-content:center}

/* Pie */
.pie{background:var(--tinta);color:#aab3bf;padding:52px 0 28px;font-size:.92rem}
.pie .contenedor{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.pie .pie-tit{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.pie ul{display:grid;gap:0}
.pie li a{display:inline-block;padding:8px 0}
.pie a{color:#c4ccd6;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie .marca{margin-bottom:12px}
.pie .legal{grid-column:1/-1;border-top:1px solid var(--linea-osc);padding-top:20px;margin-top:8px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.84rem}


/* Héroes con imagen, franja de integraciones y banda boutique */
.hero-dos .contenedor{grid-template-columns:1.05fr .95fr;max-width:none}
.franja-logos{background:var(--tinta);border-top:1px solid var(--linea-osc);padding:20px 0}
.franja-logos .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 30px}
.franja-logos p{margin:0;color:#8d97a5;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.franja-logos ul{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.franja-logos li{color:#c4ccd6;font-weight:750;letter-spacing:-.01em;font-size:1rem;opacity:.85}
.banda-boutique{margin-top:18px;background:linear-gradient(120deg,var(--tinta),#16294a);border-radius:var(--radio);padding:clamp(22px,3vw,34px);display:flex;gap:24px;align-items:center;justify-content:space-between;color:#dfe5ec}
.banda-boutique h3{color:#fff;font-size:1.4rem;margin:8px 0 6px}
.banda-boutique p{margin:0;color:#aab3bf;max-width:40rem}
.mock{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;color:var(--texto)}
.mock__cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--linea)}
.mock__cab strong{color:var(--tinta)}
.mock__lista li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--linea);font-size:.93rem}
.mock__lista li:first-child{border-top:0}
.mock__lista em{font-style:normal;font-size:.76rem;font-weight:750;background:var(--ambar-fondo);color:var(--ambar);padding:2px 8px;border-radius:99px;margin-left:6px;white-space:nowrap}
.mock__lista .bloq{color:var(--suave)}
.mock__pie{padding:12px 18px;background:var(--fondo-2);color:var(--suave);font-size:.85rem}
.sw{width:40px;height:22px;border-radius:99px;background:#cfd6de;position:relative;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw.on{background:var(--azul)}
.sw.on::after{left:21px}
.capas{display:grid;gap:10px}
.capa{border-radius:14px;padding:16px 20px;display:grid;gap:2px;border:1px solid transparent}
.capa strong{color:#fff;font-size:1.02rem}
.capa span{color:#c4ccd6;font-size:.88rem}
.capa--a{background:rgba(10,108,220,.28);border-color:rgba(77,163,255,.65);margin-inline:0}
.capa--b{background:rgba(109,68,232,.28);border-color:rgba(165,135,255,.65);margin-inline:18px}
.capa--c{background:rgba(20,128,74,.3);border-color:rgba(80,200,140,.6);margin-inline:36px}
.capa--base{background:#fff;margin-top:6px}
.capa--base strong{color:var(--tinta)}
.capa--base span{color:var(--suave)}
.selector{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;max-width:64rem;margin:0 auto}
.selector__form{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(18px,3vw,28px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.selector__res{background:var(--tinta);color:#dfe5ec;border-radius:var(--radio);padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:10px}
.selector__res .ceja{color:var(--azul-claro);margin:0}
.selector__res h3{color:#fff;font-size:2rem;margin:0}
.selector__res ul{display:grid;gap:6px;font-size:.92rem;color:#c4ccd6}
.selector__res .btn{margin-top:auto}
.extra{display:flex;flex-direction:column;gap:6px}
.extra-precio{margin-top:auto;padding-top:8px;font-size:1.6rem;font-weight:800;color:var(--tinta);letter-spacing:-.02em}
.extra-precio small{font-size:.85rem;font-weight:600;color:var(--suave)}

/* Portada: maqueta del panel, funciones, pestañas y bandas (inspirado en plantillas SaaS) */
.laptop-wrap{position:relative;padding:0 0 30px 34px}
.laptop__pantalla{background:#0b1230;border:9px solid #0b1230;border-bottom-width:11px;border-radius:16px 16px 0 0;box-shadow:0 30px 70px rgba(5,25,70,.5);overflow:hidden}
.laptop__base{height:14px;background:linear-gradient(#dfe3f3,#b3bbd6);border-radius:0 0 20px 20px;margin:0 -5%;box-shadow:0 20px 34px rgba(5,25,70,.38)}
.ui{display:grid;grid-template-columns:50px 1fr;background:#f3f8ff;min-height:300px}
.ui__lado{background:var(--tinta-2);padding:14px 0;display:grid;gap:12px;justify-items:center;align-content:start}
.ui__lado i{width:26px;height:26px;border-radius:8px;background:#fff;margin-bottom:6px}
.ui__lado b{width:22px;height:6px;border-radius:3px;background:rgba(255,255,255,.3)}
.ui__lado b.on{background:var(--azul-claro)}
.ui__cuerpo{padding:14px;display:grid;gap:10px;align-content:start}
.ui__barra{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;font-weight:750;color:var(--tinta)}
.ui__barra em{font-style:normal;background:var(--azul-fondo);color:var(--azul-2);border-radius:99px;padding:2px 9px;font-size:.66rem}
.ui__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ui__kpis div{background:#fff;border-radius:10px;padding:9px 10px;display:grid;gap:7px;box-shadow:0 1px 2px rgba(13,23,64,.07)}
.ui__kpis small{font-size:.62rem;color:var(--suave);font-weight:650}
.ui__kpis span{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--azul),var(--azul-claro));width:72%}
.ui__kpis div:nth-child(2) span{width:48%}
.ui__kpis div:nth-child(3) span{width:84%}
.ui__grafico{background:#fff;border-radius:10px;padding:10px 12px 0;display:flex;align-items:flex-end;gap:7px;height:96px;box-shadow:0 1px 2px rgba(13,23,64,.07)}
.ui__grafico i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(var(--azul-claro),var(--azul))}
.ui__progreso{background:#fff;border-radius:10px;padding:9px 11px;font-size:.66rem;color:var(--suave);display:grid;gap:6px;font-weight:650;box-shadow:0 1px 2px rgba(13,23,64,.07)}
.ui__progreso div{height:7px;border-radius:4px;background:var(--fondo-3)}
.ui__progreso div span{display:block;height:100%;width:60%;border-radius:4px;background:linear-gradient(90deg,var(--azul),#3b9cff)}
.flot{position:absolute;z-index:2}
.flot--propuesta{left:-8px;bottom:-6px;width:min(272px,62%)}
.flot--propuesta .propuesta{box-shadow:0 22px 50px rgba(5,25,70,.42)}
.chip-flot{position:absolute;z-index:2;display:flex;gap:8px;align-items:center;background:#fff;color:var(--tinta);border-radius:99px;padding:9px 16px 9px 12px;font-weight:700;font-size:.84rem;box-shadow:0 14px 34px rgba(5,25,70,.32);white-space:nowrap}
.chip-flot .ico{color:var(--azul);width:1.15em;height:1.15em}
.chip-flot--erp{left:38%;top:-6px}
.chip-flot--srv{left:52%;bottom:-2px}
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,56px);text-align:center}
.feat3 article{display:grid;justify-items:center;gap:10px;align-content:start}
.blob{position:relative;width:96px;height:96px;display:grid;place-items:center;margin-bottom:4px}
.blob::before{content:"";position:absolute;inset:6px 0 0 8px;border-radius:44% 56% 52% 48%/55% 45% 55% 45%;background:var(--azul-fondo);transform:rotate(-14deg)}
.blob::after{content:"";position:absolute;right:6px;top:6px;width:10px;height:10px;border-radius:50%;background:#7be0a4;box-shadow:-64px 68px 0 -3px var(--azul-claro)}
.blob .ico{position:relative;z-index:1;width:44px;height:44px;color:var(--azul);stroke-width:1.6}
.feat3 h3{margin:6px 0 0;font-size:1.25rem}
.feat3 p{color:var(--suave);max-width:20rem;margin:0}
.ver-mas{font-weight:700;color:var(--tinta);text-decoration:none;display:inline-flex;gap:6px;align-items:center;margin-top:6px}
.ver-mas:hover{color:var(--azul)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.split .visual{position:relative;padding:20px 0 34px 20px}
.split .visual::before{content:"";position:absolute;left:-6px;top:0;width:150px;height:150px;background:radial-gradient(var(--azul-claro) 1.6px,transparent 1.8px) 0 0/16px 16px;opacity:.75}
.split .visual > .mock{position:relative;z-index:1}
.propuesta-flota{position:absolute;right:-14px;bottom:-4px;width:min(262px,64%);z-index:2}
.propuesta-flota .propuesta{box-shadow:0 22px 50px rgba(13,23,64,.28)}
.items{display:grid;gap:24px}
.items article{display:grid;grid-template-columns:56px 1fr;gap:4px 18px;align-items:start}
.burbuja{grid-row:1/3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--cielo-fondo);color:var(--cielo)}
.burbuja .ico{width:26px;height:26px}
.burbuja--naranja{background:#fff0e6;color:#e8641f}
.burbuja--verde{background:var(--verde-fondo);color:var(--verde)}
.items h3{margin:0;font-size:1.15rem}
.items p{margin:0;color:var(--suave);font-size:.95rem}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--linea);margin-bottom:30px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;justify-content:center}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;font:inherit;font-weight:650;color:var(--suave);padding:12px 20px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--azul);border-bottom-color:var(--azul)}
.tabs button:hover{color:var(--tinta)}
.tab-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.tab-panel[hidden]{display:none}
.tab-panel h3{font-size:1.6rem}
.tab-panel .lista-ok{margin:14px 0 22px}
.banda-indigo{background:linear-gradient(135deg,#0a46a8,#0b5fd6 60%,#3b9cff);color:#fff;padding:clamp(56px,7vw,90px) 0 clamp(110px,12vw,150px)}
.banda-indigo h2{color:#fff;margin:0 0 8px}
.banda-indigo p{color:#e2eeff;margin:0;max-width:34rem}
.casos-fila{margin-top:-96px;position:relative;z-index:1;padding-bottom:clamp(52px,7vw,88px)}
.caso-card{background:#fff;border-radius:16px;padding:26px;box-shadow:var(--sombra);display:grid;gap:12px;align-content:start}
.caso-card header{display:flex;gap:12px;align-items:center}
.avatar-ph{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--azul-claro),var(--azul-fondo));flex:none}
.linea-ph{height:9px;border-radius:5px;background:var(--fondo-3)}
.caso-card strong{color:var(--tinta)}
.caso-card small{color:var(--suave)}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:32px}
.tiles button{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:24px 10px 20px;font:inherit;font-weight:700;color:var(--tinta);cursor:pointer;display:grid;gap:10px;justify-items:center;transition:background .2s,color .2s,box-shadow .2s;position:relative}
.tiles button .ico{width:34px;height:34px;color:var(--azul)}
.tiles button:hover{border-color:#bcd6f7;box-shadow:0 8px 22px rgba(13,23,64,.08)}
.tiles button[aria-selected="true"]{background:linear-gradient(135deg,#0a46a8,#3b9cff);border-color:transparent;color:#fff;box-shadow:0 18px 36px rgba(11,95,214,.35)}
.tiles button[aria-selected="true"] .ico{color:#fff}
.tiles .etq-pro{position:absolute;top:-9px;right:10px;font-size:.62rem;font-weight:800;letter-spacing:.05em;background:#ffd24d;color:#5a4300;border-radius:99px;padding:2px 9px}
.tile-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;background:#fff;border:1px solid var(--linea);border-radius:20px;padding:clamp(22px,4vw,44px);box-shadow:var(--sombra)}
.tile-panel[hidden]{display:none}
.tile-panel h3{font-size:1.5rem}
.tile-panel .enlace{color:var(--azul)}
.tile-panel .chips{margin:14px 0 20px}
.cta-final,.cta-azul{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d6fe0,#0a4cb8);color:#fff;text-align:center}
.cta-final::before,.cta-azul::before{content:"";position:absolute;left:-60px;top:-60px;width:260px;height:260px;background:radial-gradient(rgba(255,255,255,.35) 1.6px,transparent 1.8px) 0 0/16px 16px;opacity:.7}
.cta-final > .contenedor,.cta-azul > .contenedor{position:relative}
.cta-final h2,.cta-azul h2{color:#fff}
.cta-final p,.cta-azul p{color:#fff;max-width:38rem;margin-inline:auto}
.cta-final .btns,.cta-azul .btns{justify-content:center}
.cta-final .btn--primario,.cta-azul .btn--primario{background:#fff;color:#0a4cb8}
.tarjeta{border-radius:16px}

/* Integración con ERP (Pro y A medida) */
.plan li.erp{background:var(--azul-fondo);border-radius:9px;padding:9px 10px;margin:2px -4px;color:#0b3a8f;align-items:flex-start}
.plan li.erp .ico{color:var(--azul)}
.plan--medida li.erp{background:rgba(77,163,255,.18);color:#e8f2ff}
.plan--medida li.erp .ico{color:var(--azul-claro)}
.chip-erp{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.06em;background:var(--azul);color:#fff;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.tabla .grupo.erp th{background:var(--azul-fondo);color:var(--azul-2)}
.banda-erp{margin-top:26px;background:#fff;border:1px solid #cfe3ff;border-radius:var(--radio);padding:clamp(20px,3vw,32px);display:grid;gap:18px;box-shadow:var(--sombra)}
.banda-erp__cab h3{margin:8px 0 4px;font-size:1.5rem}
.banda-erp__cab p{margin:0;color:var(--suave);max-width:46rem}
.banda-erp__niveles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.banda-erp .nivel{border:1px solid var(--linea);border-radius:var(--radio-s);padding:14px 16px;font-size:.92rem;background:var(--fondo-2)}
.banda-erp .nivel b{display:block;margin-bottom:4px;color:var(--tinta)}
.banda-erp .nivel p{margin:0;color:var(--suave)}
.banda-erp .nivel--pro{background:var(--azul-fondo);border-color:#cfe3ff}
.banda-erp .nivel--medida{background:var(--tinta);border-color:var(--tinta)}
.banda-erp .nivel--medida b{color:#fff}
.banda-erp .nivel--medida p{color:#c4ccd6}
.flujo{display:grid;gap:8px}
.nodo{background:var(--tinta-2);border:1px solid var(--linea-osc);border-radius:14px;padding:16px 20px;display:grid;gap:2px}
.nodo strong{color:#fff;font-size:1.05rem}
.nodo span{color:#aab3bf;font-size:.88rem}
.nodo--centro{background:linear-gradient(135deg,#0a46a8,#3b9cff);border-color:transparent}
.nodo--centro span{color:#e2eeff}
.enlace{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--azul-claro);padding:0 14px;font-weight:650}
.tarjeta--erp{border-color:#9cc8f7;box-shadow:0 0 0 3px rgba(10,108,220,.12)}

/* ═══ v3 · estilo de las plantillas de referencia (Oppi y Makro): Figtree alojada (assets/fonts/figtree.css, incrustada), azul plano, diagonal, botones píldora ═══ */
:root{
  --fuente:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tinta:#051441; --tinta-2:#0a1a52; --tinta-3:#13266b; --linea-osc:#1f3d80;
  --texto:#3b4864; --suave:#5f7087; --linea:#e6ebf5; --fondo-2:#f3f8ff; --fondo-3:#e8f0fb;
  --azul:#0b5fd6; --azul-2:#084cb0; --azul-claro:#a8d0ff; --azul-fondo:#e8f2ff;
  --hero:#1d6fe0; --pie:#07112d;
  --alto-cabecera:96px;
}
body{line-height:1.7}
h1,h2,h3,h4{letter-spacing:-.02em}
h1{font-size:clamp(2.35rem,4.6vw,3.75rem);line-height:1.17;font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.75rem,3.1vw,2.56rem);line-height:1.2;font-weight:700;letter-spacing:-.025em}
h3{font-size:1.25rem;font-weight:600;line-height:1.3}
section{padding:clamp(64px,9vw,120px) 0}
.sec-cab p{font-size:1.0625rem}
.ceja{font-size:.9rem;font-weight:600;letter-spacing:.11em}
.btn{min-height:50px;padding:0 36px;font-weight:600;font-size:1rem}
.btn--chico{min-height:42px;padding:0 20px}
.tarjeta{border-radius:12px}
.cabecera .contenedor{min-height:var(--alto-cabecera)}
.hero{margin-top:calc(-1 * var(--alto-cabecera))}
.marca{font-size:1.3rem;font-weight:700;letter-spacing:-.03em}
.nav a.top{font-weight:400;font-size:1rem;padding:10px 14px;border-radius:0;background:none;opacity:.82}
.nav a.top:hover,.nav a.top[aria-current="page"]{background:none;opacity:1}
.nav > li,.nav > li:not(:last-child):hover,.nav > li:not(:last-child):focus-within,.nav > li:has(> a[aria-current="page"]),.cabecera.es-blanca .nav > li:not(:last-child):hover,.cabecera.es-blanca .nav > li:not(:last-child):focus-within,.cabecera.es-blanca .nav > li:has(> a[aria-current="page"]){background:none}
.nav a.top[aria-current="page"]{font-weight:600}
.nav .btn{min-height:50px;padding:0 35px;font-size:1rem}
.cabecera:not(.es-blanca) .nav .btn{background:#fff;color:var(--hero);border-color:#fff}
.cabecera:not(.es-blanca) .nav .btn:hover{background:transparent;color:#fff}
.hero{background:var(--hero);color:#fff;padding:calc(var(--alto-cabecera) + clamp(36px,6vw,92px)) 0 clamp(120px,15vw,230px)}
.hero::before{right:-10%;top:-30%;background:rgba(255,255,255,.07)}
.hero::after{left:0;right:0;bottom:-1px;height:clamp(70px,10vw,160px);background:var(--fondo);clip-path:polygon(0 100%,100% 100%,100% 0);z-index:1}
.hero:has(+ .alt)::after{background:var(--fondo-2)}
.hero > .contenedor{z-index:2}
.hero .lead{font-size:1.25rem;line-height:1.5;color:#fff;max-width:34rem}
.hero .btn--primario{background:transparent;color:#fff;border:2px solid var(--azul-claro);padding:0 53px}
.hero .btn--primario:hover{background:#fff;border-color:#fff;color:var(--hero)}
.hero .btn--contorno{font-weight:600}
.hero-int{padding:calc(var(--alto-cabecera) + clamp(30px,5vw,70px)) 0 clamp(110px,12vw,190px)}
.hero--home .contenedor{grid-template-columns:.95fr 1.05fr;gap:clamp(20px,3vw,40px)}
.hero--home h1{margin-bottom:.45em;font-size:clamp(2.3rem,3.7vw,3.5rem)}
.hero--home .btns{margin-top:30px}
.hero__visual{position:relative;z-index:2}
@media (min-width:1101px){.hero--home .hero__visual{margin-right:-9vw}}
.laptop{position:relative;width:100%}
.laptop__pantalla{background:#10131f;border:clamp(6px,.9vw,12px) solid #10131f;border-bottom-width:clamp(8px,1.2vw,16px);border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 40px 90px rgba(5,20,65,.45)}
.laptop__pantalla img{display:block;width:100%;height:auto}
.laptop__base{position:relative;height:clamp(10px,1.4vw,18px);margin:0 -7%;background:linear-gradient(#e9ecf5,#b6bdd2);border-radius:0 0 26px 26px;box-shadow:0 24px 44px rgba(5,20,65,.35)}
.laptop__base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:62%;transform:translateX(-50%);background:#c8cee0;border-radius:0 0 10px 10px}
.telefono{position:relative;width:min(250px,100%);border:9px solid #10131f;border-radius:38px;background:#10131f;box-shadow:0 30px 70px rgba(13,23,64,.35);overflow:hidden}
.telefono::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:36%;height:20px;background:#10131f;border-radius:0 0 14px 14px;z-index:2}
.telefono img{display:block;width:100%;height:auto;border-radius:28px}
.navegador{background:#fff;border-radius:12px;box-shadow:0 30px 70px rgba(13,23,64,.22);overflow:hidden;border:1px solid var(--linea)}
.navegador__barra{display:flex;gap:6px;padding:10px 14px;background:#f1f3fa;border-bottom:1px solid var(--linea)}
.navegador__barra i{width:10px;height:10px;border-radius:50%;background:#ff6058}
.navegador__barra i:nth-child(2){background:#ffbd2e}
.navegador__barra i:nth-child(3){background:#27c93f}
.navegador img{display:block;width:100%;height:auto}
.visual-disp{position:relative;padding:20px 0 44px}
.visual-disp::before{content:"";position:absolute;left:-12px;top:0;width:150px;height:150px;background:radial-gradient(var(--azul-claro) 1.6px,transparent 1.8px) 0 0/16px 16px;opacity:.8}
.visual-disp .laptop{position:relative;width:92%}
.visual-disp .telefono{position:absolute;right:0;bottom:0;width:27%;min-width:122px;border-width:7px;border-radius:30px}
.visual-disp .telefono img{border-radius:22px}
.pantallas{display:flex;justify-content:center;align-items:center;margin-top:8px}
.pantallas > *:nth-child(1){width:37%;margin-right:-70px;transform:translateY(10px)}
.pantallas > *:nth-child(2){width:min(250px,24%);min-width:190px;z-index:2}
.pantallas > *:nth-child(3){width:37%;margin-left:-70px;transform:translateY(10px)}
.pantallas-nota{text-align:center;color:var(--suave);font-size:.85rem;margin-top:26px}
.blob{width:128px;height:112px}
.blob .ico{width:52px;height:52px}
.feat3 h3{font-size:1.5rem;font-weight:600}
.feat3 p{font-size:1rem}
.ver-mas{font-weight:600}
.cta-app{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d6fe0,#0a4cb8);color:#fff;padding:clamp(60px,8vw,110px) 0 0}
.cta-app::before{content:"";position:absolute;left:-60px;top:-60px;width:260px;height:260px;background:radial-gradient(rgba(255,255,255,.35) 1.6px,transparent 1.8px) 0 0/16px 16px;opacity:.7}
.cta-app .contenedor{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:end}
.cta-app h2{color:#fff}
.cta-app p{color:#fff;font-size:1.125rem;max-width:34rem}
.cta-app__texto{padding-bottom:clamp(60px,8vw,110px)}
.cta-app .btn--primario{background:#fff;color:#0a4cb8}
.cta-app .btn--contorno{border-color:rgba(255,255,255,.75)}
.cta-app__telefonos{display:flex;gap:18px;justify-content:center;align-items:flex-end}
.cta-app__telefonos .telefono{width:min(215px,44%);margin-bottom:-70px}
.cta-app__telefonos .telefono:first-child{margin-bottom:-30px}
.pie{background:var(--pie)}
/* Marcos de dispositivo de las plantillas: laptop de Oppi (830×476) y teléfono de Makro (272×549), con nuestras capturas dentro de la pantalla */
.laptop{position:relative;width:100%;aspect-ratio:830/476}
.laptop__marco{position:absolute;inset:0;width:100%;height:100%;display:block}
.laptop__pantalla{position:absolute;left:13.25%;top:1.9%;width:73.5%;height:83.4%;object-fit:cover;object-position:left top;display:block;border-radius:2px;border:0}
.laptop__base,.laptop::after{display:none}
.telefono{position:relative;width:min(250px,100%);aspect-ratio:272/549;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.telefono::before{content:"";position:absolute;left:6.25%;top:2.2%;width:87.1%;height:94.7%;transform:none;z-index:0;background:#fff;border-radius:26px}
.telefono .telefono__pantalla{position:absolute;z-index:0;left:6.25%;top:6.2%;width:87.1%;height:90.7%;object-fit:cover;object-position:top;border-radius:26px;display:block}
.telefono .telefono__marco{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.visual-disp .telefono{position:absolute;right:-2%;bottom:-2%;width:26%;min-width:122px;border:0;border-radius:0}
.visual-disp .laptop{width:94%}
/* v3b · valores tomados del CSS de las plantillas (Makro 1.3.5 y Oppi 1.2.7): botón con brillo de color, tarjetas de 6 px con sombra suave, degradado de la banda */
.btn--primario{box-shadow:0 10px 30px 0 rgba(11,95,214,.4)}
.btn--primario:hover{box-shadow:0 14px 34px 0 rgba(11,95,214,.5)}
.hero .btn--primario,.cabecera:not(.es-blanca) .nav .btn{box-shadow:none}
.cta-app .btn--primario{box-shadow:0 10px 30px 0 rgba(5,35,110,.35)}
.tarjeta{border:0;border-radius:6px;box-shadow:0 10px 60px 0 rgba(0,0,0,.08)}
a.tarjeta:hover{border:0;box-shadow:0 14px 60px 0 rgba(0,0,0,.14)}
.plan{border-radius:10px}
.plan--popular{box-shadow:0 20px 30px 0 rgba(8,40,115,.2)}
.mock,.navegador,.formulario,.tile-panel,.banda-erp{box-shadow:0 10px 60px 0 rgba(0,0,0,.08)}
.caso-card{padding:40px 40px 52px;border-radius:6px;box-shadow:0 6px 20px 0 rgba(0,33,121,.08)}
.banda-indigo{background:linear-gradient(45deg,#0a3f9e 0%,#0b5fd6 52%,#35a7ff 100%)}
.tiles button[aria-selected="true"]{background:linear-gradient(45deg,#0a3f9e 0%,#0b5fd6 52%,#35a7ff 100%);box-shadow:0 10px 30px 0 rgba(11,95,214,.4)}
.tiles button{border-radius:6px}
.tile-panel{border-radius:6px}
.faq details{border-radius:6px}

/* Responsive */
@media (max-width:1180px){
  .nav a.top{padding:9px 7px;font-size:.9rem}
  .nav .btn{margin-left:4px;padding:0 12px}
}
@media (max-width:1100px){
  .planes{grid-template-columns:repeat(2,1fr)}
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .pasos,.pasos--5{grid-template-columns:repeat(2,1fr)}
  .consumo-reglas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero .contenedor,.hero-dos .contenedor,.dos-col,.contacto,.selector,.split,.tab-panel,.tile-panel,.feat3{grid-template-columns:1fr}
  .laptop-wrap{padding-left:0}
  .chip-flot{display:none}
  .flot--propuesta,.propuesta-flota{position:static;width:100%;margin-top:14px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .banda-boutique{flex-direction:column;align-items:flex-start}
  .rejilla--3{grid-template-columns:1fr 1fr}
  .cifras ul{grid-template-columns:repeat(2,1fr)}
  .pie .contenedor{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .rejilla--2,.rejilla--3,.rejilla--4,.planes,.pasos,.pasos--5,.consumo-reglas,.verificaciones,.formulario .fila,.pie .contenedor,.selector__form{grid-template-columns:1fr}
  .capa--b{margin-inline:10px}.capa--c{margin-inline:20px}
  .banda-erp__niveles{grid-template-columns:1fr}
  .enlace{flex-direction:column;gap:2px}
  .btns .btn{flex:1 1 100%}
  .cifras ul{grid-template-columns:1fr 1fr}
  }
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.btn:hover,a.tarjeta:hover{transform:none}}

/* Repaso 2.0 · segunda vuelta */
.tarjeta p strong{display:block;margin-top:8px;color:var(--azul)}
.dos-col .ico-caja{margin-bottom:14px}
.visual-flota{position:relative;padding:clamp(22px,4vw,42px);border-radius:24px;background:linear-gradient(135deg,var(--azul-fondo),#fff);max-width:460px;margin-inline:auto;width:100%}
.visual-flota::before{content:"";position:absolute;right:-10px;top:-10px;width:110px;height:110px;background:radial-gradient(var(--azul-claro) 1.6px,transparent 1.8px) 0 0/16px 16px;opacity:.7;z-index:0}
.visual-flota > *{position:relative;z-index:1}
.visual-flota .propuesta{box-shadow:0 18px 44px rgba(13,23,64,.16)}
.campo select{appearance:none;-webkit-appearance:none;padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6685' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.propuesta-flota{right:-18px;bottom:-40px;width:min(250px,60%)}
.split .visual{padding-bottom:64px}
@media (max-width:900px){.propuesta-flota{right:auto;bottom:auto;width:100%}.split .visual{padding-bottom:20px}}

/* v3 · ajustes de tamaño pequeño */
@media (max-width:900px){
  .hero--home .hero__visual{margin-right:0;margin-top:10px}
  .hero{padding-bottom:clamp(90px,16vw,150px)}
  .pantallas{flex-direction:column;gap:22px}
  .pantallas > *{width:100% !important;max-width:520px;margin:0 !important;transform:none !important}
  .pantallas > *:nth-child(2){max-width:250px}
  .visual-disp .telefono{position:static;margin:18px auto 0;width:min(220px,60%)}
  .cta-app .contenedor{grid-template-columns:1fr}
  .cta-app__texto{padding-bottom:20px}
  .cta-app__telefonos .telefono,.cta-app__telefonos .telefono:first-child{margin-bottom:0}
}
@media (max-width:620px){
  .hero .btn--primario{padding:0 28px}
  .cta-app__telefonos .telefono{width:46%}
}

/* v3c · botones y filas de los planes en una sola línea */
.plan .btn{padding:0 14px;font-size:.95rem}
.limites dt{white-space:nowrap}
.limites dd{white-space:nowrap}
.plan--medida .btn{margin-top:9px}
/* v3d · el texto de encabezado de sección (eyebrow) conserva el azul de la plantilla */
.sec-cab p.ceja{color:var(--azul);font-size:.9rem;margin:0 0 12px}
section.oscura .sec-cab p.ceja{color:var(--azul-claro)}
/* v3d · en pantallas angostas un botón con texto largo se parte en vez de ensanchar la página */
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;padding-block:12px;max-width:100%}
}
/* v3e · laptop del hero grande, como en Oppi: sale del contenedor y llega casi al borde derecho de la ventana; su ancho se limita al espacio que deja el texto */
@media (min-width:1101px){
  .hero--home .contenedor{grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:0}
  .hero--home .hero__visual{justify-self:end;width:min(60vw,940px,calc(50vw + min(100vw - 32px,var(--ancho))/2 - 508px));margin-right:calc((min(100vw - 32px,var(--ancho)) - 100vw)/2 + 24px)}
}
/* v3f · cuenta: «Ingresar» y «Crear cuenta» en el menú, ventana de registro y página de acceso */
@media (min-width:1101px){
  .nav > li:nth-last-child(3){margin-right:auto}
  .nav > li:nth-last-child(2){margin-right:0}
  .nav > li.nav__ingreso{margin-left:6px}
}
.nav .top--ingreso{display:inline-flex;align-items:center;gap:7px}
.nav .top--ingreso .ico{width:18px;height:18px;flex:none}
.campo small{font-weight:400;color:var(--suave)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--texto);line-height:1.5;cursor:pointer}
.check input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--azul)}
.check small{color:var(--suave)}
.enlace-chico{font-size:.88rem;font-weight:600;color:var(--azul)}
.fila-opciones{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.registro{display:grid;gap:16px}
.registro .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.registro__ingreso{margin:18px 0 0;text-align:center;font-size:.92rem;color:var(--suave)}
.registro__ingreso a{font-weight:600;color:var(--azul)}
.registro__ingreso small{color:var(--suave)}
.seccion-acceso{padding-top:clamp(36px,5vw,64px)}
.acceso{max-width:540px;margin-inline:auto;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:clamp(22px,3.4vw,38px);box-shadow:0 10px 60px rgba(0,0,0,.08)}
.acceso .tabs{margin-bottom:24px}
.registro-ok{display:grid;gap:12px;justify-items:start;padding:8px 0}
.registro-ok > .ico{width:54px;height:54px;padding:13px;border-radius:50%;background:var(--verde-fondo);color:var(--verde);stroke-width:2.4}
.registro-ok h3{margin:0}
.registro-ok p{margin:0}
.registro-ingreso{display:grid;gap:12px;justify-items:start;padding:8px 0}
.registro-ingreso > .ico{width:54px;height:54px;padding:13px;border-radius:50%;background:var(--azul-fondo);color:var(--azul)}
.registro-ingreso h3,.registro-ingreso p{margin:0}
.registro-ingreso .btn{margin-top:6px}

html.modal-abierto{overflow:hidden}
dialog.modal{border:0;padding:0;background:#fff;color:var(--texto);border-radius:20px;width:min(940px,calc(100% - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 40px 100px rgba(5,20,65,.4)}
dialog.modal::backdrop{background:rgba(5,20,65,.6);backdrop-filter:blur(3px)}
.modal__caja{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:100%}
.modal__lado{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d6fe0,#0a4cb8);color:#fff;padding:clamp(26px,3.4vw,42px);display:flex;flex-direction:column;gap:6px}
.modal__lado::before{content:"";position:absolute;right:-50px;bottom:-50px;width:230px;height:230px;background:radial-gradient(rgba(255,255,255,.3) 1.6px,transparent 1.8px) 0 0/16px 16px;opacity:.7;pointer-events:none}
.modal__lado > *{position:relative}
.modal__ceja{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#cfe3ff}
.modal__lado h3{margin:0;color:#fff;font-size:2rem}
.modal__precio{margin:6px 0 0;font-size:1rem;color:#e3f0ff}
.modal__precio strong{font-size:2.3rem;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1}
.modal__sub{margin:0;font-size:.88rem;color:#cfe3ff}
.modal__lista{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;font-size:.93rem}
.modal__lista li{display:flex;gap:10px;align-items:flex-start;color:#fff}
.modal__lista .ico{width:18px;height:18px;flex:none;margin-top:3px;color:#9df0c0}
.modal__nota{margin:auto 0 0;padding-top:22px;font-size:.85rem;color:#cfe3ff}
.modal__cuerpo{padding:clamp(26px,3.4vw,42px)}
.modal__cuerpo h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:0 44px 14px 0}
.modal .tabs{justify-content:flex-start;margin-bottom:22px}
.modal__cerrar{position:absolute;right:14px;top:14px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:var(--fondo-3);color:var(--tinta);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.modal__cerrar:hover{background:#dbe7fa}
.modal__cerrar .ico{width:20px;height:20px}
@media (max-width:760px){
  .modal__caja{grid-template-columns:minmax(0,1fr)}
  .modal .tabs button{padding:12px 14px}
  .modal__lado{padding:22px 24px 20px}
  .modal__lado h3{font-size:1.5rem}
  .modal__lista,.modal__nota{display:none}
  .modal__cuerpo{padding:22px 22px 26px}
  .modal__cuerpo h2{margin-right:0}
  .modal__cerrar{background:rgba(255,255,255,.18);color:#fff}
  .modal__cerrar:hover{background:rgba(255,255,255,.3)}
}
@media (max-width:520px){.registro .fila{grid-template-columns:1fr}}
.modal__promo{align-self:flex-start;margin:10px 0 0;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-size:.82rem;font-weight:600}
.modal__promo--no{background:none;padding:0;color:#cfe3ff;font-weight:400}

/* v3g · ritmo vertical: un solo espacio entre bloques (en Makro el aire de abajo no se suma al de arriba) */
section{padding:clamp(52px,5.6vw,80px) 0}
section:not([class]) + section:not([class]){padding-top:0}
.hero,.hero-int{padding-bottom:calc(clamp(70px,10vw,160px) + 28px)}
.cta-app{padding-top:clamp(52px,6vw,88px)}
/* ninguna columna puede empujar a otra: si el contenido es más ancho, se ajusta dentro de la suya */
.tile-panel > *,.tab-panel > *,.split > *,.dos-col > *,.contacto > *,.feat3 > *,.selector > *,.rejilla > *,.planes > *,.flujo > *{min-width:0}
.enlace{flex-wrap:wrap}
/* tarjetas de plan: el grupo «Asistente de IA» queda alineado al pie y el aire sobrante va entre los dos grupos, no al final */
.plan ul{display:flex;flex-direction:column;gap:9px}
.plan li.titulo ~ li.titulo{margin-top:auto;padding-top:14px}

/* tabla de planes siempre abierta, con íconos «i» */
.tabla tbody th .fila-et{vertical-align:middle}
.info{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:8px;padding:0;border:0;border-radius:50%;background:var(--azul-fondo);color:var(--azul);font:700 .72rem/1 var(--fuente);font-style:italic;cursor:help;vertical-align:middle;transition:background .15s,color .15s}
.info:hover,.info:focus-visible{background:var(--azul);color:#fff}
.info:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.tip{position:fixed;z-index:90;max-width:min(320px,calc(100vw - 16px));padding:10px 14px;border-radius:10px;background:var(--tinta);color:#fff;font-size:.85rem;font-weight:400;line-height:1.5;text-align:left;box-shadow:0 14px 40px rgba(5,20,65,.35);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s}
.tip.visible{opacity:1;visibility:visible}
.tip::after{content:"";position:absolute;top:100%;left:var(--flecha,50%);width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--tinta);transform:rotate(45deg)}
.tip--abajo::after{top:0;margin-top:-5px}
@media (min-width:901px){
  @supports (overflow:clip){
    .tabla-wrap{overflow:clip}
    .tabla thead th{position:sticky;top:var(--cab-h,96px);z-index:2;box-shadow:0 1px 0 var(--linea)}
  }
}
/* franja de ventajas bajo las tarjetas de precio (idea de Tiendanube) */
.franja-valor{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}
.franja-valor li{display:flex;gap:14px;align-items:center}
.franja-valor .ico-caja{flex:none;margin:0;width:52px;height:52px;border-radius:50%}
.franja-valor strong{display:block;color:var(--tinta);font-size:1rem;line-height:1.3}
.franja-valor small{display:block;color:var(--suave);font-size:.88rem;line-height:1.45;margin-top:2px}
@media (max-width:900px){.franja-valor{grid-template-columns:1fr}}
/* A medida: el botón de cotizar queda pegado al pie de la tarjeta oscura */
.plan--medida > .btn--contorno{margin-top:6px;color:#fff;border-color:rgba(255,255,255,.55)}
.plan--medida > .btn--contorno:hover{background:#fff;color:var(--tinta);border-color:#fff}
/* v3h · dispositivos: el hueco de la pantalla ya viene abierto en el marco, así la captura va DEBAJO y el bisel queda siempre por encima */
.laptop__pantalla{z-index:0;left:13.1%;top:1.7%;width:73.9%;height:84%;object-fit:fill;border-radius:0}
.laptop__marco{z-index:1;pointer-events:none}
/* teléfono: el marco trae un borde de 1 px semitransparente y las esquinas del hueco son más redondas que el fondo blanco; un respaldo blanco opaco, un poco más grande que el hueco y escondido bajo el bisel, evita que se cuele lo que hay detrás */
.telefono::before{left:2.2%;top:1.5%;width:95.6%;height:97%;border-radius:13.2%/6.6%;background:#fff}
.telefono{filter:drop-shadow(0 22px 34px rgba(13,23,64,.26))}
/* las esquinas superiores del hueco de la pantalla son redondas (≈13 px del marco): la captura las sigue para no asomar fuera del bisel */
.laptop__pantalla{border-radius:2.1% 2.1% 0 0 / 3.3% 3.3% 0 0}
/* el bisel del laptop no puede tapar al teléfono que lo acompaña */
.laptop{isolation:isolate}
.visual-disp .telefono{z-index:3}
/* v3i · más dispositivos */
/* etiqueta «Pro y A medida»: no baja de 11,5 px */
.tiles .etq-pro{font-size:.72rem;padding:3px 10px;top:-11px}
/* casilla «Mantener la sesión»: objetivo táctil de 44 px */
.check{min-height:44px;align-items:center}
.check input{width:22px;height:22px;margin:0}
/* laptop del hero: desde tablets en horizontal, y sin irse hasta el borde en pantallas enormes (sobresale como máximo 140 px del contenedor) */
@media (min-width:901px){
  .hero--home{--col-texto:420px;--ancho-cont:min(100vw - 32px,var(--ancho));--sangrado:max(0px,min(140px,calc((100vw - var(--ancho-cont))/2 - 24px)))}
  .hero--home .contenedor{grid-template-columns:minmax(0,var(--col-texto)) minmax(0,1fr);column-gap:0}
  .hero--home .hero__visual{justify-self:end;width:min(940px,calc(var(--ancho-cont) - var(--col-texto) + var(--sangrado) + 36px));margin-right:calc(-1 * var(--sangrado))}
}
@media (min-width:1100px){.hero--home{--col-texto:470px}}
@media (min-width:1280px){.hero--home{--col-texto:520px}}
/* «Así se ve lo que tus clientes usan»: en tablets (641–900 px) se conserva la composición con el teléfono al centro; en celular se apila */
@media (min-width:641px) and (max-width:900px){
  .pantallas{flex-direction:row;gap:0;align-items:center}
  .pantallas > *:nth-child(1){width:38% !important;max-width:none;margin:0 -34px 0 0 !important;transform:translateY(10px) !important}
  .pantallas > *:nth-child(2){width:min(230px,31%) !important;min-width:150px;max-width:none}
  .pantallas > *:nth-child(3){width:38% !important;max-width:none;margin:0 0 0 -34px !important;transform:translateY(10px) !important}
}
/* tablas anchas en celular y tablet: los nombres de las filas quedan fijos al desplazar hacia los otros planes */
@media (max-width:900px){
  .tabla tbody tr:not(.grupo) > :first-child,.tabla thead th:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--linea),inset 0 1px 0 var(--linea)}
  .tabla tbody tr:not(.grupo) > :first-child{background:#fff}
  .tabla tbody th:first-child{min-width:150px;max-width:176px}
  .tabla .grupo th .grupo-et{position:sticky;left:14px;display:inline-block}
}

/* v3k · portada y encabezado como Oppi (home_finance). Medidas leídas de html.droitlab.com/oppi/home_finance.html: sección con 200 px arriba y 300 abajo,
   texto de 570 px pegado al eje central, título 60/70 px (peso 700), laptop a tamaño natural que sale por la derecha (la sección recorta),
   círculo claro detrás y diagonal blanca de -10,9°. Solo desde 1101 px: en tablet y celular sigue la composición de antes. */
@media (min-width:1101px){
  .hero--home{padding:200px 0 300px}
  .hero--home::before{display:none}
  .hero--home::after{left:auto;right:-171px;bottom:-261px;width:150%;height:383px;clip-path:none;transform:rotate(-10.9deg)}
  .hero--home > .contenedor{width:100%;max-width:none;margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0;align-items:center}
  .hero--home .hero__texto{justify-self:end;width:100%;max-width:570px}
  .hero--home h1{font-size:60px;line-height:70px;font-weight:700;letter-spacing:0;margin:0 0 20px}
  .hero--home .lead{max-width:none;font-size:20px;line-height:30px;margin:0 0 45px}
  .hero--home .btns{margin:0;gap:0 28px;align-items:center}
  .hero--home .hero__visual{justify-self:start;width:1152px;max-width:none;margin:0 0 0 55px}
  .hero--home .laptop{width:100%}
  .hero--home .hero__visual::before{content:"";position:absolute;z-index:-1;top:-80px;left:80px;width:600px;height:600px;border-radius:50%;background:rgba(168,208,255,.12)}
}
@media (min-width:1101px) and (max-width:1366px){.hero--home .hero__visual{margin-left:-47px}}
@media (min-width:1101px) and (max-width:1199px){.hero--home .hero__texto{max-width:100%;padding-left:15px}}
/* el segundo enlace del héroe: sin subrayado fijo; la línea aparece al pasar el mouse y el grosor no cambia */
.hero--home .btn--primario{font-weight:500}
.hero--home .btn--contorno{font-weight:500;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 calc(100% - 9px);background-size:0 1px;transition:background-size .35s}
.hero--home .btn--contorno:hover{background-size:calc(100% - 20px) 1px}

/* encabezado: el grosor y la intensidad de los enlaces no cambian al pasar el mouse ni en la página actual (antes la actual iba en 600 y el resto en opacidad .82,
   y parecía que el texto se engrosaba); se marca con una línea que crece, como en Oppi. «Crear cuenta» va de contorno blanco con sombra suave */
.nav a.top,.nav a.top:hover,.nav a.top:focus-visible,.nav a.top[aria-current="page"]{font-weight:400;opacity:1}
@media (min-width:1101px){
  .nav a.top{position:relative}
  .nav a.top::before{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .35s}
  .nav > li.has-sub > a.top::before{right:4px}
  .nav > li:hover > a.top::before,.nav > li:focus-within > a.top::before,.nav a.top[aria-current="page"]::before{transform:scaleX(1);transform-origin:left center}
  .cabecera:not(.es-blanca) .nav .btn{background:transparent;color:#fff;border:2px solid #fff;box-shadow:0 20px 30px rgba(9,78,130,.2)}
  .cabecera:not(.es-blanca) .nav .btn:hover{background:#fff;color:var(--hero);box-shadow:none}
}
@media (min-width:1280px){
  .nav a.top{padding-inline:20px}
  .nav a.top::before{left:20px;right:20px}
  .nav > li.has-sub > a.top{padding-right:4px}
}

/* v3l · el ícono «i» viaja con la última palabra de su etiqueta: nunca queda solo en otra línea */
.cola{white-space:nowrap}

/* v3l · consumo de IA en tarjetas (antes una tabla): una por plan, con una barra que muestra qué parte del tope mensual se usaría */
.ia-consumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px;align-items:stretch}
.ia-plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px 22px 6px;box-shadow:0 10px 40px rgba(13,23,64,.05);min-width:0}
.ia-plan__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--linea)}
.ia-plan__cab h3{margin:0;font-size:1.3rem}
.ia-plan__tope{margin:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;color:var(--suave);font-size:.82rem}
.ia-plan__tope strong{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;color:var(--azul)}
.ia-casos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1}
.ia-caso{padding:18px 0;border-bottom:1px solid var(--linea)}
.ia-caso:last-child{border-bottom:0}
.ia-caso__tit{margin:0;font-weight:700;font-size:.98rem;line-height:1.35;color:var(--tinta)}
.ia-caso__sub{margin:3px 0 12px;font-size:.84rem;line-height:1.4;color:var(--suave)}
.ia-caso__que{margin:0 0 12px;font-size:.96rem;line-height:1.45;color:var(--texto)}
.ia-caso__que small{font-size:.84rem;color:var(--suave)}
.ia-caso--masivo .ia-caso__que{margin-bottom:6px;font-weight:600;color:var(--tinta)}
.ia-barra{height:10px;margin:0 0 8px;border-radius:99px;background:var(--fondo-3);overflow:hidden}
.ia-barra span{display:block;height:100%;margin-left:var(--desde);width:calc(var(--hasta) - var(--desde));min-width:6px;border-radius:99px;background:linear-gradient(90deg,var(--azul),#35a7ff)}
.ia-caso__gasto{margin:0;font-size:.85rem;color:var(--suave)}
.ia-caso__gasto strong{color:var(--tinta)}
.ia-leyenda{text-align:center;margin-top:14px}
@media (max-width:860px){
  .ia-consumo{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
}

/* v3l · pie: el bloque legal con más aire arriba y abajo */
.pie{padding-bottom:0}
.pie .legal{margin-top:24px;padding:34px 0 38px}
@media (max-width:620px){.pie .legal{padding:28px 0 32px;gap:10px}}

/* v3m · una tarjeta sola en la última fila ocupa todo el ancho (3 tarjetas en 2 columnas, 5 pasos en 2 columnas) */
@media (max-width:1100px){.pasos--5 > :last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:621px) and (max-width:900px){.rejilla--3 > :last-child:nth-child(odd){grid-column:1/-1}}

/* v3n · landing de demos (demos.html): tarjetas con navegador y teléfono, y la tercera «en preparación» */
.demos{align-items:stretch}
.demo-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:0 10px 60px rgba(0,0,0,.08);transition:box-shadow .2s,transform .2s}
.demo-card:hover{box-shadow:0 18px 60px rgba(13,23,64,.16);transform:translateY(-3px)}
.demo-vista{position:relative;display:block;padding:22px 22px 46px;background:linear-gradient(160deg,var(--fondo-3),#dbe9fb);color:inherit;text-decoration:none;overflow:hidden}
.demo-vista .navegador{width:88%;box-shadow:0 18px 40px rgba(13,23,64,.18)}
.demo-vista--sola .navegador{margin-inline:auto}
.demo-vista .telefono{position:absolute;right:6%;bottom:24px;width:27%;min-width:84px;z-index:3;filter:drop-shadow(0 12px 22px rgba(13,23,64,.3))}
.navegador__url{flex:1;min-width:0;margin-left:8px;padding:1px 10px;border-radius:99px;background:#fff;color:var(--suave);font-size:.7rem;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-estado{position:absolute;bottom:10px;left:22px;z-index:4;padding:4px 10px;border-radius:99px;background:var(--tinta);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.demo-card__cuerpo{display:flex;flex-direction:column;gap:8px;flex:1;padding:22px 24px 26px}
.demo-card__cuerpo h3{margin:0}
.demo-card__cuerpo p{margin:0;color:var(--suave);font-size:.95rem}
.demo-card__cuerpo .etiqueta{align-self:flex-start;margin-bottom:2px}
.demo-card__cuerpo .lista-ok{margin:6px 0 12px}
.demo-card__cuerpo .btn{margin-top:auto;align-self:flex-start}
.btn--inactivo{background:var(--fondo-3);border-color:var(--linea);color:var(--suave);cursor:default;pointer-events:none}

/* v3o · repaso de espacios (12-nov): el héroe interno se alinea con el borde del contenido; el diagrama del ERP se centra frente a su lista;
   los enlaces de las tres tarjetas iniciales quedan alineados abajo aunque el texto tenga distinto largo; los puntos de la banda de cierre no pisan el texto */
.hero-int .contenedor{max-width:min(100% - 32px,var(--ancho))}
.hero .lead a{color:#fff;text-decoration:underline;text-underline-offset:3px}
#erp .dos-col{align-items:center}
.feat3 article{align-content:stretch;grid-template-rows:auto auto 1fr auto}
.feat3 .ver-mas{align-self:end}
.cta-app::before{left:-70px;top:-70px;width:200px;height:200px}
/* v3o · en celular el título de la sección respira un poco más antes de su contenido */
.sec-cab{margin-bottom:clamp(32px,4vw,44px)}

/* v3p · el menú de hamburguesa se usa hasta 1100 px (antes hasta 900): ahí el menú de escritorio ya no cabe con comodidad y el encabezado
   pasa a 72 px. En tablet el cajón no ocupa todo el ancho. Desde 1101 px sigue el menú de escritorio con sus submenús al pasar el mouse. */
@media (max-width:1100px){
  :root{--alto-cabecera:72px}
  .menu-btn{display:inline-flex}
  .nav > li,.nav > li:first-child,.nav > li:nth-last-child(2),.nav > li:last-child{margin:0;border-radius:10px}
  .nav > li:not(:last-child):hover,.nav > li:not(:last-child):focus-within,.nav > li:has(> a[aria-current="page"]){background:none}
  .nav > li.has-sub a.top{padding-right:8px}
  .nav{display:none;position:absolute;left:12px;right:12px;top:calc(100% + 6px);background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(13,23,64,.28);flex-direction:column;align-items:stretch;padding:10px 14px 16px;max-height:calc(100vh - 100px);overflow:auto;gap:0}
  .nav.abierto{display:flex}
  .nav > li{flex-wrap:wrap}
  .cabecera .nav a.top{flex:1;padding:14px 8px;font-size:1rem;color:var(--tinta);border-radius:10px}
  .cabecera .nav a.top:hover,.cabecera .nav a.top[aria-current="page"]{background:var(--fondo-3)}
  .cabecera .nav .sub-btn{padding:12px;color:var(--suave)}
  .panel{position:static;display:none;width:100%;min-width:0;background:var(--fondo-2);color:var(--texto);box-shadow:none;border-radius:12px;margin-bottom:6px}
  .has-sub.abierto .panel{display:grid}
  .cabecera:not(.es-blanca) .nav .btn,.cabecera .nav .btn{margin:10px 0 0;width:100%;background:var(--azul);color:#fff;border-color:var(--azul)}
  .cabecera .nav .top--ingreso{justify-content:flex-start}
  .nav > li.nav__ingreso{margin-top:6px;border-top:1px solid var(--linea);padding-top:6px}
}
@media (min-width:701px) and (max-width:1100px){
  .nav{left:auto;right:16px;width:min(420px,calc(100% - 32px))}
}

/* v3p · demo 3: imagen vacía a la espera de su captura */
.demo-vacia{aspect-ratio:1424/801;background:var(--fondo-3)}
.demo-vista .navegador__barra{min-height:40px;align-items:center}
.demo-vista--sola .navegador{max-width:420px}

/* v3q · íconos. (1) Capa «dúo»: las formas con class="d" del sprite se rellenan con un tono suave del color del ícono, pero solo dentro de los contenedores
   grandes (blob, burbuja, tiles, cajas y menús): ahí se define --duo (una variable llega hasta dentro del <use>; un selector de la página, no). En el texto
   corrido los íconos siguen siendo de línea. (2) WhatsApp usa el logo real y el verde de la marca. */
.d{fill:var(--duo,none);fill-opacity:.18}
.blob .ico,.burbuja .ico,.tiles .ico,.ico-caja .ico,.panel a .ico{--duo:currentColor}
.ico--wa{color:#1fa855}

.burbuja .ico{width:28px;height:28px}
.blob .ico{width:58px;height:58px}

/* v3r · simetría: las 5 fichas de integraciones en tablet y celular se reparten 3 + 2 con la segunda fila centrada (antes quedaba pegada a la izquierda) */
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tiles button{grid-column:span 2}
  .tiles button:nth-child(4){grid-column:2/4}
  .tiles button:nth-child(5){grid-column:4/6}
}

/* v3s · «Planes» agrupa el plan a medida: en esa página el ítem se marca como la página actual, y la entrada del submenú también */
.nav a.top[aria-current="true"]{font-weight:400;opacity:1}
.panel a[aria-current="page"]{background:var(--fondo-2)}
@media (min-width:1101px){.nav a.top[aria-current="true"]::before{transform:scaleX(1);transform-origin:left center}}
@media (max-width:1100px){.cabecera .nav a.top[aria-current="true"]{background:var(--fondo-3)}}

/* v3t · botón de WhatsApp igual al de las demos del CMS (extensión «whatsapp»): 54 px (50 en celular), verde de marca, glifo al 52 %, sombra suave,
   crece un poco al pasar el mouse y un halo que se expande sin parar (se apaga con «reducir movimiento»). El pie suma el alto del botón para no taparse. */
:root{--wa-tam:54px;--wa-tam-movil:50px;--wa-sep:20px;--wa-sep-movil:16px}
.wa-flotante{position:fixed;right:var(--wa-sep);bottom:var(--wa-sep);z-index:90;width:var(--wa-tam);height:var(--wa-tam);display:flex;align-items:center;justify-content:center;border-radius:50%;background:#25d366;color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.wa-flotante .ico{width:28px;height:28px;vertical-align:0}
.wa-flotante::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#25d366;animation:wa-pulso 2s ease-out infinite}
@keyframes wa-pulso{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
@media (prefers-reduced-motion:reduce){.wa-flotante::before{animation:none}.wa-flotante{transition:none}}
body:has(.wa-flotante) .pie{padding-bottom:calc(var(--wa-tam) + var(--wa-sep) + 12px - 38px)}
@media (max-width:640px){
  .wa-flotante{right:var(--wa-sep-movil);bottom:var(--wa-sep-movil);width:var(--wa-tam-movil);height:var(--wa-tam-movil)}
  .wa-flotante .ico{width:26px;height:26px}
  body:has(.wa-flotante) .pie{padding-bottom:calc(var(--wa-tam-movil) + var(--wa-sep-movil) + 12px - 32px)}
}

/* v3u · formularios con envío real (enviar.php): campo trampa fuera de pantalla, aviso de error y botón mientras envía */
.trampa{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.nota-error{color:#b42318;font-weight:600}
.btn:disabled{opacity:.7;cursor:progress}

/* v3v · páginas legales (términos, privacidad y cookies), enlaces del pie y borde del hover del menú más grueso */
.legal-texto{max-width:46rem;margin:0 auto}
.legal-meta{margin:0 0 1.4rem;color:var(--suave);font-size:.9rem}
.legal-indice{background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 26px;margin:0 0 2.2rem}
.legal-indice__tit{margin:0 0 8px;font-weight:700;color:var(--tinta)}
.legal-indice ol{margin:0;padding-left:1.3rem;columns:2;column-gap:2rem}
.legal-texto .legal-indice li{margin:0;padding:4px 0;break-inside:avoid}
.legal-texto h2{font-size:1.35rem;margin:2.4rem 0 .6rem;letter-spacing:-.015em}
.legal-texto p,.legal-texto li{color:var(--texto);line-height:1.75}
.legal-texto p{margin:0 0 1rem}
.legal-texto ul{margin:.3rem 0 1.1rem;padding-left:1.3rem}
.legal-texto li{margin:.35rem 0}
.legal-texto a{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.legal-otros{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linea)}
.legal-otros span{color:var(--suave)}
@media (max-width:620px){.legal-indice ol{columns:1}}
.legal-enlaces{display:flex;flex-wrap:wrap;gap:6px 22px}
.pie .legal-enlaces a{display:inline-block;padding:6px 0;color:#c4ccd6;text-decoration:none}
.pie .legal-enlaces a:hover{color:#fff;text-decoration:underline}
@media (min-width:1101px){.nav a.top::before{height:3px;border-radius:3px;bottom:3px}}

/* v3w · espacios parejos entre bloques (tarjetas → banda «A medida» → botón de cierre) y etiqueta del hero del inicio */
.banda-boutique{margin-top:clamp(24px,2.6vw,36px)}
.cierre-sec{text-align:center;margin:clamp(24px,2.6vw,36px) 0 0}
.hero--home .ceja{margin-bottom:18px}
#chile .tarjeta h3{min-height:0}
@media (min-width:621px) and (max-width:1279px){#chile .rejilla--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.hero--home .ceja{font-size:.72rem;letter-spacing:.05em;padding-inline:12px}}
/* el último bloque de una sección no suma margen propio: el aire de abajo es solo el relleno de la sección */
section:not(.hero):not(.cta-app) > .contenedor > :last-child{margin-bottom:0}