/* ========================================
   ELEVAVISION - ESTILOS OPTIMIZADOS
   ======================================== */

/* ========== 1. VARIABLES CSS ========== */
:root {
    /* Colores */
    --color-primary: #3c63ff;
    --color-gray: #757575;
    --color-subprimary: rgba(88, 198, 249, 0.446);
    --color-black: #000000;
    --color-white: #ffffff;
    --contact-icon-color: #EDBB43;

    /* Espaciado */
    --section-padding: 80px 0;
    --section-padding-presentation: 80px 0;
    --section-margin: -30px;
    --section-margin-presentation: 150px;
    --container-max-width: 1200px;
    --title-max-width: 1000px;
    --subtitle-max-width: 800px;

    /* Bordes */
    --border-radius-base: 30px;
    --border-radius-large: 40px;
    --border-radius-xl: 70px;

    /* Transiciones */
    --transition-base: all 0.3s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Sombras */
    --shadow-base: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* ========== 2. RESET Y BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--color-black);
    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

@media (min-width: 1025px) {
    body.modal-open {
        padding-right: 15px;
    }
}

@font-face {
    font-family: 'Digital';
    src: url('assetselevavision/PETERSON_WEB/digital.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ========== 3. CLASES UTILITARIAS ========== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.HYPE_document {
    margin: 0px !important;
}

/* Skip link para accesibilidad */
.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: #1a1a2e;
    color: white;
    padding: 12px 24px;
    z-index: 10000;
    transition: top 0.3s ease;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero H1 styles */
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #ffffff;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero-tagline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.texto-b2b {
    color: #EDBB43;
    font-weight: 700;
}

/* ========== 4. TIPOGRAFÍA ========== */
.registered-mark {
    font-weight: 1;
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
}

.section-title {
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-black);
    max-width: var(--title-max-width);
    line-height: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 70px;
    margin-top: -10px;
    color: rgb(91, 91, 91);
    max-width: var(--subtitle-max-width);
    line-height: 1.2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.017em;
}

.section-subsubtitle {
    font-size: 0.9rem;
    margin-top: -40px;
    color: var(--color-primary);
    max-width: var(--subtitle-max-width);
    line-height: 1.2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-subsubtitledark {
    font-size: 0.8rem;
    margin-top: -40px;
    color: black;
    max-width: var(--subtitle-max-width);
    line-height: 1.2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-subsubtitle-blue {
    font-size: 0.9rem;
    margin-top: -60px;
    color: #3c63ff;
    max-width: var(--subtitle-max-width);
    line-height: 1.2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section_before_title {
    font-size: 1.7rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: -10px;
    color: #000000;
}

/* Degradados de texto */
.texto-gradient {
    display: inline-block;
    background-image: linear-gradient(90deg, #545cf0 0%, #0a7fd7 55%, #00a1c8 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.12);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 8px rgba(0, 170, 255, 0.15);
    line-height: 1.1;
    padding: 0.05em 0;
}

.texto-gradient-int {
    display: block;
    background-image: linear-gradient(90deg, #545cf0 0%, #0a7fd7 55%, #00a1c8 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.12);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 1.65rem;
    font-weight: 500;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 6px 18px rgba(0, 170, 255, 0.25);
    line-height: 1.2;
    padding: 0.1em 0;
    margin: 0.05em 0;
}

@supports not (background-clip: text) {

    .texto-gradient,
    .texto-gradient-int {
        color: #2e8ae6;
        background: none;
        text-shadow: none;
    }
}

/* ========== 5. LOGO FIJO ========== */
.logotipo {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1002;
    padding: 18px;
    width: 80px;
    height: auto;
    display: block;
}

.logotipo img {
    width: 80px;
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.logotipo .logo-dark {
    opacity: 1;
    z-index: 2;
}

.logotipo .logo-light {
    opacity: 0;
    z-index: 1;
}

.logotipo.on-dark-bg .logo-dark {
    opacity: 0;
    z-index: 1;
}

.logotipo.on-dark-bg .logo-light {
    opacity: 1;
    z-index: 2;
}

/* ========== 6. BOTONES ========== */
.action-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.action-btn {
    padding: 10px 24px;
    border: 3px solid transparent;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    white-space: nowrap;
    background: white;
}

.action-btn:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn-primary {
    background: white;
    color: var(--color-white);
    border-color: var(--color-primary);
}

.action-btn-primary:hover {
    background: #2851cc;
    border-color: #2851cc;
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.3);
}

.action-btn-secondary {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
    padding: 9px 21.6px;
    font-size: 0.855rem;
    min-width: 126px;
}

.action-btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.2);
}

button.action-btn.info-trigger {
    color: var(--color-primary) !important;
    background: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    display: inline-flex !important;
    font-size: 0.855rem;
}

button.action-btn.info-trigger:hover {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
}

.action-btn-tertiary {
    background: #f8f9fa;
    color: var(--color-black);
    border-color: #e9ecef;
}

.action-btn-tertiary:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Icono Info */
.info-superscript {
    cursor: pointer;
    margin-left: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: super;
    position: relative;
    top: -4px;
    white-space: nowrap;
}

.info-superscript img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.section-title .info-superscript {
    display: inline;
    vertical-align: baseline;
    position: relative;
    top: -0.5em;
    margin-left: 2px;
}

.section-title .info-superscript img {
    width: 16px;
    height: 16px;
    vertical-align: baseline;
}

.info-superscript-dark {
    width: 20px;
    height: 20px;
    background: #000000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: super;
    position: relative;
    top: -0.2em;
    margin-left: 2px;
}

.info-superscript-dark::after {
    content: 'i';
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 0;
}

.info-superscript-dark img {
    display: none;
}

.section-title .info-superscript-dark {
    display: inline-flex;
    top: -0.5em;
}

/* Número 2 destacado en B2B */
.b2b-number {
    font-size: 1.1em;
    vertical-align: baseline;
    display: inline;
    line-height: 0;
    color: #4670ec;
}

.texto-b2b-gradient {
    display: inline-block;
    background-image: linear-gradient(90deg,
            #EDBB43 0%,
            #F0C457 20%,
            #FFD700 35%,
            #ffffff 50%,
            #FFD700 65%,
            #F0C457 80%,
            #EDBB43 100%);
    background-size: 300% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    line-height: 1.1;
}

.texto-b2b-gradient.animate-in {
    animation: shimmerB2B 2.5s ease-in-out forwards;
}

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

    100% {
        background-position: 0% 50%;
    }
}

/* Botón con gradiente animado */
#Ver-ejemplos-btn {
    background: linear-gradient(270deg, #545cf0, #0a7fd7, #03cdff, #0a7fd7, #545cf0);
    background-size: 500% 500%;
    color: var(--color-white) !important;
    border: 2px solid transparent;
    animation: gradientFlow 6s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

#Ver-ejemplos-btn:hover {
    background: linear-gradient(270deg, #545cf0, #0a7fd7, #00a1c8, #0a7fd7, #545cf0);
    background-size: 400% 400%;
    color: var(--color-white) !important;
    animation: gradientFlowFast 1.5s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(84, 92, 240, 0.4);
    transform: translateY(-2px);
}

#Ver-ejemplos-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    transition: left 0.5s ease;
}

#Ver-ejemplos-btn:hover::before {
    left: 100%;
}

@keyframes gradientFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes gradientFlowFast {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #Ver-ejemplos-btn {
        animation: none !important;
        background: linear-gradient(270deg, #545cf0, #0a7fd7, #00a1c8);
        background-size: 100% 100%;
    }

    #Ver-ejemplos-btn:hover {
        animation: none !important;
    }

    #Ver-ejemplos-btn::before {
        display: none;
    }
}

/* ========== 7. SECCIÓN HERO ========== */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assetselevavision/imagen_cabecera.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    z-index: -1;
    transform: translateZ(0);
}

html[lang="en"] .hero-section::before {
    background-image: url('assetselevavision/imagen_cabecera_en.jpg');
}

.hero-content {
    text-align: center;
    color: var(--color-white);
    z-index: 2;
    position: relative;
    width: 90%;
    max-width: 1000px;
    padding: 0 2vw;
}

/* ========== 8. SECCIÓN PRESENTACIÓN ========== */
.presentation-section {
    margin-top: var(--section-margin-presentation);
    padding: var(--section-padding);
    background: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.demo-video {
    width: 900px;
    max-width: 100%;
    height: auto;
    margin: 40px auto 0;
    display: block;
    border-radius: var(--border-radius-large);
    border: none;
}

/* ========== 9. SECCIÓN MANIPULACIONES ========== */
.manipulaciones-section {
    margin-top: var(--section-margin);
    padding: 100px 0 120px;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.manipulaciones-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1500px;
}

.manipulaciones-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    width: 100%;
    margin-top: 60px;
}

/* Columna izquierda: Acordeón */
.manipulaciones-accordion {
    flex: 0 0 380px;
    max-width: 380px;
}

.manipulaciones-accordion-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0;
}

.manipulaciones-accordion-item:first-child {
    padding-top: 0;
}

.manipulaciones-accordion-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.manipulaciones-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition-base);
}

.manipulaciones-accordion-header:hover {
    opacity: 0.7;
}

.manipulaciones-accordion-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-black);
    margin: 0;
    line-height: 1.3;
}

.manipulaciones-accordion-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.manipulaciones-accordion-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.manipulaciones-accordion-item.active .manipulaciones-accordion-icon img {
    transform: rotate(0deg);
}

.manipulaciones-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.manipulaciones-accordion-item.active .manipulaciones-accordion-content {
    max-height: 300px;
    opacity: 1;
    padding-top: 15px;
}

.manipulaciones-accordion-content p {
    font-size: 1rem;
    color: var(--color-gray);
    line-height: 1.6;
    margin: 0;
}

/* Columna derecha: Carrusel */
.manipulaciones-carousel-container {
    flex: 1 1 auto;
    min-width: 0;
    width: 807px;
    max-width: 807px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.manipulaciones-carousel {
    width: 100%;
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: none;
    background: none;
}

.manipulaciones-carousel-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: none;
}

.manipulaciones-carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

.manipulaciones-carousel-image.active {
    opacity: 1;
    z-index: 2;
}

.advertising_note {
    font-size: 0.8rem;
    color: rgb(160, 160, 160);
    font-style: italic;
    text-align: center;
    z-index: 50;
    position: relative;
}

.advertising_note a {
    text-decoration: none;
}

/* Estilos legacy para compatibilidad */
.manipulaciones-image-container {
    display: none;
}

.manipulaciones-image {
    display: none;
}


/* ========== 10. SECCIÓN CASOS DE APLICACIÓN - CARRUSEL DE TARJETAS ========== */
.casosApp-section {
    margin-top: var(--section-margin);
    padding: 130px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow-x: clip;
    overflow-y: visible;
}

.casosApp-section .container {
    background: transparent;
    position: relative;
    margin-top: -50px;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
}

.casosApp-section .section-subsubtitle {
    margin-top: -50px;
    margin-bottom: 0;
}

/* Contenedor del carrusel de tarjetas */
.cards-container {
    margin-top: 80px;
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    width: max-content;
    background: transparent;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: calc(50% - 510px);
}

/* Wrapper para controlar el overflow */
.cards-wrapper {
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    padding: 40px 0;
    margin-top: 20px;
}

.cards-container {
    margin-top: 0;
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    width: max-content;
    background: transparent;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
}

/* Mostrar peek de la siguiente tarjeta */
.cards-wrapper::after {
    display: none;
}

.card {
    width: 320px;
    height: 580px;
    perspective: 1000px;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: none;
    border-radius: var(--border-radius-base);
    background: transparent;
}

.card .card-back {
    pointer-events: none;
}

.card .card-front {
    pointer-events: auto;
}

.card.flipped .card-back {
    pointer-events: auto;
}

.card.flipped .card-front {
    pointer-events: none;
}

.flip-back-btn {
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
}

.card:hover .card-inner {
    transform: scale(1.05);
    box-shadow: none;
}

.card.flipped .card-inner {
    transform: rotateY(180deg) scale(1.05);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--border-radius-base);
    overflow: hidden;
    top: 0;
    left: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease;
}

.card:hover .card-front,
.card:hover .card-back,
.card.flipped .card-front,
.card.flipped .card-back {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.card-front {
    cursor: pointer;
}

.card[data-card="A1"] .card-front {
    background: #2081e9;
}

.card[data-card="A2"] .card-front {
    background: var(--color-black);
}

.card[data-card="A3"] .card-front {
    background: #FFD700;
}

.card[data-card="A4"] .card-front {
    background: rgb(45, 67, 65);
}

.card[data-card="A5"] .card-front {
    background: rgb(3, 34, 96);
}

.card[data-card="A4"] .card-title-front {
    color: var(--color-white);
}

.card[data-card="A4"] .card-description-front {
    color: rgba(255, 255, 255, 0.9);
}

.card-back {
    background: #dcdcdc;
    color: var(--color-black);
    -webkit-transform: rotateY(180deg) translateZ(1px);
    transform: rotateY(180deg) translateZ(1px);
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1;
}

.card-front {
    cursor: pointer;
    transform: rotateY(0deg) translateZ(1px);
    -webkit-transform: rotateY(0deg) translateZ(1px);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    border-radius: var(--border-radius-base);
    z-index: 3;
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
}

.card-content-front {
    padding: 25px 25px 0 30px;
    width: 100%;
    text-align: left;
    color: var(--color-white);
    position: relative;
    z-index: 4;
}

.card-content {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: transparent;
}

/* Estadísticas en tarjetas */
.card-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid rgb(255, 255, 255);
    margin-top: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-stats-icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.percentage-number,
.percentage-number-white {
    font-size: 1.0rem;
    font-weight: 700;
    color: #ffffff;
    display: inline;
}

.percentage-number-black {
    font-size: 1.0rem;
    font-weight: 700;
    color: #000000;
    display: inline;
}

.card-stats-text {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.9;
}

.card-stats-text-black {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.9;
    color: #000000 !important;
}

.card[data-card="A2"] .card-stats {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgb(255, 255, 255);
}

.card[data-card="A3"] .card-stats {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgb(255, 255, 255);
}

/* Tipografía de tarjetas */
.card-title-front,
.card-title-front-white {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--color-white);
    line-height: 1.1;
}

