/* ==========================================================================
   Sistema de diseño — Fase 11 (2026-07-21)

   Fuente de verdad: docs/DISENO.md. Ningún tamaño, color ni espaciado nuevo
   se escribe a ojo. Si hace falta uno que no esté aquí, se añade PRIMERO al
   documento y se justifica (DISENO.md § 7.1).

   Orden fijado en DISENO.md § 7.2:
   tipografía → color → espaciado → formas → movimiento.
   ========================================================================== */

:root {
    /* --- Tipografía ------------------------------------------------------ */

    /* Luis eligió UNA sola familia el 2026-07-21: Outfit para todo. La
       alternativa era Outfit + Inter y quedó descartada. No volver a cargar
       Inter sin decisión suya. DISENO.md § 1. */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: var(--font-display);

    /* Escala fluida: escala sola entre celular y escritorio, sin media queries.
       Por eso más abajo se retiran los font-size sueltos de @media. */
    --fs-display: clamp(2.75rem, 7vw, 5rem);
    /* h1 del hero */
    --fs-h1: clamp(2.25rem, 5vw, 3.25rem);
    --fs-h2: clamp(1.875rem, 3.5vw, 2.5rem);
    /* títulos de sección */
    --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
    /* tarjetas */
    --fs-body-lg: 1.125rem;
    /* entradillas */
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-label: 0.75rem;
    /* rótulos en versalitas */

    /* Regla: cuanto MÁS grande el texto, más apretado el tracking y más corta
       la interlínea. Es lo que más separa un sitio caro de uno normal. */
    --tracking-display: -0.03em;
    --tracking-heading: -0.02em;
    --tracking-body: 0;
    --tracking-label: 0.08em;

    --leading-display: 1.05;
    --leading-heading: 1.15;
    --leading-body: 1.65;

    /* --- Color ----------------------------------------------------------- */

    --bg: #0a0f1a;
    /* navy casi negro; sustituye al #0a0a0a puro (decisión de Luis 2026-07-21) */
    --bg-rgb: 10, 15, 26;
    /* añadido en la Fase 11: el header translúcido y el velo del vídeo del hero
       necesitan el mismo color con alfa. Sin esto quedaban dos negros distintos. */
    --bg-elev: #111827;
    --bg-subtle: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);

    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.66);
    /* párrafos: 8,6:1 sobre --bg, AA de sobra */
    --text-faint: rgba(255, 255, 255, 0.45);
    /* pies y metadatos: 5,0:1 sobre --bg, AA */

    --accent: #06b6d4;
    --accent-soft: rgba(6, 182, 212, 0.12);

    /* Foco del teclado — Fase 12. DISENO.md § 10.
       Hasta la Fase 12 el sitio no tenía NINGÚN estilo de foco y además
       apagaba el del navegador en el formulario. El anillo es un cian MÁS
       CLARO que --accent a propósito: uno del mismo cian sobre un botón cian
       no se distingue. 10,4:1 sobre el fondo. */
    --focus-ring: #7dd3fc;
    --focus-width: 3px;
    --focus-offset: 3px;

    /* --- Espaciado ------------------------------------------------------- */

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    --section-y: clamp(4rem, 10vw, 8rem);
    --container: 1240px;
    --container-x: clamp(1.25rem, 5vw, 2.5rem);
    --grid-gap: clamp(1.25rem, 3vw, 2rem);
    --measure: 65ch;
    /* añadido en la Fase 11: DISENO.md § 6 lo pedía como valor suelto y se
       repite en siete selectores. Mejor un token que siete 65ch a mano. */

    /* --- Formas ---------------------------------------------------------- */

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    /* con moderación: sobre fondo oscuro se separa con borde, no con sombra */

    /* --- Movimiento ------------------------------------------------------ */

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 240ms;

    /* ------------------------------------------------------------------
       Alias heredados

       Los nombres viejos siguen vivos en las ~3.400 líneas de CSS heredado de
       la triplicación. En vez de reescribirlas de golpe (DISENO.md § 7.3) se
       apuntan a los tokens nuevos: TODO el sitio adopta la paleta sin tocar
       un solo selector. Se van retirando conforme cada sección se migra.
       ------------------------------------------------------------------ */

    --bg-color: var(--bg);
    --surface-color: var(--bg-elev);
    --text-color: var(--text);
    --border-color: var(--border);
    --accent-color: var(--accent);
    --font-main: var(--font-display);
    --container-width: var(--container);

    /* El azul es identidad heredada y SE QUEDA, pero desde la Fase 12 tiene un
       papel escrito (DISENO.md § 11): es el extremo oscuro de la rampa que
       termina en cian, y solo aparece en cosas que se pulsan. Lo que se lee
       pero no se pulsa va en cian a secas.

       ⚠️ El morado #8b5cf6 se RETIRÓ el 2026-07-22 (decisión de Luis). El
       nombre sigue vivo apuntando a --accent, igual que la capa de alias de
       abajo: así los 13 usos heredados se convirtieron solos y los botones
       pasaron a degradar azul → cian, la misma rampa que el titular del hero.
       Antes iban azul → morado: dos rampas distintas saliendo del mismo azul
       era lo que hacía que la web se leyera como dos sistemas pegados.
       NO devolverle un color propio sin decisión suya. */
    --primary-color: #3b82f6;
    --secondary-color: var(--accent);

    --header-height: 108px;
    /* Header un poco más bajo, pero con sitio para el logo grande */

    /* Antes era `all 0.3s ease`. Se lista lo que se puede animar barato:
       nunca width, height, top ni left, que provocan repintado y van a
       tirones en celular (DISENO.md § 5). */
    --transition:
        color var(--dur) var(--ease),
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

/* Escala tipográfica base. Antes cada sección se ponía su font-size a mano y
   había cuatro tamaños distintos para lo mismo. Ahora los niveles salen de
   aquí y un selector solo se sale de la escala si tiene motivo escrito. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-body-lg);
}

body.modal-open {
    overflow-x: hidden !important;
}

html.modal-open {
    overflow-x: hidden !important;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

/* Utilidades */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-x);
}

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

.text-gradient {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Ritmo vertical único de todo el sitio. El aire vertical es el 80 % del
   efecto: la misma sección a 8rem se lee cara y a 3rem se lee barata. */
.section {
    padding: var(--section-y) 0;
}

/* Botones */
.btn {
    display: inline-block;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--radius-pill);
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-pill);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

/* ⚠️ Hasta la Fase 12 esto era una copia BYTE A BYTE de .btn-primary: mismo
   degradado, mismo texto blanco, misma sombra. O sea que el botón secundario
   no era secundario, y en el hero se veían dos botones idénticos: el visitante
   no tenía ninguna pista de cuál era la acción principal. La jerarquía del
   hero es la conversión (CLAUDE.md § 8), no un detalle estético.

   Ahora es un botón perfilado de verdad y se rellena al pasar por encima.
   DISENO.md § 11. */
.btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-pill);
}

.btn-outline:hover {
    background: var(--accent);
    color: var(--bg);
    transform: translateY(-2px);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(var(--bg-rgb), 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    transition: transform calc(var(--dur) * 1.5) var(--ease);
}

/* Al bajar el scroll el header se esconde hacia arriba; al subir reaparece.
   La clase la pone/quita script.js. El +2px asegura que no asome el borde. */
.header.header-hidden {
    transform: translateY(calc(-100% - 2px));
}

/* Con el banner de idioma arriba el header está bajado 44px, así que hay que
   subirlo esa altura de más para que no asome un trozo. */
body.has-lang-banner .header.header-hidden {
    transform: translateY(calc(-100% - var(--lang-banner-height) - 2px));
}

.header-container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    /* Full width to push logo left */
    padding: 0 50px;
    /* Side padding */
}

/* El logo nunca se comprime aunque el menú apriete: se mantiene íntegro. */
.logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.logo img {
    /* Grande pero dentro del header (108px): a 80px de alto queda ~14px de aire
       arriba y abajo. Si se quiere aún más grande, subir --header-height y este
       valor a la vez; nunca poner el logo más alto que el header o se sale. */
    height: 80px;
    width: auto;
    transition: var(--transition);
}

.nav-list {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* 1,05rem no está en la escala y se conserva a propósito: es el tamaño que
   Luis validó el 2026-07-21 midiendo que el logo apaisado y el menú caben en
   la misma fila. Bajarlo a --fs-body descuadraría el corte de hamburguesa. */
.nav-link {
    font-weight: 500;
    font-size: 1.05rem;
}

.nav-link:not(.btn-primary):hover {
    color: var(--primary-color);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Login Icon Styles */
.login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-color);
    transition: var(--transition);
    padding: 5px;
}

.login-icon:hover {
    color: var(--secondary-color);
    transform: scale(1.1);
}

