/* ==========================================================================
   SERMAX · Sitio publico
   ========================================================================== */

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

:root {
    --brand: #00a9c7;
    --brand-strong: #0c7c91;
    --ink: #14232f;
    --muted: #52606d;
    --line: #e6edf3;
    --teal-band: #0c7c91;
    --footer-bg: #a9dcd7;
    --footer-bar: #7cc2bd;

    /* Paleta sobria de header/footer (rediseño): el acento teal usa
       --brand (unificado con el resto del sitio), estos son los neutros. */
    --sermax-ink: #151d20;
    --sermax-gray-700: #526166;
    --sermax-gray-300: #cfd7d9;
    --sermax-gray-200: #e6ebec;

    /* Heroes cinematograficos (pagina interna + Home). */
    --hero-ink: #071013;

    /* Ancho maximo de contenido, usado por todos los contenedores. */
    --content-width: min(100% - 96px, 1220px);
}

html {
    /* clip (no hidden): recorta el overflow horizontal del menu mobile
       fuera de pantalla sin crear un "scroll container", que rompería el
       position: sticky del header (ver .site-header mas abajo). */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

a {
    color: inherit;
}

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

h1, h2, h3 {
    margin: 0;
    line-height: 1.2;
}

.container {
    width: var(--content-width);
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Primitivos reutilizables de layout y tipografia.
   Cambiar aca afecta a todos los bloques con estetica similar.
   -------------------------------------------------------------------------- */

/* Ritmo vertical de una seccion de contenido. */
.section {
    padding: 76px 0;
}

/* Sin padding arriba: para una seccion que va pegada a la de arriba (ej. el
   bloque de logos de clientes debajo de la grilla de Proyectos), sin el
   espacio doble que dejarian dos .section consecutivas. */
.section--flush-top {
    padding-top: 0;
    /* flow-root evita que el margen superior del primer hijo (ej. el
       titulo, o el .check-list cuando no hay titulo cargado) se escape
       hacia arriba del padding-top:0 y deje un hueco blanco antes de la
       seccion -- sin esto, el margin-collapse normal del navegador
       "saca" ese margen afuera de la seccion. */
    display: flow-root;
}

/* Espejo de .section--flush-top, mismo motivo (ej. el titulo de "Otras
   empresas..." en Casos de exito, pegado contra el recuadro gris del
   carrusel que sigue justo debajo -- sin esto quedaba separado por el
   padding-bottom entero de .section mas el padding propio del recuadro). */
.section--flush-bottom {
    padding-bottom: 0;
    display: flow-root;
}

/* Layout de dos columnas (texto + imagen). */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* Titulo de seccion sobre fondo claro. */
.section-title {
    font-size: clamp(28px, 3.4vw, 36px);
    margin-bottom: 16px;
}

/* Parrafo de cuerpo. */
.prose {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

/* Texto de "Resumen de la empresa" en la Home: a pedido, todo en negrita y
   justificado. Clase propia (no ".about__text .prose") porque ese mismo
   wrapper ".about__text" tambien lo usa Nosotros para su bloque "Quienes
   somos" -- un selector por el padre habria afectado esa pagina tambien,
   cuando el pedido fue puntual para la Home. */
.prose--resumen-home {
    font-weight: 700;
    text-align: justify;
}

/* Texto "Desde 1995, SERMAX brinda..." en Nosotros (seccion
   home_quienes_somos, distinta de home_resumen de arriba aunque las dos
   compartan la clase generica .prose) -- a pedido, justificado, sin negrita
   (esta ya trae **negrita** manual en partes especificas del texto). */
.prose--about-nosotros {
    text-align: justify;
}

/* Texto debajo del titulo en Practicas sustentables (sustentabilidad_actitud.intro). */
.prose--sustentabilidad-intro {
    text-align: justify;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    color: var(--sermax-ink);
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--sermax-gray-200);
    transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, transform .3s ease;
}

/* Vidrio esmerilado + sombra al scrollear, en todos los tamaños (antes
   quedaba restringido a mobile; ahora el header es claro y sticky en
   todo el sitio, como en la referencia). */
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 26px rgba(21, 29, 32, .08);
}

/* Se oculta deslizandose hacia arriba al bajar, reaparece al subir
   (ver public/assets/js/scroll-fx.js). Solo en mobile. */
@media (max-width: 760px) {
    .site-header.is-hidden {
        transform: translateY(-100%);
    }
}

.site-header__inner {
    position: relative;
    width: min(100% - 96px, 1220px);
    min-height: 82px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 34px;
    align-items: center;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* Logo subido desde el admin. */
.brand-logo {
    display: block;
    width: auto;
    flex: none;
}

.brand--header .brand-logo {
    height: 46px;
}

.brand--footer .brand-logo {
    height: 54px;
}

/* Placeholder mientras no hay logo cargado (adapta color al contexto). */
.brand-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 20px;
    border: 1px dashed currentColor;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    opacity: .7;
}

.brand--header {
    color: var(--sermax-ink);
}

.brand--footer {
    color: #fff;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 2px;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px 3px;
    color: var(--sermax-gray-700);
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--sermax-ink);
    border-bottom-color: var(--brand);
}

.main-nav a.is-active {
    color: var(--sermax-ink);
    font-weight: 700;
    border-bottom-color: var(--brand);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.diagnosis-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid var(--brand);
    border-radius: 7px;
    color: #fff;
    background: var(--brand);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.diagnosis-link:hover {
    border-color: var(--brand-strong);
    background: var(--brand-strong);
}

.nav-toggle,
.nav-toggle-label,
.nav-backdrop {
    display: none;
}

/* En desktop el wrapper "desaparece" del arbol de cajas: main-nav y
   header-actions siguen siendo items directos del grid de .site-header__inner,
   como si este div no existiera. En mobile se convierte en la bandeja
   deslizante (ver el media query de abajo). */
.mobile-nav {
    display: contents;
}

/* ==========================================================================
   Hero de pagina
   ========================================================================== */

.page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(680px, 82vh, 880px);
    overflow: hidden;
    color: #fff;
    background-color: var(--hero-ink);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Sin imagen cargada todavia: degrade de marca de siempre, en vez de un
   fondo negro liso. Con imagen, este gradiente no se ve (queda tapado). */
.page-hero {
    background-image: linear-gradient(135deg, #10243b 0%, #123f64 55%, #0b1f35 100%);
}

/* Velo oscuro entre la foto y el contenido: mucho mas fuerte a la
   izquierda (donde esta el texto), se abre hacia la derecha para dejar la
   fotografia protagonista. Variables --hero-c1/c2/a1/a2 definen el tinte
   por seccion (page-hero--*, mas abajo); sin modificador cae en un tono
   navy neutro acorde a la marca. */
.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    --hero-c1: 8, 18, 28;
    --hero-c2: 10, 32, 46;
    --hero-a1: .88;
    --hero-a2: .62;
    background:
        linear-gradient(
            90deg,
            rgba(var(--hero-c1), var(--hero-a1)) 0%,
            rgba(var(--hero-c1), calc(var(--hero-a1) - .08)) 18%,
            rgba(var(--hero-c2), var(--hero-a2)) 34%,
            rgba(var(--hero-c2), calc(var(--hero-a2) * .667)) 50%,
            rgba(var(--hero-c2), calc(var(--hero-a2) * .25)) 70%,
            rgba(var(--hero-c2), calc(var(--hero-a2) * .056)) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .20) 0%,
            rgba(0, 0, 0, .02) 45%,
            rgba(0, 0, 0, .28) 100%
        );
}

/* Variaciones sutiles de tono por seccion (misma estructura de degradado,
   solo cambia el color base y, en algunos casos, la intensidad). */
