@charset "UTF-8";

/* ==========================
    TRANSICIONES ENTRE PÁGINAS
    ========================== */
/* El sitio es multipágina: cada clic a un caso era un parpadeo en blanco y un
   salto al inicio del documento. Con esto la navegación entre páginas del mismo
   origen se funde en vez de cortar.

   Requisitos de la API que hay que respetar al tocar esto:
     · La regla @view-transition tiene que estar en las DOS páginas, la que se
       deja y la que se abre. Por eso vive aquí, en la hoja que cargan todas.
     · view-transition-name debe ser único dentro de cada documento. Cada clase
       vt-* aparece una sola vez en index.html (la tarjeta) y una sola vez en su
       página de caso (la imagen del hero). Si se duplica, el navegador descarta
       la transición entera.
     · Donde no está soportada no pasa nada: la navegación es la de siempre. */

@view-transition {
    navigation: auto;
}

/* Fundido general de la página, corto para que no se note como espera */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 260ms;
    animation-timing-function: ease;
}

/* La captura de la tarjeta viaja hasta su posición en el hero del caso.
   No es adorno: le dice al visitante que lo que abrió es lo que tocó. */
::view-transition-group(*) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

.vt-servia-dashboard { view-transition-name: vt-servia-dashboard; }
.vt-rse-plataforma   { view-transition-name: vt-rse-plataforma; }
.vt-rse-store        { view-transition-name: vt-rse-store; }
.vt-bbr-tienda       { view-transition-name: vt-bbr-tienda; }
.vt-bbrny-tienda     { view-transition-name: vt-bbrny-tienda; }
.vt-consultorio      { view-transition-name: vt-consultorio; }

/* La barra flotante no debe parpadear entre páginas: con nombre propio el
   navegador la trata como el mismo elemento y la deja quieta. */
.navbar { view-transition-name: barra-nav; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ==========================
    REINICIO Y VARIABLES
    ========================== */
/* Reinicio de estilos y variables CSS para un diseño consistente */

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

/* Asegura que los iconos animados sean visibles y tengan tamaño adecuado */

:root {
    /* Colores principales - Paleta corporativa profesional */
    --primary-color: #2563eb;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;
    --accent-color: #38bdf8;
    --accent-secondary: #0ea5e9;
    --neon-green: #34d399;
    --neon-pink: #93c5fd;
    --dark-bg: #0d1f3c;
    --darker-bg: #060e1a;
    --card-bg: rgba(13, 31, 60, 0.65);
    --white: #f0f9ff;
    --gray-light: #94a3b8;
    --gray: #64748b;
    --border-subtle: rgba(37, 99, 235, 0.14);
    --border-hover: rgba(59, 130, 246, 0.45);

    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Tipografia */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Orbitron', sans-serif;

    /* Sombras corporativas */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.4);
    --shadow-blue: 0 8px 32px rgba(37, 99, 235, 0.3);
    --shadow-card: 0 4px 24px rgba(37, 99, 235, 0.12), 0 0 1px rgba(37, 99, 235, 0.2);
    --glow-cyan: 0 0 20px rgba(37, 99, 235, 0.3), 0 0 40px rgba(37, 99, 235, 0.1);
    --glow-purple: 0 0 20px rgba(56, 189, 248, 0.25), 0 0 40px rgba(56, 189, 248, 0.1);
    --glow-green: 0 0 20px rgba(52, 211, 153, 0.25);

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-primary);
    color: var(--white);
    background-color: var(--darker-bg);
    line-height: 1.7;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    box-sizing: border-box;
}

/* Clase para ocultar elementos sin afectar el layout.
   OJO: esto oculta a la vista pero NO a los lectores de pantalla. Para retirar
   contenido de verdad hay que borrarlo o usar display:none. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================
    ENLACE DE SALTO AL CONTENIDO
    ========================== */
/* Primer elemento enfocable de la página: con 7 enlaces en el menú, quien navega
   con teclado tendría que recorrerlos todos antes de llegar al contenido.
   Se mantiene fuera de la pantalla hasta que recibe el foco. */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2000;
    transform: translate(-50%, -120%);
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: var(--white);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* ==========================
    ESTILOS GLOBALES
    ========================== */
/* Estilos generales para HTML y body */

/* Anillo de foco visible en todo el sitio. El contorno por defecto del navegador
   es casi invisible sobre el fondo azul oscuro; :focus-visible sólo lo dibuja en
   navegación por teclado, no al hacer clic con el ratón. */
:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ==========================
    BARRA DE NAVEGACIÓN
    ========================== */
/* Estilos para la barra de navegación, incluyendo comportamiento responsivo */

/* La barra flota separada del borde superior. El logo va suelto sobre el hero
   (sin fondo) y solo los enlaces forman la píldora de cristal: el "cristal"
   vive en .nav-links, no en el contenedor. */
.navbar {
    position: fixed;
    top: 1.25rem;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    border: none;
    transition: top var(--transition-base);
    /* Deja pasar los clics por las zonas transparentes de la barra */
    pointer-events: none;
}

.navbar.scrolled {
    top: 0.625rem;
}

.navbar .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* La barra solo contiene la píldora (y el botón en móvil), alineada a la derecha */
.nav-content {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0;
    background: transparent;
    border: none;
}

.nav-content .nav-links,
.nav-content .mobile-menu-btn {
    pointer-events: auto;
}

/* El logo va fuera del <nav>: posicionado sobre la página (no fixed), así se
   queda en el hero y se desplaza con el scroll en lugar de seguir a la barra.
   Reutiliza .container para alinearse con la rejilla del sitio. */
.logo-fijo {
    position: absolute;
    top: 1.25rem;
    left: 0;
    right: 0;
    z-index: 1001;
    pointer-events: none;
}

.logo-fijo .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.logo-fijo .logo {
    display: inline-flex;
    pointer-events: auto;
    text-decoration: none;
    color: inherit;
}

/* Sin panel detrás, el logo se apoya en el hero: la sombra lo despega del fondo */
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: 0;
    text-shadow: 0 2px 12px rgba(3, 7, 18, 0.75);
}

/* El logo es un PNG blanco sobre transparente: se apoya directo en el fondo
   oscuro, sin la caja blanca que dejaba el JPEG original recortado. */
.logo-image {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-right: 0.4rem;
    transition: transform var(--transition-base), filter var(--transition-base);
    filter: drop-shadow(0 2px 8px rgba(3, 7, 18, 0.6));
}

.logo-image:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 2px 12px rgba(59, 130, 246, 0.45));
}

.logo-bracket {
    color: var(--primary-light);
    font-weight: 700;
}

.logo-text {
    color: var(--white);
    font-family: var(--font-heading);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    align-items: center;
}

/* La píldora de cristal: solo en escritorio. Por debajo de 1025px la misma
   lista se convierte en el panel desplegable (ver DISEÑO RESPONSIVO). */
@media (min-width: 1025px) {
    .nav-links {
        padding: 0.6rem 0.7rem;
        border-radius: 999px;
        background: rgba(6, 10, 20, 0.72);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        border: 1px solid rgba(14, 165, 233, 0.10);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    }

    .navbar.scrolled .nav-links {
        background: rgba(6, 10, 20, 0.9);
        border-color: rgba(14, 165, 233, 0.22);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(14, 165, 233, 0.06);
    }
}

