/* ===========================
   MODERN DESIGN - Variables
   =========================== */
:root {
    --color-black: #0a0a0a;
    --color-white: #ffffff;
    --color-accent: #FFDD00;
    --color-accent-hover: #FFCC00;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Dark theme surface tokens ─── */
    --color-surface: #1a1a1a;       /* card / panel backgrounds */
    --color-surface-2: #242424;     /* hover state of cards */
    --color-text-primary: #f0f0f0;  /* main body text */
    --color-text-secondary: rgba(255, 255, 255, 0.65); /* secondary / muted text */
    --color-border: rgba(255, 255, 255, 0.08); /* subtle borders */
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: #0f0f0f;
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.container-large {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ===========================
   Navbar Minimal
   =========================== */
.navbar-minimal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 24px 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* Estado al hacer scroll: fondo oscuro semi-transparente */
.navbar-minimal.navbar-scrolled {
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0;
}

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

.logo-minimal span {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ─── Typographic logo: LEO IA ─── */
/* Dark theme: navbar is always dark-bg (transparent on hero, dark-blur on scroll)
   so the logo text is always white in both states */
.logo-text {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-white);
    transition: color 0.4s ease;
}

.logo-accent {
    color: var(--color-accent); /* #FFDD00 — always yellow */
}

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    /* Dark theme: always use white/dim border since bg is dark */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    color: var(--color-white);
    transition: var(--transition);
}

/* Dark theme: navbar is always dark (transparent over hero, dark-blur when scrolled)
   so the button is always white-on-dark — no override needed per state */
.navbar-minimal:not(.navbar-scrolled) .menu-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-white);
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    color: var(--color-white);
}

.menu-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hamburger span {
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: var(--transition);
}

/* ===========================
   Overlay Menu Fullscreen
   =========================== */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-black);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-slow);
}

.overlay-menu.active {
    opacity: 1;
    visibility: visible;
}

.overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 80px 48px;
    overflow-y: auto;
}

.close-menu {
    position: absolute;
    top: 32px;
    right: 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-menu span {
    position: absolute;
    width: 30px;
    height: 2px;
    background: var(--color-white);
}

.close-menu span:first-child {
    transform: rotate(45deg);
}

.close-menu span:last-child {
    transform: rotate(-45deg);
}

.menu-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 40px;
}

.main-menu {
    list-style: none;
}

.main-menu li {
    margin-bottom: 16px;
}

.menu-link {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 72px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.2;
    display: inline-block;
    position: relative;
    transition: var(--transition);
}

.menu-link::before {
    content: attr(data-number);
    font-size: 14px;
    position: absolute;
    left: -48px;
    top: 8px;
    color: var(--color-gray-700);
    font-weight: 400;
}

.menu-link:hover {
    color: var(--color-white);
    transform: translateX(16px);
}

.menu-info {
    padding-top: 60px;
}

.menu-contact h3,
.menu-social {
    color: var(--color-gray-300);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.menu-contact p {
    color: var(--color-white);
    margin-bottom: 8px;
    font-size: 16px;
}

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

.menu-social {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-social a {
    color: var(--color-white);
    font-size: 16px;
    transition: var(--transition);
}

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

/* ===========================
   Hero Fullscreen
   =========================== */
.hero-fullscreen {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #0a0a0a; /* fallback y fondo del canvas */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
}

.hero-bg--hidden {
    display: none; /* VANTA reemplaza la imagen de fondo */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente suave para contraste del texto sobre la red de VANTA */
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
    z-index: 1;
}

/* ─── Yellow light orb — warm depth point over VANTA NET ─── */
/* Sits at z-index 1 (same layer as overlay) to not block content */
.hero-light-point {
    position: absolute;
    top: -10%;
    right: 10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(
        circle at center,
        rgba(255, 221, 0, 0.12) 0%,
        rgba(255, 180, 0, 0.06) 40%,
        transparent 70%
    );
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    /* Slow breathing pulse for organic depth */
    animation: lightPulse 6s ease-in-out infinite;
}

@keyframes lightPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.15); }
}

@media (max-width: 768px) {
    .hero-light-point {
        width: 300px;
        height: 300px;
        top: -5%;
        right: -10%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-light-point {
        animation: none;
        opacity: 0.8;
    }
}

.hero-content-center {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    padding: 0 48px;
    animation: fadeInUp 1s ease-out;
}

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

.hero-title-large {
    font-family: var(--font-display);
    font-size: clamp(32px, 5.5vw, 80px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.highlight-text {
    color: var(--color-accent);
    background: linear-gradient(135deg, #FFDD00, #FFB800);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle-large {
    font-size: clamp(18px, 2vw, 24px);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 48px;
    font-weight: 300;
}

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

.scroll-indicator {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--color-white);
    z-index: 2;
}

.scroll-indicator span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scroll-line {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.4);
    animation: scrollAnimation 2s infinite;
}

@keyframes scrollAnimation {
    0%, 100% { transform: scaleY(0.5); opacity: 0.3; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ===========================
   Botones
   =========================== */
.btn-primary-large {
    padding: 20px 48px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition);
    display: inline-block;
    border: 2px solid var(--color-accent);
}

.btn-primary-large:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(99, 102, 241, 0.4);
}

.btn-secondary-large {
    padding: 20px 48px;
    background: transparent;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    border: 2px solid var(--color-white);
    border-radius: 50px;
    transition: var(--transition);
    display: inline-block;
}

.btn-secondary-large:hover {
    background: var(--color-white);
    color: var(--color-black);
    transform: translateY(-2px);
}

/* ===========================
   Section Styles
   =========================== */
.section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.section-label.light {
    color: var(--color-white);
}

.section-title-large {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.section-title-large.light {
    color: var(--color-white);
}

/* ===========================
   Sobre Mí Section
   =========================== */
.sobre-mi-section {
    padding: 160px 0;
    background: #0f0f0f;
}

.sobre-mi-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 80px;
    align-items: center;
}

/* ── Centrar el frame dentro de su columna ── */
.sobre-mi-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Marco circular — solo glow cálido, sin borde ── */
.image-frame {
    position: relative;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(255, 221, 0, 0.15),
        0 0 120px rgba(255, 221, 0, 0.06),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s ease;
}

.image-frame:hover img {
    transform: scale(1.06);
}


.sobre-mi-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: 48px;
}

.sobre-mi-text p {
    margin-bottom: 24px;
}

.sobre-mi-text strong {
    color: var(--color-text-primary);
}

.sobre-mi-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

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

.stat-num {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===========================
   Curso Preview Section
   =========================== */
.curso-preview-section {
    position: relative;
    padding: 200px 0;
    overflow: hidden;
}

.curso-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.curso-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.curso-preview-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.curso-intro {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 48px;
    line-height: 1.6;
}

/* =====================================================
   MODAL DEL CURSO — Rediseño premium
   Arquitectura: fixed overlay + floating card con bg image
   Animación: opacity + translateY + scale al activar .active
   ===================================================== */

.modal-curso {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-curso.active {
    opacity: 1;
    visibility: visible;
}

/* Capa de fondo que oscurece la página — cursor pointer para cerrar */
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

/* Card flotante que contiene el contenido del modal */
.modal-container {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: 88vh;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* Animación de entrada: sube y crece desde abajo */
    transform: translateY(32px) scale(0.97);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
}

.modal-curso.active .modal-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── Imagen arquitectónica de fondo del container ── */
.modal-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Muy oscurecida y desaturada para no competir con el texto */
    filter: brightness(0.18) saturate(0.4);
    z-index: 0;
}

/* Overlay de gradiente sobre la imagen de fondo */
.modal-overlay-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        145deg,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(15, 15, 15, 0.80) 100%
    );
    z-index: 1;
}

