/* ============================================
   HITO - Landing Page Styles
   Apple-inspired dark theme with deep teal accents
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --brand-primary: #0F766E;
    --brand-light: #14B8A6;
    --brand-dark: #134E4A;
    --brand-glow: rgba(var(--brand-primary-rgb), 0.15);

    --accent: #00D9C4;
    --accent-light: #33FFE8;
    --accent-dark: #00B3A1;
    --accent-glow: rgba(var(--accent-rgb), 0.15);

    --bg-primary: #0A0A0A;
    --bg-secondary: #111111;
    --bg-tertiary: #1A1A1A;
    --bg-glass: rgba(255, 255, 255, 0.03);

    --text-primary: #F5F5F7;
    --text-secondary: #A1A1A6;
    /* #6E6E73 daba 3.43:1 sobre --bg-tertiary; falla WCAG AA (1.4.3).
       #8E8E93 da 5.34:1 en el fondo más claro y 6.07:1 sobre --bg-primary. */
    --text-tertiary: #8E8E93;

    --border-subtle: rgba(255, 255, 255, 0.08);
    /* Canales sueltos de los mismos colores de arriba. Las tintas del sitio
       se escribían como rgba(15, 118, 110, .3) — el token existía, pero cada
       matiz reexpresaba sus canales a mano en 35 sitios, así que cambiar la
       paleta obligaba a editar los 35. Con estos, el color vive en un lugar. */
    --brand-primary-rgb: 15, 118, 110;
    --brand-light-rgb: 20, 184, 166;
    --accent-rgb: 0, 217, 196;
    --kanawak-gold-rgb: 224, 164, 88;
    /* Borde de campo de formulario. `--border-subtle` compone a #2C2C2C sobre
       --bg-tertiary (1.25:1) y a #1E1E1E sobre --bg-primary (1.18:1): WCAG
       1.4.11 pide 3:1 para el límite de un control, así que los 19 campos del
       sitio eran invisibles según la norma. #6A6A6A da 3.22:1 sobre
       --bg-tertiary y 3.66:1 sobre --bg-primary. Sólido, no translúcido, para
       que el ratio no dependa de la superficie que tenga debajo. */
    --border-field: #6A6A6A;
    /* #b91c1c es un rojo de tema claro: sobre el fondo del mensaje de error
       (rgba(220,38,38,.08) compuesto sobre --bg-tertiary) daba 2.94:1, y el
       enlace de correo que va dentro heredaba ese color. #F87171 da 5.97:1. */
    --error-text: #F87171;

    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-hero: clamp(3rem, 8vw, 5.5rem);
    --text-h1: clamp(2.5rem, 5vw, 4rem);
    --text-h2: clamp(1.5rem, 3vw, 2rem);
    --text-h3: clamp(1.125rem, 2vw, 1.5rem);
    --text-body: clamp(1rem, 1.5vw, 1.125rem);
    --text-small: clamp(0.75rem, 1vw, 0.875rem);

    --container-max: 1200px;
    /* 160px arriba + 160px abajo daba ~320px de banda vacía en cada una de
       las 11 costuras entre secciones (~3.100px, 18% de la altura de la
       página). El agrupamiento interno de cada sección ya es correcto
       (label→título→subtítulo apretados); sobraba magnitud, no jerarquía. */
    --section-padding: clamp(56px, 7vw, 104px);
    --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

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

/* El `[hidden] { display: none }` del navegador viene de su hoja de estilos,
   así que cualquier `display` declarado aquí lo gana — y .form-row es un grid.
   Sin esto, ocultar un contenedor con el atributo `hidden` no hace nada. */
[hidden] {
    display: none !important;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
}

/* One focus ring for the whole site, never suppressed.
   Codika vende accesibilidad WCAG AA; el propio sitio la cumple.
   El outline sigue el border-radius del elemento, así que no hay que
   redeclararlo por forma. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Nombre accesible para campos cuyo rótulo visible es el del grupo.
   La composición de placeholders se conserva; el lector de pantalla
   sí obtiene un nombre por campo (WCAG 1.3.1 / 3.3.2). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Navigation --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    /* El padding cambia 4px al hacer scroll: como animación es imperceptible,
       pero reflowaba la barra entera (logo, 6 enlaces, selector de idioma y
       CTA) en cada frame durante 0.4s. Se queda el cambio, se va la
       interpolación. */
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 0;
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-primary);
    z-index: 10;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.3s ease;
    position: relative;
    /* 24px mínimo de objetivo (WCAG 2.5.8); medían 22px. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--brand-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--transition-smooth);
}

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

.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    transform: scaleX(1);
}

.nav-cta {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--brand-primary);
    padding: 8px 20px;
    border-radius: 100px;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-cta:hover {
    background: var(--brand-light);
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(var(--brand-primary-rgb), 0.3);
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    /* 44x44 mínimo táctil (WCAG 2.5.5). Antes medía 32x24. */
    width: 44px;
    height: 44px;
    padding: 0;
    /* El margen negativo mantiene la alineación óptica del navbar
       ahora que el botón es más grande que su icono. */
    margin-right: -10px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu — slide-in drawer */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    background: rgba(5, 7, 9, 0);
    visibility: hidden;
    transition: background 0.45s var(--transition-smooth), visibility 0.45s;
}