/* La cabecera pasa a hamburguesa ANTES de que el logo y el menú se toquen.
   El logo es ancho (~299px a 90px de alto) y el menú no cabe con él en la misma
   fila por debajo de este corte. Por eso está alto: con un logo grande, es el
   precio a pagar. Este bloque manda sobre las @media(max-width:768px) de más
   abajo (hacen lo mismo pero tarde); son deuda del CSS triplicado y se
   limpiarán al desmontar el sistema viejo.

   ⚠️ SUBIDO DE 1200 A 1260 EN LA FASE 10, y es una consecuencia medida de
   añadir "Blog" al menú: esa entrada ensancha la fila 63px. Medido el hueco
   entre el logo y el menú con las 8 entradas:

       1201-1220px →   0px  ← se tocan literalmente
       1240px      →  21px
       1260px      →  41px
       1280px      →  61px
       1440px      → 221px

   Con el corte en 1200 quedaba una franja de ~20px de ancho en la que el menú
   nacía pegado al logo, sin aire. No llegaba a solapar —el logo lleva
   flex-shrink: 0— así que no se ve como un fallo evidente: se ve como un
   diseño descuidado, que es peor porque nadie lo reporta.

   ⚠️ REGLA PARA EL FUTURO: cada entrada del menú cuesta ~63px de fila, así que
   añadir una obliga a revisar este número. Si algún día hay que meter otra sin
   subir más el corte, la única palanca real es un logo más pequeño (ya avisado
   en la Fase 8). Quitar "Nosotros" también valdría, pero eso es una decisión de
   Luis, no de maquetación. */
@media (max-width: 1260px) {
    .nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        padding: 20px;
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        border-bottom: 1px solid var(--border-color);
    }

    body.has-lang-banner .nav {
        top: calc(var(--header-height) + var(--lang-banner-height));
    }

    .nav.active {
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 18px;
    }

    .mobile-toggle {
        display: block;
    }
}

/* En móvil el logo ancho (299px) no cabe junto al padding de 50px: 299 + 100
   se pasa de 375px. Se reduce el logo y el padding lateral para que entre sin
   scroll horizontal. Sigue siendo un logo grande y legible. */
@media (max-width: 600px) {
    .header-container {
        padding: 0 20px;
    }

    .logo img {
        height: 64px;
    }
}

/* Hero Section */
.hero {
    padding-top: calc(var(--header-height) + var(--section-y));
    padding-bottom: var(--section-y);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    /* Fase 13: el fondo del hero es un DEGRADADO CSS, no una imagen.
       El vídeo pesa 1,78 MB y ahora se carga en diferido, así que hay un
       momento —y en conexiones malas, siempre— en que aquí no hay nada. Antes
       ese hueco era negro y la primera pantalla se veía rota justo para quien
       llega de un anuncio.

       Los colores NO están puestos a ojo: salen de muestrear el fotograma del
       segundo 2 del propio vídeo en una rejilla de 16x9 y promediar por zonas
       (izquierda rgb(8,44,29), centro rgb(8,44,31), derecha rgb(7,25,14)). Por
       eso al aparecer el vídeo no se nota el relevo: ya estaba el mismo verde
       azulado debajo.

       Cuesta CERO bytes, que es justo la gracia frente a un poster JPEG. */
    background: radial-gradient(ellipse 120% 80% at 30% 40%,
            rgb(8, 44, 31) 0%,
            rgb(8, 38, 25) 45%,
            rgb(7, 25, 14) 100%);
}

#hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Fase 13: aparece con una transición suave sobre el degradado en vez de
       plantarse de golpe. Sin esto el relevo canta, porque el vídeo entra
       cuando la página ya está quieta y el ojo lo pilla. La clase la pone
       script.js en `canplay`, o sea cuando ya hay imagen que enseñar: si se
       pusiera al asignar el src, se vería un fotograma en negro primero. */
    opacity: 0;
    transition: opacity 600ms var(--ease);
}

#hero-video.visible {
    opacity: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* El velo tiene que ser del MISMO color que el fondo o se ve el corte
       donde acaba el vídeo. Por eso --bg-rgb. */
    background: rgba(var(--bg-rgb), 0.7);
    background: linear-gradient(to bottom,
            rgba(var(--bg-rgb), 0.8),
            rgba(var(--bg-rgb), 0.6),
            var(--bg));
}

/* ⚠️ El hero se alinea a la IZQUIERDA desde el 2026-07-22, y no es un capricho
   estético: es lo que exige el titular que se teclea. Con el texto centrado,
   cada letra que entra recentra la línea entera y el titular baila de lado en
   cada pulsación. A 44-80 px de tipo son saltos de 15-25 px por carácter.
   Alineado a la izquierda, el punto de partida no se mueve nunca.

   Si algún día se quita el efecto de tecleo, esto se puede devolver a
   `center` sin tocar nada más. Mientras el efecto exista, no. */
.hero-container {
    display: grid;
    grid-template-columns: 1fr;
    /* Single column */
    gap: 50px;
    align-items: center;
    text-align: left;
    max-width: 900px;
}

.hero-content {
    text-align: left;
    margin: 0 auto;
}

/* El titular más grande de la página: el tracking más apretado y la interlínea
   más corta de la escala. La escala es fluida, así que NO lleva media query. */
.hero-content h1 {
    font-size: var(--fs-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--sp-5);
    font-weight: 700;
}

.hero-content p {
    font-size: var(--fs-body-lg);
    color: var(--text-muted);
    margin-bottom: var(--sp-6);
    max-width: var(--measure);
    /* Sin `margin-inline: auto`: el hero va alineado a la izquierda y la caja
       de 65ch tiene que empezar donde empieza el titular. */
}

/* --- Titular que se escribe solo (2026-07-22) ---------------------------- */

/* La altura de esta caja la fija script.js midiendo la frase más alta de
   HERO_FRASES al cargar y en cada resize. Es lo que evita que el hero entero
   dé un salto cada vez que cambia la frase. El min-height inicial cubre el
   caso de que el JS no llegue a ejecutarse. */
.hero-rotativo {
    display: block;
    min-height: calc(1em * var(--leading-display));
}

/* ⚠️ TODAS las letras de la frase están siempre en el DOM; escribir es pasarlas
   de invisibles a visibles. Tiene que ser `visibility`, NO `display: none` ni
   `opacity: 0`:

   · `visibility: hidden` deja el hueco ocupado, así que el navegador calcula
     los saltos de línea con la frase ENTERA desde el primer momento. Sin eso,
     una palabra a medias cabe al final de la línea, se completa, deja de caber
     y baja de golpe (el efecto "SUNAT" que se descuadraba solo).
   · `display: none` quitaría el hueco y el problema volvería idéntico.
   · `opacity: 0` valdría para la maqueta, pero el texto seguiría siendo
     seleccionable y visible para buscar en la página.

   No tocar esto sin releer el comentario de script.js. */
.hero-letra {
    position: relative;
    visibility: hidden;
}

.hero-letra-visible {
    visibility: visible;
}

/* El cursor lo dibuja la última letra visible, no un elemento aparte: insertar
   y mover un nodo entre las letras desplazaría la maqueta un carácter y
   devolvería el problema que esto viene a arreglar.

   `position: absolute` lo saca del flujo (ocupa cero) y `visibility: visible`
   hace falta porque la letra que lo dibuja puede estar oculta. */
.hero-letra-cursor::after,
.hero-letra-cursor-inicio::before {
    content: '_';
    position: absolute;
    top: 0;
    visibility: visible;
    color: var(--accent);
    /* El degradado del titular pinta el texto con color transparente y ese
       ajuste se hereda. El cursor no es texto del titular: se repinta. */
    -webkit-text-fill-color: var(--accent);
    animation: hero-parpadeo 1.1s steps(2, start) infinite;
}

/* Después de la última letra escrita. */
.hero-letra-cursor::after {
    left: 100%;
}

/* Y cuando todavía no hay ninguna, en el sitio exacto donde va a aparecer la
   primera. */
.hero-letra-cursor-inicio::before {
    left: 0;
}

@keyframes hero-parpadeo {
    to {
        opacity: 0;
    }
}

/* Rótulo sobre el titular: versalitas y tracking abierto, igual que
   .fase-num y .migracion-destino-rotulo. Es el mismo nivel de la escala. */
.badge {
    display: inline-block;
    padding: var(--sp-2) var(--sp-4);
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    border-radius: var(--radius-pill);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--sp-5);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: flex-start;
}

/* Services Section */
.services {
    background-color: var(--surface-color);
}

.section-header {
    margin-bottom: var(--sp-8);
}

.section-header h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-4);
}

/* Entradilla de sección. Los títulos van centrados, así que la caja de 65ch
   necesita margen automático o se queda pegada a la izquierda. */
.section-header p {
    color: var(--text-muted);
    font-size: var(--fs-body-lg);
    max-width: var(--measure);
    margin-inline: auto;
}

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

.service-card {
    background-color: var(--bg-subtle);
    padding: var(--sp-7) var(--sp-6);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Antes esta etiqueta subía animando `bottom`, que provoca repintado y va a
   tirones en celular (DISENO.md § 5). Ahora se queda fija abajo y entra con
   transform + opacity, que van en la GPU. Se ve igual. */
.service-card::after {
    content: '👆 Click para ver más';
    position: absolute;
    bottom: var(--sp-5);
    left: 50%;
    transform: translate(-50%, calc(100% + var(--sp-6)));
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

.service-card:hover {
    transform: translateY(-10px) scale(1.02);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.service-card:hover::after {
    transform: translate(-50%, 0);
    opacity: 1;
}

.service-card p {
    color: var(--text-muted);
    font-size: var(--fs-body);
    margin-bottom: var(--sp-7);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: var(--sp-5);
}

.service-card h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-3);
}


/* About Section */
.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
}