/* Línea de luz amarilla en el borde superior — misma firma visual que .empresa-card */
.modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 221, 0, 0.35) 40%,
        rgba(255, 221, 0, 0.35) 60%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
}

/* Área de contenido scrolleable */
.modal-content {
    position: relative;
    z-index: 2;
    overflow-y: auto;
    max-height: 88vh;
    padding: 56px 52px 48px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 221, 0, 0.2) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 4px;
}
.modal-content::-webkit-scrollbar-track { background: transparent; }
.modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 221, 0, 0.2);
    border-radius: 2px;
}

/* Botón de cierre: círculo sutil sobre la card */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.modal-close span {
    position: absolute;
    width: 14px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}
.modal-close span:first-child { transform: rotate(45deg); }
.modal-close span:last-child  { transform: rotate(-45deg); }

/* ── Header del modal ── */
.modal-header {
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFDD00;
    margin-bottom: 16px;
}

.modal-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
}

/* ── Modal body: wrapper del contenido interno ── */
.modal-body {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.65);
}

/* ── Intro box: resumen del programa con borde amarillo ── */
.curso-intro-box {
    background: rgba(255, 221, 0, 0.05);
    border: 1px solid rgba(255, 221, 0, 0.15);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 36px;
}

.curso-intro-box h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #FFDD00;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.curso-intro-box p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 6px;
}

.curso-intro-box p:last-child { margin-bottom: 0; }

.curso-intro-box strong { color: rgba(255, 255, 255, 0.9); }

/* ── Módulos: lista compacta de los 9 módulos ── */
.curso-modulos h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 20px;
}

/* Fila de módulo: número + contenido en flex */
.modulo-item {
    display: flex;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    /* Sobreescribe el grid anterior */
    grid-template-columns: unset;
    margin-bottom: 0;
}

.modulo-item:last-child { border-bottom: none; }

.modulo-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 221, 0, 0.5);
    letter-spacing: 0.05em;
    min-width: 28px;
    padding-top: 2px;
    /* Reset del font-size gigante anterior */
    opacity: 1;
}

.modulo-content h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.modulo-content p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.65;
    margin-bottom: 0;
}

/* Reset de li styles del modal (el HTML usa <p>, no <ul>) */
.modulo-content ul { display: none; }

/* ── Qué incluye ── */
.curso-incluye {
    margin-top: 32px;
    margin-bottom: 28px;
}

.curso-incluye h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 16px;
}

.incluye-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.incluye-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    /* Reset del padding y bg anterior */
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.incluye-item svg {
    flex-shrink: 0;
    color: #FFDD00;
    width: 16px;
    height: 16px;
}

/* ── CTA final: dark glass ── */
.curso-cta-box {
    padding: 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-align: center;
    /* Reset del gradiente amarillo anterior */
    color: inherit;
}

.curso-cta-box h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.curso-cta-box p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 20px;
}

.cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
    .modal-content {
        padding: 40px 24px 32px;
    }
    .modal-header h2 {
        font-size: 1.5rem;
    }
    .incluye-grid {
        grid-template-columns: 1fr;
    }
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Reduced motion: skip entrance animation */
@media (prefers-reduced-motion: reduce) {
    .modal-curso,
    .modal-container {
        transition: opacity 0.01ms, visibility 0.01ms !important;
        transform: none !important;
    }
}

/* ===========================
   Consultoría Section
   =========================== */
.consultoria-section {
    padding: 160px 0;
    background: #141414;
}

.consultoria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 64px;
}

.consultoria-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 48px;
    border-radius: 12px;
    transition: var(--transition);
}

.consultoria-card:hover {
    transform: translateY(-8px);
    background: var(--color-surface-2);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.card-icon {
    width: 64px;
    height: 64px;
    background: var(--color-accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-white);
}

.consultoria-card h3 {
    font-size: 24px;
    margin-bottom: 16px;
}

.consultoria-card p {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ===========================
   Empresas Section
   =========================== */
.empresas-section {
    position: relative;
    padding: 200px 0;
    overflow: hidden;
}

.empresas-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.empresas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
}

.empresas-content {
    position: relative;
    z-index: 2;
}

.empresas-intro {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 64px;
    max-width: 600px;
}

.empresas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 64px;
}

.empresa-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.empresa-num {
    display: block;
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 16px;
    opacity: 0.5;
}

.empresa-card h3 {
    font-size: 24px;
    color: var(--color-white);
    margin-bottom: 16px;
}

.empresa-card p {
    color: rgba(255, 255, 255, 0.8);
}

/* ===========================
   Testimonios Section
   =========================== */
.testimonios-section {
    padding: 160px 0;
    background: #0f0f0f;
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 64px;
}

.testimonial-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 40px;
    border-radius: 12px;
    transition: var(--transition);
}

.testimonial-card:hover {
    transform: translateY(-8px);
    background: var(--color-surface-2);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.testimonial-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-photo-placeholder {
    /* Black circle with yellow initials — matches brand palette */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-black);
    border: 2px solid var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
}

.testimonial-info h4 {
    font-size: 18px;
    margin-bottom: 4px;
}

.testimonial-role {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    font-style: italic;
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-top: 16px;
}

.testimonial-rating svg {
    color: #fbbf24;
}

/* ===========================
   Contacto Section
   =========================== */
.contacto-section {
    padding: 160px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 64px;
}

.contacto-details {
    margin-top: 48px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.detail-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-700);
}

.detail-item a {
    font-size: 18px;
    color: var(--color-white);
    transition: var(--transition);
}

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

/* Form Fields */
.form-field {
    position: relative;
    margin-bottom: 32px;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 20px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-gray-700);
    color: var(--color-white);
    font-size: 16px;
    font-family: inherit;
    transition: var(--transition);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-bottom-color: var(--color-accent);
}

/* Dark theme placeholders */
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.form-field label {
    position: absolute;
    left: 0;
    top: 20px;
    color: var(--color-gray-700);
    font-size: 16px;
    pointer-events: none;
    transition: var(--transition);
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
    top: -8px;
    font-size: 12px;
    color: var(--color-accent);
}

.form-field select {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    cursor: pointer;
    background-color: #1a1a1a;
    color: var(--color-text-primary) !important;
    padding-top: 28px;
    padding-bottom: 12px;
}

.form-field select option {
    background-color: #1a1a1a !important;
    color: var(--color-text-primary) !important;
    padding: 10px;
    font-weight: 500;
}

.form-field select + label {
    top: 8px;
    font-size: 12px;
    color: var(--color-accent);
    pointer-events: none;
}

/* ===========================
   Estados del Formulario Web3Forms
   =========================== */
.form-message {
    display: none;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 24px;
    border-left: 4px solid transparent;
}

.form-message--success {
    background: rgba(34, 197, 94, 0.12);
    border-left-color: #22c55e;
    color: #86efac;
}

.form-message--error {
    background: rgba(239, 68, 68, 0.12);
    border-left-color: #ef4444;
    color: #fca5a5;
}