.mobile-menu.active {
    visibility: visible;
    background: rgba(5, 7, 9, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mobile-menu-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(86vw, 360px);
    height: 100%;
    padding: 96px 28px 28px;
    background: linear-gradient(180deg, #0d1117 0%, #0a0a0a 100%);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.45s var(--transition-smooth);
}

/* Brand signature: teal→cyan edge on the drawer */
.mobile-menu-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--brand-primary), var(--accent));
}

.mobile-menu.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Antes `padding-left: 0 -> 8px`, que reflowaba la columna del drawer en
       cada frame. `translateX` da el mismo desplazamiento en el compositor. */
    transition: color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.mobile-link:hover,
.mobile-link:active {
    color: var(--text-primary);
    transform: translateX(8px);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.mobile-cta {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    background: var(--brand-primary);
    border-radius: 14px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.mobile-cta:hover,
.mobile-cta:active {
    background: var(--brand-light);
    box-shadow: 0 0 30px rgba(var(--brand-primary-rgb), 0.3);
}

/* --- Hero Section --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 24px 80px;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.hero:not(.in-view) .scroll-indicator {
    animation-play-state: paused;
}

/* Tres orbes de 600/400/300px con blur(80px) animándose en bucle infinito
   seguían consumiendo GPU con el hero fuera de pantalla (la página mide ~19
   viewports). `will-change` sólo se promueve mientras el hero está visible;
   dejarlo fijo mantenía tres capas de compositing vivas todo el scroll. */
.hero.in-view .hero-orb {
    will-change: transform;
}

.hero:not(.in-view) .hero-orb {
    animation-play-state: paused;
}

.hero-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.2) 0%, transparent 70%);
    top: -100px;
    right: -150px;
    animation: orbFloat1 20s ease-in-out infinite;
}

.hero-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--brand-light-rgb), 0.12) 0%, transparent 70%);
    bottom: -50px;
    left: -100px;
    animation: orbFloat2 25s ease-in-out infinite;
}

.hero-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbFloat3 18s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.08); }
    66% { transform: translate(-30px, 20px) scale(0.95); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-25px, 35px) scale(1.05); }
    66% { transform: translate(35px, -20px) scale(0.92); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    will-change: transform;
}

.hero-title {
    font-size: var(--text-hero);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    /* Medida de display: sin <br> en el markup, el salto lo decide el
       navegador y `balance` reparte las líneas. Antes un <br> fijo se
       ocultaba en móvil y pegaba dos palabras ("operacióny"). */
    max-width: 22ch;
    margin: 0 auto 24px;
    text-wrap: balance;
}

/* El acento va sobre la frase que carga la promesa, no sobre un barrido
   de gradiente que cortaba las palabras a la mitad. */
.hero-accent {
    color: var(--accent);
    font-style: normal;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 48px;
    line-height: 1.5;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Las tres garantías, no un cuarto botón: sin caja, sin icono y en el tamaño
   del texto de apoyo. Sostienen la decisión que los botones piden, así que
   van debajo de ellos y no compiten por el clic. */
.hero-guarantees {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-top: 32px;
    /* Ni terciario ni 13px: el Principio #1 dice que la promesa del código
       "nunca se entierra en letra pequeña", y ponerla en el primer viewport
       con el tono de un pie de página la volvía a enterrar en otro sitio. */
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.hero-guarantees li {
    position: relative;
}

/* Separador entre ítems, no viñeta delante: en una fila centrada el punto
   inicial deja el primer elemento descolgado.
   Ojo: `li + li` no sabe dónde envuelve la línea, así que en cuanto la fila
   se parte la segunda línea empieza con un punto huérfano. Por eso debajo de
   600px la lista pasa a columna y el separador desaparece. */
.hero-guarantees li + li::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--brand-light);
    transform: translateY(-50%);
}