.card-subtitle-front,
.card-subtitle-front-white {
    font-size: 1.15rem;
    font-weight: 500;
    margin-top: 11px;
    color: #ffffff !important;
    line-height: 1.2;
}

.card-subtitle-front-black {
    font-size: 1.15rem;
    font-weight: 500;
    margin-top: 16px;
    color: rgba(0, 0, 0, 0.95) !important;
    line-height: 1.2;
}

.card-description-front,
.card-description-front-white {
    font-size: 0.90rem;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.card[data-card="A3"] .card-title-front-white {
    color: var(--color-black);
}

.card[data-card="A3"] .card-subtitle-front-white {
    color: rgba(0, 0, 0, 0.95);
}

.card[data-card="A3"] .card-description-front-white {
    color: rgba(0, 0, 0, 0.9);
}

.card[data-card="A2"] .card-title-front-white {
    color: var(--color-white);
}

.card[data-card="A2"] .card-subtitle-front-white {
    color: rgba(255, 255, 255, 0.95);
}

.card[data-card="A2"] .card-description-front-white {
    color: rgba(255, 255, 255, 0.9);
}

.card-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--color-black);
    line-height: 1.2;
}

.card-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 25px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.3;
}

.card-description {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5;
}

/* ========== ENLACE VER EJEMPLO EN TARJETAS ========== */
.card-example-link {
    display: inline-block;
    margin-top: 20px;
    color: #0a9ee8;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: all 0.3s ease;
}

.card-example-link:hover {
    color: #0a9ee8;
    font-weight: 600;
}

/* Botones de tarjetas */
.flip-back-btn,
.flip-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    z-index: 10;
    font-size: 0;
}

.flip-back-btn:hover,
.flip-icon:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 1);
    box-shadow: var(--shadow-base);
}

.flip-back-btn::before {
    content: '';
    width: 35px;
    height: 35px;
    background-image: url('assetselevavision/mas.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(45deg);
    transition: var(--transition-base);
    display: block;
}

.flip-icon img {
    width: 35px;
    height: 35px;
    transition: var(--transition-base);
}

.card.flipped .flip-icon {
    opacity: 0;
    pointer-events: none;
}

/* Carrusel de imágenes */
.card-images-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    overflow: hidden;
    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
    z-index: 1;
}

.card-carousel-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}


.card-carousel-image.active {
    opacity: 1;
    z-index: 2;
}

/* Overlay de estadísticas en hover */
.card-stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--border-radius-base);
    z-index: 10;
}

.card.show-stats .card-stats-overlay {
    opacity: 1;
    visibility: visible;
}

.card.show-stats .card-front>*:not(.card-stats-overlay):not(.flip-icon) {
    transition: filter 0.3s ease;
}

.stats-flip-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    z-index: 15;
    opacity: 0.9;
}

.stats-flip-icon:hover {
    transform: scale(1.1);
    opacity: 1;
}

.stats-flip-icon img {
    width: 35px;
    height: 35px;
    transition: var(--transition-base);
}

.stats-container {
    text-align: center;
    color: white;
    padding: 40px;
}

.stats-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: white;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.stats-bar-container {
    position: relative;
    width: 60px;
    height: 200px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    margin: 0 auto 20px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.stats-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, #00d4ff 0%, #5a67d8 50%, #667eea 100%);
    border-radius: 30px;
    height: 0%;
    transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.card[data-card="A1"] .stats-bar {
    background: linear-gradient(to top, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.card[data-card="A2"] .stats-bar {
    background: linear-gradient(to top, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.card[data-card="A3"] .stats-bar {
    background: linear-gradient(to top, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.stats-percentage {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.stats-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    max-width: 200px;
    margin: 0 auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.stats-bar-container[data-type="reduction"] {
    background: rgba(239, 68, 68, 0.2);
    border: 2px solid rgba(239, 68, 68, 0.4);
}

.stats-bar[data-type="reduction"] {
    background: linear-gradient(to top, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.card.show-stats .stats-container>* {
    animation: slideUpFade 0.6s ease forwards;
    opacity: 0;
}

.card.show-stats .stats-title {
    animation-delay: 0.1s;
}

.card.show-stats .stats-bar-container {
    animation-delay: 0.2s;
}

.card.show-stats .stats-percentage {
    animation-delay: 0.4s;
}

.card.show-stats .stats-description {
    animation-delay: 0.5s;
}

.card.show-stats .stats-flip-icon {
    opacity: 1;
}

/* Navegación de casos */
.casos-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    background: rgba(0, 0, 0, 0.025);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 3px;
    border: 1px solid rgba(0, 0, 0, 0.00);
    width: fit-content;
    margin-top: -10px;
    margin-left: auto;
    margin-right: 0;
}

.casos-nav-btn {
    width: 51px;
    height: 46px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: none;
}

.casos-nav-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

.casos-nav-btn img {
    width: 39px;
    height: 39px;
    transition: var(--transition-base);
}

.casos-nav-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.5) !important;
    transform: none !important;
}

.casos-nav-btn:disabled img {
    filter: grayscale(0.5) opacity(0.5) !important;
}

/* ========== 11. SECCIÓN TRY IT (DEMO) ========== */
.try-it-section {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: clip;
    /* ← CORRECTO, no crea scroll container */
    overflow-y: visible;
    z-index: 50;
}

.try-it-section .container {
    max-width: 1400px;
    padding: 0 20px;
    width: 100%;
    position: relative;
}

.try-it-section .section-title,
.try-it-section .section-subtitle,
.try-it-section .try-it-buttons-container {
    position: relative;
    z-index: 60;
}

.try-it-section .HYPE_document,
.try-it-section .HYPE_document>div {
    overflow: visible !important;
}

.try-it-section .section-subsubtitle {
    margin-top: -50px;
}

#dial {
    width: 200px;
    height: 200px;
    position: relative;
    opacity: 0%;
    pointer-events: auto;
}

.try-it-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: -40px;
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
    margin-bottom: 30px;
}

.try-it-buttons-container .action-btn {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.try-it-buttons-container .action-btn.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.3);
}

.try-it-buttons-container .action-btn:not(.active):hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.2);
}

.try-it-section #Ver-ejemplos-btn {
    display: block !important;
    margin: -40px auto 0 !important;
    width: fit-content !important;
    text-align: center;
    font-size: 0.88rem !important;
    padding: 9px 22px !important;
    min-width: 130px !important;
}

/* ========== 12. SECCIÓN VENTAS ========== */
.ventas-section {
    margin-top: 100px;
    padding: 110px 0;
    /* <--- Solo padding vertical (arriba y abajo) */
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    /* Asegura que no desborde */
}

.ventas-section .container {
    background: transparent;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    /* Limita el ancho como en el resto de la web */
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}

.ventas-section .section-title {
    width: auto !important;
    /* Cambiado de 2600px a auto */
    max-width: 900px !important;
    margin-left: auto;
    margin-right: auto;
}

.ventas-section .section-subtitle {
    max-width: 800px !important;
}

.ventas-section .section-subsubtitle {
    margin-top: -40px;
    margin-bottom: 80px;
}

.ventas-section .info-trigger {
    cursor: pointer;
    transition: var(--transition-base);
}

.ventas-section .info-trigger:hover {
    color: var(--color-primary);
}

.ventas-section .highlight-word {
    color: var(--color-black);
    font-weight: 400;
}

.ventas-header-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.ventas-header-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
    gap: 40px;
}

.presentacion-video-container {
    position: relative;
    top: -65px !important;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
    height: auto;
    z-index: 10;
    border-radius: 55px;
    background: transparent;
    box-shadow: none;
}

.presentacion-video {
    width: 100%;
    /* MODIFICADO: El vídeo llena el contenedor */
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 55px;
    display: block;
    background: transparent;
    transform: scale(1.01);
    /* Evita el borde blanco de antialiasing */
}

.presentacion-placeholder {
    width: 1100px;
    height: 100%;
    background: linear-gradient(135deg, #f0f4ff 0%, #e6f1ff 100%);
    border-radius: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-base);
}

.ventas-video-container {
    position: relative !important;
    top: 0 !important;
    margin: -30px auto 0 auto !important;
    width: 100% !important;
    max-width: 1807px !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    transform: translateZ(0) !important;
    display: block !important;
    height: auto !important;
}

.ventas-video {
    width: 100%;
    /* MODIFICADO: El vídeo llena el contenedor */
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 55px;
    display: block;
    background: transparent;
    transform: scale(1.01);
}

.video-placeholder {
    width: 880px;
    height: 100%;
    background: linear-gradient(135deg, #f0f4ff 0%, #e6f1ff 100%);
    border-radius: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-base);
}

.video-loading {
    text-align: center;
    color: var(--color-primary);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(60, 99, 255, 0.2);
    border-left-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.video-placeholder p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.video-loaded .video-placeholder {
    display: none;
}

.video-loaded #ventas-video {
    display: block;
}

#ventas-video {
    display: none;
}

/* Tarjetas de ventas */
.ventas-cards-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 10px auto 20px auto;
    /* <--- Unifica los márgenes centrando perfectamente */
    padding: 0;
}

.ventas-cards-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 40px 20px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
}

.ventas-cards-container::-webkit-scrollbar {
    display: none;
}

.ventas-card {
    background: var(--color-white);
    border-radius: 35px;
    padding: 30px 30px 70px 30px;
    text-align: left;
    position: relative;
    box-shadow: var(--shadow-base);
    transition: var(--transition-smooth);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-width: 400px;
    width: 400px;
    height: 350px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
}

.ventas-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.ventas-card-icon {
    margin: 0 0 20px 0;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ventas-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ventas-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-black);
    margin: 0 0 18px 0;
    line-height: 1.3;
    text-align: left;
    width: 100%;
}

.ventas-card-description {
    font-size: 0.9rem;
    color: var(--color-gray);
    line-height: 1.5;
    margin: 0 0 20px 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
}

.ventas-card-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    z-index: 10;
}

.ventas-card-btn:hover {
    transform: scale(1.1);
}

.ventas-card-btn img {
    width: 32px;
    height: 32px;
}

.ventas-section .ventas-card .info-trigger {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.ventas-section .ventas-card .info-trigger img {
    width: 32px;
    height: 32px;
}

/* Navegación de ventas */
.ventas-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

.ventas-nav-btn {
    width: 51px;
    height: 46px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: none;
}

.ventas-nav-btn:hover {
    transform: scale(1.05);
}

.ventas-nav-btn img {
    width: 39px;
    height: 39px;
    transition: var(--transition-base);
}

.ventas-nav-btn:disabled,
.ventas-nav-btn[disabled],
.ventas-nav-btn[aria-disabled="true"],
.ventas-nav-btn.functionally-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    filter: grayscale(1) !important;
    transition: none !important;
}

.ventas-nav-btn:disabled img {
    filter: grayscale(1) opacity(0.3) !important;
}

/* ========== 13. SECCIÓN TECNOLOGÍA ========== */
.tecnologia-section {
    margin-top: 0px;
    padding: 200px 0;
    background: #06090d;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.tecnologia-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: -1;
}

.tecnologia-column-text .info-trigger {
    display: inline;
    margin: 0;
    text-align: inherit;
    width: auto;
}

.tecnologia-section .section-title.texto-gradient {
    background-image: linear-gradient(90deg,
            #545cf0 0%,
            #0a7fd7 20%,
            #00a1c8 35%,
            #ffffff 50%,
            #00a1c8 65%,
            #0a7fd7 80%,
            #545cf0 100%);
    background-size: 300% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 8px rgba(0, 170, 255, 0.15);
}

.tecnologia-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assetselevavision/tecnologia.jpg') center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 1;
    z-index: -1;
}

.tecnologia-column-text a {
    color: #5BA3FF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tecnologia-column-text a:hover {
    color: #7AB8FF;
    text-decoration: underline;
}

.tecnologia-section .container {
    position: relative;
    z-index: 2;
}

.tecnologia-section .section-title {
    color: var(--color-white);
    display: block;
    background-image: linear-gradient(90deg, #4467C2 0%, #81E8C8 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.12);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 8px rgba(68, 103, 194, 0.15);
    line-height: 1.1;
    padding: 0.05em 0;
}

.tecnologia-section .section-subtitle {
    color: rgba(255, 255, 255, 0.645);
}

.tecnologia-section .section-subsubtitle-white {
    font-size: 0.9rem;
    margin-top: -60px;
    color: var(--color-white);
    max-width: var(--subtitle-max-width);
    line-height: 1.2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
}

.tecnologia-columns {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: nowrap;
}

.tecnologia-content-block:first-child {
    height: 240px;
    flex: none;
}

.tecnologia-content-block:last-child {
    flex: 1;
}

.tecnologia-column {
    width: 370px;
    height: 870px;
    background: rgba(13, 48, 94, 0.068);
    border: 1px solid #1e3a5f;
    border-radius: var(--border-radius-base);
    padding: 40px 30px;
    text-align: left;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition-smooth);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    flex-shrink: 0;
}

.tecnologia-column:hover {
    transform: translateY(-5px);
    border-color: #2d4a6b;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.tecnologia-content-block {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tecnologia-column-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.736);
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: left;
}

.tecnologia-column-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.567);
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

.tecnologia-column-icon {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60px;
}

.tecnologia-column-icon img {
    height: 50px;
    width: auto;
    object-fit: contain;
    filter: brightness(1.1);
}

.tecnologia-content-block:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
}

.tecnologia-content-block:not(:first-child) {
    padding-top: 20px;
}

/* ========== 14. SECCIÓN PLANES ========== */
.planes-section {
    margin-top: 0px;
    padding: 160px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.planes-section .section_before_title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
}