.about-content h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-5);
}

.about-content p {
    color: var(--text-muted);
    max-width: var(--measure);
    margin-bottom: var(--sp-6);
}

.features-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
    font-weight: 500;
}

.features-list i {
    color: var(--accent);
}

.video-wrapper {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
    box-shadow: var(--shadow);
    /* Fase 12: el vídeo de dentro va diferido (preload="none"), así que hay un
       momento —y sin JS, siempre— en que la caja está vacía. Con un fondo
       propio se lee como un panel; sin él, como un agujero negro. */
    background-color: var(--bg-elev);
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contact Section */
.contact {
    background-color: var(--surface-color);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--sp-7);
    background-color: var(--bg);
    padding: var(--sp-7);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.contact-info h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-3);
}

.contact-info>p {
    color: var(--text-muted);
    margin-bottom: var(--sp-7);
}

.info-item {
    display: flex;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.info-item i {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--bg-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.info-item h4 {
    font-size: var(--fs-body-lg);
    margin-bottom: var(--sp-1);
}

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

.contact-form .form-group {
    margin-bottom: var(--sp-5);
}

.contact-form label {
    display: block;
    margin-bottom: var(--sp-2);
    font-weight: 500;
    font-size: var(--fs-small);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    transition: var(--transition);
}

/* ⚠️ El `outline: none` se retiró en la Fase 12. Apagaba el anillo del
   navegador sin poner nada en su lugar, así que el campo enfocado solo se
   distinguía por un cambio de borde de 1px: invisible en la práctica. El
   anillo propio lo pone la regla global de :focus-visible del final del
   archivo (DISENO.md § 10). Aquí se queda solo el resalte del campo. */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

/* Footer */
.footer {
    padding: var(--section-y) 0 var(--sp-6);
    border-top: 1px solid var(--border);
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--grid-gap);
    margin-bottom: var(--sp-8);
}

.logo-footer {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--sp-5);
    display: block;
}

.footer-col p {
    color: var(--text-muted);
    font-size: var(--fs-small);
    max-width: 300px;
}

.footer-col h4 {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-body-lg);
}

.footer-col ul li {
    margin-bottom: var(--sp-3);
}

.footer-col ul li a {
    color: var(--text-muted);
}

.footer-col ul li a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: var(--sp-4);
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: var(--bg-elev);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: var(--transition);
}

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

.footer-bottom {
    text-align: center;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: var(--fs-small);
}

/* Animations */
/* Contención a propósito: la aparición se nota pero no distrae. Solo opacity
   y transform, que van en la GPU (DISENO.md § 5). */