@media (max-width: 600px) {
    .hero-guarantees {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .hero-guarantees li + li::before {
        content: none;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 32px;
    border-radius: 100px;
    /* Explícito, no `all`: con `all` el anillo de foco se animaba durante
       0.4s (un indicador de foco debe aparecer al instante). */
    transition: background 0.3s var(--transition-smooth),
                color 0.3s var(--transition-smooth),
                border-color 0.3s var(--transition-smooth),
                box-shadow 0.3s var(--transition-smooth),
                transform 0.3s var(--transition-smooth);
    cursor: pointer;
}

.btn-primary {
    background: var(--brand-primary);
    color: white;
    box-shadow: 0 0 30px rgba(var(--brand-primary-rgb), 0.3);
}

.btn-primary:hover {
    background: var(--brand-light);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 50px rgba(var(--brand-primary-rgb), 0.45);
}

.btn-primary:active {
    background: var(--brand-dark);
    transform: translateY(0) scale(1);
}

.btn-outline {
    color: var(--text-primary);
    border: 1.5px solid var(--border-subtle);
    background: transparent;
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.btn-full {
    width: 100%;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent);
    opacity: 0.6;
    animation: scrollDrift 2s ease-in-out infinite;
}

@keyframes scrollDrift {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
    50% { transform: translateX(-50%) translateY(12px); opacity: 1; }
}

/* --- Sections --- */
.section {
    padding: var(--section-padding) 0;
    position: relative;
}

.section-alt {
    background: var(--bg-secondary);
}

.section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    text-align: center;
}

.section-title {
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 24px;
    text-align: center;
}

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

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 48px;
    text-align: center;
}

.section-subtitle-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Eslogan de marca. Antes era un degradado sobre el texto: el corte de color
   caía a mitad de palabra, así que no significaba nada y además bajaba el
   contraste en el extremo oscuro. Color sólido; el énfasis lo da el tamaño. */
.pillars-slogan {
    color: var(--brand-light);
}

/* --- Services Cards --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.card {
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 40px 32px;
    transition: border-color 0.4s var(--transition-smooth),
                background 0.4s var(--transition-smooth),
                box-shadow 0.4s var(--transition-smooth),
                transform 0.4s var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, var(--brand-glow) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--brand-primary-rgb), 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(var(--brand-primary-rgb), 0.08);
}

.card:hover::before {
    opacity: 1;
}

.card-highlighted {
    border-color: rgba(var(--accent-rgb), 0.2);
}

.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--brand-primary);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 100px;
    letter-spacing: 0.02em;
}

/* Los SVG inline llevaban stroke/fill con el hex de marca escrito a mano:
   157 valores repartidos entre index, en/index, nosotros y en/about. Ahora
   usan currentColor y el color lo decide el contenedor desde los tokens, así
   que un cambio de paleta se hace en un sitio. */
.card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    color: var(--brand-primary);
}

