/* =========================================================================
   base.css — Cimientos de la nueva web cuantic.es (reescritura limpia)
   Design tokens extraídos del sitio original (Elementor kit + tema Engitech).
   ========================================================================= */

:root {
  /* --- Paleta de marca (del kit global de Elementor) --- */
  --c-primary:        #142038;  /* azul marino — títulos, footer, header sólido */
  --c-secondary:      #009ad9;  /* cian corporativo — acentos, enlaces, botones */
  --c-secondary-dark: #0080b5;  /* hover del cian */
  --c-ink:            #1d2433;  /* texto principal */
  --c-muted:          #4d4d4d;  /* texto secundario */
  --c-muted-2:        #6d6d6d;  /* texto terciario / pies */
  --c-line:           #e6e9ef;  /* bordes y separadores */
  --c-bg:             #ffffff;
  --c-bg-soft:        #f5f7fa;  /* secciones alternas */
  --c-white:          #ffffff;

  /* --- Tipografía --- */
  --font-base: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 960px;
  --gutter: 24px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 10px 30px rgba(20, 32, 56, .08);
  --shadow-lg: 0 20px 50px rgba(20, 32, 56, .12);

  /* --- Transiciones --- */
  --t-fast: .2s ease;
  --t: .3s ease;

  /* --- ENC-NUE-34 · TEXTURA DE LOS FONDOS CLAROS -----------------------
     (sustituye a la rejilla técnica de ENC-NUE-24 y al micropunteado que
     estrenaron precios y contacto en ENC-NUE-31/32)

     Naiara: cualquier patrón REPETIDO —cuadrícula o punteado— resulta
     rígido sobre los fondos claros, compite con textos e iconos y cansa la
     vista. En su lugar, un MESH GRADIENT: el fondo se queda liso y solo lo
     rompen unos halos de luz muy difusos en el azul corporativo, situados
     en las esquinas para dar profundidad SIN una sola línea dura.

     Contrato de consumo (idéntico al anterior, no hay que tocar a quien la
     usa):
       background-image: var(--trama);
       background-size: var(--trama-paso) var(--trama-paso);
     `--trama-paso: 100%` hace que los halos se escalen a la caja en vez de
     mosaiquearse, así que NO hay repetición ni costuras. Los halos llevan
     medidas en píxeles: en una sección corta ocupan casi todo el bloque y
     en un lienzo largo (`#contenido`) quedan como destellos de esquina.

     Nota: el color final de cada parada se declara con alfa 0 explícito
     (y no `transparent`) para que la interpolación no pase por el negro y
     ensucie el halo de gris.

     --- ENC-NUE-41 · SUBIDA DE NOTORIEDAD -------------------------------
     Naiara: «no se visualizan las líneas ni los destellos, será necesario
     que sean más notorios». En efecto, los halos al 6-10 % de alfa se
     perdían sobre el blanco y en el fondo claro no quedaba ninguna línea.
     Se refuerza la textura SIN volver al patrón repetido que ella misma
     rechazó (nada de cuadrícula ni de punteado):
       · DESTELLOS — los halos duplican alfa y se concentran (paradas más
         cerradas), así que se leen como focos de luz, no como una veladura.
       · LÍNEAS — trazos finos y LARGOS, escalados a la caja (`--trama-paso:
         100%`, una sola tesela ⇒ NO se repiten ni mosaiquean). Van en dos
         familias de inclinaciones distintas y con separaciones irregulares
         para que lean como una firma técnica y no como una rejilla. */
  --trama-tinta: 0, 154, 217;   /* cian corporativo — tinta de los halos */
  --trama-paso:  100%;
  --trama-linea: rgba(0, 154, 217, .30);   /* tinta de los trazos */
  --trama:
    /* trazos diagonales (3 + 2) */
    linear-gradient(112deg,
      rgba(0,154,217,0) calc(17% - 1px), var(--trama-linea) calc(17% - 1px),
      var(--trama-linea) calc(17% + 1px), rgba(0,154,217,0) calc(17% + 1px),
      rgba(0,154,217,0) calc(43% - 1px), var(--trama-linea) calc(43% - 1px),
      var(--trama-linea) calc(43% + 1px), rgba(0,154,217,0) calc(43% + 1px),
      rgba(0,154,217,0) calc(81% - 1px), var(--trama-linea) calc(81% - 1px),
      var(--trama-linea) calc(81% + 1px), rgba(0,154,217,0) calc(81% + 1px)),
    linear-gradient(-64deg,
      rgba(0,154,217,0) calc(29% - 1px), var(--trama-linea) calc(29% - 1px),
      var(--trama-linea) calc(29% + 1px), rgba(0,154,217,0) calc(29% + 1px),
      rgba(0,154,217,0) calc(67% - 1px), var(--trama-linea) calc(67% - 1px),
      var(--trama-linea) calc(67% + 1px), rgba(0,154,217,0) calc(67% + 1px)),
    /* destellos */
    radial-gradient(520px 380px at 8%  4%,   rgba(0, 154, 217, .22), rgba(0, 154, 217, 0) 60%),
    radial-gradient(460px 340px at 94% 22%,  rgba(0, 154, 217, .18), rgba(0, 154, 217, 0) 58%),
    radial-gradient(600px 420px at 78% 97%,  rgba(20,  32, 56, .12), rgba(20,  32, 56, 0) 62%),
    radial-gradient(360px 300px at 38% 58%,  rgba(0, 154, 217, .11), rgba(0, 154, 217, 0) 60%);
}

