/* ==========================================================================
   Cortinas Metálicas Sinaloa — sistema de diseño
   Concepto: amarillo de señalética sobre azul acero. El amarillo sale del logo,
   el azul acero del sitio anterior. Contrastes verificados AA (ver comentarios).
   ========================================================================== */

/* Fuentes locales ------------------------------------------------------- */
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-600.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

/* Tokens ---------------------------------------------------------------- */
:root {
    /* Color */
    --c-acero: #192730;        /* header, footer, títulos — 15.3:1 sobre blanco */
    --c-acero-2: #1a3446;      /* barra superior, fondos oscuros alternos */
    --c-amarillo: #fff100;     /* logo y CTA con texto acero — 13:1 */
    --c-amarillo-2: #e8db00;   /* hover del CTA */
    --c-azul: #006fb8;         /* enlaces y acentos — 5.3:1 sobre blanco */
    --c-gris: #5b6670;         /* texto secundario — 5.9:1 sobre blanco */
    --c-niebla: #c9d2da;       /* texto secundario sobre acero — 10:1 */
    --c-humo: #f4f5f7;         /* fondos alternos */
    --c-borde: #dde2e7;
    --c-wa: #1a7f45;           /* WhatsApp con texto blanco — 5:1 */
    --c-blanco: #fff;
    --c-texto: var(--c-acero);
    --c-foco: var(--c-azul);

    /* Tipografía */
    --f-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

    --t-sm: 0.875rem;
    --t-base: 1.0625rem;
    --t-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --t-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --t-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
    --t-h2: clamp(2rem, 1.55rem + 1.9vw, 3rem);
    --t-h1: clamp(2.5rem, 1.75rem + 3.2vw, 4.25rem);

    /* Espaciado (base 4px) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-seccion: clamp(3rem, 2rem + 4vw, 6rem);

    /* Forma */
    --radio: 2px;
    --ancho: 75rem;
    --header-alto: 4.5rem;
    --sombra: 0 10px 30px rgb(25 39 48 / 0.18);
    --transicion: 180ms ease;
}

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-alto) + var(--s-4));
}

body {
    min-height: 100vh;
    background: var(--c-blanco);
    color: var(--c-texto);
    font-family: var(--f-texto);
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
picture {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

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

[hidden] {
    display: none !important;
}

h1,
h2,
h3,
h4 {
    font-family: var(--f-titulo);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p {
    text-wrap: pretty;
}

a {
    color: var(--c-azul);
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: 3px solid var(--c-foco);
    outline-offset: 2px;
}

/* En fondos oscuros el foco es amarillo. */
.barra-contacto,
.sitio-header,
.sitio-footer {
    --c-foco: var(--c-amarillo);
}

/* Utilidades ------------------------------------------------------------ */
.contenedor {
    width: min(100% - 2rem, var(--ancho));
    margin-inline: auto;
}

.seccion {
    padding-block: var(--s-seccion);
}

.contenido > * + * {
    margin-top: 1em;
}

.contenido + .contenido {
    margin-top: var(--s-7);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.icono {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.saltar {
    position: absolute;
    top: -100px;
    left: var(--s-4);
    z-index: 200;
    padding: var(--s-3) var(--s-4);
    background: var(--c-amarillo);
    color: var(--c-acero);
    font-weight: 600;
    text-decoration: none;
}

.saltar:focus {
    top: var(--s-4);
}

/* Botones --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: 0.6em 1.25em;
    border-radius: var(--radio);
    font-family: var(--f-titulo);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--transicion), color var(--transicion);
}

.btn--cotiza {
    background: var(--c-amarillo);
    color: var(--c-acero);
}

.btn--cotiza:hover {
    background: var(--c-amarillo-2);
}

.btn--wa {
    background: var(--c-wa);
    color: var(--c-blanco);
}

.btn--wa:hover {
    background: #146637;
}

.btn--acero {
    background: var(--c-acero);
    color: var(--c-blanco);
}

.btn--acero:hover {
    background: var(--c-acero-2);
}

.btn--linea {
    border: 2px solid var(--c-acero);
    color: var(--c-acero);
}

.btn--linea:hover {
    background: var(--c-acero);
    color: var(--c-blanco);
}

.btn--grande {
    min-height: 3.25rem;
    padding: 0.8em 1.5em;
    font-size: 1.25rem;
}

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding-bottom: 2px;
    border-bottom: 2px solid currentColor;
    color: var(--c-azul);
    font-family: var(--f-titulo);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.enlace-flecha::after {
    content: "→";
    transition: transform var(--transicion);
}

.enlace-flecha:hover::after {
    transform: translateX(4px);
}

/* Aviso solo para editores cuando falta contenido (nunca lo ve el público). */
.aviso-editor {
    margin-block: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 2px dashed #b45309;
    background: #fffbeb;
    color: #78350f;
    font-size: var(--t-sm);
}

.aviso-editor::before {
    content: "Solo visible para editores · ";
    font-weight: 600;
}

/* Barra superior de contacto ------------------------------------------- */
.barra-contacto {
    background: var(--c-acero-2);
    color: var(--c-niebla);
    font-size: var(--t-sm);
}

.barra-contacto__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 2.75rem;
}

.barra-contacto__horario {
    display: none;
    align-items: center;
    gap: var(--s-2);
}

.barra-contacto__enlaces {
    display: flex;
    gap: var(--s-5);
    margin-left: auto;
}

.barra-contacto a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    color: var(--c-blanco);
    font-weight: 600;
    text-decoration: none;
}

.barra-contacto a:hover {
    color: var(--c-amarillo);
}

@media (min-width: 40em) {
    .barra-contacto__horario {
        display: inline-flex;
    }
}

/* Header ---------------------------------------------------------------- */
.sitio-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-acero);
    color: var(--c-blanco);
    border-bottom: 4px solid var(--c-amarillo);
}

.admin-bar .sitio-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .sitio-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar .sitio-header {
        top: 0;
    }
}

