/* Base del documento.
   tokens.css define --font-sans pero nunca la aplica: cada pagina la fijaba
   en su propio contenedor, asi que todo lo que quedaba fuera de uno (el hero,
   por ejemplo) caia en la serif por defecto del navegador. Se declara una vez
   aqui y se hereda. Este archivo es nuestro: el tokens.css exportado por
   Claude Design no se toca. */
/* El ancho declarado incluye relleno y borde. Sin esto, un campo con
   width:100% y padding se desborda de su celda: en el formulario de contacto
   los campos median 281px dentro de celdas de 247 y se pisaban entre si.
   tokens.css no lo trae, asi que se declara aqui para todo el sitio. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light, 300);
  font-size: var(--fs-md, 16px);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ancho de contenido comun a todo el sitio.
   1265 px es el que usa hoy luminova.cl en una ventana de 1440: se conserva
   para que el traspaso no mueva la caja. Encabezado, pie y cuerpo comparten
   este contenedor, asi nada queda desalineado respecto del resto. */
:root {
  --ancho-contenido: 1265px;
  --margen-lateral: clamp(20px, 5vw, 40px);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* ---------------------------------------------------------------------------
   Composicion de titulos. Vivia dentro de la portada, con estilos de alcance
   local, asi que ninguna otra pagina la heredaba: las fichas de producto
   escribian t-seccion y salia texto sin formato. Al ser el sistema de titulos
   del sitio entero, va aqui.
   --------------------------------------------------------------------------- */
  .t-bajada {
    font-weight: 300; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
    color: var(--color-text-secondary); margin: 18px auto 0; max-width: 58ch;
  }
  .t-claim {
    margin: 28px auto 0; font-size: clamp(12px, 1vw, 14px); font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary);
  }
  /* Titular de seccion a dos pesos. La parte liviana en 200 y el enfasis en
     600: es el recurso que usa el sitio actual en casi todos sus titulos y lo
     que evita que se vean planos. Un solo peso, en una geometrica como Albert
     Sans, no arma jerarquia por si solo. */
  .t-seccion {
    font-weight: 200;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    letter-spacing: -.022em; line-height: 1.1;
    margin: 0 0 26px; max-width: 22ch;
    text-wrap: balance;
  }
  .t-seccion b { font-weight: 600; letter-spacing: -.025em; }
  /* Antetitulo con una marca delante: ancla la vista y dice donde empieza cada
     seccion sin recurrir a lineas divisorias.

     La marca es un PUNTO, el mismo punto de la firma luminova. Antes era un
     filete de 24x2: marketing pidio sacarlo de todo el sitio porque ese guion
     de color se lee como plantilla.

     La forma vive en estas tres variables y no en cada regla. El antetitulo
     esta repetido en nueve hojas de estilo distintas —cada pagina tiene la
     suya, y el CSS con alcance de Astro no deja compartir una clase— asi que
     sin variables cambiar el motivo obligaba a editar nueve sitios y a que
     alguno quedara atras. Con esto, el proximo cambio es aqui y nada mas. */
  :root {
    --eyebrow-ancho: 6px;
    --eyebrow-alto: 6px;
    --eyebrow-radio: 50%;
    --eyebrow-hueco: 10px;
  }
  .t-eyebrow {
    display: flex; align-items: center; gap: var(--eyebrow-hueco, 10px);
    font-size: 11px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 16px;
  }
  .t-eyebrow::before {
    content: '';
    width: var(--eyebrow-ancho, 6px); height: var(--eyebrow-alto, 6px);
    border-radius: var(--eyebrow-radio, 50%); flex: 0 0 auto;
    background: var(--color-primary);
  }
  /* Contenedor de icono, uno solo para todo el sitio.

     Estaba escrito tres veces —servicios de la portada, barra de garantias y
     pilares de la ficha— y las tres habian derivado: 48/62/46 px, radio 20px /
     50% / 8px, borde fuerte o tenue segun el caso, y el de garantias con el
     icono en negro mientras los otros dos iban en el acento. Al verlos
     seguidos no parecian del mismo sitio.

     Queda: circulo, borde gris claro, icono en el acento. */
  .ico-circulo {
    display: grid; place-items: center;
    width: 52px; height: 52px; flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-circle, 50%);
    color: var(--color-primary);
  }

  .t-micro {
    font-size: 11px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 12px;
  }
  .t-parrafo {
    font-weight: 300; font-size: var(--fs-md, 16px); line-height: 1.65;
    margin: 0 0 14px; max-width: 62ch; color: var(--color-text-secondary);
  }
  .t-parrafo a, .t-arroba { color: var(--color-primary); text-decoration: none; }
  .t-parrafo a:hover, .t-arroba:hover { text-decoration: underline; text-underline-offset: 3px; }