/* ============================================================
   TEMA PÚBLICO ICC — landing.html y legal.html
   Estas dos páginas son CLARAS a propósito (web pública) y así
   se quedan: solo se alinean acento, tipografía y radios con el
   panel. Si algún día queréis pasarlas a oscuro, se cambia solo
   el bloque :root de abajo.
   Cargar después del <style> de cada página.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --crema:#FAF7F3; --crema-2:#F1EBE3; --linea:#E7DED3;
  --tinta:#171310; --suave:#7C6E64;
  --terra:#E0672C;                 /* mismo naranja, un punto más oscuro para fondo claro */
  --ambar:#E0672C;
  --acento:linear-gradient(#E0672C,#E0672C);   /* sin degradado */
  --fuente:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

body{font-family:var(--fuente)!important;letter-spacing:-.005em;text-wrap:pretty}
h1,h2,h3{letter-spacing:-.03em}

/* etiquetas tipo "eyebrow" igual que en el panel */
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--terra)}

/* botones: naranja plano, texto claro; secundario contorneado.
   OJO: solo el PRIMARIO va relleno. `.btn` es la clase base de todos los
   botones de la landing (incluidos `btn-ghost` y `btn-dark`), así que se
   apunta al primario, no a `.btn` a secas. */
.a-terra,.btn-prim,.cta,button.prim{
  background:var(--terra)!important;background-image:none!important;
  color:#fff!important;box-shadow:none!important;border:0!important;
  border-radius:11px!important;font-weight:700;
}
.a-terra:hover,.btn-prim:hover,.cta:hover{filter:brightness(1.05)}

/* Secundarios (`btn-ghost`, `btn-dark`): la landing ya los tiene bien
   resueltos y viven sobre secciones claras Y oscuras, así que aquí solo se
   iguala el radio. Pintarles el color desde el tema los rompía en el hero
   oscuro (texto oscuro sobre fondo oscuro). */
.btn-ghost,.btn-dark{border-radius:11px!important;box-shadow:none!important}
.btn-ghost:hover{border-color:var(--terra)!important}

/* tarjetas y separadores */
.card,.step,.price,.box{border-radius:16px!important;border:1px solid var(--linea)!important;box-shadow:none!important}
.step .num{background:#fff;border:1px solid var(--linea);color:var(--terra);font-family:var(--mono);font-weight:500}
.price-band{background:var(--crema-2)}
.glifo{background:linear-gradient(150deg,#E0672C,#B8480F)!important;border-radius:9px;font-family:var(--mono)}

a{color:var(--terra)}
a:hover{color:#C4501E}
a.volver{font-weight:600}