/* =========================================================================
   components.css — Elementos reutilizables.
   Solo lo que ya sabemos que se necesita: eyebrow y botones.
   Cards, módulos REBLE, formularios y piezas de proyectos llegarán después.
   ========================================================================= */

/* --- Eyebrow -------------------------------------------------------
   Etiqueta técnica breve sobre un titular (REBLE §11.5).
   Monoespaciada, mayúsculas, tracking amplio. */

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.eyebrow--accent {
    color: var(--accent);
}

/* --- Botones ---------------------------------------------------
   .btn            base común
   .btn--primary   acción principal · fondo Azul REBLE
   .btn--secondary acción secundaria · sobria sobre fondos claros */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 2.75rem;              /* objetivo táctil ~44px */
    padding: 0.7rem 1.5rem;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.btn:hover {
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary — fondo Azul REBLE, texto claro */
.btn--primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--color-on-accent);
}

.btn--primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Secondary — contorno sobrio sobre fondos claros */
.btn--secondary {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.btn--secondary:hover {
    border-color: var(--color-carbon);
    background-color: rgb(23 23 21 / 0.04);
}

/* Light — sobre fondos de color (Azul REBLE, Carbón…): superficie Cal,
   texto Carbón. Un botón azul desaparecería sobre el fondo azul. */
.btn--light {
    background-color: var(--color-cal);
    border-color: var(--color-cal);
    color: var(--text-strong);
}

.btn--light:hover {
    background-color: var(--color-piedra);
    border-color: var(--color-piedra);
}


/* --- Enlace con flecha ---------------------------------------------
   CTA de texto, editorial. No es un botón: para secciones donde el
   enlace no debe competir con el CTA principal del Hero. */

.link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5ch;
    color: var(--text-strong);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.link-arrow::after {
    content: "\2192";                 /* → */
    transition: transform var(--dur-fast) var(--ease-out);
}

.link-arrow:hover,
.link-arrow:focus-visible {
    color: var(--accent);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
    transform: translateX(0.18em);
}


/* =========================================================================
   Header y navegación

   Móvil (base)      : marca + navegación apilada y visible.
   Móvil + JS        : la navegación se pliega tras un botón de menú y
                       se despliega en un panel (attr data-nav-enhanced).
   Desktop (>=48rem) : marca + navegación horizontal + CTA; "Servicios"
                       es un desplegable (hover / foco / click).

   El comportamiento JS está en assets/js/modules/menu.js.
   Sin JS todo el contenido sigue siendo accesible.
   ========================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--bg-page);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-sm);
}

/* --- Marca ---------------------------------------------------------- */

.site-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-right: auto;                 /* empuja menú / CTA a la derecha */
    color: var(--text-strong);
    text-decoration: none;
    line-height: 1.05;
}

.site-brand__name {
    font-size: var(--fs-300);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.site-brand__descriptor {
    font-size: 0.75rem;
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted);
}

.site-brand:hover .site-brand__name {
    color: var(--accent);
}

/* --- Botón de menú (visible solo en móvil y con JS) --------------- */

.nav-toggle {
    display: none;
}

.site-header[data-nav-enhanced] .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;                     /* objetivo táctil */
    height: 2.75rem;
    margin-right: -0.5rem;
    color: var(--text-strong);
    cursor: pointer;
}

.nav-toggle__box {
    position: relative;
    width: 1.375rem;
    height: 0.75rem;
}

.nav-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition:
        transform var(--dur-base) var(--ease-out),
        opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar:nth-child(3) { bottom: 0; }

.site-header.is-open .nav-toggle__bar:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.site-header.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.site-header.is-open .nav-toggle__bar:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

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

.site-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    width: 100%;
    padding-top: var(--space-xs);
}

/* Con JS: oculta hasta abrir el panel */
.site-header[data-nav-enhanced] .site-nav {
    display: none;
}

.site-header[data-nav-enhanced].is-open .site-nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: var(--space-xs) var(--container-pad) var(--space-lg);
    background-color: var(--bg-page);
    border-bottom: 1px solid var(--border);
    max-height: calc(100svh - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    width: 100%;
}

.site-nav__item {
    display: flex;
    flex-direction: column;
}

/* Enlace / disparador — comparten aspecto */
.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding-block: var(--space-2xs);
    color: var(--text-strong);
    font-size: var(--fs-300);
    font-weight: var(--fw-medium);
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__link:hover { color: var(--accent); }
.site-nav__link:active { color: var(--accent-hover); }
.site-nav__link[aria-current="page"] { color: var(--accent); }