.btn--loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===========================
   Footer
   =========================== */
.footer-minimal {
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: 64px 0 32px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-gray-800);
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
}

.footer-left p {
    color: var(--color-text-secondary);
    margin-top: 8px;
}

.footer-social {
    display: flex;
    gap: 32px;
}

.footer-social a {
    color: var(--color-text-secondary);
    transition: var(--transition);
}

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

.footer-bottom {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px) {
    .container-large {
        padding: 0 32px;
    }

    .sobre-mi-grid,
    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .consultoria-grid,
    .empresas-grid {
        grid-template-columns: 1fr;
    }

    /* Carousel shows 1 card on tablet — handled via JS column-count recalc */
    .testimonial-card {
        flex: 0 0 100%;
    }

    .menu-split {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: 48px 32px;
    }
}

@media (max-width: 768px) {
    .hero-title-large {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.05;
        letter-spacing: -0.01em;
    }

    .section-title-large {
        font-size: 36px;
    }

    .sobre-mi-stats {
        grid-template-columns: 1fr;
    }

    /* Foto circular más compacta en mobile */
    .image-frame {
        width: 240px;
        height: 240px;
    }

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

    .modulo-item {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ===========================
   Testimonios — Carrusel Premium
   =========================== */

/* Wrapper: clips the track and positions controls */
.testimonios-carousel-wrapper {
    position: relative;
    margin-top: 64px;
    /* Negative horizontal margin lets the track bleed a touch for depth */
    overflow: hidden;
}

/* ─── Marquee continuo: animación CSS, JS solo clona las cards ─── */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.testimonios-track {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: marquee-scroll 50s linear infinite;
    will-change: transform;
    align-items: stretch;
}

/* Pausa al hover sobre el wrapper */
.testimonios-carousel-wrapper:hover .testimonios-track {
    animation-play-state: paused;
}

/* ─── Card sizing: ancho fijo para que el marquee funcione ─── */
.testimonios-track .testimonial-card {
    flex: 0 0 380px;
    width: 380px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .testimonios-track .testimonial-card {
        flex: 0 0 300px;
        width: 300px;
    }
}

/* Ocultar controles (no aplican al marquee) */
.carousel-controls {
    display: none;
}

/* ─── Highlight variant — Pilar Cichero (caso estrella) — dark theme ─── */
.testimonial-card--highlight {
    border-left: 3px solid var(--color-accent);
    background: #1f1d10; /* very subtle warm dark tint, consistent with #FFDD00 brand */
    border-color: var(--color-accent);
}

/* ─── Testimonial text: fills remaining height so cards align ─── */
.testimonios-track .testimonial-text {
    flex: 1;
    margin-top: 0;
}

/* ─── Rating placement: sits between header and text ─── */
.testimonios-track .testimonial-rating {
    margin-top: 0;
    margin-bottom: 16px;
}

/* ─── Carousel Controls row ─── */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

/* ─── Prev / Next buttons ─── */
.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-black);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    line-height: 1;
    /* Prevent text selection on rapid clicks */
    user-select: none;
}

.carousel-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-black);
    transform: scale(1.08);
}

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

/* ─── Dots container ─── */
.carousel-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ─── Individual dot ─── */
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gray-300);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
    flex-shrink: 0;
}

.carousel-dot.active {
    background: var(--color-accent);
    transform: scale(1.4);
}

.carousel-dot:hover:not(.active) {
    background: var(--color-gray-700);
}

/* ─── Reduced motion accessibility ─── */
@media (prefers-reduced-motion: reduce) {
    .testimonios-track {
        animation: none;
    }
    .carousel-btn,
    .carousel-dot {
        transition: none;
    }
}

/* =====================================================
   Word-flip animation — hero title (Propuesta C)
   FUTURO (amarillo) → hover → PRESENTE (blanco)
   Barrido hacia abajo: B entra desde arriba, A sale hacia abajo
   ===================================================== */
.flip-word {
    display: inline-block;
    position: relative;
    cursor: default;
}

.flip-word__a {
    display: inline-block;
    color: var(--color-accent);   /* #FFDD00 */
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.3s ease;
}

.flip-word__b {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: #ffffff;
    opacity: 0;
    transform: translateY(-0.7em);   /* empieza ARRIBA */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity   0.35s ease;
    pointer-events: none;
}

/* Al hover: A baja y desaparece, B baja y aparece (barrido ↓) */
.flip-word:hover .flip-word__a {
    transform: translateY(0.7em);
    opacity: 0;
}

.flip-word:hover .flip-word__b {
    transform: translateY(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .flip-word__a,
    .flip-word__b { transition: none; }
}

/* =====================================================
   Word Swap — "mercado" ↔ "futuro" on hover
   display:inline keeps the word perfectly baseline-aligned
   with the surrounding h1. No overflow:hidden, no child
   elements — zero vertical alignment artefacts.

   States (set by JS):
     .is-wiping   — clip-path reveals word top-to-bottom (350ms)
     .is-active   — word is "futuro" in yellow, wipe complete
   ===================================================== */

.word-swap {
    display: inline;              /* exact flow alignment with h1 */
    position: relative;
    color: #ffffff;               /* resting: white, matches h1 */
    cursor: default;
}

/* Active state: word has been swapped to wordB, show yellow */
.word-swap.is-active {
    color: var(--color-accent);   /* #FFDD00 */
}

/* Entrance wipe: clip-path reveals word from top → bottom (350ms)
   inset(100% 0 0 0) = fully hidden (clipped from top)
   inset(0%   0 0 0) = fully visible */
@keyframes wipe-reveal {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0%   0 0 0); }
}

.word-swap.is-wiping {
    animation: wipe-reveal 350ms ease-in-out forwards;
}

/* =====================================================
   Accessibility: honour prefers-reduced-motion
   Skip the wipe — text still swaps on hover
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .word-swap.is-wiping {
        animation: none;
    }
}

/* Tagline: static subtitle below the swappable title, above the main subtitle */
.hero-tagline {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.4vw, 17px);
    color: rgba(255, 255, 255, 0.45);  /* muted, doesn't compete with CTA */
    letter-spacing: 0.03em;
    margin-bottom: 16px;               /* spacing before hero-subtitle-large */
    font-weight: 300;
}

/* =====================================================
   "Lo que podés hacer" Section — Before/After Cards
   ===================================================== */

.qph-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    /* Background colour removed — replaced by .qph-bg image layer */
}

/* ─── Background image (parallax fixed, darkened) ─── */
.qph-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: brightness(0.2) saturate(0.4);
    z-index: 0;
}

/* ─── Gradient overlay for depth and text contrast ─── */
.qph-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.7) 0%,
        rgba(10, 10, 10, 0.5) 50%,
        rgba(10, 10, 10, 0.8) 100%
    );
    z-index: 1;
}

/* ─── Ensure container content sits above bg layers ─── */
.qph-section .container-large {
    position: relative;
    z-index: 2;
}

/* iOS fix: background-attachment:fixed doesn't work on mobile Safari */
@media (max-width: 768px) {
    .qph-bg {
        background-attachment: scroll;
    }
}

/* Section header */
.qph-header {
    text-align: center;
    margin-bottom: 72px;
}

/* Yellow accent on "IA" inside section title */
.qph-ia-accent {
    color: var(--color-accent);        /* #FFDD00 */
}

