/* ==========================================================================
   VARIABLES & DESIGN SYSTEM (Claymorphism Dark)
   ========================================================================== */
/* Departure Mono NO forma parte de la jerarquía tipográfica: es una dependencia
   de dibujo del logotipo ASCII de portada, igual que una fuente de iconos. El
   logo se compone de bloques █ y su cuadrícula está calculada sobre las métricas
   exactas de esta fuente (avance 0.6364em, bloque de 1.2727em de alto). Con
   cualquier otra mono —JetBrains Mono incluida— los renglones dejan de encajar.
   Único selector que la usa: .nv-hero-ascii pre (app.css). */
@font-face {
    font-family: 'Departure Mono';
    src: url('../fonts/DepartureMono-Regular.woff2') format('woff2'),
         url('../fonts/DepartureMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    /* block: con swap se dibuja primero en la mono del sistema y el logo
       aparece deformado hasta que carga. */
    font-display: block;
}

:root {
    /* Colors */
    --bg-main: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #161616;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);

    /* Brand Colors */
    --cyan-accent: #00E5FF;
    --cyan-dark: #00B4CC;
    --cyan-glow: #7FFFD4;

    /* Claymorphism Colors */
    --clay-surface-start: #1a1a1a;
    --clay-surface-end: #111111;
    --clay-shadow-dark: rgba(0, 0, 0, 0.7);
    --clay-shadow-light: rgba(0, 229, 255, 0.08);
    --clay-inner-glow: rgba(0, 229, 255, 0.12);

    /* ── Tipografía ───────────────────────────────────────────────────────────
       Tres familias, tres papeles. No añadir una cuarta sin quitar otra.
         · heading — Nunito 500/600/700/800. Títulos, rótulos, precios, números
           de paso: todo lo que marca jerarquía. Variable, rango real 500–800.
         · body    — Inter 400/500/600/700 + cursivas. Texto corrido, interfaz,
           botones y formularios. Variable, rango real 400–700: NO pedirle 800
           ni 900, el navegador los engorda a mano y se ve sucio.
         · mono    — JetBrains Mono 400. Acento «técnico»: URLs de los marcos de
           navegador, etiquetas de formato, rótulos de reserva.
       (Departure Mono queda fuera de esta lista a propósito: ver el @font-face
        de arriba.) */
    --font-heading: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    /* Radii */
    --radius-pill: 100px;
    --radius-clay: 28px;
    --radius-small: 16px;

    /* Shadows */
    --shadow-clay: 8px 8px 20px var(--clay-shadow-dark), -4px -4px 12px var(--clay-shadow-light);
    --shadow-clay-hover: 12px 12px 25px var(--clay-shadow-dark), -6px -6px 15px rgba(0, 229, 255, 0.15);
    --shadow-clay-pressed: 4px 4px 10px var(--clay-shadow-dark), -2px -2px 6px var(--clay-shadow-light);

    /* Transitions */
    --spring-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth-transition: all 0.3s ease;

    /* Menú móvil: una sola curva y duración para altura, radio y relleno,
       para que la píldora y el menú se muevan como una sola pieza */
    --menu-speed: 0.44s;
    --menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

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

/* Los controles de formulario NO heredan la tipografía del documento: el
   navegador les impone su propia fuente (Arial en Chrome/Windows). Sin esto,
   los botones del aviso de cookies y los campos de contacto salían en Arial
   mientras el resto de la página iba en la fuente de marca.
   Sólo se hereda la familia: heredar también el tamaño agrandaría todos los
   botones (el defecto del navegador es 13.33px, el del documento 16px) y eso
   movería maquetaciones ya ajustadas. */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Utility Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.text-cyan {
    color: var(--cyan-accent);
}

.text-white {
    color: var(--text-primary);
}

.section-padding {
    padding: 100px 0;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}


/* Typography */
h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-size: 3rem;
}

h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

p {
    font-weight: 400;
}

p.hero-subtitle,
p.section-subtitle {
    font-weight: 500;
}

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

.text-link {
    color: var(--text-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.text-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--cyan-accent);
    transition: var(--smooth-transition);
}

.text-link:hover::after {
    width: 100%;
}

/* ==========================================================================
   CUSTOM CURSOR (Removed)
   ========================================================================== */

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-main);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

body.loaded .loader {
    opacity: 0;
    visibility: hidden;
}

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

.progress-bar-container {
    width: 280px;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: var(--cyan-accent);
    border-radius: 4px;
    box-shadow: 0 0 12px var(--cyan-accent);
    animation: loadProgress 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 0.8s ease-in-out infinite;
}

@keyframes loadProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes shimmer {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}

/* ==========================================================================
   CLAYMORPHISM COMPONENTS
   ========================================================================== */
.clay-card,
.btn-clay {
    background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end));
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay);
}

/* Buttons */
.btn-clay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--radius-clay);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: var(--spring-transition);
    transform-style: preserve-3d;
    gap: 10px;
    outline: none;
}

.btn-clay:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay-hover);
}

.btn-clay:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay-pressed);
}

.btn-primary {
    background: var(--cyan-accent);
    color: var(--bg-main);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 8px 8px 20px rgba(0, 229, 255, 0.2);
}

.btn-primary:hover {
    background: var(--cyan-glow);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 12px 12px 25px rgba(0, 229, 255, 0.3);
}

.btn-outline {
    color: var(--text-primary);
}

.btn-pill {
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    font-size: 0.85rem;
}

.btn-small {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.btn-huge {
    padding: 20px 40px;
    font-size: 1.2rem;
    border-radius: 40px;
}

/* Cards */
.clay-card {
    border-radius: var(--radius-clay);
    padding: 40px;
    transition: var(--spring-transition);
}

/* .clay-card:hover — single definition in ENHANCED ANIMATIONS section below */

/* badge-clay: not currently used, kept as placeholder */
.badge-clay {
    display: none;
}

/* ==========================================================================
   HEADER PILL
   ========================================================================== */
.header-pill {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 100%;
    max-width: 1000px;
    z-index: 1000;
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius var(--menu-speed) var(--menu-ease),
        box-shadow 0.3s ease;
}

.header-content {
    background: linear-gradient(145deg, #181818, #111111);
    border-radius: var(--radius-pill);
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(0, 229, 255, 0.05);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), var(--shadow-clay);
    transition: var(--smooth-transition);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-pill.scrolled .header-content {
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.15);
}

/* .logo — single definition below at line ~561 */

.desktop-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-link {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
}

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

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

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan-accent);
    box-shadow: 0 0 8px var(--cyan-accent);
}