.sitio-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--header-alto);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--c-blanco);
    text-decoration: none;
}

.marca__logo {
    width: auto;
    height: 2.75rem;
}

.marca__nombre {
    max-width: 10ch;
    font-family: var(--f-titulo);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sitio-header .btn--cotiza {
    margin-left: auto;
    padding-inline: 1em;
}

.nav-toggle,
.nav-cerrar,
.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: inherit;
}

.nav-toggle .icono,
.nav-cerrar .icono {
    width: 1.75rem;
    height: 1.75rem;
}

.submenu-toggle .icono {
    transition: transform var(--transicion);
}

.is-open > .submenu-toggle .icono {
    transform: rotate(180deg);
}

/* Menú: móvil (panel lateral) ------------------------------------------ */
@media (max-width: 63.99em) {
    .nav-panel {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 120;
        display: flex;
        flex-direction: column;
        width: min(22rem, 88vw);
        padding: var(--s-4) var(--s-5) var(--s-7);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--c-acero);
        border-left: 4px solid var(--c-amarillo);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 250ms ease, visibility 0s linear 250ms;
    }

    .nav-panel.is-open {
        transform: none;
        visibility: visible;
        transition: transform 250ms ease;
    }

    .nav-panel__cabecera {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--s-4);
    }

    .nav-panel__titulo {
        font-family: var(--f-titulo);
        font-size: 1.25rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--c-niebla);
    }

    .nav-fondo {
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgb(0 0 0 / 0.55);
    }

    body.nav-abierto {
        overflow: hidden;
    }

    .nav-principal .menu,
    .nav-principal .sub-menu {
        list-style: none;
        padding: 0;
    }

    .nav-principal .menu > li {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        border-bottom: 1px solid rgb(255 255 255 / 0.12);
    }

    .nav-principal .menu > li > a,
    .menu-item__label {
        display: block;
        padding-block: var(--s-3);
        color: var(--c-blanco);
        font-family: var(--f-titulo);
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .nav-principal .sub-menu {
        display: none;
        grid-column: 1 / -1;
        padding-bottom: var(--s-3);
    }

    .nav-principal .is-open > .sub-menu {
        display: block;
    }

    .nav-principal .sub-menu a {
        display: block;
        padding: var(--s-2) 0 var(--s-2) var(--s-4);
        color: var(--c-niebla);
        text-decoration: none;
    }

    .nav-principal .sub-menu .sub-menu {
        display: block;
        padding-bottom: 0;
    }

    .nav-principal .sub-menu a:hover,
    .nav-principal .menu > li > a:hover {
        color: var(--c-amarillo);
    }
}

