/*
 * Tokens de diseño de MODELSXL.
 *
 * Los valores salen de docs/design.json (la fuente única). Si algo cambia,
 * se cambia primero allá y después acá. No se inventan colores, tamaños
 * ni duraciones fuera de este archivo.
 *
 * Hay dos capas:
 *   1. Valores "crudos" (--papel, --negro, --violeta…): la paleta.
 *   2. Valores "de contexto" (--fondo, --texto, --regla…): cambian solos dentro
 *      de un bloque oscuro (.oscuro), así los componentes sirven en los dos fondos.
 */

:root {
  /* ---------- Colores: paleta ---------- */
  --papel: #F7F7F4;              /* Fondo principal de las secciones claras */
  --negro: #171717;              /* Texto sobre papel · fondo de bloques oscuros */
  --gris: #555555;               /* Texto secundario sobre papel (6,95:1) */
  --gris-sobre-negro: #A3A3A3;   /* Texto secundario sobre negro (7,11:1) */
  --linea: #D6D6D0;              /* Separadores finos sobre papel (sólo decorativo) */
  --linea-sobre-negro: #3A3A38;  /* Separadores finos sobre negro (sólo decorativo) */
  --borde-campo: #8A8A86;        /* Borde de campos de formulario (≥3:1 en ambos fondos) */
  --azul: #007FA3;               /* Foco, texto grande (≥24px) y gráficos. NO texto chico (4,29:1) */
  --azul-texto: #007597;         /* PROPUESTA para texto chico (4,90:1). Pendiente de Sebastián */
  --violeta: #6330B8;            /* Acento sobre papel (7,40:1). NO como texto sobre negro */
  --error-sobre-papel: #B3261E;  /* 6,09:1 */
  --error-sobre-negro: #FF8F87;  /* 8,14:1 */
  --exito-sobre-negro: #7EE0A1;  /* 11,15:1 */

  /* Capa fija sobre el video de portada para que el texto se lea en CUALQUIER fotograma.
     Mínimo 62% en toda la portada: con el peor fondo posible (un marco blanco) el texto claro
     llega a 4,7:1; sobre un fondo claro común (#E4E4DE) llega a 5,5:1. Con menos opacidad
     (el 25% del borrador) la cabecera quedaba a 2,2:1. Escritorio: de izquierda a derecha. */
  --overlay-video: linear-gradient(90deg, rgba(23, 23, 23, 0.82) 0%, rgba(23, 23, 23, 0.70) 55%, rgba(23, 23, 23, 0.62) 100%);
  /* Celular y tablet (hasta 1023 px): de abajo hacia arriba, porque el texto va abajo */
  --overlay-video-movil: linear-gradient(0deg, rgba(23, 23, 23, 0.90) 0%, rgba(23, 23, 23, 0.74) 45%, rgba(23, 23, 23, 0.62) 100%);

  /* SÓLO como elemento gráfico (la S, la línea de firma). Nunca como fondo de texto ni como texto */
  --gradiente-marca: linear-gradient(135deg, #40D2FB 0%, #0083FF 25%, #8919FB 50%, #F81A41 75%, #FE7704 100%);

  /* ---------- Colores: de contexto (sobre fondo claro) ---------- */
  --fondo: var(--papel);
  --texto: var(--negro);
  --texto-2: var(--gris);
  --regla: var(--linea);
  --foco: var(--azul);
  --error: var(--error-sobre-papel);
  --boton-hover: var(--violeta);

  /* ---------- Tipografía ---------- */
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-regular: 400;
  --peso-semibold: 600;
  --peso-extrabold: 800;

  /* Display: H1 de cada página (44 → 112 px) */
  --t-display: clamp(2.75rem, 7vw, 7rem);
  --t-display-lh: 1;
  --t-display-ls: -0.03em;
  /* H2: títulos de sección (32 → 56 px) */
  --t-h2: clamp(2rem, 4vw, 3.5rem);
  --t-h2-lh: 1.05;
  --t-h2-ls: -0.025em;
  /* Declaración: texto grande de la presentación (28 → 52 px) */
  --t-declaracion: clamp(1.75rem, 3.6vw, 3.25rem);
  --t-declaracion-lh: 1.1;
  --t-declaracion-ls: -0.02em;
  /* H3: títulos de tarjetas, pasos y servicios (22 → 28 px) */
  --t-h3: clamp(1.375rem, 1.8vw, 1.75rem);
  --t-h3-lh: 1.2;
  --t-h3-ls: -0.01em;
  /* Cuerpo grande: bajadas e introducciones (18 → 20 px) */
  --t-cuerpo-grande: clamp(1.125rem, 1.4vw, 1.25rem);
  /* Cuerpo: texto corrido (18 px escritorio, 17 px celular) */
  --t-cuerpo: 1.125rem;
  --t-cuerpo-lh: 1.5;
  --ancho-texto: 65ch;
  /* Etiqueta: números 01/02, «Concepto demostrativo», metadatos (14 px, mayúsculas) */
  --t-etiqueta: 0.875rem;
  --t-etiqueta-lh: 1.3;
  --t-etiqueta-ls: 0.04em;
  /* Botón (15 px) */
  --t-boton: 0.9375rem;
  --t-boton-ls: 0.02em;

  /* ---------- Retícula y espacio ---------- */
  --columnas: 12;
  --medianil: clamp(1rem, 1.7vw, 1.5rem);
  --margen: 1.25rem;                              /* 20 px celular */
  --ancho-max: 1600px;
  --separacion: clamp(3.5rem, 9vw, 9rem);         /* 56 px celular → 144 px escritorio */

  /* Escala de espacio (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 144 px) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 9rem;

  /* ---------- Forma ---------- */
  --radio-pill: 999px;
  --radio-circulo: 50%;
  --linea-fina: 1px solid;                        /* sin sombras, sin esquinas redondeadas en medios */

  /* ---------- Alturas fijas ---------- */
  --alto-cabecera: 4rem;                          /* 64 px celular */
  --alto-boton: 3rem;                             /* 48 px: cumple el mínimo táctil de 44 px */

  /* ---------- Movimiento ---------- */
  --curva-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-entrada-salida: cubic-bezier(0.65, 0, 0.35, 1);
  --d-enlace: 180ms;
  --d-circulo-reel: 220ms;
  --d-faq: 250ms;
  --d-cambio-ruta: 200ms;
  --d-cabecera: 250ms;                            /* la cabecera fija entra al bajar */
  --d-reel-fundido: 300ms;
  --d-crossfade-video: 350ms;
  --d-servicios: 350ms;
  --d-medio-hover: 450ms;
  --d-panel: 650ms;
  --d-retrato: 650ms;
  --d-titulo: 700ms;
  --desfase-titulo: 90ms;                         /* entre líneas del título */
  --desfase-panel: 70ms;                          /* entre piezas del panel */
  --escala-circulo-reel: 1.06;
  --escala-medio-hover: 1.035;
}

/* Celular: el cuerpo baja a 17 px */
@media (max-width: 767px) {
  :root { --t-cuerpo: 1.0625rem; }
}

/* Tablet: margen de 32 px */
@media (min-width: 768px) {
  :root { --margen: 2rem; }
}

/* Escritorio: margen de 64 a 80 px y cabecera de 72 px */
@media (min-width: 1024px) {
  :root {
    --margen: clamp(4rem, 5vw, 5rem);
    --alto-cabecera: 4.5rem;
  }
}

/*
 * Bloques oscuros (portada, portfolio, contacto, pie, panel).
 * Cambia sólo los valores de contexto: los componentes se adaptan solos.
 */
.oscuro {
  --fondo: var(--negro);
  --texto: var(--papel);
  --texto-2: var(--gris-sobre-negro);
  --regla: var(--linea-sobre-negro);
  --foco: var(--papel);
  --error: var(--error-sobre-negro);
  --exito: var(--exito-sobre-negro);
  --boton-hover: #FFFFFF;

  background-color: var(--fondo);
  color: var(--texto);
}