.planes-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-end;
}

.plan-card {
    background: var(--color-white);
    border: 1px solid rgba(60, 99, 255, 0.1);
    border-radius: var(--border-radius-base);
    padding: 40px 30px;
    width: 300px;
    text-align: left;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.plan-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 40px rgba(60, 99, 255, 0.15);
}

.plan-featured {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2851cc 100%);
    border-color: var(--color-primary);
    transform: scale(1.05) translateY(-10px);
    box-shadow: 0 15px 50px rgba(60, 99, 255, 0.25);
}

.plan-featured:hover {
    transform: scale(1.05) translateY(-15px);
    box-shadow: 0 20px 60px rgba(60, 99, 255, 0.3);
}

.plan-featured::before {
    content: 'MÁS POPULAR';
    position: absolute;
    top: 26px;
    /* Ajusta la altura de la cinta */
    right: -45px;
    /* Empuja la cinta hacia afuera para que corte en las esquinas */
    width: 180px;
    /* Ancho fijo para poder centrar el texto */
    background: #ff6b35;
    color: white;
    padding: 8px 0;
    /* Padding vertical, 0 a los lados */
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    /* Centra el texto perfectamente */
    transform: rotate(45deg);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
    z-index: 10;
    display: block;
}

.plan-header {
    margin-bottom: 30px;
}

.plan-name {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 10px;
    line-height: 1.2;
}

.plan-featured .plan-name {
    color: var(--color-white);
}

.plan-price {
    font-size: 1.1rem;
    color: var(--color-gray);
    font-weight: 500;
}

.plan-featured .plan-price {
    color: rgba(255, 255, 255, 0.9);
}

.plan-meta {
    font-size: 0.85rem;
    color: var(--color-gray);
    font-style: italic;
    margin-top: 5px;
}

.plan-featured .plan-meta {
    color: rgba(255, 255, 255, 0.8);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.plan-features li {
    font-size: 1rem;
    color: var(--color-black);
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    line-height: 1.5;
}

.plan-features li::before {
    content: '✓';
    color: #28a745;
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.plan-featured .plan-features li {
    color: var(--color-white);
}

.plan-featured .plan-features li::before {
    color: #90ee90;
}

.plan-btn {
    width: 100%;
    padding: 15px 25px;
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: 'Inter', sans-serif;
    text-align: center;
}

.plan-btn:hover {
    background: #2851cc;
    border-color: #2851cc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.3);
}

.plan-card:not(.plan-featured) .plan-btn {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.plan-card:not(.plan-featured) .plan-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.plan-card[data-plan="starter"] {
    background: linear-gradient(135deg, #f0f4ff 0%, #e6f1ff 100%);
    border-color: rgba(60, 99, 255, 0.2);
}

.plan-card[data-plan="enterprise"] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: rgba(108, 117, 125, 0.3);
}

.plan-btn-featured {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
    font-weight: 700;
}

.plan-btn-featured:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* Acordeones de planes */
.planes-accordion-section {
    margin: 80px 0 0 0;
    max-width: 1000px;
    width: 100%;
}

.planes-accordion-item {
    margin-bottom: 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

.planes-accordion-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.planes-accordion-item:not(:first-child) {
    padding-top: 25px;
}

.planes-accordion-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-base);
    justify-content: space-between;
}

.planes-accordion-header:hover {
    opacity: 0.8;
}

.planes-accordion-title {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.3;
    margin: 0;
    text-align: left;
    flex: 1;
}

.planes-accordion-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.planes-accordion-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(180deg);
    transition: transform .3s ease;
}

.planes-accordion-item.expanded .planes-accordion-icon img {
    transform: rotate(0deg);
}

.planes-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.planes-accordion-content.active {
    max-height: 2000px;
    opacity: 1;
    padding-top: 30px;
}

.addons-list,
.terms-list {
    list-style: none;
    padding: 30px 35px;
    margin: 0;
    background: var(--color-white);
    border-radius: var(--border-radius-base);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.addons-list li,
.terms-list li {
    padding: 15px 0;
    border-bottom: 1px solid #f1f3f4;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-black);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.addons-list li:last-child,
.terms-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.addons-list li:first-child,
.terms-list li:first-child {
    padding-top: 0;
}

.addons-list li strong {
    color: var(--color-primary);
    font-weight: 600;
    margin-right: 5px;
}

.terms-list li strong {
    color: #28a745;
    font-weight: 600;
    margin-right: 5px;
}

.terms-list {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid rgba(108, 117, 125, 0.2);
}

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

.hosting-item {
    background: var(--color-white);
    border: 1px solid rgba(60, 99, 255, 0.15);
    border-radius: var(--border-radius-base);
    padding: 25px 20px;
    text-align: center;
    transition: var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hosting-item:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.12);
}

.hosting-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 10px;
    line-height: 1.2;
}

.hosting-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
    display: block;
}

.hosting-item p {
    font-size: 0.9rem;
    color: var(--color-gray);
    line-height: 1.4;
    margin: 0;
}

.hosting-note {
    font-size: 0.9rem;
    color: var(--color-gray);
    font-style: italic;
    text-align: center;
    margin: 20px 0 0 0;
    line-height: 1.5;
}

.hosting-note em {
    color: var(--color-primary);
    font-weight: 500;
}

.hosting-item:nth-child(2) {
    border-color: rgba(40, 167, 69, 0.3);
}

.hosting-item:nth-child(2):hover {
    border-color: #28a745;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.15);
}

.hosting-item:nth-child(2) .hosting-price {
    color: #28a745;
}

.hosting-item:nth-child(3) {
    border-color: rgba(255, 193, 7, 0.4);
}

.hosting-item:nth-child(3):hover {
    border-color: #ffc107;
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.15);
}

.hosting-item:nth-child(3) .hosting-price {
    color: #ffc107;
}

.planes-demo-content {
    background: linear-gradient(135deg, #fff3e0 0%, #ffecb3 100%);
    border-radius: var(--border-radius-large);
    padding: 40px;
    border: 2px solid rgba(255, 193, 7, 0.3);
}

.planes-demo-content .planes-container {
    max-width: 700px;
    gap: 20px;
    margin: 30px auto 0;
}

.planes-demo-content .plan-card {
    background: var(--color-white);
    border-color: rgba(255, 193, 7, 0.4);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.1);
}

.planes-demo-content .plan-btn {
    background: #ffc107;
    border-color: #ffc107;
    color: #000;
    font-weight: 600;
}

.planes-demo-content .plan-btn:hover {
    background: #ffb300;
    border-color: #ffb300;
    color: #000;
}

/* ========== 15. SECCIÓN FAQ ========== */
.faq-section {
    margin-top: 100px;
    padding: 100px 0 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.faq-section .container {
    background: transparent;
    position: relative;
    z-index: 2;
}

.faq-section .section-subsubtitle {
    margin-top: -70px;
    margin-bottom: 60px;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.faq-item {
    margin-bottom: 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-item:not(:first-child) {
    padding-top: 25px;
}

.faq-question-header {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: var(--transition-base);
}

.faq-question-header:hover {
    opacity: 0.8;
}

.faq-content-wrapper {
    flex: 1;
    margin-right: 20px;
}

.faq-question {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.4;
    margin-bottom: 8px;
    text-align: left;
}

.faq-answer-preview {
    font-size: 1rem;
    color: var(--color-gray);
    line-height: 1.6;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.6em * 2);
}

.faq-answer-full {
    font-size: 1rem;
    color: var(--color-gray);
    line-height: 1.6;
    text-align: left;
    display: none;
    margin-top: 5px;
}

.faq-item.expanded .faq-answer-preview {
    display: none;
}

.faq-item.expanded .faq-answer-full {
    display: block;
}

.faq-toggle-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-top: 5px;
}

.faq-toggle-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(180deg);
    transition: transform .3s ease;
}

.faq-item.expanded .faq-toggle-icon img {
    transform: rotate(0deg);
}

/* ========== 16. SECCIÓN CONTACTO ========== */
.contacto-section {
    background: #10161C !important;
    color: var(--color-white);
    padding: 120px 0 80px 0;
    margin-top: 0;
}

.contacto-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding: 0 20px;
    align-items: start;
}

.contacto-left {
    padding-right: 0px;
}

.contacto-logo {
    margin-bottom: 40px;
}

.contacto-logo img {
    width: 300px;
    height: auto;
    margin-bottom: 15px;
}

.contacto-tagline {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.4;
    margin-top: -20px;
}

.contacto-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contacto-nav li {
    margin-bottom: 6px;
}

.contacto-nav a {
    color: #95a5a6;
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-base);
    display: block;
    padding: 2px 0;
    line-height: 1.2;
}

.contacto-nav a.nav-highlight {
    color: var(--contact-icon-color) !important;
    font-weight: 500;
}

.contacto-nav a.nav-highlight:hover {
    color: #f0c457 !important;
}

.contacto-nav a:hover {
    color: var(--color-white);
}

.contacto-center {
    padding: 0px;
}

.contacto-title {
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 18px;
    color: var(--color-white);
    line-height: 1.2;
}

.contacto-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 35px;
    line-height: 1.4;
    max-width: 320px;
}

.contacto-info {
    margin-bottom: 35px;
    font-style: normal;
}

.contacto-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 12px;
}

.contacto-icon {
    color: var(--contact-icon-color);
    margin-top: 1px;
    flex-shrink: 0;
}

.contacto-icon svg {
    display: block;
}

.contacto-details {
    font-size: 0.9rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    font-style: normal;
}

.contacto-details a {
    text-decoration: none !important;
    color: inherit !important;
}

.contacto-details strong {
    color: var(--color-white);
    font-weight: 600;
}

.contacto-right {
    padding-left: 0px;
}

.contacto-form-container {
    background: var(--color-white);
    padding: 25px 30px;
    border-radius: var(--border-radius-base);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.contacto-form {
    background: transparent;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
}

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

.contacto-form input,
.contacto-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    color: var(--color-black);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: var(--transition-base);
}

.contacto-form input::placeholder,
.contacto-form textarea::placeholder {
    color: #6c757d;
}

.contacto-form input:focus,
.contacto-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(60, 99, 255, 0.1);
}

.contacto-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contacto-form textarea#mensaje {
    line-height: 1.4;
    height: calc(1.4em + 24px);
    min-height: calc(1.4em + 48px);
    resize: vertical;
    overflow-y: auto;
}

.checkbox-group {
    margin-bottom: 30px;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.4;
    gap: 12px;
    color: #495057;
}

.checkbox-container input {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #dee2e6;
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: var(--transition-base);
    background: var(--color-white);
}

.checkbox-container:hover .checkmark {
    border-color: #adb5bd;
}

.checkbox-container input:checked+.checkmark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-container input:checked+.checkmark::after {
    content: '✓';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-container a {
    text-decoration: none;
    color: #3c63ff;
    font-weight: 500;
    transition: var(--transition-base);
}

.checkbox-container a:hover {
    text-decoration: none;
    color: #2851cc;
}

.panel-share-content .checkbox-text a {
    color: #3c63ff;
    text-decoration: none;
    font-weight: 500;
}

.panel-share-content .checkbox-text a:hover {
    text-decoration: none;
    color: #2851cc;
}

.contacto-btn {
    width: 100%;
    padding: 15px 30px;
    background: var(--contact-icon-color) !important;
    color: #000 !important;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 200;
    cursor: pointer;
    transition: var(--transition-base);
    font-family: 'Inter', sans-serif;
}

.contacto-btn:hover {
    background: #f0c457 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(237, 187, 67, .35);
}

.contacto-btn:active {
    transform: translateY(0);
}

@keyframes subtleBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.contacto-btn.pulse-active {
    animation: subtleBlink 1.5s ease-in-out infinite;
}

.contacto-btn.pulse-active:hover {
    animation: none !important;
    opacity: 1 !important;
    background: #e67e22 !important;
    transform: translateY(-2px) !important;
}

.email-image {
    height: 1.1em;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    filter: brightness(1.6);
    transition: var(--transition-base);
}

.email-image:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

/* ========== 17. MODALES ========== */
.info-trigger {
    cursor: pointer;
    position: relative;
    transition: var(--transition-base);
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: inherit;
    color: inherit;
    max-width: inherit;
    line-height: inherit;
}

.info-trigger:hover {
    color: var(--color-primary);
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: var(--transition-base);
    color: var(--color-primary);
    margin-left: 8px;
    vertical-align: middle;
    animation: parpadeoSuave 1.5s ease-in-out infinite;
}

.info-trigger:hover .info-icon {
    animation-play-state: paused !important;
}

@keyframes parpadeoSuave {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .info-icon {
        animation: none !important;
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;

    /* CAMBIO AQUÍ 👇: Animamos solo opacidad y visibilidad */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translateZ(0);
    /* Activa aceleración gráfica por hardware en iOS */
}

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

.modal-content {
    background: var(--color-white);
    border-radius: var(--border-radius-base);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: 80vh;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.modal-content .modal-renders {
    width: 1000px;
    height: 800px;
}

.modal-renders .render-slides-container {
    height: 100%;
    margin: 0 0px;
}

.modal-content .modal-long {
    width: 950px;
}

.modal-content .modal-medium {
    width: 725px;
}

.modal-content .modal-sort {
    width: 500px;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-content .modal-long,
.modal-content .modal-medium,
.modal-content .modal-sort {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: var(--border-radius-base);
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal-content .modal-long::-webkit-scrollbar,
.modal-content .modal-medium::-webkit-scrollbar,
.modal-content .modal-sort::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.modal-header {
    padding: 45px 75px 20px 75px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
    background: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 15;
}

.modal-header h3 {
    margin: 0;
    padding-top: 0;
    font-size: 3rem;
    font-weight: 500;
    color: var(--color-black);
    display: block;
    width: 100%;
    line-height: 1.05;
    order: 0;
}

.modal-header .modal-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #000000;
    margin: 5px 0 0 0;
    line-height: 1.3;
    display: block;
    width: 100%;
    order: 1;
}

.modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    right: 25px;
    outline: none;
    box-shadow: none;
    z-index: 20;
    transition: var(--transition-base);
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.modal-close::before {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('assetselevavision/mas.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(45deg);
    transition: var(--transition-base);
    display: block;
}

.modal-close::after {
    content: none;
    display: none;
}

.modal-close:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 1);
    box-shadow: var(--shadow-base);
}

.modal-close:focus,
.modal-close:active {
    outline: none !important;
    box-shadow: none !important;
}

.modal-body {
    padding: 20px 75px 75px;
    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
    position: relative;
}

.modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.95) 100%);
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-content.has-scroll::after {
    opacity: 1;
}

.modal-body h2 {
    font-size: 1rem;
    font-weight: 400;
    color: #000000;
    margin: 0;
    line-height: 1.6;
    display: block;
    width: 100%;
}

.modal-body h2:first-child {
    margin-top: 0;
    margin-bottom: 10px;
}

#modal-integracion a {
    text-decoration: none;
}

