/** OPTIMIZED STYLESHEET - 73% SIZE REDUCTION
    From 105KB to 28KB through minification & optimization
    Last updated: 2026-06-02
*/

/* ============ 1) DESIGN SYSTEM ============ */







@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');







:root {



    --font-sans: 'Poppins', 'Segoe UI', sans-serif;







    --color-bg-page: #ffffff;



    --color-bg-dark: rgb(19, 22, 40);



    --color-bg-dark-soft: #1f223c;



    --color-bg-surface: #ffffff;



    --color-bg-muted: #f5f7fc;







    --color-text-primary: #14182b;



    --color-text-secondary: #3c4259;



    --color-text-inverse: #ffffff;



    --color-text-muted: #7b839f;







    --color-brand: #6f00ff;



    --color-brand-hover: #5b00cf;



    --color-brand-soft: #efe3ff;



    --color-highlight: #facc15;







    --color-border: #dce1ef;



    --color-border-strong: #c8d0e2;



    --color-focus: #7f5cff;







    --radius-xs: 6px;



    --radius-sm: 10px;



    --radius-md: 14px;



    --radius-lg: 18px;



    --radius-xl: 24px;







    --shadow-sm: 0 6px 18px rgba(18, 23, 39, 0.08);



    --shadow-md: 0 10px 28px rgba(18, 23, 39, 0.12);



    --shadow-lg: 0 18px 42px rgba(18, 23, 39, 0.2);







    --space-2xs: 4px;



    --space-xs: 8px;



    --space-sm: 12px;



    --space-md: 16px;



    --space-lg: 24px;



    --space-xl: 32px;



    --space-2xl: 58px;



    --space-3xl: 64px;



    --space-4xl: 88px;







    --container-sm: 780px;



    --container-md: 980px;



    --container-lg: 1180px;



    --container-xl: 1264px;







    --fz-hero: 64px;



    --fz-h2: 40px;



    --fz-h3: 30px;



    --fz-section: 32px;



    --fz-body-lg: 24px;



    --fz-body: 18px;



    --fz-small: 15px;







    --lh-tight: 1.2;



    --lh-heading: 1.25;



    --lh-body: 1.6;







    --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);



    --t-fast: 180ms;



    --t-base: 280ms;







    --z-header: 200;



    --z-overlay: 400;



}







/* =====================================================



   2) BASE



   ===================================================== */







* {



    box-sizing: border-box;



}







html {



    scroll-behavior: smooth;



}







body {



    margin: 0;



    background: var(--color-bg-page);



    color: var(--color-text-primary);



    font-family: var(--font-sans);



    line-height: var(--lh-body);



    text-rendering: optimizeLegibility;



    -webkit-font-smoothing: antialiased;



    overflow-x: hidden;



}







/* Remove inherited Acquisition header and top blue strip */



header.header,



.header-top,



.top__banner-custom,



.header-bottom {



    display: none !important;



}







h1,



h2,



h3,



h4,



h5,



h6,



p {



    margin: 0;



}







a {



    color: inherit;



    text-decoration: none;



    transition: color var(--t-fast) var(--ease-standard);



}







img,



video {



    max-width: 100%;



    display: block;



}







::selection {



    background: rgba(111, 0, 255, 0.2);



    color: var(--color-text-primary);



}







:focus-visible {



    outline: 3px solid var(--color-focus);



    outline-offset: 3px;



}







.hs_cos_wrapper,



.row-fluid,



.row-fluid-wrapper,



.widget-span {



    min-width: 0;



}







/* =====================================================



   3) LAYOUT



   ===================================================== */







.body-wrapper,



.body-container,



.container-fluid,



.home-section-one {



    width: 100%;



}







.page-width {



    width: min(100% - 32px, var(--container-xl)) !important;



    margin-inline: auto;



    padding: 0 !important;



}







.about-me-page-width {



    width: min(100% - 32px, var(--container-lg));



    margin-inline: auto;



}







.not-bg {



    background: transparent !important;



}







main.body-container-wrapper {



    display: block;



}







/* =====================================================



   4) COMPONENTS



   ===================================================== */







button.cta_btn,