.site-nav__disclosure {
    width: 100%;
}

.site-nav__caret {
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__disclosure[aria-expanded="true"] .site-nav__caret {
    transform: rotate(225deg);
}

/* Submenú "Servicios" — sin JS permanece visible */
.site-nav__submenu {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: var(--space-3xs) 0 var(--space-2xs);
    padding-left: var(--space-sm);
}

.site-header[data-nav-enhanced] .site-nav__submenu {
    display: none;
}
.site-header[data-nav-enhanced] .site-nav__disclosure[aria-expanded="true"] + .site-nav__submenu {
    display: flex;
}

.site-nav__sublink {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;             /* objetivo táctil ~44px */
    padding-block: var(--space-2xs);
    color: var(--text-muted);
    font-size: var(--fs-200);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__sublink:hover { color: var(--accent); }
.site-nav__sublink[aria-current="page"] { color: var(--accent); }

/* CTA dentro de la navegación */
.site-nav__cta {
    margin-top: var(--space-sm);
    align-self: flex-start;
}

/* --- Desktop: >= 48rem (768px) -------------------------------- */

@media (min-width: 48rem) {

    .nav-toggle,
    .site-header[data-nav-enhanced] .nav-toggle {
        display: none;
    }

    .site-header__inner {
        flex-wrap: nowrap;
        gap: var(--space-lg);
        padding-block: var(--space-md);
    }

    .site-nav,
    .site-header[data-nav-enhanced] .site-nav,
    .site-header[data-nav-enhanced].is-open .site-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg);
        position: static;
        width: auto;
        max-height: none;
        padding: 0;
        border: 0;
        overflow: visible;
    }

    .site-nav__list {
        flex-direction: row;
        align-items: center;
        gap: clamp(var(--space-md), 2.4vw, var(--space-lg));
        width: auto;
    }

    .site-nav__item { flex-direction: row; }
    .site-nav__item--has-menu { position: relative; }

    .site-nav__link {
        min-height: 0;
        padding-block: var(--space-3xs);
        font-size: var(--fs-200);
    }

    /* Subrayado editorial: hover / foco / página actual */
    .site-nav__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.2rem;
        height: 1px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--dur-base) var(--ease-out);
    }
    .site-nav__link:hover::after,
    .site-nav__link:focus-visible::after,
    .site-nav__link[aria-current="page"]::after {
        transform: scaleX(1);
    }

    .site-nav__disclosure { width: auto; }
    .site-nav__disclosure::after { content: none; }

    /* Submenú como desplegable sobrio */
    .site-nav__submenu {
        position: absolute;
        top: calc(100% + var(--space-2xs));
        left: 0;
        min-width: 14rem;
        margin: 0;
        padding: var(--space-2xs);
        gap: 0;
        background-color: var(--bg-page);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.25rem);
        transition:
            opacity var(--dur-base) var(--ease-out),
            visibility var(--dur-base) var(--ease-out),
            transform var(--dur-base) var(--ease-out);
    }

    .site-header[data-nav-enhanced] .site-nav__submenu {
        display: flex;
    }

    /* Sin JS: hover y foco abren el desplegable. */
    .site-header:not([data-nav-enhanced]) .site-nav__item--has-menu:hover > .site-nav__submenu,
    .site-header:not([data-nav-enhanced]) .site-nav__item--has-menu:focus-within > .site-nav__submenu,
    /* Con JS: lo gobierna aria-expanded (hover/foco/Escape los gestiona menu.js). */
    .site-header[data-nav-enhanced] .site-nav__disclosure[aria-expanded="true"] + .site-nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav__sublink {
        min-height: 2.75rem;         /* objetivo táctil ~44px también en el desplegable */
        width: 100%;
        padding: var(--space-2xs);
        border-radius: var(--radius-sm);
    }
    .site-nav__sublink:hover {
        color: var(--accent);
        background-color: rgb(23 23 21 / 0.04);
    }

    .site-nav__cta {
        margin-top: 0;
        align-self: auto;
        white-space: nowrap;
    }
}