@media (max-width: 22.5em) {
    .marca__nombre {
        font-size: 1rem;
    }

    .sitio-header .btn--cotiza {
        padding-inline: 0.75em;
        font-size: 1rem;
    }
}

/* Menú: escritorio ------------------------------------------------------ */
@media (min-width: 64em) {
    :root {
        --header-alto: 5.25rem;
    }

    .marca__logo {
        height: 3.25rem;
    }

    .marca__nombre {
        font-size: 1.375rem;
    }

    .nav-toggle,
    .nav-panel__cabecera,
    .nav-fondo {
        display: none;
    }

    .nav-panel {
        margin-left: auto;
        align-self: stretch;
    }

    .sitio-header .btn--cotiza {
        margin-left: var(--s-4);
    }

    .nav-principal,
    .nav-principal .menu {
        height: 100%;
    }

    .nav-principal .menu {
        display: flex;
        list-style: none;
        padding: 0;
    }

    .nav-principal .menu > li {
        position: relative;
        display: flex;
        align-items: center;
    }

    .nav-principal .menu > li > a,
    .menu-item__label {
        display: flex;
        align-items: center;
        height: 100%;
        padding-inline: var(--s-3);
        color: var(--c-blanco);
        font-family: var(--f-titulo);
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        text-transform: uppercase;
        box-shadow: inset 0 -4px 0 transparent;
        transition: box-shadow var(--transicion), color var(--transicion);
    }

    .nav-principal .menu > li.menu-item-has-children > a,
    .nav-principal .menu > li.menu-item-has-children > .menu-item__label {
        padding-right: 0;
    }

    .nav-principal .menu > li > a:hover,
    .nav-principal .menu > .current-menu-item > a,
    .nav-principal .menu > .current-menu-ancestor > a {
        color: var(--c-amarillo);
        box-shadow: inset 0 -4px 0 var(--c-amarillo);
    }

    .submenu-toggle {
        width: 1.75rem;
    }

    /* Submenú desplegable */
    .nav-principal .sub-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 60;
        min-width: 15rem;
        padding: var(--s-2) 0;
        list-style: none;
        background: var(--c-blanco);
        border-top: 4px solid var(--c-amarillo);
        box-shadow: var(--sombra);
        --c-foco: var(--c-azul);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity var(--transicion), transform var(--transicion), visibility 0s linear 180ms;
    }

    .nav-principal .menu > li.is-open > .sub-menu,
    .nav-principal .menu > li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity var(--transicion), transform var(--transicion);
    }

    @media (hover: hover) {
        .nav-principal .menu > li:hover > .sub-menu {
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: opacity var(--transicion), transform var(--transicion);
        }
    }

    .nav-principal .sub-menu a {
        display: block;
        padding: var(--s-2) var(--s-5);
        color: var(--c-acero);
        text-decoration: none;
    }

    .nav-principal .sub-menu a:hover,
    .nav-principal .sub-menu .current-menu-item > a {
        background: var(--c-humo);
        color: var(--c-azul);
    }

    /* Nivel 3 en submenú normal: lista anidada con sangría. */
    .nav-principal .sub-menu .sub-menu {
        position: static;
        padding: 0 0 0 var(--s-4);
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: inherit;
        transform: none;
    }

    /* Mega-menú: ítem con la clase "mega". Ocupa el ancho del contenedor, en columnas. */
    .nav-principal .menu > li.mega {
        position: static;
    }

    .nav-principal .menu > li.mega > .sub-menu {
        right: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
        gap: var(--s-2) var(--s-5);
        padding: var(--s-6);
    }

    .nav-principal .mega > .sub-menu > li > a {
        padding: var(--s-2) var(--s-3);
        font-weight: 600;
    }

    .nav-principal .mega > .sub-menu > li.menu-item-has-children > a {
        border-bottom: 2px solid var(--c-amarillo);
        font-family: var(--f-titulo);
        font-size: 1.125rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .nav-principal .mega .sub-menu .sub-menu {
        padding: var(--s-2) 0 0;
    }

    .nav-principal .mega .sub-menu .sub-menu a {
        padding: var(--s-1) var(--s-3);
        font-weight: 400;
    }
}

/* Footer ---------------------------------------------------------------- */
.sitio-footer {
    /* Lamas horizontales sutiles, como una cortina metálica. */
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 14px),
        var(--c-acero);
    color: var(--c-niebla);
    font-size: 0.9375rem;
}