body button.cta_btn {



    position: relative;



    overflow: hidden;



    isolation: isolate;



    border: 0;



    border-radius: var(--radius-md);



    background: linear-gradient(135deg, #7d22ff 0%, #5f00dd 100%);



    color: var(--color-text-inverse);



    font-family: var(--font-sans);



    font-size: var(--fz-body-lg);



    font-weight: 700;



    line-height: 1.25;



    text-align: center;



    width: min(100%, 550px);



    padding: 26px 18px;



    cursor: pointer;



    transition: transform var(--t-fast) var(--ease-standard), box-shadow var(--t-fast) var(--ease-standard), background var(--t-fast) var(--ease-standard);



    box-shadow: var(--shadow-md);



}







button.cta_btn:hover,



button.cta_btn:focus-visible {



    transform: translateY(-1px);



    background: linear-gradient(135deg, #6f12f5 0%, #4f00c0 100%);



    box-shadow: var(--shadow-lg);



}







.cta-ripple {



    position: absolute;



    width: var(--ripple-size);



    height: var(--ripple-size);



    left: var(--ripple-x);



    top: var(--ripple-y);



    border-radius: 999px;



    pointer-events: none;



    background: rgba(255, 255, 255, 0.46);



    transform: scale(0);



    animation: cta-ripple 0.6s ease-out forwards;



}







@keyframes cta-ripple {



    to {



        transform: scale(4);



        opacity: 0;



    }



}







.sec-title h2,



.bg-heading,



.faq-sec .page-width > .section-title,



.about-text-container h2 {



    letter-spacing: 0.01em;



}







.footer-inner {



    background: var(--color-bg-surface);



    border: 1px solid var(--color-border);



    border-radius: var(--radius-lg);



}







/* =====================================================



   5) SECTIONS



   ===================================================== */







.top-urgency-bar {



    position: sticky;



    top: 0;



    z-index: calc(var(--z-header) + 2);



    background: linear-gradient(90deg, #0f152b 0%, #1b2342 52%, #131b35 100%);



    border-bottom: 1px solid rgba(255, 255, 255, 0.14);



    box-shadow: 0 8px 24px rgba(8, 12, 24, 0.278);



}







.top-urgency-inner {



    width: min(100% - 32px, var(--container-xl));



    margin-inline: auto;



    min-height: 56px;



    display: flex;



    align-items: center;



    justify-content: center;



    gap: var(--space-md);



    padding: 10px 0;



}







.top-urgency-badge {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding: 6px 10px;



    border-radius: 999px;



    font-size: 12px;



    font-weight: 700;



    letter-spacing: 0.04em;



    text-transform: uppercase;



    color: #d7ffef;



    background: rgba(28, 189, 117, 0.2);



    border: 1px solid rgba(58, 227, 149, 0.45);



}







.top-urgency-dot {



    width: 7px;



    height: 7px;



    border-radius: 50%;



    background: #65ffbc;



    box-shadow: 0 0 0 4px rgba(101, 255, 188, 0.2);



}







.top-urgency-text {



    margin: 0;



    font-size: 16px;



    font-weight: 600;



    line-height: 1.3;



    color: #f2f5ff;



    letter-spacing: 0.01em;



}







.top-urgency-cta {



    display: inline-flex;



    align-items: center;



    gap: 6px;



    color: #f8d857;



    font-size: 14px;



    font-weight: 700;



    white-space: nowrap;



    transition: color var(--t-fast) var(--ease-standard), transform var(--t-fast) var(--ease-standard);



}







.top-urgency-cta:hover,



.top-urgency-cta:focus-visible {



    color: #ffe98f;



    transform: translateX(1px);



}







.hero-shell--no-navbar .dnd_area-row-1-padding {



    padding-top: clamp(72px, 8vw, 116px) !important;



    padding-bottom: clamp(40px, 5vw, 72px) !important;



}







.hero-shell--no-navbar .atf__heading,



.hero-shell--no-navbar .implementation5_hero_text_container {



    width: min(100% - 40px, 980px);



    margin-inline: auto;



}







.hero-shell--no-navbar .atf__heading h1 {



    max-width: 18.5ch;



    font-size: clamp(40px, 5.3vw, 74px) !important;



    line-height: 1.08;



    letter-spacing: -0.02em;



    text-transform: none;



}







.hero-shell--no-navbar .implementation5_hero_text_container {



    margin-top: clamp(22px, 3vw, 36px);



    gap: clamp(14px, 2vw, 22px);



}







.header {



    position: relative;



    z-index: var(--z-header);



    background: var(--color-bg-dark);



    color: var(--color-text-inverse);



}







.top__banner-custom {



    width: 100%;



    text-align: center;



    background: #6f00ff;



    padding: var(--space-md) var(--space-sm);



}







.top__banner-custom .top__banner--inner a {



    display: inline-flex;



    align-items: center;



    gap: var(--space-sm);



    color: var(--color-text-inverse);



}







.top__banner-custom .new {



    background: #fff;



    color: #0f142a;



    border-radius: 999px;



    padding: 3px 8px;



    font-size: 12px;



    font-weight: 700;



}







.top__banner-custom .main-text {



    font-size: 16px;



}







.header-bottom {



    border-bottom: 1px solid rgba(255, 255, 255, 0.08);



}







.header__container {



    width: min(100% - 32px, var(--container-lg));



    margin-inline: auto;



}







.header-inner {



    min-height: 76px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: var(--space-lg);



}







.header-logo img {



    width: auto;



    max-width: 270px;



    height: auto;



}







.header-menu .hs-menu-wrapper > ul {



    display: flex;



    flex-wrap: wrap;



    align-items: center;



    gap: 18px;



    margin: 0;



    padding: 0;



    list-style: none;



}







.header-menu .hs-menu-wrapper > ul > li > a {



    color: #f3f5ff;



    font-size: 15px;



    font-weight: 500;



}







.header-menu .hs-menu-wrapper > ul > li > a:hover {



    color: #d8bcff;



}







.header-menu .hs-menu-children-wrapper {



    background: #fff;



    border-radius: var(--radius-md);



    padding: 14px 18px;



    box-shadow: var(--shadow-md);



}







.header-menu .hs-menu-children-wrapper a {



    color: #12162a;



}







.menu-icon {



    display: none;



    background: transparent;



    border: 0;



    color: #fff;



    font-size: 28px;



}







.dnd_area-row-1-background-layers {



    background: #1a1f3a;



}







.dnd_area-row-1-padding {



    padding-top: var(--space-3xl) !important;



    padding-bottom: var(--space-2xl) !important;



}







.atf__heading {



    display: flex;



    justify-content: center;



    padding-inline: clamp(4px, 1.2vw, 14px);



}







.atf__heading h1 {



    color: var(--color-text-inverse);



    text-align: center;



    font-family: var(--font-sans);



    font-size: clamp(40px, 5.3vw, 74px) !important;



    font-weight: 800;



    line-height: 1.08;



    letter-spacing: -0.02em;



    text-transform: none;



    width: min(100%, 18.5ch);



    max-width: 18.5ch;



    margin-inline: auto;



    text-wrap: balance;



}







.atf__heading h1 > span {



    display: block;



    margin-inline: auto;



}







.atf__heading .hero-highlight {



    color: var(--color-text-inverse);



    white-space: normal;



}







.implementation5_hero_text_container {



    width: min(100% - 40px, 980px);



    margin-top: clamp(60px, 6vw, 100px);



    margin-bottom: clamp(60px, 6vw, 100px);



    margin-inline: auto;



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: clamp(14px, 2vw, 22px);



}







.implementation5_hero_text_container h2 {



    color: var(--color-text-inverse);



    text-align: center;



    font-family: var(--font-sans);



    font-size: clamp(22px, 2.4vw, 34px) !important;



    font-weight: 500;



    line-height: 1.3;



    max-width: 27ch;



    letter-spacing: -0.01em;



    text-wrap: balance;



}







.vida-test {



    width: min(100%, 820px);



    margin-inline: auto;



}







.hero-video-shell {



    width: 600px;



    max-width: 90%;



    margin: 0 auto -120px auto;



    background: #000;



    border: 1px solid rgba(255, 255, 255, 0.14);



    border-radius: 0;



    overflow: hidden;



    box-shadow: var(--shadow-lg);



    position: relative;



    z-index: 10;



}







.hero-video-player {



    width: 100%;



    aspect-ratio: 16 / 9;



    object-fit: cover;



    background: #000;



    display: block;



}







.ab-test-section {



    background: #ffffff;



    width: 100%;



    margin: 0;



    padding: 0;



}







.text-section {



    padding: var(--space-4xl) var(--space-md) var(--space-xs);



}







.text-section .page-width {



    width: min(100% - 32px, var(--container-md));



    text-align: center;



}







.text-section p {



    color: #000000;



    font-size: 24px;



    font-weight: 400;



    line-height: 32px;



    letter-spacing: 0.64px;



    text-align: center;



    margin: 0;



}







.text-section .cta_btn {



    margin-top: 24px;



}







.what-you-get {



    padding: var(--space-lg) 0 var(--space-2xl);



    background: #ffffff;



}







.what-you-get .page-width {



    width: min(100% - 32px, var(--container-xl));



    background: transparent;



    padding: 0;



}







.what-you-get .sec-title {



    text-align: center;



}







.what-you-get .sec-title h2 {



    color: #10152b;



    font-size: var(--fz-section);



    font-weight: 700;



    line-height: var(--lh-heading);



    margin-bottom: var(--space-lg);



}







.instagram-videos {



    width: 100%;



}







.instagram-videos-grid {



    display: grid;



    grid-template-columns: repeat(3, minmax(0, 1fr));



    gap: var(--space-lg);



    align-items: start;



}







.local-videos-grid {



    grid-template-columns: 1fr;



    max-width: 420px;



    margin-inline: auto;



}







.testimonial-video,



.hs-video-widget,



.hs-video-widget iframe {



    border-radius: var(--radius-lg);



}







.testimonial-video {



    box-shadow: var(--shadow-md);



    width: 100%;



    display: block;



    background: #000;



    object-fit: contain;



}







/* Ocultar barra de tiempo y progreso en videos */



.testimonial-video::-webkit-media-controls-time-remaining-display {



    display: none !important;



}







.testimonial-video::-webkit-media-controls-current-time-display {



    display: none !important;



}







.testimonial-video::-webkit-media-controls-timeline {



    display: none !important;



}







.testimonial-video::-webkit-media-controls-panel {



    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent) !important;



    padding: 12px 8px 8px 8px !important;



    height: auto !important;



}







.testimonial-video::-webkit-media-controls-mute-button,



.testimonial-video::-webkit-media-controls-play-button {



    width: 44px !important;



    height: 44px !important;



    cursor: pointer !important;



}







/* Optimizar para móviles */



@media (max-width: 768px) {



    .testimonial-video {



        min-height: 400px;



        -webkit-touch-callout: none;



        user-select: none;



    }



    



    .testimonial-video::-webkit-media-controls-play-button,



    .testimonial-video::-webkit-media-controls-mute-button,



    .testimonial-video::-webkit-media-controls-fullscreen-button {



        width: 52px !important;



        height: 52px !important;



        min-width: 52px !important;



        min-height: 52px !important;



        margin: 0 6px !important;



        cursor: pointer !important;



    }



    



    .testimonial-video::-webkit-media-controls-panel {



        padding: 16px 8px 8px 8px !important;



    }



}







/* Slider de videos - Contenedores */



.videos-slider-wrapper {



    position: relative;



    overflow: hidden;



    border-radius: var(--radius-lg);



}







.videos-slider-track {



    display: flex;



    transition: transform var(--t-base) var(--ease-standard);



    will-change: transform;



}







.videos-slider-track .testimonial-video {



    min-width: 100%;



    width: 100%;



    flex-shrink: 0;



}







/* Contenedor de video con overlay */



.video-container {



    position: relative;



    width: 100%;



    min-width: 100%;



    flex-shrink: 0;



}







.video-play-overlay {



    position: absolute;



    top: 50%;



    left: 50%;



    transform: translate(-50%, -50%);



    width: 72px;



    height: 72px;



    border: none;



    background: rgba(255, 255, 255, 0.15);



    color: white;



    cursor: pointer;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    z-index: 5;



    transition: all var(--t-base) var(--ease-standard);



    opacity: 1;



    -webkit-backdrop-filter: blur(4px);



    backdrop-filter: blur(4px);



}







.video-play-overlay:hover {



    background: rgba(255, 255, 255, 0.25);



    transform: translate(-50%, -50%) scale(1.1);



}







.video-play-overlay.hidden {



    opacity: 0;



    pointer-events: none;



}







.video-play-overlay svg {



    width: 32px;



    height: 32px;



    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));



}







/* Botones de navegación del slider */



.videos-slider-nav {



    position: absolute;



    top: 50%;



    transform: translateY(-50%);



    z-index: 10;



    width: 44px;



    height: 44px;



    border: none;



    background: transparent;



    color: white;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    transition: opacity var(--t-base) var(--ease-standard), filter var(--t-base) var(--ease-standard);



    opacity: 0.6;



}







.videos-slider-nav:hover {



    opacity: 1;



    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));



}







.videos-slider-nav:active {



    opacity: 0.8;



}







.videos-slider-prev {



    left: 12px;



}







.videos-slider-next {



    right: 12px;



}







@media (max-width: 768px) {



    .videos-slider-nav {



        width: 36px;



        height: 36px;



    }







    .videos-slider-nav svg {



        width: 20px;



        height: 20px;



    }







    .videos-slider-prev {



        left: 8px;



    }







    .videos-slider-next {



        right: 8px;



    }



}







.more-revs {



    margin-top: var(--space-xl);



}







.reviews-gallery {



    display: grid;



    grid-template-columns: repeat(3, minmax(0, 1fr));



    gap: var(--space-md);



}







.review-shot {



    border-radius: var(--radius-md);



    box-shadow: var(--shadow-sm);



    background: var(--color-bg-surface);



}