.fade-in-up {
    opacity: 0;
    transform: translateY(var(--sp-6));
    transition: opacity calc(var(--dur) * 2) var(--ease),
        transform calc(var(--dur) * 2) var(--ease);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

/* Responsive */
@media (max-width: 992px) {

    .hero-container,
    .about-container,
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    /* Alineado a la izquierda también acá: el titular que se teclea no puede ir
       centrado en ningún ancho o baila en cada letra. Ver .hero-container. */
    .hero-content {
        text-align: left;
    }

    .hero-buttons {
        justify-content: flex-start;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        padding: 20px;
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        border-bottom: 1px solid var(--border-color);
    }

    .nav.active {
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
    }

    .mobile-toggle {
        display: block;
        color: var(--text-color);
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* El tamaño del h1 lo resuelve clamp() en --fs-display; una media query
       aquí lo congelaría y rompería la escala fluida. Retirado en la Fase 11. */

    .footer-container {
        grid-template-columns: 1fr;
    }

    .contact-wrapper {
        padding: var(--sp-6);
    }

    /* Service Cards Mobile Fix */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: var(--sp-6) var(--sp-5);
        min-height: auto;
    }

    /* El tamaño de h3 y del párrafo ya lo resuelven --fs-h3 y --fs-body;
       repetirlos aquí solo los congelaba. Se queda el margen, que sí es
       distinto en celular. */
    .service-card p {
        margin-bottom: var(--sp-6);
    }

    .service-card::after {
        font-size: var(--fs-label);
        padding: var(--sp-2) var(--sp-4);
    }
}

/* Service Modal & Animations */
.service-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.service-modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background-color: var(--surface-color);
    width: 90%;
    max-width: 800px;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(-100vh);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-modal.active .modal-content {
    transform: translateY(0);
}

/* ------------------------------------------------------------------------
   Aquí vivía una COPIA byte a byte del bloque de pie + animaciones de más
   arriba (deuda del CSS triplicado). Al ir después, esta copia pisaba a la
   original y dejaba muerta cualquier migración hecha allí. Se retiró en la
   Fase 11: las reglas eran idénticas, así que nada cambia de aspecto.
   Quedan otros duplicados sin tocar (modal de servicio y un @media 768);
   están anotados en ESTADO.md § Backlog.
   ------------------------------------------------------------------------ */

/* Responsive */
@media (max-width: 992px) {

    .hero-container,
    .about-container,
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    /* Alineado a la izquierda también acá: el titular que se teclea no puede ir
       centrado en ningún ancho o baila en cada letra. Ver .hero-container. */
    .hero-content {
        text-align: left;
    }

    .hero-buttons {
        justify-content: flex-start;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        padding: 20px;
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        border-bottom: 1px solid var(--border-color);
    }

    .nav.active {
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
    }

    .mobile-toggle {
        display: block;
        color: var(--text-color);
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* El tamaño del h1 lo resuelve clamp() en --fs-display; una media query
       aquí lo congelaría y rompería la escala fluida. Retirado en la Fase 11. */

    .footer-container {
        grid-template-columns: 1fr;
    }

    .contact-wrapper {
        padding: 30px;
    }
}

/* Service Modal & Animations */
.service-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

.service-modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background-color: var(--surface-color);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(-100vh);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-modal.active .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.close-modal:hover {
    color: var(--primary-color);
    transform: rotate(90deg);
}

.modal-body {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: flex-start;
}

.modal-image {
    width: 100%;
    height: 250px;
    /* Fixed height for container */
    background: #000;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 20px;
}

/* Specific class for the video as requested */
.modal-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-text h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.modal-text p {
    color: var(--text-muted);
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Modal Buttons Container */
.modal-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.modal-buttons .btn {
    flex: 1;
    min-width: 180px;
    text-align: center;
}

/* Modal Details Section */
.modal-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.modal-details.expanded {
    max-height: 2000px;
    margin-top: 30px;
    padding-top: 30px;
    border-top-color: var(--border-color);
    overflow-x: hidden;
}

.details-content {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.details-content h4 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-color);
    word-wrap: break-word;
}

.details-content h5 {
    font-size: 1.3rem;
    margin-top: 25px;
    margin-bottom: 15px;
    color: var(--primary-color);
    word-wrap: break-word;
}

.details-content p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.details-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
    width: 100%;
}

.details-content ul li {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.details-content ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.details-content ul li strong {
    color: var(--text-color);
    word-wrap: break-word;
}


/* Explosion Animation Classes */
.services-grid {
    transition: all 0.5s ease;
}

.service-card {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s ease;
}

/* Fly Out Animations */
.service-card.fly-out-left {
    transform: translate(-100vw, -50vh) rotate(-45deg) scale(0.5);
    opacity: 0;
}

.service-card.fly-out-right {
    transform: translate(100vw, -50vh) rotate(45deg) scale(0.5);
    opacity: 0;
}

.service-card.fly-out-bottom {
    transform: translate(0, 100vh) rotate(180deg) scale(0.5);
    opacity: 0;
}

/* Mobile Styles for Service Modal */
@media (max-width: 768px) {

    /* Modal Container */
    .service-modal {
        padding: 5px;
        align-items: flex-start;
        padding-top: 50px;
    }

    /* Modal Content - Ultra strict width control */
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: 280px !important;
        max-height: 85vh;
        padding: 12px 10px;
        overflow-x: hidden !important;
        overflow-y: auto;
        box-sizing: border-box !important;
        touch-action: pan-y !important;
        overscroll-behavior-x: none;
    }

    /* Modal Body Layout - Change to Flexbox */
    .modal-body {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden !important;
        touch-action: pan-y !important;
    }

    /* Modal Text Container */
    .modal-text {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Modal Image/Video */
    .modal-image {
        height: 160px;
        position: relative !important;
        top: auto !important;
        width: 100%;
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    .modal-video-element {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Modal Text Styles */
    .modal-text h3 {
        font-size: 1.2rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .modal-text p {
        font-size: 0.85rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    /* Modal Buttons */
    .modal-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 12px;
    }

    .modal-buttons .btn {
        width: 100%;
        min-width: auto;
        padding: 10px 12px;
        font-size: 0.85rem;
        box-sizing: border-box;
    }

    /* Modal Details Section */
    .modal-details {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        touch-action: pan-y !important;
        overscroll-behavior-x: none;
    }

    .modal-details.expanded {
        margin-top: 15px;
        padding-top: 15px;
    }

    /* Details Content */
    .details-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .details-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .details-content h4 {
        font-size: 1.1rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .details-content h5 {
        font-size: 0.95rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        margin-top: 15px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .details-content p {
        font-size: 0.8rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .details-content ul {
        width: 100%;
        padding-left: 0;
        margin-bottom: 12px;
        box-sizing: border-box;
    }

    .details-content ul li {
        font-size: 0.8rem;
        padding-left: 16px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.6;
        margin-bottom: 8px;
    }

    .details-content ul li::before {
        font-size: 0.75rem;
    }

    .details-content ul li strong {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        display: inline;
    }

    /* Close Button */
    .close-modal {
        top: 8px;
        right: 8px;
        font-size: 1.1rem;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        color: white;
    }
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--surface-color);
    border-top: 2px solid var(--primary-color);
    padding: 25px 20px;
    z-index: 10000;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cookie-text h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.cookie-text p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

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

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

.cookie-buttons {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.btn-outline-white {
    background: transparent;
    color: var(--text-color);
    border: 2px solid var(--text-color);
    padding: 10px 20px;
    border-radius: 50px;
}

.btn-outline-white:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

/* Legal Pages */
.legal-page {
    min-height: 100vh;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--surface-color);
    padding: 50px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.legal-content h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--text-color);
    text-align: center;
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.legal-content p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 15px;
}

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

.legal-content ul li {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 10px;
}

.legal-content a {
    color: var(--primary-color);
    text-decoration: underline;
}

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

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cookie-buttons .btn {
        width: 100%;
    }

    .legal-content {
        padding: 30px 20px;
    }

    .legal-content h1 {
        font-size: 2rem;
    }

    .legal-content h2 {
        font-size: 1.3rem;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

@keyframes pulse {
    0% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }

    50% {
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7);
    }

    100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
        font-size: 1.8rem;
    }
}

/* Success Cases Section */
.success-cases {
    background-color: var(--bg-color);
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.case-card {
    background-color: var(--surface-color);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.case-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.case-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.case-card:hover .case-image img {
    transform: scale(1.1);
}

.case-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
}

.case-category {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.case-content {
    padding: 30px;
}

.case-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

.case-content p {
    color: var(--text-muted);
    margin-bottom: 25px;
    line-height: 1.6;
}

.case-stats {
    display: flex;
    gap: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

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

.stat strong {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
}

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

/* Testimonials */
.testimonials-section {
    margin-top: 60px;
}

.testimonials-section h3 {
    font-size: 2rem;
    margin-bottom: 50px;
    color: var(--text-color);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: var(--surface-color);
    padding: 35px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.testimonial-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

.testimonial-stars {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    color: #fbbf24;
    font-size: 1.1rem;
}

.testimonial-card p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 25px;
    font-style: italic;
    font-size: 1rem;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.testimonial-author strong {
    color: var(--text-color);
    font-size: 1.1rem;
}

.testimonial-author span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .cases-grid {
        grid-template-columns: 1fr;
    }

    .case-stats {
        gap: 20px;
    }

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

/* Consent Checkbox Styles */
.consent-group {
    margin-top: 10px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
}

.consent-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.consent-label span {
    flex: 1;
    line-height: 1.5;
}

.consent-link {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.consent-link:hover {
    background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Consent Modal Styles */
.consent-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.consent-modal.active {
    opacity: 1;
    pointer-events: all;
}

.consent-modal-content {
    background-color: var(--surface-color);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.consent-modal.active .consent-modal-content {
    transform: scale(1);
}

.close-consent-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-color);
    cursor: pointer;
    transition: var(--transition);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-consent-modal:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

.consent-modal h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-color);
}

.consent-modal h3 {
    font-size: 1.3rem;
    margin-top: 25px;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.consent-modal-body {
    color: var(--text-muted);
    line-height: 1.7;
}

.consent-modal-body p {
    margin-bottom: 15px;
}

.consent-modal-body ul {
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 20px;
}

.consent-modal-body ul li {
    margin-bottom: 10px;
}

.consent-modal-body a {
    color: var(--primary-color);
    text-decoration: underline;
}

.consent-modal-body a:hover {
    color: var(--accent-color);
}

.consent-modal-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    justify-content: center;
}

@media (max-width: 768px) {
    .consent-modal-content {
        width: 95%;
        padding: 30px 20px;
        max-height: 90vh;
    }

    .consent-modal h2 {
        font-size: 1.5rem;
        padding-right: 30px;
    }

    .consent-modal-actions {
        flex-direction: column;
    }

    .consent-modal-actions .btn {
        width: 100%;
    }
}

/* ============================================
   PRICING SECTION
   ============================================ */

.pricing {
    background-color: var(--bg-color);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.pricing-card {
    background-color: rgba(255, 255, 255, 0.03);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pricing-card:hover::before {
    transform: scaleX(1);
}

.pricing-card:hover {
    transform: translateY(-10px);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

/* Popular Badge */
.pricing-card.popular {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.pricing-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.pricing-card:hover .pricing-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
}

.pricing-card h3 {
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.pricing-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 30px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 30px;
    width: 100%;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 0.95rem;
    text-align: left;
}

.pricing-features li i {
    color: var(--accent-color);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pricing-card .btn {
    width: 100%;
    margin-top: auto;
}

/* Pricing Amount Styles */
.pricing-amount {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pricing-amount .price {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pricing-amount .price-monthly {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* No include styling */
.pricing-features li.no-include,
.pricing-features li .no-include {
    color: rgba(255, 100, 100, 0.8);
}

/* Carousel Navigation - Hidden on Desktop */
.pricing-carousel-nav {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.carousel-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    gap: 8px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    width: 24px;
    border-radius: 4px;
}

/* ============================================
   PROCESS SECTION
   ============================================ */

.process {
    background-color: var(--surface-color);
}

/* Desktop: Horizontal Timeline */
.process-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 50px;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
}

.process-timeline::-webkit-scrollbar {
    height: 6px;
}

.process-timeline::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.process-timeline::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 10px;
}

/* Timeline connector line */
.process-timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    z-index: 0;
}

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 160px;
    scroll-snap-align: start;
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.process-step:hover .step-number {
    transform: scale(1.15) rotate(360deg);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.6);
}

.step-content {
    background-color: rgba(255, 255, 255, 0.03);
    padding: 20px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 260px;
}

.process-step:hover .step-content {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
    transform: translateY(-5px);
}

.step-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.process-step:hover .step-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.25));
    transform: scale(1.1);
}

.step-content h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--text-color);
}

.step-content p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.88rem;
}

/* Responsive Design for Pricing and Process */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    
    .process-timeline {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
    }
}

/* Process Section - Desktop Timeline */
@media (min-width: 769px) {
    .process-timeline {
        display: flex;
        gap: 30px;
        padding: 40px 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        position: relative;
        scrollbar-width: thin;
        scrollbar-color: rgba(138, 43, 226, 0.5) rgba(255, 255, 255, 0.05);
    }

    /* Sequential entrance animation for desktop */
    .process-step:nth-child(1) { animation-delay: 0.1s; }
    .process-step:nth-child(2) { animation-delay: 0.2s; }
    .process-step:nth-child(3) { animation-delay: 0.3s; }
    .process-step:nth-child(4) { animation-delay: 0.4s; }
    .process-step:nth-child(5) { animation-delay: 0.5s; }
    .process-step:nth-child(6) { animation-delay: 0.6s; }
}

@media (max-width: 768px) {
    /* Pricing Carousel for Mobile */
    .pricing-carousel-nav {
        display: flex;
    }
    
    .pricing-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 20px;
        padding: 0 10px 20px;
    }
    
    .pricing-grid::-webkit-scrollbar {
        display: none;
    }
    
    .pricing-card {
        flex: 0 0 85%;
        max-width: 350px;
        scroll-snap-align: center;
        padding: 30px 25px;
    }
    
    .pricing-amount .price {
        font-size: 1.8rem;
    }
    
    /* Process Timeline - Vertical Compact for Mobile */
    .process-timeline {
        display: flex;
        flex-direction: column;
        gap: 25px;
        overflow-x: visible;
    }
    
    .process-timeline::before {
        display: none;
    }
    
    .process-step {
        flex-direction: row;
        text-align: left;
        gap: 15px;
        min-width: auto;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        flex-shrink: 0;
    }
    
    .step-content {
        padding: 20px;
        min-height: auto;
        align-items: flex-start;
        text-align: left;
    }
    
    .step-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    .step-content h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .step-content p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
}

/* ========================================
   Language Selector System
   ======================================== */

/* Language Selection Modal - Initial Load */
.language-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.language-modal.active {
    opacity: 1;
    pointer-events: all;
}

.language-modal-content {
    background: linear-gradient(135deg, var(--surface-color) 0%, rgba(26, 26, 26, 0.95) 100%);
    border-radius: 30px;
    padding: 60px 50px;
    max-width: 700px;
    width: 90%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.language-modal.active .language-modal-content {
    transform: scale(1);
}

.language-modal h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.language-modal p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.language-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.language-option {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.language-option:hover {
    transform: translateY(-10px) scale(1.05);
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3);
}

.language-option .flag {
    font-size: 3.5rem;
    line-height: 1;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.language-option .flag img {
    width: 70px;
    height: 70px;
    
    border-radius: 50%;
}

.language-option:hover .flag {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.language-option .lang-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
}

.language-option .lang-code {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Floating Language Switcher Button - Left Side */
.language-switcher {
    position: fixed;
    left: 30px;
    bottom: 100px;
    z-index: 10001;
}

.lang-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-toggle-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6);
}

.lang-dropdown {
    position: absolute;
    bottom: 75px;
    left: 0;
    background: var(--surface-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 10px;
    min-width: 200px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.lang-dropdown.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.lang-dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateX(5px);
}

.lang-dropdown-item.active {
    background: rgba(59, 130, 246, 0.2);
    border-left: 3px solid var(--primary-color);
}

.lang-dropdown-item .flag {
    font-size: 1.8rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.lang-dropdown-item .flag img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

.lang-dropdown-item:hover .flag {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.lang-dropdown-item .lang-name {
    font-weight: 500;
    font-size: 0.95rem;
}

.lang-dropdown-item .lang-code {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .language-modal-content {
        padding: 40px 30px;
    }

    .language-modal h2 {
        font-size: 1.8rem;
    }

    .language-modal p {
        font-size: 1rem;
    }

    .language-options {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .language-option {
        padding: 25px;
    }

    .language-switcher {
        left: 20px;
        bottom: 90px;
    }

    .lang-toggle-btn {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }

    .lang-dropdown {
        min-width: 180px;
    }
}

/* ==========================================
   FLOATING LANGUAGE SELECTOR
   ========================================== */

.language-switcher {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
}

.lang-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    transition: var(--transition);
}

.lang-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(59, 130, 246, 0.6);
}

.lang-dropdown {
    position: absolute;
    bottom: 75px;
    left: 0;
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 10px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-color);
}

.lang-dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

.lang-dropdown-item.active {
    background: rgba(59, 130, 246, 0.2);
}

.lang-dropdown-item .flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-dropdown-item .flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lang-dropdown-item .lang-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
}

.lang-dropdown-item .lang-code {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

@media (max-width: 768px) {
    .language-switcher {
        bottom: 20px;
        left: 20px;
    }

    .lang-toggle-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .lang-dropdown {
        bottom: 65px;
        min-width: 180px;
    }
}

/* ==========================================================================
   Home ES (raíz) — Fase 1
   Estilos de la home nueva. Van aquí, no en copias por idioma.
   ========================================================================== */

/* --- Banner de idioma --------------------------------------------------- */

:root {
    --lang-banner-height: 44px;
}

.lang-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--lang-banner-height);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: 0 50px 0 var(--sp-4);
    background-color: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.lang-banner[hidden] {
    display: none;
}

.lang-banner-link {
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
}

.lang-banner-link:hover {
    color: var(--accent-color);
}

.lang-banner-close {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
}

.lang-banner-close:hover {
    color: var(--text-color);
}

/* Con el banner visible, el header fijo baja para no quedar tapado */
body.has-lang-banner .header {
    top: var(--lang-banner-height);
}

@media (max-width: 768px) {
    .lang-banner {
        gap: var(--sp-3);
        padding: 0 44px 0 var(--sp-3);
        font-size: var(--fs-label);
    }

    .lang-banner-text {
        display: none;
    }
}

/* --- Sección Problema --------------------------------------------------- */

.problema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap);
    margin-top: var(--sp-7);
}

.problema-card {
    background-color: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    transition: var(--transition);
}

.problema-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.problema-card i {
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: var(--sp-4);
}

.problema-card h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-3);
}

.problema-card p {
    color: var(--text-muted);
    font-size: var(--fs-body);
}

/* --- Servicios: las tres fases ------------------------------------------ */

.services-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.fase-num {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-2);
}