.page-hero--inicio .page-hero__overlay { --hero-c1: 2, 10, 12; --hero-c2: 3, 22, 25; }
.page-hero--nosotros .page-hero__overlay { --hero-c1: 12, 11, 9; --hero-c2: 29, 25, 20; }
.page-hero--servicios .page-hero__overlay { --hero-c1: 2, 9, 13; --hero-c2: 3, 27, 34; }
.page-hero--casos .page-hero__overlay { --hero-c1: 3, 6, 7; --hero-c2: 10, 17, 19; --hero-a1: .92; --hero-a2: .65; }
.page-hero--sustentabilidad .page-hero__overlay { --hero-c1: 3, 11, 8; --hero-c2: 7, 31, 23; --hero-a1: .92; --hero-a2: .66; }
.page-hero--novedades .page-hero__overlay { --hero-c1: 4, 8, 13; --hero-c2: 13, 25, 37; --hero-a1: .93; --hero-a2: .68; }
.page-hero--contacto .page-hero__overlay { --hero-c1: 10, 9, 8; --hero-c2: 25, 22, 19; --hero-a1: .92; --hero-a2: .66; }
.page-hero--diagnostico .page-hero__overlay { --hero-c1: 2, 8, 12; --hero-c2: 3, 29, 38; }

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

.page-hero__content {
    width: min(100%, 640px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 64px 0;
}

/* Tipografia unica para todos los heroes del sitio (incluye .home-hero__*,
   fusionado aca para que Home e interiores nunca queden desincronizados). */
.page-hero__eyebrow,
.home-hero__eyebrow {
    display: block;
    margin-bottom: 18px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.page-hero__title,
.home-hero__title {
    max-width: 640px;
    margin: 0;
    color: #f4f7f8;
    font-size: clamp(40px, 5.6vw, 76px);
    font-weight: 750;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
    text-shadow: 0 3px 20px rgba(0, 0, 0, .22);
}

/* Titulo pequeño (toggle "Título pequeño" en el admin, ver hero_fields() y
   render_hero() en includes/admin_content.php): pensado para titulos muy
   largos que con el clamp() de arriba quedan gigantes (ej. el de Nosotros,
   "Mas de 40 años a cargo de instalaciones electro y termomecanicas avalan
   nuestro trabajo"). Se aplica por pagina desde el admin, no queda
   hardcodeado a ninguna variante en particular -- comparte clase con
   .home-hero__title, que usa el mismo criterio. */
.page-hero__title--pequeno {
    font-size: 50px;
}

.page-hero__description,
.home-hero__subtitle {
    max-width: 520px;
    margin: 22px 0 0;
    color: #dce5e7;
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 400;
    line-height: 1.55;
    text-wrap: pretty;
}

/* Bajadas comerciales que rotan con fade (ver hero-rotator.js). Todas
   ocupan la misma celda de grid (se superponen), asi la altura del
   contenedor se ajusta sola a la mas alta y no hay salto de layout al
   cambiar entre textos de distinto largo. */
.home-hero__subtitle-rotator {
    display: grid;
    margin: 22px 0 0;
}

.home-hero__subtitle-rotator .home-hero__subtitle {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.home-hero__subtitle-rotator .home-hero__subtitle.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Las 3 bajadas juntas, en flujo normal (formato por defecto -- ver toggle
   "subtitulos_carrusel" en Secciones > Inicio > Hero para volver al
   carrusel de arriba). Mismo estilo tipografico que .home-hero__subtitle,
   solo se resetea el margen de lista. */
.home-hero__subtitle-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.home-hero__subtitle-list .home-hero__subtitle {
    position: relative;
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}

.home-hero__subtitle-list .home-hero__subtitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

/* Puntos de progreso de la rotacion, clickeables para elegir una frase. */
.home-hero__subtitle-dots {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.home-hero__subtitle-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.home-hero__subtitle-dot:hover {
    background: rgba(255, 255, 255, .6);
}

.home-hero__subtitle-dot.is-active {
    background: var(--brand);
    transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__subtitle-rotator .home-hero__subtitle {
        transition-duration: .01ms;
    }
}

.breadcrumb {
    margin-bottom: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}

.breadcrumb a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 8px;
    opacity: .7;
}

@media (max-width: 1100px) {
    .page-hero {
        min-height: clamp(640px, 78vh, 760px);
    }

    .page-hero__content {
        width: min(100%, 580px);
    }

    .page-hero__title {
        font-size: clamp(40px, 7vw, 64px);
    }
}

@media (max-width: 768px) {
    .page-hero {
        min-height: clamp(620px, 88svh, 720px);
    }

    .page-hero__content {
        width: min(88%, 520px);
        padding: 72px 0 56px;
    }

    .page-hero__eyebrow {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .page-hero__title {
        font-size: clamp(36px, 12vw, 54px);
        line-height: .98;
        letter-spacing: -.03em;
    }

    .page-hero__description {
        max-width: 92%;
        margin-top: 18px;
        font-size: 17px;
        line-height: 1.5;
    }

    /* En mobile el texto ocupa casi todo el ancho, asi que el velo no puede
       aclararse tan pronto como en escritorio (donde a partir del 34% ya
       hay que dejar ver la foto): se estira la zona oscura hasta cerca del
       borde derecho, con un solo tono (sin pasar a --hero-c2) para que no
       se note una costura de color en un espacio tan angosto. */
    .page-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(var(--hero-c1), var(--hero-a1)) 0%,
                rgba(var(--hero-c1), calc(var(--hero-a1) * .936)) 42%,
                rgba(var(--hero-c1), calc(var(--hero-a1) * .723)) 72%,
                rgba(var(--hero-c1), calc(var(--hero-a1) * .447)) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .16) 0%,
                rgba(0, 0, 0, .12) 48%,
                rgba(0, 0, 0, .34) 100%
            );
    }
}

@media (max-width: 420px) {
    .page-hero__title {
        font-size: clamp(34px, 12.5vw, 46px);
    }

    .page-hero__description {
        max-width: 100%;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero__eyebrow,
    .page-hero__title,
    .page-hero__description {
        transition-delay: 0s !important;
    }
}

/* ==========================================================================
   Placeholder / imagenes de contenido
   ========================================================================== */

.media {
    display: block;
    width: 100%;
    border-radius: 14px;
}

img.media {
    aspect-ratio: 16 / 11;
    object-fit: cover;
    box-shadow: 0 20px 45px rgba(15, 40, 60, .16);
}

.media--placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    aspect-ratio: 16 / 11;
    border: 1px dashed #b8c6d4;
    color: #8494a5;
    background:
        repeating-linear-gradient(45deg, #eef2f6 0 16px, #e6ecf2 16px 32px);
}

.media--placeholder svg {
    width: 46px;
    height: 46px;
    opacity: .55;
}

.media--placeholder span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ==========================================================================
   Bloque "Por que elegirnos"
   (usa .section para el espaciado; solo aporta el fondo teal)
   ========================================================================== */

.reasons {
    background: var(--teal-band);
    color: #fff;
    /* Menos que el padding-bottom generico de .section (76px), a pedido:
       para que no quede tan lejos del bloque "Que nos hace diferentes"
       que sigue justo debajo (esa seccion usa .section--flush-top, sin
       padding-top propio, para pegarse contra este mismo borde). */
    padding-bottom: 40px;
}

.reasons__title {
    font-size: clamp(26px, 3.2vw, 32px);
    margin-bottom: 36px;
}

/* Mismo formato, con mas aire debajo para separarlo de una grilla que
   arranca justo despues (ej. Casos de exito), sin tocar el margen base
   que ya usa "Confianza y respaldo" en Nosotros. */
.reasons__title--spaced {
    margin-bottom: 56px;
}

.reasons__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* Variante unificada (a pedido, ultima vuelta): sin tarjeta, directamente
   sobre el fondo azul de la seccion -- una fila por item, icono a la
   izquierda + titulo, texto a la derecha, todo el ancho, separadas por
   lineas blancas. Siempre 1 columna (a diferencia de .reasons__grid
   "suelto", que en desktop usa 3) -- por eso pisa grid-template-columns
   ademas del resto. */
.reasons__grid--merged {
    grid-template-columns: 1fr;
    gap: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.reasons__grid--merged .reason-card {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 28px 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.reasons__grid--merged .reason-card:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

/* ".reason-card--inline" repetido a proposito: sin el, esta regla empata
   en especificidad con ".reason-card--inline .reason-card__head" de mas
   abajo (que le pone margin-bottom:16px) y esa gana por venir despues en
   el archivo -- el margen no se anula y el titulo queda pegado raro
   contra el texto de al lado. */
.reasons__grid--merged .reason-card--inline .reason-card__head {
    flex: 0 0 220px;
    margin: 0;
}

.reasons__grid--merged .reason-card__icon {
    color: #fff;
}

.reasons__grid--merged .reason-card h3 {
    color: #fff;
}

.reasons__grid--merged .reason-card p {
    flex: 1;
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
}

/* Mobile: icono+titulo arriba, texto abajo -- una columna fija de 220px
   para el titulo no da suficiente aire al texto en pantallas chicas. */
@media (max-width: 760px) {
    .reasons__grid--merged .reason-card {
        flex-direction: column;
        gap: 12px;
    }

    /* ".reason-card--inline" repetido de nuevo a proposito (misma razon
       que la regla de desktop): sin el, esto empata en especificidad con
       ".reasons__grid--merged .reason-card--inline .reason-card__head"
       (flex: 0 0 220px) y esa gana por tener una clase mas -- ese
       flex-basis de 220px, pensado como ANCHO para la fila de desktop,
       en mobile (flex-direction:column) pasa a ser el ALTO del titulo,
       dejando un hueco enorme antes del texto. */
    .reasons__grid--merged .reason-card--inline .reason-card__head {
        flex: none;
    }
}

.reason-card {
    padding: 30px 28px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(6, 45, 55, .18);
}

.reason-card__icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    color: var(--brand-strong);
}

.reason-card__icon svg {
    width: 42px;
    height: 42px;
}

.reason-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 20px;
    color: var(--ink);
}

.reason-card p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
    text-align: justify;
}

/* Variante en linea: icono + titulo juntos (como en la referencia) */
.reason-card--inline .reason-card__icon {
    width: 40px;
    height: 40px;
    margin: 0;
}

.reason-card--inline .reason-card__icon svg {
    width: 34px;
    height: 34px;
}

.reason-card--inline .reason-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.reason-card--inline .reason-card__head h3 {
    margin: 0;
}

/* ==========================================================================
   Bloque "Actitud sustentable" (imagen + intro + checklist)
   (usa .section y .split; solo ajusta columnas y alineacion)
   ========================================================================== */

.sustain__grid {
    grid-template-columns: minmax(0, 480px) 1fr;
    align-items: start;
}

img.media.media--tall,
.media--placeholder.media--tall {
    aspect-ratio: 4 / 5;
}

.check-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 22px;
}

