/* =============================================================
   OMC — Obras, Montajes y Consultorías Ltda.
   Hoja de estilos única del sitio.
   Orden: 1 Variables · 2 Reset/base · 3 Tipografía · 4 Layout
   utilitario · 5 Header · 6 Footer · 7 Componentes · 8 Secciones
   por página · 9 Animaciones · 10 Media queries (mobile-first)
   ============================================================= */

/* ---------------------------------------------------------------
   1. VARIABLES
   --------------------------------------------------------------- */
:root {
    /* Colores de marca (sección 9 de CLAUDE.md).
       Rojo verificado contra el sitio de referencia real (computed style). */
    --color-primary: #D32F2F;
    --color-primary-dark: #A82424;
    --color-dark: #3D3D3D;
    --color-darker: #2A2A2A;
    --color-light: #EAEAEC;
    --color-white: #FFFFFF;
    --color-text: #1A1A1A;
    --color-text-muted: #5A5A5A;
    --color-text-inverse: #F5F5F5;
    --color-border: #D8D8DC;

    /* Tipografía (sección 10) */
    --font-heading: "Archivo", "Segoe UI", Roboto, system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
    --font-label: "Work Sans", "Segoe UI", Roboto, system-ui, sans-serif;

    /* Escala de espaciado consistente */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Otros tokens */
    --container-max: 1200px;
    --container-pad: 1.25rem;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);
    --header-height: 76px;
    --transition: 0.2s ease;
}

/* ---------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Al entrar por un ancla (p. ej. servicios.html#alquiler) el header fijo
       tapaba el comienzo de la sección; así la sección queda justo debajo. */
    scroll-padding-top: var(--header-height);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

ul,
ol {
    list-style: none;
}

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

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

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

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

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

/* ---------------------------------------------------------------
   3. TIPOGRAFÍA GLOBAL
   --------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-text);
    text-wrap: balance;
}

/* Escala tipográfica (razón ~1.25). Un solo lugar define los tamaños para que
   los mismos elementos midan igual en todas las páginas. */
h1 {
    font-size: clamp(2.25rem, 4vw + 1.25rem, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.375rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
    font-weight: 700;
    line-height: 1.25;
}

/* h4 solo se usa como apoyo; nunca debe verse más pequeño que el cuerpo. */
h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

p {
    max-width: 65ch;
}

/* Enlaces dentro de un párrafo (el correo en Contacto, el fabricante en
   Thermon). Sin esto heredan el color del texto y no se ven: quien lee no
   sabe que puede pulsarlos. Se marcan con subrayado, no con color, para no
   meter acentos de color en el texto; el rojo aparece solo al pasar el ratón.
   No afecta a los .btn ni a los logos enlazados, que no van dentro de <p>. */
main p a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

main p a:not(.btn):hover,
main p a:not(.btn):focus-visible {
    color: var(--color-primary);
}

/* --- Ritmo vertical -----------------------------------------------------
   El reset pone margin: 0 en todo, así que el aire entre título y texto se
   define aquí de forma explícita y uniforme en todo el sitio. */
h1+p,
h2+p,
h1+ul,
h2+ul {
    margin-top: var(--space-md);
}

h3+p,
h4+p,
h3+ul {
    margin-top: var(--space-xs);
}

p+p {
    margin-top: var(--space-md);
}

p+h2,
p+h3,
ul+h3,
p+h4 {
    margin-top: var(--space-lg);
}

strong {
    font-weight: 600;
}

/* Eyebrow: texto pequeño de contexto sobre cada titular. Va pegado a su
   título porque ambos forman una sola unidad de lectura. */
.eyebrow {
    display: block;
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

/* ---------------------------------------------------------------
   4. LAYOUT UTILITARIO
   --------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

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

.section--dark {
    background-color: var(--color-dark);
    color: var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

.section--light {
    background-color: var(--color-light);
}

.section__header {
    max-width: 60ch;
    margin-bottom: var(--space-xl);
}

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

/* Enlace de salto al contenido (accesibilidad, sección 21) */
.skip-link {
    position: absolute;
    left: var(--space-xs);
    top: var(--space-xs);
    z-index: 1000;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transform: translateY(-150%);
    transition: transform var(--transition);
}

.skip-link:focus {
    transform: translateY(0);
}

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

/* ---------------------------------------------------------------
   5. HEADER Y NAVEGACIÓN
   --------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: var(--header-height);
}

/* El logo nunca cede espacio al menú: sin esto, a 1025px el flex lo comprimía
   y quedaba deformado (82×64 en vez de 113×64). */
.site-header__brand {
    flex-shrink: 0;
}

/* imagenes/marca/logo_omc.png ya viene sin margen transparente, así que la
   altura corresponde al logo real y no a aire alrededor. */
.site-header__brand img {
    height: 52px;
    width: auto;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.nav-toggle:hover {
    background-color: var(--color-light);
}

.nav-toggle svg {
    width: 26px;
    height: 26px;
}

.nav-toggle .icon-close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

/* Panel de navegación — móvil primero: oculto y desplegable */
.primary-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-md) var(--container-pad) var(--space-lg);
    display: none;
}

.primary-nav.is-open {
    display: block;
}

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

.primary-nav__list a {
    display: block;
    padding: var(--space-sm) 0;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition);
}

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

