/* Comparativas públicas (empieza.synaptechspa.cl/comparar/*). Misma paleta y tipografía que empieza.html: fondo verde noche, lima como único acento. Nada de color para "ganar" celdas: el lector compara solo. */ :root{ --lime:#cef07c; --green:#92c83a; --ink:#15240b; --bg-1:#0c1108; --bg-2:#101810; --soft:#7c8a6f; --rojo:#e0645c; } *{box-sizing:border-box;margin:0;padding:0} html,body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#fff;min-height:100dvh; background:radial-gradient(120% 80% at 50% 0%,#182a12 0%,var(--bg-2) 45%,var(--bg-1) 100%);} .wrap{max-width:900px;margin:0 auto;padding:28px 18px 60px} .volver{color:var(--soft);text-decoration:none;font-size:13px;font-weight:600} .volver:hover{color:#fff} .hero{margin-top:26px} .kicker{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);font-weight:800} h1{margin-top:12px;font-size:clamp(34px,6vw,56px);font-weight:900;letter-spacing:-1.5px;line-height:1.02} h1 .accent{color:var(--lime)} .lead{margin-top:14px;font-size:17px;line-height:1.5;color:#d9e2cf;max-width:640px} .lead b{color:#fff} /* Tabla */ .tabla{margin-top:32px;border:1px solid rgba(206,240,124,.25);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03)} .fila{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-top:1px solid rgba(255,255,255,.07)} .fila:first-child{border-top:0} .fila>div{padding:14px 14px;font-size:15px;line-height:1.3;font-weight:700} .fila>div:first-child{color:#aab6a0;font-weight:600;font-size:14px} .fila>div.a{border-left:1px solid rgba(255,255,255,.07);color:#f3d9d7} .fila>div.s{border-left:1px solid rgba(255,255,255,.07);color:#fff} .fila>div.s b{color:var(--lime)} .fila small{display:block;font-size:12px;color:var(--soft);font-weight:500;margin-top:3px;line-height:1.3} .cab{background:rgba(255,255,255,.04)} .cab>div{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800} .cab .a{color:var(--rojo)} .cab .s{color:var(--lime)} @media (max-width:560px){ .fila{grid-template-columns:1fr} .fila>div.a,.fila>div.s{border-left:0;border-top:1px dashed rgba(255,255,255,.08)} /* En móvil la tabla se apila y cada celda dice de quién es. El nombre del otro lo pone cada página en . */ .fila>div.a::before{content:var(--otro) " · ";color:var(--rojo);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .fila>div.s::before{content:"SynapTech · ";color:var(--lime);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .cab{display:none} } /* Dos cajas */ .dos{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:640px){.dos{grid-template-columns:1fr}} .caja{border-radius:18px;padding:20px;border:1px solid} .caja h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:10px} .caja p{font-size:15px;line-height:1.5;color:#e6ecdd} .caja p+p{margin-top:10px} .caja p b{color:#fff} .otros{border-color:rgba(224,100,92,.45);background:rgba(40,14,14,.35)} .otros h2{color:var(--rojo)} .aca{border-color:rgba(206,240,124,.5);background:rgba(20,34,12,.5)} .aca h2{color:var(--lime)} /* CTA */ .cta{margin-top:36px;text-align:center} .cta h2{font-size:clamp(24px,4.5vw,36px);font-weight:900;letter-spacing:-1px;line-height:1.05} .btn{display:inline-block;margin-top:18px;background:var(--lime);color:var(--ink);font-weight:900;padding:14px 22px;border-radius:14px;text-decoration:none;font-size:16px} .btn:hover{filter:brightness(1.05)} .mini{margin-top:12px;font-size:12px;color:var(--soft)} /* Fuentes */ .fuentes{margin-top:44px;border-top:1px solid rgba(255,255,255,.08);padding-top:18px} .fuentes h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);font-weight:800} .fuentes ul{margin-top:10px;padding-left:18px} .fuentes li{font-size:12.5px;line-height:1.55;color:#aab6a0;margin-top:8px} .fuentes li b{color:#d9e2cf}