/* ================================================================ */


/* ================================================================
   1. RESET MODERNO
   ================================================================ */

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

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

body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

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

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

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
}

p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}



/* ================================================================
   2. VARIABLES — Design Tokens
   ----------------------------------------------------------------
   Fase 1 (réplica): valores tomados del sitio WordPress original
   (kit global de Elementor). La modernización cambia este bloque.
   ================================================================ */

:root {
    /* ── Colores ──────────────────────────────────── */
    --color-primary:        #17B3DF;  /* cian SIMA: botones, links, acentos */
    --color-primary-hover:  #1298BE;
    --color-secondary:      #263A50;  /* azul acero: sección "por qué escogernos" */
    --color-accent:         #17B3DF;
    --color-primary-text:   #0B7A9C;  /* cian oscurecido: texto cian sobre fondos claros, 4.5:1 */
    --color-ink:            #121B2B;  /* azul noche: header, franjas de página, footer */

    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F9F9F9;  /* fondo de la sección de servicios */
    --color-bg-elevated:    #FFFFFF;

    --color-text:           #222222;
    --color-text-muted:     #5E6470;  /* el #727272 original, oscurecido para 4.5:1 sobre #F9F9F9 */
    --color-text-inverse:   #FFFFFF;
    --color-text-inverse-muted: #C9D3DE; /* texto secundario sobre azul noche */

    --color-border:         #D5DBE2;
    --color-border-strong:  #8A93A0;  /* bordes de inputs: 3:1 sobre blanco */
    --color-border-subtle:  #EEEFF3;
    --color-border-inverse: rgba(255, 255, 255, 0.16);

    /* Verde de WhatsApp — color funcional de la plataforma, no de marca. */
    --color-whatsapp:       #25D366;
    --color-whatsapp-hover: #20BD5A;
    --color-whatsapp-icon:  #FFFFFF;

    /* ── Tipografía ───────────────────────────────── */
    /* Barlow, cercana a las piezas gráficas de SIMA. La condensada va en
       menú, botones, filtros y teléfonos. */
    --font-display: 'Barlow', 'Arial Narrow', Arial, sans-serif;
    --font-body:    'Barlow', 'Arial Narrow', Arial, sans-serif;
    --font-condensed: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

    /* Escala única (ver auditoría): párrafos 17-18 px, nada por debajo de 14 px */
    --text-xs:   clamp(0.875rem,  0.85rem + 0.1vw,  0.9375rem);
    --text-sm:   clamp(0.9375rem, 0.9rem  + 0.15vw, 1rem);
    --text-base: clamp(1.0625rem, 1rem    + 0.2vw,  1.125rem);
    --text-lg:   clamp(1.25rem,   1.15rem + 0.35vw, 1.5rem);
    --text-xl:   clamp(1.5rem,    1.3rem  + 0.6vw,  1.875rem);
    --text-2xl:  clamp(1.875rem,  1.35rem + 2.2vw,  3.25rem);
    --text-hero: clamp(2.25rem,   1.7rem  + 2.2vw,  3.5rem);

    /* ── Espaciado ────────────────────────────────── */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;
    --space-4xl:  6rem;

    /* ── Radios ───────────────────────────────────── */
    --radius-sm:    2px;   /* botones del original: casi rectos */
    --radius-md:    4px;
    --radius-lg:    12px;
    --radius-xl:    20px;  /* fotos de las páginas de servicio */
    --radius-2xl:   24px;
    --radius-full:  9999px;

    /* ── Sombras ──────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(18, 27, 43, 0.08), 0 1px 2px rgba(18, 27, 43, 0.04);
    --shadow-md: 0 4px 14px rgba(18, 27, 43, 0.08), 0 2px 4px rgba(18, 27, 43, 0.05);
    --shadow-lg: 0 10px 30px rgba(18, 27, 43, 0.14), 0 4px 8px rgba(18, 27, 43, 0.08);
    --shadow-xl: 0 20px 60px rgba(18, 27, 43, 0.25);

    /* ── Transiciones ─────────────────────────────── */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms var(--ease-out-expo);
    --transition-slow: 400ms var(--ease-out-expo);

    /* ── Layout ───────────────────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1360px;  /* contenido a lo ancho en pantallas grandes */
    --container-2xl: 1440px;

    --header-height: 76px;
    --ribbon-height: 52px;
}

@media (min-width: 1024px) {
    :root {
        --header-height: 96px;
        --ribbon-height: 64px;
    }
}


/* ── Prefers reduced motion — accesibilidad ─────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ================================================================
   3. BASE — Estilos globales del documento
   ================================================================ */

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/barlow-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/barlow-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/barlow-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/barlow-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: var(--text-hero); line-height: 1.15; }
h2 { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl);  line-height: 1.3; }

