/* ==========================================================================
   SecureWork · Tokens de marca v1
   Fuente única de verdad para color, letra, espacio, forma y movimiento.
   Todo componente usa estas variables: nunca HEX sueltos en el código.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Color · base ---------- */
  --sw-noche:        #0D1B2A;  /* fondo oscuro principal y texto sobre claro */
  --sw-noche-2:      #13283B;  /* superficies sobre noche (cards, header al hacer scroll) */
  --sw-noche-3:      #1C3850;  /* bordes y separadores sobre noche */
  --sw-crema:        #F0EEE2;  /* fondo claro principal (heredado de la presentación) */
  --sw-crema-2:      #E6E3D3;  /* superficies sobre crema */
  --sw-blanco:       #FFFFFF;

  /* ---------- Color · acción (UNO solo) ---------- */
  --sw-turquesa:     #2DCDB9;  /* botones, links y foco sobre fondo noche */
  --sw-turquesa-hover:#5EDCCB;
  --sw-turquesa-osc: #0B6269;  /* la misma acción sobre fondo crema (contraste AA) */
  --sw-turquesa-osc-hover:#08494F;

  /* ---------- Color · apoyo (con regla) ---------- */
  --sw-texto-suave-osc:  #A9B7C2; /* texto secundario sobre noche */
  --sw-texto-suave-clar: #4E5D69; /* texto secundario sobre crema */
  --sw-senal:        #F27B1F;  /* SOLO para "urgente / hoy". Nunca en botones ni fondos grandes */
  --sw-apto:         #2DCDB9;  /* estado "Apto" = mismo turquesa, no un verde nuevo */
  --sw-vencido:      #E5484D;  /* estado "Vencido" en el portal, únicamente */

  /* Degradado del símbolo: SOLO para el símbolo en el hero y el loader */
  --sw-gradiente-simbolo: linear-gradient(160deg, #2DCDB9 0%, #0B5F68 100%);

  /* ---------- Tipografía (una sola familia) ---------- */
  --sw-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sw-peso-titular: 800;   /* igual que "Secure" del logo */
  --sw-peso-subtitulo: 600;
  --sw-peso-texto: 400;     /* igual que "Work" del logo */
  --sw-peso-etiqueta: 500;

  --sw-t-display: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);    /* titular del hero */
  --sw-t-h2:      clamp(1.875rem, 1.3rem + 2.4vw, 3rem);  /* titular de sección */
  --sw-t-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --sw-t-texto:   1.0625rem;  /* 17px */
  --sw-t-chico:   0.875rem;
  --sw-t-etiqueta:0.75rem;    /* MAYÚSCULAS + tracking, como la bajada del logo */

  --sw-interlineado-titular: 1.05;
  --sw-interlineado-texto: 1.6;
  --sw-tracking-titular: -0.02em;
  --sw-tracking-etiqueta: 0.18em;

  /* ---------- Espacio (base 8) ---------- */
  --sw-e-1: 0.25rem; --sw-e-2: 0.5rem; --sw-e-3: 0.75rem; --sw-e-4: 1rem;
  --sw-e-5: 1.5rem;  --sw-e-6: 2rem;   --sw-e-7: 3rem;    --sw-e-8: 4rem;
  --sw-e-9: 6rem;    --sw-e-10: 8rem;
  --sw-seccion: clamp(4rem, 2.5rem + 6vw, 8rem);  /* aire vertical entre secciones */
  --sw-ancho: 72rem;   /* ancho máximo del contenido */
  --sw-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---------- Forma ---------- */
  --sw-radio-s: 6px;
  --sw-radio-m: 14px;
  --sw-radio-l: 24px;
  --sw-radio-pill: 999px;   /* botones: redondos como los extremos del símbolo */
  --sw-diagonal: 38deg;     /* corte diagonal heredado de la presentación */
  --sw-sombra: 0 1px 2px rgb(13 27 42 / .06), 0 8px 24px rgb(13 27 42 / .08);
  --sw-sombra-alta: 0 2px 4px rgb(13 27 42 / .08), 0 24px 48px rgb(13 27 42 / .16);

  /* ---------- Movimiento (ver motion/MOTION.md) ---------- */
  --sw-ease-enganche: cubic-bezier(0.22, 1, 0.36, 1);    /* llega rápido y se asienta: firma de marca */
  --sw-ease-salida:   cubic-bezier(0.4, 0, 1, 1);
  --sw-ease-suave:    cubic-bezier(0.45, 0, 0.25, 1);    /* scroll y cambios de estado */
  --sw-ease-rebote:   cubic-bezier(0.34, 1.4, 0.64, 1);  /* solo el "clic" del enganche */

  --sw-d-micro: 150ms;   /* hover, foco */
  --sw-d-corto: 250ms;   /* botones, toggles */
  --sw-d-medio: 450ms;   /* aparición de bloques */
  --sw-d-largo: 800ms;   /* entrada de secciones */
  --sw-d-firma: 1200ms;  /* animación del símbolo (enganche) */
  --sw-escalonado: 70ms; /* retraso entre hijos de una lista */
  --sw-desplazamiento: 24px; /* cuánto viaja un bloque al aparecer */
}

