/* ============================================================
   Nedatec Consulting — hoja de estilos base
   Tokens de color definidos durante la fase de diseño.
   ============================================================ */

/* Plus Jakarta Sans, autoalojada (Content/fonts/) en vez de vía CDN de
   Google Fonts: evita una petición cross-origin que bloquea el render y
   la duda de RGPD por la transferencia de IP al CDN de Google.
   Subset a Latin (incluye ñ/á/é/í/ó/ú/ü/¿/¡ y símbolos tipográficos
   habituales) y solo a los 4 pesos que usa esta hoja de estilos
   (400/500/600/700), sin cursiva. Licencia SIL Open Font License 1.1 —
   ver Content/fonts/OFL.txt. */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/plus-jakarta-sans-400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/plus-jakarta-sans-500.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/plus-jakarta-sans-600.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/plus-jakarta-sans-700.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Versión "R, G, B" (mismo patrón que --color-accent-rgb) para poder
       generar el overlay oscuro translúcido de .area-card__overlay sin
       repetir el valor. */
    --color-graphite-rgb: 38, 50, 56;
    --color-graphite: rgb(var(--color-graphite-rgb));
    --color-graphite-text: #dbe3ea;
    --color-graphite-text-muted: #a9b6c2;

    /* Versión "R, G, B" (mismo patrón que --color-accent-rgb): la usa el
       degradado de las flechas de scroll de .clients-tabs-wrapper para
       desvanecerse hasta transparente sin repetir el valor RGB. */
    --color-cream-rgb: 248, 244, 235;
    --color-cream: rgb(var(--color-cream-rgb));
    --color-cream-card: #fbf8f1;
    --color-cream-border: #e3ddcd;

    --color-text-primary: #2a2724;
    --color-text-secondary: #6b665f;

    /* Amarillo vivo: para iconos y detalles sobre fondo claro (sin
       problema de contraste porque no lleva texto blanco encima).
       Se guarda también en formato "R, G, B" para poder generar variantes
       rgba() (bordes, hovers) sin repetir el valor RGB en varios
       sitios del CSS. */
    --color-accent-rgb: 249, 168, 37;
    --color-accent: rgb(var(--color-accent-rgb));
    --color-accent-bg: #ffecc7;
    --color-accent-text: #ef6c00;

    /* Amarillo/dorado intenso: específico para elementos con texto BLANCO
       sobre el propio color de fondo (botón primario). Un amarillo vivo
       real no alcanza contraste AA (4.5:1) con texto blanco; este tono
       más oscuro y saturado ronda 3.3:1 — aceptable para texto de botón
       en negrita, aunque por debajo del AA estricto. Si en algún momento
       se requiere cumplimiento AA estricto, la alternativa es usar texto
       oscuro (--color-text-primary) sobre --color-accent en su lugar. */
    --color-accent-strong: #ff8f00;
    --color-accent-strong-hover: #f57f17;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;

    --font-base: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;

    /* Altura de la cabecera en móvil. La usan tanto el header (fixed)
       como el padding-top compensatorio del body, para no repetir el
       valor en varios sitios ("código mágico"). */
    --header-height-mobile: 73px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-base);
    color: var(--color-text-primary);
    background: var(--color-cream);
}

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

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

/* ---------- Cabecera ---------- */

.site-header {
    padding: 14px 0;
    background: var(--color-graphite);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}

/* Cabecera "condensada": tras superar un pequeño umbral de scroll
   (ver header-scroll.js), se reduce el padding y se refuerza la sombra.
   Como la cabecera ahora es sticky (antes era relative: solo fija en
   móvil), este estado es visible también en escritorio, no solo al
   desplegar el menú móvil. */
.site-header.is-scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.site-header.is-scrolled .site-header__logo {
    height: 36px;
}

/* Mismo max-width + padding horizontal que el resto de secciones (ver
   .hero, .site-certifications__grid, etc.), para que el logo y el CTA
   de Prevengos queden alineados con los contenidos de las páginas en
   lugar de pegados al borde del navegador. */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-header__logo {
    height: 45px;
    transition: height 0.25s ease;
}

.site-header__nav {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 32px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-graphite-text);
}