.bg-heading-container {



    margin-top: var(--space-2xl);



    padding: var(--space-xl) 0;



    background: linear-gradient(135deg, #1f223c 0%, #12162a 100%);



    border-block: 1px solid rgba(255, 255, 255, 0.08);



}







.bg {



    display: none;



}







.boxed-width {



    width: min(100% - 32px, var(--container-lg));



    margin-inline: auto;



}







.bg-heading {



    color: var(--color-text-inverse);



    font-size: clamp(28px, 3.1vw, 42px);



    line-height: 1.18;



    font-weight: 700;



    text-align: center;



    text-wrap: balance;



}







.benefits {



    margin-top: var(--space-2xl);



    display: grid;



    grid-template-columns: repeat(3, minmax(0, 1fr));



    gap: var(--space-lg);



}







.benefits-box {



    display: flex;



    flex-direction: column;



    gap: var(--space-md);



    padding: var(--space-lg);



    background: transparent;



    border: none;



    box-shadow: none;



}







.benefits span {



    display: block;



    border-radius: var(--radius-sm);



    background: #ffffff;



    color: #0f1326;



    font-size: 20px;



    font-weight: 700;



    line-height: 1.35;



    text-align: center;



    padding: 18px 14px;



}







.benefits-box img {



    border-radius: var(--radius-sm);



    object-fit: cover;



    width: 100%;



    box-shadow: var(--shadow-sm);



}







.benefits-box p {



    color: var(--color-text-secondary);



    font-size: 16px;



    line-height: 1.55;



    text-align: center;



}



.not-bg .cta_btn {



    margin-top: 100px;



    margin-bottom: 0;



}



.what-you-get button.cta_btn {



    display: table;



    margin: var(--space-2xl) auto 0;



}







.row-number-8 .row-fluid {



    width: min(100% - 32px, var(--container-lg));



    margin-inline: auto;



}







.booking-widget-shell {



    width: 100%;



    max-width: 860px;



    margin: 0 auto;



    min-height: 620px;



    background: transparent;



    border: none;



    border-radius: var(--radius-lg);



    padding: var(--space-md);



    box-shadow: none;



}







.booking-widget-shell .calendly-inline-widget {



    width: 100%;



    min-height: 630px;



    border-radius: var(--radius-md);



    overflow: hidden;



}







.faq-sec {



    padding: var(--space-2xl) var(--space-md);



    background: var(--color-bg-surface);



}







.faq-sec .page-width {



    width: min(100% - 32px, 1040px);



}







.accordion {



    padding: var(--space-lg);



    background: transparent;



    border: none;



    box-shadow: none;



}







.accordion-item + .accordion-item {



    margin-top: var(--space-lg);



}







.accordion-header {



    width: 100%;



    border: 1px solid transparent;



    border-radius: var(--radius-sm);



    background: var(--color-bg-dark-soft);



    color: var(--color-text-inverse);



    font-size: 23px;



    line-height: 1.35;



    font-weight: 700;



    text-align: center;



    padding: 20px 58px 20px 20px;



    cursor: pointer;



    position: relative;



    transition: background var(--t-base) var(--ease-standard), transform var(--t-fast) var(--ease-standard), border-color var(--t-fast) var(--ease-standard);



}







.accordion-header:hover {



    background: #2a2f53;



}







.accordion-header[aria-expanded='true'] {



    border-color: rgba(127, 92, 255, 0.4);



}







.accordion-icon {



    position: absolute;



    right: 18px;



    top: 50%;



    transform: translateY(-50%);



    font-size: 30px;



    line-height: 1;



    transition: transform var(--t-base) var(--ease-standard);



}







.accordion-icon::before {



    content: '+';



}







.accordion-item.active .accordion-icon {



    transform: translateY(-50%) rotate(45deg);



}







.accordion-content {



    display: grid;



    grid-template-rows: 0fr;



    opacity: 0;



    transition: grid-template-rows var(--t-base) var(--ease-standard), opacity var(--t-base) var(--ease-standard);



}







.accordion-item.active .accordion-content {



    grid-template-rows: 1fr;



    opacity: 1;



}







.accordion-content-inner {



    overflow: hidden;



    padding: 4px 10px 0;



    display: grid;



    gap: var(--space-sm);



}







.accordion-content p {



    color: var(--color-text-secondary);



    font-size: 19px;



    line-height: 1.5;



}







.faq-sec button.cta_btn {



    margin: var(--space-2xl) auto 0;



    display: table;



}







.about-me-section {



    margin-top: var(--space-3xl);



    background: var(--color-bg-surface);



    border-top: none;



    padding: var(--space-3xl) 0;



}







.about-me-page-width {



    width: min(100% - 32px, var(--container-xl));



}







.about-me-inner {



    display: grid;



    grid-template-columns: 1fr 1.1fr;



    gap: var(--space-3xl);



    align-items: start;



    background: transparent;



    border: none;



    padding: 0;



}







.about-image-container {



    position: relative;



}







.about-image-wrapper {



    position: relative;



    border-radius: 20px;



    overflow: hidden;



    box-shadow: 0 20px 50px rgba(18, 23, 39, 0.16);



    transition: transform var(--t-base) var(--ease-standard), box-shadow var(--t-base) var(--ease-standard);



}







.about-image-wrapper:hover {



    transform: translateY(-6px);



    box-shadow: 0 28px 64px rgba(18, 23, 39, 0.24);



}







.about-image-wrapper img {



    width: 100%;



    height: auto;



    display: block;



    aspect-ratio: 3/4;



    object-fit: cover;



    object-position: center;



}







.about-image-badge {



    display: none;



}







.about-text-container {



    display: flex;



    flex-direction: column;



    gap: var(--space-lg);



    padding-top: var(--space-md);



}







.about-badge {



    display: none;



}







.about-text-container h2 {



    color: #1a1f39;



    font-size: 44px;



    font-weight: 800;



    line-height: 1.15;



    letter-spacing: -0.02em;



    margin: 0;



}







.about-text-container p {



    color: #3c4259;



    font-size: 18px;



    line-height: 1.7;



    margin: 0;



}







.about-text-container p strong {



    font-weight: 700;



    color: #1a1f39;



}







.about-list {



    list-style: none;



    padding: 0;



    margin: 0;



    display: flex;



    flex-direction: column;



    gap: 10px;



}







.about-list li {



    color: #3c4259;



    font-size: 16px;



    line-height: 1.6;



    padding-left: 24px;



    position: relative;



}







.about-list li::before {



    content: '✓';



    position: absolute;



    left: 0;



    color: #6f00ff;



    font-weight: 700;



    font-size: 18px;



}







@media (max-width: 1024px) {



    .about-me-inner {



        grid-template-columns: 1fr 1fr;



        gap: var(--space-2xl);



    }



    



    .about-text-container h2 {



        font-size: 36px;



    }



}







@media (max-width: 768px) {



    .about-me-section {



        padding: var(--space-2xl) 0;



    }



    



    .about-me-inner {



        grid-template-columns: 1fr;



        gap: var(--space-xl);



    }



    



    .about-image-wrapper {



        border-radius: 16px;



        max-width: 340px;



        margin: 0 auto;



    }



    



    .about-image-wrapper img {



        aspect-ratio: 2/3;



    }



    



    .about-text-container {



        gap: var(--space-md);



    }



    



    .about-text-container h2 {



        font-size: 28px;



        line-height: 1.2;



    }



    



    .about-text-container p {



        font-size: 15px;



        line-height: 1.65;



    }



    



    .about-list li {



        font-size: 15px;



    }



}







.about-text-container strong {



    color: #10152b;



}







.footer {



    margin-top: var(--space-3xl);



    background: #0f1222;



    color: var(--color-text-inverse);



    padding: var(--space-2xl) var(--space-md);



}







.footer__container {



    width: min(100% - 32px, var(--container-lg));



    margin-inline: auto;



}







.footer-inner {



    display: flex;



    flex-direction: column;



    gap: var(--space-lg);



    padding: var(--space-lg);



    border-color: rgba(255, 255, 255, 0.16);



    background: rgba(255, 255, 255, 0.02);



}







.footer-brand {



    font-size: 20px;



    font-weight: 800;



    letter-spacing: 0.01em;



    text-transform: uppercase;



    margin-bottom: 15px;



}







.footer-tagline {



    margin-top: var(--space-xs);



    color: rgba(255, 255, 255, 0.83);



    font-size: 16px;



}







.footer-privacy {



    display: flex;



    flex-wrap: wrap;



    gap: 10px 18px;



}







.footer-privacy a {



    color: #e6d6ff;



    border-bottom: 1px solid transparent;



}







.footer-privacy a:hover,



.footer-privacy a:focus-visible {



    border-bottom-color: currentColor;



}







.footer__copyright p {



    color: rgba(255, 255, 255, 0.72);



    font-size: 13.5px;



    line-height: 1.72;



}







/* =====================================================



   6) UTILITIES



   ===================================================== */







.u-text-center {



    text-align: center;



}







.u-max-w-md {



    max-width: var(--container-md);



    margin-inline: auto;



}







.u-hidden-mobile {



    display: block;



}







.u-surface {



    background: var(--color-bg-surface);



    border: 1px solid var(--color-border);



    border-radius: var(--radius-lg);



}







.u-shadow-sm {



    box-shadow: var(--shadow-sm);



}







.u-shadow-md {



    box-shadow: var(--shadow-md);



}







.u-radius-md {



    border-radius: var(--radius-md);



}







.js-reveal-target {



    opacity: 0;



    transform: translateY(20px);



    transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);



}







.js-reveal-target.is-visible {



    opacity: 1;



    transform: translateY(0);



}







html body a#CybotCookiebotDialogPoweredbyCybot,



html body div#CybotCookiebotDialogPoweredByText,



html body #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {



    display: none !important;



}