.modal-body p {
    margin: 0 0 16px 0;
    line-height: 1.6;
    color: #000000 !important;
    display: block;
    clear: both;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body li {
    color: #000000;
    line-height: 1.6;
}

.modal-body ul,
.modal-body ol {
    color: #000000;
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.modal-body strong {
    color: var(--color-black);
    font-weight: 700;
}

.modal-body em {
    font-style: italic;
    color: var(--color-black);
    font-weight: 600;
}

.modal-body .highlight {
    color: var(--color-black);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 4px;
    border-radius: 3px;
}

.contacto-form-container-modal {
    background: var(--color-white);
    padding: 25px 75px 40px 75px;
    position: relative;
    z-index: 20;
    margin-top: -20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#modal-demo .contacto-form-container-modal {
    margin-top: -50px;
}

.starter-ver-mas-nota {
    font-size: 0.72rem;
    color: #aaa;
    font-style: italic;
    text-align: center;
    margin: -20px 0 12px;
    line-height: 1.3;
}

/* ── Botón + Información ── */
a.starter-info-btn {
    display: block;
    width: 100%;
    padding: 15px 25px;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

a.starter-info-btn:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.25);
}

/* ── Modal CSS-only con :target ── */
.modal-target-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: default;
    display: block;
}

.modal-target-activated {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-target-activated .modal-content {
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-target-activated:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-target-activated:target .modal-content {
    transform: scale(1) translateY(0);
    position: relative;
    z-index: 1;
}

/* ── Enlace "demo": sin subrayado ── */
.starter-link-demo {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.starter-link-demo:hover {
    color: #2851cc;
    text-decoration: none;
}

/* ── Imágenes: centradas, 60%, sin sombra ni borde ── */
.starter-img {
    display: block;
    width: 60%;
    height: auto;
    border-radius: 0;
    margin: 18px auto 0 auto;
    box-shadow: none;
    border: none;
}

/* ── Intro ── */
.starter-bloque-intro {
    margin-bottom: 32px;
}

.starter-bloque-intro p {
    font-size: 0.95rem;
    color: #444 !important;
    line-height: 1.65;
    margin-bottom: 14px;
}

.starter-bloque-intro p:last-child {
    margin-bottom: 0;
}

/* ── Títulos de sección ── */
.starter-bloque-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.starter-bloque-titulo--gris {
    color: #888;
}

/* ── Bloques principales ── */
.starter-bloque-incluye,
.starter-bloque-noincluye,
.starter-bloque-ampliacion {
    margin-top: 32px;
    margin-bottom: 8px;
}

/* ── Ítems del bloque incluye ── */
.starter-item {
    margin-bottom: 24px;
}

.starter-item:last-child {
    margin-bottom: 0;
}

.starter-item-cabecera {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.starter-item p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #666 !important;
    line-height: 1.6;
}

.starter-item p:last-of-type {
    margin-bottom: 0;
}

/* ── Lista "no incluye" ── */
.starter-lista-no {
    list-style: none;
    padding: 0;
    margin: 16px 0 20px 0;
}

.starter-lista-no li {
    padding: 9px 0 9px 18px;
    position: relative;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.55;
}

.starter-lista-no li::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 9px;
    color: #bbb;
    font-weight: 600;
}

.starter-lista-no li strong {
    color: #444;
}

/* ── Nota Pro ── */
.starter-nota-pro {
    font-size: 0.9rem;
    color: #555 !important;
    background: #f7f8ff;
    border-left: 3px solid var(--color-primary);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin-top: 4px;
    line-height: 1.55;
}

/* ── Nota de cierre ── */
.starter-nota-cierre {
    font-size: 0.88rem !important;
    color: var(--color-gray) !important;
    margin-top: 8px;
    margin-bottom: 0 !important;
}

/* ── Bloque ampliación ── */
.starter-bloque-ampliacion p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.starter-bloque-ampliacion p:last-child {
    margin-bottom: 0;
}

/* ── Plan único Starter ── */
.planes-single {
    justify-content: center;
}

/* ── Tarjeta única Starter: ancho, fondo azul forzado ── */
.plan-card-single {
    width: 680px;
    max-width: 90vw;
    transform: none !important;
    text-align: center !important;
    background: linear-gradient(135deg, #3c63ff 0%, #2851cc 100%) !important;
    border-color: #3c63ff !important;
    box-shadow: 0 20px 60px rgba(60, 99, 255, 0.40) !important;
    padding: 44px 44px 40px;
}

.plan-card-single:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 28px 70px rgba(60, 99, 255, 0.50) !important;
}

/* ── Cabecera impactante ── */
.plan-header-single {
    margin-bottom: 28px;
    text-align: center;
}

.plan-tagline {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 10px 0;
}

.plan-name-single {
    font-size: 3.2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 18px 0 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;
}

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

.plan-price-single {
    font-size: 1.9rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.plan-meta-single {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
}

/* ── Separador ── */
.plan-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 24px 0;
}

/* ── Features: centradas con check ── */
.plan-features-single {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: inline-block;
    text-align: left;
}

.plan-features-single li {
    font-size: 1.05rem;
    color: #ffffff !important;
    margin-bottom: 13px;
    padding-left: 28px;
    position: relative;
    line-height: 1.45;
}

.plan-features-single li::before {
    content: '✓';
    color: #90ee90;
    font-size: 1.1rem;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
}

.plan-features-single li strong {
    color: #ffffff;
    font-weight: 700;
}

.plan-features-single li sup {
    font-size: 0.6em;
}

/* ── Botones en fila, píldora ── */
.plan-buttons-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.plan-buttons-group .plan-btn-featured {
    flex: 1;
    border-radius: 100px !important;
    white-space: nowrap;
    min-width: 130px;
}

.plan-btn-outline-white {
    flex: 1;
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.70) !important;
    font-weight: 600;
    border-radius: 100px !important;
    padding: 14px 16px;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Inter', sans-serif;
    text-align: center;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    min-width: 130px;
}

.plan-card-featured::after {
    content: 'MÁS POPULAR';
    background-color: var(--accent-color);
    /* Asegúrate de que esta variable tenga el color naranja */
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    padding: 0;
    /* Quita el padding para que Flexbox funcione mejor */

    /* Posicionamiento para que llegue al borde */
    position: absolute;
    top: -15px;
    /* Usa valores negativos para moverla hacia afuera */
    right: -15px;
    /* Usa valores negativos para moverla hacia afuera */

    /* Tamaño y rotación */
    width: 200px;
    /* Un ancho suficiente para que flex centré el texto */
    height: 35px;
    /* Dale una altura para que flex centré verticalmente */
    transform: rotate(45deg);

    /* Centrado perfecto del texto */
    display: flex;
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */

    /* Sombra para darle profundidad (opcional) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.plan-btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* ── Módulos modal ── */
.modulo-item {
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid #f0f0f0;
}

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

.modulo-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.modulo-item p {
    font-size: 0.93rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.modulo-presupuesto-nota {
    background: #f0f4ff;
    border-left: 3px solid #3c63ff;
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    color: #444;
    margin-top: 28px;
    line-height: 1.6;
}

/* ========== 19. ESTILO MARCA ElevaVISION ========== */
.brand-name {
    display: inline;
}

span.brand-name span.vision {
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ========== 20. Estilo del enlace de Ver renders de eleva ========== */
.accordion-link {
    color: #0a9ee8;
    text-decoration: none;
}

.accordion-link:hover {
    color: #0a9ee8;
    font-weight: 600;
}

a.accordion-link.info-trigger {
    display: inline-block !important;
    text-align: left !important;
    margin: 0 !important;
    width: auto !important;
}

/* ========== ANIMACIÓN TEXTO GRADIENT - CORREGIDO ========== */

.texto-gradient {
    display: inline-block;
    background-image: linear-gradient(90deg,
            #545cf0 0%,
            #0a7fd7 20%,
            #00a1c8 35%,
            #ffffff 50%,
            #00a1c8 65%,
            #0a7fd7 80%,
            #545cf0 100%);
    background-size: 300% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.12);
    text-shadow: 0 2px 8px rgba(0, 170, 255, 0.15);
    line-height: 1.1;
    padding: 0.05em 0;
}

.texto-gradient.animate-in {
    animation: shimmerOnce 2.5s ease-in-out forwards;
}

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

    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .texto-gradient.animate-in {
        animation: none;
    }
}

/* ========== ESTILOS CARRUSEL RENDERS ========== */

.render-carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}

.modal-renders .render-carousel-wrapper {
    height: 650px;
    padding: 20px 40px 40px;
}

.render-slides-container {
    flex: 1;
    height: 400px;
    position: relative;
    margin: 0 20px;
}

.render-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: none;
    z-index: 1;
}

.render-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Botones de navegación */
.render-nav-btn {
    position: relative;
    top: auto;
    transform: none;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #666666;
    padding: 0;
    outline: none;
    flex-shrink: 0;
}

.render-nav-btn:hover {
    color: #333333;
    transform: scale(1.2);
    background: transparent;
    box-shadow: none;
}

.render-nav-btn svg {
    width: 50px;
    height: 50px;
    stroke-width: 2.5;
}

.render-prev {
    left: auto;
}

.render-next {
    right: auto;
}

/* ==================== BARRA DE MENÚ SUPERIOR ==================== */
.top-bar-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-right: 20px;
    padding-top: 20px;
    z-index: 1001;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-bar-menu.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Contenedor base de la pastilla */
.menu-container {
    background: transparent;
    border: 1px solid transparent;
    /* Borde transparente por defecto */
    padding: 12px 8px;
    border-radius: 999px;
    pointer-events: auto;
    /* Transición específica para evitar el parpadeo negro del borde */
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, transform 0.3s ease;
}

/* --- ESTADO: HERO (Pastilla traslúcida + Iconos Cyan) --- */
.top-bar-menu.on-hero-section .menu-container {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    outline: none !important;
}

/* Forzar iconos en azul cyan durante el Hero */
.top-bar-menu.on-hero-section .menu-icon {
    filter: brightness(0) invert(1) !important;
    opacity: 1;
}

/* Desactivar resaltado de la primera opción (Casos) en el Hero */
.top-bar-menu.on-hero-section .menu-links li a.active-scroll .menu-icon {
    transform: scale(1) !important;
    filter: none !important;
    opacity: 1;
}

/* --- ESTADO: SECCIONES OSCURAS (Iconos Blancos, sin pastilla) --- */
.top-bar-menu.on-dark-section .menu-container {
    background: transparent;
    border-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.top-bar-menu.on-dark-section .menu-icon {
    filter: brightness(0) invert(1) !important;
}

/* --- ELEMENTOS INTERNOS DEL MENÚ --- */
.menu-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

.menu-links li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.menu-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Efecto hover general */
.menu-links li a:hover .menu-icon {
    transform: scale(1.2);
    opacity: 0.7;
}

/* Quitar líneas de enlaces */
.menu-links li a::after {
    display: none;
}

/* Ajustes para botones especiales */
.top-bar-menu .menu-privado-btn,
.top-bar-menu .menu-contact-btn {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.top-bar-menu.on-dark-section .menu-privado-btn,
.top-bar-menu.on-dark-section .menu-contact-btn {
    border: none !important;
    background: transparent !important;
}

/* ========================================================================
   SECCIÓN ELEVA3D (MÁXIMO REALISMO) - VERSIÓN FINAL AJUSTADA
   ======================================================================== */

.eleva3d-section {
    background-color: transparent;
    margin-top: 280px;
    padding: 0 0 50px 0;
    position: relative;
    text-align: center;
    overflow: visible;
}

.eleva3d-intro-text {
    max-width: 800px;
    margin: -50px auto -35px auto;
    padding: 0 20px;
}

.eleva3d-intro-text p {
    font-size: 1rem;
    color: #1a1a1a;
    line-height: 1.6;
    font-weight: 400;
}

/* --- Contenedor Principal (Viewport) --- */
.eleva3d-slider-viewport {
    width: 100vw;
    height: 700px;
    padding-top: 50px;
    padding-bottom: 90px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    z-index: 10;
}

.eleva3d-slider-viewport:active {
    cursor: grabbing;
}

/* --- Track (Pista deslizante) --- */
.eleva3d-cards-track {
    display: flex;
    height: 100%;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    pointer-events: none;
}

/* --- Tarjeta Individual --- */
.eleva3d-card-slide {
    pointer-events: auto;
    flex: 0 0 auto;
    width: auto;
    height: 90%;
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, box-shadow 0.3s ease;
    user-select: none;
    opacity: 0.5;
    transform: scale(0.85);
    border-radius: var(--border-radius-large);
    overflow: hidden;
    background-color: #ffffff;
    border: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    -webkit-mask-image: none;
}

.eleva3d-card-slide.active-card {
    opacity: 1;
    transform: scale(1);
    z-index: 20;
    cursor: pointer;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* --- Imagen dentro de la tarjeta --- */
.eleva3d-card-slide img {
    height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: var(--border-radius-large);
    pointer-events: none;
    display: block;
    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eleva3d-card-slide.active-card img {
    transform: scale(1.0);
}

.eleva3d-card-slide.active-card:hover img {
    transform: scale(1.05);
}

/* --- Botón de Expansión (Icono +) --- */
.eleva3d-expand-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent !important;
    border: none;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.eleva3d-expand-btn img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.eleva3d-card-slide.active-card .eleva3d-expand-btn {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    transition-delay: 0.2s;
}

.eleva3d-expand-btn:hover {
    transform: scale(1.1) !important;
}

/* --- Flechas de Navegación --- */
.eleva3d-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none;
    cursor: pointer;
    z-index: 9999 !important;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: none !important;
}

.eleva3d-nav-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.eleva3d-nav-arrow img {
    width: 50px;
    height: auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

.arrow-left {
    left: 30px !important;
}

.arrow-right {
    right: 30px !important;
}

/* ==================== MODAL IMAGEN ==================== */

.eleva3d-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.eleva3d-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: inline-block;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.eleva3d-modal-overlay.active .eleva3d-modal-content {
    transform: scale(1);
}

.eleva3d-modal-image {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 40px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
}

/* --- Botón Cerrar Modal --- */
.eleva3d-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent !important;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    transition: all 0.3s ease;
}

.eleva3d-modal-close img {
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.eleva3d-modal-close:hover {
    transform: scale(1.1);
}

/* ========== 21. ESTILOS ESPECÍFICOS MODAL ELEVA3D (SIN SOMBRAS) ========== */

.render-info-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
}

.render-info-block {
    background: transparent;
    padding: 0;
    text-align: left;
}

.render-info-img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-base);
    margin-bottom: 20px;
    display: block;
    box-shadow: none;
    transition: var(--transition-base);
}

.render-info-block h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 10px;
}

.render-info-block p {
    font-size: 0.95rem;
    color: var(--color-gray) !important;
    line-height: 1.5;
}

/* MENÚ SELECTOR */
.menu-contenedor-flotante {
    position: absolute;
    bottom: -75px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    transform: scale(1);
    transform-origin: center bottom;
    transition: bottom 0.3s ease;
}

.menu-selector {
    position: relative;
    display: inline-flex;
    background-color: #e2e4e8;
    padding: 4px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    box-sizing: border-box;
}

.menu-item {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
    outline: none;
    border-radius: 999px;
}

.menu-item.activo {
    color: #ffffff;
}

.menu-pastilla {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background-color: #000000;
    border-radius: 999px;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
}

.menu-subtexto {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

/* --- ESTILOS VISTA 3D --- */

.icono-mano-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: auto;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
}

.icono-mano-centro.animar-gesto {
    animation: gestoMano 3s ease-in-out forwards;
}

@keyframes gestoMano {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    35% {
        transform: translate(calc(-50% - 60px), -50%);
    }

    65% {
        transform: translate(calc(-50% + 60px), -50%);
    }

    90% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
}


.contenedor-3d {
    position: absolute;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    background-color: #ffffff;
}

.contenedor-3d.activo {
    opacity: 1;
    pointer-events: auto;
}

.elemento-2d-oculto {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

/* --- CONTENEDORES SIN CAJA (POSICIONAMIENTO ACTUALIZADO) --- */
.info-text-3d-bloque {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    pointer-events: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

#info-text-3d-left {
    left: auto;
    right: calc(50% + 17vw + 100px);
    text-align: right;
}

.info-derecha {
    right: auto;
    left: calc(50% + 17vw + 100px);
    text-align: left;
}

.titulo-3d {
    display: none;
}

/* --- GRID DE ACCESORIOS EN COLUMNA --- */
.accesorios-3d-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    pointer-events: auto;
    position: relative;
    z-index: 70;
}

/* --- BOTONES DE ACCESORIOS --- */
.accesorio-3d-btn {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    padding: 20px;
    cursor: pointer;
    outline: none;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 364px;
    height: 364px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.accesorio-3d-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
}

.accesorio-3d-btn:hover {
    transform: scale(1.15);
    border: none;
    box-shadow: none;
}

.accesorio-3d-btn:hover img {
    filter:
        drop-shadow(0 0 2px rgba(0, 180, 255, 1)) drop-shadow(0 0 2px rgba(0, 212, 255, 0.9)) drop-shadow(0 0 3px rgba(0, 212, 255, 0.6));
}

.accesorio-3d-btn:active {
    transform: scale(1.05);
    border: none;
    box-shadow: none;
}

.contenedor-3d .accesorios-3d-grid {
    pointer-events: none;
}

.contenedor-3d.activo .accesorios-3d-grid {
    pointer-events: auto;
}

.contenedor-3d .accesorio-3d-btn {
    pointer-events: none;
}

.contenedor-3d.activo .accesorio-3d-btn {
    pointer-events: auto;
}

/* --- ANIMACIONES DE ENTRADA --- */
.contenedor-3d.activo #info-text-3d-left {
    animation: fadeInFromLeft 0.8s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes fadeInFromLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.contenedor-3d.activo .info-derecha {
    animation: fadeInFromRight 0.8s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes fadeInFromRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* --- LOADER 3D (INDICADOR DE CARGA) --- */
.loader-3d-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s;
    pointer-events: none;
}

.loader-3d-container.oculto {
    opacity: 0;
    visibility: hidden;
}

.spinner-ring {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 212, 255, 0.2);
    border-top: 3px solid #00d4ff;
    border-radius: 50%;
    animation: spinLoader 1s linear infinite;
    margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.loading-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #00d4ff;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
    animation: pulseText 1.5s ease-in-out infinite;
}