.card-title {
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.card-description {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- IA & Automatización Section --- */
.services-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* La reja de 6 tarjetas (Experiencia) cae en 3x2 exacto. Antes eran 4 columnas
   fijas: 4 + 2 celdas vacías al final. */
@media (min-width: 1024px) {
    .services-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* La de 4 tarjetas (IA) no puede usar la misma topología: con 3 columnas
       deja una huérfana, y con 4 cada tarjeta baja a ~270px y parte los
       títulos en dos líneas ("Automatización de / procesos"). 2x2 da medida
       cómoda, títulos en una línea y reja completa. */
    .services-grid-pair {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-ai::before {
    background: radial-gradient(circle at 50% 0%, var(--accent-glow) 0%, transparent 60%);
}

.card-ai:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(var(--accent-rgb), 0.1);
}

.card-icon-accent {
    position: relative;
    color: var(--accent);
}

.card-icon-accent::after {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.card-ai:hover .card-icon-accent::after {
    opacity: 1;
}

.ai-callout {
    margin-top: 56px;
    padding: 32px 40px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(var(--accent-rgb), 0.02) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.ai-callout-content {
    flex: 1;
    min-width: 260px;
}

.ai-callout-title {
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.ai-callout-text {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 600px) {
    .ai-callout {
        padding: 28px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-callout .btn {
        width: 100%;
        text-align: center;
    }
}

/* --- Technology Grid --- */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.tech-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.4s var(--transition-smooth),
                background 0.4s var(--transition-smooth),
                box-shadow 0.4s var(--transition-smooth),
                transform 0.4s var(--transition-smooth);
}

.tech-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.04);
}

.tech-logo {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.tech-card:hover .tech-logo {
    opacity: 1;
}

/* Nombres de producto, no código: la monoespaciada queda reservada para
   cifras y datos (precios, stats, contadores). */
.tech-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tech-desc {
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

/* --- Pricing --- */
/* Los tres planes nunca fueron equivalentes: dos son trabajo a medida con
   precio piso y plazo de MVP, el tercero es un producto cerrado de precio
   final. Una reja de tres iguales era el default del framework, no la
   relación real — y coronaba el ticket más bajo. La reja contiene ahora sólo
   los dos planes de founder; la landing vive debajo como franja de entrada.
   880px sobre dos columnas deja cada tarjeta en ~428px: medida cómoda para
   una cifra grande sin que la reja se estire a todo el contenedor. */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 64px auto 0;
    max-width: 880px;
    align-items: start;
}

.pricing-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 40px 32px;
    position: relative;
    transition: border-color 0.4s var(--transition-smooth),
                background 0.4s var(--transition-smooth),
                box-shadow 0.4s var(--transition-smooth),
                transform 0.4s var(--transition-smooth);
}

.pricing-card:hover {
    transform: translateY(-6px);
}

/* El énfasis NO usa `transform`: la tarjeta también lleva .animate-on-scroll,
   cuyo `transform: translateY(0)` gana por especificidad y anulaba el
   scale(1.03) — el destacado sólo aparecía después de pasar el ratón y salir,
   porque el tilt JS lo reinyectaba inline. Ahora el énfasis vive en borde,
   fondo y sombra, que no colisionan con la animación de entrada. */
.pricing-featured {
    border-color: rgba(var(--brand-primary-rgb), 0.55);
    background: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.1) 0%, var(--bg-tertiary) 55%);
    box-shadow: 0 0 0 1px rgba(var(--brand-primary-rgb), 0.35), 0 18px 50px -12px rgba(0, 0, 0, 0.7);
    z-index: 1;
}

/* El CTA del plan destacado era un pill BLANCO: el único color fuera del
   sistema en toda la home, y encima sobre el producto de $100 — que según
   PRODUCT.md es la puerta de entrada, no la oferta principal. Era el botón
   más ruidoso de la página empujando el ticket más bajo.
   La tarjeta ya se distingue por borde, fondo y sombra; el botón no necesita
   salirse de la paleta. */
.pricing-featured .btn-primary {
    position: relative;
    z-index: 2;
}

/* glowPulse retirado: animaba box-shadow en bucle infinito (repintado
   permanente) para un latido que nadie mira. El énfasis ya es estático. */

/* .pricing-badge retirado junto con su marcado. Decía "POPULAR" sobre el plan
   de $100; moverlo al plan destacado nuevo habría fabricado la misma
   afirmación sin respaldo sobre otra tarjeta, y el Principio de producto #2
   es explícito ("ningún número sin respaldo"). El énfasis lo cargan el borde,
   el fondo y la sombra de .pricing-featured, que no afirman nada. */

.pricing-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
}

.pricing-name {
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.pricing-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pricing-from {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Mono porque es una cifra, y ahora es el ancla visual de la sección: las
   dos ofertas que sostienen el negocio son las únicas que llevan número.
   `.pricing-amount-text` ("Personalizada") y `.pricing-amount-highlight`
   (el $100 coronado) desaparecen con el marcado que los usaba. */
.pricing-amount {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    /* La mono da celda completa al separador de miles y "$2.000" se leía con
       un hueco a cada lado del punto. Comprobado en el render, no calculado. */
    letter-spacing: -0.035em;
}

.pricing-amount small {
    font-size: 0.45em;
    font-weight: 400;
    color: var(--text-tertiary);
}

.pricing-period {
    font-size: var(--text-small);
    color: var(--text-tertiary);
    margin-top: 8px;
    /* El plazo es la mitad de la promesa; dos líneas cortas leen mejor que
       una larga a la medida estrecha de la tarjeta. */
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.pricing-features li svg {
    flex-shrink: 0;
}

/* --- Franja de entrada (Landing Page) ---
   Deliberadamente más baja, más callada y más ancha que las tarjetas de
   arriba: una fila horizontal se lee como pie de la sección, no como un
   cuarto plan. Fondo --bg-secondary (#111) contra el --bg-tertiary (#1A1A1A)
   de las tarjetas, así que retrocede en vez de competir. */
/* Tres columnas dejaban la lista de ítems en ~200px y los seis se apilaban en
   vertical, estirando la franja hasta la altura de una tarjeta — justo lo que
   no debe parecer. Con áreas, nombre y lista comparten la columna ancha y el
   precio ocupa la estrecha a lo alto: la franja baja a dos filas cortas. */
.pricing-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main   action"
        "feats  action";
    align-items: center;
    gap: 12px 40px;
    max-width: 880px;
    /* 40px la separa de la reja sin abrir una costura de sección: sigue
       perteneciendo a Precios, un escalón por debajo. */
    margin: 40px auto 0;
    padding: 28px 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
}

.pricing-entry-main {
    grid-area: main;
}

.pricing-entry-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.pricing-entry-note {
    font-size: var(--text-small);
    color: var(--text-secondary);
    line-height: 1.5;
}

.pricing-entry-features {
    grid-area: feats;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* Punto medio en vez de checks: seis ítems con icono pesarían tanto como los
   de las tarjetas de arriba, que es justo lo que esta franja no debe hacer. */
.pricing-entry-features li {
    position: relative;
    padding-left: 14px;
}

.pricing-entry-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand-light);
}

.pricing-entry-action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.pricing-entry-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* La cifra de entrada baja a la mitad de las de founder: sigue siendo legible
   y verificable, pero ya no es lo más grande de la sección. */
.pricing-entry .pricing-amount {
    font-size: 1.5rem;
}

.pricing-entry-unit {
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

@media (max-width: 900px) {
    .pricing-entry {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "feats" "action";
        gap: 20px;
        padding: 24px;
    }

    /* Apilada, la lista en fila pasaba a seis renglones y la franja acababa
       midiendo más que la tarjeta que debe subordinar (549px contra 520px,
       medido). En dos columnas son tres renglones. */
    .pricing-entry-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
    }

    .pricing-entry-action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
}

/* --- Contact Section --- */
.section-contact {
    position: relative;
    overflow: hidden;
}

.contact-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.contact-form {
    max-width: 600px;
    margin: 48px auto 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-field);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-tertiary);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 20px var(--accent-glow);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn {
    margin-top: 8px;
}

.form-success {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    margin-top: 16px;
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
}

.form-success.visible {
    display: flex;
}

.form-error {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    margin-top: 12px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 8px;
    color: var(--error-text);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.form-error.visible {
    display: flex;
}

.contact-alt {
    text-align: center;
    margin-top: 48px;
}

.contact-alt p {
    color: var(--text-tertiary);
    margin-bottom: 16px;
    font-size: var(--text-small);
}

.contact-links {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--brand-primary);
}

.contact-link-wa {
    color: #25D366;
    font-weight: 600;
}
.contact-link-wa:hover {
    color: #25D366;
    opacity: 0.85;
}

/* --- Botón flotante de WhatsApp --- */
.wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    /* Se intentó abrir la píldora con la reja `0fr -> 1fr`, que es el idioma
       que recomienda el detector para no animar layout. Falla en reposo: la
       pista `0fr` no colapsa a 0 porque el `padding` del rótulo no lo toca
       `min-width: 0`, así que el botón cerrado medía 86px en vez de 64
       (medido en el navegador, no deducido). Se mantiene `width`.
       El coste real es acotado: un único elemento fixed con dos hijos, que
       reflowa su propio subárbol y sólo mientras hay hover. */
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #25D366;
    color: #ffffff;
    height: 64px;
    width: 64px;
    padding: 0;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
    overflow: hidden;
    transition: width 0.35s ease, box-shadow 0.3s ease, transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
    white-space: nowrap;
}
/* Se retira con el drawer abierto (tapaba su CTA) y con un formulario en
   pantalla (tapaba los campos y el botón de envío). */