/* =========================================================================
   Sistema de piezas REBLE  (REBLE_Base_Marca_Web_Claude.md §11.6)

   Composición modular abstracta construida solo con HTML + CSS.
   Piezas de distinta proporción, ligeramente irregulares, con espacio
   entre ellas. Idea: piezas diferentes que encajan en un sistema.

   Cada .reble-piece es un elemento independiente. El transform se apoya
   en custom properties que por defecto valen 0 (= "encajado"); una fase
   posterior podrá animarlas SEPARAR → MOVER → ENCAJAR sin tocar el HTML.

   El color base es Piedra/Cal; Carbón, Cereal y Azul se reservan para
   unas pocas piezas de acento. No usar más colores.
   La disposición concreta (grid-template, áreas) es responsabilidad de
   cada página; aquí solo van pieza y contenedor.
   ========================================================================= */

.reble-composition {
    display: grid;
    gap: var(--reble-gap, clamp(0.5rem, 1.6vw, 1rem));
}

.reble-piece {
    display: block;
    min-width: 0;
    min-height: 0;
    border-radius: var(--radius-sm);          /* radio mínimo, sin estética de tarjeta */
    background-color: var(--color-piedra);    /* Piedra por defecto */
    transform:
        translate(var(--rp-x, 0), var(--rp-y, 0))
        rotate(var(--rp-rot, 0deg));
    transition:
        transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

/* Variantes de color — únicamente paleta REBLE */
.reble-piece--stone   { background-color: var(--color-piedra); }
.reble-piece--cal     { background-color: var(--color-cal); border: var(--border-width) solid var(--border); }
.reble-piece--carbon  { background-color: var(--color-carbon); }
.reble-piece--cereal  { background-color: var(--color-cereal); }
.reble-piece--blue    { background-color: var(--color-azul); }
/* Módulo abierto: sin relleno, solo contorno. El vacío como parte del sistema. */
.reble-piece--outline { background-color: transparent; border: var(--border-width) solid var(--border-strong); }


/* =========================================================================
   Footer del sitio  (includes/footer.php · global, todas las páginas)

   Sobrio, editorial y compacto: después de la superficie Azul del CTA el
   pie descansa sobre Cal con texto Carbón. Sin piezas, sin Cereal y sin
   Azul como superficie (el Azul solo aparece, si acaso, en el foco global).
   Ancho de contenido con el mismo .container que el resto de la web.
   Padding vertical menor que --space-section: no es otra gran sección.
   ========================================================================= */

.site-footer {
    background-color: var(--bg-page);          /* Cal */
    color: var(--text-strong);                 /* Carbón */
    padding-block: var(--space-section-sm);
}

/* --- Zona superior: marca + claim + grupos de enlaces --------------- */

.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.site-footer__brand-link {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--text-strong);
}

.site-footer__brand-name {
    font-size: var(--fs-300);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
}

.site-footer__brand-descriptor {
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-footer__brand-link:hover .site-footer__brand-name,
.site-footer__brand-link:focus-visible .site-footer__brand-name {
    color: var(--accent);
}

.site-footer__claim {
    margin-top: var(--space-sm);
    max-width: 24ch;
    font-size: var(--fs-200);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.site-footer__group-title {
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    /* La separación entre enlaces la aporta el padding del propio enlace
       (área táctil ~44px) sin engordar visualmente el pie. */
}

/* Enlaces del pie: silenciosos por defecto, subrayado al interactuar.
   Sin botones, sin fondos. */
.site-footer a {
    color: var(--text-strong);
    text-decoration: none;
}

.site-footer__list a {
    display: inline-block;
    padding-block: 0.7rem;           /* ~44px de área táctil (0.7rem + 0.7rem + interlineado) */
}

.site-footer a:hover,
.site-footer a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --- Zona inferior: localización + copyright ---------------------- */

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);   /* línea fina: organiza, no decora */
}

.site-footer__place {
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-footer__copy {
    font-size: var(--fs-100);
    color: var(--text-muted);
}

/* Enlaces legales: discretos, junto al copyright, sin nueva columna. */
.site-footer__legal {
    display: inline-flex;
    gap: var(--space-sm);
    margin-left: var(--space-sm);
}
.site-footer__legal a {
    padding-block: var(--space-3xs);
    color: var(--text-muted);
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    color: var(--text-strong);
}

/* --- >= 36rem · los dos grupos de enlaces, lado a lado ----------- */

@media (min-width: 36rem) {
    .site-footer__top {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-xl);
        row-gap: var(--space-lg);
    }
    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

/* --- >= 60rem · marca | navegación | servicios ------------------ */

@media (min-width: 60rem) {
    .site-footer__top {
        grid-template-columns: 1.5fr 1fr 1fr;
        column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
    }
    .site-footer__brand {
        grid-column: auto;
    }
}