.primary-nav__social {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.primary-nav__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    color: var(--color-dark);
    transition: color var(--transition), background-color var(--transition);
}

.primary-nav__social a:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.primary-nav__social svg {
    width: 20px;
    height: 20px;
}

/* ---------------------------------------------------------------
   6. FOOTER
   --------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-darker);
    color: var(--color-text-inverse);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
}

.site-footer__brand img {
    height: 88px;
    width: auto;
    margin-bottom: var(--space-md);
}

.site-footer__brand p {
    color: var(--color-text-inverse);
    opacity: 0.8;
}

.site-footer__title {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.site-footer__col a,
.site-footer__col li {
    display: block;
    padding-block: var(--space-2xs);
    color: var(--color-text-inverse);
    opacity: 0.8;
    transition: opacity var(--transition), color var(--transition);
}

.site-footer__col a:hover {
    opacity: 1;
    color: var(--color-primary);
}

.site-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-block: var(--space-md);
    font-size: 0.85rem;
}

.site-footer__bar .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.site-footer__bar p {
    opacity: 0.7;
    max-width: none;
}

/* La regla global p+p (ritmo vertical) desalineaba la segunda línea de la
   barra: aquí los párrafos van en fila y el espacio lo da el gap del flex. */
.site-footer__bar p+p {
    margin-top: 0;
}

/* ---------------------------------------------------------------
   7. COMPONENTES REUTILIZABLES
   --------------------------------------------------------------- */

/* --- Botones (sección 11) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.8rem 1.6rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    transition: background-color var(--transition), color var(--transition),
        border-color var(--transition), transform var(--transition);
}

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

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

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

.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-dark);
}

.btn-secondary:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* Variantes sobre fondo oscuro */
.section--dark .btn-secondary,
.on-dark .btn-secondary {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.section--dark .btn-secondary:hover,
.on-dark .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-white);
}

/* --- Tarjetas (sección 12) --- */
/* Sin gap uniforme: el icono se separa más, y el título queda pegado a su
   texto porque juntos forman una unidad. */
.card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card__icon {
    align-self: flex-start;
    margin-bottom: var(--space-md);
}

.card h3 {
    margin-bottom: var(--space-xs);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background-color: var(--color-light);
    color: var(--color-primary);
    transition: background-color var(--transition), color var(--transition);
}

.card:hover .card__icon {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.card__icon svg {
    width: 26px;
    height: 26px;
}

.card p {
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Badge / sello (p. ej. "25 años") --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background-color: rgba(226, 35, 26, 0.1);
    border-radius: 999px;
}

.badge img {
    height: 40px;
    width: auto;
}

/* --- Fila de CTAs --- */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.cta-row--center {
    justify-content: center;
}

/* Tras una rejilla de tarjetas, los 24px de arriba igualaban el hueco entre
   tarjetas, y el botón se leía como una tarjeta más de la rejilla en vez de
   como la acción de toda la sección. Con más aire se separa como bloque.
   (Tras un párrafo se quedan los 24px: ahí el botón sí acompaña a su texto.) */
.services-grid + .cta-row,
.projects__grid + .cta-row {
    margin-top: var(--space-xl);
}

/* ---------------------------------------------------------------
   8. SECCIONES ESPECÍFICAS POR PÁGINA
   (se irán agregando al construir cada página — sección 24)
   --------------------------------------------------------------- */

/* --- Inicio: Hero --- */
.hero-home {
    padding-block: var(--space-2xl);
}

.hero-home__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.hero-home__media img {
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
}

.hero-home__text h1 {
    margin-bottom: var(--space-md);
}

.hero-home__text p {
    color: var(--color-text-inverse);
    opacity: 0.85;
    margin-bottom: var(--space-lg);
}

/* --- Inicio: Estadísticas --- */
.stats {
    text-align: center;
}

.stats__header {
    max-width: 60ch;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
}

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

.stats__item .stats__number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--color-primary);
    line-height: 1;
}