.sitio-footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-7) var(--s-6);
    padding-block: var(--s-8) var(--s-7);
}

.footer-marca {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
}

.footer-marca__desc {
    max-width: 32ch;
}

.footer-col {
    flex: 1 1 9rem;
}

.footer-col__titulo {
    margin-bottom: var(--s-4);
    color: var(--c-amarillo);
    font-size: 1.125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-col ul {
    display: grid;
}

/* Enlaces del footer con zona táctil de 44px (en escritorio, más compactos). */
.footer-col a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
}

.footer-contacto li:not(:has(a)) {
    padding-block: var(--s-2);
}

@media (min-width: 64em) {
    .footer-col a {
        min-height: 2rem;
    }
}

.sitio-footer a {
    color: var(--c-niebla);
    text-decoration: none;
}

.sitio-footer a:hover {
    color: var(--c-blanco);
    text-decoration: underline;
}

.sitio-footer .marca {
    color: var(--c-blanco);
}

.sitio-footer .marca:hover {
    text-decoration: none;
}

.sitio-footer .btn--cotiza {
    color: var(--c-acero);
}

.sitio-footer .btn--cotiza:hover {
    text-decoration: none;
}

.footer-contacto li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
}

.footer-contacto li:not(:has(a)) .icono {
    margin-top: 0.25em;
}

.footer-contacto .icono {
    color: var(--c-amarillo);
}

.sitio-footer__legal {
    border-top: 1px solid rgb(255 255 255 / 0.12);
    font-size: var(--t-sm);
}

.sitio-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-5);
    padding-block: var(--s-5);
}

.sitio-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.sitio-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    list-style: none;
    padding: 0;
}

/* WhatsApp flotante ----------------------------------------------------- */
.wa-flotante {
    position: fixed;
    right: max(var(--s-4), env(safe-area-inset-right));
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--c-wa);
    color: var(--c-blanco);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
    transition: transform var(--transicion);
    --c-foco: var(--c-acero);
}

.wa-flotante:hover {
    transform: scale(1.06);
}

.wa-flotante .icono {
    width: 1.75rem;
    height: 1.75rem;
}

/* Secciones ------------------------------------------------------------- */
.seccion--humo {
    background: var(--c-humo);
}

.seccion--acero {
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 14px),
        var(--c-acero);
    color: var(--c-niebla);
    --c-foco: var(--c-amarillo);
}

.seccion--acero h2,
.seccion--acero h3 {
    color: var(--c-blanco);
}

.seccion__cabecera {
    margin-bottom: var(--s-6);
}

.seccion__cabecera h2::after {
    content: "";
    display: block;
    width: 4rem;
    height: 4px;
    margin-top: var(--s-3);
    background: var(--c-amarillo);
}

.seccion__pie {
    margin-top: var(--s-6);
}

/* Patrón de lamas: fondo de tarjetas sin foto. */
.card-producto__media,
.card-proyecto__media {
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.07) 0 3px, transparent 3px 18px),
        var(--c-acero-2);
}

/* Hero ------------------------------------------------------------------ */
.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(4rem, 2.5rem + 7vw, 8.5rem) clamp(4.5rem, 3rem + 7vw, 9rem);
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.035) 0 3px, transparent 3px 18px),
        var(--c-acero);
    color: var(--c-blanco);
    --c-foco: var(--c-amarillo);
}

/* Franja de señalética al pie del hero. */
.hero::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 10px;
    background: repeating-linear-gradient(-45deg, var(--c-amarillo) 0 14px, var(--c-acero) 14px 28px);
}

.hero__imagen {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--imagen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(25 39 48 / 0.94) 0%, rgb(25 39 48 / 0.75) 55%, rgb(25 39 48 / 0.35) 100%);
}

.hero__titulo {
    max-width: 18ch;
    color: var(--c-blanco);
}

.hero__texto {
    max-width: 52ch;
    margin-top: var(--s-5);
    color: var(--c-niebla);
    font-size: var(--t-lg);
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

/* Franja de confianza --------------------------------------------------- */
.confianza {
    padding-block: var(--s-6);
    background: var(--c-amarillo);
    color: var(--c-acero);
}

.confianza__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--s-5);
}

.confianza__item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding-left: var(--s-4);
    border-left: 3px solid var(--c-acero);
}

.confianza__numero {
    font-family: var(--f-titulo);
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
}