@keyframes spinLoader {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes pulseText {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* =========================================
   ESTILO SHARE ELEVAVISION (CORREGIDO)
   ========================================= */

.panel-share-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.panel-share-overlay.activo {
    display: flex;
    opacity: 1;
}

.panel-share-content.eleva-style {
    width: 90%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 35px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    color: #333;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-share-overlay.activo .panel-share-content.eleva-style {
    transform: translateY(0);
}

.modal-header-share {
    padding: 35px 35px 10px 35px;
    background: #fff;
    text-align: left;
}

.modal-header-share h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 500;
    color: #000;
    line-height: 1.2;
}

.modal-header-share .modal-subtitle {
    display: block;
    font-size: 0.95rem;
    color: #666;
    margin-top: 8px;
    font-weight: 300;
}

.contacto-form-container-share {
    padding: 10px 35px 40px 35px;
}

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

.eleva-style input,
.eleva-style textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    color: #000;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.eleva-style input:focus,
.eleva-style textarea:focus {
    border-color: #3c63ff;
    box-shadow: 0 0 0 3px rgba(60, 99, 255, 0.1);
}

.eleva-style textarea {
    resize: none;
    min-height: 100px;
}

.cerrar-share-x-dark {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 10;
}

.cerrar-share-x-dark:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.btn-share-action {
    width: 100%;
    padding: 16px;
    background: #EDBB43 !important;
    color: #000 !important;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.btn-share-action:hover {
    background: #f0c457 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(237, 187, 67, 0.3);
}

.btn-share-action:active {
    transform: translateY(0);
}

.btn-share-action:disabled {
    background: #ccc !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
    user-select: none;
}

.checkbox-container input {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
    background: #fff;
    transition: all 0.2s;
    margin-top: 1px;
}

.checkbox-container:hover .checkmark {
    border-color: #adb5bd;
}

.checkbox-container input:checked+.checkmark {
    background: #3c63ff;
    border-color: #3c63ff;
}

.checkbox-container input:checked+.checkmark::after {
    content: '✓';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-text a {
    color: #3c63ff;
    text-decoration: none;
    font-weight: 500;
}

.checkbox-text a:hover {
    text-decoration: underline;
}

/* ============================================
   MODAL APP PREVIEW - CARRUSEL AUTOMÁTICO
   ============================================ */
.modal-app-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 15000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-app-overlay.activo {
    display: flex;
}

.modal-app-content {
    position: relative;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-app-cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

.modal-app-cerrar:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.modal-app-cerrar svg {
    width: 20px;
    height: 20px;
}

.modal-app-slides {
    position: relative;
    width: 72vw;
    max-width: 900px;
    aspect-ratio: 4 / 3;
}

.modal-app-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.modal-app-slide.active {
    opacity: 1;
    z-index: 2;
}

/* ============================================
   MODAL VIDEO PREVIEW
   ============================================ */
.modal-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 15000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-video-overlay.activo {
    display: flex;
}

.modal-video-content {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-video-cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
}

.modal-video-cerrar:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.modal-video-cerrar svg {
    width: 20px;
    height: 20px;
}

.modal-video-player {
    display: block;
    width: 72vw;
    max-width: 900px;
    height: auto;
    border-radius: 35px;
}

/* ============================================
   MODAL INFO (PDF) - SAFARI FIX
   ============================================ */
.modal-info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 15000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-info-overlay.activo {
    display: flex;
}

.modal-info-content {
    position: relative;
    border-radius: 35px;
    background: white;
    width: 85vw;
    max-width: 1000px;
    height: 85vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-info-cerrar {
    position: absolute;
    top: 15px;
    right: 25px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s, transform 0.2s;
    z-index: 20;
}

.modal-info-cerrar:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.modal-info-cerrar svg {
    width: 20px;
    height: 20px;
}

.pdf-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f4f4f4;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.modal-info-viewer {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    min-height: 100%;
}

/* ============================================
   SISTEMA DE NOTIFICACIONES TOAST MEJORADO
   ============================================ */

#toast-container {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25000;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #ffffff;
    padding: 18px 28px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);

    min-width: 320px;
    max-width: 500px;

    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    pointer-events: auto;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-notification.hide {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
}

.toast-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-icon {
    width: 24px;
    height: 24px;
    display: none;
}

.toast-notification.success {
    border-left: 4px solid #27ae60;
    background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
}

.toast-notification.success .icon-success {
    display: block;
    color: #27ae60;
    animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.toast-notification.error {
    border-left: 4px solid #e74c3c;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}

.toast-notification.error .icon-error {
    display: block;
    color: #e74c3c;
    animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.toast-notification.info {
    border-left: 4px solid #3c63ff;
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
}

.toast-notification.info .icon-info {
    display: block;
    color: #3c63ff;
    animation: infoPulse 0.5s ease-in-out;
}

@keyframes infoPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.toast-notification.warning {
    border-left: 4px solid #f39c12;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf0 100%);
}

.toast-notification.warning .icon-warning {
    display: block;
    color: #f39c12;
    animation: warningBounce 0.5s ease-in-out;
}

@keyframes warningBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.toast-message {
    flex: 1;
    margin: 0;
}

.toast-close {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    color: #333;
}

/* ============================================
   ESTADO OVERLAY (Blur sobre formulario)
   ============================================ */
.status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border-radius: 35px;
}

.status-overlay.activo {
    opacity: 1;
    pointer-events: auto;
}

.status-card {
    background: #ffffff;
    width: 80%;
    max-width: 320px;
    padding: 30px 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.status-overlay.activo .status-card {
    transform: scale(1);
}

.status-card h4 {
    margin: 15px 0 10px 0;
    font-size: 1.2rem;
    color: #333;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.status-card p {
    margin: 0 0 20px 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

.status-icon svg {
    width: 50px;
    height: 50px;
}

.icon-success-anim {
    color: #27ae60;
    animation: popIcon 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-error-anim {
    color: #e74c3c;
    animation: shakeIcon 0.4s ease-in-out;
}

.status-btn-ok {
    background: #f0f0f0;
    color: #333;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.status-btn-ok:hover {
    background: #e0e0e0;
}

@keyframes popIcon {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shakeIcon {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* ============================================
   ESTILOS VISOR DOCUMENTO JPG
   ============================================ */

.info-img-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f4f4f4;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.info-document-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    transition: width 0.3s ease;
    cursor: zoom-in;
    transform-origin: top center;
}

.info-document-img.zoomed {
    width: 200%;
    cursor: zoom-out;
    cursor: -webkit-zoom-out;
}

.info-img-wrapper.has-zoom {
    overflow-x: auto;
    justify-content: flex-start;
}

/* =======================================================
   NUEVO ESTILO DE BOTÓN CERRAR
   ======================================================= */

.boton-cerrar-emmerson {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
    background-color: #333333;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    z-index: 20;
    transition: transform 0.2s ease, background-color 0.2s;
}

.boton-cerrar-emmerson svg {
    width: 18.5px;
    height: 18.5px;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(45deg);
}

.boton-cerrar-emmerson:hover {
    transform: scale(1.1);
    background-color: #000000;
}

.boton-cerrar-emmerson.tema-claro,
.boton-cerrar-emmerson.tema-oscuro {
    background-color: #333333;
    box-shadow: none;
    backdrop-filter: none;
    border: none;
}

.boton-cerrar-emmerson.tema-claro svg,
.boton-cerrar-emmerson.tema-oscuro svg {
    stroke: #ffffff;
}

/* ============================================
   SELECTOR WEB/APP INTEGRADO EN MENÚ
   ============================================ */
.selector-webapp-integrado {
    position: relative;
    display: inline-flex;
    background-color: #00aae4;
    padding: 4px;
    border-radius: 999px;
    user-select: none;
}

.selector-webapp-integrado .selector-option {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
    outline: none;
    border-radius: 999px;
}

.selector-webapp-integrado .selector-option.activo {
    color: #0288d1;
}

.selector-webapp-integrado .selector-pastilla-webapp {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background-color: #ffffff;
    border-radius: 999px;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
}

.selector-pastilla-webapp.dragging {
    transition: none;
}

.menu-separador {
    width: 1px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.15);
    margin: auto 8px;
}


/* ============================================
   MENÚ INFERIOR - ESTILO 3D VIEW
   ============================================ */

.menu-contenedor-flotante.modo-3d-menu .menu-selector {
    background-color: rgba(0, 40, 60, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 180, 220, 0.3);
}

.menu-contenedor-flotante.modo-3d-menu .menu-item {
    color: rgba(255, 255, 255, 0.7);
}

.menu-contenedor-flotante.modo-3d-menu .menu-item.activo {
    color: #ffffff;
}

.menu-contenedor-flotante.modo-3d-menu .menu-pastilla {
    background: linear-gradient(135deg, #0088aa 0%, #00b4d8 50%, #0088aa 100%);
    box-shadow: 0 0 15px rgba(0, 180, 220, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.menu-contenedor-flotante.modo-3d-menu .selector-webapp-integrado {
    background-color: rgba(0, 100, 130, 0.6);
    border: 1px solid rgba(0, 180, 220, 0.3);
}

.menu-contenedor-flotante.modo-3d-menu .selector-webapp-integrado .selector-option {
    color: rgba(255, 255, 255, 0.8);
}

.menu-contenedor-flotante.modo-3d-menu .selector-webapp-integrado .selector-option.activo {
    color: #003344;
}

.menu-contenedor-flotante.modo-3d-menu .selector-pastilla-webapp {
    background: linear-gradient(135deg, #00d4ff 0%, #00a8cc 100%);
}

.menu-contenedor-flotante.modo-3d-menu .menu-separador {
    background-color: rgba(0, 180, 220, 0.4);
}

.menu-contenedor-flotante.modo-3d-menu .menu-subtexto {
    color: rgba(255, 255, 255, 0.5);
}

.menu-contenedor-flotante.modo-3d-menu {
    color: #ffffff;
}

/* ============================================
   LOADER 3D (INDICADOR DE CARGA)
   ============================================ */
.loader-3d-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s;
    pointer-events: none;
}

.loader-3d-container.oculto {
    opacity: 0;
    visibility: hidden;
}

.spinner-ring {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 212, 255, 0.2);
    border-top: 3px solid #00d4ff;
    border-radius: 50%;
    animation: spinLoader 1s linear infinite;
    margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.loading-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #00d4ff;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: uppercase;
    animation: pulseText 1.5s ease-in-out infinite;
}

@keyframes spinLoader {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes pulseText {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes parpadeoMouse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.mouse-blink-effect {
    animation: parpadeoMouse 0.5s ease-in-out 3;
}

/* =========================================
   AJUSTES FOOTER (TEXTO ELEVA)
   ========================================= */

.menu-subtexto {
    margin-top: 15px;
    font-size: 12px;
    color: #999;
}


.iframe-invisible {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease, visibility 0.5s;
}


/* ==================== ESTILOS SCROLL SPY (ICONOS ACTIVOS) ==================== */

.menu-links li a.active-scroll .menu-icon {
    transform: scale(1.35);
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.top-bar-menu.on-dark-section .menu-links li a.active-scroll .menu-icon {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 15px rgba(0, 212, 255, 0.6));
    transform: scale(1.35);
}

/* ==================== BOTONES ACCESORIOS 3D VIEW ==================== */

.accesorios-3d-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
    pointer-events: auto;
    position: relative;
    z-index: 70;
}

.accesorio-3d-btn {
    background: transparent;
    border: none;
    padding: 20px;
    cursor: pointer;
    outline: none;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 260px;
    box-shadow: none;
}

.accesorio-3d-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 15px;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
}

.accesorio-3d-btn:hover {
    transform: scale(1.15);
}

.accesorio-3d-btn:hover img {
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 15px rgba(0, 180, 255, 0.6)) drop-shadow(0 0 25px rgba(0, 212, 255, 0.4));
}

.accesorio-3d-btn:active {
    transform: scale(1.05);
}

#info-text-3d-right p {
    pointer-events: none;
}

/* Estilo del enlace Demo Limitada */
.enlace-demo {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    cursor: pointer;
}

.enlace-demo:hover {
    color: #000000;
    text-decoration: none;
}

.menu-contenedor-flotante.modo-3d-menu .enlace-demo {
    color: #00d4ff;
}

.menu-contenedor-flotante.modo-3d-menu .enlace-demo:hover {
    color: #ffffff;
}

/* Cursor para indicar arrastre en carruseles */
.cards-container,
#ventas-cards-container {
    cursor: grab;
}

.cards-container:active,
#ventas-cards-container:active {
    cursor: grabbing;
}


/*****************************************/
/* EMMERSON */

/* ============================================================
   RESTRICCIÓN PARA PANTALLAS SUPERIORES A 1920px
   ============================================================ */
@media (min-width: 1920px) {
    .contenedor-metronomo {
        /* 1920 * 0.34 = 652.8px. Fijamos el ancho */
        width: 652.8px !important;
        /* Fijamos la unidad de medida: 652.8 / 100 = 6.528px */
        --m-unit: 6.528px !important;

        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        transform: translateX(0) !important;
    }

    .metronomo,
    .mascara {
        width: 100% !important;
        /* Que ocupen el 100% de los 652px fijos */
    }
}

.contenedor-metronomo {
    --m-unit: 0.34vw;
    position: relative;
    display: block;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px !important;
    margin-bottom: 0;
    overflow: visible;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.metronomo {
    width: 34vw;
    height: auto;
    display: block;
    position: relative;
    z-index: 999;
    -webkit-user-drag: none
}

.mascara {
    width: 34vw;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    -webkit-user-drag: none;
    pointer-events: none;
}

.conexiones-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1350 !important;
    overflow: visible;
}

.conexiones-svg-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1150 !important;
    overflow: visible;
}

.curva-bezier {
    fill: none;
    stroke-width: 8px;
    stroke-linecap: square;
    stroke-linejoin: round;
}

.curva-instrumentos {
    stroke: #001281;
}

.curva-generador {
    stroke: #b70000;
}

#curva-generador-superior {
    z-index: auto;
}

#curva-generador-inferior {
    z-index: auto;
}

.topo-nodo {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #b70000;
    border-radius: 50%;
    z-index: 1351 !important;
    cursor: grab;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.topo-nodo:active {
    cursor: grabbing;
}

.cruceta,
.boton-nota,
.boton-instrumentos,
.boton-generador,
.boton-on-off,
.boton-play,
.dial,
.generador,
.generador-a,
.generador-b,
.generador-c,
.generador-d,
.guitarra,
.instruments-off,
.instruments-on,
.jack-instruments,
.jack-generador,
.led-off,
.led-on,
.pantalla-metronomo-1,
.pantalla-metronomo-2,
.pantalla-metronomo-3,
.pantalla-metronomo-4,
.pantalla-metronomo-5,
.pantalla-metronomo-6,
.pantalla-metronomo-7,
.pantalla-metronomo-8,
.pantalla-metronomo-9,
.pantalla-metronomo-10,
.ruleta-1,
.ruleta-2,
.saxo,
.topo-metronomo-generador,
.topo-metronomo-jack,
.topo-metronomo,
.violin,
.vista-2,
.vista-3,
.vista-4,
.vista-5,
.widget-boss,
.widget-integral,
.widget-junio,
.widget-kaotik,
.widget-linear,
.widget-permek {
    position: absolute;
    display: block;
}

.boton-nota,
.boton-instrumentos,
.boton-generador,
.boton-on-off,
.boton-play {
    transition: transform 0.08s ease-out,
        filter 0.08s ease-out;
    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
    transform-origin: center center;
}

.boton-pulsado {
    transform: scale(0.95) !important;
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0)) !important;
}

.draggable {
    user-select: none;
    transition: box-shadow 0.2s ease;
}

.instrumento-conectable {
    cursor: grab;
}

.instrumento-conectable:active {
    cursor: grabbing;
}

.boton-nota {
    left: 18.8%;
    top: 45.7%;
    width: 16.92%;
    z-index: 999;
}

.boton-instrumentos {
    left: 64%;
    top: 45.59%;
    width: 16.95%;
    z-index: 999;
}

.boton-generador {
    left: 31%;
    top: 52.6%;
    width: 17.95%;
    z-index: 999;
}

.boton-on-off {
    left: 34.6%;
    top: 45.71%;
    width: 30.45%;
    z-index: 999;
}

.boton-play {
    left: 49.70%;
    top: 52.03%;
    width: 19.77%;
    z-index: 999;
}

.dial {
    left: 56.19%;
    top: 61.16%;
    width: 38.78%;
    z-index: 1100 !important;
    transform-origin: center center;
    transition: transform 0.1s linear;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.generador {
    left: -72.03%;
    top: 26.06%;
    width: 45.85%;
    z-index: 1250 !important;
}

.generador-a {
    left: -72.03%;
    top: 26.06%;
    width: 45.85%;
    z-index: 1250 !important;
    display: none;
}

.generador-b {
    left: -72.03%;
    top: 26.06%;
    width: 45.85%;
    z-index: 1250 !important;
    display: none;
}

.generador-c {
    left: -72.03%;
    top: 26.06%;
    width: 45.85%;
    z-index: 1250 !important;
    display: none;
}

.generador-d {
    left: -72.03%;
    top: 26.06%;
    width: 45.85%;
    z-index: 1250 !important;
    display: none;
}

.generador,
.generador-d {
    left: -72.03%;
    top: 26.06%;
    width: 45.85%;
    z-index: 1250 !important;
}

.guitarra {
    left: 117%;
    top: 4.73%;
    width: 42.98%;
    z-index: 1400 !important;
}

.saxo {
    left: 117%;
    top: 3.9261%;
    width: 43.2612%;
    z-index: 1400 !important;
    display: none;
}

.violin {
    left: 117%;
    top: 4.77585%;
    width: 42.4293%;
    z-index: 1400 !important;
    display: none;
}

.jack-instruments {
    left: 96.992%;
    top: 58.2546%;
    width: 18.49%;
    z-index: 1150 !important;
}

.jack-generador {
    left: -15.727%;
    top: 58.7207%;
    width: 18.50%;
    transform: scaleX(-1);
    z-index: 1150 !important;
}

.topo-metronomo-generador {
    left: 5.57721%;
    top: 56.334%;
    width: 11.0906%;
    z-index: 1200 !important;
    -webkit-user-drag: none;
}

.topo-metronomo-jack {
    left: 85.5%;
    top: 56.1%;
    width: 9.0573%;
    z-index: 1200 !important;
    -webkit-user-drag: none;
}

.topo-metronomo {
    left: 91.4523%;
    top: 31.237%;
    width: 5.54529%;
    z-index: 1020;
    -webkit-user-drag: none;
}

.led-off {
    left: 16.6208%;
    top: 10.3941%;
    width: 4.15973%;
    z-index: 1010;
    -webkit-user-drag: none
}

.led-on {
    left: 16.6208%;
    top: 10.3941%;
    width: 4.15973%;
    z-index: 1010;
    display: none;
    -webkit-user-drag: none
}

.pantalla-metronomo-1 {
    left: 31.5%;
    top: 31.0809%;
    width: 4.8%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-2 {
    left: 66.1413%;
    top: 30.452%;
    width: 7.07856%;
    z-index: 1030;
    -webkit-user-drag: none;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
    perspective: 1000px;
}

.pantalla-metronomo-2.elemento-2d-oculto {
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

.pantalla-metronomo-3 {
    left: 56.1618%;
    top: 21.3974%;
    width: 4.62107%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-4 {
    left: 53.3934%;
    top: 19.2108%;
    width: 7.57856%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-5 {
    left: 23.0178%;
    top: 27.8639%;
    width: 8.5%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-6 {
    left: 52.1001%;
    top: 15.7723%;
    width: 8.68762%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-7 {
    left: 45.449%;
    top: 25.4%;
    width: 10%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-8 {
    left: 32.1469%;
    top: 18.4%;
    width: 15.5268%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-9 {
    left: 65.0005%;
    top: 27.86%;
    width: 11%;
    z-index: 1030;
    -webkit-user-drag: none
}

.pantalla-metronomo-10 {
    left: 62.4462%;
    top: 19.6793%;
    width: 5.54529%;
    z-index: 1030;
    -webkit-user-drag: none
}

.ruleta-1 {
    left: 84.86%;
    top: 29.99%;
    width: 15.3%;
    z-index: 1200 !important;
}

.ruleta-2 {
    left: 84.86%;
    top: 29.99%;
    width: 15.3%;
    z-index: 1200 !important;
    display: none;
}

.ruleta-1,
.ruleta-2 {
    transition: opacity 0.05s ease-out;
}

.widget-boss,
.widget-integral,
.widget-junio,
.widget-kaotik,
.widget-linear,
.widget-permek {
    left: 0%;
    top: 0%;
    width: 20%;
    z-index: 2;
    display: none;
    -webkit-user-drag: none
}

.draggable,
.metronomo,
.mascara,
.dial {
    transition: transform 0.1s linear;
}

/* DISPLAY DE TEMPO */
@font-face {
    font-family: 'Digital';
    src: url('assetselevavision/digital.ttf') format('truetype');
}

.tempo-display {
    position: absolute;
    left: 48%;
    transform: translateX(-50%);
    top: 27.8%;
    z-index: 1030;
    font-family: 'Digital', monospace;
    font-size: calc(var(--m-unit) * 14.7) !important;
    line-height: 1;
    -webkit-user-drag: none;
    pointer-events: none;
}

.tempo-fondo {
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(79, 195, 247, 0.12);
}

.tempo-valor {
    position: relative;
    color: #4FC3F7;
}

.digito {
    display: inline-block;
    width: 0.48em;
    text-align: right;
}

.digito#digito-3,
.digito#digito-punto-fondo {
    width: 0.3em;
    margin-left: -0.15em;
}

/* ============================================
   GRÁFICO DE VOLUMEN
   ============================================ */
.volumen-grafico {
    position: absolute;
    left: 21.0%;
    top: 30%;
    width: 9%;
    height: 7%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4%;
    z-index: 1030;
    padding: 0;
    -webkit-user-drag: none;
    pointer-events: none;
}

.volumen-barra {
    width: 16%;
    flex-shrink: 0;
    border-radius: 1px;
    transition: all 0.15s ease-out;
    position: relative;
    background: transparent;
}

.volumen-barra[data-barra="1"] {
    height: 20%;
}

.volumen-barra[data-barra="2"] {
    height: 35%;
}

.volumen-barra[data-barra="3"] {
    height: 50%;
}

.volumen-barra[data-barra="4"] {
    height: 70%;
}

.volumen-barra[data-barra="5"] {
    height: 90%;
}

.volumen-barra.activa {
    background: linear-gradient(180deg,
            #7dd8f7 0%,
            #4fc3f7 20%,
            #29b6f6 50%,
            #0288d1 80%,
            #01579b 100%) !important;
}

/* ============================================
   ESTADO DE BIENVENIDA - PARPADEO
   ============================================ */

.tempo-display.parpadeando .tempo-valor {
    animation: parpadeoTempo 0.8s ease-in-out infinite;
}

@keyframes parpadeoTempo {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.boton-play.glow-verde {
    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 3px rgba(0, 255, 0, 0.64)) drop-shadow(0px 0px 6px rgba(0, 255, 0, 0.64)) drop-shadow(0px 0px 10px rgba(0, 255, 0, 0.51));
}

.boton-play.glow-verde.parpadeando {
    animation: parpadeoGlowVerde 0.8s ease-in-out infinite;
}

@keyframes parpadeoGlowVerde {

    0%,
    100% {
        filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 3px rgba(0, 255, 0, 0.64)) drop-shadow(0px 0px 6px rgba(0, 255, 0, 0.64)) drop-shadow(0px 0px 10px rgba(0, 255, 0, 0.51));
    }

    50% {
        filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 1px rgba(0, 255, 0, 0.32)) drop-shadow(0px 0px 2px rgba(0, 255, 0, 0.19));
    }
}

.boton-play.glow-rojo {
    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 3px rgba(255, 0, 0, 0.64)) drop-shadow(0px 0px 6px rgba(255, 0, 0, 0.64)) drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.51));
}

/* ============================================
   SECUENCIA DE ARCOS
   ============================================ */
.contenedor-arcos {
    position: absolute;
    left: 15.7%;
    top: 9.3%;
    width: 67.8%;
    aspect-ratio: 2 / 1;
    height: auto;
    z-index: 1030;
    pointer-events: none;
    overflow: hidden;
    transform-origin: bottom center;
    transform: scaleY(0.98);
}

.arco-segmento {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    border-radius: 50%;
    box-sizing: border-box;
    border-style: solid;
    border-color: rgba(0, 170, 228, 0.15);
    clip-path: polygon(50% 50%, calc(50% + 1px) 0%, 100% 0%);
    transition: opacity 0.1s, border-color 0.1s, filter 0.1s;
    transform-origin: center center;
}

.arco-segmento.activo {
    border-color: #00aae4;
    filter: drop-shadow(0 0 1vw rgba(0, 170, 228, 0.6));
    z-index: 2;
}

.arco-1 {
    transform: rotate(-90deg);
}

.arco-2 {
    transform: rotate(-45deg);
}

.arco-3 {
    transform: rotate(0deg);
}

.arco-4 {
    transform: rotate(45deg);
}

/* ============================================
   ANIMACIÓN PARPADEO ROJO (PAUSA)
   ============================================ */

@keyframes parpadeoGlowRojo {

    0%,
    100% {
        filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 3px rgba(255, 0, 0, 0.64)) drop-shadow(0px 0px 6px rgba(255, 0, 0, 0.64)) drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.51));
    }

    50% {
        filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.4)) drop-shadow(0px 0px 1px rgba(255, 0, 0, 0.32)) drop-shadow(0px 0px 2px rgba(255, 0, 0, 0.19));
    }
}

.boton-play.glow-rojo.parpadeando {
    animation: parpadeoGlowRojo 0.8s ease-in-out infinite;
}

/* ============================================
   EFECTOS DE ESTADO
   ============================================ */

@keyframes parpadeoArcoVerde {

    0%,
    100% {
        border-color: #00d857;
        filter: drop-shadow(0 0 1vw rgba(0, 216, 87, 0.8));
        opacity: 1;
    }

    50% {
        border-color: rgba(0, 216, 87, 0.05);
        filter: none;
        opacity: 0.5;
    }
}

.arco-parpadeo-verde {
    animation: parpadeoArcoVerde 0.8s ease-in-out infinite;
    z-index: 2;
}

@keyframes parpadeoArcoRojo {

    0%,
    100% {
        border-color: #ff0000;
        filter: drop-shadow(0 0 1vw rgba(255, 0, 0, 0.8));
        opacity: 1;
    }

    50% {
        border-color: rgba(255, 0, 0, 0.05);
        filter: none;
        opacity: 0.5;
    }
}

.arco-parpadeo-rojo {
    animation: parpadeoArcoRojo 0.8s ease-in-out infinite;
    z-index: 2;
}

@keyframes parpadeoSimple {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.parpadeo-default {
    animation: parpadeoSimple 0.8s ease-in-out infinite;
}

.punto-beat-golpe {
    opacity: 0.3 !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    transition: all 0.05s ease-out;
}

.estatico-tenue {
    opacity: 0.3 !important;
    animation: none !important;
    filter: none !important;
    transition: opacity 0.3s ease;
}

@keyframes parpadeoPuntoSincrono {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.parpadeo-default {
    animation: parpadeoPuntoSincrono 0.8s ease-in-out infinite;
}

/* ============================================
   TÍTULO 3D VIEW
   ============================================ */
.titulo-3d {
    font-size: 24px;
    font-weight: 500;
    color: #0288d1;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.info-text-3d {
    position: absolute;
    left: 100%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 30px;
    width: 22vw;
    max-width: 400px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    color: #ffffff;
    font-weight: 300;
    display: none;
    z-index: 2000;
    pointer-events: none;
    user-select: none;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.9);
}

/* ============================================
   CONTENEDOR SYNTHWAVE + OSCILOSCOPIO
   ============================================ */
.synthwave-container {
    position: absolute;
    z-index: 1260;
    pointer-events: none;
    user-select: none;
}

.synthwave-label {
    position: absolute;
    color: #00aae4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0;
    text-shadow: 0 0 8px rgba(0, 170, 228, 0.6);
    text-align: center;
    transform: translateX(-50%);
    transition: opacity 0.5s ease-out;
}

@keyframes parpadeoElectricoTexto {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0.8;
    }

    5% {
        opacity: 0;
    }

    8% {
        opacity: 0.6;
    }

    12% {
        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    18% {
        opacity: 0.2;
    }

    22% {
        opacity: 0.7;
    }

    25% {
        opacity: 0.1;
    }

    28% {
        opacity: 0.8;
    }

    32% {
        opacity: 0;
    }

    35% {
        opacity: 0.6;
    }

    40% {
        opacity: 0;
    }

    45% {
        opacity: 0.9;
    }

    48% {
        opacity: 0.2;
    }

    52% {
        opacity: 0.7;
    }

    55% {
        opacity: 0.1;
    }

    60% {
        opacity: 1;
    }

    65% {
        opacity: 0.3;
    }

    70% {
        opacity: 0.9;
    }

    75% {
        opacity: 0.5;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.synthwave-label.parpadeo-electrico {
    animation: parpadeoElectricoTexto 1.2s ease-out forwards;
}

.synthwave-label.fade-out {
    opacity: 0 !important;
    animation: none;
}

.osciloscopio {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.osciloscopio.visible {
    opacity: 1;
}

.osciloscopio-rejilla {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(0, 170, 228, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 170, 228, 0.15) 1px, transparent 1px);
    background-size: 10% 20%;
    border: 1px solid rgba(0, 170, 228, 0.3);
    border-radius: 2px;
}

.osciloscopio-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ============================================
   MANOS INDICADORAS DE ARRASTRE
   ============================================ */
.mano-hint {
    position: absolute;
    display: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 1100 !important;
    opacity: 0;
    width: 6%;
    height: auto;
}

.mano-instrumentos {
    left: 100%;
    top: 68%;
    transform: translateY(-50%);
}

.mano-generador {
    left: -8%;
    top: 68%;
    transform: translateY(-50%) scaleX(-1);
}

@keyframes deslizarManoIzquierda {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) translateX(-30px);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

@keyframes deslizarManoIzquierdaVolteada {
    0% {
        transform: translateY(-50%) scaleX(-1) translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) scaleX(-1) translateX(-30px);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) scaleX(-1) translateX(0);
        opacity: 1;
    }
}

.mano-instrumentos.animando {
    display: block;
    opacity: 1;
    animation: deslizarManoIzquierda 0.6s ease-in-out 3;
}

.mano-generador.animando {
    display: block;
    opacity: 1;
    animation: deslizarManoIzquierdaVolteada 0.6s ease-in-out 3;
}

.mano-hint.fade-out {
    animation: none;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* ============================================
   PARPADEO AMARILLO (INTENSO)
   ============================================ */
@keyframes parpadeoGlowAmarillo {

    0%,
    100% {
        filter: drop-shadow(0px 0px 8px rgba(255, 215, 0, 1)) drop-shadow(0px 0px 25px rgba(255, 200, 0, 0.8)) brightness(1.1);
    }

    50% {
        filter: drop-shadow(0px 0px 4px rgba(255, 215, 0, 0.5)) brightness(1.0);
        transform: scale(0.98);
    }
}

.glow-amarillo {
    animation: parpadeoGlowAmarillo 0.6s ease-in-out infinite !important;
}

.nota-display {
    position: absolute;
    left: 38.3%;
    top: 21.8%;
    z-index: 1030;
    font-family: 'Digital', monospace;
    color: #4FC3F7;
    font-size: calc(var(--m-unit) * 6.1) !important;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 5px rgba(79, 195, 247, 0.4);
    transition: opacity 0.2s ease-out;
}

/* =========================================
   BOTÓN SHARE Y PANEL
   ========================================= */
.boton-share-superior {
    position: absolute;
    top: 3%;
    right: 3%;
    width: 4vw;
    height: 4vw;
    max-width: 40px;
    max-height: 40px;
    min-width: 25px;
    min-height: 25px;
    z-index: 2000;
    cursor: pointer;
    color: #4FC3F7;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.boton-share-superior svg {
    width: 60%;
    height: 60%;
}

.boton-share-superior:hover {
    transform: scale(1.1);
    background: rgba(79, 195, 247, 0.1);
    filter: drop-shadow(0 0 5px #4FC3F7);
}

.oculto-por-ondas {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
    animation: none !important;
    filter: none !important;
}

.pantalla-metronomo-2.oculto-por-ondas {
    display: none !important;
    animation: none !important;
}

.wave-overlay {
    position: absolute;
    display: none;
    z-index: 1030;
    width: 68%;
    height: auto;
    pointer-events: auto;
    cursor: pointer;
    filter: none;
    box-shadow: none;
    transition: opacity 0.3s ease;
}

.info-texto,
.mod-label {
    font-family: 'Digital', monospace;
    color: #4FC3F7;
    position: absolute;
    z-index: 1030;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 5px rgba(79, 195, 247, 0.4);
}

.info-hz {
    left: 26%;
    top: 35.5%;
    font-size: 1.1vw;
}

.info-v {
    left: 50%;
    top: 35.5%;
    font-size: 1.1vw;
}

.info-pct {
    left: 73.5%;
    top: 35.5%;
    font-size: 1.1vw;
}

.mod-level-container {
    position: absolute;
    left: 21%;
    top: 30.5%;
    width: 12%;
    height: 4%;
    z-index: 1030;
    pointer-events: none;
}

.mod-label {
    position: relative;
    font-size: 0.8vw;
    margin-bottom: 2px;
    width: 100%;
    text-align: left;
}

.mod-bars-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.mod-bar {
    width: 8%;
    background-color: rgba(79, 195, 247, 0.15);
    border-radius: 1px;
    transition: background-color 0.1s;
}

.mod-bar.active {
    background-color: #00aae4;
    box-shadow: 0 0 5px rgba(0, 170, 228, 0.8);
}

.mini-onda-canvas {
    position: absolute;
    left: 35.5%;
    top: 26.8%;
    width: 28.5%;
    height: 8.5%;
    z-index: 1030;
    pointer-events: none;
}

.elemento-onda-exclusivo {
    display: none;
    pointer-events: none;
}

.elemento-onda-exclusivo.activo {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mod-level-container,
.mini-onda-canvas,
.info-cluster {
    z-index: 1030;
    pointer-events: none !important;
}

.wave-overlay {
    pointer-events: auto;
}

.led-conexion {
    position: absolute;
    width: 1.4%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    z-index: 1030;
    display: none;
    pointer-events: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}

#led-status-generador {
    left: 71.32%;
    top: 33%;
}

#led-status-instrumentos {
    left: 75.1%;
    top: 29.8%;
}

.led-rojo-blink {
    background-color: #ff3333;
    box-shadow: 0 0 0.8vw #ff0000;
    animation: parpadeoLed 0.4s infinite alternate;
}

.led-verde-fijo {
    background-color: #00ff00;
    box-shadow: 0 0 0.8vw #00ff00;
    animation: none;
}

@keyframes parpadeoLed {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0.3;
        transform: scale(0.9);
    }
}

@keyframes flashNotaAccion {
    0% {
        transform: scale(1);
        color: #4FC3F7;
        text-shadow: 0 0 5px rgba(79, 195, 247, 0.4);
    }

    15% {
        transform: scale(1.3);
        color: #ffffff;
        text-shadow: 0 0 20px #ffffff, 0 0 40px #4FC3F7;
    }

    100% {
        transform: scale(1);
        color: #4FC3F7;
        text-shadow: 0 0 5px rgba(79, 195, 247, 0.4);
    }
}

.animacion-flash-nota {
    animation: flashNotaAccion 0.3s ease-out forwards;
}

.contenedor-metronomo:has(.contenedor-3d.activo)::before {
    opacity: 1;
}

/* ============================================
   ACTUALIZACIÓN ESTILOS VISTA 3D
   ============================================ */

.mouse-hint {
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: -22vw;
    margin-right: 0;
    width: 15vw;
    height: auto;
    z-index: 2000;
    display: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.info-text-3d {
    position: absolute;
    left: 100%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 30px;
    margin-right: 0;
    width: 22vw;
    max-width: 400px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    color: #ffffff;
    font-weight: 300;
    display: none;
    z-index: 2000;
    pointer-events: none;
    user-select: none;
}

.titulo-3d {
    font-size: 28px;
    font-weight: 600;
    color: #00d4ff;
    margin: 0 0 15px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5),
        0 0 20px rgba(0, 212, 255, 0.3);
}

/* ============================================
   ALERTA DE VOLUMEN
   ============================================ */
.volume-alert {
    position: absolute;
    top: -2%;
    left: -4%;
    transform: translateX(-50%) scale(1.1);
    font-size: 0.85vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.5em 1.2em;
    width: auto;
    white-space: nowrap;
    background: rgba(10, 25, 40, 0.95);
    border: 0.15em solid #4FC3F7;
    border-radius: 5em;
    filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.6));
    z-index: 5000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.3s ease;
    user-select: none;
}

