/* ============================================
   SUPERCOMP.CL — Landings de Google Ads (Bloque liviano)
   Lo común a /soporte-ti-pymes-santiago/ y /camaras-seguridad-empresas-santiago/.
   Valores solo desde css/tokens.css. Lo propio de cada landing va en línea en su HTML.
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:var(--franja-h,44px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--fondo);color:var(--texto);font-size:16px;line-height:26px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--texto);text-decoration-color:var(--marca);text-decoration-thickness:2px;text-underline-offset:4px}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
h1,h2,h3,h4{color:var(--texto);text-wrap:balance}
h1,h2{overflow-wrap:normal;word-break:normal;hyphens:manual}
h2{font-family:var(--font-display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(24px,3vw,30px);line-height:1.13}
h3{font-family:var(--font-display);font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em}
p{color:var(--texto-suave)}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
@media (max-width:768px){.container{padding:0 16px}}

/* ── Franja superior: grafito, texto hueso, enlace subrayado en amarillo ── */
.franja{position:sticky;top:0;z-index:1000;background:var(--superficie-inversa);color:var(--grafito-50);text-align:center;padding:10px 16px;font-size:15px;line-height:22px;font-weight:600}
.franja a{color:var(--grafito-50);text-decoration:underline;text-decoration-color:var(--marca);text-decoration-thickness:2px;text-underline-offset:4px;margin-left:4px;font-weight:700}
.franja a:hover{color:var(--marca)}

/* ── Cabecera ── */
.cabecera{position:relative;z-index:3;padding:var(--space-4) 0}
.cabecera .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.cabecera-logo img{height:36px;width:auto}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-size:16px;line-height:20px;font-weight:700;padding:14px var(--space-5);border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;text-decoration:none;text-align:center;transition:background-color .15s ease,color .15s ease}
.btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.btn-lg{padding:16px 28px;font-size:17px}
.btn-sm{padding:10px var(--space-4);font-size:15px}
.btn-primario{background:var(--accion);color:var(--sobre-accion)}
.btn-primario:hover{background:var(--accion-hover);color:var(--sobre-accion)}
.btn-secundario{background:transparent;color:var(--texto);border-color:var(--texto)}
.btn-secundario:hover{background:var(--texto);color:var(--fondo)}
/* Sobre amarillo: grafito con texto blanco */
.sobre-marca .btn-primario{background:var(--sobre-marca);color:var(--blanco)}
.sobre-marca .btn-primario:hover{background:var(--accion-hover);color:var(--blanco)}

/* ── Portada con bloque amarillo diagonal (36,5° respecto de la vertical) ── */
.portada{position:relative;overflow:hidden;background:var(--superficie);padding-bottom:var(--space-9)}
.portada::before{content:"";position:absolute;top:0;bottom:0;left:60%;width:200%;background:var(--marca);transform:skewX(calc(-1 * var(--diagonal)));transform-origin:bottom left;z-index:0}
.portada::after{content:"";position:absolute;right:4%;bottom:var(--space-6);width:clamp(88px,10vw,140px);aspect-ratio:312/306;background:url("../img/marca/isotipo-grafito.svg") no-repeat center/contain;z-index:1}
.portada .container{position:relative;z-index:2}
.portada-cuerpo{padding-top:var(--space-7);max-width:56%;container-type:inline-size}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--marca-texto);margin-bottom:var(--space-4)}
.portada h1{font-family:var(--font-display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(24px,calc(100cqi / var(--largo,11.6)),58px);line-height:.95;margin-bottom:var(--space-5)}
/* Segunda parte del h1: misma etiqueta, en texto normal y en bloque (no se pega al leerlo sin estilos) */
.portada h1 .h1-sigue{display:block;margin-top:var(--space-3);font-family:var(--font-sans);font-stretch:100%;text-transform:none;font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.25;color:var(--texto)}
.portada-texto{font-size:19px;line-height:30px;margin-bottom:var(--space-5);max-width:34em}
.portada-acciones{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-5)}
.chequeos{display:flex;flex-direction:column;gap:var(--space-2)}
.chequeos li{display:flex;gap:var(--space-2);align-items:flex-start;color:var(--texto);font-size:15px}
.chequeos li::before{content:"";width:10px;height:10px;margin-top:8px;flex-shrink:0;background:var(--marca)}
.chequeos.en-fila{flex-direction:row;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}

@media (max-width:900px){
  .portada{padding-bottom:calc(56px + var(--space-6))}
  .portada::before{top:auto;height:56px;left:34%}
  .portada::after{width:40px;right:16px;bottom:9px}
  .portada-cuerpo{max-width:none;padding-top:var(--space-5)}
  .portada-texto{font-size:17px;line-height:28px}
}
@media (max-width:640px){
  .portada-acciones{flex-direction:column}
  .portada-acciones .btn{width:100%}
  .cabecera .btn-sm span{display:none}
}