.site-header__nav a {
    position: relative;
    padding-bottom: 4px;
    transition: color 0.2s ease;
}

.site-header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.25s ease;
}

.site-header__nav a:hover {
    color: #ffffff;
}

.site-header__nav a:hover::after {
    width: 100%;
}

/* Sección actual: mismo tratamiento visual que :hover (texto blanco +
   subrayado completo) pero permanente, más un peso de fuente mayor para
   distinguirla de un simple hover de paso. */
.site-header__nav a.is-active {
    color: #ffffff;
    font-weight: 700;
}

.site-header__nav a.is-active::after {
    width: 100%;
}

.site-header__right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-header__divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
}

/* Contenedor que agrupa nav + CTA. En escritorio ocupa el espacio restante
   tras el logo dentro de .site-header__inner, de modo que el nav (flex:1 +
   justify-content:center) queda centrado en ese espacio y el CTA se
   mantiene fijo al borde derecho del contenido (alineado con el resto de
   secciones). En móvil se convierte en el panel desplegable del menú (ver
   media query). */
.site-header__collapsible {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 24px;
}

/* Oculto en escritorio: el menú siempre está visible, no hace falta botón. */
.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.site-header__toggle .icon-close {
    display: none;
}

.site-header__toggle[aria-expanded="true"] .icon-menu {
    display: none;
}

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

.site-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-accent);
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header__cta:hover {
    background-color: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.55);
}

.icon-external {
    flex-shrink: 0;
}

/* ---------- Hero (Inicio) ---------- */

.hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
    padding: 42px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.hero__slides {
    position: relative;
    min-height: 200px;
}

.hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.hero__slide--active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.hero__eyebrow {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--color-accent-text);
    background: var(--color-accent-bg);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.hero h1 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 12px;
}

.hero p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
}

.hero__actions {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.hero__dots {
    display: flex;
    gap: 6px;
}

.hero__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-cream-border);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero__dot--active {
    background: var(--color-accent);
}

/* Los puntos pasan a ser navegables por clic/teclado (ver hero-rotator.js,
   que añade role="button" y tabindex al montar los listeners); el cursor
   y un ligero aumento de tamaño al pasar el ratón lo comunican, ya que un
   <span> no lo sugiere por sí mismo. */
.hero__dot {
    cursor: pointer;
}

.hero__dot:hover {
    transform: scale(1.3);
}

/* Barra de progreso del autoplay del hero: refleja visualmente cuánto
   falta para el cambio automático de slide (ver hero-rotator.js). Oculta
   por completo con prefers-reduced-motion (ver esa media query, al final
   de la hoja), en vez de mostrarse parada en 0%, que se leería como un
   elemento roto. */
.hero__progress {
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-cream-border);
    overflow: hidden;
    margin-top: 10px;
}

.hero__progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-accent);
}

.hero__progress-bar.is-animating {
    animation-name: hero-progress-fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes hero-progress-fill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.hero__photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-cream-border);
    min-height: 260px;
}

/* scale(1.06) de base: dará margen al parallax de hero-parallax.js para
   desplazar la imagen unos píxeles sin dejar ver el borde del marco. Es
   una imagen ligeramente recortada permanentemente (también en móvil,
   donde el parallax no se activa); con las fotos actuales no llega a
   recortar contenido relevante. */
.hero__photo-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.6s ease, transform 0.35s ease-out;
}

.hero__photo-img--active {
    opacity: 1;
}

/* ---------- Botones ---------- */