.confianza__texto {
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Pestañas y mosaico de productos -------------------------------------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.tabs__tab {
    min-height: 2.75rem;
    padding: var(--s-2) var(--s-4);
    border: 2px solid var(--c-borde);
    border-radius: var(--radio);
    background: var(--c-blanco);
    color: var(--c-acero);
    font-family: var(--f-titulo);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: border-color var(--transicion), background-color var(--transicion);
}

.tabs__tab:hover {
    border-color: var(--c-acero);
}

.tabs__tab[aria-selected="true"] {
    border-color: var(--c-acero);
    background: var(--c-acero);
    color: var(--c-amarillo);
}

.mosaico {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 16rem;
    grid-auto-flow: dense;
    gap: var(--s-4);
}

.mosaico:focus {
    outline: none;
}

.mosaico__vacio {
    padding: var(--s-6);
    background: var(--c-humo);
    color: var(--c-gris);
    text-align: center;
}

@media (min-width: 40em) {
    .mosaico {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-producto--wide {
        grid-column: span 2;
    }

    .card-producto--tall {
        grid-row: span 2;
    }

    /* Con un número impar de tarjetas la primera ocupa 2×2 para no dejar hueco. */
    .card-producto--grande {
        grid-column: span 2;
        grid-row: span 2;
    }

    .card-producto--grande .card-producto__titulo {
        font-size: var(--t-h3);
    }
}

@media (min-width: 64em) {
    .mosaico {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 15rem;
    }
}

.card-producto {
    position: relative;
    overflow: hidden;
    border-radius: var(--radio);
}

.card-producto__enlace {
    display: block;
    height: 100%;
    color: var(--c-blanco);
    text-decoration: none;
}

.card-producto__enlace:focus-visible {
    outline: 4px solid var(--c-amarillo);
    outline-offset: -4px;
}

.card-producto__media {
    position: absolute;
    inset: 0;
}

.card-producto__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.card-producto__enlace:hover .card-producto__media img {
    transform: scale(1.04);
}

.card-producto__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgb(25 39 48 / 0.92) 100%);
}

.card-producto__cuerpo {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: var(--s-5);
}

.card-producto__titulo {
    font-size: var(--t-h4);
}