/* ── Secciones ── */
.seccion{padding:var(--space-8) 0}
.seccion-alt{background:var(--superficie)}
.seccion-cabeza{max-width:720px;margin-bottom:var(--space-7)}
.seccion-cabeza h2{margin-bottom:var(--space-4)}
.seccion-cabeza p{font-size:17px;line-height:28px}
.seccion-pie{margin-top:var(--space-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.seccion-pie p{font-size:15px}
@media (max-width:768px){.seccion{padding:var(--space-7) 0}.seccion-cabeza{margin-bottom:var(--space-6)}}

/* ── Tarjetas: superficie + borde superior amarillo de 6px; una por grupo puede ir en amarillo ── */
.rejilla{display:grid;gap:var(--space-5)}
.rejilla-2{grid-template-columns:repeat(2,1fr)}
.rejilla-3{grid-template-columns:repeat(3,1fr)}
.rejilla-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.rejilla-3,.rejilla-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.rejilla-2,.rejilla-3,.rejilla-4{grid-template-columns:1fr}}
.tarjeta{background:var(--superficie);border-top:6px solid var(--marca);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.seccion-alt .tarjeta{background:var(--fondo)}
.tarjeta p{font-size:15px;line-height:24px}
.tarjeta .icono{color:var(--texto);line-height:0;margin-bottom:var(--space-2)}
.tarjeta .icono svg{width:24px;height:24px}
.tarjeta .etiqueta{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--marca-texto)}
.tarjeta .lista{display:flex;flex-direction:column;gap:var(--space-2);margin:var(--space-2) 0 var(--space-4)}
.tarjeta .lista li{display:flex;gap:var(--space-2);font-size:15px;line-height:22px;color:var(--texto)}
.tarjeta .lista li::before{content:"✓";font-weight:700;color:var(--marca-texto);min-width:14px}
.tarjeta .btn{margin-top:auto;align-self:flex-start}
.tarjeta-destacada{background:var(--marca)!important;border-top-color:var(--sobre-marca)}
.tarjeta-destacada p,.tarjeta-destacada h3,.tarjeta-destacada .etiqueta,.tarjeta-destacada .lista li,.tarjeta-destacada .lista li::before{color:var(--sobre-marca)}
.tarjeta-destacada .btn-primario{background:var(--sobre-marca);color:var(--blanco)}
.cifra{font-family:var(--font-display);font-stretch:125%;font-weight:900;font-size:30px;line-height:1;color:var(--texto)}

/* ── Cifras de la portada ── */
.cifras{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-5)}
.cifras div{border-top:4px solid var(--texto);padding-top:var(--space-2);min-width:120px}
.cifras .num{display:block;font-family:var(--font-display);font-stretch:125%;font-weight:900;font-size:30px;line-height:1.1}
.cifras .rotulo{font-size:13px;color:var(--texto-suave)}

/* ── Pasos: línea amarilla arriba y número en mono ── */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.paso{border-top:4px solid var(--marca);padding-top:var(--space-4)}
.paso .n{display:block;font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--marca-texto);margin-bottom:var(--space-2)}
.paso h3{margin-bottom:var(--space-2)}
.paso p{font-size:15px;line-height:24px}
@media (max-width:900px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pasos{grid-template-columns:1fr;gap:var(--space-5)}}

/* ── Tabla comparativa: columna SuperComp en amarillo ── */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:6px solid var(--marca);border-radius:var(--radius-lg)}
.tabla{width:100%;min-width:720px;border-collapse:collapse;background:var(--fondo)}
.tabla th,.tabla td{padding:var(--space-4);text-align:left;vertical-align:top;font-size:15px;line-height:22px;border-bottom:1px solid var(--borde)}
.tabla thead th{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);background:var(--superficie)}
.tabla td:first-child{font-weight:700;color:var(--texto)}
.tabla td{color:var(--texto-suave)}
.tabla .col-sc{background:var(--marca);color:var(--sobre-marca);font-weight:700}
.tabla thead .col-sc{color:var(--sobre-marca);background:var(--marca)}
/* Bajo 768px: una tarjeta por criterio, SuperComp primero y en amarillo; sin scroll horizontal */
@media (max-width:767px){
  .tabla-wrap{overflow:visible;border-top:0}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;min-width:0;width:100%}
  .tabla{background:transparent}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla tr{display:flex;flex-direction:column;background:var(--superficie);border-top:6px solid var(--marca);border-radius:var(--radius-lg);margin-bottom:var(--space-4);overflow:hidden}
  .tabla td{border-bottom:0;padding:var(--space-2) var(--space-4)}
  .tabla td:first-child{order:-2;font-family:var(--font-display);font-size:18px;line-height:24px;padding-top:var(--space-4)}
  .tabla td.col-sc{order:-1;margin:var(--space-2) 0;padding:var(--space-3) var(--space-4)}
  .tabla td:nth-child(3){padding-bottom:var(--space-4)}
  .tabla td[data-label]::before{content:attr(data-label);display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:2px}
  .tabla td.col-sc[data-label]::before{color:var(--sobre-marca)}
}