body.menu-open .wa-float,
body.form-in-view .wa-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.wa-float svg {
    flex: none;
    width: 64px;
    height: 34px;
}
.wa-float-label {
    font-weight: 700;
    font-size: 1rem;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
}
.wa-float:hover {
    width: 210px;
    box-shadow: 0 14px 38px rgba(37, 211, 102, 0.55);
    transform: translateY(-2px);
    color: #ffffff;
}
.wa-float:hover .wa-float-label {
    max-width: 140px;
    opacity: 1;
    padding-right: 22px;
}
@media (max-width: 768px) {
    /* max() y no suma: en un teléfono sin notch el inset es 0 y el botón
       conserva sus 16px; en uno con indicador de inicio sube lo justo para
       no quedar debajo de él. */
    .wa-float {
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        height: 58px;
        width: 58px;
    }
    .wa-float svg { width: 58px; height: 30px; }
    /* En móvil mantenemos solo el ícono para no tapar contenido */
    .wa-float:hover { width: 58px; }
    .wa-float:hover .wa-float-label { max-width: 0; opacity: 0; padding-right: 0; }
}

/* --- Footer --- */
.footer {
    border-top: 1px solid var(--border-subtle);
    padding: 32px 0;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.footer-copy {
    font-size: var(--text-small);
    color: var(--text-tertiary);
}


/* --- Scroll Animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--transition-smooth),
                transform 0.8s var(--transition-smooth);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .nav-links,
    .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .hero {
        padding: 100px 20px 60px;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .container {
        padding: 0 20px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

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

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

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }


    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

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


    .hero-title {
        font-size: clamp(1.75rem, 8.5vw, 2.5rem);
        overflow-wrap: break-word;
    }

    .section-title {
        font-size: clamp(1.875rem, 7vw, 2.5rem);
    }

    .hero-orb-1 {
        width: 300px;
        height: 300px;
    }

    .hero-orb-2 {
        width: 200px;
        height: 200px;
    }

    .mobile-menu-content {
        width: min(92vw, 360px);
        padding: 92px 22px 24px;
    }

    .mobile-link {
        min-height: 50px;
        font-size: 1rem;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-orb {
        animation: none;
    }

    .scroll-indicator {
        animation: none;
    }

    .mobile-menu,
    .mobile-menu-content {
        transition: visibility 0.45s, background 0.45s;
    }

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

/* --- Case Study: NAIT --- */
.nait-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 48px;
    margin-top: 64px;
    align-items: start;
}