p {
    color: var(--color-text-muted);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ── Superficies del navegador ────────────────────── */
::selection {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

input,
textarea {
    caret-color: var(--color-primary);
}

::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--color-primary);
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

table,
.price {
    font-variant-numeric: tabular-nums;
}

html {
    scrollbar-color: var(--color-secondary) var(--color-bg-alt);
}

@view-transition {
    navigation: auto;
}


/* ================================================================
   4. LAYOUT — Contenedores y secciones
   ================================================================ */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-xl);
    }
}

.section {
    padding-block: var(--space-3xl);
}

@media (min-width: 1024px) {
    .section {
        padding-block: var(--space-4xl);
    }
}

.section--alt   { background-color: var(--color-bg-alt); }
.section--steel { background-color: var(--color-secondary); }
.section--ink   { background-color: var(--color-ink); }

.section--steel :is(h2, h3, h4),
.section--ink :is(h2, h3, h4) {
    color: var(--color-text-inverse);
}

.section--steel p,
.section--ink p {
    color: var(--color-text-inverse-muted);
}

/* Encabezado de sección: eyebrow cian + título (patrón del original) */
.section-heading__eyebrow {
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-primary-text);
}

.section--steel .section-heading__eyebrow,
.section--ink .section-heading__eyebrow {
    color: var(--color-primary);
}

.section-heading__title {
    max-width: 24ch;
}

.section-heading--center {
    text-align: center;
}

.section-heading--center .section-heading__lead {
    max-width: var(--container-md);
    margin-inline: auto;
    text-wrap: balance;
}

@media (min-width: 1024px) {
    .section-heading--center .section-heading__title {
        white-space: nowrap;
    }

    /* A todo el ancho del contenedor para que quede en dos renglones */
    .section-heading--center .section-heading__lead {
        max-width: none;
    }
}

.section-heading--center .section-heading__title {
    max-width: none;
}

.section-heading__lead {
    margin-top: var(--space-md);
}

/* Título + botón en la misma fila (sección de servicios) */
.section-heading--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

/* Dos columnas genéricas */
.split {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
    }

    .split--top {
        align-items: start;
    }
}


/* ================================================================
   5. COMPONENTES
   ================================================================ */

/* ──────────────────────────────────────────────────
   BUTTON
   ────────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.875rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.button:hover {
    background-color: var(--color-primary-hover);
}

.button:active {
    transform: translateY(1px);
}

.button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.button--small {
    padding: 0.6rem 1.1rem;
}

.button--outline {
    color: var(--color-secondary);
    background-color: transparent;
    border-color: var(--color-secondary);
}

.button--outline:hover,
.button--outline.is-active {
    color: var(--color-text-inverse);
    background-color: var(--color-secondary);
}

.button--block {
    width: 100%;
}

/* Placa industrial: esquina recortada a 45° y relleno blanco que barre
   de izquierda a derecha. El texto va en azul noche porque el blanco
   sobre el cian no llega a 4.5:1. El clip-path recorta el outline, por
   eso el foco se dibuja hacia adentro. */
.button--plate {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1rem 1.625rem;
    font-family: var(--font-condensed);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink);
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.button--plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-text-inverse);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.button--plate .button__icon {
    width: 1.25em;
    height: 1.25em;
    transition: transform var(--transition-base);
}

.button--plate:hover {
    background-color: var(--color-primary);
}

.button--plate:hover::before,
.button--plate:focus-visible::before {
    transform: scaleX(1);
}

.button--plate:hover .button__icon,
.button--plate:focus-visible .button__icon {
    transform: translateX(4px);
}

.button--large {
    padding: 1.25rem 1.75rem 1.25rem 2rem;
    font-size: 1.1875rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

/* Sobre fondo claro el barrido blanco no se vería: barre azul noche */
.button--on-light::before {
    background-color: var(--color-ink);
}

.button--on-light:hover,
.button--on-light:focus-visible {
    color: var(--color-text-inverse);
}

.button--plate:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: -5px;
}

.button--ghost {
    color: var(--color-text-inverse);
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
}

.button--ghost:hover {
    color: var(--color-ink);
    background-color: var(--color-text-inverse);
}

.button__icon {
    width: 1em;
    height: 1em;
    flex: none;
}

/* Link de texto "Ver Más" con flecha */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-base);
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.text-link svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-fast);
}

.text-link:hover {
    color: var(--color-primary-hover);
}

.text-link:hover svg {
    transform: translateX(3px);
}


/* ──────────────────────────────────────────────────
   HEADER
   ────────────────────────────────────────────────── */
/* Fijo y transparente sobre el hero de la home; en las páginas
   internas flota sobre la franja azul noche. Con scroll toma fondo
   sólido (.is-scrolled, initHeaderScroll). */
.site-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 100;
    background-color: transparent;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled,
.site-header.is-menu-open {
    background-color: var(--color-ink);
    box-shadow: 0 1px 0 var(--color-border-inverse);
}

.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: var(--header-height);
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .site-header__container {
        padding-inline: var(--space-xl);
    }
}

.site-header__logo {
    display: block;
    flex: none;
    view-transition-name: site-logo;
    transition: opacity var(--transition-fast);
}