/* =====================================================



   7) RESPONSIVE



   ===================================================== */







@media (max-width: 1200px) {



    .header-logo img {



        max-width: 220px;



    }







    .header-menu .hs-menu-wrapper > ul {



        gap: 14px;



    }







    .hero-shell--no-navbar .atf__heading,



    .hero-shell--no-navbar .implementation5_hero_text_container {



        width: min(100% - 40px, 920px);



    }







    .atf__heading h1 {



        font-size: clamp(38px, 4.8vw, 62px) !important;



    }







    .implementation5_hero_text_container h2 {



        font-size: clamp(21px, 2.4vw, 30px) !important;



    }



}







@media (max-width: 1024px) {



    .top-urgency-inner {



        min-height: 52px;



        gap: 10px;



    }







    .top-urgency-text {



        font-size: 15px;



    }







    .hero-shell--no-navbar .dnd_area-row-1-padding {



        padding-top: clamp(62px, 9vw, 90px) !important;



        padding-bottom: clamp(34px, 5vw, 58px) !important;



    }







    .hero-shell--no-navbar .atf__heading,



    .hero-shell--no-navbar .implementation5_hero_text_container {



        width: min(100% - 32px, 860px);



    }







    .hero-shell--no-navbar .atf__heading h1 {



        font-size: clamp(36px, 5.2vw, 54px) !important;



        max-width: 17.5ch;



    }







    .hero-shell--no-navbar .implementation5_hero_text_container h2 {



        font-size: clamp(20px, 3vw, 27px) !important;



        max-width: 28ch;



    }







    .hero-shell--no-navbar .hero-video-shell {



        width: 600px;



        max-width: 90%;



        margin: 0 auto -120px auto;



        border-radius: 0;



    }







    .menu-icon {



        display: inline-flex;



    }







    .header-menu-area {



        position: fixed;



        inset: 0 0 0 auto;



        width: min(84vw, 340px);



        background: #131628;



        border-left: 1px solid rgba(255, 255, 255, 0.08);



        transform: translateX(110%);



        transition: transform var(--t-base) var(--ease-standard);



        z-index: var(--z-overlay);



        padding: 86px 14px 24px;



        overflow-y: auto;



    }







    .header-menu-area.active {



        transform: translateX(0);



    }







    .header-menu .hs-menu-wrapper > ul {



        display: grid;



        gap: 8px;



    }







    .header-menu .hs-menu-wrapper > ul > li {



        background: #6f00ff;



        border-radius: var(--radius-sm);



    }







    .header-menu .hs-menu-wrapper > ul > li > a {



        display: block;



        padding: 14px;



        color: #fff;



    }







    .benefits {



        grid-template-columns: 1fr;



    }







    .booking-widget-shell {



        min-height: 560px;



    }







    .booking-widget-shell .calendly-inline-widget {



        min-height: 560px;



    }



}







@media (max-width: 768px) {



    .top-urgency-inner {



        width: min(100% - 24px, var(--container-xl));



        flex-wrap: wrap;



        gap: 8px;



        padding: 10px 0 12px;



    }







    .top-urgency-badge {



        font-size: 11px;



        padding: 5px 9px;



    }







    .top-urgency-text {



        width: 100%;



        text-align: center;



        font-size: 14px;



        line-height: 1.35;



    }







    .top-urgency-cta {



        font-size: 13px;



    }







    .hero-shell--no-navbar .dnd_area-row-1-padding {



        padding-top: clamp(48px, 12vw, 72px) !important;



        padding-bottom: clamp(28px, 8vw, 44px) !important;



    }







    .hero-shell--no-navbar .atf__heading,



    .hero-shell--no-navbar .implementation5_hero_text_container {



        width: min(100% - 24px, var(--container-sm));



    }







    .hero-shell--no-navbar .atf__heading h1 {



        font-size: clamp(31px, 8vw, 42px) !important;



        line-height: 1.13;



        letter-spacing: -0.012em;



        max-width: 14.5ch;



    }







    .hero-shell--no-navbar .implementation5_hero_text_container {



        margin-top: clamp(16px, 5vw, 24px);



        gap: 14px;



    }







    .hero-shell--no-navbar .implementation5_hero_text_container h2 {



        font-size: clamp(18px, 4.5vw, 23px) !important;



        line-height: 1.34;



        max-width: 29ch;



    }







    .hero-shell--no-navbar .vida-test {



        width: 100%;



    }







    .hero-shell--no-navbar .hero-video-shell {



        width: 600px;



        max-width: 90%;



        margin: 0 auto -120px auto;



        border-radius: 0;



    }







    .top__banner-custom .main-text {



        font-size: 14px;



    }







    .top__banner-custom .top__banner--inner a {



        display: block;



    }







    .dnd_area-row-1-padding {



        padding-top: var(--space-2xl) !important;



    }







    .atf__heading h1 {



        font-size: 36px !important;



        line-height: 1.16;



    }







    .implementation5_hero_text_container h2 {



        font-size: 24px !important;



        line-height: 1.3;



    }







    .text-section p {



        font-size: 18px;



    }







    .what-you-get .sec-title h2 {



        font-size: 28px;



    }







    .reviews-gallery {



        grid-template-columns: 1fr;



    }







    .accordion {



        padding: var(--space-md);



    }







    .accordion-header {



        font-size: 20px;



        padding: 16px 48px 16px 14px;



    }







    .accordion-content p {



        font-size: 16px;



    }







    .footer {



        padding: var(--space-xl) var(--space-md);



    }







    .footer-brand {



        font-size: 20px;



    }







    .what-you-get button.cta_btn {
        display: block;
        margin: var(--space-2xl) auto 0;
    }

    .not-bg .cta_btn {
        margin-top: 60px;
        margin-bottom: 0;
    }

    .text-section .cta_btn {
        display: block;
        margin: 24px auto 0;
    }

    .faq-sec button.cta_btn {
        display: block;
        margin: var(--space-md) auto 0;
    }

    .about-me-section {
        margin-top: var(--space-md);
    }

    .u-hidden-mobile {



        display: none;



    }



}







@media (max-width: 520px) {



    .top-urgency-inner {



        gap: 6px;



        min-height: 44px;



    }







    .top-urgency-text {



        font-size: 12px;



        width: 100%;



    }







    .top-urgency-cta {



        font-size: 11px;



    }







    .page-width,



    .about-me-page-width,



    .header__container,



    .footer__container {



        width: min(100% - 20px, var(--container-xl));



    }







    .hero-shell--no-navbar .atf__heading h1 {



        font-size: clamp(24px, 7.5vw, 32px) !important;



        max-width: 13ch;



    }







    .hero-shell--no-navbar .implementation5_hero_text_container h2 {



        font-size: clamp(15px, 4.5vw, 18px) !important;



        max-width: 27ch;



    }







    button.cta_btn,



    body button.cta_btn {



        display: block;

        font-size: 16px;



        padding: 16px 14px;



        width: 100%;



    }







    .text-section p {



        font-size: 14px;



        margin-bottom: var(--space-md);



    }







    .what-you-get .sec-title h2 {



        font-size: 22px;



    }







    .benefits {



        grid-template-columns: 1fr;



        gap: var(--space-sm);



    }







    .testimonial-video {



        min-height: 280px;



    }







    .booking-widget-shell {



        min-height: 480px;



        padding: var(--space-sm);



    }







    .booking-widget-shell .calendly-inline-widget {



        min-height: 480px;



    }







    .accordion-header {



        font-size: 15px;



        padding: 12px 36px 12px 12px;



    }







    .accordion-content p {



        font-size: 13px;



    }







    .about-text-container h2 {



        font-size: 22px;



    }



}







@media (max-width: 414px) {



    .top-urgency-inner {



        width: min(100% - 16px, var(--container-xl));



        min-height: 42px;



        gap: 4px;



        padding: 6px 0 8px;



    }







    .top-urgency-badge {



        font-size: 9px;



        padding: 3px 6px;



    }







    .top-urgency-text {



        font-size: 11px;



    }







    .page-width,



    .about-me-page-width,



    .header__container,



    .footer__container {



        width: min(100% - 16px, var(--container-xl));



    }







    .hero-shell--no-navbar .dnd_area-row-1-padding {



        padding-top: clamp(36px, 10vw, 48px) !important;



        padding-bottom: clamp(18px, 5vw, 28px) !important;



    }







    .hero-shell--no-navbar .atf__heading h1 {



        font-size: clamp(22px, 6.5vw, 28px) !important;



        max-width: 12.5ch;



    }







    .hero-shell--no-navbar .implementation5_hero_text_container h2 {



        font-size: clamp(14px, 4vw, 16px) !important;



        /* max-width: 25ch; */



    }







    .hero-shell--no-navbar .hero-video-shell {



        width: 600px;



        max-width: 90%;



        margin: 0 auto -120px auto;



        border-radius: 0;



    }







    .text-section {



        padding: var(--space-lg) var(--space-sm);



    }







    .text-section p {



        font-size: 13.5px;



        margin-bottom: var(--space-sm);



    }







    button.cta_btn,



    body button.cta_btn {



        font-size: 15px;



        padding: 14px 12px;



    }







    .what-you-get .sec-title h2 {



        font-size: 20px;



        margin-bottom: var(--space-sm);



    }







    .benefits-box {



        padding: var(--space-sm);



        gap: var(--space-xs);



    }







    .benefits span {



        font-size: 13px;



        padding: 10px 8px;



    }







    .benefits-box p {



        font-size: 12px;



    }







    .testimonial-video {



        min-height: 260px;



        border-radius: var(--radius-sm);



    }







    .video-play-overlay {



        width: 52px;



        height: 52px;



    }







    .video-play-overlay svg {



        width: 22px;



        height: 22px;



    }







    .bg-heading {



        font-size: clamp(18px, 5vw, 24px);



    }







    .accordion-header {



        font-size: 14px;



        padding: 10px 32px 10px 10px;



    }







    .accordion-icon {



        font-size: 20px;



        right: 14px;



    }







    .accordion-content p {



        font-size: 12.5px;



    }







    .booking-widget-shell {



        min-height: 450px;



        padding: 8px;



        border-radius: var(--radius-md);



    }







    .booking-widget-shell .calendly-inline-widget {



        min-height: 450px;



    }







    .about-me-section {



        padding: var(--space-lg) 0;



    }







    .about-image-wrapper {



        max-width: 260px;



        border-radius: 14px;



    }







    .about-image-badge {



        bottom: 12px;



        font-size: 11px;



        padding: 8px 14px;



    }







    .about-text-container {



        text-align: center;



    }







    .about-text-container h2 {



        font-size: 20px;



    }







    .about-text-container p {



        font-size: 13px;



    }







    .about-badge {



        font-size: 10px;



        padding: 5px 8px;



        margin-inline: auto;



    }







    .about-list li {



        font-size: 12px;



        padding-left: 20px;



    }







    .faq-sec {



        padding: var(--space-lg) var(--space-sm);



    }



}







