/* tokens.css — ÚNICO archivo del proyecto con valores hex, px o ms sueltos.
   Ningún archivo posterior de la cascada redefine un token.
   Si necesitas un color nuevo, se agrega AQUÍ, nunca en el componente.
   Fuente: docs/03-design-tokens.md */

:root {

  /* ---- Paleta PETRÓLEO (2026-08-14) ----
     Dirección cromática de laboratorio: teal petróleo en vez del azul cielo.
     Los nombres son semánticos, así que cambiar de paleta sigue siendo tocar
     solo este bloque.

     El acento CLARO se usa como relleno con texto --tinta encima y como
     acento sobre fondos oscuros; --acento-hondo es el mismo azul hundido,
     para lo que va sobre fondo claro (un tono claro sobre blanco no llega
     al 3:1 que piden los elementos no textuales). */
  --acento:         #90D5FF;   /* azul claro: relleno de botón, acento en oscuro */
  --acento-fuerte:  #63C1F5;   /* hover del relleno */
  --acento-hondo:   #00546E;   /* petróleo: bordes, foco y enlaces sobre claro */
  --tinta:          #05303F;   /* todo el texto: petróleo casi negro */
  --tinta-suave:    #2F6273;   /* párrafos secundarios y captions.
                                  6.7:1 sobre blanco y 6.0:1 sobre hueso-hondo,
                                  medidos. El #4C8799 anterior daba 4.0:1 y
                                  reprobaba AA en el 80% del texto del sitio. */
  --linea-oscura:   rgb(255 255 255 / 0.2);   /* divisorias sobre --acero: cualquier
                                  petróleo se hunde en el fondo (1.8:1), y un blanco
                                  translúcido se ve igual de bien caiga donde caiga */
  --hueso:          #F2F6F8;   /* fondo de página (el de la referencia) */
  --hueso-hondo:    #E5EEF0;   /* secciones alternas, bordes de tarjeta */
  --acero:          #003B4D;   /* footer y bloques oscuros */
  --blanco:         #FFFFFF;   /* superficie de tarjetas únicamente */

  /* Único color fuera de la paleta de marca: los errores del formulario.
     Se eligió por contraste, no por estética — 5.9:1 sobre blanco y 5.4:1
     sobre hueso, ambos AA. El error nunca se comunica solo con color: siempre
     lleva además texto y aria-invalid. */
  --rojo-error:   #B3261E;

  /* ---- Tipografía ---- */
  --fuente-display:  "Viga", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-cuerpo:   "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-utilidad: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --txt-xs:   0.75rem;
  --txt-sm:   0.875rem;
  --txt-base: 1rem;
  --txt-lg:   clamp(1.05rem, 1rem + 0.3vw, 1.125rem);
  --txt-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);      /* h3: 24px arriba */
  --txt-2xl:  clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);      /* h2: 36px arriba */
  --txt-3xl:  clamp(2rem, 1.35rem + 2.9vw, 3rem);           /* h1: 48px arriba */

  --alto-display: 1.3;       /* Viga pide aire; Anton pedía lo contrario */
  --alto-cuerpo:  1.6;
  --alto-lead:    1.85;      /* el del cuerpo de la referencia */
  --medida:       62ch;      /* ancho máximo de párrafo */

  /* ---- Espaciado (escala de 4) ---- */
  --e-1:  0.25rem;  --e-2:  0.5rem;  --e-3:  0.75rem;  --e-4:  1rem;
  --e-6:  1.5rem;   --e-8:  2rem;    --e-12: 3rem;     --e-16: 4rem;
  --e-24: 6rem;     --e-32: 8rem;

  --pad-seccion: clamp(3.5rem, 8vw, 7rem);
  --contenedor:  1180px;
  --canal:       2.5rem;     /* margen lateral del contenedor */

  /* ---- Forma ---- */
  --radio-tarjeta: 8px;
  --radio-img:     8px;
  --radio-btn:     8px;    /* rectangular, como el de la referencia */
  --borde:         1px solid var(--hueso-hondo);

  /* Única sombra permitida: tarjeta activa del carrusel y barra flotante mobile.
     Las tarjetas se separan por BORDE, no por sombra. */
  --sombra-flotante: 0 12px 32px -12px rgba(0, 59, 77, 0.28);

  /* ---- Movimiento ---- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-rapida: 180ms;
  --dur-media:  320ms;
  --dur-lenta:  520ms;

  /* ---- Carrusel ----
     La profundidad es 3D real: las vecinas se van hacia atrás en el eje Z y
     giran sobre Y, como un mazo de tarjetas. js/ui/carrusel.js LEE estos cuatro
     valores con getComputedStyle y se los pasa al core, así que se ajusta el
     efecto desde aquí y no hay números de diseño escondidos en el JS. */
  --gap-carrusel:    16px;
  --ancho-tarjeta:   86vw;   /* base: se ve el filo de la siguiente */
  --escala-vecina:   0.94;
  --opacidad-vecina: 0.55;
  --perspectiva:     1200px; /* menor = más dramático. Ojo: deforma los bordes. */
  --z-vecina:        180px;  /* cuánto se hunde la vecina hacia atrás */
  --giro-vecina:     18deg;  /* cuánto gira sobre su propio eje vertical */

  /* ---- Anillo (modo carrusel circular) ----
     Las tarjetas se reparten en círculo y el aro gira sobre Y. Van VACÍAS: son
     formas, no contenido — el texto de la línea activa se lee en el panel de al
     lado. El radio no es un token: lo calcula el core con trigonometría a partir
     del ancho de tarjeta y de cuántas hay (js/core/carrusel-estado.js). */
  /* El aro pide su propia perspectiva, más corta que la del mazo: con la del
     mazo (1200–2000px) el círculo se aplana y se lee como biombo. */
  --perspectiva-anillo:   1500px;

  /* La tarjeta es la IMAGEN, horizontal. El texto va suelto debajo, flotando
     sobre el fondo: no lleva caja, ni borde, ni relleno propio. */
  --ancho-tarjeta-anillo:  min(58vw, 230px);
  --proporcion-tarjeta:    16 / 10;  /* apaisada, como la referencia */
  --hueco-texto-anillo:    var(--e-4);
  --alto-tarjeta-anillo:   min(38vw, 150px);
  /* NEGATIVA a propósito: encoge el radio y hace que las tarjetas se solapen,
     que es como se ve en la referencia — una banda continua, no seis tarjetas
     sueltas con hueco entre ellas. Es el mismo cálculo de la apotema: si el
     "lado" del polígono mide menos que la tarjeta, el aro se cierra. */
  /* POSITIVA y pequeña: en la referencia las tarjetas no se tocan, se ve un
     hilo de fondo entre ellas. Con valores negativos se fundían en una masa. */
  --separacion-anillo:     30px;
  /* Círculo CERRADO. Con 6 tarjetas es un hexágono: frente, dos laterales a
     ±60° y dos DORSOS visibles a ±120° — cinco piezas en cuadro, que es
     exactamente lo que se ve en la referencia. La de 180° queda tapada por la
     del frente. Los dorsos existen gracias al ::before de la tarjeta. */
  --apertura-anillo:       360deg;
  --opacidad-fondo-anillo: 0.45;   /* los dorsos deben verse, como en la referencia */
  /* Holgura generosa: con el eje inclinado el aro sobresale por arriba y
     `overflow: clip` le cortaba la cabeza. */
  --altura-escena-anillo:  calc(var(--alto-tarjeta-anillo) + var(--e-24));

  /* El aro no se mira de frente: se ladea un poco a la izquierda para que se
     lea como volumen y no como una tarjeta plana con dos aletas. */
  --giro-base-anillo:      -4deg;
  /* El aro se ve desde un poco por encima: el eje de giro va inclinado, así la
     fila de atrás cae y la de delante sube. Es lo que le da el aire de objeto
     apoyado en vez de recorte plano. */
  /* Justa para que el aro SE VEA formarse: los dorsos de atrás proyectan a la
     misma X que las tarjetas laterales, y sin inclinación quedan escondidos
     detrás. Al inclinar el eje, la parte trasera del aro SUBE y asoma por
     encima — que es como en la referencia se nota el círculo completo. */
  --inclinacion-x-anillo:  7deg;
  /* Bancada de la banda entera (rotateZ): negativo = el lado izquierdo cae y
     el derecho sube, como en la referencia. Es lo que hace que se lea como un
     objeto flotando y no como una tira pegada al suelo. */
  --ladeo-anillo:          -3deg;
  /* Cuánto se comba cada tarjeta sobre sí misma (rebanadas verticales).
     Solo es respaldo: en marcha la curva se calcula del radio real del aro. */
  --curva-tarjeta:         16deg;

  /* Tarjeta blanca mate: sombra ancha y suave sobre el fondo, y un desenfoque
     leve en las que no están al frente para el enfoque selectivo. */
  --sombra-anillo:      0 30px 60px -24px rgb(0 0 0 / 0.55);
  --desenfoque-anillo:  1.6px;
  --escala-frente:      1;
  --escala-fondo:       0.9;
  --trama-fondo:        0.055;   /* opacidad de las ondas de contorno */
  --grosor-onda:        1.5px;   /* grosor de la línea de contorno */
  --paso-onda:          74px;    /* distancia entre curvas de nivel.
                                    Por debajo de ~70px las curvas se cruzan
                                    entre sí y hacen moiré en las esquinas. */
  --brillo-fondo:       0.18;    /* fuerza del foco de luz tras el aro */
  --vineta-fondo:       0.34;    /* oscurecido de los bordes: la franja de
                                    arriba ya aporta lo suyo y sumadas las dos
                                    se comían la separación entre aro y fondo */
  --deriva-ondas:       48s;     /* vuelta completa del vaivén de las ondas */

  /* ---- Color de fondo por línea ----
     La sección del aro cambia de color según la tarjeta que esté al frente.
     js/ui/carrusel.js lee --color-linea-<id> por el data-id de la tarjeta y lo
     vuelca en --fondo-lineas, que es lo que pinta la sección.

     Los seis son OSCUROS a propósito: encima va texto blanco, y con un fondo
     claro el contraste dependería del tono y habría que revisarlo uno por uno.
     Así los seis pasan AA de sobra con --hueso encima. Se quedan en la familia
     verde/tierra de la marca: nada de azules ni rosas de fantasía. */
  --color-linea-capsulas:   #00546E;   /* petróleo, el de la casa */
  --color-linea-fibras:     #0A4B5E;   /* petróleo hundido */
  --color-linea-vitaminas:  #10586B;   /* petróleo abierto */
  --color-linea-herbolaria: #06414F;   /* casi tinta */
  --color-linea-liquidos:   #12617A;   /* el más luminoso */
  --color-linea-topicos:    #1A4E5C;   /* petróleo apagado */
  --fondo-lineas:           var(--color-linea-capsulas);

  /* ---- Foco ---- */
  /* Velo sobre foto y video: antes eran tres rgb(12 27 46 / …) hardcodeados,
     un azul marino que no existe en la paleta petróleo. */
  /* Mosaico de contacto: los tres azules de la referencia, de claro a hondo */
  --mosaico-1: #D9E6EA;
  --mosaico-2: #C2D8DF;

  --velo-oscuro:       rgb(0 24 33 / 0.92);
  --velo-oscuro-suave: rgb(0 24 33 / 0.55);
  --velo-oscuro-tenue: rgb(0 24 33 / 0.25);

  --target-tactil: 2.75rem;   /* 44px: piso de cualquier cosa que se toque */

  --grosor-foco: 2px;
  --offset-foco: 3px;

  /* ---- Intro ---- */
  --fondo-intro: #003B4D;  /* petróleo profundo: el blanco encima da 13.1:1 y
                              enlaza con el petróleo del aro que hay debajo.
                              Antes era #B2CBD3 con texto blanco: 1.70:1. */

  /* ---- Capas ---- */
  --z-header:   100;
  --z-flotante: 90;
  --z-menu:     110;
  --z-intro:    200;       /* la cortinilla tapa hasta el menú */
}