.site-header__logo img {
    width: auto;
    height: 54px;
}

@media (min-width: 1024px) {
    .site-header__logo img {
        height: 70px;
    }
}

.site-header__logo:hover {
    opacity: 0.8;
}

/* Velo oscuro detrás del header transparente: mantiene legible el menú
   sobre cualquier foto del slideshow. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -32px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(18, 27, 43, 0.82), rgba(18, 27, 43, 0));
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.site-header.is-scrolled::before,
.site-header.is-menu-open::before {
    opacity: 0;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-left: auto;
}

.site-header__actions .button {
    display: none;
}

@media (min-width: 1024px) {
    .site-header__actions {
        margin-left: 0;
    }

    .site-header__actions .button {
        display: inline-flex;
    }
}

/* Selector de idioma con banderas */
.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.lang-switch__flag {
    display: block;
    padding: 4px;
    line-height: 0;
    border-bottom: 2px solid transparent;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.lang-switch__flag .flag {
    width: 28px;
    height: 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.lang-switch__flag--current {
    border-bottom-color: var(--color-primary);
}

a.lang-switch__flag {
    opacity: 0.6;
}

a.lang-switch__flag:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.site-header__menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-sm);
}

.site-header__menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
    .site-header__menu-toggle {
        display: none;
    }
}


/* ──────────────────────────────────────────────────
   NAVIGATION
   ────────────────────────────────────────────────── */
/* Mobile: panel a pantalla completa debajo del header. */
.site-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    inset-inline: 0;
    bottom: 0;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
    background-color: var(--color-ink);
}

.site-nav--open {
    display: block;
}

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

.site-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0;
    font-family: var(--font-condensed);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    transition: color var(--transition-fast);
}

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

.site-nav__plus {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

.site-nav__item:hover .site-nav__plus,
.site-nav__item:focus-within .site-nav__plus {
    transform: rotate(135deg);
}

.site-nav__submenu {
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-border-inverse);
}

.site-nav__sublink {
    display: block;
    padding: 0.6rem 0;
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
    transition: color var(--transition-fast);
}

.site-nav__sublink:hover,
.site-nav__sublink[aria-current="page"] {
    color: var(--color-primary);
}

.site-nav__cta {
    margin-top: var(--space-lg);
}

@media (min-width: 1024px) {
    .site-nav {
        display: block;
        position: static;
        overflow: visible;
        padding: 0;
        background-color: transparent;
    }

    .site-nav__list {
        flex-direction: row;
        gap: var(--space-xl);
    }

    .site-nav__item {
        position: relative;
    }

    .site-nav__link {
        padding: 0.75rem 0;
        font-size: 1.125rem;
        color: var(--color-text-inverse);
    }

    /* Barra cian que barre bajo el link; fija en la página actual */
    .site-nav__link::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 3px;
        background-color: var(--color-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition-base);
    }

    .site-nav__link:hover::after,
    .site-nav__link:focus-visible::after,
    .site-nav__link[aria-current="page"]::after {
        transform: scaleX(1);
    }

    /* Submenú de servicios: placa azul noche con borde cian */
    .site-nav__submenu {
        position: absolute;
        top: 100%;
        left: -1.25rem;
        min-width: 270px;
        padding: var(--space-sm) 0;
        border-left: 0;
        border-top: 3px solid var(--color-primary);
        background-color: var(--color-ink);
        box-shadow: var(--shadow-xl);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    }

    .site-nav__item:hover .site-nav__submenu,
    .site-nav__item:focus-within .site-nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .site-nav__sublink {
        padding: 0.7rem 1.25rem;
        font-weight: 500;
        color: var(--color-text-inverse);
        transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
    }

    .site-nav__sublink:hover,
    .site-nav__sublink[aria-current="page"] {
        color: var(--color-primary);
        background-color: var(--color-secondary);
    }

    .site-nav__cta {
        display: none;
    }
}


/* ──────────────────────────────────────────────────
   HERO (home) — slideshow de fondo con fade y Ken Burns
   ────────────────────────────────────────────────── */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: calc(var(--ribbon-height) + var(--space-2xl));
    overflow: hidden;
    background-color: var(--color-ink);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sin JS solo se ve la primera foto. Con JS (initHeroSlideshow) se
   cargan las demás y empieza el ciclo: 5 fotos × 5 s, fade de 0.5 s
   y zoom lento hacia adentro, igual que el slideshow de Elementor. */
.hero__slide + .hero__slide {
    opacity: 0;
}

.hero__media.is-playing .hero__slide {
    opacity: 0;
    animation: hero-slide 25s linear infinite;
}

/* La primera arranca medio segundo adelantada (ya visible) para que
   no parpadee al pasar de la foto estática al ciclo. */