/* Salida de cada fase: qué se lleva el cliente. Separado del párrafo
   descriptivo para que se lea de un vistazo al escanear las tres tarjetas. */
.fase-salida {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.fase-salida strong {
    color: var(--accent);
}

.servicios-nota {
    margin-top: var(--sp-7);
    color: var(--text-muted);
    font-size: var(--fs-small);
    max-width: var(--measure);
    margin-inline: auto;
}

/* --- Marcadores de contenido pendiente ---------------------------------- */
/* Visibles a propósito: recuerdan qué falta y de qué fase es.
   Deben desaparecer conforme se cierren las fases 3, 4 y 5. */

.stack-placeholder {
    margin: 40px auto 0;
    max-width: 700px;
    padding: 40px 20px;
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    text-align: center;
    color: var(--text-muted);
    font-family: monospace;
    font-size: 0.9rem;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--grid-gap);
    align-items: center;
    margin-top: var(--sp-7);
}

.stack-nota {
    margin-top: var(--sp-6);
    color: var(--text-muted);
    font-size: var(--fs-small);
    max-width: var(--measure);
    margin-inline: auto;
}

/* --- Fichas de CRM (render desde el array CRMS de script.js) ------------- */

/* 4 columnas fijas: son 8 CRM y el auto-fit heredado los repartía 6 + 2,
   dejando dos fichas huérfanas en la segunda fila. */
#crm-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    #crm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.crm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 110px;
    padding: var(--sp-5) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    transition: var(--transition);
}

.crm-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

/* La ficha entera es un enlace al sitio del CRM: sin subrayado ni color de link. */
a.crm-card {
    text-decoration: none;
    color: inherit;
}

/* Chip blanco tras el logo: los logos de marca son de color y para fondo claro,
   así leen sobre el fondo oscuro y todas las fichas quedan homogéneas. */
.crm-logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 150px;
    min-height: 50px;
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    border-radius: var(--radius-sm);
}

.crm-logo-chip img {
    max-width: 100%;
    max-height: 30px;
    object-fit: contain;
}

/* El wordmark vive dentro del chip como reserva; solo se ve si el logo no carga. */
.crm-logo-chip .crm-wordmark {
    display: none;
}

.crm-logo-chip.crm-logo-fail {
    background: transparent;
    max-width: none;
    min-height: 0;
    padding: 0;
}

.crm-logo-chip.crm-logo-fail .crm-wordmark {
    display: block;
}

/* Fallback mientras no hay archivo de logo: el nombre como wordmark. */
.crm-wordmark {
    font-size: var(--fs-body-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-heading);
    color: var(--text);
}

.crm-nota {
    font-size: var(--fs-label);
    color: var(--text-muted);
}

.crm-destacado {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Solo se dibuja con partner: true. Ver CLAUDE.md § 6.1. */
.crm-badge {
    margin-top: var(--sp-1);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--accent);
}

/* --- Migración de eCommerce ----------------------------------------------
   Reescrita en la Fase 9. Las dos columnas cortas (.migracion-flujo, .migracion-col,
   .migracion-label, .migracion-lista, .migracion-flecha) se retiraron: ya no
   existen en el HTML y nada más las usaba. Si aparece una en un chat futuro,
   viene de un Backup/, no del sitio.

   Las dos rejillas nuevas se separan con `gap`, así que van con auto-fit según
   la regla de DISENO.md § 9. Ninguna dibuja bordes entre celdas, que es lo que
   obligaría a declarar las columnas. */

/* La tesis de la sección. Mismo tratamiento que .auditoria-filtro: barra de
   acento a la izquierda. Es la frase que diferencia a Nouweb del competidor
   Shopify-exclusive, así que no puede quedar como un párrafo más. */
.migracion-tesis {
    max-width: var(--measure);
    margin: var(--sp-7) auto 0;
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background-color: var(--bg-elev);
    font-size: var(--fs-body-lg);
    line-height: var(--leading-body);
}

.migracion-subtitulo {
    margin-top: var(--sp-8);
    font-size: var(--fs-h3);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}

.migracion-intro {
    margin-top: var(--sp-3);
    max-width: var(--measure);
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--leading-body);
}

/* Matriz de orígenes (render desde MIGRACIONES). Son 12 tarjetas: con
   minmax(280px) salen 4 columnas en escritorio, 2 en tablet y 1 en celular,
   siempre en filas completas porque 12 es divisible por 4, 3, 2 y 1. */
.migracion-matriz {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--grid-gap);
}

.migracion-origen {
    padding: var(--sp-5);
    background-color: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.migracion-origen:hover {
    border-color: var(--accent);
}

/* Hoy solo lo lleva el origen de marketplace: es el de mayor mercado en Perú
   (marcas que venden en Mercado Libre o Falabella y no tienen canal propio). */
.migracion-origen-destacado {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

.migracion-origen h4 {
    font-size: var(--fs-body-lg);
    font-weight: 600;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--sp-3);
}

/* Las marcas de marketplace, en pequeño bajo el titular: no compiten con él
   pero dejan claro de qué se está hablando. */
.migracion-origen-detalle {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: var(--tracking-body);
    color: var(--text-muted);
}

.migracion-problema {
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--leading-body);
}

/* Enlace al caso real que corresponde a ese origen. Solo se dibuja si el
   objeto trae el campo `caso`. */
.migracion-caso {
    display: inline-block;
    margin-top: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background-color: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    transition: var(--transition);
}