/* 2-column grid on desktop */
.qph-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* ─── Individual card ─── */
/* Cards start invisible; .qph-card--visible is added by IntersectionObserver */
/* Glassmorphism style consistent with .empresa-card (backdrop + translucent bg) */
.qph-card {
    background: rgba(255, 255, 255, 0.1);    /* glassmorphism — same as .empresa-card */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);  /* same as .empresa-card */
    border-radius: 16px;
    padding: 36px;
    display: grid;
    /* Layout: before-block | arrow | after-block */
    grid-template-columns: 1fr 36px 1fr;
    gap: 0;
    align-items: center;
    transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;

    /* Entrance animation state — invisible before IO fires */
    opacity: 0;
    transform: translateY(28px);
}

.qph-card:hover {
    background: rgba(255, 255, 255, 0.15);   /* slightly brighter glass on hover */
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    transform: translateY(-4px);
}

/* Visible state — class added by IntersectionObserver */
.qph-card--visible {
    opacity: 1;
    transform: translateY(0);
    /* Transition on the entrance properties */
    transition: opacity 0.55s ease, transform 0.55s ease,
                background 0.35s ease, box-shadow 0.35s ease;
}

/* Staggered delays via data-delay attribute — set in JS */
.qph-card--visible[data-delay="0"] { transition-delay: 0ms; }
.qph-card--visible[data-delay="1"] { transition-delay: 110ms; }
.qph-card--visible[data-delay="2"] { transition-delay: 220ms; }
.qph-card--visible[data-delay="3"] { transition-delay: 330ms; }

/* ─── Before column ─── */
.qph-before {
    padding-right: 20px;
    /* Slightly brighter separator to read on glass background */
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

/* Side labels: "Antes" / "Con IA" */
.qph-side-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.qph-side-label--before {
    color: rgba(255, 255, 255, 0.35);  /* dim — "before" is the forgettable state */
}

.qph-side-label--before svg {
    opacity: 0.5;
}

.qph-side-label--after {
    color: var(--color-accent);        /* yellow — "after" is the goal state */
}

/* Before text: small, gray */
.qph-before-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* ─── Arrow separator ─── */
.qph-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    opacity: 0.6;
    flex-shrink: 0;
}

/* ─── After column ─── */
.qph-after {
    padding-left: 20px;
}

/* After text: bright white, larger */
.qph-after-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);  /* #f0f0f0 */
    font-weight: 500;
    margin-bottom: 12px;
}

/* Highlighted result value — yellow accent */
.qph-highlight {
    color: var(--color-accent);        /* #FFDD00 */
    font-weight: 700;
}

/* Category label at bottom of after-column */
.qph-after-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 221, 0, 0.4);
    margin-top: 4px;
}

/* ─── Mobile: 1-column grid ─── */
@media (max-width: 768px) {
    .qph-section {
        padding: 100px 0 120px;
    }

    .qph-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* On mobile switch card layout to vertical stack */
    .qph-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 28px 24px;
    }

    .qph-before {
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .qph-after {
        padding-left: 0;
    }

    /* Rotate arrow to point downward on mobile */
    .qph-arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }
}

/* Tablet: keep 2-col but tighter padding */
@media (max-width: 1024px) and (min-width: 769px) {
    .qph-card {
        padding: 28px 24px;
        grid-template-columns: 1fr 32px 1fr;
    }
}

/* ─── Reduced motion: skip entrance animation ─── */
@media (prefers-reduced-motion: reduce) {
    .qph-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===================================================
   QPH Thumbnail + Lightbox
   Replaces the old toggle/expand accordion pattern.
   Thumbnails sit directly inside the card; clicking
   them opens a full-screen lightbox overlay.
   =================================================== */

/* ── Thumbnail container — compact preview in the "after" column ──
   Grid placement: col 3 (the "after" column), row 2 (below the main
   before/arrow/after row). The card grid is 1fr 36px 1fr, so col 3
   is naturally ~1/3 of the total card width.
   grid-row: 2 forces a new implicit row — the card auto-expands in
   height to fit. align-self: start top-aligns within that new cell.   */
.qph-thumb {
    grid-column: 3 / 4;               /* after-column only — compact preview */
    grid-row: 2;                       /* explicit second row, below main content */
    align-self: start;                 /* top-align within the row cell */
    margin-top: 16px;
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    /* Subtle lift on hover — transform only, no layout impact */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Keyboard-focus ring colour */
    outline: none;
}

.qph-thumb:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

/* Keyboard focus — accessible ring without layout shift */
.qph-thumb:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ── Media fill: img or video ── */
.qph-thumb__media {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
    /* Slight scale-back so the card hover feels like a zoom-in */
    transform: scale(1.04);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;   /* clicks pass through to .qph-thumb */
}

.qph-thumb:hover .qph-thumb__media {
    transform: scale(1);    /* "zooms in" visually as card scales up */
}

/* ── Overlay: semi-transparent scrim + icon ── */
.qph-thumb__overlay {
    position: absolute;
    inset: 0;
    /* Resting: subtle dark vignette */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.35) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* On hover: overlay brightens slightly and icon becomes fully visible */
.qph-thumb:hover .qph-thumb__overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.50) 100%
    );
}

/* ── Play / zoom icon ── */
.qph-thumb__play {
    color: var(--color-accent);         /* #FFDD00 */
    opacity: 0;                         /* hidden at rest */
    transform: scale(0.8);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Subtle drop shadow so icon reads on light media */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}

.qph-thumb:hover .qph-thumb__play {
    opacity: 1;
    transform: scale(1);                /* elastic pop on hover */
}

/* In QPH cards the thumb is compact (~1/3 card width) — scale icon down
   so it stays proportional to the smaller preview area.
   .caso-thumb inherits the full-size values from the caso context below. */
.qph-card .qph-thumb__play {
    width: 24px;
    height: 24px;
}

/* ── Caption below thumbnail ── */
/* Col 3, row 3 — stacks directly under the compact thumb */
.qph-thumb__caption {
    grid-column: 3 / 4;               /* matches .qph-thumb column */
    grid-row: 3;                       /* row 3: below the thumb (row 2) */
    margin-top: 6px;
    font-size: 0.75rem;               /* slightly smaller to match compact thumb */
    color: rgba(255, 255, 255, 0.40);
    font-style: italic;
    line-height: 1.4;
}

/* Mobile: no scale effect — just reveal icon on tap */
@media (max-width: 768px) {
    /* On mobile the card grid collapses to 1-col.
       Reset grid-column AND grid-row to auto so the thumb and caption
       flow naturally in document order after the after-block.           */
    .qph-thumb {
        grid-column: auto;             /* full width of single-col mobile grid */
        grid-row: auto;                /* natural flow order */
        margin-top: 12px;
    }

    .qph-thumb__caption {
        grid-column: auto;             /* same reset for caption on mobile */
        grid-row: auto;
    }

    .qph-card .qph-thumb__play {
        width: 20px;                   /* slightly smaller on mobile */
        height: 20px;
    }

    .qph-thumb:hover {
        transform: none;
    }
    .qph-thumb__play {
        opacity: 0.75;                  /* always partially visible on touch */
        transform: scale(1);
    }
}