.hero__media.is-playing .hero__slide:nth-child(1) { animation-delay: -0.5s; }
.hero__media.is-playing .hero__slide:nth-child(2) { animation-delay: 4.5s; }
.hero__media.is-playing .hero__slide:nth-child(3) { animation-delay: 9.5s; }
.hero__media.is-playing .hero__slide:nth-child(4) { animation-delay: 14.5s; }
.hero__media.is-playing .hero__slide:nth-child(5) { animation-delay: 19.5s; }

@keyframes hero-slide {
    0%     { opacity: 0; transform: scale(1); }
    2%     { opacity: 1; }
    20%    { opacity: 1; }
    22%    { opacity: 0; transform: scale(1.12); }
    100%   { opacity: 0; transform: scale(1.12); }
}

/* Mobile: velo parejo. Desktop: oscuro a la izquierda, donde vive el
   texto, para que se lea igual sobre las fotos claras del slideshow. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(18, 27, 43, 0.74);
}

.hero__container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero__title {
    max-width: none;
    margin-bottom: var(--space-lg);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
}

.hero__subtitle {
    max-width: 30ch;
    margin-bottom: var(--space-md);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-text-inverse);
}

.hero__text {
    max-width: 58ch;
    margin-bottom: var(--space-xl);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-inverse);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg) var(--space-xl);
}

.hero__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-inverse);
}

.hero__stat-number {
    font-family: var(--font-condensed);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .hero__overlay {
        background: linear-gradient(90deg, rgba(18, 27, 43, 0.92) 0%, rgba(18, 27, 43, 0.82) 55%, rgba(18, 27, 43, 0.15) 100%);
    }
}


/* Mobile: título más compacto para que todo quepa en la primera pantalla
   y botón a todo lo ancho. */
@media (max-width: 639px) {
    .section-heading__eyebrow {
        font-size: var(--text-sm);
    }

    .hero {
        padding-top: calc(var(--header-height) + var(--space-lg));
        padding-bottom: calc(var(--ribbon-height) + var(--space-lg));
    }

    .hero__title {
        margin-bottom: var(--space-md);
        font-size: 1.875rem;
    }

    .hero__subtitle {
        max-width: none;
        font-size: 1.25rem;
    }

    .hero__text {
        margin-bottom: var(--space-lg);
        line-height: 1.5;
    }

    .hero__actions {
        gap: var(--space-md);
    }

    .hero__actions .button {
        width: 100%;
    }
}

.hero-ribbon {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    height: var(--ribbon-height);
    overflow: hidden;
    background-color: var(--color-primary);
}

.hero-ribbon__track {
    display: flex;
    width: max-content;
    animation: ribbon-scroll 45s linear infinite;
}

.hero-ribbon:hover .hero-ribbon__track {
    animation-play-state: paused;
}

.hero-ribbon__group {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
}

.hero-ribbon__item {
    display: flex;
    align-items: center;
    font-family: var(--font-condensed);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--color-ink);
}

/* Separadores: íconos industriales */
.hero-ribbon__item svg {
    flex: none;
    width: 26px;
    height: 26px;
    margin-inline: var(--space-xl);
    color: var(--color-ink);
}

@keyframes ribbon-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-ribbon__track {
        animation: none;
    }
}


/* ──────────────────────────────────────────────────
   PAGE HERO — franja azul noche de las páginas internas
   ────────────────────────────────────────────────── */
.page-hero {
    padding-top: calc(var(--header-height) + var(--space-sm));
    padding-bottom: var(--space-xl);
    background-color: var(--color-ink);
}

.page-hero__title {
    font-size: var(--text-2xl);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-text-inverse);
}

.page-hero__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-top: var(--space-md);
    background-color: var(--color-primary);
}

.page-hero__text {
    margin-top: var(--space-lg);
    font-size: var(--text-base);
    color: var(--color-text-inverse);
}


/* Variante con foto: contenido a la izquierda, sobre la parte oscura del velo */
.page-hero--media {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 320px;
    padding-bottom: var(--space-2xl);
    overflow: hidden;
}

.page-hero__media {
    position: absolute;
    inset: 0;
}

.page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(18, 27, 43, 0.74);
}

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

.page-hero__container {
    position: relative;
    z-index: 1;
}