/* Temas por sección: se aplica la clase y todo lo de adentro se adapta */
.sw-tema-noche {
  --sw-fondo: var(--sw-noche);
  --sw-superficie: var(--sw-noche-2);
  --sw-borde: var(--sw-noche-3);
  --sw-texto: var(--sw-crema);
  --sw-texto-suave: var(--sw-texto-suave-osc);
  --sw-accion: var(--sw-turquesa);
  --sw-accion-hover: var(--sw-turquesa-hover);
  --sw-accion-texto: var(--sw-noche);
  --sw-logo: var(--sw-crema);
  --sw-simbolo: var(--sw-turquesa);
}
.sw-tema-crema {
  --sw-fondo: var(--sw-crema);
  --sw-superficie: var(--sw-blanco);
  --sw-borde: var(--sw-crema-2);
  --sw-texto: var(--sw-noche);
  --sw-texto-suave: var(--sw-texto-suave-clar);
  --sw-accion: var(--sw-turquesa-osc);
  --sw-accion-hover: var(--sw-turquesa-osc-hover);
  --sw-accion-texto: var(--sw-blanco);
  --sw-logo: var(--sw-noche);
  --sw-simbolo: var(--sw-turquesa-osc);
}

/* ==========================================================================
   Web v2 · extensiones (agregadas para index.html; reflejadas en tokens.json)
   ========================================================================== */
:root {
  /* Tipografía de pantalla */
  --sw-t-hero:     clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem);   /* titular del hero */
  --sw-t-titular:  clamp(2rem, 1.2rem + 3.4vw, 4rem);        /* titular de sección grande */
  --sw-t-bajada:   clamp(1.125rem, 1rem + 0.6vw, 1.5rem);    /* bajada bajo un titular */
  --sw-t-cifra:    clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem);   /* contadores */
  --sw-t-numero:   clamp(3.5rem, 2rem + 6vw, 7rem);          /* 01–04 de los pilares */
  --sw-t-cita:     clamp(1.25rem, 1rem + 1.2vw, 2rem);       /* testimonio */

  /* Medidas */
  --sw-medida: 36rem;          /* largo de línea cómodo para párrafos */
  --sw-toque: 2.75rem;         /* 44 px: área táctil mínima */
  --sw-campo: 3.25rem;         /* alto de inputs */
  --sw-punto: 3rem;            /* círculo de los pasos */
  --sw-borde-ancho: 1.5px;
  --sw-header-alto: 4.5rem;
  --sw-corte: clamp(2.5rem, 1rem + 6vw, 6rem);  /* alto del corte diagonal entre secciones */

  /* Capas y velos (siempre derivados de la paleta) */
  --sw-velo: color-mix(in srgb, var(--sw-noche) 84%, transparent);      /* header al bajar */
  --sw-capa-foto: linear-gradient(200deg,
      color-mix(in srgb, var(--sw-noche) 10%, transparent) 0%,
      color-mix(in srgb, var(--sw-noche) 78%, transparent) 100%);        /* capa sobre fotos */
  --sw-tinte-foto: var(--sw-turquesa-osc);                                 /* tinte de marca (blend color) */
  --sw-error: var(--sw-vencido);  /* errores de formulario: mismo rojo del portal, sin color nuevo */

  /* Movimiento de escena */
  --sw-flotar: 8px;            /* recorrido de las tarjetas que flotan */
  --sw-d-flotar: 6s;           /* ciclo del flotado */
  --sw-parallax: 14px;         /* cuánto siguen al mouse las tarjetas (solo escritorio) */

  /* Capas */
  --sw-z-menu: 40;
  --sw-z-header: 50;
  --sw-z-flotante: 60;
  --sw-z-loader: 100;
}

/* Móvil: ningún texto bajo 16 px (etiquetas y textos chicos suben) */
@media (max-width: 47.99rem) {
  :root {
    --sw-t-chico: 1rem;
    --sw-t-etiqueta: 1rem;
    --sw-tracking-etiqueta: 0.1em;
    --sw-flotar: 5px;
  }
}