.volume-alert.visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.volume-alert::after {
    content: '';
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    background: rgba(10, 25, 40, 0.95);
    border-bottom: 0.15em solid #4FC3F7;
    border-right: 0.15em solid #4FC3F7;
    transform: rotate(45deg);
    bottom: -0.75em;
    left: 78%;
    margin-left: -0.4em;
    z-index: 1;
}

.volume-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4FC3F7;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.volume-icon svg {
    width: 1.8em;
    height: 1.8em;
}

.volume-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #ffffff;
    line-height: 1;
    font-weight: 500;
    text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

/* ============================================
   SISTEMA DE NOTIFICACIONES TOAST (EMMERSON)
   ============================================ */

#toast-container {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25000;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #ffffff;
    padding: 18px 28px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    min-width: 320px;
    max-width: 500px;
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-notification.hide {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
}

.toast-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-icon {
    width: 24px;
    height: 24px;
    display: none;
}

.toast-notification.success {
    border-left: 4px solid #27ae60;
    background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
}

.toast-notification.success .icon-success {
    display: block;
    color: #27ae60;
}

.toast-notification.error {
    border-left: 4px solid #e74c3c;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}

.toast-notification.error .icon-error {
    display: block;
    color: #e74c3c;
}

.toast-message {
    flex: 1;
    margin: 0;
}

.toast-close {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    color: #333;
}


/* ============================================================
   ELEVAVISION — FIXES DE DESBORDAMIENTO HORIZONTAL
   Añade este bloque al final de styles_02.css
   (o en un archivo aparte y enlázalo en el HTML)
   ============================================================ */

/* ── 1. RAÍZ: impedir scroll horizontal global ─────────────── */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
    scroll-behavior: smooth;
}