.page-hero--media .page-hero__title {
    font-size: clamp(2.5rem, 1.9rem + 3.6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.page-hero--media .page-hero__title::after {
    width: 64px;
    height: 4px;
    margin-top: var(--space-md);
}

.page-hero--media .page-hero__text {
    max-width: 44rem;
    margin-top: var(--space-md);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: balance;
}

@media (min-width: 1024px) {
    .page-hero--media {
        min-height: 420px;
    }

    .page-hero__media::after {
        background: linear-gradient(90deg, rgba(18, 27, 43, 0.92) 0%, rgba(18, 27, 43, 0.78) 50%, rgba(18, 27, 43, 0.2) 100%);
    }
}

/* Breadcrumbs */
.breadcrumb {
    margin-bottom: var(--space-md);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.breadcrumb__item svg {
    width: 12px;
    height: 12px;
    color: var(--color-text-inverse);
    transform: rotate(-90deg);
}

.breadcrumb__link {
    color: var(--color-text-inverse);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary);
}


/* ──────────────────────────────────────────────────
   COMPANY — Nosotros en la home: dos columnas iguales dentro del
   contenedor. La foto mide lo mismo que el texto: arriba y abajo
   terminan a la misma altura.
   ────────────────────────────────────────────────── */
.company {
    display: grid;
    gap: var(--space-xl);
}

.company__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.company__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
    /* Acerca la foto desde abajo: recorta el techo de la nave, que sobra */
    transform: scale(1.18);
    transform-origin: 48% 100%;
}

.company__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text-inverse);
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.company__badge-accent {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.company__content {
    display: grid;
    justify-items: start;
}

/* En media columna: tope de 48 px y usar todo el ancho para gastar menos renglones */
.company__title {
    margin-bottom: var(--space-md);
    font-size: min(var(--text-2xl), 3rem);
    text-wrap: balance;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.company__text {
    margin-bottom: var(--space-xl);
    color: var(--color-text);
}

/* Sin el acercamiento de la foto de la home; encuadra al trabajador */
.company__photo--natural {
    object-position: 74% center;
    transform: none;
}

.company__blocks {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

/* Tarjetas de Visión y Misión: placas azul noche con la misma esquina
   recortada de los botones. */
.company__block {
    padding: 1.25rem;
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.company__block-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-xs);
    padding-bottom: 0.6rem;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.company__block-title svg {
    flex: none;
    width: 26px;
    height: 26px;
}

.company__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.4rem;
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--color-text-inverse);
}

.company__item svg {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 0.2em;
    color: var(--color-primary);
}

@media (min-width: 640px) {
    .company__blocks {
        grid-template-columns: 1fr 1fr;
    }
}

/* Foto y título en la primera fila; Visión y Misión abajo, a todo lo
   ancho, cada tarjeta alineada con su columna. */
@media (min-width: 1024px) {
    .company {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .company__media {
        aspect-ratio: auto;
        min-height: 340px;
    }

    .company__content {
        align-content: center;
    }

    .company__blocks {
        grid-column: 1 / -1;
        gap: var(--space-xl);
    }
}


/* ──────────────────────────────────────────────────
   QUALITY — sección oscura de /servicios/: encabezado centrado y
   placas blancas de igual tamaño
   ────────────────────────────────────────────────── */
.quality__header {
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.quality__text {
    max-width: 46rem;
    margin: var(--space-md) auto 0;
    color: var(--color-text);
    text-wrap: balance;
}

.quality__grid {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 0.75rem;
}

.quality__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem var(--space-lg) 1rem var(--space-md);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-inverse);
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    transition: transform var(--transition-base);
}

/* Mismo hover sutil que los puntos de "¿Por qué escogernos?" */
.quality__item::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.quality__item svg {
    flex: none;
    width: 34px;
    height: 34px;
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .quality__item:hover {
        transform: translateY(-3px);
    }

    .quality__item:hover::after {
        transform: scaleX(1);
    }

    .quality__item:hover svg {
        transform: scale(1.08);
    }
}

@media (min-width: 640px) {
    .quality__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Una sola línea: tope de 44 px para que quepa en el contenedor */
@media (min-width: 1100px) {
    .quality__header h2 {
        font-size: 2.75rem;
        white-space: nowrap;
    }
}

@media (min-width: 1024px) {
    .quality__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ──────────────────────────────────────────────────
   FEATURES — "¿Por qué escogernos?"
   ────────────────────────────────────────────────── */
/* Dos columnas iguales: la foto termina a la misma altura que el texto. */
.features__layout {
    display: grid;
    gap: var(--space-2xl);
}

.features__title {
    margin-bottom: var(--space-lg);
    font-size: min(var(--text-2xl), 3rem);
    text-wrap: balance;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.features__grid {
    display: grid;
    gap: 0.75rem;
    margin-block: var(--space-xl);
}

/* Placas azul noche, de la misma familia que Visión y Misión */
.feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1rem 1rem;
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    transition: transform var(--transition-base);
}

/* Hover sutil: la placa sube, el ícono crece y una línea cian barre abajo */
.feature::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.feature__icon {
    flex: none;
    width: 38px;
    height: 38px;
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .feature:hover {
        transform: translateY(-3px);
    }

    .feature:hover::after {
        transform: scaleX(1);
    }

    .feature:hover .feature__icon {
        transform: scale(1.08);
    }
}

.feature__title {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.25;
}

.features__closing {
    margin-bottom: var(--space-lg);
    color: var(--color-text-inverse);
}

.features__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.features__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

@media (min-width: 520px) {
    .features__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .features__layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .features__media {
        aspect-ratio: auto;
    }
}


/* ──────────────────────────────────────────────────
   SERVICE CARD — grid de servicios (3 + 2)
   ────────────────────────────────────────────────── */
.services-grid {
    display: grid;
    gap: var(--space-lg);
}

/* Placas azul noche: toda la tarjeta es clicable (ver __link::after).
   Hover: la foto se acerca, la flecha avanza y una línea cian barre abajo. */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
    transition: transform var(--transition-base);
}

.service-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.service-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.service-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg);
}

