/*
 * tokens.css — variables del proyecto gyoestudio
 * Fuente: CLAUDE.md §3 (paleta, escala de espaciado) + _dev/plan-segmentacion.md §5/§6.
 * Todo en px, nunca rem/em (CLAUDE.md §3). No se agrega ninguna variable que no venga de una
 * medida real del PDF o de un token ya confirmado.
 */

:root {
  /* --- Color (CLAUDE.md §3, definitivo) --- */
  --color-beige: #ECE3D8;
  --color-cafe-claro: #A17A4B;
  --color-negro-fondos: #1D1D1D;
  --color-gris-footer: #727272;
  --color-gris-bajadas: #A3A3A3;

  /* Token nuevo, resuelto P4 (plan-segmentacion.md §5): estados inactivos/apagados,
     distinto de --color-gris-bajadas aunque visualmente cercano. */
  --color-gris-inactivo: #959595;

  /* Negro de texto sobre fondo claro. No estaba en la paleta de coloresg&o.txt porque esa paleta
     solo lista colores "de marca"; el negro de texto/heading es #000000 puro en las 7 páginas
     (plan-segmentacion.md §5, tabla de colores fuera de los 5 tokens). Se registra aquí como
     token de trabajo para no repetir el literal. */
  --color-negro-texto: #000000;

  /* --- Tipografía --- */
  --font-raleway: 'Raleway', sans-serif;

  /* --- Espaciado: escala fija 1–5, igual a Bootstrap en px (CLAUDE.md §3) --- */
  --gyo-space-1: 4px;
  --gyo-space-2: 8px;
  --gyo-space-3: 16px;
  --gyo-space-4: 24px;
  --gyo-space-5: 48px;

  /* --- Contenedor de referencia (P0, plan-segmentacion.md §7) ---
     Ancho de diseño ~1920px del PDF, usado como max-width, sin reescalar a los breakpoints. */
  --gyo-container-max-width: 1920px;

  /* Margen lateral del contenedor. Medido en topbar/nav de `inicio`: contenido arranca en
     x=93.5–94 y termina en x=1830 (margen derecho 1924-1830=94) — consistente en ambos lados.
     El footer medía 82px en el mismo lugar (rect del logo y de las 3 columnas); se trata como
     tolerancia de exportación de Figma, igual que el criterio ya usado en P15/P22, y se
     normaliza al valor que se repite en más secciones (94px). Registrado 2026-08-14 —
     ver _dev/registro-decisiones.md. */
  --gyo-margen-contenido-1: 94px;

  /* --- Fase 3 (2026-08-18): tipografía fluida con piso mínimo ---
     `clamp(FLOOR, calc(intercepto + pendiente·vw), REF)` interpola linealmente entre el ancho de
     referencia del PDF (1920px, donde el valor es exacto — REF) y 375px (el breakpoint más
     angosto confirmado, donde el texto no baja de FLOOR aunque el viewport siga angostándose).
     El PDF no define ningún tamaño para mobile (nunca se dibujó ahí, CLAUDE.md §0) — FLOOR es
     una decisión de Fase 3, no una medida vinculante al píxel. Roles que ya son chicos en el
     ancho de referencia (nav, footer, botones, checklist, captions, ≤22px) no llevan clamp: ya
     están en o cerca de su piso legible, escalarlos más los volvería ilegibles — se documentan
     igual en `_dev/plan-segmentacion.md` con FLOOR = valor actual (sin cambio). */
  --gyo-font-size-h2: clamp(28px, calc(23.15px + 1.29vw), 48px);              /* 48→28 */
  --gyo-font-size-cta-titulo: clamp(36px, calc(27.75px + 2.20vw), 70px);      /* 70→36 */
  --gyo-font-size-cta-parrafo: clamp(18px, calc(16.06px + 0.52vw), 26px);     /* 26→18 */
  --gyo-font-size-stat-numero: clamp(40px, calc(31.26px + 2.33vw), 76px);     /* 76→40 */
  --gyo-font-size-eyebrow: clamp(16px, calc(14.06px + 0.52vw), 24px);         /* 24→16 */
  --gyo-font-size-eyebrow-hero: clamp(17px, calc(14.82px + 0.58vw), 26px);    /* 26→17 */
  --gyo-font-size-parrafo: clamp(16px, calc(14.54px + 0.39vw), 22px);        /* 22→16 */

  /* --- Header/topbar (medidas exactas del rect vectorial de `inicio`, ver
     _dev/plan-segmentacion.md §1.1 y registro-decisiones.md 2026-08-14) --- */
  --gyo-topbar-height-1: 55px;                 /* rect [1,0,1924,55] */
  --gyo-topbar-gap-icono-texto-1: 14px;        /* gap medido 13.5px, icono→texto en topbar */
  --gyo-header-gap-topbar-nav-6: 36px;         /* banda blanca entre topbar y la barra oscura de nav — hallazgo nuevo, ver nota abajo */
  --gyo-header-height-9: 202px;                /* alto de la barra oscura de nav, ya en la tabla de §6 */
  --gyo-header-total-height-9: 293px;          /* topbar + banda blanca + barra de nav, y=0→293 */
  --gyo-nav-link-gap-6: 36px;                  /* gap entre links del nav en el dropdown mobile (≤1329.98px) — ajuste de criterio propio 2026-08-19, no vinculante al píxel (ese rango no está dibujado en el PDF, CLAUDE.md §0) */
  --gyo-nav-link-gap-7: 60px;                  /* gap entre links del nav en el ancho de referencia (desktop, fila horizontal), medido 58.2–60.3px, normalizado a 60 — vinculante al píxel */
  --gyo-nav-padding-inline-6: 38px;            /* padding interno de la barra oscura de nav (logo/links/botón vs. el borde de la barra) — medido 37–38.8px */
  --gyo-nav-indicador-width-1: 17px;           /* guion indicador de página activa */
  --gyo-nav-indicador-height-1: 3px;
  --gyo-boton-height-5: 48px;                  /* alto de botones, calza con índice 5 (plan-segmentacion §6) */

  /* --- Footer --- */
  --gyo-footer-height-1: 572px;                /* rect [0,5183,1923,5755] */

  /* --- Tipografía, tamaños medidos por span (Type3, tamaño de fuente sí es fiable; el color no,
     ver nota en registro-decisiones.md sobre la "trampa del glyph-fill") --- */
  --gyo-font-size-topbar: 18px;
  --gyo-font-size-nav: 22px;
  --gyo-font-size-footer-heading: 21px;
  --gyo-font-size-footer-body: 21px;
  --gyo-font-size-h1-inicio: clamp(40px, calc(30.29px + 2.59vw), 80px); /* 80→40, ver nota Fase 3 arriba.
    Nombre histórico ("h1-inicio"): también lo usa `.gyo-hero-interior__titulo` en las 6 páginas
    interiores (mismo tamaño exacto en el ancho de referencia, ver hero-interior.css) — no se
    renombró para no tocar los 7 usos del token sin necesidad real. */
  --gyo-font-size-parrafo-hero: clamp(16px, calc(14.30px + 0.45vw), 23px); /* 23→16, ver nota Fase 3 arriba */

  /* --- hero-inicio: geometría exacta (registro-decisiones.md, 2026-08-14) --- */
  --gyo-hero-inicio-height-9: 955px;         /* alto de la imagen de fondo, y55→1010 */
  --gyo-hero-inicio-headline-top-6: 374px;   /* offset del H1 desde el borde superior del hero */
  --gyo-hero-inicio-parrafo-top-6: 629px;
  --gyo-hero-inicio-boton-top-6: 799px;
  --gyo-hero-inicio-dots-top-6: 899px;

  /* --- tarjeta-proyecto (plan-segmentacion.md §2.6, normalizado por P15) --- */
  --gyo-tarjeta-proyecto-height-9: 690px;
  --gyo-tarjeta-proyecto-gap-6: 50px;
  --gyo-tarjeta-proyecto-divider-1: 466px;

  /* --- tarjeta-servicio-numerada (plan-segmentacion.md §2.9, `servicios`) — medido directo
     2026-08-17 sobre el render de página 3, con barrido de píxel (no bbox de imagen, que en
     esta página resultó no fiable — ver nota en registro-decisiones.md sobre la corrección
     de P14). Las 4 fotos miden 763×477px exactas, idénticas entre las 4 tarjetas. */
  --gyo-tarjeta-servicio-imagen-w-9: 763px;
  --gyo-tarjeta-servicio-imagen-h-9: 477px;
  --gyo-tarjeta-servicio-gap-6: 100px;          /* gap horizontal imagen↔texto, medido ~100-102px */
  --gyo-tarjeta-servicio-padding-top-6: 136px;  /* offset superior de la fila, medido 129-148px según tarjeta, normalizado */
  --gyo-tarjeta-servicio-numero-titulo-gap-4: 26px; /* "01" → título, medido 23.5-27.6px */
  --gyo-tarjeta-servicio-titulo-parrafo-gap-4: 43px; /* título → párrafo, medido 42-44.2px */
}

/* --- Fase 3 (2026-08-18): margen del container, responsive con piso mínimo ---
   `--gyo-margen-contenido-1` (94px) es fijo desde Fase 2 porque hasta ahora solo importaba en
   anchos de escritorio reales, donde 94px es una fracción chica del viewport. A 375/768px deja de
   serlo: a 375px, 94px por lado (188px totales) son más de la mitad del ancho de pantalla — ni el
   logo del nav entra. El PDF no define un margen para estos anchos (nunca se dibujó ahí,
   CLAUDE.md §0) — valores de decisión de Fase 3, no medidas vinculantes al píxel. Un solo
   mecanismo (la misma variable), pisos distintos por breakpoint en vez de una segunda variable de
   margen en paralelo (CLAUDE.md §2). Breakpoints propios (no los de Bootstrap): coinciden con los
   dos anchos de verificación confirmados (768/375, CLAUDE.md §4), no con `md`/`sm` del grid. */
@media (max-width: 991.98px) {
  :root {
    --gyo-margen-contenido-1: 32px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --gyo-margen-contenido-1: 20px;
  }
}