/* Mobile Menu Removed */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 60px;
    padding-bottom: 60px;
    overflow: hidden;
}

.hero-bg-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
    z-index: -1;
    animation: drift 20s linear infinite;
}

@keyframes drift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 400px 400px;
    }
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/fondo-horizontal.webp') no-repeat center center;
    background-size: cover;
    opacity: 0.75;
    z-index: -2;
}

/* hero-bg-particles z-index handled in main definition above */

.hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding-top: 80px;
    position: relative;
    z-index: 1;
}

.hero-content.centered {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: -50px;
    /* Nudge up slightly more */
}

/* .hero-seal / .hero-ascii eliminados: eran el ASCII de la portada anterior,
   en Courier New, y ningún elemento los invocaba desde que la portada pasó a
   .nv-hero-ascii (app.css). */

.hero-subtitle-container {
    margin-top: -20px;
    margin-bottom: 40px;
    width: 100%;
}

.hero-tagline {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(11px, 2.5vw, 22px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    opacity: 1;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

.hero-buttons {
    display: flex;
    gap: 16px;
}

@media (max-width: 768px) {
    .hero-subtitle-container {
        margin-top: 10px;
        margin-bottom: 25px;
    }

    .hero-tagline {
        font-size: 0.8rem;
        letter-spacing: 0.1em;
    }

    .hero-buttons .btn-clay {
        width: 100%;
        text-align: center;
    }

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

    /* M7.6 Step 3: Tools grid 2 columns */
    .accordion-body.tools-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background-color: #060606;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/fondo-horizontal.webp') no-repeat center center;
    background-size: cover;
    opacity: 0.4;
    z-index: 0;
}

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

.hero-brand-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.hero-brand-logo {
    height: 6.6em;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    transition: var(--spring-transition);
}

.hero-brand-logo:hover {
    transform: scale(1.1) rotate(10deg);
}

.brand-logo-img {
    height: 1.2em;
    /* Altura exacta acorde al tamaño del texto */
    width: auto;
    margin-left: 8px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    vertical-align: middle;
}

/* Antes iba en Press Start 2P: una cuarta familia que sólo existía en las
   páginas sueltas y no aparecía en la portada. Ahora usa la display del
   sistema, para que la marca se lea igual en las diez páginas. */
.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    /* 0.82rem era el ajuste del pixel font, que dibuja mucho más grande de lo
       que dice su tamaño. Con una fuente normal hay que subirlo. */
    font-size: 1.15rem;
    letter-spacing: 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--spring-transition);
}

.logo:hover {
    transform: scale(1.05);
}

/* badge-clay override removed — single definition above */

/* .text-white and .hero-buttons duplicate removed — defined above */

.hero-visuals {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: auto;
    display: flex;
    flex-direction: column;
}

/* Tech Stack Section Refactored */
.stack {
    background: linear-gradient(to bottom, #0a0a0a, #0d0d0d);
}

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

.category-box {
    background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end));
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-clay);
    padding: 32px;
    transition: var(--spring-transition);
}

.category-box:hover {
    transform: translateY(-8px);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay-hover);
}

.category-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cyan-accent);
    font-weight: 800;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    padding-bottom: 12px;
}

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

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

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

.tool-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: default;
    min-height: 90px;
}

.tool-item img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.tool-item i {
    font-size: 2rem;
}

.tool-item span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
}

/* Custom Logos & Badges */
.custom-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Es un distintivo de marca, no texto: va en la display, que sí tiene 800.
       Heredando la de cuerpo (Inter, tope 700) el navegador lo engordaba a mano. */
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.3rem;
}

.cursor-logo {
    background: #000;
    color: var(--cyan-accent);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.capcut-logo {
    background: #000;
    color: #fff;
    background: linear-gradient(45deg, #FE2C55, #FFB400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.capcut-logo::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: -1;
    border-radius: 8px;
}

.claude-code-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.code-badge {
    position: absolute;
    bottom: -5px;
    background: var(--cyan-accent);
    color: #000;
    font-size: 0.5rem;
    /* 900 no se carga de ninguna de las dos familias: 800 es el tope real. */
    font-family: var(--font-heading);
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    text-transform: uppercase;
}

.text-cyan {
    color: var(--cyan-accent);
}


/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-text h2 {
    margin-bottom: 30px;
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

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

.about-text .text-link {
    margin-top: 16px;
}

.stats-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 50px;
}

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

.stat-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
}

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.section-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 16px;
}

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

.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-small);
    background: rgba(0, 229, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--cyan-accent);
    margin-bottom: 24px;
    box-shadow: inset 0 1px 1px rgba(0, 229, 255, 0.2);
}

.service-card h3 {
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: 32px;
    flex-grow: 1;
}

.service-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-tag {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

.service-link {
    font-weight: 600;
    font-size: 0.9rem;
}

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

/* ==========================================================================
   COURSES SECTION
   ========================================================================== */
.clay-tabs-header {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    background: var(--clay-surface-start);
    padding: 8px;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--smooth-transition);
}

.tab-btn.active {
    background: var(--clay-surface-end);
    color: var(--text-primary);
    box-shadow: var(--shadow-clay);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

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

.course-card {
    position: relative;
}

.course-level {
    display: inline-block;
    background: var(--cyan-accent);
    color: var(--bg-main);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 229, 255, 0.3);
    margin-bottom: 8px;
}

.course-card h4 {
    margin-top: 10px;
    margin-bottom: 12px;
}

.course-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.course-link {
    color: var(--text-primary);
    font-weight: 600;
}

/* ==========================================================================
   PROCESS SECTION
   ========================================================================== */
.process-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 60px;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.1), var(--cyan-accent), rgba(0, 229, 255, 0.1));
    z-index: 0;
    transform: translateY(-50%);
}

