/* ==========================================================================
   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;
}

/* 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;
}

/* ==========================================================================
   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);
}

.header-whatsapp {
    width: 52px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sermax-gray-300);
    border-radius: 7px;
    color: var(--brand-strong);
    background: #fff;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

.header-whatsapp:hover {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

.header-whatsapp svg {
    width: 22px;
    height: 22px;
}

/* Solo se ve en la bandeja mobile; en el boton compacto de desktop el
   icono solo alcanza (ver aria-label para accesibilidad ahi). */
.header-whatsapp__label {
    display: none;
}

.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);
}

.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;
}

/* 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;
}

.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;
}

.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;
}

/* 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);
}

/* Variante en 2 columnas (ej. diferenciales del Home): 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;
    }
}

.section--diferenciales {
    background: #f7fafc;
}

/* ==========================================================================
   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);
}

/* 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);
}

.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);
}

/* ==========================================================================
   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: tarjetas de representantes
   ========================================================================== */

.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);
}

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

.timeline-section {
    background: #f7fafc;
}

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

.h-timeline__detail {
    position: relative;
    min-height: 260px;
    margin-bottom: 36px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 45px rgba(15, 40, 60, .1);
    overflow: hidden;
}

.h-timeline__detail-item {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 220px) 1fr;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}

.h-timeline__detail-item.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .4s ease, transform .4s ease;
}

.h-timeline__detail-media {
    align-self: stretch;
}

.h-timeline__detail-media .h-timeline__img {
    width: 100%;
    height: 100%;
}

img.h-timeline__img,
.h-timeline__img.media--placeholder {
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

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

.h-timeline__detail-body {
    padding: 32px 36px;
    align-self: center;
}

.h-timeline__detail-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__detail-body h3 {
    margin: 0 0 8px;
    font-size: 21px;
    color: var(--ink);
}

.h-timeline__detail-body p {
    margin: 0;
    max-width: 56ch;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.h-timeline__rail-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h-timeline__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.h-timeline__arrow:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.h-timeline__rail {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    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;
}

.h-timeline__rail::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 24px;
    right: 24px;
    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;
}

.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;
}

.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__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;
}

/* ==========================================================================
   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);
}

.icon-list a {
    display: inline-flex;
    color: var(--brand-strong);
}

/* 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;
}

.footer-diagnosis {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b7c3c6;
    text-decoration: none;
    font-weight: 650;
    transition: color .15s;
}

.footer-diagnosis svg {
    color: var(--brand);
}

.footer-diagnosis: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,
    .header-whatsapp {
        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;
    }

    .header-whatsapp {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .header-whatsapp__label {
        display: block;
    }
}

@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);
    }
}

@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__detail-item {
        grid-template-columns: 1fr;
    }

    .h-timeline__detail {
        min-height: 0;
    }

    .h-timeline__detail-media {
        aspect-ratio: 16 / 11;
    }

    .h-timeline__detail-body {
        padding: 22px 20px;
    }

    .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;
    }
}