/* Con 7 entradas el menú roza el ancho disponible justo antes del breakpoint móvil */
@media (min-width: 1025px) and (max-width: 1180px) {
    .nav-links {
        gap: 0;
    }

    .nav-links a {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

/* Dentro de la píldora los enlaces son a su vez píldoras: el subrayado
   tradicional chocaría con el borde redondeado de la barra */
.nav-links a {
    position: relative;
    /* inline-flex y no inline: si no, el padding vertical se pinta pero no
       cuenta para la altura, y la píldora no engorda */
    display: inline-flex;
    align-items: center;
    color: var(--gray-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color var(--transition-fast), background var(--transition-fast);
    padding: 0.6rem 0.95rem;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.nav-links a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}

.nav-links a.active {
    color: var(--primary-light);
    background: rgba(14, 165, 233, 0.12);
}

/* Punto indicador bajo la sección activa */
.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 0.15rem;
    left: 50%;
    width: 4px;
    height: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    animation: navDotIn 0.3s ease-out;
}

@keyframes navDotIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

.btn-nav {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    padding: 0.6rem 1.35rem !important;
    border-radius: 999px;
    /* Explícito en vez de `all`: `all` obliga al navegador a vigilar cada
       propiedad calculada del elemento, y basta con que alguna de ellas cambie
       (el color heredado, el ancho al cambiar de idioma) para disparar una
       transición que nadie pidió. */
    transition: background var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    font-size: 0.875rem;
    color: #ffffff !important;
    font-weight: 600;
}

.btn-nav:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--glow-cyan);
}

.btn-nav.active,
.nav-links a.active.btn-nav {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

/* El botón de contacto no lleva el punto indicador */
.nav-links a.active.btn-nav::after {
    display: none;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    /* Flota solo, así que lleva su propio cristal en vez de apoyarse en la barra */
    background: rgba(6, 10, 20, 0.72);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 999px;
    cursor: pointer;
    padding: 10px;
    width: 46px;
    height: 46px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-base);
}

.mobile-menu-btn:hover {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.05);
}

.mobile-menu-btn:active {
    transform: scale(0.95);
}

.mobile-menu-btn span {
    width: 24px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-light));
    border-radius: 3px;
    /* Las tres barras se convierten en aspa: sólo se mueven y rotan */
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                top 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: absolute;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.mobile-menu-btn span:nth-child(1) {
    top: 12px;
}

.mobile-menu-btn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.mobile-menu-btn span:nth-child(3) {
    bottom: 12px;
}

/* Animación cuando el menú está activo */
.mobile-menu-btn.active {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.15);
}

.mobile-menu-btn.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scale(0);
}

.mobile-menu-btn.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* ==========================
    SECCIÓN HERO
    ========================== */
/* Estilos para la sección principal (hero), incluyendo animaciones y diseño responsivo */

.hero {
    position: relative;
    /* 100vh salta en móvil al mostrarse y ocultarse la barra del navegador;
       svh usa la altura pequeña (barra visible) y no provoca ese reajuste. */
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    /* Deja aire bajo la barra flotante (1.25rem de separación + alto de la píldora) */
    padding-top: 110px;
    padding-bottom: 0;
    overflow: hidden;
    margin-bottom: 0;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(160deg, var(--darker-bg) 0%, rgba(37, 99, 235, 0.1) 30%, rgba(56, 189, 248, 0.06) 60%, var(--darker-bg) 100%);
    opacity: 1;
    /* Decorativo: hoy no estorba porque .hero .container tiene z-index, pero es
       la misma trampa esperando a que alguien saque un enlace del contenedor. */
    pointer-events: none;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Decorativo, como su contenedor: no intercepta clics */
    pointer-events: none;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 30s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

@media (max-width: 968px) {
    .hero .container {
        grid-template-columns: 1fr;
    }
}

.hero-content {
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    word-wrap: break-word;
    overflow-wrap: break-word;
    letter-spacing: -0.03em;
    font-family: var(--font-heading);
}

.hero-title-line {
    display: block;
    /* Orbitron es muy ancho y el titular parte en dos renglones. Sin balance,
       "Sitios web y software" corta dejando la "y" colgada al final de línea. */
    text-wrap: balance;
}

.hero-title .accent {
    background: linear-gradient(90deg, var(--primary-light), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--gray-light);
    margin-bottom: var(--spacing-lg);
    max-width: 540px;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* inline-flex con gap: los botones que llevan icono + texto se alinean solos,
   sin necesidad de atributos style= en el HTML */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    /* `gap` entra en la lista para que el icono se separe del texto al pasar el
       cursor: el hueco crece, no se desplaza el icono. Es un reflujo mínimo,
       acotado al propio botón, y a cambio el texto no se queda atrás. */
    transition: background var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base),
                box-shadow var(--transition-base),
                transform var(--transition-base),
                gap var(--transition-base);
    cursor: pointer;
    border: none;
    font-size: 0.938rem;
    letter-spacing: 0.01em;
}

/* Los iconos dentro de un botón heredan el tamaño del texto */
.btn .bi {
    font-size: 1.05em;
    line-height: 1;
}

/* El hueco se abre sólo donde la flecha apunta hacia adelante: en los botones
   que sólo llevan un icono decorativo delante, moverlo no dice nada. */
.btn:hover .bi-arrow-right {
    /* El desplazamiento vive en el icono y el hueco en el contenedor; juntos dan
       el empujón sin que el texto se descoloque. */
    transform: translateX(2px);
}

.btn .bi-arrow-right {
    transition: transform var(--transition-base);
}

.btn-primary:hover,
.btn-secondary:hover {
    gap: 0.75rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--accent-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(14, 165, 233, 0.5), 0 0 40px rgba(168, 85, 247, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-light);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.btn-secondary:hover {
    background: rgba(14, 165, 233, 0.05);
    border-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--glow-cyan);
}

.btn-large {
    padding: 1.25rem 3rem;
    font-size: 1.125rem;
    width: 100%;
}

/* Code Window */
.hero-visual {
    animation: fadeInRight 1s ease 0.3s both;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.code-window {
    background-color: rgba(6, 10, 20, 0.95);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl), 0 0 30px rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.15);
    width: 100%;
    max-width: 100%;
    animation: borderGlow 4s ease-in-out infinite;
}

.window-header {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.window-dots {
    display: flex;
    gap: 0.5rem;
}

.window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--gray);
}