.check-list li {
    display: flex;
    gap: 12px;
    align-items: start;
}

.check-list__icon {
    flex: none;
    margin-top: 2px;
    color: var(--brand);
}

.check-list__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.check-list p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.check-list strong {
    color: var(--ink);
}

/* Items del checklist en Practicas sustentables (a pedido, "Tecnologia LG
   de alta eficiencia:" y cualquier item que se agregue despues) --
   scopeado, no la variante --grid que usa Home en "Diferenciales". */
.check-list--sustentabilidad p {
    text-align: justify;
}

/* Variante en 2 columnas (ej. diferenciales en Nosotros): mismo componente,
   mas ancho al no compartir fila con una imagen como en Sustentabilidad. */
@media (min-width: 700px) {
    .check-list--grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 40px;
    }
}

/* Variante en tarjetas ("Que nos hace diferentes" en Nosotros, a pedido).
   Icono y texto en una sola fila, texto mas grande. Se probo unificarlas
   en un solo bloque con cruz divisoria (y despues fondo blanco), pero
   volvio a pedido a tarjetas sueltas -- mismo lenguaje visual que
   .reason-card (sombra, radio, fondo blanco), una por celda de la grilla. */
.check-list--cards {
    gap: 20px;
    margin-top: 0;
}

.check-list--cards li {
    align-items: center;
    padding: 28px 26px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(6, 45, 55, .12);
    transition: transform .25s ease, box-shadow .25s ease;
}

.check-list--cards li:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(6, 45, 55, .18);
}

.check-list--cards .check-list__icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    background: rgba(0, 169, 199, .12);
    color: var(--brand-strong);
}

.check-list--cards .check-list__icon svg {
    width: 26px;
    height: 26px;
}

.check-list--cards p {
    font-size: 17px;
    line-height: 1.6;
}

/* Mismo fondo azul/teal que ".reasons" (bloque de arriba, "Por que
   elegirnos"), a pedido -- el titulo ya usa .reasons__title, que ya se
   pone blanco en ese fondo, asi que no hace falta tocarlo. */
.section--diferenciales {
    background: var(--teal-band);
    color: #fff;
}

/* ==========================================================================
   Grilla de tarjetas de proyectos (Casos de exito)
   ========================================================================== */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.project-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 40, 60, .12);
}

.project-card__media {
    position: relative;
    /* Clip propio (ademas del overflow:hidden de la tarjeta): el zoom al
       hover escala la imagen desde su centro, asi que sus bordes se
       corren hacia afuera del recuadro original. Sin este overflow, esa
       imagen ampliada queda pisando el area del logo (que vive en este
       mismo contenedor) durante la transicion en vez de quedar recortada
       a tope de la imagen.
       El radio de las esquinas superiores se repite (7px, no 8px -- ver
       nota en `.project-card__logo`) para que la curva de este recorte
       coincida con la de la tarjeta en vez de depender solo del
       overflow:hidden de un ancestro. */
    overflow: hidden;
    border-radius: 7px 7px 0 0;
}

/* La imagen va a tope con los bordes de la tarjeta, con un zoom leve al
   pasar el mouse (la tarjeta ya tiene overflow:hidden, la recorta bien). */
.project-card .media {
    border-radius: 0;
    box-shadow: none;
    transition: transform .45s ease;
}

.project-card:hover .media {
    transform: scale(1.06);
}

/* Logo de la empresa, superpuesto en la esquina superior izquierda de la
   imagen. Esquina superior izquierda con radio 7px (no los 8px de
   `.project-card`): el logo se posiciona relativo a `.project-card__media`,
   que arranca 1px adentro del borde de la tarjeta (el `border: 1px` de
   `.project-card`) -- si el logo usara el mismo radio de 8px, su curva
   quedaria centrada en un punto distinto a la curva de la tarjeta (misma
   distorsion de 1px que antes tenia `.project-card__media`), dejando un
   hilo de la imagen principal visible justo donde las dos curvas deberian
   coincidir. Con 7px (8 - el 1px del borde) ambas curvas quedan
   concentricas. Esquina inferior derecha bien redondeada para mezclarse
   con la foto en vez de cortar en seco.
   z-index explicito para que quede siempre arriba de la imagen: al hacer
   zoom, la imagen pasa a tener su propio "layer" de composicion (por el
   transform), y sin esto podia terminar pintandose por encima del logo. */
.project-card__logo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Alto fijo (mismo en las 10 tarjetas), ancho libre segun el logo:
       height fijo + align-items:center centra la imagen adentro, sin
       importar su alto real (que varia segun la proporcion de cada logo).
       El ancho sigue sin tope propio salvo max-width, asi que un logo mas
       cuadrado no ensancha el fondo blanco de mas. */
    height: 62px;
    max-width: 40%;
    padding: 0 16px;
    background: #fff;
    border-radius: 7px 0 16px 0;
    box-shadow: 0 6px 16px rgba(15, 40, 60, .18);
}

.project-card__logo img {
    display: block;
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
}

.project-card__body {
    padding: 20px 20px 24px;
}

.project-card__title {
    margin: 0;
    font-size: 18px;
    color: var(--ink);
}

.project-card__subtitle {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #8695a1;
}

.project-card__desc {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    text-align: justify;
}

/* ==========================================================================
   Casos de exito: logos de otras empresas -- carrusel infinito de marca de
   agua (a pedido, reemplaza la grilla con tarjetas de antes por completo).
   client-logos-carousel.js triplica el contenido de .client-logos-track
   (loop infinito: siempre hay una copia de sobra a cada lado para poder
   arrastrar sin "pegar contra la pared") y mueve todo con un solo
   transform: translateX(), sin usar el scroll nativo -- autoplay continuo,
   arrastre con el mouse y la inercia al soltar comparten la misma variable
   de offset.
   ========================================================================== */

.client-logos-section {
    background: #f7fafc;
    /* Mismo espacio arriba y abajo (a pedido) -- pisa el padding-top:0 de
       .section--flush-top y el padding-bottom:76px generico de .section,
       los dos con la misma especificidad que esta regla pero declarados
       antes en el archivo. Reemplaza al margin-top que tenia el carrusel
       (ya no hace falta, la seccion no tiene titulo arriba que separar). */
    padding: 40px 0;
}