@media (min-width: 768px) {
  :root {
    --ancho-tarjeta: calc((100% - var(--gap-carrusel)) / 2);
  }
}

@media (min-width: 1024px) {
  :root {
    --ancho-tarjeta: calc((100% - 2 * var(--gap-carrusel)) / 3);

    /* Con 3 tarjetas a la vista el efecto se acumula: mismo giro que en móvil
       se lee como abanico de feria. Se suaviza y se aleja el punto de fuga. */
    --perspectiva: 2000px;
    --z-vecina:    140px;
    --giro-vecina: 11deg;

    /* El aro sí crece en escritorio: hay sitio de sobra y gana presencia. */
    /* En escritorio la referencia es casi un hero: la tarjeta del frente llena
       la pantalla y las vecinas apenas asoman por los bordes. El texto va
       ENCIMA de la tarjeta (abajo-izquierda), no debajo. */
    /* Un paso atrás: con 78vw la tarjeta del frente se salía de la vista y la
       foto nunca se veía completa. A 64vw entra entera, con las vecinas
       asomando a los lados. */
    --ancho-tarjeta-anillo: min(58vw, 880px);
    --alto-tarjeta-anillo:  min(36vw, 550px);
    --perspectiva-anillo:   2400px;
    --altura-escena-anillo: calc(var(--alto-tarjeta-anillo) + var(--e-16));
    --separacion-anillo:    72px;   /* hueco visible entre tarjetas */
  }
}