/* Reduced motion: disable all transitions on thumbnails */
@media (prefers-reduced-motion: reduce) {
    .qph-thumb,
    .qph-thumb__media,
    .qph-thumb__overlay,
    .qph-thumb__play {
        transition: none;
        transform: none;
    }
    .qph-thumb__play {
        opacity: 0.7;
    }
}

/* ── Placeholder state: no media file yet ── */
/* When the image/video 404s the aspect-ratio box still renders */
.qph-thumb--placeholder {
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border);
}
.qph-thumb--placeholder .qph-thumb__overlay {
    background: none;
}


/* ===================================================
   QPH Lightbox — full-screen media viewer
   Single overlay reused for all 3 cards.
   Toggled via .is-open class by initQphLightbox() in JS.
   =================================================== */

#qph-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden by default — opacity + pointer-events for smooth fade */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#qph-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Backdrop — dark scrim ── */
.qph-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;                    /* click backdrop to close */
}

/* ── Inner panel — scales in on open ── */
.qph-lightbox__inner {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Entrance animation: scale 0.94 → 1 */
    transform: scale(0.94);
    transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}

#qph-lightbox.is-open .qph-lightbox__inner {
    transform: scale(1);
}

/* ── Media wrapper inside lightbox ── */
.qph-lightbox__media-wrap {
    line-height: 0;                     /* remove inline-block gap under img */
}

/* Image inside lightbox */
.qph-lightbox__media-wrap img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
}

/* Video inside lightbox — with controls */
.qph-lightbox__media-wrap video {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
    /* Accent-colour video controls where supported */
    accent-color: var(--color-accent);
}

/* ── Close button ── */
.qph-lightbox__close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.qph-lightbox__close:hover {
    background: rgba(255, 221, 0, 0.12);
    border-color: var(--color-accent);
    transform: rotate(90deg);
}

.qph-lightbox__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .qph-lightbox__inner {
        max-width: 100vw;
        max-height: 100dvh;            /* dynamic viewport height on mobile */
        padding: 0 12px;
    }

    .qph-lightbox__media-wrap img,
    .qph-lightbox__media-wrap video {
        max-width: calc(100vw - 24px);
        max-height: 80dvh;
        border-radius: 6px;
    }

    .qph-lightbox__close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

/* ── Reduced motion: skip scale animation on lightbox ── */
@media (prefers-reduced-motion: reduce) {
    #qph-lightbox,
    .qph-lightbox__inner {
        transition: none;
    }
    #qph-lightbox {
        transition: opacity 0.01ms;
    }
}

/* =====================================================
   Casos de Éxito Section (#casos-de-exito)
   Two large case-study cards showing real architect results.
   Thumbnails reuse the .qph-thumb / #qph-lightbox system.
   ===================================================== */

.casos-section {
    padding: 140px 0 160px;
    background: #141414;               /* slightly lighter than body to create visual rhythm */
}

/* ── Section header ── */
.casos-header {
    text-align: center;
    margin-bottom: 80px;
}

/* ── Individual case card ── */
.caso-card {
    background: var(--color-surface);           /* #1a1a1a */
    border: 1px solid var(--color-border);      /* rgba(255,255,255,0.08) */
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    /* Entrance animation — starts hidden, JS adds .caso-card--visible */
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Visible state added by IntersectionObserver */
.caso-card--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger: second card enters 150ms after first */
.caso-card--visible:nth-child(2) {
    transition-delay: 150ms;
}

/* ── Meta row: pill label ── */
.caso-card__meta {
    margin-bottom: 28px;
}

.caso-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);             /* #FFDD00 */
    background: rgba(255, 221, 0, 0.08);
    border: 1px solid rgba(255, 221, 0, 0.18);
    border-radius: 100px;
    padding: 6px 14px;
}

/* ── Card body: 2-column layout (copy | media) ── */
.caso-card__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Reversed: media on left, copy on right (Pilar's card) */
.caso-card__body--reversed {
    direction: rtl;                         /* flip column order */
}

.caso-card__body--reversed > * {
    direction: ltr;                         /* restore text direction inside children */
}

/* ── Case title ── */
.caso-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    color: var(--color-text-primary);       /* #f0f0f0 */
    line-height: 1.35;
    margin-bottom: 24px;
}

/* ── Objectives block ── */
.caso-objetivos {
    margin-bottom: 24px;
}

.caso-objetivos__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 10px;
}

.caso-objetivos__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.caso-objetivos__list li {
    font-size: 14px;
    color: var(--color-text-secondary);     /* rgba(255,255,255,0.65) */
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}

.caso-objetivos__list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.3);
}

/* ── Achievement items (checkmark + text) ── */
.caso-logros {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.caso-logro-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--color-text-primary);       /* #f0f0f0 */
    line-height: 1.5;
}

.caso-logro-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-accent);             /* #FFDD00 */
}

/* ── Blockquote testimonial ── */
.caso-quote {
    border-left: 3px solid var(--color-accent);
    padding-left: 20px;
    margin: 0;
}

.caso-quote p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-bottom: 8px;
}

.caso-quote cite {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    font-style: normal;
}

/* ── Pilar: subtitle line ── */
.caso-subtitle {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ── Pilar: result badge (2 días → 1 tarde) ── */
.caso-resultado {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 221, 0, 0.08);
    border: 1px solid rgba(255, 221, 0, 0.18);
    border-radius: 100px;
    padding: 10px 20px;
    margin-bottom: 28px;
}

.caso-resultado__before {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
}

.caso-resultado__after {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-accent);             /* #FFDD00 */
}

/* ── Media column: two stacked thumbnails ── */
.caso-card__media {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Override qph-thumb margin for caso context — no grid-column needed */
.caso-thumb {
    grid-column: unset;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Single thumbnail (Pilar) fills more height */
.caso-thumb--single {
    aspect-ratio: 4 / 3;                   /* taller crop for document image */
}

/* ── Tablet: tighter padding ── */
@media (max-width: 1024px) and (min-width: 769px) {
    .casos-section {
        padding: 100px 0 120px;
    }

    .caso-card {
        padding: 32px;
    }

    .caso-card__body {
        gap: 32px;
    }

    .caso-title {
        font-size: 20px;
    }
}

/* ── Mobile: single-column stack ── */
@media (max-width: 768px) {
    .casos-section {
        padding: 80px 0 100px;
    }

    .caso-card {
        padding: 28px 20px;
    }

    .caso-card__body,
    .caso-card__body--reversed {
        grid-template-columns: 1fr;
        gap: 32px;
        direction: ltr;                     /* reset direction flip on mobile */
    }

    .caso-card__body--reversed > * {
        direction: ltr;
    }

    /* On mobile: media block moves below copy */
    .caso-card__body--reversed .caso-card__copy {
        order: -1;                          /* copy always first on mobile */
    }

    .caso-title {
        font-size: 19px;
    }

    .caso-resultado {
        padding: 8px 16px;
    }
}

/* Reduced motion: skip entrance on cases */
@media (prefers-reduced-motion: reduce) {
    .caso-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =====================================================
   Cómo Funciona / El Programa Section (#como-funciona)
   3-block grid explaining the program structure + CTA.
   ===================================================== */

.como-funciona-section {
    padding: 140px 0 160px;
    background: #0f0f0f;                    /* same as body/qph — rhythm reset */
}

/* ── Section header ── */
.cf-header {
    text-align: center;
    margin-bottom: 72px;
}

.cf-subtitle {
    font-size: clamp(14px, 1.4vw, 17px);
    color: var(--color-text-secondary);     /* rgba(255,255,255,0.65) */
    margin-top: 16px;
    letter-spacing: 0.04em;
}

/* ── 3-column grid desktop / 1-column mobile ── */
.cf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 72px;
}

/* ── Individual block ── */
.cf-block {
    background: var(--color-surface);       /* #1a1a1a */
    border: 1px solid var(--color-border);  /* rgba(255,255,255,0.08) */
    border-top: 2px solid var(--color-accent);  /* yellow top accent stripe */
    border-radius: 0 0 16px 16px;          /* flat top, rounded bottom */
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Entrance animation — JS adds .cf-block--visible */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease,
                background 0.3s ease, box-shadow 0.3s ease;
}

.cf-block:hover {
    background: var(--color-surface-2);     /* #242424 */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

/* Visible state added by IntersectionObserver */
.cf-block--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays across the 3 blocks */
.cf-block--visible:nth-child(1) { transition-delay: 0ms; }
.cf-block--visible:nth-child(2) { transition-delay: 110ms; }
.cf-block--visible:nth-child(3) { transition-delay: 220ms; }

/* ── Block icon ── */
.cf-block__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);             /* #FFDD00 */
    flex-shrink: 0;
}

/* ── Block title ── */
.cf-block__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--color-text-primary);       /* #f0f0f0 */
    line-height: 1.3;
    margin: 0;
}