.client-logos-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Difuminado hacia los bordes (a pedido): el bloque central de
       contenido queda opaco, los extremos se desvanecen contra el fondo de
       la seccion en vez de cortar los logos de golpe. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.client-logos-track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    padding: 20px 0;
    cursor: grab;
    will-change: transform;
}

.client-logos-track.is-dragging {
    cursor: grabbing;
}

.client-logos-item {
    flex: none;
    width: 150px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logos-item img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Aspecto "marca de agua" (a pedido): aclarado y en blanco y negro, sin
       borde ni fondo propio (a diferencia de la vieja .client-logo-card). */
    filter: grayscale(1) opacity(.45);
    transition: transform .3s ease;
    /* Evita el "fantasma" nativo de arrastrar la imagen y que el texto/img
       se seleccione al arrastrar -- mismo patron que el carrusel de
       Nuestra historia. */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.client-logos-item:hover img {
    transform: scale(1.15);
}

@media (max-width: 760px) {
    .client-logos-track {
        gap: 36px;
    }

    .client-logos-item {
        width: 110px;
    }
}

/* ==========================================================================
   Novedades: listado tipo blog
   ========================================================================== */

.news-intro {
    max-width: 720px;
    margin-bottom: 40px;
    font-size: 17px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 40, 60, .12);
}

.news-card__media-link {
    display: block;
}

.news-card .media {
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 16 / 10;
    transition: transform .45s ease;
}

.news-card:hover .media {
    transform: scale(1.06);
}

.news-card__body {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 24px;
}

.news-card__date {
    margin-bottom: 8px;
    color: #8695a1;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.news-card__title {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.3;
}

.news-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.news-card__title a:hover {
    color: var(--brand-strong);
}

/* El "..." real lo agrega truncate_text() en PHP (includes/admin_content.php);
   esto es solo un resguardo visual por si algun extracto puntual, con
   palabras muy largas, igual pasara de 4 lineas en algun ancho de pantalla. */
.news-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.news-card__link {
    margin-top: auto;
    color: var(--brand-strong);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.news-card__link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Solicitar diagnostico: tarjeta de contacto
   ========================================================================== */

.reps-intro {
    margin-bottom: 40px;
    font-size: 17px;
}

.reps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.rep-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform .15s, box-shadow .15s;
}

.rep-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(15, 40, 60, .12);
}

.rep-card__photo {
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
}

.rep-card__photo.media--placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
}

.rep-card__photo.media--placeholder svg {
    width: 32px;
    height: 32px;
}

.rep-card__photo.media--placeholder span {
    display: none;
}

.rep-card__body {
    min-width: 0;
}

.rep-card__name {
    margin: 0 0 2px;
    font-size: 18px;
}

.rep-card__role {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 14px;
}

.rep-card__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rep-card__contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 14.5px;
    text-decoration: none;
    word-break: break-word;
}

.rep-card__contact a:hover {
    color: var(--brand-strong);
}

.rep-card__contact svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--brand-strong);
}

/* ==========================================================================
   Novedades: pagina de detalle (articulo)
   ========================================================================== */

.news-article__container {
    max-width: 780px;
}

.news-article__breadcrumb {
    margin-bottom: 18px;
    color: var(--muted);
}

.news-article__breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
}

.news-article__breadcrumb a:hover {
    color: var(--brand-strong);
}

.news-article__title {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 12px;
}

.news-article__date {
    display: block;
    margin-bottom: 28px;
    color: #8695a1;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.news-article__cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 32px;
    border-radius: 10px;
}

/* Tipografia del cuerpo generado por el editor del admin (Quill). */
.news-article__body {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.75;
}

.news-article__body h2 {
    margin: 40px 0 16px;
    font-size: 26px;
}

.news-article__body h3 {
    margin: 32px 0 14px;
    font-size: 21px;
}

.news-article__body p {
    margin: 0 0 20px;
    color: var(--muted);
}

.news-article__body a {
    color: var(--brand-strong);
    text-decoration: underline;
}

.news-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px 0;
    border-radius: 8px;
}

.news-article__body iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 24px 0;
    border: 0;
    border-radius: 8px;
}

.news-article__body .ql-indent-1 { padding-left: 24px; }
.news-article__body .ql-indent-2 { padding-left: 48px; }
.news-article__body .ql-indent-3 { padding-left: 72px; }

.news-article__back {
    margin-top: 24px;
}

/* ==========================================================================
   Utilidad de scroll-reveal (ver public/assets/js/reveal.js)
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

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

/* Si el usuario pidio menos movimiento, mostrar todo directo sin animar. */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cert-modal__backdrop,
    .cert-modal__dialog {
        transition: none;
    }
}

/* ==========================================================================
   Home: hero con video
   ========================================================================== */

.home-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    display: grid;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background-color: var(--hero-ink);
    background-image: linear-gradient(135deg, #10243b 0%, #123f64 55%, #0b1f35 100%);
    background-position: center;
    background-size: cover;
}

/* El iframe de Vimeo lo inserta vimeo-bg.js; hasta que carga, o si no hay
   video cargado, se ve el fondo estatico definido arriba en .home-hero. */
.home-hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.home-hero__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.78vh;
    /* centra y cubre el contenedor sin franjas, sea cual sea la relacion de
       aspecto de la pantalla (el mismo truco vw/vh que un "background-size:
       cover" para video). Vimeo con background=1 ya no dibuja ningun
       control/marca propia, asi que a diferencia de YouTube no hace falta
       agrandar de mas para recortar bordes con chrome. */
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .5s ease;
}

.home-hero__video.is-playing iframe {
    opacity: 1;
}

/* Mismo velo cinematografico que el resto de los heroes (ver
   .page-hero__overlay), con el tono de Inicio. Va siempre arriba del
   video/imagen y abajo del contenido, este activo el video o no. */
.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(2, 10, 12, .94) 0%,
            rgba(2, 10, 12, .86) 18%,
            rgba(3, 22, 25, .72) 34%,
            rgba(3, 22, 25, .48) 50%,
            rgba(3, 22, 25, .18) 70%,
            rgba(3, 22, 25, .04) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .20) 0%,
            rgba(0, 0, 0, .02) 45%,
            rgba(0, 0, 0, .28) 100%
        );
}

.home-hero__container {
    position: relative;
    z-index: 2;
}

.home-hero__content {
    width: min(100%, 640px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 120px 0 80px;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* Especificidad .home-hero__btn.btn a proposito: gana por sobre .btn (base,
   teal) sin tocar esa clase, que se usa en el resto del sitio. */
.home-hero__btn.btn {
    min-height: 50px;
    padding: 0 24px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

.home-hero__btn.btn:hover {
    background: var(--brand-strong);
}

/* ==========================================================================
   Home: numeros destacados
   ========================================================================== */

.stats-band {
    background: var(--ink);
    color: #fff;
}

.stats-band__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 32px;
    padding: 48px 0;
    text-align: center;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat__numero {
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    color: var(--brand);
    line-height: 1;
}

.stat__etiqueta {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
}

/* ==========================================================================
   Home: link con flecha (usado en el resumen, hacia /nosotros.php)
   ========================================================================== */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--brand-strong);
    font-weight: 700;
    text-decoration: none;
    transition: gap .15s;
}

.link-arrow:hover {
    gap: 12px;
}

/* ==========================================================================
   Home: vidriera de servicios (version simplificada de .service-card,
   sin modal, solo linkea a /servicios.php)
   ========================================================================== */

.services-teaser__head {
    max-width: 620px;
    margin: 0 0 40px;
}

.services-teaser__head .prose {
    margin-top: 10px;
}

.services-teaser__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

.services-teaser__grid .service-card {
    aspect-ratio: 3 / 4;
    text-decoration: none;
}

.services-teaser__more {
    display: table;
    margin: 0 auto;
}

/* ==========================================================================
   Home: banda final de llamado a la accion
   ========================================================================== */

.cta-band {
    background: var(--teal-band);
    color: #fff;
}

.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 56px 0;
}