.window-dots span:nth-child(1) { background-color: #ef4444; }
.window-dots span:nth-child(2) { background-color: #f59e0b; }
.window-dots span:nth-child(3) { background-color: #10b981; }

.code-content {
    padding: 2rem;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.8;
    overflow-x: auto;
    max-width: 100%;
}

/* Cursor de la máquina de escribir. La clase la pone y la quita el JS mientras
   dura la escritura; con movimiento reducido nunca llega a ponerse.
   Es `inline-block` con ancho fijo y va detrás del último carácter, así que
   parpadear no mueve nada de lo que tiene alrededor. */
.code-content code.escribiendo::after {
    content: '';
    display: inline-block;
    width: 0.6ch;
    height: 1.05em;
    margin-left: 0.1ch;
    vertical-align: text-bottom;
    background: var(--accent-color);
    animation: cursorEscritura 0.9s steps(1) infinite;
}

@keyframes cursorEscritura {
    0%, 45%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.code-keyword { color: #c678dd; }
.code-variable { color: #e06c75; }
.code-property { color: #61afef; }
.code-string { color: #98c379; }

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    display: block;
    width: 30px;
    height: 50px;
    border: 2px solid var(--accent-color);
    border-radius: 25px;
    position: relative;
}

.scroll-indicator span::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--accent-color);
    border-radius: 50%;
    animation: scrollDot 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

@keyframes scrollDot {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* El hero acumula varias animaciones a la vez (rejilla, entrada, indicador de
   scroll, brillo del borde). Con movimiento reducido se detienen todas; las
   partículas del canvas y la máquina de escribir se desactivan desde el JS. */
@media (prefers-reduced-motion: reduce) {
    .hero-background::before,
    .scroll-indicator,
    .scroll-indicator span::before,
    .code-window {
        animation: none;
    }

    .hero-content,
    .hero-visual {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Estilos generales de secciones */
section {
    padding: var(--spacing-xl) 0;
    width: 100%;
    overflow-x: hidden;
}

/* La primera sección (servicios) no tiene margen superior */
/* Sin padding-top aquí a propósito: el valor era el mismo que el de `section`,
   pero la especificidad extra de :first-of-type le ganaba a los heroes de cada
   página (.hero, .process-hero, .legal-hero, .case-hero) y les anulaba el
   espacio reservado para la barra flotante. */
section:first-of-type {
    margin-top: 0;
}

section:last-of-type {
    margin-bottom: 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    font-family: var(--font-heading);
    background: linear-gradient(135deg, var(--primary-light), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 1.063rem;
    color: var(--gray);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ==========================
    SECCIÓN SERVICIOS
    ========================== */
/* Estilos para la sección de servicios, incluyendo tarjetas y efectos hover */

.services {
    background-color: var(--dark-bg);
    overflow: hidden;
}

/* ===== REJILLA DE SERVICIOS ===== */
/* Antes era un carrusel 3D: cuatro servicios y solo uno visible, los otros tres
   borrosos, sin clics y con autoplay cada 5 segundos. Ahora los cuatro se ven,
   se pueden enlazar y los indexa el buscador.
   auto-fit + minmax reparte solo: cuatro columnas en escritorio, dos en tableta
   y una en movil, sin una sola media query. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-md);
    align-items: stretch;
}

.service-card {
    background-color: var(--card-bg);
    padding: 2rem 1.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    /* 0.8s venía del carrusel, donde la tarjeta viajaba por el espacio. Para un
       hover normal es lentísimo: se siente pegajoso. */
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base),
                transform var(--transition-base);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.service-card-top {
    flex: 1;
}

.service-card-bottom {
    margin-top: auto;
}

/* Filo superior que se traza de izquierda a derecha al pasar el cursor. Es la
   misma idea que la línea de .feature-box y el borde de .value-card: la tarjeta
   señalada se subraya sola. Va con scaleX sobre una barra ya dibujada, no
   animando `width`, para que el navegador no tenga que rehacer el diseño. */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
}

.service-card:hover::before,
.service-card:focus-within::before {
    transform: scaleX(1);
}

.service-card:hover {
    border-color: rgba(14, 165, 233, 0.4);
    transform: translateY(-4px);
    box-shadow: var(--glow-cyan), 0 18px 40px -20px rgba(0, 0, 0, 0.6);
}

/* Precio de arranque. Filtra visitantes antes de que escriban: quien no puede
   pagarlo no pide cotización, y quien sí, llega sabiendo de qué se habla. */
.service-price {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 0.6rem;
    font-variant-numeric: tabular-nums;
}

.service-price .price-desde {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-light);
    margin-bottom: 0.1rem;
}

/* Alcance y plazo: la señal de tamaño que antes no daba ninguna tarjeta */
.service-meta {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin: 0.45rem 0 0.75rem;
}

.service-card.featured {
    border-color: rgba(168, 85, 247, 0.2);
    background-color: rgba(29, 78, 216, 0.06);
}

.service-card.featured:hover {
    box-shadow: var(--glow-purple);
}

.featured-badge {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    color: var(--white);
    padding: 0.3rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.service-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--white);
}

.service-icon svg {
    width: 28px;
    height: 28px;
    color: var(--white);
}

.service-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--white);
    font-family: var(--font-heading);
}

.service-card > p,
.service-card-top > p {
    color: var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.service-features {
    list-style: none;
    margin: 0.75rem 0 1rem;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.75rem;
}

.service-features li {
    padding: 0.35rem 0;
    color: var(--gray-light);
    position: relative;
    padding-left: 0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.service-features li .bi-check-circle-fill {
    color: var(--accent-color);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* CTA del servicio */
.service-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 2rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: var(--primary-light);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base),
                transform var(--transition-base),
                color var(--transition-base);
    width: 100%;
    justify-content: center;
}

.service-cta:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(168, 85, 247, 0.2));
    border-color: rgba(14, 165, 233, 0.6);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
    transform: translateY(-2px);
    color: var(--white);
}

.service-cta .bi-arrow-right {
    transition: transform 0.3s ease;
}

.service-cta:hover .bi-arrow-right {
    transform: translateX(4px);
}

.service-cta-featured {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(14, 165, 233, 0.15));
    border-color: rgba(168, 85, 247, 0.4);
    color: var(--accent-color);
}

.service-cta-featured:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(14, 165, 233, 0.25));
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.25);
    color: var(--white);
}

/* ==========================
    SECCIÓN PRODUCTO PROPIO (SERVIA)
    ========================== */
/* Banda ancha que presenta el producto propio, distinta de las tarjetas de servicios */

/* Degradado invertido desde que la banda subió a segunda posición: el hero
   termina en --darker-bg y "Sobre Nosotros" empieza en --dark-bg, así que va
   de uno al otro y no deja corte de color entre secciones. */
.product-band {
    background: linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
    position: relative;
    overflow: hidden;
}

.product-band::before {
    content: '';
    position: absolute;
    top: -25%;
    left: -8%;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.10) 0%, transparent 65%);
    pointer-events: none;
}

.pd-grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* minmax(0,…) evita que el contenido con nowrap de la maqueta ensanche el grid */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: center;
}

.pd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--neon-green);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.pd-title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, var(--primary-light), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pd-tagline {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.45;
    margin-bottom: var(--spacing-sm);
}

.pd-text {
    color: var(--gray-light);
    font-size: 0.98rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.pd-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--spacing-md);
}

.pd-flow i {
    color: var(--gray);
    font-size: 0.8rem;
}

.pd-flow-step {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 600;
}

.pd-highlights {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin-bottom: var(--spacing-md);
}

.pd-highlights li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--gray-light);
    font-size: 0.9rem;
}

.pd-highlights i {
    color: var(--accent-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.pd-cta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Captura real del sistema */
.pd-captura {
    display: block;
    background: rgba(6, 14, 26, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), var(--glow-cyan);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
    transition: transform var(--transition-slow), border-color var(--transition-base);
}

.pd-captura:hover {
    transform: perspective(1400px) rotateY(0deg) rotateX(0deg);
    border-color: var(--border-hover);
}

.pd-captura img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 968px) {
    .pd-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-md);
    }

    .pd-captura {
        transform: none;
    }
}