.card-producto__texto {
    display: -webkit-box;
    margin-top: var(--s-1);
    overflow: hidden;
    color: var(--c-niebla);
    font-size: var(--t-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-producto__cta {
    display: inline-block;
    margin-top: var(--s-3);
    color: var(--c-amarillo);
    font-family: var(--f-titulo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.card-producto__cta::after {
    content: " →";
}

/* Tarjetas de proyecto -------------------------------------------------- */
/* Columnas explícitas: con pocos proyectos las tarjetas no se encogen a columnas vacías. */
.grid-proyectos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}

@media (min-width: 36em) {
    .grid-proyectos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 48em) {
    .grid-proyectos {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card-proyecto__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-blanco);
    border: 1px solid var(--c-borde);
    border-radius: var(--radio);
    color: var(--c-acero);
    text-decoration: none;
    transition: box-shadow var(--transicion), transform var(--transicion);
}

.card-proyecto__enlace:hover {
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}

.card-proyecto__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.card-proyecto__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-proyecto__cuerpo {
    padding: var(--s-5);
    border-top: 4px solid var(--c-amarillo);
}

.card-proyecto__ciudad {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
    color: var(--c-gris);
    font-size: var(--t-sm);
    font-weight: 600;
}

.card-proyecto__ciudad .icono {
    color: var(--c-azul);
}

.card-proyecto__titulo {
    font-size: var(--t-h4);
}

.card-proyecto__enlace:hover .card-proyecto__titulo {
    color: var(--c-azul);
}

.card-proyecto__cliente {
    margin-top: var(--s-1);
    color: var(--c-gris);
    font-size: var(--t-sm);
}

/* Servicios ------------------------------------------------------------- */
.urgente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    padding: var(--s-4) var(--s-5);
    border-left: 8px solid var(--c-acero);
    background: var(--c-amarillo);
    color: var(--c-acero);
}

.urgente__texto {
    font-family: var(--f-titulo);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Cuadrículas de 4 elementos: 1 → 2 → 4 columnas, nunca un elemento huérfano. */
.servicios,
.razones,
.pasos {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 40em) {
    .servicios,
    .razones,
    .pasos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64em) {
    .servicios,
    .razones,
    .pasos {
        grid-template-columns: repeat(4, 1fr);
    }
}

.servicios {
    gap: var(--s-4);
}

.servicio {
    padding: var(--s-5);
    border-top: 4px solid var(--c-acero);
    background: var(--c-humo);
}

.servicio__titulo {
    margin-bottom: var(--s-2);
    font-size: var(--t-h4);
}

.servicio--destacado {
    border-top-color: var(--c-amarillo);
    background: var(--c-acero);
    color: var(--c-niebla);
}

.servicio--destacado .servicio__titulo {
    color: var(--c-amarillo);
}

/* Por qué elegirnos ----------------------------------------------------- */
.razones {
    gap: var(--s-6);
}

.razon {
    padding-top: var(--s-4);
    border-top: 1px solid rgb(255 255 255 / 0.15);
}

.razon__num {
    display: block;
    color: var(--c-amarillo);
    font-family: var(--f-titulo);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.razon__titulo {
    margin-block: var(--s-2);
    font-size: var(--t-h4);
}

/* Cotización en el home ------------------------------------------------- */
.cotiza-home__inner {
    display: grid;
    gap: var(--s-6);
}

@media (min-width: 64em) {
    .cotiza-home__inner {
        grid-template-columns: 1fr 1.6fr;
        gap: var(--s-8);
        align-items: start;
    }
}

.cotiza-home__intro p {
    max-width: 40ch;
    margin-top: var(--s-4);
    color: var(--c-gris);
}

.cotiza-home__contacto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

/* Formulario ------------------------------------------------------------ */
.form-cotiza {
    position: relative;
    display: grid;
    gap: var(--s-4);
    padding: clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
    border-top: 4px solid var(--c-amarillo);
    background: var(--c-blanco);
    box-shadow: var(--sombra);
}

@media (min-width: 40em) {
    .form-cotiza {
        grid-template-columns: 1fr 1fr;
    }

    .campo--ancho {
        grid-column: 1 / -1;
    }
}

.campo label {
    display: block;
    margin-bottom: var(--s-1);
    font-size: var(--t-sm);
    font-weight: 600;
}

.campo__req {
    color: #b42318;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--c-borde);
    border-radius: var(--radio);
    background: var(--c-blanco);
    transition: border-color var(--transicion);
}

.campo textarea {
    resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--c-azul);
}

.campo__ayuda {
    margin-top: var(--s-1);
    color: var(--c-gris);
    font-size: 0.8125rem;
}

.form-cotiza__trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

.form-cotiza__legal {
    color: var(--c-gris);
    font-size: var(--t-sm);
}

/* Cobertura ------------------------------------------------------------- */
@media (min-width: 64em) {
    .cobertura__inner {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--s-7);
        align-items: start;
    }
}

.cobertura__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: var(--s-2) var(--s-4);
    border: 2px solid var(--c-borde);
    border-radius: var(--radio);
    color: var(--c-acero);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transicion), background-color var(--transicion);
}

.chip:hover {
    border-color: var(--c-acero);
    background: var(--c-humo);
}

.chip .icono {
    color: var(--c-azul);
}

/* Encabezado de páginas interiores -------------------------------------- */
.encabezado-pagina {
    position: relative;
    padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3.5vw, 5rem);
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.035) 0 3px, transparent 3px 18px),
        var(--c-acero);
    color: var(--c-niebla);
    --c-foco: var(--c-amarillo);
}

.encabezado-pagina::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 10px;
    background: repeating-linear-gradient(-45deg, var(--c-amarillo) 0 14px, var(--c-acero) 14px 28px);
}

.encabezado-pagina__antetitulo {
    margin-bottom: var(--s-2);
    color: var(--c-amarillo);
    font-family: var(--f-titulo);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.encabezado-pagina__titulo {
    max-width: 22ch;
    color: var(--c-blanco);
    font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
}

.encabezado-pagina__intro {
    max-width: 60ch;
    margin-top: var(--s-4);
    font-size: var(--t-lg);
}

/* Migas de pan */
.migas {
    margin-bottom: var(--s-5);
    font-size: var(--t-sm);
}

.migas ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
}

.migas li + li::before {
    content: "/";
    margin-right: var(--s-2);
    color: rgb(255 255 255 / 0.35);
}

.migas a {
    color: var(--c-niebla);
    text-decoration: none;
}