.migracion-caso:hover {
    background-color: var(--accent);
    color: var(--bg);
}

.migracion-destino {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    line-height: var(--leading-body);
}

.migracion-destino-rotulo {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--accent);
}

/* Destinos (render desde DESTINOS). Son CUATRO, igual que la banda de
   credenciales, así que van con columnas explícitas 1 / 2 / 4 y los mismos
   cortes (DISENO.md § 9).

   ⚠️ Medido: con auto-fit y minmax(280px) el contenedor de 1240 px solo da
   para TRES columnas (4×280 + 3×32 = 1216 > 1160 útiles), así que el cuarto
   destino caía solo en una segunda fila. No dibujaba ninguna raya suelta —el
   fallo de la Fase 8— pero se leía como si sobrara. Aquí el número de tarjetas
   es fijo y conocido: declararlas es más barato que pelearse con el minmax. */
.destinos-grid {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
}

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

@media (min-width: 1200px) {
    .destinos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.destino-card {
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-elev);
}

.destino-card>i {
    display: block;
    font-size: var(--fs-h3);
    color: var(--accent);
    margin-bottom: var(--sp-4);
}

.destino-card h4 {
    font-size: var(--fs-h3);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--sp-3);
}

.destino-card p {
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--leading-body);
}

/* ⚠️ El badge solo lo escribe script.js con SHOPIFY_PARTNER.activo === true, y
   siempre con la etiqueta de ese objeto. Nunca escribir aquí un ::before con
   texto de partner: se saltaría el interruptor (CLAUDE.md § 6.1). */
.destino-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background-color: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* La frase que hace convivir el badge con la independencia. Sin ella, "Shopify
   Partner" se lee como "siempre te llevan a Shopify", que es justo el
   competidor del que Nouweb se diferencia. */
.migracion-independencia {
    max-width: var(--measure);
    margin: var(--sp-6) auto 0;
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--leading-body);
}

.migracion-independencia strong {
    color: var(--text);
    font-weight: 600;
}

.sunat-sello {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
    margin-top: var(--sp-7);
    padding: var(--sp-6);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.sunat-sello i {
    flex-shrink: 0;
    font-size: 1.8rem;
    color: var(--accent);
}

.sunat-sello h3 {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-h3);
}

.sunat-sello p {
    color: var(--text-muted);
    font-size: var(--fs-body);
    max-width: var(--measure);
}

.pasarelas {
    margin-top: var(--sp-7);
}

.pasarelas h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-5);
}

.pasarelas-lista {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
}

.pasarelas-lista li {
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: 500;
}

@media (max-width: 768px) {

    /* Las reglas de .migracion-flujo y .migracion-flecha se fueron con las dos
       columnas viejas (Fase 9). Las rejillas nuevas son fluidas con auto-fit y
       no necesitan corte propio. */
    .sunat-sello {
        flex-direction: column;
        gap: var(--sp-4);
    }
}

/* --- Casos (render desde el array CASOS de script.js) -------------------- */

/* auto-fit con minmax: con un solo caso la tarjeta ocupa el ancho útil y no
   queda una columna suelta con dos huecos al lado. */
.casos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--grid-gap);
    margin-top: var(--sp-7);
}

.caso-card {
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.caso-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.caso-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-4);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.caso-head img {
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

/* Fallback mientras no hay archivo de logo: el nombre del cliente en texto. */
.caso-wordmark {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: var(--tracking-heading);
    color: var(--text);
}

.caso-sector {
    font-size: var(--fs-small);
    color: var(--text-faint);
}

.caso-historia {
    margin: 0;
}

.caso-historia dt {
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--accent);
}

.caso-historia dd {
    margin: var(--sp-2) 0 var(--sp-4);
    color: var(--text-muted);
    line-height: var(--leading-body);
    max-width: var(--measure);
}

.caso-historia dd:last-child {
    margin-bottom: 0;
}

/* Marcador de dato que falta. Se ve a propósito: si sale a producción sin
   rellenar, tiene que cantar (CLAUDE.md § 6.3). */
.caso-pendiente {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    font-family: monospace;
    font-size: var(--fs-small);
}

@media (max-width: 480px) {
    .caso-card {
        padding: var(--sp-5);
    }
}

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

.footer-nota {
    color: var(--text-faint);
    font-size: var(--fs-small);
}

/* --- Anclas del menú ------------------------------------------------------
   El header es fijo: sin esto, al saltar a una sección desde el menú el
   título queda tapado. */

section[id] {
    scroll-margin-top: calc(var(--header-height) + var(--sp-5));
}

body.has-lang-banner section[id] {
    scroll-margin-top: calc(var(--header-height) + var(--lang-banner-height) + var(--sp-5));
}

/* --- Fase 5: Auditoría --------------------------------------------------- */

.auditoria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap);
    margin-top: var(--sp-7);
}

.auditoria-card {
    background-color: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    transition: var(--transition);
}

.auditoria-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.auditoria-card i {
    font-size: 1.75rem;
    color: var(--accent);
    margin-bottom: var(--sp-4);
}

.auditoria-card h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-3);
}

.auditoria-card p {
    color: var(--text-muted);
    font-size: var(--fs-body);
}

.auditoria-cierre {
    max-width: var(--measure);
    margin: var(--sp-7) auto 0;
    text-align: center;
}

.auditoria-entregable {
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

.auditoria-entregable strong {
    color: var(--accent);
}

/* La frase que filtra a los curiosos. Va destacada a propósito: es la que
   evita que Luis acabe ahogado en llamadas sin intención de compra. */
.auditoria-filtro {
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background-color: var(--bg-elev);
    font-size: var(--fs-body);
}

.auditoria-precio {
    margin-top: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-small);
}

.auditoria-cta {
    margin-top: var(--sp-6);
}

/* --- Fase 5: WhatsApp ---------------------------------------------------- */

.contacto-whatsapp {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.contacto-whatsapp p {
    color: var(--text-muted);
    font-size: var(--fs-body);
    margin-bottom: var(--sp-4);
}

/* Verde de marca de WhatsApp: aquí sí se sale del sistema de diseño a
   propósito. El botón se tiene que reconocer de un vistazo. */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    background-color: #25d366;
    color: var(--bg);
    font-weight: 600;
}

.btn-whatsapp:hover {
    background-color: #1ebe5b;
    color: var(--bg);
}

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.08);
    color: #fff;
}

/* Mientras el banner de cookies está arriba, el flotante se esconde. El banner
   tiene z-index 10000 y en celular ocupa toda la parte de abajo: el flotante
   quedaba atrapado detrás, sin poder pulsarse, justo en la primera visita.
   Funciona porque #whatsapp-float va DESPUÉS del banner en el HTML. */
#cookie-banner.show~.whatsapp-float {
    display: none;
}

/* --- Fase 5: formulario de calificación ---------------------------------- */

.contact-form select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    transition: var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Mismo caso que los input y el textarea: el `outline: none` se retiró en la
   Fase 12. Solo se toca background-COLOR, nunca el atajo `background`, o se
   borraría la flechita del desplegable que va como background-image. */
.contact-form select:focus {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

/* En Windows el desplegable nativo hereda el fondo del sistema, no el
   nuestro: sin esto salen opciones blancas sobre texto claro. */
.contact-form select option {
    background-color: var(--surface-color);
    color: var(--text-color);
}

.form-nota-legal {
    color: var(--text-faint);
    font-size: var(--fs-small);
    margin-bottom: var(--sp-4);
}

/* ==========================================================================
   Fase 8 — Banda de credenciales y proceso de 6 pasos (2026-07-21)

   Todos los valores salen de docs/DISENO.md. Ninguno a ojo (DISENO.md § 7.1).
   ========================================================================== */

/* --- Banda de credenciales ------------------------------------------------
   Va pegada al hero, así que NO lleva la clase .section: con --section-y se
   despegaría del hero y dejaría de leerse como su continuación. El aire
   vertical sale igualmente de la escala (--sp-6), no de un valor inventado. */

.credenciales {
    padding: var(--sp-6) 0;
    background-color: var(--bg-elev);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ⚠️ Columnas EXPLÍCITAS, no auto-fit. Las casillas se separan con un borde
   (sobre fondo oscuro se separa con borde, no con sombra — DISENO.md § 4), y
   ese borde solo es correcto si se sabe qué casilla abre fila. Con auto-fit el
   número de columnas depende del ancho disponible y a 768 px salían tres, con
   lo que la cuarta casilla quedaba huérfana y la tercera dibujaba una raya
   vertical suelta contra el margen. Con 1 / 2 / 4 columnas fijas nunca hay
   fila incompleta y los :nth-child de abajo son exactos. */
.credenciales-banda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
}

.credencial {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}

/* Una columna (celular): la separación es horizontal. */
.credencial+.credencial {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
}

/* Dos columnas: raya vertical solo en la casilla de la derecha, raya
   horizontal solo en la fila de abajo. */
@media (min-width: 640px) and (max-width: 1199px) {
    .credenciales-banda {
        grid-template-columns: repeat(2, 1fr);
    }

    .credencial+.credencial {
        border-top: none;
        padding-top: 0;
    }

    .credencial:nth-child(even) {
        border-left: 1px solid var(--border);
        padding-left: var(--grid-gap);
    }

    .credencial:nth-child(n+3) {
        border-top: 1px solid var(--border);
        padding-top: var(--sp-4);
    }
}

/* Cuatro columnas en una sola fila: la banda que se buscaba. */
@media (min-width: 1200px) {
    .credenciales-banda {
        grid-template-columns: repeat(4, 1fr);
    }

    .credencial+.credencial {
        border-top: none;
        padding-top: 0;
        border-left: 1px solid var(--border);
        padding-left: var(--grid-gap);
    }
}

.credencial i {
    color: var(--accent);
    font-size: var(--fs-h3);
    line-height: var(--leading-heading);
    flex-shrink: 0;
}

.credencial-titulo {
    display: block;
    font-weight: 600;
    font-size: var(--fs-body);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--sp-1);
}

