:root {
    --primary-blue: #0066FF;
    --bg-black: #000000;
    --text-white: #ffffff;
    --text-gray: rgba(255, 255, 255, 0.7);
    --border-color: rgba(0, 102, 255, 0.2);
    --card-bg: #000000;
    --font-main: 'Inter', sans-serif;
    --header-height: 64px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-black);
    color: var(--text-white);
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 900;
    line-height: 1.2;
}

p {
    line-height: 1.5;
    color: var(--text-gray);
}

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

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

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

.section-title {
    font-size: 26px;
    text-align: center;
    margin-bottom: 16px;
    color: var(--text-white);
}

.desktop-only {
    display: none;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    height: 64px;
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo img {
    height: 40px;
}

.mobile-menu-btn {
    color: var(--text-white);
    font-size: 24px;
}

.desktop-nav {
    display: none;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: var(--bg-black);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

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

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.close-menu-btn {
    color: var(--text-white);
    font-size: 24px;
}

.mobile-nav-link {
    display: block;
    padding: 12px 0;
    color: var(--text-white);
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height));
    padding-top: var(--header-height);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.33), transparent);
}

.hero-content {
    text-align: center;
    padding: 0 24px;
    margin-top: 0;
    z-index: 1;
}

.hero-title {
    font-size: 28px;
    margin-bottom: 16px;
}

.hero-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
}

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

.hero-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.logo-btn {
    width: 84px;
    height: 84px;
    background-color: rgba(20, 22, 26, 0.08);
    border: 1px solid rgba(0, 102, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.13);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

@media (min-width: 600px) {
    .logo-btn {
        width: 100px;
        height: 100px;
    }
}

@media (min-width: 900px) {
    .logo-btn {
        width: 120px;
        height: 120px;
    }
}

.logo-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 30px rgba(0, 102, 255, 0.2);
}

.logo-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-btn-wrapper span {
    font-weight: 700;
    font-size: 14px;
}

.hero-side-img {
    display: none;
}

/* Scroll Indicators */
.scroll-indicator {
    position: fixed;
    /* Changed to fixed to stay on screen edges */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    /* Slightly larger */
    height: 50px;
    background-color: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.3);
    cursor: pointer;
    z-index: 100;
    /* High z-index */
    transition: transform 0.2s, opacity 0.3s ease;
    opacity: 0;
    /* Hidden by default */
    pointer-events: none;
    font-size: 20px;
    /* Smaller icon */
    width: 40px;
    /* Revert to smaller visual size */
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pseudo-element for larger hit area */
.scroll-indicator::after {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    cursor: pointer;
}

.scroll-indicator.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-indicator:hover {
    transform: translateX(-50%) scale(1.1);
}

.scroll-indicator.down {
    bottom: 30px;
}

.scroll-indicator.up {
    top: 80px;
    /* Slightly higher to be easier to reach */
}

/* Product Sections (Encoder & Training) */
.product-section {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0 32px;
    min-height: calc(100vh - var(--header-height));
    padding-top: var(--header-height);
    overflow: hidden;
}

/* Permitir que el bloque del video se expanda cuando el acordeón crece */
#video.product-section {
    min-height: calc(100vh - var(--header-height));
    overflow: hidden;
}

/* Specific adjustment for Encoder Section to move title up  (bloque del encoder) */


/* (titulos de los bloques) */
.encoder-section .product-content { margin-top: 0; }

/* (separacion entre el titulo y el texto
) */
.encoder-section .section-title {
    margin-bottom: 30px;
    /* Reduce space below title */
}

.encoder-section .product-description {
    margin-bottom: 90px;
    /* Increased from 20px to add more separation between text and images */
}

.section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
}

.product-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.product-description {
    margin-bottom: 24px;
    font-size: 14px;
}

.product-description p {
    margin-bottom: 10px;
}

.product-cta {
    margin: 24px 0;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 102, 255, 0.13);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 102, 255, 0.2);
}

.product-image-right img,
.training-image-mobile img {
    width: 90%;
    max-width: 400px;
    height: auto;
}

/* Info Sections (Use Cases & About) */
.info-section {
    position: relative;
    min-height: calc(100vh - var(--header-height));
    padding: 80px 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-black);
    padding-top: var(--header-height);
    overflow: hidden;
}

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

/* Specific adjustment for Usos Section */
#usos {
    padding-top: 40px;
    /* Reduced top padding */
    align-items: flex-start;
    /* Align content to top */
}