.migas a:hover {
    color: var(--c-blanco);
    text-decoration: underline;
}

.migas [aria-current="page"] {
    color: var(--c-blanco);
    font-weight: 600;
}

/* Listados de productos -------------------------------------------------- */
.listado {
    padding-top: var(--s-6);
}

.filtros {
    margin-bottom: var(--s-5);
}

.filtros ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.filtros__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: var(--s-2) var(--s-4);
    border: 2px solid var(--c-borde);
    border-radius: var(--radio);
    color: var(--c-acero);
    font-family: var(--f-titulo);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color var(--transicion), background-color var(--transicion);
}

.filtros__item:hover {
    border-color: var(--c-acero);
}

.filtros__item[aria-current="page"] {
    border-color: var(--c-acero);
    background: var(--c-acero);
    color: var(--c-amarillo);
}

.filtros__num {
    min-width: 1.5em;
    padding: 0 0.4em;
    border-radius: 999px;
    background: var(--c-humo);
    color: var(--c-gris);
    font-family: var(--f-texto);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.6;
    text-align: center;
}

.filtros__item[aria-current="page"] .filtros__num {
    background: rgb(255 255 255 / 0.15);
    color: var(--c-blanco);
}

.listado__conteo {
    margin-bottom: var(--s-4);
    color: var(--c-gris);
    font-size: var(--t-sm);
}

.listado__vacio {
    padding: var(--s-7) var(--s-5);
    background: var(--c-humo);
    color: var(--c-gris);
    text-align: center;
}

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
    gap: var(--s-4);
}

.card-producto--lista {
    height: 24rem;
}

/* Paginación */
.pagination {
    margin-top: var(--s-7);
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--s-3);
    border: 2px solid var(--c-borde);
    color: var(--c-acero);
    font-weight: 600;
    text-decoration: none;
}

.pagination a.page-numbers:hover {
    border-color: var(--c-acero);
}

.pagination .page-numbers.current {
    border-color: var(--c-acero);
    background: var(--c-acero);
    color: var(--c-amarillo);
}

/* Franja de cotización --------------------------------------------------- */
.cta-cotiza {
    padding-block: var(--s-7);
    background: var(--c-amarillo);
    color: var(--c-acero);
    --c-foco: var(--c-acero);
}

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

.cta-cotiza__titulo {
    font-size: var(--t-h3);
}

.cta-cotiza__texto {
    max-width: 50ch;
    margin-top: var(--s-2);
}

.cta-cotiza__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

/* Contenido del editor ---------------------------------------------------- */
.seccion--compacta {
    padding-block: var(--s-7) 0;
}

.prosa {
    max-width: 46rem;
    font-size: var(--t-lg);
}

.prosa > * + * {
    margin-top: 1em;
}

.prosa h2 {
    margin-top: 1.6em;
    font-size: var(--t-h3);
}

.prosa h3 {
    margin-top: 1.4em;
    font-size: var(--t-h4);
}

.prosa ul,
.prosa ol {
    padding-left: 1.25em;
}

.prosa li + li {
    margin-top: 0.35em;
}

.prosa li::marker {
    color: var(--c-azul);
}

/* Pasos (cómo trabajamos) ----------------------------------------------- */
.pasos {
    gap: var(--s-5);
}

.paso {
    padding: var(--s-5);
    border-left: 4px solid var(--c-amarillo);
    background: var(--c-humo);
}

.paso__num {
    display: block;
    color: var(--c-azul);
    font-family: var(--f-titulo);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.paso__titulo {
    margin-block: var(--s-2);
    font-size: var(--t-h4);
}

.paso p {
    color: var(--c-gris);
}

/* Ficha (producto, proyecto, ciudad): galería/contenido + caja lateral --- */
.ficha {
    display: grid;
    gap: var(--s-6);
}

@media (min-width: 64em) {
    .ficha {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--s-7);
        align-items: start;
    }

    .ficha__cotiza {
        position: sticky;
        top: calc(var(--header-alto) + var(--s-5));
    }
}

.ficha__cotiza {
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    border-top: 4px solid var(--c-amarillo);
    background: var(--c-humo);
}

.ficha__cotiza-titulo {
    margin-bottom: var(--s-3);
    font-size: var(--t-h3);
}