@media (max-width: 560px) {
    .pd-highlights {
        grid-template-columns: 1fr;
    }

    .pd-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================
    SECCIÓN PORTAFOLIO
    ========================== */
/* Estilos para la sección de portafolio, incluyendo grid y efectos hover */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--spacing-md);
    width: 100%;
}

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

/* La tarjeta ya no es sólo una imagen con una capa encima: la imagen va arriba
   y el texto debajo, siempre visible. Antes el título y la descripción vivían
   en .portfolio-overlay, que sólo aparecía al pasar el ratón: en móvil no hay
   hover y quien navega con teclado tampoco los veía nunca. */
.portfolio-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-subtle);
    background: var(--card-bg);
    display: flex;
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.portfolio-item:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card);
}

.portfolio-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.portfolio-image {
    width: 100%;
    /* height:auto es imprescindible: el atributo height="900" del HTML fija la
       altura y gana sobre aspect-ratio, con lo que la tarjeta salía de 900px de
       alto en vez de recortar a 16:10. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-bottom: 1px solid var(--border-subtle);
    transition: transform var(--transition-slow);
}

@media (hover: hover) {
    .portfolio-item:hover .portfolio-image {
        transform: scale(1.03);
    }
}

.portfolio-body {
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.portfolio-body h3 {
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--white);
}

.portfolio-body p {
    color: var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.55;
    flex: 1;
}

.portfolio-tags-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.portfolio-tag {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.portfolio-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
}

.portfolio-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.portfolio-btn:hover::before {
    left: 100%;
}

.portfolio-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue);
    background: var(--primary-light);
}

.portfolio-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-base);
}

.portfolio-btn:hover svg {
    transform: translate(3px, -3px);
}

/* ==========================
    SECCIÓN SOBRE NOSOTROS
    ========================== */
/* Estilos para la sección sobre nosotros, incluyendo estadísticas, terminal y features */

.about {
    background-color: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.about-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
    pointer-events: none;
}

.about .container {
    position: relative;
    z-index: 1;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-xl);
}

.about-text p {
    color: var(--gray-light);
    margin-bottom: var(--spacing-md);
    font-size: 1.125rem;
    line-height: 1.8;
}

/* Terminal */
.about-terminal {
    background: rgba(10, 15, 30, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid var(--border-subtle);
}

.terminal-dots {
    display: flex;
    gap: 6px;
}

.terminal-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-dots span:nth-child(1) { background: #ef4444; }
.terminal-dots span:nth-child(2) { background: #f59e0b; }
.terminal-dots span:nth-child(3) { background: #22c55e; }

.terminal-title {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    color: var(--gray);
    letter-spacing: 0.05em;
}

.terminal-body {
    padding: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.8;
}

.terminal-body code {
    font-family: inherit;
}

.t-prompt { color: #22c55e; font-weight: 700; }
.t-cmd { color: var(--primary-light); font-weight: 600; }
.t-key { color: var(--accent-color); }
.t-str { color: #fbbf24; }
.t-val { color: #22d3ee; font-weight: 700; }
.t-arr { color: var(--gray-light); }
.t-success { color: #4ade80; }
.t-muted { color: var(--gray); }

/* Stats */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* Relleno lateral reducido de 4rem a 2rem: los rótulos pasaron de una palabra
       ("Compromiso") a una frase ("Producto propio en producción") y necesitan
       el ancho que antes se iba en aire. */
    padding: var(--spacing-md);
    background: rgba(14, 165, 233, 0.04);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.stat:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--glow-cyan);
}

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

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(168, 85, 247, 0.1));
    color: var(--primary-light);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
    /* Sin esto un rótulo largo empuja la tarjeta en vez de partirse */
    min-width: 0;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-family: var(--font-heading);
    /* Las cifras se animan: con tabular-nums la caja no baila al cambiar de dígito */
    font-variant-numeric: tabular-nums;
}

/* La unidad ("h") acompaña al número sin competir con él */
.stat-unit {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--gray-light);
    margin-left: 0.15em;
}

.stat-label {
    color: var(--gray-light);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Las etiquetas nuevas son más largas ("Producto propio en producción") */
    line-height: 1.35;
}

/* Features Grid */
.about-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.feature-box {
    padding: var(--spacing-lg);
    background: rgba(14, 165, 233, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.feature-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.06) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.feature-box:hover {
    transform: translateY(-6px);
    border-color: var(--primary-color);
    box-shadow: var(--glow-cyan);
}

.feature-box:hover::after {
    opacity: 1;
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25);
    position: relative;
    z-index: 1;
}

.feature-box h4 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    color: var(--white);
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.feature-box p {
    color: var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* ==========================
    SECCIÓN IDENTIDAD CORPORATIVA
    ========================== */
/* Estilos para misión, visión y valores de la empresa */

/* Sección propia desde que se sacó de dentro de "Sobre Nosotros". Hereda el
   padding vertical de `section`; sólo necesita fondo y separación de cabecera.
   El degradado encadena con las vecinas: testimonios termina en --darker-bg y
   la banda de WhatsApp empieza en --dark-bg, así que va de uno al otro y no
   deja un corte de color entre secciones. */
.identity {
    background: linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
    position: relative;
}

.identity .section-header {
    margin-bottom: var(--spacing-xl);
}

/* Misión y Visión Grid */
.mv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.mv-card {
    background: rgba(14, 165, 233, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.mv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.mission-card::before {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.vision-card::before {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.mv-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card);
}

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

.mv-icon-wrap {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.mission-card .mv-icon-wrap {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.vision-card .mv-icon-wrap {
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary-light);
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.mv-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.mv-card p {
    color: var(--gray-light);
    line-height: 1.8;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.mission-card {
    border-left: 3px solid #f59e0b;
}

.vision-card {
    border-left: 3px solid var(--primary-light);
}

/* Valores Section */
.values-section {
    margin-top: var(--spacing-xl);
}

.values-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.values-icon-wrap {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(14, 165, 233, 0.1));
    color: var(--accent-color);
    font-size: 1.5rem;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.values-header h3 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(90deg, var(--white), var(--gray-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.values-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.25rem;
}

.value-card {
    flex: 1 1 0;
    min-width: 210px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(168, 85, 247, 0.04) 0%, var(--card-bg) 55%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.35rem 1.4rem;
    position: relative;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.35s ease,
                box-shadow 0.45s ease,
                background 0.45s ease;
    overflow: hidden;
    isolation: isolate;
}

/* Línea lateral que crece de forma elegante */
.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
    transition: height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2;
}

/* Halo radial sutil que aparece al pasar */
.value-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(168, 85, 247, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

.value-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-hover);
    box-shadow: 0 14px 40px -18px rgba(168, 85, 247, 0.55),
                0 0 0 1px rgba(168, 85, 247, 0.18);
}

.value-card:hover::before {
    height: 100%;
}

.value-card:hover::after {
    opacity: 1;
}

.value-number {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    font-size: 2.25rem;
    font-weight: 800;
    color: rgba(168, 85, 247, 0.10);
    font-family: var(--font-heading);
    line-height: 1;
    letter-spacing: -0.04em;
    transition: color 0.45s ease, transform 0.45s ease;
    z-index: 1;
}

.value-card:hover .value-number {
    color: rgba(168, 85, 247, 0.28);
    transform: scale(1.08) translateY(-2px);
}

.value-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0.06));
    color: var(--accent-color);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(168, 85, 247, 0.22);
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.45s ease,
                background 0.45s ease;
}

.value-card:hover .value-icon {
    transform: translateY(-2px) rotate(-4deg) scale(1.06);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(168, 85, 247, 0.12));
    box-shadow: 0 8px 22px -10px rgba(168, 85, 247, 0.65);
}

.value-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 0.5rem;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
}

.value-card p {
    color: var(--gray-light);
    line-height: 1.6;
    font-size: 0.85rem;
    margin: 0;
    position: relative;
    z-index: 1;
    flex: 1;
}

/* ==========================
    SECCIÓN CONTACTO
    ========================== */
/* Estilos para la sección de contacto, incluyendo formularios y cajas de información */

.contact {
    position: relative;
    background: linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 55%, var(--darker-bg) 100%);
    overflow: hidden;
}

/* Fondo decorativo: halo de luz + rejilla técnica difuminada */
.contact-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(37, 99, 235, 0.16), transparent 70%),
        radial-gradient(45% 45% at 88% 92%, rgba(56, 189, 248, 0.10), transparent 70%);
}