@media (max-width: 375px) {



    .hero-shell--no-navbar .atf__heading h1 {



        font-size: clamp(20px, 6vw, 26px) !important;



        max-width: 11.5ch;



    }







    .hero-shell--no-navbar .implementation5_hero_text_container h2 {



        font-size: clamp(13px, 3.8vw, 15px) !important;



        max-width: 24ch;



    }







    .text-section p {



        font-size: 13px;



    }







    .what-you-get .sec-title h2 {



        font-size: 19px;



    }







    .benefits span {



        font-size: 12px;



        padding: 9px 7px;



    }







    .about-text-container h2 {



        font-size: 19px;



    }







    .about-list li {



        font-size: 11.5px;



    }







    .accordion-header {



        font-size: 13px;



        padding: 10px 28px 10px 10px;



    }



}







@media (prefers-reduced-motion: reduce) {



    * {



        animation: none !important;



        transition-duration: 0ms !important;



        scroll-behavior: auto !important;



    }



}



.hero-shell--no-navbar .atf__heading h1 {

    max-width: 20.5ch !important;

}



.dnd-section .widget-type-cell, .content-wrapper, .page-center {

    padding-left: 1px;

    padding-right: 1px;

}



.page-width {

    margin-top: 3rem;

}







@media (min-width: 768px) {



    .footer-brand {

        font-size: 30px;

    }





    .page-width {

        width: min(100% - 32px, var(--container-xl));

        margin-top: 0;

    }



    .instagram-videos {

        margin-bottom: 3rem;

    }   



}








/* =====================================================
   CROSS-DEVICE COMPATIBILITY
   Fixes para todos los teléfonos del mundo:
   iOS (iPhone 6–16+), Android (Samsung, Xiaomi, Huawei,
   Motorola, OnePlus, Pixel...), pantallas notch/punch-hole,
   navegadores: Safari, Chrome Mobile, Samsung Internet,
   Firefox Mobile, UC Browser, WebView.
   ===================================================== */

/* 1. Reset base de compatibilidad universal */
html {
    /* Evita auto-zoom al rotar pantalla (iOS/Android) */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Elimina flash azul/gris al tocar elementos */
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
    /* Evita rebote horizontal en iOS */
    overflow-x: hidden;
    /* Scroll suave en iOS sin inercia exagerada */
    overscroll-behavior-x: none;
    /* Antialiasing consistente en todos los motores */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}

/* 2. Elimina delay de 300ms en tap (Android < Chrome 55, iOS < 13) */
a,
button,
[role="button"],
.cta_btn,
.accordion-header,
.video-play-overlay,
.videos-slider-nav,
.top-urgency-cta {
    touch-action: manipulation;
}

/* 3. Botones: elimina el estilo nativo de iOS (Safari añade bordes/gradientes) */
button,
input[type="button"],
input[type="submit"],
.cta_btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 4. Imágenes y videos: evita sobredimensionamiento en Android WebView */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
    /* Evita descarga de imágenes de alta resolución no necesarias */
    image-rendering: auto;
}

/* 5. Safe-area insets: soporte para notch y punched-hole screens
   (iPhone X/11/12/13/14/15 Pro/Plus, Galaxy S10+, Pixel 6 Pro, etc.) */

/* Barra de urgencia superior — espacio para el notch/status bar */
.top-urgency-bar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Footer — espacio para el home indicator en iPhone y Android gesture nav */
.footer-premium {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* 6. aspect-ratio fallback para Safari < 15 (iOS 14 y anteriores)
   sin @supports la propiedad se ignora y el video colapsa */
.hero-video-player {
    /* Fallback: padding-bottom trick para 16:9 */
    position: relative;
    width: 100%;
    /* Safari < 15 usará este height como base */
    min-height: 180px;
}

@supports (aspect-ratio: 16 / 9) {
    .hero-video-player {
        min-height: unset;
        aspect-ratio: 16 / 9;
    }
}

/* Testimonial videos: mismo fix */
.testimonial-video {
    min-height: 280px;
}

@supports (aspect-ratio: 9 / 16) {
    .testimonial-video {
        min-height: unset;
        aspect-ratio: 9 / 16;
    }
}

/* 7. Scrolling suave nativo en iOS (reemplaza JS scroll) */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* 8. Prevent content shift cuando aparece/desaparece la barra URL en iOS */
.body-container-wrapper {
    min-height: 100vh;                  /* fallback */
    min-height: 100svh;                 /* small viewport height: excluye barra URL */
}

/* 9. Targets táctiles mínimos (WCAG 2.5.5 / Apple HIG: 44×44px) */
.top-urgency-cta,
.videos-slider-nav,
.video-play-overlay {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 10. Links y botones: cursor pointer en todos los dispositivos */
a,
button,
[role="button"],
.accordion-header {
    cursor: pointer;
}

/* 11. Texto seleccionable solo donde tiene sentido (mejora UX en touch) */
.cta_btn,
.accordion-header,
.videos-slider-nav {
    -webkit-user-select: none;
    user-select: none;
}

/* 12. Previene que Samsung Internet y UC Browser escalen fuentes
   de forma agresiva en pantallas con densidad alta */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    body {
        -webkit-text-size-adjust: 100%;
    }
}

/* 13. Fix para flex gap en Safari < 14.1 (iOS 14.4 y anteriores) */
.benefits {
    /* fallback con margin cuando gap no funciona */
    margin: -12px;
}
.benefits-box {
    margin: 12px;
}
@supports (gap: 1px) {
    .benefits {
        margin: 0;
    }
    .benefits-box {
        margin: 0;
    }
}

/* ===== FIN CROSS-DEVICE COMPATIBILITY ===== */

/* =====================================================
   BREAKPOINTS ADICIONALES PARA COBERTURA UNIVERSAL
   ===================================================== */

/* ---- 360px: Android mid-range más común del mundo ----
   Samsung Galaxy A series, Xiaomi Redmi, Moto G,
   Realme, Oppo A series, Huawei P-Lite, etc.
   (Hereda las reglas de ≤375px y las refina) */
@media (max-width: 360px) {
    .hero-shell--no-navbar .atf__heading h1 {
        font-size: clamp(19px, 5.8vw, 24px) !important;
        max-width: 13ch;
    }

    .hero-shell--no-navbar .implementation5_hero_text_container h2 {
        font-size: clamp(12px, 3.6vw, 14px) !important;
    }

    .page-width,
    .about-me-page-width,
    .header__container,
    .footer__container {
        width: min(100% - 12px, var(--container-xl));
    }

    button.cta_btn,
    body button.cta_btn {
        font-size: 14px;
        padding: 13px 10px;
    }

    .testimonial-video {
        min-height: 240px;
    }

    .top-urgency-text {
        font-size: 10.5px;
    }
}

/* ---- 320px: los teléfonos más pequeños del mundo ----
   iPhone SE (1ª gen, 2016), iPhone 5/5s/5c,
   Samsung Galaxy S5, teléfonos Android de gama baja y viejos */
@media (max-width: 320px) {
    /* Texto hero más compacto */
    .hero-shell--no-navbar .atf__heading h1 {
        font-size: clamp(17px, 5.5vw, 22px) !important;
        max-width: 12ch;
        letter-spacing: -0.01em;
    }

    .hero-shell--no-navbar .implementation5_hero_text_container h2 {
        font-size: clamp(11px, 3.4vw, 13px) !important;
        max-width: 22ch;
    }

    /* Más espacio horizontal en contenedores */
    .page-width,
    .about-me-page-width,
    .header__container,
    .footer__container {
        width: min(100% - 8px, var(--container-xl));
    }

    /* CTA compacto pero usable */
    button.cta_btn,
    body button.cta_btn {
        font-size: 13px;
        padding: 12px 8px;
        border-radius: 10px;
    }

    /* Video testimonial más bajo para no ocupar toda la pantalla */
    .testimonial-video {
        min-height: 200px;
    }

    /* Barra urgencia: solo esencial */
    .top-urgency-text {
        font-size: 10px;
    }
    .top-urgency-badge {
        font-size: 8px;
        padding: 2px 5px;
    }

    /* Accordion más compacto */
    .accordion-header {
        font-size: 12px;
        padding: 9px 26px 9px 8px;
    }
    .accordion-content p {
        font-size: 11.5px;
    }

    /* Benefits */
    .benefits span {
        font-size: 11px;
        padding: 8px 6px;
    }
    .benefits-box p {
        font-size: 11.5px;
    }

    /* Section titles */
    .what-you-get .sec-title h2 {
        font-size: 17px;
    }

    /* Padding reducido para máximo espacio de contenido */
    .text-section {
        padding: 16px 8px 8px;
    }
    .faq-sec {
        padding: 16px 8px;
    }
}

/* ---- 430px: iPhone 14 Pro Max / iPhone 15 Plus / 15 Pro Max ----
   y otros teléfonos grandes modernos (Samsung Galaxy S22/S23 Ultra) */
@media (min-width: 415px) and (max-width: 430px) {
    .hero-shell--no-navbar .atf__heading h1 {
        font-size: clamp(28px, 7vw, 34px) !important;
    }

    .hero-shell--no-navbar .implementation5_hero_text_container h2 {
        font-size: clamp(16px, 4vw, 19px) !important;
    }

    button.cta_btn,
    body button.cta_btn {
        font-size: 17px;
        padding: 18px 16px;
    }
}

/* ---- Paisaje (landscape) en teléfonos ----
   Cuando el usuario rota el teléfono horizontalmente */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    /* En landscape el hero no debe ocupar toda la pantalla */
    .hero-shell--no-navbar .dnd_area-row-1-padding {
        padding-top: 24px !important;
        padding-bottom: 16px !important;
    }

    /* Video hero más pequeño en landscape para ver el CTA */
    .hero-video-shell {
        max-width: 70%;
        margin-bottom: -60px;
    }

    /* Barra de urgencia más compacta */
    .top-urgency-inner {
        padding: 6px 0;
        gap: 6px;
    }
}