.nait-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sin borde lateral de color: el énfasis lo carga la cifra, no una pestaña. */
.nait-stat {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 24px 28px;
    transition: transform 0.3s var(--transition-smooth), border-color 0.3s ease;
}

.nait-stat:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.4);
}

.nait-stat:hover {
    transform: translateX(4px);
}

.nait-stat-value {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 6px;
}

.nait-stat-label {
    display: block;
    font-size: var(--text-small);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.nait-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
}

.nait-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--text-primary);
    font-size: var(--text-body);
    line-height: 1.5;
}

.nait-features li svg {
    flex-shrink: 0;
    margin-top: 6px;
}

.nait-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 48px;
}

/* --- NAIT Gallery --- */
.nait-gallery {
    margin-top: 72px;
}

.nait-gallery-main {
    position: relative;
}

.nait-shot {
    margin: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 16px 16px 0;
    overflow: hidden;
    transition: transform 0.5s var(--transition-smooth), border-color 0.4s ease, box-shadow 0.4s ease;
}

.nait-shot:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--brand-primary-rgb), 0.25);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 60px rgba(var(--brand-primary-rgb), 0.06);
}

.nait-shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.nait-shot figcaption {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 14px 4px 16px;
    text-align: center;
}

.nait-shot-hero {
    padding-bottom: 0;
}

/* El teléfono se superpone al portátil a propósito, pero antes estaba anclado
   con `right: -8px; bottom: -32px`: sobresalía 21-26px del contenedor y tapaba
   el figcaption del dashboard (en móvil lo cortaba a "DASHBOARD · RESUMEN DE
   OPE…"). Ahora queda dentro y por encima del caption, nunca sobre él.
   `right` reserva además el ancho extra que la rotación añade a la caja. */
.nait-shot-mobile {
    position: absolute;
    bottom: 62px;
    right: 18px;
    width: 17%;
    max-width: 220px;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-primary);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: rotate(4deg);
    transition: transform 0.5s var(--transition-smooth);
}

.nait-shot-mobile img {
    width: 100%;
    height: auto;
    display: block;
}

.nait-shot-mobile:hover {
    transform: rotate(0deg) translateY(-4px);
}

.nait-gallery-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}