.contact-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 100%);
    mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 100%);
    pointer-events: none;
}

.contact .container {
    position: relative;
    z-index: 1;
}

/* Etiqueta superior con indicador de disponibilidad */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
    padding: 0.4rem 1rem 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(37, 99, 235, 0.08);
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.eyebrow-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.9);
    animation: eyebrowPulse 2.4s ease-in-out infinite;
}

@keyframes eyebrowPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}

.contact-content {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--spacing-md);
    align-items: start;
    width: 100%;
}

.contact-form {
    position: relative;
    background: linear-gradient(165deg, rgba(37, 99, 235, 0.07) 0%, var(--card-bg) 45%);
    padding: 2.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Filo luminoso superior de la tarjeta */
.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55), transparent);
}

.contact-form-header {
    margin-bottom: 1.75rem;
}

.contact-form-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}

.contact-form-note {
    margin: 0;
    color: var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.6;
}

.contact-form .form-row {
    gap: 1.1rem;
}

/* ----- Campos con etiqueta flotante ----- */
.form-field {
    position: relative;
    margin-bottom: 1.1rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    max-width: 100%;
    padding: 1.6rem 1rem 0.55rem;
    background-color: rgba(6, 10, 20, 0.55);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--white);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    line-height: 1.35;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
    border-color: rgba(59, 130, 246, 0.32);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.55);
    background-color: rgba(6, 10, 20, 0.82);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.form-field label {
    position: absolute;
    top: 1.1rem;
    left: 1rem;
    color: var(--gray-light);
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 400;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.18s ease, color 0.18s ease;
}

.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label,
.form-field select:focus ~ label,
.form-field select:valid ~ label {
    transform: translateY(-0.72rem) scale(0.76);
    color: var(--accent-color);
}

.field-optional {
    color: var(--gray);
    font-size: 0.82em;
}

/* Área de texto */
.form-field-textarea textarea {
    padding-top: 1.75rem;
    min-height: 150px;
    resize: vertical;
}

.form-field-textarea label {
    top: 1.15rem;
}

/* Selector con flecha personalizada */
.form-field-select select {
    padding-right: 2.75rem;
    cursor: pointer;
}

.form-field select option {
    background-color: #0b1526;
    color: var(--white);
}

.select-caret {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--gray-light);
    font-size: 0.85rem;
    pointer-events: none;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.form-field-select select:focus ~ .select-caret {
    color: var(--accent-color);
    transform: translateY(-50%) rotate(180deg);
}

/* Evita que el autocompletado del navegador rompa el tema oscuro */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus,
.form-field textarea:-webkit-autofill,
.form-field select:-webkit-autofill {
    -webkit-text-fill-color: var(--white);
    -webkit-box-shadow: 0 0 0 1000px rgba(9, 15, 28, 0.98) inset;
    caret-color: var(--white);
    transition: background-color 9999s ease-in-out 0s;
}

/* Botón de envío */
.contact-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.35rem;
    padding: 1.05rem 2rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.contact-submit .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.contact-submit .btn-text i {
    transition: transform var(--transition-base);
}

.contact-submit:hover .btn-text i {
    transform: translateX(4px);
}

/* Destello que recorre el botón al pasar el cursor */
.contact-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
    pointer-events: none;
}

.contact-submit:hover::after {
    left: 140%;
}

.form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--gray);
    text-align: center;
}

.form-privacy i {
    color: var(--neon-green);
    font-size: 0.95rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--gray-light);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.875rem 1rem;
    background-color: rgba(6, 10, 20, 0.6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: var(--font-primary);
    font-size: 0.938rem;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
    background-color: rgba(6, 10, 20, 0.8);
}

.form-group textarea {
    resize: vertical;
}

/* Estilos para mensajes de estado del formulario */
.form-status {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: var(--spacing-md);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-status.success {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.form-status.error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Estilos para el botón con loader */
.btn-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 20px;
    height: 20px;
    animation: rotate 1s linear infinite;
}

.spinner circle {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Indicador de disponibilidad */
.contact-availability {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(52, 211, 153, 0.22);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.10), rgba(52, 211, 153, 0.02));
}

.availability-dot {
    position: relative;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.8);
}

.availability-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--neon-green);
    animation: availabilityPing 2.2s ease-out infinite;
    pointer-events: none;
}

@keyframes availabilityPing {
    0% { transform: scale(1); opacity: 0.65; }
    100% { transform: scale(3); opacity: 0; }
}

.availability-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.availability-text strong {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
}

.availability-text span {
    color: var(--gray-light);
    font-size: 0.8rem;
}

/* Canales de contacto */
.info-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.05) 0%, var(--card-bg) 60%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.3s ease, box-shadow 0.35s ease, background 0.35s ease;
}

/* Línea lateral que crece al pasar el cursor */
.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
    transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2;
}

a.info-box:hover {
    border-color: var(--border-hover);
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.11) 0%, var(--card-bg) 60%);
    box-shadow: 0 14px 34px -20px rgba(37, 99, 235, 0.7),
                0 0 0 1px rgba(59, 130, 246, 0.15);
}

a.info-box:hover::before {
    height: 100%;
}

a.info-box:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.info-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(56, 189, 248, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--accent-color);
    font-size: 1.15rem;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.35s ease,
                box-shadow 0.35s ease;
}

/* Venía de un <style> suelto en el head de index.html */
.info-icon .bi {
    font-size: 1.5rem;
}

a.info-box:hover .info-icon {
    transform: translateY(-2px) scale(1.06);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(56, 189, 248, 0.14));
    box-shadow: 0 8px 20px -10px rgba(56, 189, 248, 0.75);
}

.info-icon-whatsapp {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.20), rgba(37, 211, 102, 0.05));
    border-color: rgba(37, 211, 102, 0.28);
    color: #25d366;
}

a.info-box:hover .info-icon-whatsapp {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.34), rgba(37, 211, 102, 0.10));
    box-shadow: 0 8px 20px -10px rgba(37, 211, 102, 0.75);
}

.info-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.info-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
}

.info-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    overflow-wrap: anywhere;
}

.info-arrow {
    margin-left: auto;
    font-size: 0.95rem;
    color: var(--gray);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

a.info-box:hover .info-arrow {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--accent-color);
}