/* ── Block body copy ── */
.cf-block__body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-text-secondary);     /* rgba(255,255,255,0.65) */
    flex: 1;                                /* pushes tag to bottom */
    margin: 0;
}

/* ── Small pill tag at bottom ── */
.cf-block__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(255, 221, 0, 0.1);
    border-radius: 100px;
    padding: 5px 12px;
    align-self: flex-start;                 /* don't stretch full width */
}

/* ── CTA block ── */
.cf-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.cf-cta__sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.06em;
    margin: 0;
}

/* ── Tablet: 2-column + 1 centered ── */
@media (max-width: 1024px) and (min-width: 769px) {
    .como-funciona-section {
        padding: 100px 0 120px;
    }

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

    /* Third block spans both columns, centered */
    .cf-block:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ── Mobile: 1-column ── */
@media (max-width: 768px) {
    .como-funciona-section {
        padding: 80px 0 100px;
    }

    .cf-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 52px;
    }

    .cf-block {
        padding: 28px 24px;
    }

    .cf-block:nth-child(3) {
        grid-column: unset;
        max-width: none;
    }
}

/* Reduced motion: skip entrance on cf-blocks */
@media (prefers-reduced-motion: reduce) {
    .cf-block {
        opacity: 1;
        transform: none;
        transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .cf-block:hover {
        transform: none;
    }
}


/* =====================================================
   TAREA 1 — Section Glow Borders
   Coherencia visual post-hero: cada sección tiene un
   borde superior luminoso difuso y un glow radial en
   la parte superior, como si la luz del hero se derramara
   hacia abajo. Pseudo-elementos ::before y ::after.
   Contenido elevado con z-index:1 relativo a la sección.
   ===================================================== */

/* Pattern base — aplicado a todas las secciones principales */
.qph-section,
.casos-section,
.recursos-section,
.como-funciona-section,
.sobre-mi-section,
.testimonios-section,
.contacto-section,
.consultoria-section {
    position: relative;
}

/* ── Fondo base por sección: alternancia sutil de tonos ── */
/* qph-section ya tiene background: #0f0f0f */
/* casos-section ya tiene background: #141414 */
/* como-funciona-section ya tiene background: #0f0f0f */

.metricas-section  { background: #111111; }
.sobre-mi-section  { background: #0d0d0d; }   /* ligeramente más oscuro */
.testimonios-section { background: #111111; }
.contacto-section  { background: var(--color-black); }
.consultoria-section { background: #141414; }

/* ── Borde superior luminoso con efecto comet (::before) ── */
/* Técnica: background-position animation sobre dos capas superpuestas.
   Capa 1 (comet): gradiente con punto luminoso, background-size: 80% del ancho.
   Se anima de -80% a 180% en background-position, saliendo completamente
   por ambos bordes → loop 100% seamless, sin salto visible.
   Capa 2 (base): línea estática siempre visible, background-size: 100%.
   Nota: .qph-section tiene imagen de fondo + overlay propios, se omite aquí. */
.casos-section::before,
.recursos-section::before,
.como-funciona-section::before,
.metricas-section::before,
.sobre-mi-section::before,
.testimonios-section::before,
.contacto-section::before,
.consultoria-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background:
        /* Capa comet: punto luminoso que se desplaza */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 20%,
            rgba(255, 221, 0, 0.04) 30%,
            rgba(255, 221, 0, 0.5) 48%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 221, 0, 0.5) 52%,
            rgba(255, 221, 0, 0.04) 70%,
            transparent 80%,
            transparent 100%
        ) no-repeat,
        /* Capa base: línea estática siempre visible */
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 221, 0, 0.10) 50%,
            transparent 100%
        );
    background-size: 80% 100%, 100% 100%;
    background-position: -80% 0, 0 0;
    animation: comet-scan 5s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes comet-scan {
    0%   { background-position: -80% 0, 0 0; }
    100% { background-position: 180% 0, 0 0; }
}

/* ── Delays escalonados — cada sección dispara el comet en momentos distintos ── */
/* Efecto: el comet parece viajar por secciones distintas sin sincronizarse */
.casos-section::before          { animation-delay: 0s; }
.recursos-section::before       { animation-delay: 0.8s; }
.como-funciona-section::before  { animation-delay: 1.6s; }
.metricas-section::before       { animation-delay: 2.4s; }
.sobre-mi-section::before       { animation-delay: 3.2s; }
.testimonios-section::before    { animation-delay: 4.0s; }
.consultoria-section::before    { animation-delay: 4.8s; }
.contacto-section::before       { animation-delay: 5.6s; }

@media (prefers-reduced-motion: reduce) {
    /* Reemplazar animación por línea estática: retener el gradiente base sin movimiento */
    .casos-section::before,
    .recursos-section::before,
    .como-funciona-section::before,
    .metricas-section::before,
    .sobre-mi-section::before,
    .testimonios-section::before,
    .contacto-section::before,
    .consultoria-section::before {
        animation: none;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 221, 0, 0.10) 50%, transparent 100%);
        background-size: 100% 100%;
    }
}

/* ── Glow radial difuso en parte superior (::after) ── */
/* Elipse grande y difusa, casi imperceptible — da profundidad sin distraer */
/* Nota: .qph-section ya tiene imagen de fondo, se omite su ::after aquí */
.casos-section::after,
.recursos-section::after,
.como-funciona-section::after,
.metricas-section::after,
.sobre-mi-section::after,
.testimonios-section::after,
.contacto-section::after,
.consultoria-section::after {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 200px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 221, 0, 0.035) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* Secciones intercaladas con fondo más oscuro: glow ligeramente más fuerte */
.sobre-mi-section::after,
.metricas-section::after {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 221, 0, 0.045) 0%,
        transparent 70%
    );
}

/* ── Asegurar que el contenido quede SOBRE los pseudo-elementos ── */
/* Nota: .recursos-section y .qph-section usan z-index en sus hijos directamente
   (.qph-bg z:0, .qph-overlay z:1, .container-large z:2), así que no se listan aquí. */