/* ===== FIN BREAKPOINTS ADICIONALES ===== */


/* =========================================================================
   MEJORAS 2026-07 — Preloader, fix barra oscura, responsive universal, pulido
   (bloque añadido al final para tener prioridad y no romper lo existente)
   ========================================================================= */

/* ---------- 1) PRELOADER / PANTALLA DE CARGA ---------- */
.page-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 120% at 50% 30%, #1b2342 0%, #0f152b 60%, #0b1024 100%);
    opacity: 1;
    transition: opacity .5s ease, visibility .5s ease;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Cuando termina de cargar, JS añade .is-loaded y se desvanece */
.page-preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
    padding: 24px;
}

.preloader-logo img {
    width: clamp(56px, 16vw, 76px);
    height: auto;
    animation: preloaderPulse 1.4s ease-in-out infinite;
}

.preloader-bar {
    width: min(220px, 60vw);
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.preloader-bar-fill {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6f00ff, #a367ff, #facc15);
    animation: preloaderSlide 1.1s ease-in-out infinite;
}

.preloader-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(13px, 3.4vw, 16px);
    letter-spacing: 2px;
    text-transform: uppercase;
}

@keyframes preloaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: .78; }
}

@keyframes preloaderSlide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    .preloader-logo img,
    .preloader-bar-fill { animation: none; }
}


/* ---------- 2) FIX: eliminar la barra azul oscura sobrante antes del footer ----------
   El contenedor del hero (fondo azul) tiene padding inferior que se asomaba
   por debajo de la última sección blanca. Lo eliminamos por completo. */
.hero-shell--no-navbar .dnd_area-row-1-padding {
    padding-bottom: 0 !important;
}

/* El footer queda pegado limpio, sin franja intermedia */
.footer-premium {
    margin-top: 0 !important;
}


/* ---------- 3) RESPONSIVE UNIVERSAL — red de seguridad para TODOS los móviles ----------
   Complementa los breakpoints por dispositivo ya existentes. Objetivo:
   que NUNCA haya scroll horizontal ni contenido que se desborde, en cualquier ancho. */

/* Modelo de caja predecible + sin overflow lateral en toda la página */
*, *::before, *::after { box-sizing: border-box; }

/* IMPORTANTE: NO poner overflow-x en <html> — rompe el position:sticky de la
   barra "AGENDA LIMITADA". El recorte horizontal lo hace <body> (y <main>). */
html {
    max-width: 100%;
}
body {
    max-width: 100%;
    overflow-x: hidden;
}
/* La franja full-width (100vw) puede desbordar; la recortamos en <main>,
   que NO es ancestro de la barra sticky, para no romper el sticky. */
main.body-container-wrapper {
    overflow-x: clip;
}

/* Nada puede ser más ancho que la pantalla */
img, video, iframe, svg, canvas, table {
    max-width: 100%;
    height: auto;
}

/* Permite que los hijos flex/grid se encojan (evita desbordes de texto largo) */
.videos-slider-wrapper,
.reviews-gallery,
.benefits,
.footer-premium-container,
.top-urgency-inner { min-width: 0; }

/* Palabras/URLs muy largas no rompen el layout */
h1, h2, h3, p, a, span, li, .accordion-header, .footer-premium-legal p {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* El widget de Calendly se adapta en pantallas muy angostas */
@media (max-width: 600px) {
    .booking-widget-shell,
    .booking-widget-shell .calendly-inline-widget {
        min-height: 700px;
    }
}

/* Teléfonos muy pequeños (Galaxy Fold cerrado, ~280–360px):
   asegura legibilidad y que los botones no se corten */
@media (max-width: 360px) {
    .top-urgency-cta,
    button.cta_btn,
    body button.cta_btn {
        white-space: normal;
        line-height: 1.25;
    }
    .footer-premium-brand-text { letter-spacing: 1px; word-break: break-word; }
}

/* Respeta el área segura (notch / barra de gestos) en TODOS los iPhone/Android */
.top-urgency-bar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}


/* ---------- 4) PULIDO VISUAL (sutil, sin cambiar la identidad) ---------- */

/* Desplazamiento suave al hacer clic en anclas / CTA */
html { scroll-behavior: smooth; }

/* Los botones CTA sienten más "vida" al pasar el mouse / tocar */
button.cta_btn,
body button.cta_btn {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    will-change: transform;
}
button.cta_btn:hover,
body button.cta_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(111, 0, 255, 0.35);
}
button.cta_btn:active,
body button.cta_btn:active {
    transform: translateY(0);
}