.btn {
    display: inline-block;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Reset para cuando .btn se usa sobre <button> en vez de <a> (el banner de
   cookies usa <button>): sin esto, el navegador aplica su propio fondo y
   borde nativos por encima de los estilos de abajo. */
button.btn {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Selector reforzado a ".btn.btn--primary" (en vez de solo ".btn--primary")
   para que su especificidad (0-2-0) supere a la del reset "button.btn"
   (0-1-1) de arriba. Sin este refuerzo, en un <button class="btn btn--primary">
   el reset gana y el botón se queda sin fondo (solo texto blanco, invisible
   sobre fondos claros como el modal de cookies). En <a class="btn btn--primary">
   no hay reset que compita, así que el refuerzo no cambia nada ahí. */
.btn.btn--primary {
    background: var(--color-accent-strong);
    color: #ffffff;
}

.btn.btn--primary:hover {
    background: var(--color-accent-strong-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(184, 134, 11, 0.5);
}

.btn.btn--secondary {
    background: transparent;
    border: 1px solid #c9c2b4;
    color: var(--color-text-primary);
}

.btn.btn--secondary:hover {
    border-color: var(--color-text-primary);
    transform: translateY(-2px);
}

/* ---------- Utilidad: aparición al hacer scroll (js-reveal) ----------
   Genérica, reutilizable en cualquier página/elemento. El desfase entre
   elementos hermanos se resuelve con nth-child, sin necesidad de atributos
   data-* ni JS adicional por elemento. */

.js-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

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

.stats__item.js-reveal:nth-child(1) {
    transition-delay: 0s;
}

.stats__item.js-reveal:nth-child(2) {
    transition-delay: 0.12s;
}

.stats__item.js-reveal:nth-child(3) {
    transition-delay: 0.24s;
}

/* Utilidad genérica de retraso escalonado para grupos de tarjetas
   (.pillar-card, .service-card), a combinar con .js-reveal. Evita repetir
   las mismas reglas nth-child por cada componente que quiera esta
   cascada. Solo válida si el elemento es hijo directo y consecutivo
   dentro de su contenedor (el conteo de :nth-child es posicional entre
   TODOS los hermanos, no solo los que llevan esta clase) — por eso no se
   usa en .clients-category de Clientes.aspx, cuyo contenedor tiene un
   hermano previo (.clients-tabs-wrapper) que desplazaría la cuenta. */
.js-reveal-stagger:nth-child(1) {
    transition-delay: 0s;
}

.js-reveal-stagger:nth-child(2) {
    transition-delay: 0.08s;
}

.js-reveal-stagger:nth-child(3) {
    transition-delay: 0.16s;
}

.js-reveal-stagger:nth-child(4) {
    transition-delay: 0.24s;
}

.js-reveal-stagger:nth-child(n+5) {
    transition-delay: 0.32s;
}

/* ---------- Página Empresa ---------- */

.about-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 42px 24px 8px;
}

.about-intro h1 {
    font-size: 26px;
    font-weight: 600;
    margin: 14px 0 10px;
}

.about-intro p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.about-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* En la variante "reverse" el orden visual se invierte (texto primero,
   foto después) sin duplicar marcado: basta con reordenar por CSS. */
.about-block--reverse .about-block__photo {
    order: 2;
}

.about-block--reverse .about-block__text {
    order: 1;
}

/* aspect-ratio (en vez de min-height) da al contenedor una altura
   definida en TODOS los anchos de viewport, no solo cuando la imagen es
   lo bastante ancha para superar el mínimo por su cuenta. Sin esto,
   .about-block__photo img (height:100%) no tiene una altura de
   referencia clara en el layout de una sola columna (móvil, <720px), el
   navegador ignora el 100% y la imagen cae a su alto natural — por
   debajo de 220px en las fotos actuales (~1670×941, ratio 16:9), dejando
   una franja del fondo de la tarjeta visible bajo la foto. 16/9 coincide
   con el ratio real de las fotos de esta sección, así que además no
   recorta nada de la imagen original. */
.about-block__photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-cream-border);
    aspect-ratio: 16 / 9;
}

/* scale(1.06) de base: da margen al parallax genérico de
   photo-parallax.js (clase .js-parallax en .about-block__photo, ver
   Empresa.aspx) para desplazar la imagen unos píxeles sin dejar ver el
   borde del contenedor. Mismo criterio que .hero__photo-img. */
.about-block__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 0.35s ease-out;
}

.about-block__eyebrow {
    display: block;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--color-accent-text);
    margin-bottom: 8px;
}

.about-block__text h2 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 10px;
}

.about-block__text p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Cifras destacadas dentro de un about-block (p.ej. "Quiénes somos"):
   mini tarjetas con icono, más visuales que el antiguo listado de texto
   plano (.about-block__fact, ya retirado). Reutiliza los mismos tokens
   de tarjeta que .pillar-card / .area-card para no introducir un
   patrón visual nuevo. */