.service-card__title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-inverse);
}

.service-card__text {
    margin-bottom: var(--space-lg);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-inverse-muted);
}

/* Empuja el link abajo para que todas las tarjetas cierren parejas */
.service-card .text-link {
    margin-top: auto;
    font-weight: 600;
    color: var(--color-primary);
}

.service-card .text-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.service-card:focus-within::after {
    transform: scaleX(1);
}

@media (hover: hover) {
    .service-card:hover {
        transform: translateY(-3px);
    }

    .service-card:hover::after {
        transform: scaleX(1);
    }

    .service-card:hover .service-card__image {
        transform: scale(1.05);
    }

    .service-card:hover .text-link svg {
        transform: translateX(3px);
    }
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .service-card {
        grid-column: span 3;
    }

    /* Con 2 columnas, la quinta tarjeta ocupa toda la fila: no queda sola a un lado */
    .service-card:last-child {
        grid-column: span 6;
    }

    .service-card:last-child .service-card__media {
        aspect-ratio: 5 / 2;
    }
}

@media (min-width: 1024px) {
    .service-card {
        grid-column: span 2;
    }

    .service-card--wide,
    .service-card:last-child {
        grid-column: span 3;
    }

    /* Las dos anchas: foto apaisada para no crecer de más en altura */
    .service-card--wide .service-card__media,
    .service-card:last-child .service-card__media {
        aspect-ratio: 2 / 1;
    }
}


/* ──────────────────────────────────────────────────
   PROJECTS — galería filtrable
   ────────────────────────────────────────────────── */
.projects__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-block: var(--space-xl) var(--space-2xl);
}

.projects__filter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0.8rem 1.4rem;
    font-family: var(--font-condensed);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink);
    border: 2px solid var(--color-ink);
    transition: color var(--transition-fast);
}

.projects__filter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.projects__filter:hover,
.projects__filter.is-active {
    color: var(--color-text-inverse);
}

.projects__filter:hover::before,
.projects__filter.is-active::before {
    transform: scaleX(1);
}

.projects__filter:active {
    transform: translateY(1px);
}

/* Filas parejas según las fotos visibles (script.js pone data-filter):
   todas 3 + 4, Construcción 2 + 2, Estructuras 3. */
.projects__grid {
    display: grid;
    gap: var(--space-md);
}

.project {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.project[hidden] {
    display: none;
}

.project::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.project__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.project__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.45rem var(--space-md);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    background-color: var(--color-ink);
}

@media (hover: hover) {
    .project:hover .project__image {
        transform: scale(1.05);
    }

    .project:hover::after {
        transform: scaleX(1);
    }
}

@media (min-width: 640px) {
    .projects__grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 220px;
    }

    .project {
        grid-column: span 6;
        aspect-ratio: auto;
    }

    /* Número impar: la última ocupa la fila completa */
    .project:last-child {
        grid-column: span 12;
    }

    .projects__grid[data-filter="construccion"] .project:nth-child(4) {
        grid-column: span 6;
    }
}

@media (min-width: 1024px) {
    .projects__grid {
        grid-auto-rows: 260px;
    }

    .project,
    .project:last-child {
        grid-column: span 3;
    }

    .project:nth-child(-n+3) {
        grid-column: span 4;
    }

    .projects__grid[data-filter="construccion"] .project {
        grid-column: span 6;
    }

    .projects__grid[data-filter="estructuras"] .project {
        grid-column: span 4;
    }
}


/* ──────────────────────────────────────────────────
   FAQ — acordeón con <details>
   ────────────────────────────────────────────────── */
/* Eje central: encabezado, acordeón en placas blancas y botón de cierre */
.faq__layout {
    display: grid;
    justify-items: center;
    gap: var(--space-2xl);
}

.faq__header {
    max-width: 46rem;
    text-align: center;
}

.section--ink .faq__text {
    margin-top: var(--space-md);
    color: var(--color-text-inverse);
}

.faq__list {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    max-width: 58rem;
}

.faq__item {
    position: relative;
    background-color: var(--color-bg);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.7rem 1.5rem 0.7rem var(--space-lg);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
    list-style: none;
    cursor: pointer;
}

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

.faq__question:focus-visible {
    outline-offset: -4px;
}

.faq__toggle {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-ink);
    background-color: var(--color-primary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.faq__toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-base);
}

.faq__question:hover .faq__toggle,
.faq__item[open] .faq__toggle {
    color: var(--color-text-inverse);
    background-color: var(--color-ink);
}

.faq__item[open] .faq__toggle svg {
    transform: rotate(135deg);
}

.faq__answer {
    padding: 0 var(--space-lg) var(--space-md);
    font-size: var(--text-base);
    color: var(--color-text);
}