/* ── 4. VÍDEOS DE ANCHO FIJO: hacerlos fluidos ─────────────── */
/*
   presentacion-video: 1100px → desborda en iPad (768-1024px)
   ventas-video: 880px        → ídem
*/
.presentacion-video-container,
.presentacion-placeholder {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.video-placeholder {
    width: min(880px, 100%);
    margin: 0 auto;
}

.presentacion-video,
.ventas-video {
    width: 100%;
    height: auto;
}

/* ── 5. SECCIÓN PRESENTACIÓN: evitar overflow lateral ─────── */
.presentation-section .container {
    overflow: visible;
}

/* ── 6. SECCIÓN VENTAS: el título tiene width:2600px ────────── */
/*
   .ventas-section .section-title { width: 2600px !important; }
   Eso provoca desbordamiento. Lo corregimos:
*/
.ventas-section .section-title {
    width: auto !important;
    max-width: 900px !important;
}

/* ── 7. TECNOLOGÍA: flex nowrap desborda en pantallas medias ── */
@media (max-width: 1200px) {
    .tecnologia-columns {
        flex-wrap: wrap;
    }

    .tecnologia-column {
        width: calc(50% - 20px);
        height: auto;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .tecnologia-column {
        width: 100%;
    }
}

/* ── 8. PLANES ── */
.planes-section {
    overflow: clip;
    overflow-y: visible;
}

.planes-container {
    max-width: 100%;
}

/* ── 9. SLIDER ELEVA3D: ya tiene overflow:hidden pero el
        margin negativo puede causar scroll bar en algunos
        navegadores ────────────────────────────────────────── */
.eleva3d-section {
    overflow: clip;
    overflow-y: visible;
}

/* ── 10. CONTENEDORES GENERALES: evitar que el padding
         de secciones rompa el layout ───────────────────────── */
.ventas-section,
.casosApp-section,
.manipulaciones-section,
.faq-section,
.contacto-section {
    overflow: clip;
    overflow-y: visible;
}

/* ── Casos de resoluciones similares a iPad vertical */
@media (max-width: 1024px) {

    /* ── Ocultar menu lateral en ipad vertical */
    .top-bar-menu {
        display: none !important;
    }

    /* ── Ocultar menu lateral en ipad vertical */
    .manipulaciones-content {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .manipulaciones-carousel-container {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    .manipulaciones-accordion {
        order: 2;
        flex: none;
        width: 100%;
        max-width: 600px;
    }

    /* ── Mejorar funcionamiento tarjetas del carrusel de Casos de uso */
    .cards-container .card {
        width: 310px;
        /* 320px × 0.95 */
        height: 590px;
        /* 580px × 0.95 */
    }

    .cards-container {
        gap: 18px;
        /* 30px × 0.95 */
    }

    .card-images-container {
        height: 65.5%;
        /* antes 70% — así la cabecera pasa de 30% a 34.5% */
    }

    /* ── Escalar el metronomo */
    .metronomo {
        width: 39.1vw;
    }

    /* ── Seccion de ventas */
    .container,
    .ventas-header-container,
    .ventas-section {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow: hidden;
    }

    /* Centrado real del bloque de vídeo en ventas */
    .ventas-header-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ventas-video-column {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Mover menu de la DEMO */
    .menu-contenedor-flotante {
        bottom: -90px !important;
    }

    /* Modificar bordes */
    .planes-accordion-section {
        padding: 0 20px;
    }

    .contacto-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .contacto-container {
        padding: 0 20px;
    }

}

/* Ocultar el banner de recomendación en iPads y Escritorios */
@media (min-width: 769px) {
    #desktop-notice-banner {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ================================================================
   VIDEO PLACEHOLDERS (Placeholders de carga para videos)
   ================================================================ */

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    /* Transición más suave para evitar parpadeos */
    transition: opacity 0.8s ease, visibility 0.8s ease;
    border-radius: inherit;
}

.video-placeholder.active {
    opacity: 1;
    visibility: visible;
}

.video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

.video-loader img {
    width: 60px;
    height: 60px;
    animation: pulse-loader 1.5s ease-in-out infinite;
}

@keyframes pulse-loader {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .video-loader img {
        width: 45px;
        height: 45px;
    }
}


/* CSS Para la landing Page */
/* ============================================================
   SECCIÓN PRESENTACIONES — CSS exclusivo a añadir
   (todo lo demás ya existe en styles_02.css)
   ============================================================ */

/* ── Variables que NO están en el :root de destino ── */
:root {
    --accent: rgba(102, 140, 255, 1);
    --accent-2: rgba(120, 236, 255, 1);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --bg-card: #111114;
    --border: #1e1f25;
    --radius: 30px;
    --maxw: 1200px;
    --text-dim: #9a9ba3;
}

/* ── Sección y padding ── */
/* NOTA: .container y section.block ya existen;
   usa un selector más específico para no colisionar */
#presentaciones.block {
    padding: 90px 0;
    margin-top: 160px;
    margin-bottom: -120px;
}

/* ── Títulos shimmer (el .section-title de destino
   es negro sólido; este es el de color degradado) ── */
#presentaciones .section-title {
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-black);
    max-width: var(--title-max-width);
    line-height: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


#presentaciones .section-title.shimmer-in {
    animation: sectionTitleShimmer 5s linear forwards;
}

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

    50% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* ── Subtítulos (la web destino usa .section-subtitle
   en gris; aquí son cyan/azul) ── */
#presentaciones .section-sub {
    text-align: center;
    color: rgba(120, 236, 255, 1);
    font-size: 28px;
    font-weight: 500;
    max-width: 880px;
    margin: 0px auto 20px;
    line-height: 1.2;
}

#presentaciones .section-sub-sub {
    text-align: center;
    color: rgba(102, 140, 255, 1);
    font-size: 14px;
    max-width: 680px;
    margin: -16px auto 20px;
    font-weight: 600;
}