.process-step {
    flex: 1;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}

.step-card {
    padding: 30px 24px;
    text-align: center;
    position: relative;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--bg-main);
    border: 2px solid var(--cyan-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-heading);
    margin: 0 auto 16px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

.step-card h4 {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.step-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   BLOG SECTION
   ========================================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 60px;
}

.blog-card {
    padding: 24px;
}

.blog-image-placeholder {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, #111111, #1a1a1a);
    border: 1px solid rgba(0, 229, 255, 0.05);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.blog-image-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-20deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

.blog-category {
    font-size: 0.8rem;
    color: var(--cyan-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

.blog-content h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.blog-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.blog-link {
    font-weight: 600;
    color: var(--text-primary);
}

/* ==========================================================================
   CTA FINAL SECTION
   ========================================================================== */
.cta-final {
    background-color: var(--bg-secondary);
}

.cta-container {
    text-align: center;
    max-width: 800px;
}

.cta-container h2 {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.cta-container>p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.cta-legal {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 16px;
    opacity: 0.7;
}

/* CTA Final — Contact Form Card */
.cta-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 40px auto 24px;
    max-width: 480px;
    opacity: 0.65;
}
.cta-divider::before,
.cta-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.25), transparent);
}
.cta-form {
    max-width: 560px;
    margin: 0 auto;
    padding: 32px !important;
    text-align: left;
}
.cta-form-title {
    font-size: 1.4rem;
    margin-bottom: 6px;
    text-align: center;
    color: var(--text-primary);
}
.cta-form-subtitle {
    font-size: 0.92rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 22px;
}
.cta-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.cta-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.cta-field > span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.cta-field > span em {
    font-style: normal;
    opacity: 0.55;
    font-weight: 400;
}
.cta-field input,
.cta-field textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 229, 255, 0.10);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.cta-field textarea {
    resize: vertical;
    min-height: 90px;
}
.cta-field input::placeholder,
.cta-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.cta-field input:focus,
.cta-field textarea:focus {
    outline: none;
    border-color: rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.10);
}
.cta-form-submit {
    width: 100%;
    margin-top: 8px;
    padding: 14px 24px !important;
    font-size: 1rem;
    border-radius: var(--radius-pill);
}
.cta-form-legal {
    font-size: 0.78rem;
    color: var(--text-secondary);
    opacity: 0.7;
    text-align: center;
    margin-top: 12px;
}
@media (max-width: 768px) {
    .cta-divider {
        margin: 32px auto 20px;
        font-size: 0.75rem;
    }
    .cta-form {
        padding: 22px !important;
        border-radius: 22px !important;
    }
    .cta-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .cta-form-title {
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */


.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo {
    margin-bottom: 16px;
    display: inline-block;
    position: relative;
}

.by-ys {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: left;
    letter-spacing: 0.15em;
    font-weight: 400;
    margin-top: 4px;
}

.brand-col p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.social-links {
    display: flex;
    gap: 12px;
}

.clay-pill-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--clay-surface-start);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(255, 255, 255, 0.05);
    transition: var(--spring-transition);
}

.clay-pill-icon i {
    pointer-events: none;
}

.clay-pill-icon:hover {
    transform: translateY(-3px);
    color: var(--cyan-accent);
    box-shadow: inset 0 1px 1px rgba(0, 229, 255, 0.2), 6px 6px 15px rgba(0, 0, 0, 0.6);
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 24px;
    color: var(--cyan-accent);
}

.footer-col a {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.footer-col a:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}

.subfooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 229, 255, 0.15);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   COOKIE BANNER
   ========================================================================== */
/* El estado oculto NO puede depender solo de translateY(150%): ese 150% es
   relativo a la altura del propio banner, así que si cambia la altura o la
   distancia al borde inferior, el banner se queda a medio salir y sigue
   tapando la pantalla. Con visibility + opacity desaparece siempre. */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 999;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 600px;
    transform: translateY(150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.32s ease,
        visibility 0s linear 0.6s;
}

.cookie-banner.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.32s ease,
        visibility 0s linear 0s;
}

/* Cerrado a mano: fuera de la pantalla y fuera del flujo, sin excepciones */
.cookie-banner[hidden] {
    display: none !important;
}

.cookie-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cookie-content i {
    font-size: 1.5rem;
}

.cookie-content p {
    font-size: 0.9rem;
    margin: 0;
}