.casos-section > *,
.como-funciona-section > *,
.metricas-section > *,
.sobre-mi-section > *,
.testimonios-section > *,
.contacto-section > *,
.consultoria-section > * {
    position: relative;
    z-index: 1;
}

.consultoria-cta {
    text-align: center;
    margin-top: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.consultoria-cta__nota {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.04em;
}

/* Secciones con imagen de fondo (curso, empresas): no necesitan el patrón
   porque ya tienen overlay de color propio. Se omiten aquí. */


/* =====================================================
   TAREA 2 — Métricas / Automatización Section (#metricas-ia)
   Posición: después de #como-funciona, antes de #sobre-mi.
   Grid 2x2 desktop / 1 col mobile.
   Cada card tiene: ícono, título, descripción y mini-gráfica SVG.
   ===================================================== */

.metricas-section {
    padding: 140px 0 160px;
    /* background y position:relative ya declarados arriba (TAREA 1) */
}

/* ── Section header ── */
.metricas-header {
    text-align: center;
    margin-bottom: 72px;
}

/* ── 2x2 grid desktop ── */
.metricas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* ── Individual metric card ── */
/* Resting: border-top transparente.
   Hover: border-top se ilumina con amarillo, box-shadow amarillo sutil. */
.metrica-card {
    background: #111111;
    border: 1px solid var(--color-border);         /* rgba(255,255,255,0.06) */
    border-top: 2px solid transparent;             /* resting: invisible */
    border-radius: 16px;
    padding: 36px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-top-color 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
    /* Entrance: start invisible */
    opacity: 0;
    transform: translateY(24px);
}

.metrica-card:hover {
    border-top-color: rgba(255, 221, 0, 0.5);
    box-shadow:
        0 0 0 1px rgba(255, 221, 0, 0.08),
        0 16px 48px rgba(0, 0, 0, 0.5);
    background: #161616;
}

/* Visible state — added by IntersectionObserver */
.metrica-card--visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.55s ease, transform 0.55s ease,
                border-top-color 0.3s ease, box-shadow 0.3s ease,
                background 0.3s ease;
}

/* Stagger: 4 cards, 120ms apart */
.metrica-card--visible:nth-child(1) { transition-delay:   0ms; }
.metrica-card--visible:nth-child(2) { transition-delay: 120ms; }
.metrica-card--visible:nth-child(3) { transition-delay: 240ms; }
.metrica-card--visible:nth-child(4) { transition-delay: 360ms; }

/* ── Card icon ── */
.metrica-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 221, 0, 0.08);
    border-radius: 10px;
    color: var(--color-accent);                    /* #FFDD00 */
    flex-shrink: 0;
}

/* ── Card title ── */
.metrica-card__title {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 600;
    color: var(--color-text-primary);              /* #f0f0f0 */
    line-height: 1.3;
    margin: 0;
}

/* ── Card description ── */
.metrica-card__desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-text-secondary);            /* rgba(255,255,255,0.65) */
    flex: 1;                                       /* pushes chart to bottom */
    margin: 0;
}

/* ── Mini chart container ── */
/* Fixed height 80px — purely decorative, no real data */
.metrica-card__chart {
    height: 80px;
    width: 100%;
    margin-top: 8px;
    /* Subtle top separator */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
    display: flex;
    align-items: flex-end;
}

.metrica-card__chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ── Terminal / chat chart: text elements ── */
.metrica-chart-terminal {
    width: 100%;
    height: 68px;
    background: #0a0a0a;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
}

.metrica-chart-terminal__line {
    font-family: 'Space Grotesk', monospace;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metrica-chart-terminal__line--prompt {
    color: var(--color-accent);                    /* yellow: user prompt */
}

.metrica-chart-terminal__line--response {
    color: rgba(180, 240, 180, 0.75);              /* soft green: AI response */
}

.metrica-chart-terminal__line--muted {
    color: rgba(255, 255, 255, 0.25);              /* dim: third line */
}

/* ── Tablet: keep 2-col but reduce gap ── */
@media (max-width: 1024px) and (min-width: 769px) {
    .metricas-section {
        padding: 100px 0 120px;
    }

    .metricas-grid {
        gap: 20px;
    }

    .metrica-card {
        padding: 28px 24px 22px;
    }
}

/* ── Mobile: 1-col ── */
@media (max-width: 768px) {
    .metricas-section {
        padding: 80px 0 100px;
    }

    .metricas-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .metrica-card {
        padding: 28px 24px 22px;
    }
}

/* ── Reduced motion: skip entrance ── */
@media (prefers-reduced-motion: reduce) {
    .metrica-card {
        opacity: 1;
        transform: none;
        transition: border-top-color 0.3s ease,
                    box-shadow 0.3s ease,
                    background 0.3s ease;
    }
}


/* =====================================================
   TAREA 3 — IA Tools Marquee Section
   Posición: justo antes del <footer>.
   Carrusel continuo de badges de texto con herramientas IA.
   Misma técnica que el carrusel de testimonios: JS clona
   los items, CSS maneja el loop con @keyframes.
   ===================================================== */

.ia-tools-section {
    padding: 10px 0;
    background: var(--color-bg, #0f0f0f);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

/* Subtle top glow — continuación del sistema de sección-glows */
.ia-tools-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 221, 0, 0.10) 50%,
        transparent 100%
    );
    pointer-events: none;
}

/* ── Section label — oculto per diseño nuevo ── */
.ia-tools-label {
    display: none;
}

/* ── Marquee wrapper: clips + fades edges ── */
.ia-tools-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* ── Scrolling track ── */
@keyframes ia-tools-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ia-tools-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    /* width:max-content garantiza que -50% == exactamente un set completo */
    width: max-content;
    animation: ia-tools-scroll 20s linear infinite;
    will-change: transform;
}

/* ── Individual badge — solo texto, sin cápsula, sin punto amarillo ── */
.ia-tool-badge {
    /* Sin cápsula — solo texto */
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 48px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.3s ease;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.ia-tool-badge:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Eliminar el punto amarillo que se generaba con ::before */
.ia-tool-badge::before {
    content: none;
}

/* ── Reduced motion: stop marquee ── */
@media (prefers-reduced-motion: reduce) {
    .ia-tools-track {
        animation: none;
        /* Show all badges in a wrapping row instead */
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        white-space: normal;
        gap: 16px;
        padding: 0 24px;
    }
    .ia-tool-badge {
        padding: 0 16px;
    }
}

/* ===================================================
   RECURSOS GRATUITOS SECTION
   Fondo con imagen de arquitectura + overlay oscuro.
   Mismo patrón visual que #curso y #empresas.
   =================================================== */
.recursos-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    border-top: none;   /* el ::before de glow-borders lo reemplaza */
}

/* Imagen de fondo — baja saturación y brillo para que el contenido destaque */
.recursos-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: brightness(0.25) saturate(0.5);
    z-index: 0;
}

/* Overlay degradado para profundidad extra */
.recursos-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10,10,10,0.85) 0%,
        rgba(10,10,10,0.60) 100%
    );
    z-index: 1;
}

/* El container-large sube sobre los pseudo-capas */
.recursos-section .container-large {
    position: relative;
    z-index: 2;
}

.recursos-header {
    text-align: center;
    margin-bottom: 60px;
}