.nait-gallery-note,
.section-note {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* Separada de la reja y del callout que la sigue: es una acotación sobre lo
   que está encima, no una fila más de la sección. */
.section-note {
    margin-top: 32px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.nait-gallery-note svg,
.section-note svg {
    color: var(--accent);
    flex-shrink: 0;
}

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

    .nait-features {
        padding: 24px 24px;
    }

    .nait-gallery {
        margin-top: 56px;
    }

    /* En móvil el overlay no funciona: a 28% de una tarjeta de ~350px el
       teléfono queda en ~95px y encima tapa el caption. Se saca del
       posicionamiento absoluto y pasa a ser su propia figura. */
    .nait-shot-mobile {
        position: static;
        width: 58%;
        max-width: 240px;
        margin: 20px auto 0;
        transform: none;
    }

    .nait-shot-mobile:hover {
        transform: translateY(-4px);
    }

    .nait-gallery-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 32px;
    }

    .nait-shot {
        padding: 10px 10px 0;
        border-radius: 16px;
    }

    .nait-shot figcaption {
        font-size: 0.6875rem;
        padding: 10px 4px 12px;
    }
}

/* --- Case Kanawak (warm/sunset accent) --- */
.case-kanawak {
    --kanawak-gold: #E0A458;
    --kanawak-gold-glow: rgba(var(--kanawak-gold-rgb), 0.18);
    position: relative;
    overflow: hidden;
}

.case-kanawak::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--kanawak-gold-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.case-kanawak > .container {
    position: relative;
    z-index: 1;
}

.case-kanawak .section-label {
    color: var(--kanawak-gold);
}

.case-kanawak-shot {
    position: relative;
    max-width: 1000px;
    margin: 56px auto 64px;
}

.case-kanawak-shot .nait-shot:hover {
    border-color: rgba(var(--kanawak-gold-rgb), 0.3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(var(--kanawak-gold-rgb), 0.1);
}

.case-kanawak-mobile {
    bottom: 62px;
    right: 18px;
    width: 16%;
    transform: rotate(-5deg);
}

.case-kanawak-mobile:hover {
    transform: rotate(0deg) translateY(-4px);
}

.case-kanawak-accent {
    color: var(--kanawak-gold);
}

.case-kanawak .nait-stat:hover {
    border-color: rgba(var(--kanawak-gold-rgb), 0.45);
}

.case-kanawak-features {
    color: var(--text-secondary);
}

.case-kanawak-features li svg {
    color: var(--kanawak-gold);
}

@media (max-width: 768px) {
    .case-kanawak-shot {
        margin: 40px 0 48px;
    }

    .case-kanawak-mobile {
        position: static;
        width: 58%;
        max-width: 240px;
        margin: 20px auto 0;
        transform: none;
    }
}

/* --- Form selects + SLA badge --- */
.contact-form select {
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-field);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-primary);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 48px;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form select:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 20px var(--accent-glow);
}

.contact-form select:invalid {
    color: var(--text-tertiary);
}

.contact-form select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.form-sla {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: var(--text-small);
}

.form-sla svg {
    color: var(--accent);
    flex-shrink: 0;
}

/* --- FAQ --- */
.faq-list {
    max-width: 760px;
    margin: 64px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    transition: border-color 0.3s var(--transition-smooth);
    overflow: hidden;
}

.faq-item[open] {
    border-color: rgba(var(--brand-primary-rgb), 0.3);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
    color: var(--text-primary);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question:hover {
    color: var(--brand-light);
}

.faq-chevron {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.3s var(--transition-smooth), color 0.3s ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--brand-primary);
}

.faq-answer {
    padding: 0 26px 22px;
    color: var(--text-secondary);
    font-size: var(--text-body);
    line-height: 1.65;
}

.faq-answer p {
    margin: 0;
}

/* --- Brief / Lead Magnet --- */
.brief-form {
    max-width: 720px;
    margin: 64px auto 0;
}

.brief-step {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 32px 32px 24px;
    margin-bottom: 16px;
    position: relative;
    transition: border-color 0.3s var(--transition-smooth);
}

.brief-step:hover,
.brief-step:focus-within {
    border-color: rgba(var(--brand-primary-rgb), 0.25);
}

.brief-step-num {
    position: absolute;
    top: -14px;
    left: 28px;
    background: var(--brand-primary);
    color: white;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rótulo del paso. `label` cuando el paso tiene un solo campo;
   `.brief-step-title` cuando rotula un grupo de varios campos
   (ahí el nombre por campo lo dan los .sr-only). */
.brief-step > label,
.brief-step-title {
    display: block;
    color: var(--text-primary);
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 16px;
}

/* --- Progreso del brief --- */
.brief-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}

.brief-progress-text {
    font-size: var(--text-small);
    color: var(--text-tertiary);
}

.brief-progress-track {
    height: 3px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

/* scaleX desde la izquierda: el avance no reflowa nada. */
.brief-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--brand-light);
    transition: transform 0.35s var(--transition-smooth);
}