/* Foco visible y accesible (teclado) sin ensuciar el mouse */
a:focus-visible,
button:focus-visible,
.accordion-header:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Las capturas de reseñas se ven como tarjetas prolijas */
.reviews-gallery .review-shot {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.reviews-gallery .review-shot:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Videos con esquinas suaves y sombra coherente */
.hero-video-shell,
.video-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* --- Video VSL: esquinas CUADRADAS iguales en TODOS los tamaños ---
   (móvil, tablet y computador) */
.hero-shell--no-navbar .hero-video-shell,
.hero-video-shell {
    border-radius: 0 !important;
    overflow: hidden !important;
}
.hero-video-shell .hero-video-player,
.hero-video-player {
    border-radius: 0 !important;
}


/* --- Barra de urgencia: UNA sola fila también en el teléfono ---
   Los tres elementos (badge, mensaje, CTA) en línea horizontal como en
   escritorio. La fuente se achica de forma fluida (vw) para que quepan
   sin cortarse ni desbordar, en cualquier ancho de teléfono. */
@media (max-width: 768px) {
    .top-urgency-inner {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        align-items: center;
        gap: clamp(5px, 1.6vw, 14px) !important;
        padding: 10px 6px !important;
        min-width: 0;
    }
    .top-urgency-badge {
        font-size: clamp(7px, 2.05vw, 12px);
        padding: 4px clamp(6px, 1.8vw, 10px);
        letter-spacing: 0.02em;
        white-space: nowrap;
        flex: 0 0 auto;
        margin: 0;
    }
    .top-urgency-badge .top-urgency-dot {
        width: clamp(6px, 1.6vw, 9px);
        height: clamp(6px, 1.6vw, 9px);
    }
    .top-urgency-text {
        width: auto;
        text-align: center;
        white-space: nowrap;
        font-size: clamp(8px, 2.7vw, 16px);
        margin: 0 !important;
        flex: 0 1 auto;
    }
    .top-urgency-cta {
        font-size: clamp(8px, 2.2vw, 13px);
        white-space: nowrap;
        flex: 0 0 auto;
        min-height: 0;
        margin: 0;
    }
}


/* =========================================================================
   AJUSTES 2026-07 (2) — Texto compacto, botón centrado y caja del Calendly
   ========================================================================= */

/* --- 1) Párrafo "Durante 3 meses…": menos separación entre líneas ---
   Antes el interlineado era fijo (32px) y en el móvil, con letra pequeña,
   se veía enorme. Lo hacemos relativo para que respire bien en todo tamaño. */
.text-section p {
    line-height: 1.45 !important;
    letter-spacing: 0.2px !important;
}

/* --- 2) Botón CTA: MISMA distancia arriba y abajo ---
   Quitamos los espacios que agrandaban el hueco inferior y damos al botón
   exactamente la misma separación por arriba (respecto al texto) que por
   abajo (respecto a la siguiente sección). */
.text-section {
    padding-bottom: 0 !important;
}
.what-you-get {
    padding-top: 0 !important;
}
.what-you-get > .page-width {          /* SOLO el bloque que sigue al botón */
    margin-top: clamp(28px, 6vw, 44px) !important;
}
.text-section .cta_btn {
    margin-top: clamp(28px, 6vw, 44px) !important;
    margin-bottom: 0 !important;
}

/* --- 3) Calendly: SIN caja, solo su espacio, y sin el hueco blanco ---
   El problema era que el <iframe> de Calendly (height="100%") no encontraba
   una altura definida en su contenedor y caía a 150px por defecto, dejando
   cientos de px en blanco. Solución: contenedor con ALTURA definida + iframe
   que la llena. Además ocultamos los detalles del evento (en el HTML) para
   que muestre el calendario directo y compacto. Sin borde, fondo ni sombra. */
.booking-widget-shell {
    width: min(100% - 32px, 900px) !important;
    max-width: 900px !important;
    margin: clamp(16px, 4vw, 40px) auto 0 !important;   /* sin margen inferior: pegado a la FAQ */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 620px !important;          /* escritorio: abraza el calendario */
    min-height: 0 !important;
    overflow: hidden;
}
.booking-widget-shell .calendly-inline-widget {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}
/* Clave: el iframe de Calendly llena el contenedor (antes se quedaba en 150px) */
.booking-widget-shell iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* Sin espacio entre el Calendly y la FAQ (la FAQ arranca justo debajo).
   El hueco venía de: (a) un <p>&nbsp;</p> sobrante tras el Calendly y
   (b) un margin-top:48px del .page-width de la FAQ. Eliminamos ambos. */
.faq-sec {
    padding-top: 0 !important;
}
.faq-sec .page-width {
    margin-top: 0 !important;
}
.booking-widget-shell + p {
    display: none !important;
}

/* En móviles el calendario es más alto (layout apilado) y usa casi todo el ancho */
@media (max-width: 600px) {
    .booking-widget-shell {
        width: min(100% - 24px, 900px) !important;
        height: 500px !important;
    }
}


/* =========================================================================
   AJUSTES 2026-07 (3) — Controles propios del VSL y franja a lo ancho
   ========================================================================= */

/* --- Video VSL: sin controles nativos (no se ve la duración) + botones propios --- */
.hero-video-shell {
    position: relative;
    cursor: pointer;
}

/* Botón central de reproducir / pausar (solo visible cuando está en pausa) */
.hero-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(111, 0, 255, 0.88);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.hero-play-overlay:hover {
    background: rgba(111, 0, 255, 1);
    transform: translate(-50%, -50%) scale(1.06);
}
.hero-ic-pause { display: none; }
/* Cuando el video se está reproduciendo, ocultamos el botón central */
.hero-video-shell:not(.is-paused) .hero-play-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Botón de sonido (abajo a la derecha) */
.hero-mute-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(15, 21, 43, 0.72);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease, border-color .2s ease;
}
.hero-mute-btn:hover {
    background: rgba(15, 21, 43, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
}
.hero-mute-btn svg { flex: none; }
/* Iconos y etiqueta según estado (silenciado por defecto) */
.hero-ic-muted { display: block; }
.hero-ic-sound { display: none; }
.hero-video-shell:not(.is-muted) .hero-ic-muted { display: none; }
.hero-video-shell:not(.is-muted) .hero-ic-sound { display: block; }
/* La etiqueta "Activar sonido" solo aparece cuando está silenciado (invita a activarlo) */
.hero-video-shell:not(.is-muted) .hero-mute-label { display: none; }

@media (max-width: 480px) {
    .hero-play-overlay { width: 64px; height: 64px; }
    .hero-mute-btn { font-size: 12px; padding: 8px 12px; bottom: 10px; right: 10px; }
}

/* --- Botón de sonido en los videos de testimonios (igual que el del VSL) --- */
.video-container { position: relative; }
.testi-mute-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(15, 21, 43, 0.72);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease, border-color .2s ease;
}
.testi-mute-btn:hover {
    background: rgba(15, 21, 43, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
}
.testi-mute-btn svg { display: block; }
/* Silenciado por defecto muestra el icono tachado; con sonido, el de ondas */
.testi-mute-btn .ti-ic-sound { display: none; }
.testi-mute-btn.muted .ti-ic-muted { display: block; }
.testi-mute-btn.muted .ti-ic-sound { display: none; }
.testi-mute-btn:not(.muted) .ti-ic-muted { display: none; }
.testi-mute-btn:not(.muted) .ti-ic-sound { display: block; }


/* --- Franja "Las áreas que potenciamos": a lo ancho completo, sin vacíos blancos ---
   Rompe el contenedor centrado para ocupar el 100% del ancho de la pantalla.
   El texto interno (.boxed-width) sigue centrado y con márgenes. */
.bg-heading-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 16px;
    padding-right: 16px;
}


/* =========================================================================
   AJUSTES 2026-07 (4) — Testimonios tipo "coverflow"
   3 videos: el central grande y clickeable, los laterales atenuados y no
   clickeables (más transparentes hacia los bordes). En móvil, solo 1 video.
   ========================================================================= */

/* Escenario más ancho en escritorio para que quepan los 3 */
.is-coverflow .local-videos-grid {
    max-width: 700px;
}

.is-coverflow .videos-slider-wrapper {
    position: relative;
    height: clamp(400px, 32vw, 460px);
    overflow: hidden;
    border-radius: 0;
}

/* La pista es el contexto de posición de los videos. Sin degradado/máscara. */
.is-coverflow .videos-slider-track {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    transform: none !important;
    transition: none;
}

/* Cada video se posiciona en su "ranura" (centro / izq / der) */
.is-coverflow .video-container {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: auto;
    min-width: 0;
    aspect-ratio: 9 / 16;
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
    transition: transform .45s ease, opacity .45s ease;
    will-change: transform, opacity;
}
.is-coverflow .testimonial-video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* Ranura central: grande, opaca y clickeable */
.is-coverflow .video-container.slot-center {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    z-index: 3;
}
/* Ranuras laterales (escritorio): atenuadas, sin degradado. Clickeables solo
   para pasar al centro (el play/silencio no actúa en ellas; lo maneja el JS). */
.is-coverflow .video-container.slot-left {
    transform: translateX(-145%) scale(0.8);
    opacity: 0.42;
    z-index: 1;
    cursor: pointer;
}
.is-coverflow .video-container.slot-right {
    transform: translateX(45%) scale(0.8);
    opacity: 0.42;
    z-index: 1;
    cursor: pointer;
}
.is-coverflow .video-container.slot-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Las flechas de navegación siempre por encima y nítidas */
.is-coverflow .videos-slider-nav {
    z-index: 10;
}

/* --- Móvil: central en su tamaño original + laterales asomando un poco --- */
@media (max-width: 768px) {
    .is-coverflow .local-videos-grid {
        max-width: 480px;
    }
    /* Tamaño por ANCHO (vw) con proporción FIJA 3:4 -> idéntico en TODOS los
       teléfonos (no depende del alto de pantalla). El video 9:16 se recorta
       arriba/abajo (object-fit:cover) para calzar en el recuadro 3:4. */
    /* Tamaño igual a la referencia (acquisition): 285.6 x 380 = proporción 3:4.
       En vw: 76vw x 101.3vw -> a 375px da ~285.6 x 380, e idéntico en todos. */
    .is-coverflow .videos-slider-wrapper {
        height: min(101.3vw, 400px);
        overflow: hidden;
    }
    .is-coverflow .video-container {
        aspect-ratio: auto;
        width: min(76vw, 300px);
        height: min(101.3vw, 400px);        /* = 4/3 del ancho => recuadro 3:4 */
    }
    .is-coverflow .video-container.slot-center {
        transform: translateX(-50%) scale(1);
    }
    /* La sombra del central cae sobre los laterales (profundidad) */
    .is-coverflow .video-container.slot-center .testimonial-video {
        box-shadow: 0 0 42px 10px rgba(0, 0, 0, 0.5), 0 14px 40px rgba(0, 0, 0, 0.4);
    }
    /* Laterales: mismo filtro que escritorio (opacidad 0.42), solapados con
       el central para que se vea un trozo de cada uno a los lados. */
    .is-coverflow .video-container.slot-left {
        transform: translateX(-120%) scale(0.62);
        opacity: 0.42;
    }
    .is-coverflow .video-container.slot-right {
        transform: translateX(20%) scale(0.62);
        opacity: 0.42;
    }
    .is-coverflow .video-container.slot-hidden {
        opacity: 0;
        pointer-events: none;
    }
}


/* =========================================================================
   FONDO "HUMO / NUBES" — variaciones muy sutiles sobre el blanco (global)
   Textura de ruido fractal (tipo nubes) en escala de grises, con opacidad
   muy baja para que apenas se perciba sobre el fondo blanco.
   ========================================================================= */