/* En cualquier tema oscuro los halos suben de temperatura (cian claro) y de
   alfa para seguir leyéndose sobre la superficie marina. OJO: hay que
   redefinir --trama ENTERA, no solo la tinta — las custom properties se
   sustituyen al computar la variable en el elemento donde se declara (aquí
   :root), de modo que cambiar --trama-tinta más abajo en el árbol NO
   repinta --trama. */
.v3-dark, .h2-dark, .p3-dark {
  --trama-tinta: 69, 194, 240;
  --trama-linea: rgba(69, 194, 240, .22);
  --trama:
    linear-gradient(112deg,
      rgba(69,194,240,0) calc(17% - 1px), var(--trama-linea) calc(17% - 1px),
      var(--trama-linea) calc(17% + 1px), rgba(69,194,240,0) calc(17% + 1px),
      rgba(69,194,240,0) calc(43% - 1px), var(--trama-linea) calc(43% - 1px),
      var(--trama-linea) calc(43% + 1px), rgba(69,194,240,0) calc(43% + 1px),
      rgba(69,194,240,0) calc(81% - 1px), var(--trama-linea) calc(81% - 1px),
      var(--trama-linea) calc(81% + 1px), rgba(69,194,240,0) calc(81% + 1px)),
    linear-gradient(-64deg,
      rgba(69,194,240,0) calc(29% - 1px), var(--trama-linea) calc(29% - 1px),
      var(--trama-linea) calc(29% + 1px), rgba(69,194,240,0) calc(29% + 1px),
      rgba(69,194,240,0) calc(67% - 1px), var(--trama-linea) calc(67% - 1px),
      var(--trama-linea) calc(67% + 1px), rgba(69,194,240,0) calc(67% + 1px)),
    radial-gradient(520px 380px at 8%  4%,   rgba(69, 194, 240, .20), rgba(69, 194, 240, 0) 60%),
    radial-gradient(460px 340px at 94% 22%,  rgba(0,  154, 217, .19), rgba(0,  154, 217, 0) 58%),
    radial-gradient(600px 420px at 78% 97%,  rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 62%),
    radial-gradient(360px 300px at 38% 58%,  rgba(69, 194, 240, .10), rgba(69, 194, 240, 0) 60%);
}

/* --- Reset moderno --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  font-weight: var(--fw-normal);
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-muted);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--c-secondary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-secondary-dark); }
ul, ol { list-style: none; padding: 0; }

/* --- Títulos --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  color: var(--c-primary);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
}
h1 { font-size: clamp(2.2rem, 4vw, 3.25rem); font-weight: var(--fw-bold); }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
p { margin: 0 0 1rem; }
strong, b { font-weight: var(--fw-semibold); }

/* --- Contenedor --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* --- Utilidades base --- */
.text-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.section { padding-block: clamp(48px, 7vw, 96px); }
/* ENC-NUE-24/34 · las secciones "soft" llevan la textura global de fondos claros */
.section--soft {
  background-color: var(--c-bg-soft);
  background-image: var(--trama);
  background-size: var(--trama-paso) var(--trama-paso);
}
.section--dark { background: var(--c-primary); color: rgba(255,255,255,.8); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--c-white); }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.8em;
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  border-radius: var(--radius);
  transition: all var(--t-fast);
  text-align: center;
  white-space: nowrap;
}
.btn--primary { background: var(--c-secondary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-secondary-dark); color: var(--c-white); transform: translateY(-2px); }
.btn--ghost { border: 2px solid currentColor; color: var(--c-white); }
.btn--ghost:hover { background: var(--c-white); color: var(--c-primary); }
.btn--dark { background: var(--c-primary); color: var(--c-white); }
.btn--dark:hover { background: #0d1626; color: var(--c-white); }