.stats__item p {
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}

/* --- Inicio: Especialidades (foto de fondo + tarjetas) --- */
.specialties {
    position: relative;
    color: var(--color-white);
    isolation: isolate;
}

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

.specialties::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(29, 30, 32, 0.88) 0%, rgba(29, 30, 32, 0.94) 100%);
}

.specialties__header {
    max-width: 60ch;
    margin-bottom: var(--space-xl);
}

.specialties__header h2 {
    color: var(--color-primary);
}

.specialties__header p {
    color: var(--color-text-inverse);
    opacity: 0.85;
}

.specialties__grid {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.specialties .card {
    background-color: rgba(255, 255, 255, 0.96);
}

/* --- Inicio: Alianza Thermon (resumen) --- */
.thermon-summary {
    text-align: center;
}

.thermon-summary__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

/* Logos de imagenes/marca/, recortados: la altura es la del logo visible.
   (El THERMON.png original traía un 45 % de su alto en margen vacío.) */
.thermon-summary__logos img {
    height: 64px;
    width: auto;
}

/* Ambos logos traen fondo blanco y texto oscuro, ilegible sobre la sección
   oscura: se apoyan en el mismo "chip" blanco que usan los clientes. */
.section--dark .thermon-summary__logos img {
    height: 88px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
}

.thermon-summary h2 {
    max-width: 46ch;
    margin-inline: auto;
    margin-bottom: var(--space-md);
}

.thermon-summary p {
    max-width: 55ch;
    margin-inline: auto;
    color: var(--color-text-inverse);
    opacity: 0.85;
    margin-bottom: var(--space-lg);
}

/* --- Inicio: Clientes --- */
.clients {
    position: relative;
    color: var(--color-white);
    isolation: isolate;
    text-align: center;
}

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

.clients::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(24, 24, 26, 0.92);
}

.clients__header {
    max-width: 60ch;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
}

.clients h2 {
    color: var(--color-white);
}

.clients__header p {
    margin-inline: auto;
    color: var(--color-text-inverse);
    opacity: 0.85;
}

.clients__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

/* Misma caja para todos los logos: los archivos vienen con proporciones muy
   distintas, así que se normalizan en una tarjeta de tamaño fijo. */
/* El <li> es el flex item real, así que el dimensionado va aquí: dos por fila
   en móvil y seis en escritorio, sin estirarse de más. */
.clients__grid>li {
    display: flex;
    flex: 1 1 130px;
    max-width: 180px;
}

.clients__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    padding: var(--space-md);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Los logos de imagenes/clientes/ ya vienen con el fondo recortado y en
   transparente, así que apoyan sobre la tarjeta sin dejar rectángulos. */
.clients__grid img {
    max-height: 52px;
    max-width: 100%;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: filter var(--transition), opacity var(--transition);
}

/* Solo los logos enlazados reaccionan: el cursor y la elevación indican que
   son clicables, y los no enlazados se quedan quietos a propósito. */
a.clients__item:hover,
a.clients__item:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

a.clients__item:hover img,
a.clients__item:focus-visible img {
    filter: none;
    opacity: 1;
}

.clients__note {
    margin-top: var(--space-xl);
    font-size: 0.8rem;
    opacity: 0.6;
}

/* --- Inicio: Ubicación --- */
.location__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.location__map {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--radius-lg);
}

/* --- Hero de páginas internas --- */
.page-hero {
    padding-block: var(--space-3xl);
}

/* Titular grande y alineado a la izquierda, como en el sitio de referencia. */
.page-hero h1 {
    font-size: clamp(2.25rem, 6vw + 0.5rem, 5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
}

.page-hero p {
    max-width: 80ch;
}

.page-hero p {
    color: var(--color-text-inverse);
    opacity: 0.85;
}

.page-hero p+p {
    margin-top: var(--space-sm);
}

/* --- Servicios: grid de 12 --- */
.services-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
}

/* --- Servicios: alquiler de maquinaria --- */
.rental__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.rental__media img {
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.rental__badge {
    display: block;
    height: 128px;
    width: auto;
    margin-bottom: var(--space-md);
}

.list-check {
    display: grid;
    gap: var(--space-xs);
    margin-block: var(--space-lg);
}

.list-check li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--color-text-muted);
}