.cta-band__inner h2 {
    max-width: 620px;
    margin-bottom: 8px;
    font-size: clamp(24px, 2.8vw, 30px);
}

.cta-band__inner p {
    margin: 0;
    max-width: 520px;
    color: rgba(255, 255, 255, .85);
}

.cta-band .btn {
    flex: none;
    background: #fff;
    color: var(--teal-band);
}

.cta-band .btn:hover {
    background: rgba(255, 255, 255, .88);
}

/* La tarjeta de contacto en si (ver render_cta_contact_card() en
   includes/admin_content.php) -- ya no va despues de una linea divisoria
   en la Home (a pedido, se saco esa seccion entera), pero se sigue usando
   tal cual en Solicitar diagnostico, hoy con datos de `representantes`,
   todos los cargados (ver .reps-grid en public/solicitar-diagnostico.php). */
.cta-contact-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    background: #fff;
    border: 2px solid var(--brand);
    border-radius: 14px;
    /* La foto llega hasta el borde izquierdo y ocupa todo el alto de la
       tarjeta (sin padding propio, ver .cta-contact-card__photo); overflow
       hidden + el mismo border-radius de la tarjeta le recorta las esquinas
       de la izquierda para que sigan la curva del borde. */
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.cta-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 40, 60, .16);
}

.cta-contact-card__photo {
    flex: none;
    width: 100px;
    align-self: stretch;
    height: auto;
    object-fit: cover;
}

.cta-contact-card__photo--placeholder {
    display: grid;
    place-items: center;
    background: rgba(0, 169, 199, .12);
    color: #97a2ab;
}

.cta-contact-card__photo--placeholder svg {
    width: 30px;
    height: 30px;
}

.cta-contact-card__body {
    min-width: 0;
    padding: 18px 18px 18px 0;
}

.cta-contact-card__name {
    margin: 0 0 2px;
    color: var(--brand-strong);
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.cta-contact-card__role {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.cta-contact-card__contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cta-contact-card__contact a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 13.5px;
    text-decoration: none;
    word-break: break-word;
}

.cta-contact-card__contact a:hover {
    color: var(--brand-strong);
}

.cta-contact-card__contact svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--brand-strong);
}

/* ==========================================================================
   Nosotros: linea de tiempo "Nuestra historia"
   ========================================================================== */

.timeline-section {
    background: #f7fafc;
}

.h-timeline {
    margin-top: 40px;
}

/* Carrusel real (a pedido, reemplaza el viejo formato de "una tarjeta
   grande activa + regla de puntos" de abajo): tarjetas chicas, imagen
   arriba y contenido abajo, 3 por pagina en desktop. El scroll horizontal
   es nativo (overflow-x + scroll-snap); timeline-horizontal.js solo le
   suma arrastre con mouse y el autoplay/flechas mueven el track via
   scrollLeft (nunca scrollIntoView -- ver comentario en el JS sobre el
   bug de scroll vertical que eso causaba en algunos navegadores). */
/* Sin overflow:hidden a proposito: .h-timeline__track ya recorta el
   scroll horizontal solo (overflow-x:auto), asi que este contenedor no
   necesita recortar nada -- si le pone overflow:hidden, vuelve a cortar
   justo el espacio extra que el padding/margen negativo del track de
   abajo le da a la sombra, anulando ese arreglo (por eso se seguia
   viendo "encerrada en un contenedor" incluso despues de agrandar el
   padding). */
.h-timeline__viewport {
    overflow: visible;
}

.h-timeline__track {
    display: flex;
    gap: 24px;
    /* El padding deja lugar para que la sombra de las tarjetas (que se
       "sale" de su caja en las 4 direcciones) no quede cortada por el
       propio scroll horizontal del track (overflow-x:auto tambien
       recorta el eje vertical y los costados); el margen negativo que lo
       compensa evita que ese padding empuje el resto de la pagina o
       corra el carrusel del resto del layout. */
    margin: -40px -40px -56px;
    padding: 40px 40px 56px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* Sin esto, arrastrar con el mouse pinta de azul el texto de las
       tarjetas que va quedando "bajo" el cursor durante el arrastre (se
       comporta como una seleccion de texto normal, no como el gesto de
       carrusel que es). */
    user-select: none;
    -webkit-user-select: none;
}

.h-timeline__track::-webkit-scrollbar {
    display: none;
}

.h-timeline__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.h-timeline__card {
    flex: 0 0 calc((100% - 24px * 2) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    scroll-snap-align: center;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 40, 60, .12);
    overflow: hidden;
}

/* position:relative + imagen position:absolute (en vez de height:100% en
   flujo normal) es a proposito: un hijo con height:100% dentro de un
   flex item con aspect-ratio confunde el calculo de alto de Chrome (el
   contenedor terminaba con el alto de la imagen real -- por eso las
   fotos, todas verticales de origen, se veian mucho mas altas que 4:3).
   Sacando la imagen del flujo normal, el contenedor se guia solo por su
   propio aspect-ratio, sin que el hijo pueda influir. */
.h-timeline__card-media {
    position: relative;
    flex: none;
    aspect-ratio: 4 / 3;
}

.h-timeline__card-media .h-timeline__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

img.h-timeline__img,
.h-timeline__img.media--placeholder {
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    /* Evita el "fantasma" nativo de arrastrar la imagen (drag-and-drop de
       archivo del navegador), que compite con el arrastre del carrusel. */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

img.h-timeline__img {
    object-fit: cover;
}

.h-timeline__card-body {
    padding: 22px 22px 26px;
}

.h-timeline__card-year {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.h-timeline__card-body h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--ink);
}

.h-timeline__card-body p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Barra de progreso debajo del carrusel, solo se renderiza si la
   reproduccion automatica esta activa -- marca, en el color de marca de
   SERMAX, cuanto falta para el proximo avance. La anima
   timeline-horizontal.js con una transicion CSS de width, reiniciada en
   cada cambio de hito (automatico, flechas o al soltar un arrastre). */
.h-timeline__progress {
    position: relative;
    height: 4px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(0, 169, 199, .15);
    overflow: hidden;
}

.h-timeline__progress-bar {
    height: 100%;
    width: 0;
    background: var(--brand);
}

/* Contenedor de las flechas (a pedido: se mudan de "al lado de la regla
   de anios" a flotar sobre los costados de las tarjetas, superpuestas al
   50% con el borde del carrusel) -- necesita position:relative para que
   .h-timeline__arrow (position:absolute) se ubique respecto de esto y no
   de un ancestro mas lejano. */
.h-timeline__stage {
    position: relative;
}

.h-timeline__rail-wrap {
    margin-top: 22px;
}

/* PROVISORIO (a pedido explicito, "es una prueba"): tercera variante de
   las flechas. Semicirculo de color plano (antes: franja con degradado),
   anclado al mismo borde real de siempre (ver comentario de --prev/--next
   mas abajo sobre el -40px). 40x60px a pedido; el border-radius de 999px
   solo del lado curvo es lo que arma la forma redondeada, no un dibujo a
   mano. El icono se alinea a los extremos (flex-start en la de la
   izquierda, flex-end en la derecha) en vez de centrado, tambien a
   pedido. Si no convence, comparar contra las dos variantes anteriores
   antes de probar una cuarta. */
.h-timeline__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    width: 40px;
    height: 60px;
    border: none;
    padding: 0;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, width .2s ease;
}

.h-timeline__arrow:hover {
    background: var(--brand-strong);
    box-shadow: 0 10px 24px rgba(0, 169, 199, .35);
}

.h-timeline__arrow svg {
    width: 26px;
    height: 26px;
    transition: transform .2s ease;
}

/* -40px, no 0: .h-timeline__track tiene 40px de padding+margen negativo
   de cada lado (lugar reservado para que la sombra de las tarjetas no se
   corte, ver mas arriba) y el recorte real del scroll horizontal pasa por
   ahi, no por el borde de .h-timeline__viewport/.h-timeline__stage (esos
   ya no recortan nada, tienen overflow:visible). Con el lado plano del
   semicirculo pegado justo ahi, todo el semicirculo (lado plano afuera,
   panza curva hacia adentro) queda visible sin que nada lo recorte. */
.h-timeline__arrow--prev {
    left: -40px;
    justify-content: flex-start;
    border-radius: 0 999px 999px 0;
}