.about-block__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.about-block__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    background: var(--color-cream-card);
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-block__stat:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 20px -12px rgba(42, 39, 36, 0.25);
}

.about-block__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 14px;
    margin-bottom: 10px;
}

.about-block__stat-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.about-block__stat-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.35;
    margin-top: 2px;
}

/* Cabecera centrada reutilizable para cualquier sección con eyebrow + h2
   (usada en "team-areas" y "values", evita duplicar el mismo bloque). */
.section-intro {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 24px 28px;
}

.section-intro h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 6px 0 0;
}

.team-areas {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}

.team-areas__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* La foto ocupa toda la tarjeta (position:absolute + inset:0) y el
   texto se superpone en un overlay inferior con fondo translúcido
   (.area-card__overlay), en vez del layout anterior de foto arriba +
   texto abajo en bloques separados. aspect-ratio le da a .area-card una
   altura definida en cualquier ancho de viewport — necesario para que
   la foto en position:absolute tenga un contenedor con tamaño real
   (mismo motivo que el fix de .about-block__photo). */
.area-card {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-cream-card);
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.area-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 24px -12px rgba(42, 39, 36, 0.25);
}

.area-card__photo {
    position: absolute;
    inset: 0;
}

/* scale(1.06) de base: mismo motivo que en .about-block__photo img, para
   el parallax genérico de photo-parallax.js (clase .js-parallax en
   .area-card__photo, ver Empresa.aspx). El propio .area-card ya tiene su
   translateY(-4px) al hover (ver arriba); no hay conflicto porque son
   transforms de elementos distintos (tarjeta vs. imagen interior). */
.area-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 0.35s ease-out;
}

.area-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 16px 14px;
    background: rgba(var(--color-graphite-rgb), 0.5);
    backdrop-filter: blur(4px);
}

.area-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px;
}

.area-card p {
    font-size: 13px;
    color: var(--color-graphite-text);
    line-height: 1.5;
    margin: 0;
}

.values {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 24px 48px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* ---------- Página Servicios ---------- */

.services {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 24px 48px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.service-card {
    background: var(--color-cream-card);
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 24px -12px rgba(42, 39, 36, 0.25);
}

.service-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 12px 0 8px;
}

.service-card p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 14px;
}

.service-card__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-card__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.service-card__checklist i {
    color: var(--color-accent);
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---------- Página Clientes ---------- */

.clients-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 24px 48px;
}

/* Contenedor relativo del menú de pestañas: sirve de referencia de
   posicionamiento a las flechas de scroll (.clients-tabs-wrapper__arrow),
   que se superponen a los bordes izquierdo/derecho del propio
   .clients-tabs. Ver can-scroll-left / can-scroll-right en
   clients-filter.js. */
.clients-tabs-wrapper {
    position: relative;
    margin-bottom: 32px;
}

/* flex-wrap: nowrap + overflow-x: auto en vez de wrap: si las pestañas
   caben en el ancho disponible se ven como una fila normal (sin barra de
   scroll, que solo aparece cuando hace falta); si no caben —ventanas más
   estrechas o el menú en móvil— se convierte en una fila deslizable en vez
   de bajar a una segunda línea. Mismo comportamiento en escritorio y móvil,
   sin media queries. */
.clients-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    scrollbar-width: none;
}

.clients-tabs::-webkit-scrollbar {
    display: none;
}

/* Flechas indicadoras de que el menú de pestañas se puede desplazar
   horizontalmente: clients-filter.js añade can-scroll-left/can-scroll-right
   al wrapper según la posición de scroll, y cada flecha solo se muestra si
   el wrapper tiene la clase correspondiente (es decir, si aún queda
   contenido por ese lado). pointer-events: none porque son un indicador
   visual, no un control: el propio menú ya es deslizable con el dedo o el
   ratón por debajo. */
.clients-tabs-wrapper__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.2s ease;
}

.clients-tabs-wrapper__arrow--left {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to right, rgb(var(--color-cream-rgb)) 45%, rgba(var(--color-cream-rgb), 0));
}

.clients-tabs-wrapper__arrow--right {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to left, rgb(var(--color-cream-rgb)) 45%, rgba(var(--color-cream-rgb), 0));
}