.credencial-detalle {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--leading-body);
}

/* --- Proceso de 6 pasos ---------------------------------------------------
   Rejilla de 3 columnas en escritorio (6 pasos = 2 filas limpias) y de 1 en
   celular. Un solo ancho de columna, según DISENO.md § 6. */

.proceso-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--grid-gap);
    counter-reset: none;
}

.proceso-paso {
    display: flex;
    gap: var(--sp-4);
    background-color: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    transition: var(--transition);
}

.proceso-paso:hover {
    border-color: var(--accent);
}

/* El número lo escribe script.js con padStart(2,'0') y va aria-hidden: es
   decoración, el orden real lo da el <ol>. En cian y no en --text-faint a
   propósito: DISENO.md § 2 avisa de que --text-faint está justo en el límite
   de AA y empeora sobre fondos elevados. */
.proceso-num {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--accent);
    flex-shrink: 0;
}

.proceso-cuerpo h3 {
    font-size: var(--fs-h3);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--sp-2);
}

/* El puente con #servicios. Es lo que evita que los 6 pasos se lean como una
   segunda oferta distinta de las 3 fases: solo lo llevan los pasos 1, 3 y 4,
   y al pulsarlo se baja a la fase que les corresponde. */
.proceso-vinculo {
    display: inline-block;
    margin-bottom: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background-color: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    transition: var(--transition);
}

.proceso-vinculo:hover {
    background-color: var(--accent);
    color: var(--bg);
}

.proceso-cuerpo p {
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--leading-body);
}

.proceso-entrega {
    margin-top: var(--sp-3);
}

.proceso-entrega strong {
    color: var(--accent);
    font-weight: 600;
}

/* ==========================================================================
   BLOG — Fase 10

   Tres cosas distintas viven acá:
     1. Las tarjetas, compartidas por la home (#blog, 3 últimas) y el índice
        (/blog/, todas). Un solo juego de estilos: si se tocan, cambian las dos.
     2. Las páginas interiores (índice y artículo), que a diferencia de la home
        no tienen hero y necesitan dejarle sitio al header fijo.
     3. El cuerpo del artículo, que es el único sitio del sitio con prosa larga
        de verdad y por eso lleva su propio ritmo vertical.

   Todos los valores salen de DISENO.md. Ninguno a ojo.
   ========================================================================== */

/* --- Páginas interiores (índice y artículo) ------------------------------
   La home empieza con el hero a pantalla completa, así que nunca hizo falta
   compensar el header fijo. Estas páginas empiezan con texto: sin este
   padding, el titular nace debajo del header y no se lee. */

.pagina-interior {
    padding-top: calc(var(--header-height) + var(--sp-7));
    padding-bottom: var(--section-y);
}

.miga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    font-size: var(--fs-small);
    color: var(--text-faint);
}

.miga a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.miga a:hover {
    color: var(--accent);
}

/* Enlace del menú de la página en la que ya estás. */
.nav-link-activo {
    color: var(--accent);
}

/* --- Rejillas ------------------------------------------------------------
   Dos rejillas con reglas distintas a propósito (DISENO.md § 9):

   · La home muestra un número FIJO y pequeño: 3. Con un número fijo se
     declaran las columnas, que es la lección de las fases 8 y 9. Va 1 → 3, sin
     pasar por 2: con tres tarjetas, dos columnas siempre dejan una huérfana
     ocupando el ancho entero de la fila de abajo.

   · El índice muestra un número VARIABLE y creciente, así que sí lleva rejilla
     automática — pero `auto-fill`, no `auto-fit`. La diferencia importa hoy
     mismo: con un solo artículo, `auto-fit` colapsa las pistas vacías y estira
     esa única tarjeta a los 1160 px del contenedor, que se ve como un error de
     maquetación. `auto-fill` conserva las pistas y la tarjeta se queda de su
     tamaño, arriba a la izquierda, que es como se ve un blog que acaba de
     empezar. */

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

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

.blog-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--grid-gap);
}

/* Pie de la sección de la home. Nace con [hidden] y lo revela blog.js cuando
   hay más de 3 artículos. */
.blog-ver-todos {
    margin-top: var(--sp-7);
}

/* --- Tarjeta de artículo ------------------------------------------------- */

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.blog-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-4px);
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* Sobre --text-faint a propósito: la meta va sobre --bg-subtle, que aclara el
   fondo, y --text-faint ya iba justo de contraste sobre el fondo liso
   (DISENO.md § 2). Con --text-muted pasa AA con margen. */

.blog-etiqueta {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
}

.blog-card-titulo {
    font-size: var(--fs-h3);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    font-weight: 600;
    margin: 0;
}

.blog-card-titulo a {
    color: var(--text);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.blog-card:hover .blog-card-titulo a {
    color: var(--accent);
}

/* Toda la tarjeta se vuelve clicable SIN envolverla en un <a>.
   Un enlace que contiene el título, dos párrafos y una fecha obliga al lector
   de pantalla a leerlo todo de corrido como un solo destino. Con este ::after
   el enlace sigue siendo el título —que es lo que se anuncia— y el área de
   clic es la tarjeta entera. */
.blog-card-titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
}

.blog-card-resumen {
    color: var(--text-muted);
    line-height: var(--leading-body);
    margin: 0;
}

.blog-card-seguir {
    margin-top: auto;
    padding-top: var(--sp-2);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--accent);
}

.blog-card-seguir i {
    transition: transform var(--dur) var(--ease);
}

.blog-card:hover .blog-card-seguir i {
    transform: translateX(4px);
}

/* --- Índice: estado vacío y cierre --------------------------------------- */

.blog-vacio {
    max-width: var(--measure);
    margin-inline: auto;
    padding: var(--sp-7) 0;
    text-align: center;
    color: var(--text-muted);
}

.blog-cierre,
.articulo-cierre {
    max-width: var(--measure);
    margin: var(--sp-9) auto 0;
    padding: var(--sp-7);
    text-align: center;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.blog-cierre h2,
.articulo-cierre h2 {
    margin-bottom: var(--sp-4);
}

.blog-cierre p,
.articulo-cierre p {
    margin-bottom: var(--sp-6);
    color: var(--text-muted);
    line-height: var(--leading-body);
}

.articulo-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
}

/* --- Artículo ------------------------------------------------------------
   El único sitio del sitio con prosa larga. Todo se limita a --measure: una
   línea de 65 caracteres es el ancho en el que el ojo encuentra solo el
   principio de la siguiente (DISENO.md § 6). Sin esto, a 1440 px las líneas
   salen de 150 caracteres y el artículo se abandona a la mitad.

   ⚠️ max-width y margin-inline: auto SIEMPRE juntos. Es la trampa de la
   Fase 11: la caja se queda pegada a la izquierda dentro de un contenedor
   centrado y parece un fallo de maquetación. */

.articulo {
    max-width: var(--measure);
    margin-inline: auto;
}

.articulo-head {
    margin-bottom: var(--sp-7);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
}

.articulo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.articulo-head h1 {
    font-size: var(--fs-h1);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--sp-5);
}

.articulo-entradilla {
    font-size: var(--fs-body-lg);
    line-height: var(--leading-body);
    color: var(--text-muted);
}

.articulo-cuerpo {
    line-height: var(--leading-body);
    color: var(--text-muted);
}

.articulo-cuerpo p {
    margin-bottom: var(--sp-5);
}

/* El margen de arriba es mayor que el de abajo a propósito: un título tiene
   que quedar visiblemente pegado a SU texto y separado del párrafo anterior.
   Con márgenes iguales, el título flota entre los dos bloques y el artículo se
   lee como una lista de trozos sueltos. */
.articulo-cuerpo h2 {
    font-size: var(--fs-h2);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--text);
    margin: var(--sp-8) 0 var(--sp-4);
}

.articulo-cuerpo h3 {
    font-size: var(--fs-h3);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--text);
    margin: var(--sp-6) 0 var(--sp-3);
}

.articulo-cuerpo strong {
    color: var(--text);
    font-weight: 600;
}

.articulo-cuerpo a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.articulo-cuerpo ul,
.articulo-cuerpo ol {
    margin: 0 0 var(--sp-5) var(--sp-5);
    padding-left: var(--sp-4);
}

.articulo-cuerpo li {
    margin-bottom: var(--sp-3);
}