/* ── Testimonios ── */
.testimonio{background:var(--superficie);border-top:6px solid var(--marca);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.seccion-alt .testimonio{background:var(--fondo)}
.testimonio blockquote{font-size:16px;line-height:26px;color:var(--texto)}
.testimonio figcaption{display:flex;align-items:center;gap:var(--space-3);margin-top:auto}
.testimonio .avatar{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--marca);color:var(--sobre-marca);font-family:var(--font-mono);font-weight:700;border-radius:var(--radius-lg)}
.testimonio .quien{display:block;font-weight:700;color:var(--texto);line-height:20px}
.testimonio .donde{display:block;font-size:14px;color:var(--texto-suave);line-height:20px}

/* ── Marcas ── */
.marcas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6) var(--space-7)}
.marcas img{height:32px;width:auto;object-fit:contain}
/* Logos blancos (pensados para fondo oscuro): en grafito sobre claro */
.marcas img.logo-blanco{filter:brightness(0);opacity:.85}
/* Grilla de logos: filas completas, misma altura visual (--h por logo), monocromo y color en hover */
.logos-grilla{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--space-6) var(--space-5);align-items:center;justify-items:center}
.logos-grilla img{height:calc(var(--h,40) * 1px);width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s ease,opacity .2s ease}
.logos-grilla img:hover{filter:none;opacity:1}
.logos-grilla img.logo-blanco,.logos-grilla img.logo-blanco:hover{filter:brightness(0);opacity:.8}
@media (max-width:640px){.logos-grilla{grid-template-columns:repeat(var(--cols-movil,2),minmax(0,1fr));gap:var(--space-5) var(--space-4)}.logos-grilla img{height:calc(var(--h,40) * .8px)}}
@media (max-width:640px){.marcas{gap:var(--space-5)}.marcas img{height:26px}}

/* ── Preguntas frecuentes (details/summary, sin JS) ── */
.faq{max-width:820px;display:flex;flex-direction:column;gap:var(--space-3)}
.faq details{background:var(--superficie);border-top:4px solid var(--marca);border-radius:var(--radius-lg)}
.seccion-alt .faq details{background:var(--fondo)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);font-weight:700;font-size:17px;line-height:24px;color:var(--texto)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-weight:700;font-size:20px;line-height:24px;color:var(--marca-texto)}
.faq details[open] summary::after{content:"–"}
.faq .resp{padding:0 var(--space-5) var(--space-5);font-size:15px;line-height:25px;color:var(--texto-suave)}

/* ── Llamado final: único bloque amarillo a pantalla completa ── */
.llamado{background:var(--marca);padding:var(--space-8) 0}
.llamado h2{color:var(--sobre-marca);font-size:clamp(26px,3.4vw,40px);max-width:22ch;margin-bottom:var(--space-4)}
.llamado p{color:var(--sobre-marca);font-size:17px;line-height:28px;max-width:40em;margin-bottom:var(--space-6)}
.llamado a{color:var(--sobre-marca);text-decoration-color:var(--sobre-marca)}

/* Formulario corto (#leadAltForm): misma estructura que antes, solo estilo */
.lead-alt{margin-top:var(--space-6);max-width:620px}
.lead-alt-linea{font-size:15px;line-height:24px;margin:0!important;color:var(--sobre-marca)}
.lead-alt-toggle{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--sobre-marca);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.lead-alt-panel{margin-top:var(--space-4);background:var(--fondo);border-radius:var(--radius-lg);padding:var(--space-5)}
.lead-alt-form{display:grid;gap:var(--space-3)}
.lead-alt-form label{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--texto)}
.lead-alt-form input,.lead-alt-form textarea{width:100%;padding:12px 14px;border:1px solid var(--borde-control);border-radius:var(--radius-md);font:inherit;font-weight:400;font-size:16px;color:var(--texto);background:var(--fondo)}
.lead-alt-form textarea{resize:vertical}
.lead-alt-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.lead-alt-enviar{justify-self:start;background:var(--accion);color:var(--sobre-accion);border:0;border-radius:var(--radius-md);padding:14px var(--space-5);font:inherit;font-weight:700;cursor:pointer}
.lead-alt-enviar:disabled{opacity:.6;cursor:wait}
.lead-alt-estado{margin-top:var(--space-3)!important;font-size:15px;font-weight:700}
.lead-alt-estado.ok{color:var(--exito)}
.lead-alt-estado.err{color:var(--error)}

/* ── Pie grafito ── */
.pie{background:var(--superficie-inversa);color:var(--grafito-300);padding:var(--space-7) 0 var(--space-5)}
.pie-fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:1px solid var(--grafito-600)}
.pie img{height:34px;width:auto}
.pie p,.pie span{color:var(--grafito-300);font-size:15px}
.pie a{color:var(--grafito-300)}
.pie-legal{padding-top:var(--space-4);font-size:14px}

/* ── Botón flotante de WhatsApp (verde de WhatsApp) ── */
.wa-float{position:fixed;bottom:20px;right:20px;z-index:999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1)}
.wa-float:hover{background:#1EBE5A}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float-label{position:fixed;bottom:32px;right:86px;z-index:999;background:var(--superficie-inversa);color:var(--grafito-50);font-size:14px;font-weight:700;padding:8px 12px;border-radius:var(--radius-md)}
@media (max-width:480px){.wa-float-label{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}