.h-timeline__arrow--next {
    right: -40px;
    justify-content: flex-end;
    border-radius: 999px 0 0 999px;
}

/* Hover "crece hacia el centro" (a pedido): el lado plano/anclado
   (left/right en -40px) no se mueve, asi que agrandar el ancho 10px
   estira solo la panza curva hacia adentro del carrusel -- da la
   sensacion de que la flecha "crece" hacia el centro en vez de agrandarse
   parejo para los dos lados. El chevron acompaña ese crecimiento
   moviendose los mismos 10px, tambien hacia el centro. */
.h-timeline__arrow--prev:hover {
    width: 50px;
}

.h-timeline__arrow--prev:hover svg {
    transform: translateX(10px);
}

.h-timeline__arrow--next:hover {
    width: 50px;
}

.h-timeline__arrow--next:hover svg {
    transform: translateX(-10px);
}

.h-timeline__rail {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    /* space-between (antes center): con menos hitos que los que entran
       holgados en el ancho del carrusel, "center" los apiña en el medio y
       deja la linea "pelada" cerca de los bordes -- a pedido, los puntos
       tienen que llegar hasta las puntas de la linea. */
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 22px 8px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.h-timeline__rail::-webkit-scrollbar {
    display: none;
}

/* left/right en 56px (antes 24px) para que la linea empiece y termine
   justo en el CENTRO del primer/ultimo punto (padding de 8px del rail +
   mitad del ancho de 96px de cada boton), ahora que "space-between" los
   manda a las puntas -- si no, la linea se queda mas larga o mas corta
   que el tramo real que cubren los puntos. "top" bajo de 32px a 28px:
   medido por CDP, el punto quedaba con su centro 4px mas arriba que el
   centro de la linea. */
.h-timeline__rail::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 56px;
    right: 56px;
    height: 2px;
    background: var(--line);
    z-index: 0;
}

.h-timeline__point {
    position: relative;
    z-index: 1;
    flex: none;
    scroll-snap-align: center;
}

.h-timeline__point button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 96px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.h-timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--line);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.h-timeline__point.is-active .h-timeline__dot {
    border-color: var(--brand);
    background: var(--brand);
    transform: scale(1.25);
}

.h-timeline__point .h-timeline__year {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: color .25s ease;
}

.h-timeline__point.is-active .h-timeline__year {
    color: var(--brand-strong);
}

/* ==========================================================================
   Nosotros: confianza y respaldo
   ========================================================================== */

/* El titulo de la seccion usa .reasons__title (mismo formato que el de
   Mision/Vision/Valores): alineado a la izquierda, sin clase propia.
   Una tarjeta por fila, a todo el ancho de la seccion: hoy solo queda la
   de LG, en formato banner fino en vez del cuadro grande de antes. Si en
   el futuro se agrega otra, cada una ocupa su propia fila completa. */
.trust-strip__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 14px;
    transition: transform .15s, box-shadow .15s;
}

.trust-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(15, 40, 60, .12);
}

.trust-badge__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 169, 199, .12);
    color: var(--brand-strong);
}

.trust-badge__icon svg {
    width: 24px;
    height: 24px;
}

/* Linea divisoria entre el icono/logo y el texto, y el texto ocupa el
   resto del ancho de la tarjeta (min-width:0 para que un texto largo
   pueda achicarse/ajustar linea en vez de desbordar el flex). */
.trust-badge__body {
    flex: 1;
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid var(--line);
}

/* Logo real de una marca (ej. LG) en vez del icono generico: grande, sin
   caja ni fondo (a diferencia del icono generico, que si tiene el tinte
   teal). Alto fijo, ancho automatico segun la proporcion propia del logo
   (evita el bug de circularidad de un width:100% contra un padre auto
   dentro del flex de .trust-badge). */
.trust-badge__icon--logo {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
}

.trust-badge__icon--logo img {
    display: block;
    width: auto;
    height: 100px;
    max-width: 220px;
    object-fit: contain;
}

.trust-badge__title {
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--ink);
}

.trust-badge__text {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.6;
}

/* ==========================================================================
   Boton primario (publico)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px;
    border: 0;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}

.btn:hover {
    background: var(--brand-strong);
}

.btn--outline {
    background: #fff;
    color: var(--brand-strong);
    border: 1px solid var(--brand);
}

.btn--outline:hover {
    background: var(--brand);
    color: #fff;
}

/* ==========================================================================
   Pagina Servicios: tarjetas con overlay + modal
   ========================================================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Columnas segun la cantidad de servicios (paginas Servicios y, mas abajo,
   la vidriera de Home comparten .service-card): 2 -> 2 columnas, 3 -> 3
   (ya es el default de arriba), 4 -> 2 columnas de 2 filas, 5 o mas -> 3
   siempre (tambien el default). "Quantity query" con :has(): matchea el
   contenedor cuando su hijo N tambien es el ultimo, es decir, cuando hay
   exactamente N hijos en total -- no depende de contar nada en PHP.
   Escapado a >760px (ver @media mas abajo) para no pelear en especificidad
   con el 1-columna de mobile: :has(...) es mas especifico que .services-grid
   sola, asi que sin este scope le ganaria al override mobile. */
@media (min-width: 761px) {
    .services-grid:has(> .service-card:only-child),
    .services-teaser__grid:has(> .service-card:only-child) {
        grid-template-columns: minmax(0, 360px);
    }

    .services-grid:has(> .service-card:nth-child(2):last-child),
    .services-teaser__grid:has(> .service-card:nth-child(2):last-child),
    .services-grid:has(> .service-card:nth-child(4):last-child),
    .services-teaser__grid:has(> .service-card:nth-child(4):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Con la grilla en 2 columnas (2 o 4 servicios) la tarjeta se ve
       desproporcionadamente alta con el 3:4 pensado para 3 columnas -- se
       ensancha a 3:2 en ambos casos (el ancho de columna es el mismo haya
       1 o 2 filas). Con 3 o 5+ (3 columnas) se mantiene el 3:4 de siempre. */
    .services-grid:has(> .service-card:nth-child(2):last-child) > .service-card,
    .services-teaser__grid:has(> .service-card:nth-child(2):last-child) > .service-card,
    .services-grid:has(> .service-card:nth-child(4):last-child) > .service-card,
    .services-teaser__grid:has(> .service-card:nth-child(4):last-child) > .service-card {
        aspect-ratio: 3 / 2;
    }
}

.service-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    background: linear-gradient(135deg, #10243b, #0b1f35);
    font-family: inherit;
    transition: transform .15s, box-shadow .15s;
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 40, 60, .16);
}

.service-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.service-card:hover .service-card__img {
    transform: scale(1.06);
}

/* Gradiente base para legibilidad del titulo. */
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 16, 31, .8), rgba(4, 16, 31, .05) 60%);
}

.service-card__title {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 22px;
    z-index: 3;
    color: #fff;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.2;
}

/* Overlay de hover: oscurece + lupa. */
.service-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: rgba(4, 16, 31, .55);
    opacity: 0;
    transition: opacity .2s ease;
}

.service-card:hover .service-card__overlay,
.service-card:focus-visible .service-card__overlay {
    opacity: 1;
}

.service-card__lupa {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-strong);
    transform: scale(.85);
    transition: transform .2s ease;
}

.service-card:hover .service-card__lupa {
    transform: scale(1);
}

.service-card__lupa svg {
    width: 30px;
    height: 30px;
}

/* Modal */
.service-modal[hidden] {
    display: none;
}

.service-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.service-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 16, 31, .62);
}

.service-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    max-height: 90vh;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(4, 16, 31, .35);
}

.service-modal__media {
    position: relative;
    min-height: 340px;
    background: #eef2f6;
}

.service-modal__media img {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-modal__media.has-image img {
    display: block;
}

.service-modal__media.has-image .service-modal__ph {
    display: none;
}

.service-modal__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #8494a5;
    background: repeating-linear-gradient(45deg, #eef2f6 0 16px, #e6ecf2 16px 32px);
}

.service-modal__ph svg {
    width: 54px;
    height: 54px;
    opacity: .55;
}

.service-modal__body {
    display: flex;
    flex-direction: column;
    padding: 38px;
}

.service-modal__body h2 {
    font-size: clamp(22px, 3vw, 28px);
}

.service-modal__body hr {
    margin: 16px 0 22px;
    border: 0;
    border-top: 1px solid var(--line);
}

.service-modal__body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    white-space: pre-line;
    text-align: justify;
}