.info-box-static {
    cursor: default;
}

/* Tarjeta "qué sigue" que cierra la columna de contacto */
.contact-next {
    margin-top: 0.25rem;
    padding: 1.35rem 1.4rem;
    border-radius: var(--radius-md);
    border: 1px dashed rgba(59, 130, 246, 0.28);
    background: rgba(13, 31, 60, 0.35);
}

.contact-next-title {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.contact-next-steps {
    counter-reset: contact-step;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.contact-next-steps li {
    counter-increment: contact-step;
    position: relative;
    padding-left: 2rem;
    color: var(--gray-light);
    font-size: 0.855rem;
    line-height: 1.5;
}

.contact-next-steps li::before {
    content: counter(contact-step);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: var(--accent-color);
    font-size: 0.68rem;
    font-weight: 700;
}

.contact-next-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary-light);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.contact-next-link:hover {
    color: var(--accent-color);
    gap: 0.65rem;
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .eyebrow-pulse,
    .availability-dot::after {
        animation: none;
    }

    .contact-submit::after {
        display: none;
    }
}

/* ==========================
    TESTIMONIOS
    ========================== */
/* Estilos para la sección de testimonios con diseño moderno y elegante */

.testimonials {
    padding: var(--spacing-xl) 0;
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
    position: relative;
    overflow: hidden;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(29, 78, 216, 0.06), transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(59, 130, 246, 0.04), transparent 50%);
    pointer-events: none;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    position: relative;
    z-index: 1;
    justify-items: center;
}

/* Con un solo testimonio la rejilla lo estiraria a los 1200px del contenedor y
   la cita quedaria en un renglon larguisimo. Al haber dos o tres, esta regla
   deja de aplicar sola y vuelven las columnas. */
.testimonials-grid:has(> :only-child) {
    max-width: 680px;
    margin-inline: auto;
}

.testimonial-card {
    background: var(--card-bg);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Sin aspect-ratio fijo: la tarjeta la marca su contenido, no un cuadrado.
       Con la proporcion 1/1.1 anterior, una cita larga se desbordaba. */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card);
}

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

.testimonial-stars {
    display: flex;
    gap: 0.25rem;
    color: #fbbf24;
}

.testimonial-stars .bi {
    font-size: 1rem;
}

.testimonial-text {
    color: var(--white);
    line-height: 1.75;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    margin: 0;
    /* La comilla decorativa va en CSS, no como caracter en el HTML: antes era
       texto real y el lector de pantalla la anunciaba. */
    padding-left: 2.25rem;
}

.testimonial-text::before {
    content: "“";
    position: absolute;
    left: 0;
    top: -0.75rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.25;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    margin-top: auto;
}

/* Iniciales en vez del mismo icono generico de persona repetido en cada tarjeta */
.author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    font-family: var(--font-heading);
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.author-name {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
}

.author-role {
    color: var(--accent-color);
    font-size: 0.875rem;
}

/* El enlace al caso de estudio es lo que hace comprobable el testimonio */
.testimonial-proof {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    color: var(--primary-light);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.testimonial-proof:hover {
    color: var(--accent-color);
    gap: 0.65rem;
}

/* ==========================
    PIE DE PÁGINA
    ========================== */
/* Estilos para el footer, incluyendo diseño responsivo */

.footer {
    position: relative;
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
    padding: 0;
    margin-top: 0;
}

.footer-wave {
    position: relative;
    width: 100%;
    height: 80px;
    margin-bottom: -1px;
    overflow: hidden;
}

.footer-wave svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    fill: var(--dark-bg);
}

.footer .container {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.footer-brand {
    max-width: 400px;
}

.footer-brand .logo {
    margin-bottom: var(--spacing-md);
}

.footer-description {
    color: var(--gray-light);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray-light);
    font-size: 0.9rem;
}