.articulo-cuerpo ul li {
    list-style: disc;
}

.articulo-cuerpo ol li {
    list-style: decimal;
}

/* La frase que se saca del cuerpo. Misma familia visual que .migracion-tesis y
   .auditoria-filtro: raya de acento a la izquierda, texto más grande. */
.articulo-destacado {
    margin: var(--sp-7) 0;
    padding: var(--sp-5) var(--sp-6);
    font-size: var(--fs-body-lg);
    color: var(--text);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.articulo-cuerpo figure {
    margin: var(--sp-7) 0;
}

.articulo-cuerpo figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.articulo-cuerpo figcaption {
    margin-top: var(--sp-3);
    font-size: var(--fs-small);
    color: var(--text-faint);
    text-align: center;
}

@media (max-width: 600px) {

    /* El recuadro de cierre a pantalla completa deja los botones muy pegados
       al borde; el padding baja un escalón de la escala, no a un valor suelto. */
    .blog-cierre,
    .articulo-cierre {
        padding: var(--sp-5);
    }
}

/* ==========================================================================
   Fase 12 — pulido final (2026-07-22)

   Accesibilidad, jerarquía del botón secundario y carrusel de casos.
   Todo el color y el espaciado sale de DISENO.md §§ 10 y 11.
   ========================================================================== */

/* --- 1. El foco del teclado ----------------------------------------------
   Hasta hoy el sitio no tenía NI UN estilo de foco en 4.456 líneas, y encima
   apagaba el del navegador en el formulario con dos `outline: none`. Quien
   navega con el tabulador no podía saber dónde estaba.

   Va con :focus-visible y no con :focus a propósito: el navegador solo lo
   aplica cuando el foco viene del TECLADO. Con :focus a secas, cada clic del
   ratón dejaría el anillo pegado al botón, y así es exactamente como alguien
   acaba borrando estos estilos por "feos" (DISENO.md § 10). */
:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
}

/* Los botones redondos ya traen su propio radio; el anillo lo respeta. */
.btn:focus-visible,
.nav-link:focus-visible,
.whatsapp-float:focus-visible {
    border-radius: var(--radius-pill);
}

/* El logo y las tarjetas-enlace son rectangulares con esquinas suaves. */
.logo:focus-visible,
.crm-card:focus-visible,
.blog-card:focus-visible {
    border-radius: var(--radius);
}

/* Enlace de salto: el primer tabulador de la página. Sin él, para llegar al
   contenido hay que pasar por las 9 entradas del menú EN CADA página. Vive
   fuera de la pantalla y solo baja cuando recibe el foco. */
.skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 10001;
    /* por encima del banner de cookies (10000), o no se vería */
    padding: var(--sp-3) var(--sp-5);
    background: var(--accent);
    color: var(--bg);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transform: translateY(calc(-100% - var(--sp-4)));
}

/* :focus a secas, no :focus-visible. Un enlace de salto que solo aparece
   "cuando el navegador cree que es teclado" es un enlace de salto roto: se usa
   siempre con el tabulador y tiene que verse siempre. */
.skip-link:focus {
    transform: translateY(0);
}

/* El destino del salto lleva tabindex="-1" para que el foco se mueva de
   verdad, pero no debe dibujar el anillo: un recuadro de 3px alrededor de una
   sección entera se lee como un fallo de maquetación, no como un foco. */
#contenido:focus,
#contenido:focus-visible,
#hero:focus,
#hero:focus-visible {
    outline: none;
}

/* --- 2. El menú móvil cerrado no debe ser tabulable -----------------------
   El desplegable se esconde con translateY(-150%), que lo saca de la pantalla
   pero LO DEJA ENFOCABLE. Por debajo de 1260px, quien navega con el tabulador
   se comía 9 enlaces invisibles antes de llegar a nada: pulsaba Tab, no veía
   moverse nada y parecía que la página estaba rota.

   `visibility: hidden` sí lo saca del orden de tabulación y además es
   animable, así que la transición del desplegable no cambia. Es la misma
   propiedad y por el mismo motivo que en el titular que se teclea: es la
   única que hace las dos cosas a la vez. */
@media (max-width: 1260px) {
    .nav {
        visibility: hidden;
    }

    .nav.active {
        visibility: visible;
    }
}

/* --- 3. Carrusel de casos ------------------------------------------------
   ⚠️ Con menos de 3 casos NO hay carrusel: lo decide script.js, que solo pone
   la clase .casos-carrusel a partir del tercero. Con un caso, unas flechas
   que no llevan a ninguna parte se leen peor que una tarjeta sola
   (FASE-12 § Tareas). Sin esa clase, .casos-grid sigue siendo la rejilla de
   siempre y este bloque entero no aplica.

   Se hace con scroll nativo y scroll-snap, no con transform y un índice en
   JS: así el arrastre con el dedo, la rueda del ratón y el tabulador
   funcionan solos, que es justo lo que una implementación a mano rompe. */
.casos-carrusel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 420px);
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* sitio para que el :hover de la tarjeta (translateY -4px) no se recorte */
    padding: var(--sp-2) var(--sp-1) var(--sp-5);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.casos-carrusel .caso-card {
    scroll-snap-align: start;
}

.casos-carrusel::-webkit-scrollbar {
    height: 8px;
}

.casos-carrusel::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

.casos-nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.casos-nav button {
    width: 44px;
    height: 44px;
    /* 44px es el mínimo táctil cómodo; por debajo se falla el toque */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--fs-body);
    cursor: pointer;
    transition: var(--transition);
}

.casos-nav button:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

/* Al llegar a un extremo la flecha se apaga en vez de desaparecer: si se
   quita, las otras saltan de sitio y el visitante pierde el punto de apoyo. */
.casos-nav button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ==========================================================================
   Fase 13 — iconos en línea (2026-07-22)

   Los tres iconos de encima del pliegue (menú, acceso de clientes y la X del
   banner de idioma) dejaron de ser Font Awesome y pasaron a SVG dentro del
   HTML. Motivo: Font Awesome ahora carga SIN BLOQUEAR el pintado, así que
   llega tarde a propósito; un header con tres huecos vacíos durante medio
   segundo se lee como una web rota, y justo en la primera pantalla, que es lo
   único que ve quien llega de un anuncio.

   `fill: currentColor` es lo que hace que hereden el color del texto igual que
   lo hacía Font Awesome, así que el CSS de color de arriba les sigue valiendo
   sin tocar nada.
   ========================================================================== */

.icono {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    /* alinea con la línea base del texto, como hace Font Awesome */
    flex-shrink: 0;
}

/* El botón de la hamburguesa lleva DENTRO los dos iconos y se enseña uno u
   otro según la clase. Cambiar de icono no toca el DOM: es solo CSS, así que
   no hay ningún instante con el botón vacío. */
.mobile-toggle .icono-cerrar,
.mobile-toggle.abierto .icono-barras {
    display: none;
}

.mobile-toggle.abierto .icono-cerrar {
    display: inline-block;
}

/* ⚠️ Medido en la Fase 13: el botón daba 24x27 px de zona pulsable. El mínimo
   cómodo es 44x44 (es el que piden tanto Apple como Google), y por debajo de
   eso la gente falla el toque y lo vuelve a intentar. Importa más que nunca
   ahora: el tráfico de anuncios es casi todo celular, y este botón es la única
   forma de abrir el menú por debajo de 1260px.

   Se agranda la ZONA, no el dibujo: el icono sigue viéndose a 24px. El margen
   negativo compensa el relleno para que el botón no empuje la fila del header
   y el corte de la hamburguesa medido en la Fase 10 siga valiendo. */
.mobile-toggle {
    display: none;
    /* lo enciende la @media de 1260px */
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--sp-2);
    margin: calc(var(--sp-2) * -1);
}

@media (max-width: 1260px) {
    .mobile-toggle {
        display: flex;
    }
}

/* Los bloques de WhatsApp y el precio nacen con [hidden] y los revela
   script.js. Sin esto, cualquier display: flex de arriba gana al atributo. */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   Movimiento reducido — Fase 11

   Obligatorio en DISENO.md § 5. Quien tiene activado "reducir movimiento" en
   su sistema (vértigo, migrañas) deja de ver desplazamientos y transiciones.

   El .fade-in-up es el punto delicado: nace en opacity 0 y solo se enciende
   cuando el IntersectionObserver le pone .visible. Si aquí se anulara la
   transición sin forzar la visibilidad, media home se quedaría invisible.
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fade-in-up,
    .fade-in-up.visible {
        opacity: 1;
        transform: none;
    }

    /* El titular no se teclea (script.js no arranca la animación, así que las
       letras ni se llegan a partir en spans) y el cursor sobra: un guion bajo
       quieto al final de la frase se lee como una errata, no como un cursor. */
    .hero-letra-cursor::after,
    .hero-letra-cursor-inicio::before {
        display: none;
    }

    /* El carrusel de casos salta de tarjeta en vez de deslizarse. La regla
       global de arriba no lo cubre: scroll-behavior no es una transición ni
       una animación, es una propiedad propia y hay que anularla aparte
       (Fase 12). */
    .casos-carrusel {
        scroll-behavior: auto;
    }
}