.clients-tabs-wrapper.can-scroll-left .clients-tabs-wrapper__arrow--left,
.clients-tabs-wrapper.can-scroll-right .clients-tabs-wrapper__arrow--right {
    opacity: 1;
}

.clients-tabs-wrapper__arrow i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream-card);
    border: 1px solid var(--color-cream-border);
    color: var(--color-text-secondary);
    font-size: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.clients-tabs__tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--color-cream-border);
    background: var(--color-cream-card);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.clients-tabs__tab:hover {
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.clients-tabs__tab.is-active {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 600;
}

.clients-category {
    margin-top: 32px;
}

.clients-category:first-child {
    margin-top: 0;
}

.clients-category__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform:uppercase;
    margin-bottom: 4px;
}

/* Solo tiene sentido en la pestaña "Todos" (.clients-category--flat): en las
   demás pestañas ya se está viendo esa única categoría, así que el botón se
   mantiene oculto. Lleva a esa categoría en el menú de pestañas y sube el
   scroll hasta él (ver clients-filter.js). */
.clients-category__filtrar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--color-cream-border);
    background: var(--color-cream-card);
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.clients-category--flat .clients-category__filtrar {
    display: inline-flex;
}

.clients-category__filtrar:hover {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.clients-category__underline {
    height: 2px;
    width: 28px;
    background: var(--color-accent);
    border-radius: 2px;
    margin-bottom: 16px;
}

.clients-category__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* Cabecera de subcategoría: es una fila más del grid (no un contenedor
   aparte) para que las tarjetas de logotipo de todas las subcategorías
   sigan fluyendo en un único grid continuo. En la pestaña "Todos"
   (.clients-category--flat) se oculta y el resultado es el mismo grid
   plano de siempre. */
.clients-subcategory__label {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 20px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-cream-border);
}

.clients-category__grid > .clients-subcategory__label:first-child {
    margin-top: 0;
}

.clients-category--flat .clients-subcategory__label {
    display: none;
}

.clients-category__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-sm);
}

.clients-category__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.clients-category__empty {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0;
}

/* ---------- Página Contacto ---------- */

.contact-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 24px 48px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info__card {
    background: var(--color-cream-card);
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.contact-info__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.contact-info__row:last-child {
    margin-bottom: 0;
}

.contact-info__row i {
    color: var(--color-accent);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.contact-info__label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.contact-info__value {
    font-size: 13px;
    color: var(--color-text-primary);
}

.contact-map {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-cream-border);
    min-height: 220px;
}

.contact-map__expand {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s ease;
}

.contact-map__expand:hover {
    background: var(--color-cream-card);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border: 0;
    display: block;
}

.contact-form {
    background: var(--color-cream-card);
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.contact-form h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 18px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.contact-form__field {
    margin-bottom: 14px;
}

.contact-form__row .contact-form__field {
    margin-bottom: 0;
}

.contact-form__field label {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field input[type="tel"],
.contact-form__field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d8d1c2;
    border-radius: 6px;
    background: #ffffff;
    font-family: var(--font-base);
    font-size: 13px;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__field textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

.contact-form__error {
    display: block;
    font-size: 12px;
    color: #c0392b;
    margin-top: 4px;
}

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

.contact-form__checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 20px;
}

.contact-form__check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    cursor: pointer;
}

.contact-form__check input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.contact-form__check a {
    color: var(--color-accent-text);
    text-decoration: underline;
}

.contact-form__error-envio {
    font-size: 13px;
    color: #c0392b;
    margin: 16px 0 0;
}

.contact-success {
    text-align: center;
    padding: 40px 24px;
    animation: contact-success-in 0.5s ease both;
}

.contact-success__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
    animation: contact-success-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.contact-success h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.contact-success p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

@keyframes contact-success-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contact-success-icon-pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------- Páginas legales (Aviso legal, Política de privacidad) ---------- */

.legal-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 24px 48px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.legal-content h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 28px 0 10px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    margin: 0 0 14px;
}

.legal-content ul {
    margin: 0 0 14px;
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 6px;
}

.legal-content strong {
    color: var(--color-text-primary);
}

.legal-content a {
    color: var(--color-accent-text);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 13px;
}