.footer-contact-item svg {
    width: 18px;
    height: 18px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.footer-section h4 {
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    border-radius: 2px;
}

.footer-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-section li a {
    color: var(--gray-light);
    text-decoration: none;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    position: relative;
    padding-left: 0;
}

.footer-section li a::before {
    content: '→';
    opacity: 0;
    margin-right: 0.5rem;
    transition: opacity var(--transition-fast);
    color: var(--accent-color);
}

.footer-section li a:hover {
    color: var(--accent-color);
    padding-left: 0.5rem;
}

.footer-section li a:hover::before {
    opacity: 1;
}

.footer-social-text {
    color: var(--gray);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

/* Accesos directos del pie. Sustituyen a los cinco iconos de redes sociales
   que no llevaban a ninguna parte: en vez de prometer presencia inexistente,
   se ofrecen los dos canales que sí funcionan. */
.footer-directo {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.footer-directo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: rgba(29, 78, 216, 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--gray-light);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background var(--transition-fast);
}

.footer-directo-btn:hover {
    color: var(--white);
    border-color: var(--border-hover);
    background: rgba(29, 78, 216, 0.16);
}

.footer-directo-btn .bi {
    font-size: 1rem;
    line-height: 1;
}








.footer-newsletter {
    margin-top: var(--spacing-md);
}

.footer-newsletter h5 {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.footer-newsletter p {
    color: var(--gray);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--spacing-sm);
}

.newsletter-form input {
    flex: 1;
    padding: 0.75rem 1rem;
    background-color: rgba(6, 10, 20, 0.6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary-light);
    background-color: rgba(6, 10, 20, 0.8);
}

.newsletter-form input::placeholder {
    color: var(--gray);
}

.newsletter-form button {
    padding: 0.75rem 1rem;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--white);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-form button:hover {
    transform: translateY(-1px);
    background: var(--primary-light);
    box-shadow: var(--shadow-blue);
}

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

.newsletter-spinner {
    animation: rotate 1s linear infinite;
}

.newsletter-spinner circle {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
}

.newsletter-status {
    margin-top: var(--spacing-sm);
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.newsletter-status.success {
    background-color: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.newsletter-status.error {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.footer-bottom {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--spacing-md);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.footer-bottom p {
    color: var(--gray);
    font-size: 0.9rem;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: var(--gray);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--accent-color);
}

.footer-bottom-links .separator {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
}

/* ==========================
    BOTÓN FLOTANTE WHATSAPP
    ========================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
    z-index: 1000;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
    animation: bounce-in 0.8s ease-out;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}

.whatsapp-float svg {
    width: 28px;
    height: 28px;
    fill: white;
}

.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background: #128C7E;
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base),
                visibility var(--transition-base),
                right var(--transition-base);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: #128C7E;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    right: 80px;
}

@keyframes bounce-in {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes pulse-whatsapp {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 8px 35px rgba(37, 211, 102, 0.7), 0 0 0 15px rgba(37, 211, 102, 0.1);
    }
}

@keyframes neonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes borderGlow {
    0%, 100% { border-color: rgba(37, 99, 235, 0.2); }
    50% { border-color: rgba(59, 130, 246, 0.4); }
}

/* Boton volver arriba */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 6rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: var(--primary-light);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    /* Sale desde abajo en vez de sólo aparecer: al ser un botón que se asoma
       cuando ya llevas media página, el desplazamiento explica de dónde viene. */
    transform: translateY(12px);
    transition: opacity var(--transition-base),
                visibility var(--transition-base),
                transform var(--transition-base),
                background var(--transition-base),
                box-shadow var(--transition-base);
    z-index: 998;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: rgba(37, 99, 235, 0.22);
    box-shadow: var(--glow-cyan);
    transform: translateY(-3px);
}

/* ==========================
    DISEÑO RESPONSIVO
    ========================== */
/* Media queries para diferentes tamaños de pantalla */

@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero .container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-visual {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .hero-title {
        font-size: 2.75rem;
    }
    
    .hero-subtitle {
        margin: 0 auto var(--spacing-md);
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-content {
        grid-template-columns: 1fr;
    }

    /* Los canales de contacto pasan a dos columnas bajo el formulario */
    .contact-info {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-availability,
    .contact-next {
        grid-column: 1 / -1;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }
    
    .footer-wave {
        height: 60px;
    }
}

@media (max-width: 1024px) {
    .mobile-menu-btn {
        display: flex;
    }
    
    /* El panel desplegable también flota: tarjeta redondeada colgada bajo el botón */
    .nav-content .nav-links {
        position: absolute;
        top: calc(100% + 0.65rem);
        left: 0;
        right: 0;
        background: rgba(6, 10, 20, 0.95);
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        flex-direction: column;
        padding: 0.75rem;
        gap: 0;
        transform: translateY(-0.75rem) scale(0.98);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
                    opacity 0.3s ease,
                    visibility 0.3s ease;
        border: 1px solid rgba(14, 165, 233, 0.15);
        border-radius: var(--radius-lg);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }

    .nav-links.active {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
    }
    
    /* La entrada escalonada arranca al abrir el menú, no al cargar la página.
       Estaba en `.nav-links li` a secas: la animación se consumía durante la
       carga, con el panel oculto, y para cuando alguien pulsaba el botón ya
       había terminado. El escalonado no se veía nunca. */
    .nav-links li {
        width: 100%;
    }

    .nav-links.active li {
        opacity: 0;
        transform: translateX(-20px);
        animation: slideInMenu 0.3s ease forwards;
    }

    .nav-links.active li:nth-child(1) { animation-delay: 0.1s; }
    .nav-links.active li:nth-child(2) { animation-delay: 0.15s; }
    .nav-links.active li:nth-child(3) { animation-delay: 0.2s; }
    .nav-links.active li:nth-child(4) { animation-delay: 0.25s; }
    .nav-links.active li:nth-child(5) { animation-delay: 0.3s; }
    .nav-links.active li:nth-child(6) { animation-delay: 0.35s; }
    .nav-links.active li:nth-child(7) { animation-delay: 0.4s; }
    .nav-links.active li:nth-child(8) { animation-delay: 0.45s; }
    
    @keyframes slideInMenu {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .nav-links a {
        display: block;
        padding: 1rem 1.25rem;
        margin: 0.25rem 0;
        border-radius: 8px;
        border-left: 3px solid transparent;
        transition: all var(--transition-fast);
        position: relative;
        overflow: hidden;
    }
    
    .nav-links a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent);
        transition: width 0.3s ease;
        z-index: -1;
    }
    
    .nav-links a:hover::before,
    .nav-links a.active::before {
        width: 100%;
    }
    
    .nav-links a:hover,
    .nav-links a.active {
        border-left-color: var(--accent-color);
        background: rgba(59, 130, 246, 0.05);
        padding-left: 1.5rem;
        transform: translateX(5px);
    }
    
    .nav-links a.active::after {
        display: none;
    }
    
    .btn-nav {
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        border: 1px solid var(--border-hover);
        text-align: center;
        font-weight: 600;
        margin-top: 0.5rem;
        color: #ffffff !important;
    }

    .btn-nav:hover {
        transform: translateX(4px) translateY(0);
        box-shadow: var(--shadow-blue);
        color: #ffffff !important;
    }
    
    .hero {
        /* Barra flotante: 1.25rem de separación + ~46px de alto del botón/logo */
        padding-top: 120px;
        min-height: auto;
        padding-bottom: var(--spacing-lg);
    }
    
    .hero-title {
        font-size: 2.25rem;
        margin-top: 40px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    section {
        padding: var(--spacing-lg) 0;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .about-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .stat {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-brand {
        grid-column: auto;
        max-width: 100%;
        text-align: center;
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-contact-info {
        align-items: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .newsletter-form {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-wave {
        height: 50px;
    }
    
    .scroll-indicator {
        display: none;
    }
    
    /* Identidad Corporativa Responsive */
    .mv-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .values-grid {
        gap: var(--spacing-sm);
    }

    .value-card {
        flex: 1 1 220px;
        min-width: 220px;
        max-width: 100%;
    }
    
    .mv-card h3 {
        font-size: 1.5rem;
    }
    
    .values-header h3 {
        font-size: 1.75rem;
    }
    
    /* Botones flotantes en móvil.
       En escritorio van uno al lado del otro (WhatsApp a la derecha, "volver
       arriba" a su izquierda). En una pantalla estrecha esa fila se come el
       ancho útil y, con el teclado abierto, tapaba el botón de enviar del
       formulario. Aquí se apilan en columna contra el borde derecho, y
       safe-area-inset los aparta de la barra de gestos de los móviles con
       pantalla completa. */
    .whatsapp-float {
        width: 52px;
        height: 52px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        right: calc(16px + env(safe-area-inset-right, 0px));
    }

    .whatsapp-float svg {
        width: 26px;
        height: 26px;
    }

    .back-to-top {
        width: 44px;
        height: 44px;
        /* Justo encima del de WhatsApp, alineados por el mismo borde */
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        right: calc(20px + env(safe-area-inset-right, 0px));
    }

    .whatsapp-tooltip {
        display: none;
    }
    
    /* Testimonios Responsive */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .testimonial-card {
        padding: var(--spacing-md);
    }
    
    .testimonial-text {
        font-size: 1rem;
        padding-left: 1.75rem;
    }

    .testimonial-text::before {
        font-size: 3rem;
    }

    .author-avatar {
        width: 45px;
        height: 45px;
    }

    .author-avatar svg {
        width: 24px;
        height: 24px;
    }
    
}

@media (max-width: 480px) {
    :root {
        --spacing-sm: 0.75rem;
        --spacing-md: 1rem;
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
    }
    
    .container {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    .logo {
        font-size: 1.25rem;
    }

    .logo-image {
        width: 32px;
        height: 32px;
    }

    .hero {
        padding-top: 120px;
    }
    
    .hero-title {
        font-size: 1.80rem;
        line-height: 1.2;
        margin-top: 30px;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-md);
    }
    
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .code-window {
        font-size: 0.8rem;
    }
    
    .code-content {
        padding: 1.5rem;
        font-size: 0.8rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-subtitle {
        font-size: 0.95rem;
        padding: 0 0.5rem;
    }
    
    .service-card,
    .contact-form {
        padding: 1.5rem 1.25rem;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    .info-box {
        padding: 0.95rem 1rem;
    }

    .contact-form-title {
        font-size: 1.2rem;
    }

    .service-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .service-card h3 {
        font-size: 1.15rem;
    }

    .service-cta {
        padding: 0.55rem 1rem;
        font-size: 0.8rem;
    }
    
    .service-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .service-card h3 {
        font-size: 1.25rem;
    }
    
    .about-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .stat {
        padding: var(--spacing-md);
    }

    .stat-number {
        font-size: 1.75rem;
        letter-spacing: 0.02em;
        line-height: 1.3;
    }

    .about-text p {
        font-size: 1rem;
    }

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

    .feature-box {
        padding: var(--spacing-md);
    }

    .terminal-body {
        font-size: 0.8rem;
        padding: 1rem;
    }
    
    .portfolio-body {
        padding: var(--spacing-sm) var(--spacing-sm) 1.1rem;
    }

    .portfolio-body h3 {
        font-size: 1.1rem;
    }

    .portfolio-body p {
        font-size: 0.875rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.75rem;
        font-size: 0.95rem;
    }
    
    .btn-large {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .info-icon {
        width: 40px;
        height: 40px;
    }
    
    .info-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .footer {
        padding: var(--spacing-md) 0;
    }
    
    .footer-content {
        gap: var(--spacing-md);
    }
}

/* ==========================
    ANIMACIONES
    ========================== */
/* Keyframes y clases utilitarias para animaciones */

.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.slide-up {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 0.6s ease forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================
    REVELADO AL SCROLL
    ========================== */
/* Cuatro variantes de entrada. Ninguna de estas clases se escribe en el HTML:
   las pone js/script.js desde su tabla declarativa. Si el script no llega a
   ejecutarse, ningún elemento lleva la clase y la página se ve completa.

   Sin !important a propósito. Lo llevaban, y el transform con !important de la
   hoja gana incluso sobre el atributo style= del elemento: eso dejaba muerto el
   inclinado 3D que el JS aplica a .portfolio-item al mover el ratón. Además, el
   script retira estas clases cuando la entrada termina, así el elemento vuelve
   a su estado limpio y sus propios :hover mandan sin competencia.

   Todas animan sólo opacity y transform, las dos propiedades que el navegador
   resuelve en el compositor sin recalcular el diseño de la página. */

/* Sin `will-change` a propósito. Es tentador ponerlo aquí, pero estas clases las
   llevan a la vez treinta o cuarenta elementos de la página, y cada uno pediría
   su propia capa de composición reservada en memoria desde que carga el sitio
   hasta que entra en pantalla. Para una transición de opacity + transform el
   navegador ya promociona el elemento solo al arrancar la animación; lo único
   que se cede es un posible tirón en el primer fotograma de cada entrada. */
.animate-on-scroll,
.slide-in-left,
.slide-in-right,
.scale-in {
    opacity: 0;
    transition: opacity 0.6s ease-out,
                transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: var(--retardo-entrada, 0s);
}

/* Desplazamiento vertical: la variante genérica */
.animate-on-scroll { transform: translateY(24px); }

/* Laterales: para bloques que ocupan media rejilla (texto frente a imagen) */
.slide-in-left  { transform: translateX(-32px); }
.slide-in-right { transform: translateX(32px); }

/* Escala: para tarjetas y cifras, que crecen desde su sitio en vez de viajar */
.scale-in { transform: scale(0.96); }

.animate-on-scroll.animated,
.slide-in-left.animated,
.slide-in-right.animated,
.scale-in.animated {
    opacity: 1;
    transform: none;
}

/* Retardos escalonados para grupos de tarjetas. Van por variable y no por
   `transition-delay` directo: así ninguna regla posterior que redefina la
   transición completa se lleva el retardo por delante, que es justo lo que
   pasaba antes con .scale-in.animated. */
.stagger-1 { --retardo-entrada: 0.1s; }
.stagger-2 { --retardo-entrada: 0.2s; }
.stagger-3 { --retardo-entrada: 0.3s; }
.stagger-4 { --retardo-entrada: 0.4s; }
.stagger-5 { --retardo-entrada: 0.5s; }
.stagger-6 { --retardo-entrada: 0.6s; }

/* ==========================
    MOVIMIENTO REDUCIDO (RED DE SEGURIDAD)
    ========================== */
/* A lo largo de la hoja hay bloques @media (prefers-reduced-motion) que apagan
   las animaciones de su propia sección. Éste es el último y cubre lo que se
   escape: cualquier animación en bucle o de entrada que se añada más adelante
   queda desactivada por defecto en vez de olvidada.

   Va al final del archivo a propósito: en igualdad de especificidad gana la
   última regla, así que esto anula lo anterior sin necesidad de !important.

   Lo que NO se apaga: los indicadores de estado (spinners de los formularios).
   Un botón que se queda mudo mientras envía es peor accesibilidad, no mejor;
   la preferencia pide evitar movimiento decorativo, no ocultar el progreso. */
@media (prefers-reduced-motion: reduce) {
    /* Barrido general: entradas, bucles ambientales y desplazamientos.
       Con !important, y aquí sí hace falta. El selector universal tiene la
       especificidad más baja que existe, así que sin él cualquier regla de clase
       —`.featured-badge { animation: gradientShift 3s infinite }`— le gana y se
       queda girando. Comprobado: era exactamente lo que pasaba.
       Las excepciones de más abajo son reglas de clase, así que ganan a ésta sin
       problema aunque las dos lleven !important. */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Los revelados no llegan a aplicarse (el JS ni siquiera añade las clases),
       pero si el script se ejecutara a medias el contenido se queda visible. */
    .animate-on-scroll,
    .slide-in-left,
    .slide-in-right,
    .scale-in {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    /* Los spinners de envío quedan fuera del barrido: siguen girando para
       comunicar que el formulario está trabajando. Un botón que se queda mudo
       mientras envía es peor accesibilidad, no mejor. */
    .spinner,
    .newsletter-spinner {
        animation: rotate 1.4s linear infinite !important;
    }

    .spinner circle,
    .newsletter-spinner circle {
        animation: dash 1.8s ease-in-out infinite !important;
    }

    /* El desplazamiento suave por anclas también se anula desde el JS, pero la
       navegación por teclado y el "volver arriba" del navegador pasan por aquí. */
    html {
        scroll-behavior: auto;
    }
}

/* ==========================
    UTILIDADES
    ========================== */
/* Clases utilitarias para márgenes, alineación de texto y espaciado */

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

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }

/* ==========================
    WHATSAPP DESTACADO EN CONTACTO
    ========================== */
/* Sustituye a la sección completa que había antes justo encima del formulario,
   con su propio formulario de tres campos. Aquí es una sola vía rápida, con el
   verde de WhatsApp para que se distinga de los canales normales. */
.whatsapp-directo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.14), rgba(37, 211, 102, 0.05));
    border: 1px solid rgba(37, 211, 102, 0.3);
    text-decoration: none;
    color: var(--white);
    transition: transform var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.whatsapp-directo:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 211, 102, 0.55);
    box-shadow: 0 10px 28px -14px rgba(37, 211, 102, 0.6);
}

.whatsapp-directo-icono {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(37, 211, 102, 0.18);
    border: 1px solid rgba(37, 211, 102, 0.32);
    color: #25d366;
    font-size: 1.5rem;
}

.whatsapp-directo-texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.whatsapp-directo-texto strong {
    font-size: 0.98rem;
    font-weight: 600;
}

.whatsapp-directo-texto span {
    font-size: 0.85rem;
    color: var(--gray-light);
}

.whatsapp-directo > .bi {
    color: #25d366;
    font-size: 1rem;
    flex-shrink: 0;
}