/*
    Design tokens de encompania.es (club de fidelización En Compañía, FIDES).
    Misma disciplina que styles/tokens.css del portal del empleado — todo
    .aspx nuevo consume estas variables, nunca valores hardcodeados — pero
    con la paleta del club (la que ya usa la web actual de Zuplyit):
      #5E7F8C azul pizarra (marca)   #86A8B6 azul niebla (marca clara)
      #034A64 / #19364a petróleo (contraste)   #EFAE05 mostaza (acento / CTA)
*/
@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("../assets/fonts/fraunces-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Tipografía */
    --font-base: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;

    --font-size-hero: clamp(38px, 6.2vw, 72px);
    --font-size-h2: clamp(28px, 3.6vw, 42px);
    --font-size-h3: 19px;
    --font-size-body: 16px;
    --font-size-label: 14px;
    --font-size-small: 13px;
    --line-height-body: 1.6;

    /* Marca */
    --color-brand: #5E7F8C;
    --color-brand-light: #86A8B6;
    --color-brand-soft: #e6eef1;
    --color-brand-mist: #f3f7f8;
    --color-brand-deep: #19364a;
    --color-brand-ink: #034A64;
    --color-accent: #EFAE05;
    --color-accent-hover: #d99c00;
    --color-text-on-accent: #1d2b31;
    --color-text-on-brand: #ffffff;

    /* Niveles del club (color de la tarjeta en FIDES) */
    --color-nivel-1: #A9603A;
    --color-nivel-2: #4E7A73;
    --color-nivel-3: #2E4A3A;
    --color-focus-ring: rgba(94, 127, 140, 0.28);

    /* Superficies */
    --color-bg-page: #fbfaf7;
    --color-surface: #ffffff;
    --color-cream: #f6f1e7;

    /* Texto */
    --color-text-heading: #1d2b31;
    --color-text-body: #45565d;
    --color-text-muted: #7a8d95;

    /* Bordes */
    --color-border: #dfe6e9;
    --color-border-strong: #c3cfd4;

    /* Estados */
    --color-error-bg: #fdecec;
    --color-error-border: #f6cfcf;
    --color-error-text: #a3271f;
    --color-success-bg: #eaf6ef;
    --color-success-border: #c7e7d3;
    --color-success-text: #1f6b3d;

    /* Radios y sombras */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(25, 54, 74, 0.05), 0 18px 40px -22px rgba(25, 54, 74, 0.28);
    --shadow-pass: 0 30px 60px -28px rgba(25, 54, 74, 0.55), 0 8px 18px -10px rgba(25, 54, 74, 0.3);

    /* Espaciado */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: clamp(64px, 9vw, 112px);
    --gutter: clamp(16px, 4vw, 40px);
    --max-width: 1160px;

    --transition-fast: 160ms ease;
}

/* WebForms envuelve __VIEWSTATE en div.aspNetHidden — mismo fix global que el portal. */
.aspNetHidden {
    display: none;
}