/* =========================================================
   DESIGN TOKENS — LedLab
   Parámetros definidos por Mateo (27/08). La escala tipográfica
   es una propuesta inicial recomendada: ajustar a gusto.
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     COLORES — paleta LedLab (todos pensados para degradados)
     --------------------------------------------------------- */
  --color-bg: #FFF9E3; /* fondo base */

  --color-1: #F7BA41;
  --color-2: #F18815;
  --color-3: #E95411;
  --color-4: #E7315F;
  --color-5: #EA4993;
  --color-6: #CF8FBE;
  --color-7: #B865A5;
  --color-8: #9D4392;

  /* Texto: por defecto oscuro (para fondos claros del inicio de la
     paleta). En secciones con fondos oscuros/saturados (colores 4 a 8)
     usar la clase .section--light-text para pasar a texto claro. */
  /* REGLA GENERAL: en este sitio no hay blanco pleno ni negro pleno.
     Todo lo "blanco" es --color-text-light (#FFF9E3, el mismo crema del
     fondo) y todo lo "negro" es --color-panel (#1D1D1B, el gris del
     menú). Si hace falta un oscuro o un claro, usar esos dos. */
  --color-panel: #1D1D1B; /* gris oscuro: menú, header al scrollear, textos */
  --color-text-dark: var(--color-panel);  /* #1D1D1B */
  --color-text-light: var(--color-bg);    /* #FFF9E3 */
  --color-text: var(--color-text-dark);
  --color-text-muted: rgba(29, 29, 27, 0.65);
  /* Claro muy atenuado, para usar sobre fondo oscuro (los números 01-04
     de "Propósito"). Es el crema de marca con opacidad, no un gris nuevo. */
  --color-text-faint: rgba(255, 249, 227, 0.23);

  /* Bordes (no usamos sombras, todo el relieve se resuelve con borde) */
  --color-border: rgba(29, 29, 27, 0.15);
  /* Borde para usar SOBRE fondo oscuro (líneas de la tabla de Servicios). */
  --color-border-light: rgba(255, 249, 227, 0.16);
  --border-width: 1px;

  /* ---------------------------------------------------------
     TIPOGRAFÍA — Helvetica Neue LT Std (Thin/Roman/Bold/Black)
     --------------------------------------------------------- */
  --font-base: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: var(--font-base);
  --font-body: var(--font-base);

  --fw-thin: 100;
  --fw-regular: 400; /* Roman */
  --fw-bold: 700;
  --fw-black: 900;

  /* Escala tipográfica fluida (recomendada) — se adapta sola entre
     mobile y desktop sin depender solo de media queries. */
  --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-body-lg: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;

  --lh-heading: 1.1;
  --lh-body: 1.6;

  /* ---------------------------------------------------------
     ESPACIADO — escala interna en rem (paddings, gaps chicos)
     --------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Alto del header (padding-block 2x --space-3 + alto del logo).
     Lo usa el hero para centrar su contenido en el espacio que queda
     DEBAJO del header, y así el aire arriba del título es igual al
     aire debajo del botón. Si cambia el alto del logo, actualizar acá. */
  --header-h: 92px; /* mobile: isotipo 44px + 24px + 24px */

  /* Etiqueta de sección ("▪ Nosotros"). Va SIEMPRE en el mismo lugar en
     todas las secciones, porque todas miden lo mismo de alto.
       --label-offset  aire entre el header y la etiqueta
       --label-block   espacio total que la etiqueta le reserva arriba al
                       contenido (offset + su alto + el aire de abajo) */
  --label-offset: 2rem;
  --label-block: 5rem;

  /* Márgenes laterales del sitio — SIEMPRE en %, nunca en px,
     para que escalen naturalmente entre mobile y desktop. */
  --margin-mobile: 6%;
  --margin-tablet: 7%;
  --margin-desktop: 9%;
  --side-margin: var(--margin-mobile);

  /* Separación fija entre columnas — un único valor, respetado
     en todo el sitio (hero, servicios, proceso, etc.). */
  --gap-columns: 4rem;

  /* ---------------------------------------------------------
     BORDES (sin sombras)
     --------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --border: var(--border-width) solid var(--color-border);

  /* ---------------------------------------------------------
     TRANSICIONES
     --------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
}

/* ---------------------------------------------------------
   BREAKPOINTS de referencia (recomendados, mobile-first-safe)
   mobile:  hasta 640px
   tablet:  641px – 1024px
   desktop: 1025px en adelante
   ancho grande: 1440px en adelante (ajustes finos opcionales)
   ------------------------------------------------------------ */

/* MOBILE: la etiqueta baja a 80px del borde superior de la seccion, la
   misma distancia que queda entre el final del contenido y el corte con
   la seccion siguiente (padding-bottom de .section-full en layout.css).
   --label-block = 80 (offset) + 24 (alto de la etiqueta) + 24 (aire). */
@media (max-width: 1024px) {
  :root {
    --label-offset: 5rem;
    --label-block: 8rem;
  }
}

@media (min-width: 641px) {
  :root {
    --side-margin: var(--margin-tablet);
    --header-h: 88px; /* logo horizontal 40px + 24px + 24px */
  }
}

@media (min-width: 1025px) {
  :root {
    --side-margin: var(--margin-desktop);
    --gap-columns: 5rem;
  }
}