.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: var(--color-primary);
}

.section--dark .list-check li {
    color: var(--color-text-inverse);
}

/* --- Banner de cierre / CTA --- */
.cta-banner {
    text-align: center;
}

.cta-banner h2 {
    margin-bottom: var(--space-md);
}

.cta-banner p {
    max-width: 55ch;
    margin-inline: auto;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.section--dark .cta-banner p,
.cta-banner.section--dark p {
    color: var(--color-text-inverse);
    opacity: 0.85;
}

.cta-banner .cta-row {
    justify-content: center;
}

/* --- Nosotros: historia --- */
.history__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.history__media img {
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}

.history__text p+p {
    margin-top: var(--space-md);
}

/* --- Nosotros: pilares (misión / visión) --- */
.pillars {
    position: relative;
    color: var(--color-white);
    isolation: isolate;
}

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

.pillars::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(24, 24, 26, 0.9);
}

.pillars h2 {
    color: var(--color-white);
}

.pillars .section__header p {
    color: var(--color-text-inverse);
    opacity: 0.85;
}

.pillars__grid {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.pillar {
    padding: var(--space-lg);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
}

.pillar h3 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.pillar p {
    color: var(--color-text-inverse);
    opacity: 0.88;
    max-width: none;
}

/* --- Experiencia: disciplinas y proyectos --- */
.disciplines__grid,
.projects__grid {
    display: grid;
    gap: var(--space-lg);
}

.discipline h3 {
    margin-bottom: var(--space-xs);
}

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

/* Sin acento rojo a la izquierda: igual que el resto de tarjetas del sitio.
   El borde de 4px además descuadraba el aire interior (28px a la izquierda
   frente a 25px a la derecha). */
.project {
    padding: var(--space-lg);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--transition), box-shadow var(--transition);
}

.project:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.project h3 {
    margin-bottom: var(--space-2xs);
}

.project__meta {
    font-family: var(--font-label);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

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

/* --- Certificaciones --- */
.certs-grid {
    display: grid;
    gap: var(--space-lg);
}

.cert-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.cert-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.cert-card__thumb {
    display: block;
    background-color: var(--color-light);
    padding: var(--space-md);
}

.cert-card__thumb img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    object-position: top;
}

.cert-card__body {
    padding: var(--space-lg);
}

.cert-card__body h3 {
    margin-bottom: var(--space-xs);
}

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

.cert-card__note {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* --- Franja roja HSEQ --- */
.hseq-band {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
}

.hseq-band .eyebrow {
    color: var(--color-white);
    opacity: 0.9;
}

.hseq-band h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 4vw + 1rem, 3.2rem);
    margin-bottom: var(--space-md);
}

.hseq-band p {
    max-width: 60ch;
    margin-inline: auto;
    color: var(--color-white);
    opacity: 0.92;
}

/* --- Thermon --- */
.thermon-cert__grid,
.thermon-service__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.thermon-cert__media img {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    width: 100%;
}

.thermon-service__media img {
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}

.quote-block {
    text-align: center;
}

.quote-block blockquote {
    max-width: 60ch;
    margin-inline: auto;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw + 0.8rem, 1.8rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-white);
}

.quote-block cite {
    display: block;
    margin-top: var(--space-md);
    font-family: var(--font-label);
    font-size: 0.9rem;
    font-style: normal;
    color: var(--color-text-inverse);
    opacity: 0.8;
}

/* --- Contacto --- */
.contact__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
}

.contact__form {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

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

.form-field label {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Mismo padding vertical que .btn (0.8rem): así los campos miden 54px, lo
   mismo que el botón "Enviar mensaje" que tienen debajo. Antes medían 50,8px
   con valores fuera de la escala (0.7rem 0.9rem). */
.form-field input,
.form-field textarea {
    width: 100%;
    padding: 0.8rem var(--space-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Foco de los campos. Antes se sumaban dos reglas: el borde se volvía rojo y
   encima aparecía el contorno global de :focus-visible (3px rojo, separado
   2px), así que quedaba un anillo rojo doble, grueso y despegado del campo.
   Además era idéntico al estado de error, que también pinta el borde rojo.
   Ahora el foco es gris carbón con un halo suave pegado al campo, y el rojo
   queda reservado para los errores.
   outline transparente (no "none"): en el modo de alto contraste de Windows
   las sombras desaparecen, y ese contorno pasa a ser visible. */
.form-field input:focus,
.form-field textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 0;
    border-color: var(--color-dark);
    box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.14);
}

.form-field textarea {
    min-height: 140px;
    resize: vertical;
}

.form-field__error {
    font-size: 0.85rem;
    color: var(--color-primary);
    display: none;
}

.form-field.has-error input,
.form-field.has-error textarea {
    border-color: var(--color-primary);
}

/* Un campo con error sigue en rojo aunque tenga el foco: si no, al volver a
   él para corregirlo el aviso desaparecería justo cuando más se necesita. */
.form-field.has-error input:focus,
.form-field.has-error textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.16);
}