.brief-form input,
.brief-form textarea,
.brief-form select {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-field);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: var(--font-primary);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.brief-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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;
    padding-right: 44px;
    cursor: pointer;
}

.brief-form input::placeholder,
.brief-form textarea::placeholder {
    color: var(--text-tertiary);
}

.brief-form input:focus,
.brief-form textarea:focus,
.brief-form select:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 16px var(--accent-glow);
}

.brief-form textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.brief-form .form-group {
    margin-bottom: 12px;
}

.brief-form .form-group:last-child {
    margin-bottom: 0;
}

.brief-form .form-row {
    margin-bottom: 12px;
}

.brief-form button[type="submit"] {
    margin-top: 24px;
}

@media (max-width: 768px) {
    .brief-step {
        padding: 28px 22px 20px;
    }

    .brief-step-num {
        left: 22px;
    }
}

/* ============================================
   Inner pages (About, Legal) + bilingual nav
   ============================================ */

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

.lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-glass);
    gap: 2px;
}

.lang-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    transition: color 0.25s ease, background 0.25s ease;
    line-height: 1;
}

.lang-option:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.lang-option[aria-current="true"] {
    color: var(--text-primary);
    background: rgba(var(--brand-primary-rgb), 0.22);
    cursor: default;
}

.lang-option[aria-current="true"]:hover {
    background: rgba(var(--brand-primary-rgb), 0.22);
}

.flag {
    display: block;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    flex: none;
}

/* Mobile language switcher inside hamburger menu */
.mobile-lang {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-glass);
    gap: 2px;
    /* Push the language pill + CTA to the bottom of the drawer so the
       primary action stays reachable above the fold. */
    margin-top: auto;
    margin-bottom: 4px;
    align-self: flex-start;
}

.mobile-lang .lang-option {
    padding: 6px 12px;
    font-size: 0.8125rem;
}

.page {
    padding-top: 96px;
}

.page-hero {
    padding: 64px 0 32px;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto auto;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.page-hero .container,
.page-hero .container.narrow {
    position: relative;
    z-index: 1;
}

.page-title {
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 16px 0 20px;
    max-width: 22ch;
}

.page-subtitle {
    font-size: var(--text-body);
    color: var(--text-secondary);
    max-width: 60ch;
    line-height: 1.6;
}

.container.narrow {
    max-width: 760px;
}

.prose {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.prose a {
    color: var(--brand-light);
    border-bottom: 1px solid rgba(var(--brand-light-rgb), 0.4);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.prose a:hover {
    color: var(--accent-light);
    border-color: var(--accent-light);
}

/* Process / numbered list on About */
.process-list {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    gap: 20px;
}

.process-list li {
    counter-increment: step;
    position: relative;
    padding: 24px 24px 24px 76px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
}

.process-list li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 24px;
    left: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--brand-primary-rgb), 0.18);
    color: var(--accent-light);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
}

.process-list strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.process-list span {
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Legal pages */
.legal-content h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 40px 0 14px;
    scroll-margin-top: 96px;
}

.legal-content h2:first-of-type {
    margin-top: 16px;
}

.legal-content p,
.legal-content li {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 1.0625rem;
}

.legal-content p {
    margin-bottom: 16px;
}

.legal-content ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 18px;
}

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

.legal-content a {
    color: var(--brand-light);
    border-bottom: 1px solid rgba(var(--brand-light-rgb), 0.4);
    transition: color 0.25s ease, border-color 0.25s ease;
}

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

/* Footer nav */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

.footer-nav a {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    transition: color 0.25s ease;
    /* 24px mínimo de objetivo (WCAG 2.5.8); medían 21px. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.footer-nav a:hover {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .nav-actions {
        display: none;
    }

    .page {
        padding-top: 80px;
    }

    .page-hero {
        padding: 40px 0 24px;
    }

    .process-list li {
        padding: 20px 20px 20px 64px;
    }

    .process-list li::before {
        top: 20px;
        left: 20px;
        width: 32px;
        height: 32px;
    }
}


/* Color de los iconos que ahora heredan de currentColor (ver .card-icon). */
.nait-features svg,
.case-kanawak-features svg {
    color: var(--brand-primary);
}

.case-kanawak .case-kanawak-features svg {
    color: var(--kanawak-gold);
}

.pricing-features svg {
    color: var(--accent);
}

.form-success svg {
    color: var(--brand-primary);
}