.legal-table caption {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    caption-side: top;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--color-cream-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--color-cream-card);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ---------- Banner de consentimiento de cookies ---------- */

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-graphite);
    color: var(--color-graphite-text);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* [hidden] y .cookie-banner tienen la misma especificidad (1 selector cada
   uno); sin esta regla explícita, el "display:flex" de arriba podría ganar
   al "display:none" nativo del atributo hidden según el orden de carga. */
.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.cookie-banner__text a {
    color: var(--color-accent);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cookie-banner .btn--secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.cookie-banner .btn--secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 480px) {
    .cookie-banner__actions {
        justify-content: stretch;
    }

    .cookie-banner__actions .btn {
        flex: 1;
        text-align: center;
    }

    /* En pantallas muy estrechas, tres columnas dejan el texto de la
       etiqueta partido en 3-4 líneas; se apilan y pasan a fila
       (icono + texto) para que se lean de un vistazo. */
    .about-block__stats {
        grid-template-columns: 1fr;
    }

    .about-block__stat {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .about-block__stat-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/* ---------- Modal de preferencias de cookies ---------- */

.cookie-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: rgba(42, 39, 36, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

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

.cookie-modal {
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.cookie-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cookie-modal__header h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.cookie-modal__cerrar {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.cookie-modal__intro {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
}

.cookie-modal__intro a {
    color: var(--color-accent-text);
}

.cookie-modal__categoria {
    border-top: 1px solid var(--color-cream-border);
    padding: 14px 0;
}

.cookie-modal__categoria-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cookie-modal__categoria-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cookie-modal__categoria-desc {
    font-size: 12.5px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 6px 0 0;
}

.cookie-modal__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-cream-border);
}

/* Interruptor (toggle). Técnica estándar: checkbox real oculto visualmente
   pero accesible, más un "track"/"thumb" decorativos que reaccionan al
   estado :checked mediante el selector de hermano adyacente (~). */
.cookie-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.cookie-toggle__track {
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #d8d1c2;
    border-radius: 20px;
    position: relative;
    transition: background-color 0.2s ease;
}

.cookie-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cookie-toggle input:checked ~ .cookie-toggle__track {
    background: var(--color-accent);
}

.cookie-toggle input:checked ~ .cookie-toggle__track .cookie-toggle__thumb {
    transform: translateX(18px);
}

.cookie-toggle input:focus-visible ~ .cookie-toggle__track {
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.35);
}

.cookie-toggle--disabled {
    cursor: not-allowed;
}

.cookie-toggle--disabled .cookie-toggle__track {
    opacity: 0.6;
}

/* ---------- Cifras de confianza ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-cream-border);
    border-bottom: 1px solid var(--color-cream-border);
}

.stats__item {
    position: relative;
    text-align: center;
    padding: 24px;
    background: var(--color-cream-card);
    border-left: 1px solid var(--color-cream-border);
}

.stats__item:first-child {
    border-left: none;
}

/* Pequeña marca decorativa sobre la cifra: rompe el bloque sin recurrir
   a color en el propio texto (evita el problema de contraste). */
.stats__item::before {
    content: "";
    display: block;
    width: 22px;
    height: 3px;
    margin: 0 auto 14px;
    background: var(--color-accent);
    border-radius: 2px;
}

.stats__value {
    display: block;
    font-size: 24px;
    font-weight: 600;
}

.stats__label {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* ---------- Pilares de valor ---------- */

.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}

.pillar-card {
    background: var(--color-cream-card);
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pillar-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 24px -12px rgba(42, 39, 36, 0.25);
}

.pillar-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 15px;
    margin-bottom: 12px;
}

.pillar-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}

.pillar-card p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ---------- Franja de clientes destacados (Inicio) ---------- */

.clients-strip {
    text-align: center;
    padding: 24px 24px 48px;
}

.clients-strip__label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 20px;
}

.clients-strip__marquee {
    overflow: hidden;
    /* Un pelín de aire arriba/abajo: .clients-strip__logo:hover eleva la
       tarjeta con translateY(-3px), y sin este margen ese desplazamiento
       hacía que overflow:hidden recortara el borde superior de la
       tarjeta al pasar el ratón por encima. */
    padding: 6px 0;
    -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);
}