.section--ink .faq__answer p {
    color: var(--color-text);
}

.faq__answer ul {
    display: grid;
    gap: var(--space-xs);
    padding-left: var(--space-lg);
    list-style: disc;
}

.faq__answer p + ul {
    margin-top: var(--space-sm);
}

.faq__answer strong {
    font-weight: 600;
    color: var(--color-ink);
}


/* ──────────────────────────────────────────────────
   CLIENTS — título centrado y cinta horizontal de logos
   ────────────────────────────────────────────────── */
.clients {
    padding-block: var(--space-3xl);
}

.clients__container {
    display: grid;
    gap: var(--space-xl);
}

.clients__title {
    font-size: var(--text-2xl);
    text-align: center;
}

.clients__viewport {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
}

.clients__track {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    width: max-content;
    animation: clients-scroll 40s linear infinite;
}

.clients__viewport:hover .clients__track {
    animation-play-state: paused;
}

/* La segunda copia de los logos cierra el loop de la cinta */
.clients__clone {
    display: contents;
}

.clients__logo {
    width: 170px;
    height: auto;
}

@keyframes clients-scroll {
    to { transform: translateX(calc(-50% - var(--space-xl) / 2)); }
}


/* ──────────────────────────────────────────────────
   SERVICE INTRO y BAND — páginas de servicio: apertura clara con
   label, título, texto y foto; banda azul noche con dos columnas.
   ────────────────────────────────────────────────── */
.service-intro {
    display: grid;
    gap: var(--space-xl);
}

.service-intro__content {
    align-self: center;
}

.service-intro__text {
    margin-top: var(--space-md);
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--color-text);
}

.service-intro__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.service-intro__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-band {
    padding-block: var(--space-3xl);
    background-color: var(--color-ink);
}

.service-band__grid {
    display: grid;
    gap: var(--space-2xl);
}

.service-band__title {
    margin-bottom: var(--space-md);
    padding-top: var(--space-md);
    font-size: var(--text-xl);
    color: var(--color-text-inverse);
    border-top: 3px solid var(--color-primary);
}

.service-band__text {
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--color-text-inverse);
}

.service-band__list {
    display: grid;
    gap: var(--space-sm);
}

.service-band__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--text-lg);
    line-height: 1.35;
    color: var(--color-text-inverse);
}

.service-band__item svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 0.25em;
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .service-intro,
    .service-band__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .service-band {
        padding-block: var(--space-4xl);
    }
}


/* ──────────────────────────────────────────────────
   SERVICE GALLERY — filas parejas 3 + 2, misma placa de Proyectos
   ────────────────────────────────────────────────── */
.service-gallery {
    display: grid;
    gap: var(--space-md);
}

.service-gallery__item {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.service-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

@media (hover: hover) {
    .service-gallery__item:hover .service-gallery__image {
        transform: scale(1.05);
    }
}

@media (min-width: 640px) {
    .service-gallery {
        grid-template-columns: repeat(6, 1fr);
    }

    .service-gallery__item {
        grid-column: span 3;
    }

    .service-gallery__item:last-child {
        grid-column: span 6;
        aspect-ratio: 2 / 1;
    }
}

@media (min-width: 1024px) {
    .service-gallery__item {
        grid-column: span 2;
    }

    .service-gallery__item:nth-child(n+4),
    .service-gallery__item:last-child {
        grid-column: span 3;
        aspect-ratio: 2 / 1;
    }
}


/* Variante con número par de fotos (Renta): 3 + 3, todas iguales */
@media (min-width: 640px) {
    .service-gallery--even .service-gallery__item:last-child {
        grid-column: span 3;
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 1024px) {
    .service-gallery--even .service-gallery__item,
    .service-gallery--even .service-gallery__item:nth-child(n+4),
    .service-gallery--even .service-gallery__item:last-child {
        grid-column: span 2;
        aspect-ratio: 3 / 2;
    }
}

/* ──────────────────────────────────────────────────
   CONTACT — datos + formulario + mapa
   ────────────────────────────────────────────────── */
/* Dos columnas iguales de la misma altura y el mapa debajo, dentro
   del contenedor, con el padding de la sección antes del footer. */
.contact__grid {
    display: grid;
    gap: var(--space-xl);
}

/* Card azul noche, del mismo tamaño que la del formulario. Los datos son
   renglones con líneas finas, repartidos hasta el fondo de la card. */
.contact__card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--space-lg) var(--space-md);
    background-color: var(--color-ink);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.contact__card .section-heading__eyebrow {
    color: var(--color-primary);
}

.contact__card h2 {
    color: var(--color-text-inverse);
}

.contact__intro {
    margin-block: var(--space-md) var(--space-lg);
    color: var(--color-text-inverse);
}

.contact__list {
    display: grid;
    flex: 1;
    align-content: end;
}

.contact__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
    border-top: 1px solid var(--color-border-inverse);
}

