:root {
    --color-carbon: #1C1C1C;
    --color-blanco: #FFFFFF;
    --color-eucalipto: #81A198;
    --color-eucalipto-hondo: #4E6C62;

    --color-naranja: #FFA529;
    --color-glaciar: #7BA3B2;
    --color-noctis: #1A2730;

    --color-fondo-profundo: #050807;
    --color-fondo: #2C2D2F;
    --color-fondo-hondo: #202123;
    --color-superficie: rgba(255, 255, 255, 0.05);
    --color-superficie-alta: rgba(255, 255, 255, 0.075);
    --sombra-tarjeta: 0 22px 45px -28px rgba(0, 0, 0, 0.9);
    --sombra-tarjeta-alta: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
    --color-claro: #F4F1EC;
    --color-texto: rgba(255, 255, 255, 0.92);
    --color-texto-suave: rgba(255, 255, 255, 0.64);
    --color-texto-tenue: rgba(255, 255, 255, 0.56);
    --color-borde-suave: rgba(255, 255, 255, 0.14);
    --color-borde-medio: rgba(255, 255, 255, 0.26);

    --fuente-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fuente-serif: "Cormorant Garamond", "Times New Roman", serif;

    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    --texto-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --texto-display: clamp(2.75rem, 1.4rem + 5.2vw, 6rem);
    --texto-titulo-hero: clamp(4rem, min(10vw, calc(18 * var(--vh-estable, 1vh))), 9rem);
    --texto-frase-hero: clamp(1.15rem, 0.35rem + 1.1vw, 1.75rem);
    --texto-titulo-seccion: clamp(1.2rem, 0.9rem + 1.2vw, 2.25rem);

    --margen-lateral: clamp(1.25rem, 5vw, 6rem);
    --ancho-maximo: 1440px;

    --radio-sm: 6px;
    --radio-pildora: 999px;

    --curva-entrante: cubic-bezier(0.22, 1, 0.36, 1);
    --curva-suave: cubic-bezier(0.22, 1, 0.36, 1);
    --curva-resorte: cubic-bezier(0.34, 1.4, 0.64, 1);
    --curva-entrada: cubic-bezier(0.16, 1, 0.3, 1);

    --capa-fondo: -1;
    --capa-contenido: 1;
    --capa-navegacion: 100;

    color-scheme: dark;
}

[hidden] {
    display: none !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-sans);
    font-size: var(--texto-base);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img,
picture,
svg,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

html.lenis,
html.lenis body {
    height: auto;
}

html.lenis {
    scroll-behavior: auto;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

::selection {
    background-color: var(--color-eucalipto);
    color: var(--color-carbon);
}

:focus-visible {
    outline: 2px solid var(--color-naranja);
    outline-offset: 4px;
    border-radius: 2px;
}

.texto-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.saltar-al-contenido {
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: calc(var(--capa-navegacion) + 1);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radio-pildora);
    background-color: var(--color-naranja);
    color: var(--color-carbon);
    font-weight: 500;
    transform: translate(-50%, -200%);
    transition: transform 0.3s var(--curva-suave);
}

.saltar-al-contenido:focus-visible {
    transform: translate(-50%, 0);
}

.contenedor,
.pie__base {
    --ancho-contenedor: var(--ancho-maximo);
    --margen-contenedor: var(--margen-lateral);
}

.contenedor {
    width: 100%;
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    padding-inline: var(--margen-contenedor);
    min-width: 0;
}

/* El índice fijo necesita su propio espacio, incluso al desplegar las etiquetas.
   Descontamos el margen exterior de cada contenedor: en monitores amplios se
   conserva el ancho original; en notebooks el contenido se separa del menú. */
@media (min-width: 1101px) {
    :root {
        --reserva-navegacion: calc(clamp(1.25rem, 2.5vw, 2.5rem) + 11.5rem);
    }

    .contenedor,
    .pie__base {
        --margen-contenedor: max(
            var(--margen-contenedor-base, var(--margen-lateral)),
            calc(var(--reserva-navegacion) - max(0px, (100vw - var(--ancho-contenedor)) / 2))
        );
    }
}

.titulo-seccion {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.9rem, 1.6vw, 1.5rem);
    font-family: var(--fuente-sans);
    font-size: var(--texto-titulo-seccion);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-blanco);
}

.titulo-seccion::before,
.titulo-seccion::after {
    content: "";
    flex: none;
    width: clamp(32px, 3.5vw, 56px);
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-naranja);
}

@media (max-width: 480px) {
    .titulo-seccion {
        gap: 0.6rem;
        letter-spacing: 0.04em;
    }

    .titulo-seccion::before,
    .titulo-seccion::after {
        width: 20px;
    }
}

[data-tema-fondo="claro"] {
    --color-texto: rgba(28, 28, 28, 0.92);
    --color-texto-suave: rgba(28, 28, 28, 0.72);
    --color-texto-tenue: rgba(28, 28, 28, 0.64);
    --color-borde-suave: rgba(28, 28, 28, 0.12);
    --color-borde-medio: rgba(28, 28, 28, 0.24);

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

[data-tema-fondo="claro"] .titulo-seccion {
    color: var(--color-carbon);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}