/* Label y título heredan el color del sistema global */
.recursos-section .section-label {
    color: #FFDD00;
}

.recursos-section .section-title-large {
    color: #fff;
}

.recursos-intro {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.6);
    margin-top: 12px;
}

.recursos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Cards: glassmorphism oscuro — mismo estilo que .cf-block */
.recurso-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.3s ease,
                background 0.3s ease,
                transform 0.3s ease,
                box-shadow 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.recurso-card:hover {
    border-color: rgba(255,221,0,0.35);
    background: rgba(255,255,255,0.07);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

/* Featured card: tinte amarillo sutil */
.recurso-card--featured {
    border-color: rgba(255,221,0,0.30);
    background: rgba(255,221,0,0.06);
}

.recurso-card--featured:hover {
    border-color: rgba(255,221,0,0.50);
    background: rgba(255,221,0,0.10);
}

.recurso-card__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    padding: 4px 10px;
    border-radius: 100px;
    width: fit-content;
}

.recurso-card__badge--accent {
    color: #FFDD00;
    background: rgba(255,221,0,0.12);
}

.recurso-card__icon {
    color: #FFDD00;
    width: 56px;
    height: 56px;
    background: rgba(255,221,0,0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recurso-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.recurso-card p {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    flex: 1;
}

.recurso-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s;
    width: fit-content;
    margin-top: auto;
}

.recurso-card__cta--video {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
}

.recurso-card__cta--video:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.recurso-card__cta--download {
    background: #FFDD00;
    color: #0a0a0a;
    border: 1px solid #FFDD00;
}

.recurso-card__cta--download:hover {
    background: #FFE84D;
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .recursos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .recursos-grid {
        grid-template-columns: 1fr;
    }
    .recursos-section {
        padding: 70px 0;
    }
    /* background-attachment:fixed no funciona bien en iOS — usar scroll */
    .recursos-bg {
        background-attachment: scroll;
    }
}

/* ===================================================
   EMPRESAS MARQUEE — dentro de casos-de-exito
   Carrusel continuo de 4 estudios reales.
   Misma técnica que ia-tools: CSS loop + JS opcional.
   =================================================== */
.casos-empresas {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    text-align: center;
    overflow: hidden;
}

.casos-empresas__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 10px;
}

/* Wrapper con fade en los bordes */
.casos-empresas__track-wrapper {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

/* Track animado — translateX(-50%) porque el HTML ya tiene 2 sets de badges */
@keyframes empresas-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.casos-empresas__track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    /* width:max-content garantiza que -50% == exactamente un set completo */
    width: max-content;
    animation: empresas-scroll 18s linear infinite;
}

/* Pausa en hover — accesibilidad */
.casos-empresas__track-wrapper:hover .casos-empresas__track {
    animation-play-state: paused;
}

/* Badge de empresa: texto grande y bold */
.empresa-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 0 40px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    cursor: default;
    user-select: none;
}

.empresa-badge:hover {
    color: #FFDD00;
    text-shadow: 0 0 24px rgba(255,221,0,0.4);
}

/* Separador de punto — tono amarillo muy sutil */
.empresa-badge--dot {
    color: rgba(255,221,0,0.2);
    padding: 0 4px;
    font-size: 1.4rem;
    font-weight: 300;
}

.empresa-badge--dot:hover {
    color: rgba(255,221,0,0.2);
    text-shadow: none;
}

/* Reduced motion: muestra los badges estáticos */
@media (prefers-reduced-motion: reduce) {
    .casos-empresas__track {
        animation: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }
    .empresa-badge--dot {
        display: none;
    }
}

/* ===================================================
   CURSO PRECIO TOGGLE
   Estilos movidos al bloque principal del modal arriba
   =================================================== */
.curso-precio-box {
    margin-bottom: 32px;
}

.curso-precio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 11px 22px;
    border-radius: 100px;
    font-size: 0.87rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
    font-family: inherit;
}

.curso-precio-toggle:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

.curso-precio-toggle svg {
    transition: transform 0.3s;
}

.curso-precio-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.curso-precio-reveal {
    margin-top: 16px;
    padding: 20px 24px;
    background: rgba(255, 221, 0, 0.06);
    border: 1px solid rgba(255, 221, 0, 0.18);
    border-radius: 14px;
}

.curso-precio-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #FFDD00;
    line-height: 1;
}

.curso-precio-amount span {
    font-size: 2.8rem;
}

.curso-precio-nota {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 6px;
}

/* =====================================================
   MODAL SKILL EMAIL
   ===================================================== */
.modal-skill-email {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1),
                visibility 0.35s cubic-bezier(0.16,1,0.3,1);
}

.modal-skill-email.is-open {
    opacity: 1;
    visibility: visible;
}

.modal-skill-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.modal-skill-container {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6),
                inset 0 1px 0 rgba(255,255,255,0.06);
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
                opacity 0.4s cubic-bezier(0.16,1,0.3,1);
}

.modal-skill-email.is-open .modal-skill-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Línea de luz amarilla superior */
.modal-skill-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,221,0,0.5) 50%, transparent);
    z-index: 1;
}

.modal-skill-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-skill-close:hover { background: rgba(255,255,255,0.12); }

.modal-skill-close span {
    position: absolute;
    width: 12px;
    height: 1.5px;
    background: rgba(255,255,255,0.7);
    border-radius: 2px;
}
.modal-skill-close span:first-child { transform: rotate(45deg); }
.modal-skill-close span:last-child  { transform: rotate(-45deg); }

.modal-skill-content {
    padding: 40px 36px 36px;
}

.modal-skill-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 10px 0 8px;
    letter-spacing: -0.02em;
}

.modal-skill-subtitle {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.45);
    margin-bottom: 28px;
    line-height: 1.5;
}

.skill-form-field {
    margin-bottom: 16px;
}

.skill-form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.skill-form-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.skill-form-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.92rem;
    color: #fff;
    font-family: inherit;
    transition: border-color 0.25s, background 0.25s;
    outline: none;
    box-sizing: border-box;
}

.skill-form-input::placeholder { color: rgba(255,255,255,0.25); }

.skill-form-input:focus {
    border-color: rgba(255,221,0,0.4);
    background: rgba(255,255,255,0.07);
}

.skill-form-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFDD00;
    color: #0a0a0a;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.25s, transform 0.2s;
}

.skill-form-submit:hover {
    background: #FFE84D;
    transform: translateY(-1px);
}

.skill-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.skill-form-message {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}

.skill-form-message.success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.2);
    color: #86efac;
}

.skill-form-message.error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    color: #fca5a5;
}

@media (max-width: 480px) {
    .modal-skill-content { padding: 32px 24px 28px; }
    .modal-skill-title   { font-size: 1.2rem; }
}

/* =====================================================
   FAQ SECTION
   ===================================================== */
.faq-section {
    padding: 100px 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
}

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

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    background: none;
    border: none;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.25s;
}

.faq-question:hover {
    color: #FFDD00;
}

.faq-question[aria-expanded="true"] {
    color: #FFDD00;
}

.faq-icon {
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    color: rgba(255,255,255,0.4);
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
    color: #FFDD00;
}

.faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer p {
    padding-bottom: 22px;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
}

.faq-answer strong {
    color: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
    .faq-section { padding: 70px 0; }
    .faq-question { font-size: 0.92rem; }
}