.contact__icon {
    flex: none;
    width: 30px;
    height: 30px;
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .contact__item:hover .contact__icon {
        transform: scale(1.08);
    }
}

.contact__label {
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
}

.contact__value {
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-inverse);
    overflow-wrap: anywhere;
    transition: color var(--transition-fast);
}

a.contact__value:hover {
    color: var(--color-primary);
}

/* Formulario: placa gris claro con la misma esquina recortada */
.contact-form {
    display: grid;
    gap: var(--space-md);
    align-content: start;
    padding: var(--space-lg);
    background-color: var(--color-bg-alt);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.contact-form__field {
    display: grid;
    gap: var(--space-xs);
}

.contact-form__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
}

.contact-form__input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form__input:hover {
    border-color: var(--color-ink);
}

.contact-form__input:focus-visible {
    border-color: var(--color-primary-text);
    border-radius: 0;
    outline: none;
    box-shadow: inset 0 -3px 0 var(--color-primary);
}

.contact-form__input--textarea {
    min-height: 8rem;
    resize: vertical;
}

.map {
    height: 360px;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 1024px) {
    .contact__grid {
        grid-template-columns: 1fr 1fr;
    }

    .map {
        grid-column: 1 / -1;
        height: 420px;
    }
}


/* ──────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────── */
/* Teléfonos en condensada, como en las piezas gráficas de la marca */
a[href^="tel:"] {
    font-family: var(--font-condensed);
    font-size: 1.125em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.site-footer {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-md);
    font-weight: 500;
    background-color: var(--color-ink);
    border-top: 3px solid var(--color-primary);
}

.site-footer__container {
    display: grid;
    gap: var(--space-xl);
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

/* Tres columnas iguales: marca | servicios | contacto */
@media (min-width: 900px) {
    .site-footer__container {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        padding-inline: var(--space-xl);
    }
}

.site-footer__logo-img {
    width: auto;
    height: 72px;
    margin-bottom: var(--space-sm);
}

.site-footer__tagline {
    max-width: 38ch;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-inverse-muted);
}

.site-footer__title {
    margin-bottom: 0.75rem;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-inverse);
}

.site-footer__list {
    display: grid;
    gap: 0.4rem;
}

.site-footer__link {
    color: var(--color-text-inverse-muted);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--color-text-inverse);
    text-decoration-color: var(--color-primary);
}

.site-footer__link--nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* El chevron del sprite apunta hacia abajo: aquí se gira a la derecha */
.site-footer__link--nav svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--color-primary);
    transform: rotate(-90deg);
    transition: transform var(--transition-fast);
}

.site-footer__link--nav:hover svg {
    transform: rotate(-90deg) translateY(3px);
}

.site-footer__contact-list {
    display: grid;
    gap: 0.6rem;
}

.site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    overflow-wrap: anywhere;
}

.site-footer__contact-item svg {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.site-footer__location {
    font-style: normal;
    color: var(--color-text-inverse-muted);
}

.site-footer__social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Relleno con el color oficial de cada red que sube al pasar el cursor */
.site-footer__social-link {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    color: var(--color-text-inverse);
    box-shadow: inset 0 0 0 1px var(--color-border-inverse);
}

.site-footer__social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--social-fill);
    transform: translateY(101%);
    transition: transform var(--transition-base);
}

.site-footer__social-link--facebook { --social-fill: #1877F2; }
.site-footer__social-link--whatsapp { --social-fill: var(--color-whatsapp); }

.site-footer__social-link:hover::before,
.site-footer__social-link:focus-visible::before {
    transform: none;
}

.site-footer__social-link svg {
    width: 20px;
    height: 20px;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    grid-column: 1 / -1;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-inverse);
    font-size: var(--text-sm);
}

.site-footer__legal p {
    font-weight: 500;
    color: var(--color-text-inverse-muted);
}


.status-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-xl);
    text-align: center;
}

.status-page__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: var(--container-sm);
}

.status-page__logo {
    width: auto;
    height: 56px;
    margin-bottom: var(--space-md);
}

.status-page :is(h1, .status-page__title) {
    color: var(--color-text-inverse);
}

.status-page__code {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.status-page__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.status-page__text {
    color: var(--color-text-muted);
}

.status-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

/* ================================================================
   6. UTILITIES
   ================================================================ */

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

/* Reveal al hacer scroll (script.js → initRevealOnScroll).
   Solo se esconde con la clase .js en <html>: si el JavaScript no
   carga, el contenido se ve normal, sin animación. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.text-center  { text-align: center; }

/* Contenido de formato largo (aviso de privacidad, blog, términos).
   Se aplica junto a .content__container: la cascada de utilities va al
   final del archivo, así que este max-width angosto gana sobre el
   --container-xl de .content__container. */
.prose {
    max-width: var(--container-md);
    line-height: 1.7;
}

.prose > * + * {
    margin-top: var(--space-md);
}

.prose > h2 {
    margin-top: var(--space-2xl);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

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