.cookie-buttons {
    display: flex;
    gap: 12px;
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* .delay-* — single definition in ENHANCED ANIMATIONS section below */



/* Tablet & Mobile Adjustments */
@media (max-width: 1023px) {
    .hero-title {
        font-size: 3rem;
    }

    .about-grid {
        gap: 40px;
    }

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

    .process-timeline {
        flex-wrap: wrap;
        gap: 30px;
    }

    .process-timeline::before {
        display: none;
    }

    .process-step {
        flex: 1 1 40%;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ==========================================================================
   MOBILE — UNIFIED RULES (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- LAYOUT & SPACING --- */
    .container {
        padding: 0 20px;
    }

    .section-padding {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 32px;
    }

    /* --- TYPOGRAPHY --- */
    h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    h2 {
        font-size: clamp(1.4rem, 5.5vw, 1.9rem);
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
    }

    h4 {
        font-size: clamp(1rem, 3.5vw, 1.2rem);
    }

    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .cta-container h2 {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }

    .section-subtitle {
        font-size: 0.95rem;
        margin-top: 12px;
    }

    /* --- HEADER: Floating Pill --- */
    .header-pill {
        top: 16px;
        width: calc(100% - 32px);
        max-width: 100%;
        transform: translateX(-50%);
        border-radius: var(--radius-pill);
        z-index: 1000;
    }

    .header-content {
        padding: 8px 16px;
        border-radius: var(--radius-pill);
        flex-wrap: nowrap;
    }

    .desktop-nav {
        display: none !important;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .mobile-menu-btn {
        display: flex !important;
    }

    .logo {
        font-size: 0.9rem;
    }

    .logo span {
        display: none !important;
    }

    .brand-logo-img {
        height: 22px;
    }



    /* --- HERO --- */
    .hero {
        text-align: center;
        justify-content: center;
        padding-top: 80px;
        min-height: 85vh;
    }

    .hero-content {
        margin: 0 auto;
        max-width: 100%;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-buttons .btn-clay {
        width: 100%;
        justify-content: center;
    }

    .hero-page {
        min-height: 40vh !important;
        padding-top: 80px !important;
    }

    /* --- CARDS & GRIDS --- */
    .clay-card {
        border-radius: 20px;
        padding: 24px;
    }

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

    .stats-card {
        padding: 24px;
    }

    .mobile-carousel {
        display: flex !important;
        flex-direction: column !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        gap: 16px !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: auto !important;
    }

    .mobile-carousel>* {
        scroll-snap-align: none !important;
        min-width: 100% !important;
        flex-shrink: 1 !important;
        width: 100% !important;
    }

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

    /* --- TABS (Cursos) --- */
    .clay-tabs-header {
        flex-direction: row;
        width: 100%;
        border-radius: var(--radius-pill);
        padding: 6px;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .clay-tabs-header::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 0.82rem;
        border-radius: var(--radius-pill);
        flex-shrink: 0;
    }

    /* --- PROCESS --- */
    .process-timeline {
        flex-direction: column;
        gap: 32px;
    }

    .process-timeline::before {
        display: none;
    }

    .process-step {
        width: 100%;
        padding: 0;
    }

    /* --- BLOG --- */
    .blog-grid {
        gap: 20px;
    }

    .cat-pill {
        padding: 6px 14px;
        font-size: 0.78rem;
    }

    .blog-article-hero {
        padding: 90px 0 40px;
    }

    .blog-article-body p {
        font-size: 1rem;
    }

    /* --- MEGA SERVICE CARDS --- */
    .mega-service-card {
        padding: 24px;
    }

    .mega-service-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin-bottom: 16px;
    }

    .mega-tabs {
        gap: 6px;
    }

    .mega-tab {
        padding: 5px 12px;
        font-size: 0.72rem;
    }

    .mega-tab-content {
        min-height: 100px;
    }

    /* --- FOOTER --- */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .footer-grid .brand-col {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-grid .brand-col .social-links {
        justify-content: center;
    }

    .footer-col h4 {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .footer-col a {
        font-size: 0.85rem;
    }

    .subfooter {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* --- COOKIE BANNER --- */
    .cookie-banner {
        flex-direction: column;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        padding: 16px;
    }

    .cookie-buttons {
        width: 100%;
    }

    .cookie-buttons button {
        flex: 1;
    }

    /* --- CTA SECTION --- */
    .cta-container {
        padding: 40px 24px !important;
    }

    .btn-huge {
        padding: 14px 28px;
        font-size: 0.95rem;
    }

    /* --- FAQ --- */
    .faq-section .accordion-header {
        padding: 16px 20px;
        font-size: 0.92rem;
    }

    .faq-section .accordion-body {
        padding: 0 20px;
    }

    .faq-section .accordion-header.active+.accordion-body {
        padding: 0 20px 20px;
    }
}

/* ==========================================================================
   MEGA SERVICE CARDS (Servicios Page)
   ========================================================================== */
.servicios-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.mega-service-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
}

.mega-service-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-small);
    background: rgba(0, 229, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--cyan-accent);
    margin-bottom: 20px;
    box-shadow: inset 0 1px 1px rgba(0, 229, 255, 0.2);
}

.mega-service-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
    line-height: 1.5;
}

.mega-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mega-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: var(--smooth-transition);
}

.mega-tab:hover {
    color: var(--text-primary);
    border-color: rgba(0, 229, 255, 0.3);
}

.mega-tab.active {
    background: rgba(0, 229, 255, 0.15);
    color: var(--cyan-accent);
    border-color: rgba(0, 229, 255, 0.3);
}

.mega-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
    min-height: 140px;
}

.mega-tab-content.active {
    display: block;
}

.mega-tab-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.mega-tab-content li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 6px 0 6px 18px;
    position: relative;
}

.mega-tab-content li::before {
    content: '•';
    color: var(--cyan-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.mega-cta {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

@media (max-width: 1023px) {
    .servicios-mega-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   MOBILE MENU SYSTEM — FIXED
   ========================================================================== */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1002;
}

.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}

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

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

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

/* ── MENÚ MÓVIL ────────────────────────────────────────────────────────────
   La píldora crece hasta convertirse en tarjeta, como una sola pieza.
   La altura se anima con grid-template-rows (0fr → 1fr), que mide el contenido
   REAL. Antes se usaba un max-height fijo (420px / 460px) que no coincidía con
   la altura verdadera: por eso el despliegue daba un tirón y la esquina se
   deformaba a destiempo. Ahora altura y radio comparten curva y duración.  */
.mobile-drawer {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 20px;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
    transition:
        grid-template-rows var(--menu-speed) var(--menu-ease),
        padding var(--menu-speed) var(--menu-ease),
        opacity 0.24s ease;
}

.mobile-drawer.open {
    grid-template-rows: 1fr;
    padding: 2px 20px 18px;
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    scrollbar-width: none;
}
.mobile-drawer-inner::-webkit-scrollbar { display: none; }

.mobile-drawer.open .mobile-drawer-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
}

/* La píldora acompaña el movimiento con la MISMA curva y duración */
.header-pill:has(.mobile-drawer.open) {
    border-radius: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer,
    .header-pill { transition: opacity 0.2s ease !important; }
}

/* OVERLAY — Efecto iOS de opacidad y desenfoque */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    z-index: 998;
    /* Justo debajo del header */
    transition: opacity 0.4s ease;
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--smooth-transition);
}

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

.mobile-nav-link.active {
    color: var(--cyan-accent);
}


.mobile-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    background: var(--cyan-accent);
    color: var(--bg-main);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

/* Mobile drawer visibility handled in unified mobile block above */
/* ==========================================================================
   MOBILE MODAL SYSTEM
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal-sheet {
    background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end));
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px 24px 40px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.open .modal-sheet {
    transform: translateY(0);
}

.modal-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin: 0 auto 24px;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   ENHANCED ANIMATIONS
   ========================================================================== */