#usos .container {
    margin-top: 40px;
    /* Add some top margin to container */
}

.section-subtitle {
    text-align: center;
    margin-bottom: 24px;
    font-size: 14px;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.use-case-card {
    background-color: var(--bg-black);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.use-case-card i {
    color: var(--primary-blue);
    font-size: 20px;
    margin-top: 2px;
}

.use-case-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.use-case-card p {
    font-size: 13px;
}

/* FAQ */
.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-question {
    width: 100%;
    padding: 16px 0;
    text-align: left;
    color: var(--text-white);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding-bottom: 16px;
    font-size: 14px;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    /* Adjust as needed */
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* About & Contact */
.about-box {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 24px;
}

.subsection-title {
    text-align: center;
    font-size: 18px;
    color: var(--text-gray);
    margin-bottom: 16px;
}

.vision-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.vision-card {
    background-color: var(--bg-black);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}

.vision-card h4 {
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.contact-box {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.contact-subtitle {
    font-size: 14px;
    margin-bottom: 12px;
}

.contact-text {
    font-size: 13px;
    margin-bottom: 24px;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    width: 100%;
    max-width: 220px;
    box-shadow: 0 6px 12px rgba(0, 102, 255, 0.13);
}

.contact-btn.whatsapp {
    background-color: #25D366;
}

.contact-btn.instagram {
    background-color: #E1306C;
}

.terms-link {
    color: var(--primary-blue);
    text-decoration: underline;
    font-size: 14px;
}

/* Footer */
.footer {
    padding: 24px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--text-gray);
}

/* Desktop Styles (>= 900px) */
@media (min-width: 900px) {
    .container {
        padding: 0 24px;
    }

    .section-title {
        font-size: 32px;
    }

    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }

    /* Header */
    .logo img {
        height: 64px;
    }

    .mobile-menu-btn {
        display: none;
    }

    .desktop-nav {
        display: flex;
        gap: 24px;
    }

    .nav-link {
        font-weight: 600;
        font-size: 14px;
        transition: color 0.2s;
    }

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

    /* Hero */
    .hero-title {
        font-size: 48px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .logo-btn {
        width: 120px;
        height: 120px;
    }

    .hero-side-img {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 65%;
        display: flex;
        align-items: center;
        pointer-events: none;
        z-index: 0;
        transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        opacity: 0;
        /* Hidden by default */
    }

.hero-side-img.left-side {
        left: -40%;
        /* Start further off-screen so only part shows when active */
        justify-content: flex-start;
        transform: translateY(-50%) translateX(-30px);
}

.hero-side-img.right-side {
        right: -40%;
        /* Start further off-screen */
        justify-content: flex-end;
        transform: translateY(-50%) translateX(30px);
}

    .hero-side-img.active {
        opacity: 1;
    }

.hero-side-img.left-side.active {
        /* Slide in to show aprox half sin rotación */
        transform: translateY(-50%);
        left: -20%;
}

.hero-side-img.right-side.active {
        transform: translateY(-50%);
        right: -20%;
}

    .hero-side-img img {
        max-width: 100%;
        max-height: 90vh;
        object-fit: contain;
        filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6));
    }

    /* Encoder Section */
    #encoder.product-section { padding: 64px 0 24px; }
    .encoder-section .product-description { margin-bottom: 28px; }
    .product-layout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        gap: 16px;
    }

    .product-image-left,
    .product-image-right {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .product-image-left img {
        max-width: 100%;
        max-height: 380px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .product-image-left img:hover,
    .product-image-right img:hover {
        transform: scale(1.05);
        /* Hover scale effect */
    }

    .product-image-right img {
        max-width: 100%;
        max-height: 440px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .product-cta {
        flex: 0 0 auto;
        margin: 16px 0;
    }

    .features-grid {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;
        flex-wrap: wrap;
    }

    .feature-item {
        background-color: var(--bg-black);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .feature-item i {
        color: var(--primary-blue);
    }

    /* Training Section */
    /* Training Section New Layout */
    .training-main-layout {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        height: auto;
        min-height: 100vh;
        width: 100%;
        padding: 16px 20px 0;
    }

    .training-col-left {
        flex: 0.8;
        /* Reduce image column width share since image is shifted anyway */
        display: flex;
        justify-content: flex-start;
        /* Image on Left */
        align-items: center;
        height: 100%;
        min-width: 0;
        /* CRITICAL: Allows column to shrink below content size (image width) */
    }

    .training-col-left img {
        max-width: none;
        height: 80vh;
        width: auto;
        object-fit: contain;
        transform: translateX(-50%) translateY(-6%);
    }

    .training-col-right {
        flex: 1.5;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
        min-width: 0;
        gap: 40px;
        padding-left: 0;
        margin-left: -100px;
        padding-right: 0;
        margin-right: 0;
        width: 100%;
        position: relative;
        z-index: 2;
        transform: translateX(60px);
    }

    .training-info-block {
        align-self: flex-end;
        text-align: right;
        max-width: 550px;
        width: 100%;
        padding-right: 0;
        /* No padding - fully right */
        margin-right: 0;
    }

    .training-info-block .section-title {
        text-align: right;
        /* Align title to the right */
    }

    .training-info-block .product-description {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
        /* Align items to right */
    }

    .training-info-block .product-description p {
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 18px;
        max-width: 100%;
        /* Use full width of parent container */
        line-height: 1.5;
        text-align: right;
        /* Ensure text aligns right */
    }

    .training-features-block {
        align-self: flex-end;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: 650px;
        width: 100%;
        padding-right: 0;
        /* No padding - fully right */
        margin-right: 0;
    }

    .training-features-block .feature-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        align-items: flex-end;
        /* Ensure list items align right */
    }

    .training-features-block .feature-list-item {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        /* Text then Icon */
        gap: 12px;
        font-size: 16px;
        color: var(--text-white);
    }

    .training-features-block .feature-list-item i {
        color: var(--primary-blue);
        font-size: 18px;
    }

    .training-features-block .product-cta {
        margin-top: 10px;
    }

    /* Use Cases */
    .use-cases-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .use-case-card {
        flex-direction: column;
        text-align: left;
    }

    /* About */
    .vision-cards {
        flex-direction: row;
    }

.vision-card {
    flex: 1;
}
}

/* Encoder Info Page */
.section-title-center{font-weight:900;color:#fff;text-align:center}
.encoder-hero-title{color:#fff;font-weight:700;text-align:center}
.variables-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.variables-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.variables-grid{grid-template-columns:repeat(3,1fr)}}
.variable-tile{border:1px solid rgba(0,102,255,.2);border-radius:12px;padding:16px;text-align:center;transition:.15s;background:transparent}
.variable-tile i{color:#0066FF}
.variable-tile:hover{border-color:rgba(0,102,255,.4);background:rgba(0,102,255,.07)}
.info-card{border:1px solid rgba(0,102,255,.3);border-radius:12px;padding:16px}
.info-card h3{color:#0066FF;font-weight:700;font-size:16px;text-align:center}
.info-card p{color:#ccc;text-align:center}
.info-card .encoder-title{color:#fff;font-weight:900;font-size:19px;text-align:left;letter-spacing:.02em}
@media (min-width:900px){.info-card .encoder-title{font-size:25px}}
.ip-card{border:1px solid rgba(0,255,102,.3)}
.ip-card h3{color:#00FF66}
.video-frame{border:6px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 12px 24px rgba(0,102,255,.15);background:#000;overflow:hidden}
.video-frame video{width:100%;height:auto;display:block}
.video-frame.video-large{transform:none}
@media (max-width: 899px){.video-frame.video-large{transform:none}}
.video-label{color:rgba(255,255,255,.7);font-weight:700;letter-spacing:.03em}
.accordion .accordion-button{font-weight:700;color:#0066FF}
.accordion .accordion-body{color:#bbb}
/* Tema oscuro para acordeón del bloque video */
#video .product-content{transform:translateY(-10%)}
@media (max-width: 899px){#video .product-content{transform:translateY(-6%)}}
#video .accordion{--bs-accordion-bg: transparent;--bs-accordion-color: var(--text-white);--bs-accordion-btn-bg: transparent;--bs-accordion-btn-color: #2F8FFF;--bs-accordion-btn-focus-box-shadow: none;--bs-accordion-border-color: var(--border-color);--bs-accordion-active-color: #2F8FFF;--bs-accordion-active-bg: rgba(0,0,0,0.2);--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%232F8FFF' d='M1.5 6l6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon)}
#video .accordion .accordion-item{background:transparent;border:1px solid var(--border-color);border-radius:12px}
#video .accordion .accordion-button{background:transparent;color:#2F8FFF;font-size:0.8rem}
#video .accordion .accordion-button:not(.collapsed){color:#2F8FFF;box-shadow:none}
#video .accordion .accordion-body{background:transparent;color:var(--text-gray);font-size:0.8rem}
#video .accordion .accordion-button:focus{box-shadow:none}
#video .info-card .intro-text{font-size:0.72rem;line-height:1.7;color:rgba(255,255,255,.75)}
@media (min-width: 900px){#video .info-card .intro-text{font-size:0.8rem}}

.info-card-dark{background:rgba(0,0,0,.25)}

.encoder-page{font-family:'Montserrat', 'Inter', sans-serif}
@font-face{font-family:'Montserrat';src:url('assets/fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal}
@font-face{font-family:'Montserrat';src:url('assets/fonts/Montserrat-Medium.ttf') format('truetype');font-weight:500;font-style:normal}
@font-face{font-family:'Montserrat';src:url('assets/fonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal}
.data-table{border:1px solid rgba(0,102,255,.2);border-radius:12px;overflow:auto}
.data-table table{width:100%;color:#fff}
.data-table th,.data-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.csv-btn{background:#0066FF;color:#fff;border-radius:12px;padding:10px 14px;font-weight:700}
/* Comparison section styles */
#comparison .section-title{text-align:center;font-weight:900;font-size:26px}
@media(min-width:900px){#comparison .section-title{font-size:30px}}
#comparison .section-subtitle{color:rgba(255,255,255,.7);text-align:center;max-width:1100px;margin:8px auto 0}
.comparison-note{color:rgba(255,255,255,.6);text-align:center;font-style:italic;max-width:1100px;margin:8px auto}
.comparison-container{max-width:1100px;margin:0 auto}
.comparison-box{border:1px solid rgba(0,102,255,.2);border-radius:12px;padding:16px;margin-top:12px}
.comparison-actions{display:flex;justify-content:flex-end;margin-top:14px}
.csv-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:10px 16px}
/* Dark tables */
#comparison .data-table{background:transparent}
#comparison .data-table table{background-color:transparent}
#comparison .data-table thead th{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.12)}
#comparison .data-table tbody td{color:rgba(255,255,255,.88)}
#comparison .data-table .table>:not(caption)>*>*{background:transparent}

/* Encoder Header (estructura similar a training) */
.header-encoder .header-container{width:100%;max-width:none;margin:0;padding:0 24px;display:flex;justify-content:space-between;align-items:center;position:relative}
.header-encoder .back-btn{background:none;border:none;color:var(--text-white);font-size:20px;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:color .2s;z-index:10;margin-right:auto}
.header-encoder .back-btn:hover{color:var(--primary-blue)}
.header-encoder .logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1000}
.header-encoder .logo img{height:50px}
.header-encoder .desktop-nav{gap:12px;align-items:center}
.header-encoder .nav-link{color:var(--text-white);text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;transition:color .2s}
.header-encoder .nav-link:hover{color:var(--primary-blue)}
.mobile-drawer{position:fixed;top:0;right:-100%;width:280px;height:100vh;background-color:var(--bg-black);z-index:2000;transition:right .3s ease;box-shadow:-4px 0 20px rgba(0,0,0,.5)}
.mobile-drawer.open{right:0}
.drawer-header{height:120px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer-header img{height:48px}
.drawer-nav{padding:0}
.drawer-link{display:block;color:var(--text-white);text-decoration:none;padding:16px 24px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.05);transition:background-color .2s}
.drawer-link:hover{background-color:rgba(0,102,255,.1)}

/* Imagen de portada (telefonos encoder) +50% */
.encoder-phones{transform:translateX(-20%) scale(1.5);transform-origin:center;}
@media (max-width: 899px){.encoder-phones{transform:translateX(0) scale(1.25)}}

/* Encoder canvas block (imagen de referencia) */
.encoder-canvas{background:#fff;border-radius:12px;border:4px solid rgba(255,255,255,.25);box-shadow:0 10px 26px rgba(0,0,0,.28);padding:12px}
.encoder-canvas-inner{position:relative;min-height:320px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.encoder-prod{position:relative;z-index:2;max-width:86%;height:auto;transform:translateX(-6%) scale(1.05)}
.encoder-ghost{position:absolute;left:8%;top:6%;z-index:1;max-width:74%;height:auto;opacity:.35;filter:grayscale(100%)}
.encoder-canvas-logo{position:absolute;right:16px;top:12px;width:52px;height:auto;z-index:3}
@media (min-width: 1200px){.encoder-canvas-inner{min-height:380px}}
@media (max-width: 899px){.encoder-prod{max-width:92%;transform:translateX(-2%) scale(1.02)}.encoder-ghost{left:6%;top:8%;max-width:80%;opacity:.28}}
.video-frame-white{background:#fff;border:4px solid rgba(255,255,255,.25);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.video-col{position:relative}
.video-label-top{display:none}
.video-section-title{color:#fff;font-weight:900;text-align:center;font-size:22px;margin:6px 0 18px}
@media(min-width:900px){.video-section-title{font-size:26px;margin-bottom:24px}}
.video-frame video{aspect-ratio:16/9}
.product-content-wide{width:100%;padding:0 16px;margin:0}
.encoder-row{--bs-gutter-x:1rem}
@media (max-width:899px){.encoder-row{--bs-gutter-x:.75rem}}
.video-col{padding-left:0;padding-right:0}
#variables{padding-top:56px;align-items:flex-start}
#variables .container{margin-top:16px}
.action-subtitle{color:rgba(255,255,255,.7);text-align:center}
.action-carousel{max-width:640px;margin:0 auto;position:relative}
.action-note{color:rgba(255,255,255,.6);font-style:italic}
/* Carousel controls styled as blue circles */
#action .carousel-control-prev,#action .carousel-control-next{width:44px;height:44px;background-color:var(--primary-blue);border-radius:50%;top:50%;transform:translateY(-50%);opacity:1}
#action .carousel-control-prev{left:-64px}
#action .carousel-control-next{right:-64px}
#action .carousel-control-prev-icon,#action .carousel-control-next-icon{display:none}
#action .carousel-control-prev::after{content:'\2039';color:#fff;font-size:22px;line-height:44px;display:block;text-align:center}
#action .carousel-control-next::after{content:'\203A';color:#fff;font-size:22px;line-height:44px;display:block;text-align:center}
@media(max-width:900px){#action .carousel-control-prev{left:-40px}#action .carousel-control-next{right:-40px}}
@media (max-width: 599px){
  #comparison.info-section{height:auto;min-height:100vh;overflow:visible;padding:72px 16px 32px}
  #comparison .scroll-indicator{display:none}
  #variables.info-section{height:auto;min-height:100vh;overflow:visible;padding:72px 16px 32px}
  #variables .scroll-indicator{display:none}
  #action.info-section{height:auto;min-height:100vh;overflow:visible;padding:72px 16px 32px}
  #action .scroll-indicator{display:none}
}
.carousel-control-prev,.carousel-control-next{z-index:2}
.carousel-control-prev-icon,.carousel-control-next-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
@media (max-width:599px){.video-frame{margin-bottom:12px}}
@media (max-width:599px){#action .video-frame{width:86%;margin:0 auto}}
@media (min-width:900px) and (max-width:1100px){
  .header-encoder .desktop-nav{display:none}
  .header-encoder .mobile-menu-btn{display:block;color:var(--text-white);font-size:24px}
}

/* Tablet grande (900–1100px): ajustar Training en Home */
@media (min-width:900px) and (max-width:1100px){
  #training .container{padding-right:48px}
  #training .product-content{padding-right:48px}
  #training .training-col-right{transform:none}
  #training .training-info-block{padding-right:56px;max-width:640px;margin-left:auto}
  #training .training-features-block{padding-right:56px;max-width:640px;margin-left:auto}
  #training .training-info-block .product-description{padding-right:8px}
  #training .training-features-block .feature-list{padding-right:8px}
}

@media (min-width: 600px) and (max-width: 899px){
  #encoder .product-content .section-title,
  #encoder .product-content .product-description{padding-right:24px}
  .hero-content{padding:0 32px}
  /* Home: Training block tablet margin */
  #training .product-content .section-title,
  #training .product-content .product-description{padding-right:32px}
  #training .training-col-right{padding-right:48px}
  #training .training-info-block{padding-right:48px;max-width:600px;margin-left:auto}
  #training .training-features-block{padding-right:48px;max-width:600px;margin-left:auto}
  #training .container{padding-right:40px}
  #training .product-content{padding-right:40px}
  #training .training-info-block .product-description{padding-right:8px}
  #training .training-features-block .feature-list{padding-right:8px}
  #training .training-col-right{transform:none}
}