/* ------------------------------------------------------------------
   Componentes
   Nada de bordes redondeados por defecto ni sombras de plantilla: la
   jerarquía se hace con escala, espacio, regla y color.
   ------------------------------------------------------------------ */

/* --- Navegación ------------------------------------------------- */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-nav);
    padding-block: var(--space-xs);
    color: var(--paper);
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                padding var(--dur-base) var(--ease-out);
}

/* Al bajar, la barra se asienta: fondo tinta, menos alto. Da al scroll
   la sensación de que el sitio responde, sin animación decorativa. */
.nav.is-stuck {
    background: color-mix(in srgb, var(--ink) 94%, transparent);
    backdrop-filter: blur(12px);
    padding-block: var(--space-3xs);
    border-bottom: 1px solid var(--ink-3);
}

.nav.is-hidden {
    transform: translateY(-100%);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}

/* Logotipo tipográfico. El sitio actual no tiene logo en imagen, así
   que la marca se construye con la propia tipografía: el nombre en
   Archivo 800 muy apretado, y el descriptor en mono debajo. */
.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.375rem;
    letter-spacing: -0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.logo__mark {
    color: var(--signal);
}

.logo__meta {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.65;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2.25rem);
}

.nav__link {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    position: relative;
    padding-block: 0.4rem;
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav__link[aria-current='page'] { color: var(--signal); }

.nav__toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
    display: block;
    width: 1.375rem;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-fast) linear;
}

.nav__toggle span::before,
.nav__toggle span::after {
    content: '';
    position: absolute;
}

.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(6px); }

.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: rotate(-45deg); }

@media (max-width: 900px) {
    .nav__toggle { display: flex; }

    .nav__links {
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-s);
        padding: var(--gutter);
        background: var(--ink);
        color: var(--paper);
        clip-path: inset(0 0 100% 0);
        transition: clip-path var(--dur-slow) var(--ease-out);
    }

    .nav.is-open .nav__links { clip-path: inset(0 0 0 0); }

    /* El panel va después en el DOM, así que sin esto taparía el logotipo y
       —peor— el botón de cerrar: el menú quedaría sin salida visible. */
    .nav.is-open .logo,
    .nav.is-open .nav__toggle {
        position: relative;
        z-index: 1;
    }

    /* En móvil la navegación es una pantalla completa, así que los
       enlaces se leen como titulares, no como una barra encogida. */
    .nav__link {
        font-family: var(--font-display);
        font-size: clamp(2rem, 9vw, 3rem);
        font-weight: 800;
        letter-spacing: -0.035em;
        text-transform: none;
    }
}

/* --- Botones ----------------------------------------------------- */

.btn {
    --btn-fg: var(--paper);
    --btn-bg: var(--ink);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.0625rem 1.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--btn-fg);
    background: var(--btn-bg);
    overflow: hidden;
    isolation: isolate;
    transition: color var(--dur-base) var(--ease-out);
}

/* El relleno sube desde abajo al pasar por encima: el gesto sugiere
   carga, que es de lo que va todo el sitio. */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--signal);
    transform: translateY(101%);
    transition: transform var(--dur-base) var(--ease-out);
    z-index: -1;
}

.btn:hover::before,
.btn:focus-visible::before {
    transform: translateY(0);
}

.btn__arrow {
    transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

/* Tinta sobre naranja, no papel: además de alcanzar 5.1:1 (el papel se
   quedaba en 3.3:1), el negro sobre naranja es el par señalético de toda la
   señalización industrial, que es justo el registro del sitio. */
.btn--signal {
    --btn-bg: var(--signal);
    --btn-fg: var(--ink);
}

.btn--signal::before { background: var(--ink); }
.btn--signal:hover,
.btn--signal:focus-visible { --btn-fg: var(--paper); }

/* Sobre fondo tinta el botón sólido por defecto sería negro sobre negro.
   Se invierte para que siga leyéndose como el elemento más sólido de la
   sección, que es justo su trabajo. */
.on-ink .btn:not(.btn--signal):not(.btn--ghost) {
    --btn-bg: var(--paper);
    --btn-fg: var(--ink);
}

.on-ink .btn:not(.btn--signal):not(.btn--ghost):hover,
.on-ink .btn:not(.btn--signal):not(.btn--ghost):focus-visible {
    --btn-fg: var(--paper);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    border: 1px solid currentColor;
}

.btn--ghost:hover { --btn-fg: var(--paper); }

/* --- Enlace con flecha ------------------------------------------- */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rule);
    transition: border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}

.link-arrow:hover {
    color: var(--signal-text);
    border-color: var(--signal-text);
}

.link-arrow svg { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Formulario --------------------------------------------------- */

.field {
    display: grid;
    gap: var(--space-3xs);
}

.field__label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* Campos con línea inferior en vez de caja: el formulario se lee como
   una hoja de pedido, no como un widget. */
.field__input,
.field__select,
.field__textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--fg);
    transition: border-color var(--dur-base) var(--ease-out);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-color: var(--signal);
}

.field__textarea {
    resize: vertical;
    min-height: 7rem;
}

.field__select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 12px) 1.35rem, calc(100% - 7px) 1.35rem;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

.field__select option {
    background: var(--ink);
    color: var(--paper);
}

.field__error {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    color: var(--signal);
    min-height: 1rem;
}

.form-note {
    font-size: var(--fs-small);
    color: var(--fg-muted);
    max-width: 44ch;
}

.form-status {
    border-left: 2px solid var(--signal);
    padding: var(--space-s);
    background: var(--bg-raised);
}

/* --- Pie --------------------------------------------------------- */

.footer {
    padding-block: var(--space-l) var(--space-m);
}

.footer__grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: 1fr;
}

@media (min-width: 780px) {
    .footer__grid {
        grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
        gap: var(--space-s);
    }
}

.footer__list {
    display: grid;
    gap: 0.75rem;
    font-size: var(--fs-small);
}

.footer__list a {
    transition: color var(--dur-fast) var(--ease-out);
}

.footer__list a:hover { color: var(--signal); }

.footer__bottom {
    margin-top: var(--space-l);
    padding-top: var(--space-s);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs);
}

/* Marca de agua tipográfica del pie: el nombre a tamaño imposible,
   recortado por el borde inferior. Cierra el sitio con la misma voz
   con la que lo abre. */
.footer__wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 21vw, 20rem);
    line-height: 0.78;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--rule);
    margin-top: var(--space-m);
    user-select: none;
    overflow: hidden;
}