.form-field.has-error .form-field__error {
    display: block;
}

.form-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Aviso de resultado del formulario (error de validación o de envío).
   Sin borde de color: el fondo rojo claro y el propio texto ya lo señalan
   como error. */
.form-alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background-color: rgba(211, 47, 47, 0.08);
    color: var(--color-text);
    font-size: 0.9rem;
    max-width: none;
}

/* Trampa anti-spam: fuera de pantalla, pero no display:none
   (algunos bots ignoran los campos ocultos con display:none). */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-block {
    margin-top: var(--space-xl);
}

.contact-block h3 {
    margin-bottom: var(--space-sm);
}

.contact-block p,
.contact-block li {
    color: var(--color-text-muted);
}

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

.contact__map {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
}

/* ---------------------------------------------------------------
   9. ANIMACIONES (sección 14)
   --------------------------------------------------------------- */
/* El estado inicial oculto se aplica SOLO si el JS está activo (script.js añade
   la clase "js" al <html>). Así, si el JS falla o está desactivado, el contenido
   sigue visible en lugar de quedarse en opacity: 0 para siempre. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------
   10. MEDIA QUERIES (mobile-first, min-width) — sección 8
   --------------------------------------------------------------- */

/* Tablet: 641px+ */
@media (min-width: 641px) {
    :root {
        --container-pad: 2rem;
    }

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

    .site-footer__inner {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .site-footer__bar .container {
        flex-direction: row;
        justify-content: space-between;
    }

    .stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .clients__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .services-grid,
    .disciplines__grid,
    .projects__grid,
    .certs-grid,
    .pillars__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .thermon-summary__logos {
        gap: var(--space-xl);
    }

    .thermon-summary__logos img {
        height: 80px;
    }

    .section--dark .thermon-summary__logos img {
        height: 108px;
    }
}

/* Escritorio: 1025px+ — navegación horizontal, sin hamburguesa */
@media (min-width: 1025px) {
    :root {
        --header-height: 92px;
    }

    .site-header__brand img {
        height: 64px;
    }

    .nav-toggle {
        display: none;
    }

    .primary-nav {
        position: static;
        display: flex;
        align-items: center;
        gap: var(--space-lg);
        padding: 0;
        border: none;
        box-shadow: none;
        background: none;
    }

    .primary-nav__list {
        flex-direction: row;
        gap: var(--space-lg);
    }

    .primary-nav__list a {
        padding: var(--space-xs) 0;
        border-bottom: 2px solid transparent;
    }

    .primary-nav__list a:hover,
    .primary-nav__list a[aria-current="page"] {
        border-bottom-color: var(--color-primary);
    }

    .primary-nav__social {
        margin-top: 0;
        border-left: 1px solid var(--color-border);
        padding-left: var(--space-md);
    }

    /* Un enlace del menú nunca debe partirse en dos líneas. */
    .primary-nav__list a {
        white-space: nowrap;
    }

    .hero-home__grid {
        grid-template-columns: 1fr 1fr;
    }

    .specialties__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .clients__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .location__grid {
        grid-template-columns: 1.1fr 1fr;
    }

    .services-grid,
    .certs-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .disciplines__grid,
    .projects__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .rental__grid,
    .history__grid,
    .thermon-cert__grid,
    .thermon-service__grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact__grid {
        grid-template-columns: 1.1fr 1fr;
    }
}

/* Escritorio estrecho: 1025px–1279px. Con el logo a 64px, logo + 7 enlaces +
   redes no cabían (a 1025px se salían 31px y "Nuestros Servicios" se partía).
   Se compacta el menú en este rango en vez de achicar el logo. */
@media (min-width: 1025px) and (max-width: 1279px) {

    .primary-nav,
    .primary-nav__list {
        gap: var(--space-md);
    }

    .primary-nav__list a {
        font-size: 0.9375rem;
    }

    .primary-nav__social {
        gap: 0;
        padding-left: var(--space-xs);
    }
}