.service-modal__actions {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.service-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    text-transform: none;
}

.service-modal__close:hover {
    background: #fff;
}

/* ==========================================================================
   Home: bloque "Certificacion LG" (imagen + texto + boton que abre el
   certificado en un lightbox)
   ========================================================================== */

.lg-cert {
    background: #f7fafc;
}

.lg-cert__logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 16px;
}

.lg-cert__text .btn {
    margin-top: 22px;
}

.cert-modal[hidden] {
    display: none;
}

.cert-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}

.cert-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 16, 31, .72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .28s ease;
}

.cert-modal.is-visible .cert-modal__backdrop {
    opacity: 1;
}

/* El "marco": mat blanco con padding alrededor de la imagen (como un
   passe-partout) + un borde fino en la imagen misma, para que se sienta un
   documento enmarcado y no una foto suelta flotando en la pantalla. */
.cert-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    max-height: 90vh;
    overflow: auto;
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(4, 16, 31, .4);
    opacity: 0;
    transform: scale(.93) translateY(14px);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
}

.cert-modal.is-visible .cert-modal__dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.cert-modal__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(15, 40, 60, .12);
}

.cert-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.cert-modal__close:hover {
    background: #fff;
}

/* ==========================================================================
   Bloque "Gestion digital del mantenimiento" (Fracttal). Se muestra en Inicio
   y en Servicios desde una unica funcion (render_gestion_digital), por eso el
   CSS no depende de en que pagina esta. Reusa .split y el lightbox
   .cert-modal* del certificado LG; solo agrega lo propio de este bloque.
   ========================================================================== */

.gd-block__logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 14px;
}

.gd-block__eyebrow {
    margin: 0 0 10px;
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gd-block__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.gd-block__pills li {
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.gd-block__text .btn {
    margin-top: 22px;
}

/* El modal de vistas que tenia este bloque se saco: ahora el boton lleva a la
   nota de Novedades, que muestra las mismas capturas en su cuerpo. */

/* ==========================================================================
   CTA al pie de una nota de Novedades. El contenido es propio de cada nota
   (columnas cta_* en `novedades`), pero el formato es siempre este. Se
   renderiza desde public/novedad.php y no desde el cuerpo: Quill borra las
   clases al reguardar, asi que un boton escrito adentro no sobrevive.
   ========================================================================== */

.news-cta {
    margin: 44px 0 8px;
    padding: 32px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 14px;
    background: #f7fafc;
}

.news-cta__title {
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4vw, 24px);
    line-height: 1.25;
}

.news-cta__text {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 760px) {
    .news-cta {
        padding: 24px;
    }
}

/* ==========================================================================
   Pagina de Contacto (info + formulario + mapa)
   ========================================================================== */

.contact__grid {
    grid-template-columns: minmax(0, 380px) 1fr;
    align-items: start;
}

.contact__intro {
    margin: 0 0 28px;
    max-width: 380px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
}

.field {
    display: grid;
    gap: 6px;
}

.field--full {
    grid-column: 1 / -1;
}

.field label {
    color: var(--muted);
    font-size: 14px;
}

.field-input {
    width: 100%;
    padding: 8px 2px;
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0;
    transition: border-color .15s;
}

.field-input:focus {
    outline: none;
    border-bottom-color: var(--brand);
}

textarea.field-input {
    resize: vertical;
    min-height: 44px;
}

.field-error {
    color: #dc2626;
    font-size: 13px;
}

/* Honeypot: oculto para humanos, visible para bots. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__foot {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}

.contact-form__note {
    color: var(--muted);
    font-size: 14px;
}

.form-success,
.form-error {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.form-success {
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.form-error {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.map-section {
    margin-top: 8px;
}

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

/* ==========================================================================
   Pagina 404
   ========================================================================== */

.error-404 {
    padding: 120px 0;
    text-align: center;
}

.error-404__inner {
    max-width: 520px;
}

.error-404__code {
    margin: 0;
    font-size: clamp(64px, 10vw, 110px);
    font-weight: 900;
    line-height: 1;
    color: var(--brand);
}

.error-404 h1 {
    margin: 8px 0 18px;
    font-size: clamp(24px, 3vw, 32px);
}

.error-404 .prose {
    margin: 0 auto 32px;
}

.error-404__links {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--sermax-ink);
    color: #fff;
    border-top: 4px solid var(--brand);
}

.site-footer__main {
    position: relative;
    width: min(100% - 96px, 1220px);
    margin: 0 auto;
    padding: 62px 0 52px;
    display: grid;
    grid-template-columns: 1.15fr .78fr .92fr 1.05fr;
    gap: clamp(34px, 5vw, 60px);
    align-items: start;
}

.footer-description {
    max-width: 300px;
    margin: 14px 0 0;
    color: #aab7ba;
    font-size: 13px;
    line-height: 1.6;
}

.footer-section h2 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-links {
    display: grid;
    gap: 10px;
}

.footer-links a {
    display: inline-block;
    width: fit-content;
    text-decoration: none;
    color: #aab7ba;
    font-size: 13px;
    line-height: 1.4;
    transition: color .15s, transform .15s;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(3px);
}

.newsletter-form {
    width: min(100%, 300px);
    height: 46px;
    display: grid;
    grid-template-columns: 1fr 48px;
    align-items: center;
    border: 1px solid #3b474b;
    border-radius: 8px;
    overflow: hidden;
    background: #202a2e;
    transition: border-color .15s, background-color .15s;
}

.newsletter-form:focus-within {
    border-color: var(--brand);
    background: #263236;
}

.newsletter-form label {
    height: 100%;
}

.newsletter-form span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.newsletter-form input {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0 14px;
    font: inherit;
    background: transparent;
    color: #fff;
}

.newsletter-form input::placeholder {
    color: #839196;
}

.newsletter-form input:focus {
    outline: none;
}

.newsletter-form button {
    height: 100%;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--brand);
    cursor: pointer;
}

.newsletter-form button svg {
    width: 22px;
    height: 22px;
}

.social-title {
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}

.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transition: background .15s, color .15s;
}

.social-links a:hover {
    background: var(--brand);
    color: #fff;
}

.social-links svg {
    width: 19px;
    height: 19px;
}

/* Lista de datos con icono (compartida entre footer y pagina de Contacto,
   que la usa sobre fondo claro: el color se resuelve por contexto). */
.icon-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.icon-list > li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
}

.icon-list svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: none;
    color: var(--brand-strong);
}

/* El logo real de WhatsApp (ver contacto_icon_svg() en admin_content.php)
   tiene mucha mas "tinta" en el mismo viewBox 24x24 que un icono de linea
   simple, asi que a igual tamano se ve mas grande que el resto. Se achica
   el dibujo a 16px con 2px de margen alrededor -- mismo espacio total
   (20x20) que los demas iconos, para no correr el texto de al lado. */
.icon-list svg.icon--whatsapp {
    width: 16px;
    height: 16px;
    margin: 2px;
}

/* En el bloque "Contactanos" de Contacto el texto es mas grande que en el
   footer, asi que el icono necesita mas margen arriba para seguir alineado
   con la primera linea. */
.contact__info .icon-list svg.icon--whatsapp {
    margin: 4px 2px 0 2px;
}

.icon-list a {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--brand-strong);
    text-decoration: none;
}

/* En el bloque "Contactanos" de Contacto el texto del link (mail, telefono,
   whatsapp) debe verse igual que el resto del texto de la lista (ej. la
   direccion, que no es link), no en el celeste de marca -- el icono se
   queda con su color propio (.icon-list svg), esto solo pisa el texto. */
.contact__info .icon-list a {
    color: var(--ink);
}

/* En el footer (fondo oscuro) el texto pasa a gris claro y el icono a
   verde azulado, en vez del teal oscuro sobre blanco de la pagina de
   Contacto. Tambien mas chico, para igualar al resto de las columnas. */
.site-footer .icon-list {
    gap: 12px;
}