.clients-strip__track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: -moz-max-content;
    width: max-content;
    /* 48s es un valor de fallback por si clients-marquee-speed.js no llega
       a ejecutarse (JS deshabilitado, error, etc.). En condiciones normales
       ese script sobrescribe esta duración en línea para mantener una
       velocidad constante en px/s independientemente del nº de logos. */
    animation: clients-strip-scroll 48s linear infinite;
}

.clients-strip__track:hover {
    animation-play-state: paused;
}

@keyframes clients-strip-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* La pista contiene el listado duplicado, así que desplazar el 50%
           produce un bucle continuo sin salto visible. */
        transform: translateX(-50%);
    }
}

.clients-strip__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 64px;
    padding: 10px 20px;
    background: #ffffff;
    border: 1px solid var(--color-cream-border);
    border-radius: var(--radius-sm);
}

.clients-strip__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Efecto hover para los logotipos de clientes, en los dos sitios donde
   aparecen: la marquesina de Inicio (.clients-strip__logo) y el listado
   de Clientes.aspx (.clients-category__logo). */
.clients-category__logo,
.clients-strip__logo {
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.clients-category__logo:hover,
.clients-strip__logo:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 20px -12px rgba(42, 39, 36, 0.28);
}

/* Chip alineado a la derecha, bajo la marquesina. width: fit-content +
   margin-left: auto (en vez de inline-flex) para que ignore el
   text-align: center heredado de .clients-strip -- ese text-align solo
   afecta a cajas de nivel en línea, no a la posición de una caja de
   bloque como esta. */
.clients-strip__link {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 24px 0 0 auto;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--color-cream-border);
    background: var(--color-cream-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-text);
    transition: background-color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}

.clients-strip__link:hover {
    gap: 10px;
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
}

.clients-strip__link i {
    font-size: 11px;
}

/* ---------- Franja de certificaciones (fija en todas las páginas) ---------- */

.site-certifications {
    padding: 40px 24px;
    background: #ffffff;
    border-top: 1px solid var(--color-cream-border);
}

.site-certifications__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 28px;
}

.site-certifications__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.site-certifications__item {
    text-align: center;
    padding: 0 12px;
}

.site-certifications__item img {
    max-height: 150px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    margin: 0 auto 16px;
}

.site-certifications__item-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-top: 30px;
}

.site-certifications__item-logos img {
    max-height: 150px;
    max-width: 130px;
    width: auto;
    object-fit: contain;
    margin: 0;
}

.site-certifications__item h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: 0 0 8px;
}

.site-certifications__item p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ---------- Footer ---------- */

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px;
    background: var(--color-graphite);
}

.site-footer__copy {
    font-size: 11px;
    color: var(--color-graphite-text-muted);
}

.site-footer__legal {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--color-graphite-text);
}

.site-footer__legal a:hover {
    color: #ffffff;
}

.site-footer__social {
    display: flex;
    gap: 14px;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 16px;
    color: var(--color-graphite-text);
}

.site-footer__social a:hover {
    color: #ffffff;
}

/* ---------- Globo de nombre de cliente (tap en logotipo) ----------
   Ver Content/logo-tooltip.js: reproduce en móvil (tocar) lo que el
   atributo "title" ya ofrece en escritorio (hover), para los logotipos de
   la marquesina de Inicio y del listado de Clientes.aspx. Un único
   elemento reutilizado y con "position: fixed" respecto al viewport (no
   anidado en el logotipo), para que no lo recorte el "overflow: hidden"
   de .clients-strip__marquee. */
.logo-tooltip {
    position: fixed;
    z-index: 250;
    max-width: 220px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-graphite);
    color: var(--color-graphite-text);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Flechita triangular hacia el logotipo: por defecto el globo va encima,
   así que apunta hacia abajo (pegada al borde inferior); con
   --abajo (poco espacio por encima, p.ej. logotipos de la primera fila)
   el globo se coloca debajo y la flecha apunta hacia arriba en su lugar. */
.logo-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: inherit;
    transform: rotate(45deg);
}

.logo-tooltip--abajo::after {
    top: 0;
}

/* ---------- Botón flotante "volver arriba" ---------- */