.ficha__acciones {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.ficha__acciones .btn {
    width: 100%;
}

.ficha__subtitulo {
    margin: var(--s-6) 0 var(--s-3);
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--c-borde);
    background: var(--c-blanco);
    color: var(--c-acero);
    font-size: var(--t-sm);
    font-weight: 600;
}

a.etiqueta--enlace {
    min-height: 2.75rem;
    border-width: 2px;
    text-decoration: none;
}

a.etiqueta--enlace:hover {
    border-color: var(--c-acero);
}

/* Galería */
.galeria__principal {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.07) 0 3px, transparent 3px 18px),
        var(--c-acero-2);
}

.galeria__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria--vacia {
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / 0.07) 0 3px, transparent 3px 18px),
        var(--c-acero-2);
}

.galeria__miniaturas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.galeria__mini {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 3px solid transparent;
    opacity: 0.7;
    transition: opacity var(--transicion), border-color var(--transicion);
}

.galeria__mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria__mini:hover,
.galeria__mini[aria-pressed="true"] {
    opacity: 1;
}

.galeria__mini[aria-pressed="true"] {
    border-color: var(--c-amarillo);
}

/* Descripción + especificaciones */
.ficha-detalle {
    display: grid;
    gap: var(--s-7);
}

@media (min-width: 64em) {
    .ficha-detalle {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }
}

.ficha-detalle__titulo {
    margin-bottom: var(--s-4);
    font-size: var(--t-h3);
}

.tabla-specs {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-blanco);
}

.tabla-specs th,
.tabla-specs td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-borde);
    text-align: left;
    vertical-align: top;
}

.tabla-specs th {
    width: 40%;
    color: var(--c-gris);
    font-size: var(--t-sm);
    font-weight: 600;
}

/* Lista de datos (proyecto, cotiza) */
.datos {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.datos dt {
    color: var(--c-gris);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.datos dd {
    margin: 0;
    font-weight: 600;
}

.datos dd a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* Ciudad */
.ciudad {
    display: grid;
    gap: var(--s-6);
}

@media (min-width: 64em) {
    .ciudad {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--s-7);
        align-items: start;
    }
}

/* Preguntas frecuentes */
.faq__lista {
    max-width: 52rem;
    border-top: 1px solid var(--c-borde);
}

.faq__item {
    border-bottom: 1px solid var(--c-borde);
}

.faq__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 2.75rem;
    padding: var(--s-4) 0;
    cursor: pointer;
    font-family: var(--f-titulo);
    font-size: var(--t-h4);
    font-weight: 700;
    list-style: none;
}

.faq__pregunta::-webkit-details-marker {
    display: none;
}

.faq__pregunta::after {
    content: "+";
    flex-shrink: 0;
    color: var(--c-azul);
    font-size: 1.75rem;
    line-height: 1;
    transition: transform var(--transicion);
}

.faq__item[open] .faq__pregunta::after {
    transform: rotate(45deg);
}

.faq__respuesta {
    padding-bottom: var(--s-5);
    color: var(--c-gris);
}

/* Formulario: errores y gracias */
.form-cotiza-contenedor:focus {
    outline: none;
}

.form-cotiza__errores {
    padding: var(--s-4);
    border-left: 4px solid #b42318;
    background: #fef3f2;
    color: #7a271a;
}

.form-cotiza__errores ul {
    margin-top: var(--s-2);
    padding-left: 1.25em;
}

.form-cotiza__errores a {
    color: inherit;
}

.campo [aria-invalid="true"] {
    border-color: #b42318;
}

.campo__error {
    margin-top: var(--s-1);
    color: #b42318;
    font-size: var(--t-sm);
    font-weight: 600;
}

.form-cotiza--gracias {
    display: block;
}

.form-cotiza--gracias > * + * {
    margin-top: var(--s-3);
}

.form-cotiza__gracias-titulo {
    font-family: var(--f-titulo);
    font-size: var(--t-h3);
    font-weight: 700;
    line-height: 1.1;
}

/* Página /cotiza/ */
.cotiza-contacto__titulo {
    font-size: var(--t-h3);
}

.cotiza-contacto__lista {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.cotiza-contacto__lista .btn {
    width: 100%;
}

/* Movimiento reducido ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Impresión --------------------------------------------------------------- */
@media print {
    .barra-contacto,
    .nav-panel,
    .nav-toggle,
    .wa-flotante {
        display: none !important;
    }
}