.site-footer .icon-list > li {
    color: #aab7ba;
    font-size: 13px;
    line-height: 1.4;
}

.site-footer .icon-list svg {
    color: var(--brand);
}

.site-footer .icon-list a {
    color: #aab7ba;
    transition: color .15s;
}

.site-footer .icon-list a:hover {
    color: #fff;
}

.site-footer__bar {
    min-height: 70px;
    padding: 14px max(48px, calc((100% - 1220px) / 2));
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    background: var(--sermax-ink);
    border-top: 1px solid #313c40;
    font-size: 12px;
    font-weight: 500;
    color: #819095;
}

.site-footer__bar p {
    margin: 0;
}

/* Mismo estilo que el texto de copyright de al lado (tamano/peso/color
   heredados de .site-footer__bar) -- a proposito no se destaca, es un
   credito de autoria, no un llamado a la accion. */
.footer-credit {
    color: inherit;
    text-decoration: none;
}

.footer-credit:hover {
    color: #fff;
}

.floating-whatsapp {
    position: fixed;
    right: 34px;
    bottom: 34px;
    z-index: 30;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #25d366;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    transition: transform .15s;
}

.floating-whatsapp:hover {
    transform: translateY(-3px);
}

.floating-whatsapp svg {
    width: 32px;
    height: 32px;
}

/* Aparece despues de scrollear un poco mas de media pantalla (ver
   public/assets/js/scroll-fx.js). Apilado justo arriba del boton de
   WhatsApp, mismo borde derecho. */
.back-to-top {
    position: fixed;
    right: 34px;
    bottom: 108px;
    z-index: 29;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--ink);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background .15s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--brand-strong);
}

.back-to-top svg {
    width: 21px;
    height: 21px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: nav + boton mas angostos para que no se aplasten contra el logo
   antes de llegar al breakpoint de la bandeja mobile (1024px, ver abajo). */
@media (max-width: 1180px) {
    .main-nav a {
        padding-inline: 8px;
        font-size: 13px;
    }

    .diagnosis-link {
        padding-inline: 14px;
        font-size: 13px;
    }
}

/* Con 6 items el nav de escritorio deja de entrar bastante antes del
   breakpoint de contenido (760px): a partir de aca pasa a la bandeja
   deslizante. El bloqueo del scroll de fondo mientras esta abierta se
   maneja en JS (ver public/assets/js/scroll-fx.js): un overflow:hidden
   aca no alcanza porque depende de que <html> tenga overflow visible
   para propagar el bloqueo al viewport, y html ya tiene overflow-x: clip
   (fix del scroll horizontal del menu fuera de pantalla). */
@media (max-width: 1024px) {
    .site-header__inner {
        min-height: 74px;
        grid-template-columns: auto auto;
        justify-content: space-between;
        gap: 16px;
    }

    /* Con la bandeja del menu abierta el header nunca se oculta, para que
       el boton de cerrar (la X) no quede fuera de pantalla. Pasa a fixed
       (en vez de sticky) porque el overflow:hidden que bloquea el scroll
       de fondo rompe el "stickyness" normal del header. */
    .site-header:has(.nav-toggle:checked) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: none;
    }

    .nav-toggle-label {
        position: relative;
        z-index: 41;
        display: grid;
        gap: 5px;
        width: 38px;
        cursor: pointer;
    }

    .nav-toggle-label span {
        height: 2px;
        background: var(--sermax-ink);
        transition: transform .2s ease, opacity .15s ease;
    }

    /* El hamburguer se convierte en X mientras la bandeja esta abierta. */
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Fondo oscuro detras de la bandeja; un <label> mas, asi tocar afuera
       tambien cierra el menu (mismo checkbox, sin JS). */
    .nav-toggle:checked ~ .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(21, 29, 32, .5);
    }

    /* La bandeja en si: fija, pegada a la derecha, todo el alto de la
       pantalla pero no todo el ancho, con las opciones en columna. */
    .mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 40;
        width: min(80vw, 320px);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        background: #fff;
        box-shadow: -16px 0 40px rgba(21, 29, 32, .18);
        padding: 96px 28px 32px;
        transform: translateX(100%);
        transition: transform .28s ease;
    }

    .nav-toggle:checked ~ .mobile-nav {
        transform: translateX(0);
    }

    .main-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .main-nav a {
        padding: 14px 4px;
        font-size: 14px;
        border-bottom: 1px solid var(--sermax-gray-200);
        text-align: left;
    }

    .main-nav a:last-child {
        border-bottom: 0;
    }

    .header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--sermax-gray-200);
    }

    .diagnosis-link {
        width: 100%;
    }

    /* Restaura el tamano de escritorio: dentro de la bandeja hay espacio de
       sobra, no hace falta el ajuste angosto de tablet (ver 1180px arriba). */
    .diagnosis-link {
        padding-inline: 22px;
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .split {
        gap: 40px;
    }

    .reasons__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .h-timeline__card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 760px) {
    :root {
        --content-width: min(100% - 32px, 1220px);
    }

    .brand--header .brand-logo {
        height: 40px;
    }

    .section {
        padding: 48px 0;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .news-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-teaser__grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin: 0 auto 28px;
    }

    .home-hero {
        min-height: 88svh;
    }

    .home-hero__content {
        width: min(88%, 520px);
        padding: 90px 0 60px;
    }

    .home-hero__eyebrow {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .home-hero__title {
        font-size: clamp(36px, 12vw, 54px);
        line-height: .98;
        letter-spacing: -.03em;
    }

    .home-hero__subtitle {
        max-width: 92%;
        margin-top: 18px;
        font-size: 17px;
        line-height: 1.5;
    }

    .home-hero__subtitle-rotator {
        margin-top: 18px;
    }

    /* Mismo criterio que .page-hero__overlay en mobile: la zona oscura se
       estira mucho mas hacia la derecha porque el texto ocupa casi todo
       el ancho. */
    .home-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 10, 12, .94) 0%,
                rgba(2, 10, 12, .88) 42%,
                rgba(2, 10, 12, .68) 72%,
                rgba(2, 10, 12, .42) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .16) 0%,
                rgba(0, 0, 0, .12) 48%,
                rgba(0, 0, 0, .34) 100%
            );
    }

    .stats-band__grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 36px 0;
    }

    .cta-band__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 0;
    }

    .cta-band .btn {
        width: 100%;
    }

    .h-timeline__track {
        gap: 16px;
    }

    /* Deja "asomar" un pedacito de la siguiente tarjeta -- misma logica que
       cualquier carrusel mobile, asi se nota que se puede seguir deslizando. */
    .h-timeline__card {
        flex-basis: 86%;
    }

    /* En mobile se saca la regla de anios y las flechas (a pedido): las
       tarjetas ya "piden" arrastre solas (se asoma la siguiente), no hace
       falta una segunda forma de navegar que en pantallas chicas termina
       ocupando espacio de mas sin aportar claridad. Las flechas ya no
       viven dentro de .h-timeline__rail-wrap (se movieron a flotar sobre
       las tarjetas, ver .h-timeline__stage), asi que necesitan su propia
       regla aca. */
    .h-timeline__rail-wrap {
        display: none;
    }

    .h-timeline__arrow {
        display: none;
    }

    .trust-badge {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }

    .trust-badge__icon--logo img {
        height: 64px;
        max-width: 160px;
    }

    .trust-badge__body {
        padding-left: 0;
        padding-top: 16px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .reps-grid {
        grid-template-columns: 1fr;
    }

    .rep-card {
        padding: 22px;
    }

    .service-modal__dialog {
        grid-template-columns: 1fr;
    }

    .service-modal__media {
        min-height: 220px;
    }

    .service-modal__body {
        padding: 26px;
    }

    .contact-form {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .contact-form__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-form__foot .btn {
        width: 100%;
    }

    .map {
        height: 320px;
    }

    .about__media {
        order: -1;
    }

    img.media.media--tall,
    .media--placeholder.media--tall {
        aspect-ratio: 16 / 11;
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 42px 0;
    }

    .site-footer__bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        padding: 18px 16px;
    }

    .floating-whatsapp {
        right: 18px;
        bottom: 18px;
    }

    .back-to-top {
        right: 18px;
        bottom: 88px;
        width: 44px;
        height: 44px;
    }
}