/* Discreto a propósito: tamaño reducido, semitransparente y en la esquina
   inferior izquierda (la derecha suele quedar reservada a widgets de chat
   de terceros). El estado visible/oculto se controla con :disabled en vez
   de una clase, porque scroll-to-top.js ya deshabilita el botón cuando no
   toca mostrarlo (ver comentario en Site.master) — así queda fuera del
   orden de tabulación mientras está oculto, sin duplicar ese estado en dos
   sitios distintos. */
.scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Muy translúcido a propósito (discreto, ver Site.master): el
       backdrop-filter aporta un desenfoque tipo "cristal esmerilado" para
       que el icono siga siendo legible sobre cualquier fondo aun con el
       color de base tan transparente. */
    background: rgba(var(--color-graphite-rgb), 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.scroll-top-btn:not(:disabled) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top-btn:hover {
    background: rgba(var(--color-graphite-rgb), 0.6);
}

@media (max-width: 720px) {
    .scroll-top-btn {
        right: 14px;
        bottom: 14px;
    }
}

/* ---------- Responsive ---------- */

/* Por debajo de 720px el header pasa a position:fixed (ver media query),
   así que hay que compensar con padding-top en el body para que el
   contenido no quede oculto detrás. Fuera de esa media query no tiene
   efecto porque el header vuelve a estar en flujo normal. */

@media (max-width: 720px) {

    body {
        padding-top: var(--header-height-mobile);
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: var(--header-height-mobile);
        z-index: 100;
    }

    /* En móvil el header ya era fixed con una altura reservada en
       body (--header-height-mobile); si is-scrolled redujera el padding
       aquí igual que en escritorio, la altura real bajaría de ese valor
       reservado y dejaría un hueco entre header y contenido. Se conserva
       el padding/alto normal y solo se deja el refuerzo de sombra
       (heredado de la regla base .is-scrolled). */
    .site-header.is-scrolled {
        padding: 14px 0;
    }

    .site-header.is-scrolled .site-header__logo {
        height: 45px;
    }

    .site-header__toggle {
        display: flex;
    }

    .site-header__collapsible {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-graphite);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .site-header__collapsible--open {
        display: flex;
    }

    .site-header__nav {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        padding: 8px 0;
    }

    .site-header__nav a {
        padding: 12px 24px;
        text-align: center;
    }

    .site-header__nav a::after {
        display: none;
    }

    /* En móvil el subrayado (::after) está oculto, así que la sección
       activa se marca con un borde lateral + fondo tenue en su lugar.
       padding-left se reduce en el ancho del borde (3px) para que el
       texto quede alineado con el resto de enlaces. */
    .site-header__nav a.is-active {
        background: rgba(var(--color-accent-rgb), 0.12);
        border-left: 3px solid var(--color-accent);
        padding-left: 21px;
    }

    .site-header__right {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 16px;
    }

    .site-header__divider {
        display: none;
    }

    .site-header__cta {
        justify-content: center;
    }

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

    .about-block {
        grid-template-columns: 1fr;
    }

    .contact-layout,
    .contact-form__row {
        grid-template-columns: 1fr;
    }

    .about-block--reverse .about-block__photo,
    .about-block--reverse .about-block__text {
        order: initial;
    }

    .stats,
    .pillars,
    .team-areas__grid,
    .values-grid,
    .services-grid,
    .site-certifications__grid {
        grid-template-columns: 1fr;
    }

    .site-certifications__grid {
        gap: 32px;
    }

    .stats__item {
        border-left: none;
        border-top: 1px solid var(--color-cream-border);
    }

    .stats__item:first-child {
        border-top: none;
    }
}

/* ---------- Preferencia de movimiento reducido ----------
   Cubre únicamente el movimiento incorporado junto con esta tanda de
   cambios (parallax del hero, barra de progreso del autoplay, cabecera
   condensada al hacer scroll). El resto de animaciones ya existentes en
   esta hoja de estilos (crossfade del hero, aparición al hacer scroll
   .js-reveal, marquesina de clientes) quedan fuera de alcance: no se
   tocan aquí. */
@media (prefers-reduced-motion: reduce) {

    .hero__progress {
        display: none;
    }

    .hero__photo-img {
        transition: opacity 0.6s ease;
    }

    .about-block__photo img,
    .area-card__photo img {
        transition: none;
    }

    .site-header {
        transition: none;
    }

}