.clay-card:hover {
    transform: translateY(-8px);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay-hover), 0 0 30px rgba(0, 229, 255, 0.05);
}

.btn-clay:active {
    transform: translateY(2px) scale(0.97);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay-pressed);
}

/* Staggered reveals */
.reveal.delay-1 {
    transition-delay: 0.1s;
}

.reveal.delay-2 {
    transition-delay: 0.2s;
}

.reveal.delay-3 {
    transition-delay: 0.3s;
}

.reveal.delay-4 {
    transition-delay: 0.4s;
}

.reveal.delay-5 {
    transition-delay: 0.5s;
}

/* FAQ Accordion styles (global) */
.faq-section .accordion-item {
    background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end));
    margin-bottom: 12px;
    border-radius: var(--radius-small);
    overflow: hidden;
    box-shadow: var(--shadow-clay);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.faq-section .accordion-header {
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--smooth-transition);
}

.faq-section .accordion-header:hover {
    color: var(--cyan-accent);
}

.faq-section .accordion-header i {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.faq-section .accordion-header.active i {
    transform: rotate(180deg);
}

.faq-section .accordion-header.active {
    color: var(--cyan-accent);
}

.faq-section .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 24px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-section .accordion-header.active+.accordion-body {
    max-height: 300px;
    padding: 0 24px 24px;
}

/* Blog article page styles */
.blog-article {
    max-width: 760px;
    margin: 0 auto;
}

.blog-article-hero {
    padding: 140px 0 60px;
    text-align: center;
}

.blog-article-meta {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 20px;
    flex-wrap: wrap;
}

.blog-article-body {
    padding: 0 0 80px;
}

.blog-article-body h2 {
    margin-top: 48px;
    margin-bottom: 20px;
}

.blog-article-body p {
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.blog-article-body blockquote {
    border-left: 3px solid var(--cyan-accent);
    padding: 20px 24px;
    margin: 32px 0;
    background: rgba(0, 229, 255, 0.05);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.blog-article-body ul,
.blog-article-body ol {
    color: var(--text-secondary);
    padding-left: 24px;
    margin-bottom: 20px;
}

.blog-article-body li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.blog-related {
    padding: 60px 0;
}


/* ==========================================================================
   HERO BUTTONS & MOBILE ADJUSTMENTS (FIX 1-D)
   ========================================================================== */
.hero-buttons .btn-clay {
    position: relative;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
}

.hero-buttons .btn-primary {
    background: linear-gradient(145deg, #00e5ff, #00b8cc);
    color: #0a0a0a;
    border: none;
    box-shadow:
        0 8px 24px rgba(0, 229, 255, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.hero-buttons .btn-primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 14px 32px rgba(0, 229, 255, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.hero-buttons .btn-outline {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hero-buttons .btn-outline:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 229, 255, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    color: var(--cyan-accent);
}

/* ==========================================================================
   BOTTOM SHEET MODAL (FIX 3-B)
   ========================================================================== */
.bottom-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.bottom-sheet-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(145deg, #181818, #111111);
    border-radius: 24px 24px 0 0;
    padding: 20px 24px 40px;
    z-index: 2001;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 85vh;
    overflow-y: auto;
    border-top: 1px solid rgba(0, 229, 255, 0.1);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.8);
}

.bottom-sheet.open {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 20px;
}

.bottom-sheet-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.bottom-sheet-content .course-level {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.85rem;
}



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

.bottom-sheet-content p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
}

.bottom-sheet-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    background: linear-gradient(145deg, #00e5ff, #00b8cc);
    color: #0a0a0a;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 20px;
    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.3);
}

/* ==========================================================================
   STACK SECTION ACCORDION (FIX 2-B)
   ========================================================================== */
.accordion-item {
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid rgba(0, 229, 255, 0.08);
    margin-bottom: 12px;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    letter-spacing: 0.02em;
    transition: background 0.2s ease;
}

.accordion-header:hover {
    background: rgba(0, 229, 255, 0.04);
}

.accordion-header[aria-expanded="true"] {
    color: var(--cyan-accent);
    border-bottom: 1px solid rgba(0, 229, 255, 0.08);
}

.accordion-chevron {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-secondary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.accordion-header[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
    color: var(--cyan-accent);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
}

.accordion-body.open {
    max-height: 500px;
    padding: 16px 20px 20px;
    opacity: 1;
}

@media (min-width: 769px) {
    .accordion-header .accordion-chevron {
        display: none;
    }

    .accordion-header {
        cursor: default;
        pointer-events: none;
    }

    /* Fix #11: category-title must stay cyan, override accordion-header color */
    .stack-categories-grid .accordion-header.category-title {
        color: var(--cyan-accent) !important;
    }

    .accordion-body {
        max-height: none !important;
        padding: 0 !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .stack-categories-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px;
    }

    .category-box {
        background: var(--bg-card);
        border-radius: 20px;
        padding: 24px;
        border: 1px solid rgba(0, 229, 255, 0.08);
    }

    .category-title {
        font-size: 0.85rem;
        color: var(--cyan-accent);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 20px;
        padding: 0 !important;
        background: none !important;
    }
}

/* ==========================================================================
   MOBILE UNIFIED FIXES (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Stack & Accordion */
    .stack-categories-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .accordion-item {
        border-radius: 16px;
        margin-bottom: 8px;
    }

    /* Header Pill Fix: single expanding piece */
    .header-pill {
        position: fixed;
        top: 16px;
        left: 50% !important;
        width: calc(100% - 32px) !important;
        transform: translateX(-50%) translateZ(0) !important;
        z-index: 1000;
        background: linear-gradient(145deg, #181818, #111111) !important;
        border-radius: 28px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        /* Fix #4: removed overflow:hidden so the drawer can expand */
        overflow: visible !important;
        transition: transform 0.4s ease, height 0.4s ease !important;
        will-change: transform;
    }

    .header-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 16px !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }


    /* Hero Stacking Fix */
    .hero-container {
        flex-direction: column !important;
        padding-top: 75px !important;
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .hero-content.centered {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 18px !important;
        margin-top: 0 !important;
    }

    .hero-brand-area {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Hero Background Fix */
    .hero::before {
        background-image: url('../img/fondo-vertical.webp');
        background-size: cover;
        background-position: center center;
        opacity: 0.75;
        transform: none;
    }

    /* Logo Fix */
    .logo span {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
    }

    /* Blog Categories Scroll */
    .blog-categories {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .blog-categories::-webkit-scrollbar {
        display: none;
    }

    .cat-pill {
        flex-shrink: 0;
    }

    /* Blog Grid Stack */
    .blog-grid {
        display: flex !important;
        flex-direction: column !important;
        overflow-x: visible !important;
        gap: 20px !important;
    }

    .blog-grid .blog-card {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Form Input Zoom Fix iOS */
    input,
    textarea,
    select {
        font-size: 16px !important;
        border-radius: 12px;
    }

    /* Servicios and Courses Mobile Grids */
    .services-grid.mobile-carousel,
    .courses-grid.mobile-carousel {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .services-grid.mobile-carousel>.clay-card,
    .courses-grid.mobile-carousel>.clay-card {
        width: 100% !important;
        min-width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* Mega Tabs */
    .mega-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .mega-tab {
        flex: 1 1 auto;
        text-align: center;
    }

    /* Contact Grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ==========================================================================
   BACK BUTTON (B1.4)
   ========================================================================== */
.btn-back-float {
    position: fixed;
    top: 90px;
    left: 20px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan-accent);
    font-size: 1rem;
    transition: var(--spring-transition);
    background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end));
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay);
}

.btn-back-float:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: inset 0 1px 1px var(--clay-inner-glow), var(--shadow-clay-hover);
}

@media (max-width: 768px) {
    .btn-back-float {
        top: 80px;
        left: 12px;
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   HERO BUTTONS V2 (D2.3)
   ========================================================================== */
.btn-hero-primary {
    background: linear-gradient(135deg, var(--cyan-accent), var(--cyan-dark));
    color: var(--bg-main);
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 36px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transition: var(--spring-transition);
}

.btn-hero-primary:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 0 36px rgba(0, 229, 255, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.btn-hero-secondary {
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    padding: 15px 36px;
    border-radius: 100px;
    border: 1.5px solid rgba(0, 229, 255, 0.3);
    box-shadow: inset 0 1px 1px rgba(0, 229, 255, 0.08), var(--shadow-clay);
    transition: var(--spring-transition);
}

.btn-hero-secondary:hover {
    border-color: rgba(0, 229, 255, 0.7);
    color: var(--cyan-accent);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15), inset 0 1px 1px rgba(0, 229, 255, 0.15);
}

/* ==========================================================================
   CARD HIGHLIGHT ANIMATION (D3.1)
   ========================================================================== */
@keyframes cardPulse {
    0% {
        box-shadow: var(--shadow-clay), 0 0 0 0 rgba(0, 229, 255, 0.6);
    }

    40% {
        box-shadow: var(--shadow-clay), 0 0 0 16px rgba(0, 229, 255, 0.2);
    }

    100% {
        box-shadow: var(--shadow-clay), 0 0 0 0 rgba(0, 229, 255, 0);
    }
}

.card-highlight {
    animation: cardPulse 2s ease-out forwards;
    border-color: rgba(0, 229, 255, 0.4) !important;
}

/* ==========================================================================
   STATS CARD 2-COLUMN (D2.4)
   ========================================================================== */
.stats-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 32px;
}

.stat-item {
    padding: 20px 24px;
    text-align: center;
}

.stat-divider {
    display: none;
}

.stat-item:nth-child(-n+4) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stat-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   STACK CAROUSEL CONTROLS (M7.6)
   ========================================================================== */
.stack-carousel-controls {
    display: none;
}

.section-carousel-controls {
    display: none;
}

@media (max-width: 768px) {

    .stack-carousel-controls,
    .section-carousel-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-bottom: 16px;
    }

    .stack-carousel-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end));
        color: var(--cyan-accent);
        box-shadow: var(--shadow-clay);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        transition: var(--spring-transition);
    }

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

    .stack-carousel-indicator {
        color: var(--text-secondary);
        font-size: 0.85rem;
        min-width: 40px;
        text-align: center;
    }

    .stack-categories-grid .category-box {
        display: none;
    }

    .stack-categories-grid .category-box.carousel-active {
        display: block;
    }

    /* M7.5: Stats as pills */
    .stats-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .stats-card .stat-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 20px !important;
        border-radius: 100px !important;
        text-align: left !important;
        background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end));
        box-shadow: inset 0 1px 1px var(--clay-inner-glow), 4px 4px 10px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.03) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
    }

    .stats-card .stat-number {
        font-size: 1.5rem !important;
        min-width: 56px;
        text-align: right;
    }

    .stats-card .stat-label {
        font-size: 0.85rem !important;
        color: var(--text-secondary);
        flex: 1;
    }

    .stats-card .stat-divider {
        display: none !important;
    }

    /* M7.9: Process grid 2x2 */
    .process-step {
        position: relative;
    }

    .step-number {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: inline-flex !important;
        margin-bottom: 8px;
        font-size: 1.2rem;
    }

    .step-card {
        padding: 20px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .process-timeline {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 1fr !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .process-step {
        display: flex !important;
        height: 100% !important;
    }

    .process-step .clay-card {
        width: 100% !important;
    }

    /* Services carousel mobile */
    .services-grid.mobile-carousel .service-card,
    .servicios-mega-grid.mobile-carousel .mega-service-card {
        display: none;
    }

    .services-grid.mobile-carousel .service-card.carousel-active,
    .servicios-mega-grid.mobile-carousel .mega-service-card.carousel-active {
        display: flex;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Blog carousel mobile */
    .blog-grid.mobile-carousel .blog-card {
        display: none !important;
    }

    .blog-grid.mobile-carousel .blog-card.carousel-active {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Courses carousel mobile */
    .courses-grid.mobile-carousel .course-card {
        display: none;
    }

    .courses-grid.mobile-carousel .course-card.carousel-active {
        display: flex;
        flex-direction: column;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Stack carousel: force active to show */
    .stack-categories-grid .category-box.carousel-active {
        opacity: 1 !important;
        transform: none !important;
    }

    /* D6.2: Blog post mobile styles */
    .blog-article-hero {
        padding: 80px 0 30px !important;
        min-height: auto !important;
    }

    .blog-article-hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.25;
    }

    .blog-article-body {
        padding: 0 !important;
    }

    .blog-article-body p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .blog-article-body h2 {
        font-size: 1.4rem;
    }

    .blog-article-body blockquote {
        margin: 20px 0;
        padding: 16px 20px;
        font-size: 0.95rem;
    }

    .blog-article-meta {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.82rem;
    }


    /* M8.1: Legal & support pages mobile */
    .hero-page {
        min-height: 40vh !important;
        padding-top: 80px !important;
    }

    .hero-page h1 {
        font-size: 1.8rem !important;
        line-height: 1.25;
    }

    .hero-page .section-subtitle {
        font-size: 0.95rem !important;
    }

    /* Legal text readability */
    .section-padding p,
    .section-padding li {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

/* ==========================================================================
   V3 — NEW MOBILE OVERHAUL (Header / Hero / Beneficios / Carrusel Enfoque / Trabajos)
   Applies to both desktop & mobile where indicated. Overrides are scoped.
   ========================================================================== */

/* ---- HEADER: pill expandible (sin doble card) ---- */
@media (max-width: 768px) {
    .header-pill {
        top: 14px !important;
        background: linear-gradient(150deg, #1d1d1d, #0f0f0f) !important;
        border: 1px solid rgba(0, 229, 255, 0.10) !important;
        border-radius: 100px !important;
        box-shadow:
            inset 0 1px 1px rgba(0, 229, 255, 0.12),
            inset 0 -2px 4px rgba(0, 0, 0, 0.4),
            0 12px 32px rgba(0, 0, 0, 0.65),
            0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        transition:
            border-radius var(--menu-speed) var(--menu-ease),
            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s ease !important;
    }
    .header-pill.menu-open,
    .header-pill:has(.mobile-drawer.open) {
        border-radius: 28px !important;
    }
    .header-content {
        padding: 14px 18px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .header-pill.scrolled {
        background: rgba(18, 18, 18, 0.88) !important;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        box-shadow:
            inset 0 1px 1px rgba(0, 229, 255, 0.16),
            0 14px 36px rgba(0, 0, 0, 0.75),
            0 0 24px rgba(0, 229, 255, 0.10) !important;
    }
    .header-pill.scrolled .header-content {
        background: transparent !important;
        box-shadow: none !important;
    }
    .logo {
        font-size: 0.78rem !important;
    }
    .brand-logo-img {
        height: 26px !important;
    }
    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ---- HERO MOBILE: ASCII más pequeño, slogan pegado a VISUAL, fondo vertical, botones cortos ---- */
@media (max-width: 768px) {
    .hero {
        min-height: 100vh !important;
        min-height: 100svh !important;
        padding-top: 70px !important;
        padding-bottom: 20px !important;
    }
    .hero-container {
        padding-top: 0 !important;
        gap: 0 !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    .hero-content.centered {
        gap: 8px !important;
        margin-top: 0 !important;
        justify-content: flex-start !important;
    }
    /* Slogan pegado debajo de VISUAL */
    .hero-subtitle-container {
        margin-top: 4px !important;
        margin-bottom: 20px !important;
    }
    .hero-tagline {
        font-size: 0.72rem !important;
        letter-spacing: 0.08em !important;
        line-height: 1.4 !important;
    }
    /* Botones cortos y temáticos */
    .hero-buttons {
        flex-direction: row !important;
        gap: 10px !important;
        width: auto !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }
    .hero-buttons .btn-clay {
        width: auto !important;
        flex: 0 1 auto !important;
        padding: 11px 18px !important;
        font-size: 0.85rem !important;
        border-radius: 100px !important;
        letter-spacing: 0.01em !important;
        gap: 6px !important;
        min-height: 42px !important;
    }
    .hero-buttons .btn-hero-primary,
    .hero-buttons .btn-primary {
        background: linear-gradient(145deg, #00e5ff, #00a8c0) !important;
        color: #0a0a0a !important;
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.45),
            inset 0 -2px 4px rgba(0, 0, 0, 0.2),
            0 8px 22px rgba(0, 229, 255, 0.38) !important;
    }
    .hero-buttons .btn-hero-secondary,
    .hero-buttons .btn-outline {
        background: linear-gradient(145deg, #1c1c1c, #101010) !important;
        color: var(--text-primary) !important;
        border: 1px solid rgba(0, 229, 255, 0.18) !important;
        box-shadow:
            inset 0 1px 1px rgba(0, 229, 255, 0.10),
            inset 0 -2px 4px rgba(0, 0, 0, 0.4),
            0 8px 22px rgba(0, 0, 0, 0.55) !important;
    }
    /* Fondo hero vertical: imagen completa sin recorte feo */
    .hero::before {
        background: url('../img/fondo-vertical.webp') no-repeat center center !important;
        background-size: cover !important;
        background-position: center center !important;
        opacity: 0.75 !important;
        transform: none !important;
    }
}

/* ---- BENEFICIOS: grid 2×6 con pastillas claymorphism ---- */
.benefits-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    padding: 24px !important;
    background: linear-gradient(145deg, var(--clay-surface-start), var(--clay-surface-end)) !important;
}
.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border: 1px solid rgba(0, 229, 255, 0.06);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 1px rgba(0, 229, 255, 0.08),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4),
        4px 4px 12px rgba(0, 0, 0, 0.5);
    transition: var(--smooth-transition);
}
.benefit-item:hover {
    border-color: rgba(0, 229, 255, 0.20);
    transform: translateY(-2px);
}
.benefit-item i {
    color: var(--cyan-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
}
.benefit-item span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.25;
}
@media (max-width: 768px) {
    .benefits-card {
        padding: 4px !important;
        gap: 12px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    .benefit-item {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 18px 12px;
        border-radius: 18px;
        gap: 10px;
        min-height: 100px;
        background: linear-gradient(145deg, #1c1c1c, #0f0f0f);
        border: 1px solid rgba(0, 229, 255, 0.08);
        box-shadow:
            inset 0 1px 1px rgba(0, 229, 255, 0.10),
            inset 0 -1px 2px rgba(0, 0, 0, 0.45),
            6px 6px 14px rgba(0, 0, 0, 0.55);
    }
    .benefit-item i {
        font-size: 1.5rem;
        width: auto;
    }
    .benefit-item span {
        font-size: 0.78rem;
        line-height: 1.25;
        font-weight: 600;
    }
}

/* ---- CARRUSEL "STACK DE ENFOQUE" — pattern reusable (stack / servicios / trabajos) ---- */
/* Desktop: comportamiento grid normal. Mobile: scroll-snap horizontal centrado. */
.focus-carousel-wrapper {
    position: relative;
}
.focus-carousel-dots {
    display: none;
}
.focus-chevron {
    display: none;
}

@media (max-width: 768px) {
    .focus-carousel-wrapper {
        margin: 0 -20px;
        position: relative;
    }
    .focus-carousel {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 8vw !important;
        padding: 8px 8vw 16px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .focus-carousel::-webkit-scrollbar {
        display: none;
    }
    .focus-carousel > * {
        flex: 0 0 84vw !important;
        min-width: 0 !important;
        width: 84vw !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* Cards de servicios y trabajos: misma altura (la de la más alta) */
    .services-grid.focus-carousel .service-card,
    .trabajos-grid.focus-carousel .trabajo-card {
        height: auto !important;
        align-self: stretch !important;
    }
    .services-grid.focus-carousel .service-card p {
        flex: 1 1 auto !important;
    }
    /* Show all items override (overriding previous carousel show/hide rules) */
    .focus-carousel .category-box,
    .focus-carousel .service-card,
    .focus-carousel .trabajo-card {
        display: flex !important;
    }
    .focus-carousel .category-box.carousel-active,
    .focus-carousel .service-card.carousel-active,
    .focus-carousel .trabajo-card.carousel-active {
        display: flex !important;
    }
    /* Chevrons laterales: solo </> sin círculo, blanco con brillo cian + heartbeat */
    .focus-chevron {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 0;
        background: transparent !important;
        border: none !important;
        color: #ffffff;
        align-items: center;
        justify-content: center;
        z-index: 5;
        cursor: pointer;
        font-size: 1.85rem;
        /* Inter llega a 700; pedirle 800 lo engordaba a mano. */
        font-weight: 700;
        padding: 0;
        text-shadow:
            0 0 10px var(--cyan-accent),
            0 0 22px rgba(0, 229, 255, 0.65),
            0 0 36px rgba(0, 229, 255, 0.4);
        box-shadow: none !important;
        animation: focusChevronPulse 1.6s ease-in-out infinite;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.3s ease, transform 0.2s ease, filter 0.2s ease;
    }
    .focus-chevron i {
        filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6));
    }
    .focus-chevron-prev {
        left: 4px;
    }
    .focus-chevron-next {
        right: 4px;
    }
    .focus-chevron:active {
        animation: none;
        transform: translateY(-50%) scale(0.9);
    }
    .focus-chevron.hidden {
        opacity: 0;
        pointer-events: none;
    }
    @keyframes focusChevronPulse {
        0%, 100% { transform: translateY(-50%) scale(1); }
        50% { transform: translateY(-50%) scale(1.18); }
    }
    /* Dots */
    .focus-carousel-dots {
        display: flex !important;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 18px;
    }
    .focus-carousel-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .focus-carousel-dots .dot.active {
        background: var(--cyan-accent);
        width: 24px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }
    /* Override stack-categories-grid show/hide rules para que en carrusel se vean todos */
    .stack-categories-grid.focus-carousel .category-box {
        display: flex !important;
        flex-direction: column;
    }
    /* Auto-expand accordions dentro del carrusel mobile */
    .focus-carousel .accordion-header[aria-expanded="true"] + .accordion-body,
    .focus-carousel .accordion-body {
        max-height: 600px !important;
        opacity: 1 !important;
        padding: 16px 20px 20px !important;
        overflow: visible !important;
    }
    .focus-carousel .accordion-header {
        pointer-events: none;
    }
    .focus-carousel .accordion-chevron {
        display: none;
    }
}

/* ---- SECCIÓN "MIS TRABAJOS" — desktop & mobile ---- */
.trabajos {
    background: linear-gradient(to bottom, #0a0a0a, #0d0d0d);
}
.trabajos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 40px;
}
.trabajo-card {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    transition: var(--spring-transition);
}
.trabajo-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 229, 255, 0.06);
}
.trabajo-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.5;
}
.trabajo-thumb-candy {
    background: linear-gradient(135deg, #ff6b9d 0%, #c94b7b 60%, #6a1b3a 100%);
}
.trabajo-thumb-maya {
    background: linear-gradient(135deg, #e69d45 0%, #c46a2a 60%, #1a3a4a 100%);
}
.trabajo-thumb-dulce {
    background: linear-gradient(135deg, #ffd23f 0%, #ff7043 60%, #4a148c 100%);
}
.trabajo-emoji {
    font-size: 4rem;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
    position: relative;
    z-index: 1;
}
.trabajo-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.trabajo-tag {
    font-size: 0.72rem;
    color: var(--cyan-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 8px;
}
.trabajo-card h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}
.trabajo-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin-bottom: 16px;
    flex: 1;
}
.trabajo-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.trabajo-stack span {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.18);
    color: var(--cyan-accent);
}
.trabajo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.trabajo-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}
.trabajo-status i {
    font-size: 0.5rem;
}
.trabajo-live {
    color: #2ecc71;
}
.trabajo-live i {
    animation: pulseDot 1.6s ease-in-out infinite;
}
.trabajo-wip {
    color: #ffaa00;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (max-width: 1023px) {
    .trabajos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .trabajos-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }
    .trabajo-thumb {
        aspect-ratio: 16 / 9;
    }
    .trabajo-emoji {
        font-size: 3.4rem;
    }
    .trabajo-body {
        padding: 20px;
    }
}

/* ---- Hide legacy mobile carousel controls now unused by stack/services ---- */
.stack-carousel-controls,
#services-indicator,
.section-carousel-controls #stack-indicator {
    display: none !important;
}