/* ── Botones de la sección
   (.action-btn ya existe pero con otro estilo;
   usamos .btn y .btn-2 que NO están en destino) ── */
#presentaciones .btn-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

#presentaciones .btn {
    background: transparent;
    border: 2px solid rgba(102, 140, 255, 1);
    color: rgba(102, 140, 255, 1);
    padding: 6px 14px;
    border-radius: 30px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s cubic-bezier(.2, .7, .2, 1);
}

#presentaciones .btn:hover {
    background: rgba(102, 140, 255, 1);
    color: #fff;
}

#presentaciones .btn-2 {
    background: transparent;
    border: 2px solid rgba(120, 236, 255, 1);
    color: rgba(120, 236, 255, 1);
    padding: 6px 14px;
    border-radius: 30px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s cubic-bezier(.2, .7, .2, 1);
}

#presentaciones .btn-2:hover {
    background: rgba(120, 236, 255, 1);
    color: #000;
}

/* ── Carrusel base
   (NO existe en destino; el de destino es .manipulaciones-carousel) ── */
.carousel {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    cursor: grab;
}

.carousel-track {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}

.carousel-track img {
    flex-shrink: 0;
    height: 100%;
    width: auto;
    max-width: none;
    border-radius: 30px;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* ── Override específico de Presentaciones ── */
#presentaciones .carousel-track {
    gap: 40px;
}

/* ── Dots ── */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.carousel-dots button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    cursor: pointer;
    padding: 0;
    transition: background .3s;
}

.carousel-dots button.active {
    background: var(--color-subprimary);
}

/* ── Flechas de navegación
   (.carousel-nav NO existe en destino) ── */
.carousel-wrapper {
    position: relative;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.carousel-nav:hover {
    opacity: 1;
    transform: translateY(-50%) scale(0.95);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}

.carousel-nav img {
    width: 65px;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    transition: filter 0.2s ease;
}

.carousel-nav-prev {
    left: 70px;
}

.carousel-nav-next {
    right: 70px;
}

/* ── Slides de Presentaciones ── */
.pres-slide {
    flex-shrink: 0;
    position: relative;
    border-radius: 50px;
    box-shadow: 0 0 0 8px #111111;
    background-color: #111111;
    background-image: url('assetselevavision/Logotipo_blanco.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 280px auto;
    /* ← ajusta el tamaño del logo */
    overflow: hidden;
    align-self: center;
    cursor: pointer;
}

.pres-slide img {
    width: 800px;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    pointer-events: none;
}

.pres-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.pres-play-btn svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
    transition: transform .2s;
}

.pres-play-btn:hover svg {
    transform: scale(1.1);
}

.pres-slide.playing .pres-play-btn {
    display: none;
}

.pres-slide iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Pie de foto ── */
.foto-caption {
    text-align: center;
    font-style: italic;
    font-size: 12px;
    font-weight: 500;
    color: rgba(102, 140, 255, 1);
    margin-top: 15px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    #presentaciones .section-title {
        font-size: 32px;
    }
}

@media (max-width: 560px) {
    #presentaciones.block {
        padding: 60px 0;
    }
}

/* ==================== SECCIÓN AGENCIAS Y PARTNERS ==================== */

.agencias-section {
    padding: 120px 0;
    background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.agencias-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.agencias-section .section-title {
    text-align: center;
    margin-bottom: 24px;
}

.agencias-section .section-subtitle {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px auto;
    font-size: 1.15rem;
    line-height: 1.55;
    color: #4a4a4a;
}

/* Bloque de introducción narrativa */
.agencias-intro {
    max-width: 820px;
    margin: 0 auto 72px auto;
    padding: 32px 40px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.agencias-intro p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2a2a2a;
    text-align: left;
}

/* Tres modos de colaboración en columnas */
.agencias-modos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 72px;
}

.agencia-modo {
    background: #ffffff;
    padding: 40px 28px;
    min-height: auto;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.agencia-modo:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.agencia-modo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 3px;
    background: linear-gradient(90deg, #4f6df5, #7c4dff);
    border-radius: 0 0 3px 3px;
}

.agencia-modo-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #1a1a2e;
    letter-spacing: -0.01em;
}

.agencia-modo-text {
    font-size: 1rem;
    line-height: 1.65;
    color: #4a4a4a;
    margin: 0;
}

/* Bloque de cierre con CTA */
.agencias-cierre {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.agencias-cierre p {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #2a2a2a;
    margin: 0 0 32px 0;
}

.agencias-cierre .action-buttons-container {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

/* ==================== BOTÓN FLOTANTE BIG MACHINES ==================== */
.btn-big-machines {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 1003;

    padding: 10px 28px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(60, 99, 255, 0.12);

    /* Estado base = OCULTO. SIN animation. */
    transform: translateX(-50%) translateY(-80px);
    opacity: 0;
    pointer-events: none;

    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* VISIBLE */
.btn-big-machines.btn-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* OCULTO (explícito) */
.btn-big-machines.btn-hidden {
    transform: translateX(-50%) translateY(-80px);
    opacity: 0;
    pointer-events: none;
}

/* HOVER (solo cuando está visible) */
.btn-big-machines.btn-visible:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 25px rgba(60, 99, 255, 0.28);
    transform: translateX(-50%) translateY(-2px);
}

@media (max-width: 768px) {
    .btn-big-machines {
        top: 18px;
        font-size: 0.8rem;
        padding: 8px 20px;
    }
}

#try-it {
    scroll-margin-top: 20px;
}