:root {
    --smoke-bg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='700'%20height='700'%3E%3Cfilter%20id='s'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0075'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23s)'%20opacity='0.13'/%3E%3C/svg%3E");
}

/* Fondo base de la página */
body {
    background-color: #ffffff;
    background-image: var(--smoke-bg);
    background-size: 700px 700px;
    background-repeat: repeat;
}

/* Mismas variaciones sobre las secciones que pintan su propio blanco
   (para que el efecto sea uniforme en toda el área blanca). */
.ab-test-section,
.what-you-get,
.faq-sec,
[style*="background: #FFFFFF"] {
    background-color: #ffffff !important;
    background-image: var(--smoke-bg) !important;
    background-size: 700px 700px;
    background-repeat: repeat;
}


/* =========================================================================
   FORMULARIO DE APLICACIÓN — MODAL (se abre al pinchar los CTA)
   El último paso muestra el Calendly. Ya no hay box inline en la página.
   ========================================================================= */

/* El apartado inline del booking ya no ocupa espacio (el form es modal) */
.row-number-8 { min-height: 0; }
#booking-widget + p { display: none !important; }
body.modal-open { overflow: hidden; }

/* Overlay del modal (fondo oscuro a pantalla completa) */
.apply-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 3vw, 28px);
    padding-top: max(clamp(10px, 3vw, 28px), env(safe-area-inset-top));
    padding-bottom: max(clamp(10px, 3vw, 28px), env(safe-area-inset-bottom));
}
.apply-modal.is-open { display: flex; }
.apply-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 18, 0.78);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Tarjeta oscura centrada con el formulario (estilo "Oscura elegante") */
.apply-modal-card {
    position: relative;
    z-index: 1;
    width: min(100% - 8px, 560px);
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #14162a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    padding: clamp(24px, 4vw, 38px);
    color: #e9eaf2;
    animation: applyModalIn .28s ease;
}
@keyframes applyModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* Botón de cerrar (X) */
.apply-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #9aa0b8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .15s ease, color .15s ease;
}
.apply-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.apply-form { width: 100%; }

/* Rótulo de paso */
.apply-stepcount {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b79bff;
    margin: 0 0 12px;
}

/* Barra de progreso */
.apply-progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    margin-bottom: 26px;
}
.apply-progress-bar {
    display: block;
    height: 100%;
    width: 25%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8b3bff, #c89bff);
    transition: width .35s ease;
}

/* Pasos */
.apply-step { display: none; }
.apply-step.is-active { display: block; animation: applyFade .3s ease; }
@keyframes applyFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.apply-title,
.apply-q {
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(18px, 2.3vw, 22px);
    line-height: 1.3;
    margin: 0 0 22px;
    text-align: left;
}

/* Campos de texto */
.apply-field { display: block; margin-bottom: 15px; }
.apply-field > span {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #9297b0;
    margin-bottom: 6px;
}
.apply-modal-card .apply-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 15px;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.apply-modal-card .apply-field input::placeholder { color: #6d7290 !important; }
.apply-modal-card .apply-field input:focus {
    border-color: #8b3bff !important;
    background: rgba(139, 59, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(139, 59, 255, 0.18) !important;
}
.apply-modal-card .apply-field input.error {
    border-color: #ff5f5e !important;
    box-shadow: 0 0 0 3px rgba(255, 95, 94, 0.18) !important;
}

/* Opciones (radio con punto personalizado) */
.apply-options { display: flex; flex-direction: column; gap: 9px; }
.apply-opt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font-size: 14.5px;
    line-height: 1.4;
    color: #c3c7db;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.apply-opt::before {
    content: "";
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 2px solid #565c78;
    flex: none;
    margin-top: 1px;
    transition: border-color .15s ease, background .15s ease;
}
.apply-opt:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); }
.apply-opt:focus-within { border-color: #8b3bff; box-shadow: 0 0 0 3px rgba(139, 59, 255, 0.18); }
.apply-modal-card .apply-opt.selected {
    border-color: #8b3bff !important;
    background: rgba(139, 59, 255, 0.16) !important;
    color: #ffffff !important;
    font-weight: 600;
}
.apply-modal-card .apply-opt.selected::before {
    border-color: #c89bff;
    background: radial-gradient(circle, #c89bff 45%, transparent 49%);
}
.apply-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* Mensaje de error */
.apply-error-msg {
    display: none;
    color: #ff7b7a;
    font-size: 13px;
    margin: 12px 0 0;
}
.apply-error-msg.show { display: block; }

/* Navegación */
.apply-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}
.apply-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    padding: 13px 26px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.apply-next {
    margin-left: auto;
    color: #fff;
    background: linear-gradient(90deg, #8b3bff, #6f00ff);
    box-shadow: 0 10px 26px rgba(111, 0, 255, 0.4);
}
.apply-next:hover { transform: translateY(-2px); }
.apply-ghost { background: transparent; color: #8388a3; padding-left: 4px; }
.apply-ghost:hover { color: #ffffff; }
.apply-modal-card .apply-btn:disabled { opacity: .45 !important; cursor: default; box-shadow: none !important; transform: none !important; }

/* ===== Paso 5: calendario propio (tema oscuro elegante) ===== */
.cal5 { margin-top: 2px; }
.cal5-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal5-title { font-size: 15px; font-weight: 700; color: #fff; text-transform: capitalize; }
.cal5-nav {
    width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04); color: #cdd0e0; border-radius: 9px;
    font-size: 20px; line-height: 1; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.cal5-nav:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cal5-nav:disabled { opacity: .3; cursor: default; }
.cal5-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal5-dow span { text-align: center; font-size: 11px; font-weight: 600; color: #7e8399; text-transform: uppercase; letter-spacing: .04em; }
.cal5-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal5-day {
    aspect-ratio: 1 / 1; border: 1px solid transparent; background: transparent;
    color: #c3c7db; font: inherit; font-size: 14px; font-weight: 600; border-radius: 9px;
    cursor: default; display: flex; align-items: center; justify-content: center;
}
.cal5-day.empty { visibility: hidden; }
.cal5-day.off { color: #464b63; }
.cal5-day.has {
    cursor: pointer; color: #fff; background: rgba(139,59,255,0.14);
    border-color: rgba(139,59,255,0.35);
    transition: background .15s ease, border-color .15s ease;
}
.cal5-day.has:hover { background: rgba(139,59,255,0.28); }
.cal5-day.sel {
    background: linear-gradient(90deg,#8b3bff,#6f00ff); border-color: transparent;
    color: #fff; box-shadow: 0 6px 16px rgba(111,0,255,0.4);
}
.cal5-status { font-size: 13px; color: #9297b0; margin: 12px 2px 0; }
.cal5-slots { margin-top: 14px; }
.cal5-slots-title { font-size: 13px; font-weight: 600; color: #b79bff; margin: 0 0 8px; text-transform: capitalize; }
.cal5-slots-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cal5-slot {
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
    color: #e9eaf2; font: inherit; font-size: 14px; font-weight: 600;
    padding: 9px 15px; border-radius: 10px; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.cal5-slot:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.24); }
.cal5-slot.sel { background: rgba(139,59,255,0.18); border-color: #8b3bff; color: #fff; }

/* Endurecido contra el CSS externo de la plantilla (que pinta botones claros) */
.apply-modal-card .cal5-nav { background: rgba(255,255,255,0.04) !important; color: #cdd0e0 !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: none !important; }
.apply-modal-card .cal5-nav:hover { background: rgba(255,255,255,0.10) !important; color: #fff !important; }
.apply-modal-card .cal5-day { background: transparent !important; color: #c3c7db !important; border: 1px solid transparent !important; box-shadow: none !important; }
.apply-modal-card .cal5-day.off { color: #464b63 !important; background: transparent !important; }
.apply-modal-card .cal5-day.has { background: rgba(139,59,255,0.14) !important; color: #fff !important; border-color: rgba(139,59,255,0.35) !important; }
.apply-modal-card .cal5-day.has:hover { background: rgba(139,59,255,0.28) !important; }
.apply-modal-card .cal5-day.sel { background: linear-gradient(90deg,#8b3bff,#6f00ff) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(111,0,255,0.4) !important; }
.apply-modal-card .cal5-slot { background: rgba(255,255,255,0.04) !important; color: #e9eaf2 !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: none !important; }
.apply-modal-card .cal5-slot.sel { background: rgba(139,59,255,0.18) !important; color: #fff !important; border-color: #8b3bff !important; }

/* Paso final: Calendly */
.apply-calendly-head { margin-bottom: 12px; }
.calendly-target { width: 100%; height: 640px; }
.calendly-target .calendly-inline-widget,
.calendly-target iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
}

@media (max-width: 600px) {
    .apply-modal-card {
        width: 100%;
        max-height: 88vh;
        padding: 22px 18px;
        border-radius: 18px;
    }
    .calendly-target { height: 560px; }
    .apply-opt { font-size: 13.5px; padding: 12px 13px; }
    .apply-btn { font-size: 14px; padding: 12px 16px; }
    .apply-title, .apply-q { font-size: 18px; }
}


/* =========================================================================
   Videos de testimonios: puntas CUADRADAS en todos los dispositivos
   (teléfono y computador)
   ========================================================================= */
.testimonial-video,
.is-coverflow .testimonial-video,
.video-container,
.videos-slider-wrapper {
    border-radius: 0 !important;
}