@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* Variables globales de color */
:root{
    --bg-dark:#020617;
    --surface:#06112b;
    --primary:#3b82f6;
    --primary-dark:#1d4ed8;
    --text:#f8fafc;
    --white:#ffffff;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Plus Jakarta Sans', sans-serif;
    background:var(--bg-dark);
    color:var(--text);
    min-height:100vh;
}

body.is-loading{
    overflow:hidden;
}

/* Loader inicial */
.page-loader{
    position:fixed;
    inset:0;
    z-index:20000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 20% 20%, rgba(59,130,246,.2), transparent 35%), linear-gradient(140deg, #020617 0%, #07132d 55%, #0a1f45 100%);
    opacity:1;
    visibility:visible;
    transition:opacity .55s ease, visibility .55s ease;
}

.page-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-core{
    width:min(88vw, 360px);
    text-align:center;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
}

.loader-logo{
    width:min(72vw, 260px);
    margin:0 auto 1.25rem;
    filter:drop-shadow(0 8px 20px rgba(59,130,246,.22));
    animation:loaderLogoFloat 1.6s ease-in-out infinite;
}

.loader-line{
    height:8px;
    width:100%;
    border-radius:999px;
    background:rgba(148, 163, 184, .26);
    position:relative;
    overflow:hidden;
}

.loader-line-fill{
    position:absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #60a5fa, #38bdf8 55%, #60a5fa);
    box-shadow:0 0 14px rgba(56,189,248,.45);
    transition:width .1s linear;
}

.loader-core p{
    margin:1rem 0 0;
    color:rgba(226,232,240,.92);
    font-size:.94rem;
    letter-spacing:.03em;
}

.loader-percent{
    font-weight:700;
}

@keyframes loaderLogoFloat{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

@keyframes loaderRun{
    0%{left:-45%;}
    100%{left:100%;}
}

/* Footer */
.footer-tusala {
    background: #0f172a; /* azul oscuro elegante */
    color: #cbd5e1;
}

.footer-tusala .footer-title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.footer-tusala .footer-links li {
    margin-bottom: 8px;
}

.footer-tusala .footer-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-tusala p a {
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-tusala .footer-links a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.footer-tusala p a:hover {
    color: #ffffff;
}

.footer-tusala hr {
    border-color: rgba(255, 255, 255, 0.1);
}

.footer-bottom-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}

.legal-modal-content{
    background:linear-gradient(170deg, rgba(9,16,35,.98), rgba(13,29,56,.97));
    border:1px solid rgba(148,163,184,.28);
    color:#e2e8f0;
    border-radius:18px;
}

.legal-modal-content .modal-title{
    color:#dbeafe;
}

.legal-modal-content p,
.legal-modal-content li{
    color:rgba(226,232,240,.9);
}

.legal-modal-content h6{
    color:#bfdbfe;
    margin-top:1rem;
}

section{
    padding:90px 0;
    scroll-margin-top: 80px;
}

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

a{
    text-decoration:none;
}

h1,h2,h3,h4,h5{
    font-weight:700;
}

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

.btn{
    border-radius:12px;
    padding:12px 28px;
    font-weight:600;
    transition:.3s;
}

.btn-primary{
    background:var(--primary);
    border:none;
}

.btn-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
}

.custom-navbar{
    background:rgba(3,7,27,.92);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    transition:.3s;
    box-shadow:0 16px 40px rgba(0,0,0,.15);
}

.logo{
    height:48px;
}

.nav-link{
    margin-left:18px;
    color:rgba(255,255,255,.85)!important;
    font-weight:500;
    transition:.3s;
}

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

/* Hero principal */
.hero-section{
    background:radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 28%), linear-gradient(135deg, #020617 0%, #0f172a 100%);
    padding:80px 0 70px;
}
.hero-section .container{
    padding-top:20px;
    padding-bottom:20px;
}
.hero-row{
    align-items:center;
    min-height:calc(100vh - 240px);
}
.hero-typed-wrapper{
    display:inline-flex;
    justify-content:center;
    width:auto;
    max-width:100%;
    min-height:5rem;
    margin:0 auto;
}
.hero-typed{
    display:inline-block;
    color:var(--white);
    font-size:clamp(2.8rem,5vw,4.5rem);
    line-height:1.05;
    white-space:normal;
    word-break:break-word;
    max-width:100%;
    text-align:center;
}
.hero-typed::after{
    content:'|';
    margin-left:.15rem;
    animation:blinkCursor 1.2s steps(1) infinite;
}
.pricing-section{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04));
}

.pricing-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    padding:2.5rem;
    min-height:520px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:stretch;
}

.pricing-offset-desktop{
    margin-top:5rem;
}

/* Las 4 tarjetas de plan (gratis + 3 de paga) comparten una sola fila en
   pantallas de escritorio: se recorta un poco el relleno y el tamaño del
   precio para que quepan cómodamente en 1/4 del ancho del contenedor. */
@media (min-width: 992px) {
    #planes .pricing-card{
        padding:1.75rem 1.5rem;
        min-height:0;
    }
    #planes .price-value{
        font-size:2.35rem;
    }
    #planes .pricing-card-head h5{
        font-size:1.15rem;
    }
    #planes .pricing-list li{
        padding-left:1.75rem;
        margin-bottom:.65rem;
        font-size:.87rem;
        line-height:1.4;
    }
    #planes .pricing-commission-note{
        padding:.45rem .65rem;
        font-size:.73rem;
    }
    #planes .pricing-commission-badge{
        font-size:.95rem;
    }
}

/* Botones del hero en laptop/desktop: auto-dimensionados al contenido para
   que los tres quepan proporcionados en una sola fila y el texto NUNCA
   sobresalga del botón. Sin ancho fijo, el botón crece con su texto. */
@media (min-width: 992px) {
    .hero-actions .btn{
        flex:0 0 auto;
        min-width:0;
        padding:.7rem 1.5rem;
        font-size:1rem;
        white-space:nowrap;
    }
}

/* Navbar compacta y simétrica en desktop: enlaces y botones comparten la
   misma altura y padding, dimensionados al texto que contienen, para que
   ningún elemento se vea más grande que otro. */
@media (min-width: 992px) {
    .custom-navbar .nav-item{
        margin-inline:.25rem;
    }
    .custom-navbar .nav-link{
        margin-left:0;
        display:inline-flex;
        align-items:center;
        padding:.5rem .9rem;
        font-size:.92rem;
        line-height:1.2;
        border-radius:8px;
        transition:.25s;
    }
    .custom-navbar .nav-link:hover,
    .custom-navbar .nav-link.active{
        background:rgba(59,130,246,.15);
        color:var(--primary) !important;
    }
    .custom-navbar .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:.5rem .95rem;
        font-size:.9rem;
        line-height:1.2;
        border-radius:8px;
        min-height:0;
        margin-top:0;
    }
}

.pricing-card-selected{
    border-color:rgba(59,130,246,.9);
    background:rgba(59,130,246,.18);
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(37,99,235,.18);
}

.pricing-card-selected .pricing-badge{
    background:rgba(59,130,246,.28);
    color:#bfdbfe;
}

.pricing-badge{
    display:inline-flex;
    background:rgba(59,130,246,.15);
    color:var(--primary);
    padding:.45rem 1rem;
    border-radius:999px;
    font-weight:700;
    margin-bottom:1rem;
}

/* Reserva el mismo espacio que ocupa un badge real (p.ej. "Popular") en las
   tarjetas que no tienen uno, para que el precio quede a la misma altura en
   las 4 tarjetas del plan en vez de una en "grada". */
.pricing-badge-spacer{
    visibility:hidden;
}

.pricing-card-head h5{
    font-size:1.3rem;
    margin-bottom:.75rem;
}

.price-value{
    font-size:3rem;
    font-weight:800;
    margin:0;
}

.price-span{
    letter-spacing: 3rem;
}

.price-value span{
    font-size:1rem;
    font-weight:600;
    color:rgba(248,250,252,.75);
}

.price-subtext{
    color:rgba(248,250,252,.78);
    margin-top:1rem;
    line-height:1.7;
}

.pricing-commission-note{
    margin:.75rem 0 0;
    padding:.5rem .75rem;
    border-radius:10px;
    background:rgba(245,158,11,.12);
    border:1px solid rgba(245,158,11,.4);
    color:#fbbf24;
    font-size:.78rem;
    font-weight:700;
    line-height:1.4;
    text-align:left;
}

.pricing-commission-badge{
    font-size:1.05rem;
    font-weight:800;
    color:#f59e0b;
    white-space:nowrap;
}

/* Tarjeta resumen de comisión, centrada arriba de las 4 tarjetas de plan:
   concentra el detalle (a quién aplica, cómo se calcula, cuándo se cobra)
   para que cada tarjeta de plan solo necesite un aviso corto. */
.commission-highlight{
    display:flex;
    align-items:center;
    gap:1.1rem;
    max-width:820px;
    margin:0 auto 2.75rem;
    padding:1.25rem 1.5rem;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(245,158,11,.16), rgba(249,115,22,.1));
    border:1px solid rgba(245,158,11,.4);
    text-align:left;
}

.commission-highlight-icon{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(245,158,11,.18);
    border:1px solid rgba(245,158,11,.4);
    color:#f59e0b;
    font-size:1.4rem;
}

.commission-highlight-title{
    margin:0 0 .35rem;
    font-size:1.05rem;
    font-weight:800;
    color:#fde68a;
}

.commission-highlight-text{
    margin:0;
    color:rgba(254,243,199,.88);
    font-size:.92rem;
    line-height:1.6;
}

.pricing-list li{
    position:relative;
    padding-left:2.5rem;
    margin-bottom:1rem;
    color:rgba(248,250,252,.88);
}

.pricing-list li::before{
    content:'✓';
    position:absolute;
    left:0;
    top:0;
    color:var(--primary);
    font-weight:700;
}

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

.btn-pricing:hover{
    background:var(--primary-dark);
}

/* Ajustes de tarjetas de planes en mobile */
@media (max-width: 768px) {
    .pricing-card{
        padding:2rem;
        min-height:auto;
        height:auto;
    }
}

@media (max-width: 992px) {
    .hero-typed-wrapper {
        min-height:4rem;
    }
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    background:rgba(59,130,246,.15);
    color:var(--primary);
    padding:.8rem 1.2rem;
    border-radius:999px;
    font-weight:700;
    letter-spacing:.03em;
}

.hero-title{
    font-size:clamp(2.8rem,5vw,4.5rem);
    line-height:1.05;
    letter-spacing:-.04em;
    font-weight:800;
}

@keyframes blinkCursor{
    0%,100%{opacity:1;}
    50%{opacity:0;}
}

.hero-copy{
    max-width:620px;
    color:rgba(248,250,252,.87);
    font-size:1.05rem;
    line-height:1.85;
}

.hero-notes span{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.6rem 1rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
}

.hero-media{ display:grid; gap:1.5rem; }

.hero-panel{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    padding:1.8rem;
    border-radius:24px;
    min-height:240px;
}

.hero-panel h5{
    color:var(--white);
    margin-bottom:1rem;
}

.hero-panel-list{
    margin-top:1.2rem;
    padding-left:0;
    list-style:none;
}

.hero-panel-list li{
    margin-bottom:.85rem;
    color:rgba(248,250,252,.78);
}

.hero-panel-list i{
    color:var(--primary);
}

.interactive-logo{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    position:relative;
    overflow:hidden;
}

.bg-surface{
    background:var(--surface);
}

.section-light{
    background:#0c1d39;
}

.novedades-grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:1.2rem;
}

.novedad-main,
.novedad-item{
    border-radius:22px;
    border:1px solid rgba(148,163,184,.22);
    background:linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    box-shadow:0 22px 35px rgba(2,6,23,.2);
}

.novedad-main{
    grid-column:span 12;
    padding:2rem;
    position:relative;
    overflow:hidden;
}

.novedad-main::after{
    content:"";
    position:absolute;
    right:-40px;
    top:-50px;
    width:180px;
    height:180px;
    border-radius:50%;
}

.novedad-main h4{
    margin-bottom:.8rem;
    font-size:1.55rem;
}

.novedad-main p{
    margin:0;
    color:rgba(226,232,240,.9);
    max-width:720px;
}

.novedad-tags{
    margin-top:1.2rem;
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
}

.novedad-tags span{
    display:inline-flex;
    align-items:center;
    padding:.42rem .9rem;
    border-radius:999px;
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.28);
    color:#dbeafe;
    font-size:.84rem;
    font-weight:600;
}

.novedad-item{
    grid-column:span 6;
    padding:1.3rem 1.35rem;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.novedad-item:hover{
    transform:translateY(-6px);
    border-color:rgba(96,165,250,.6);
    box-shadow:0 24px 34px rgba(15,23,42,.35);
}

.novedad-step{
    display:inline-flex;
    margin-bottom:.6rem;
    color:#7dd3fc;
    font-size:.82rem;
    letter-spacing:.15em;
    font-weight:800;
}

.novedad-item h5{
    margin-bottom:.45rem;
    color:#f8fafc;
}

.novedad-item p{
    margin:0;
    color:rgba(226,232,240,.82);
}

.section-label{
    display:inline-block;
    color:var(--primary);
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:.82rem;
}

.section-title{
    color:#ffffff;
    font-size:clamp(2.1rem,3vw,3.4rem);
    line-height:1.05;
}

.section-copy{
    color:rgba(248,250,252,.78);
    font-size:1rem;
    max-width:700px;
}

.feature-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;
}

.about-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:1.7rem;
    min-height:160px;
}

.about-card h3{
    font-size:1.25rem;
    margin-bottom:.8rem;
}


.logo-label{
    color:var(--primary);
    letter-spacing:.05em;
    text-align:center;
    margin-top:.9rem;
    font-size:.95rem;
    font-weight:700;
}

.hero-section .container{
    max-width:1140px;
}

@media (max-width: 992px) {
    .hero-section {
        padding:60px 0 40px;
    }
    .hero-title {
        font-size:2.7rem;
    }
    .hero-typed {
        min-height:3.5rem;
    }
}

.espacio-img{
    width:100%;
    height:520px;
    object-fit:cover;
    transition:.4s;
}

.espacios-section{
    background:#fff;
}

.espacios-section h2{
    font-family: "Playfair Display", serif;
    font-size:3rem;
    line-height:1.15;
    color:#111827;
}

.espacios-section p{
    font-size:1.15rem;
    line-height:1.9;
    color:#555;
}

@media(max-width:991px){

    .espacio-img{
        height:350px;
    }

    .espacios-section h2{
        font-size:2.3rem;
    }

}


/* Testimonios desactivados temporalmente (seccion comentada en HTML).
Para reactivar: descomentar bloque en index.html y bloque JS en script.js */
.testimonials-section{
    position:relative;
    overflow:hidden;
}

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

.testimonials-stars,
.section-stars{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.testimonials-stars .star-dot,
.section-stars .star-dot{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle, rgba(191,219,254,.95), rgba(125,211,252,.55) 45%, rgba(125,211,252,0) 75%);
    filter:blur(var(--blur, 0px));
    opacity:var(--opacity, .45);
    transform:translate3d(0,0,0);
    animation:starDrift var(--duration, 14s) ease-in-out infinite;
    animation-delay:var(--delay, 0s);
}

.testimonials-stars .star-dot.star-near,
.section-stars .star-dot.star-near{
    opacity:1;
    filter:blur(0);
}

@keyframes starDrift{
    0%{ transform:translate3d(0,0,0) scale(1); }
    25%{ transform:translate3d(var(--dx, 14px), var(--dy, -16px), 0) scale(1.12); }
    50%{ transform:translate3d(calc(var(--dx, 14px) * -0.6), calc(var(--dy, -16px) * -0.5), 0) scale(.92); }
    75%{ transform:translate3d(calc(var(--dx, 14px) * .55), calc(var(--dy, -16px) * .45), 0) scale(1.05); }
    100%{ transform:translate3d(0,0,0) scale(1); }
}

.testimonials-section::before{
    content:"";
    position:absolute;
    left:-140px;
    top:20%;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(56,189,248,.2), transparent 72%);
    pointer-events:none;
}

#carouselTestimonios{
    position:relative;
    padding:0 1rem 4.2rem;
    z-index:1;
}

#carouselTestimonios .carousel-inner{
    min-height:380px;
}

#carouselTestimonios .carousel-item{
    transition:transform .9s ease;
}

#carouselTestimonios .carousel-item > .d-flex{
    min-height:360px;
    align-items:center;
}

.testimonial-card{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    max-width:760px;
    width:100%;
    border:none;
    border-radius:24px;
    background:linear-gradient(150deg, rgba(15,23,42,.96), rgba(15,35,66,.95));
    border:1px solid rgba(148,163,184,.22);
    box-shadow:0 20px 44px rgba(2,6,23,.35), 0 0 0 1px rgba(125,211,252,.06);
}

/* Borde brillante sutil para tarjetas de testimonios */
.testimonial-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    pointer-events:none;
    padding:1px;
    background:linear-gradient(140deg, rgba(56,189,248,.34), rgba(96,165,250,.18), rgba(148,163,184,.2));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.82;
    animation:testimonialGlowPulse 5.2s ease-in-out infinite;
}

.testimonial-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    border:1px solid rgba(147,197,253,.18);
    opacity:.6;
}

.testimonial-card:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 48px rgba(2,6,23,.38), 0 0 22px rgba(56,189,248,.12);
}

.testimonial-card .card-body{
    padding:35px;
}

.testimonial-quote-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(56,189,248,.14);
    color:#7dd3fc;
    font-size:1.45rem;
    margin-bottom:1.2rem;
}

.testimonial-copy{
    color:rgba(226,232,240,.95);
    font-size:1.08rem;
    line-height:1.85;
    margin-bottom:1.45rem;
}

.testimonial-author{
    display:flex;
    align-items:center;
    gap:.95rem;
}

.testimonial-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.86rem;
    font-weight:700;
    letter-spacing:.04em;
    color:#dbeafe;
    border:1px solid rgba(147,197,253,.4);
    background:linear-gradient(140deg, rgba(30,64,175,.45), rgba(14,116,144,.45));
}

.testimonial-role{
    color:rgba(191,219,254,.78);
    font-size:.94rem;
}

.testimonial-rating{
    color:#93c5fd;
    font-size:.88rem;
}

.testimonial-stars{
    color:#fbbf24;
    margin-right:.25rem;
}
.testimonial-stars i{
    font-size:.82rem;
}

#carouselTestimonios .carousel-indicators{
    bottom:-8px;
    margin-bottom:0;
    gap:.45rem;
}

#carouselTestimonios .carousel-indicators button{
    width:28px;
    height:6px;
    border-radius:999px;
    border:none;
    background:rgba(148,163,184,.45) !important;
    opacity:1;
}

#carouselTestimonios .carousel-indicators .active{
    width:44px;
    background:linear-gradient(90deg, #38bdf8, #60a5fa) !important;
}

.card-title{
    color: white;
}

.testimonial-nav{
    width:46px;
    height:46px;
    top:50%;
    transform:translateY(-60%);
    opacity:1;
}

.testimonial-nav-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.8);
    border:1px solid rgba(148,163,184,.4);
    color:#dbeafe;
    font-size:1.05rem;
    transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.testimonial-nav:hover .testimonial-nav-icon{
    transform:scale(1.06);
    background:rgba(30,58,138,.86);
    border-color:rgba(125,211,252,.6);
}

.carousel-control-prev.testimonial-nav{
    left:-8px;
}

.carousel-control-next.testimonial-nav{
    right:-8px;
}

.stats-section{
    background:var(--surface);
    color:var(--text);
}

.stars-host{
    position:relative;
    overflow:hidden;
}

.stars-host > .container{
    position:relative;
    z-index:1;
}

.closing-section{
    background:linear-gradient(135deg, #07132b 0%, #0d1f41 55%, #10284f 100%);
}

.closing-shell{
    border:1px solid rgba(147,197,253,.24);
    background:linear-gradient(150deg, rgba(15,23,42,.9), rgba(14,32,63,.85));
    border-radius:28px;
    padding:2rem;
    box-shadow:0 24px 46px rgba(2,6,23,.32);
}

.closing-points{
    display:grid;
    gap:.8rem;
}

.closing-point{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    color:rgba(226,232,240,.9);
}

.closing-point i{
    color:#7dd3fc;
    margin-top:.2rem;
}

.closing-card{
    border:1px solid rgba(147,197,253,.28);
    border-radius:22px;
    padding:1.5rem;
    background:rgba(15,23,42,.65);
}

.closing-card h5{
    color:#f8fafc;
    margin-bottom:.6rem;
}

.closing-card p,
.closing-card small{
    color:rgba(226,232,240,.84);
}

.stats-section p{
    color:rgba(248,250,252,.88);
}

.stats-section h2{
    font-size:3rem;
    font-weight:800;
}

.stats-section h2.is-counting{
    color:#93c5fd;
    text-shadow:0 0 16px rgba(56,189,248,.28);
}

footer{
    background:#020617;
    color:#94a3b8;
}

footer p{
    color:#cbd5e1;
}
.card,
.btn{
    transition:.35s ease;
}

.form-control,
.form-select{
    margin-bottom:.8rem;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.08);
    color:var(--text);
}

.form-select{
    color:var(--text);
    background:rgba(255,255,255,.08);
}

.form-select option{
    color:var(--text);
    background:#020617;
}

.form-control::placeholder,
textarea::placeholder{
    color:rgba(255,255,255,.75);
    opacity:1;
}

.form-select:invalid{
    color:rgba(255,255,255,.7);
}

.form-control:focus,
.form-select:focus,
textarea:focus{
    border-color:rgba(59,130,246,.7);
    box-shadow:0 0 0 0.15rem rgba(59,130,246,.18);
    background:rgba(255,255,255,.13);
    color:var(--text);
}

.form-control.field-invalid{
    border-color:#f43f5e!important;
    box-shadow:0 0 0 0.18rem rgba(244,63,94,.22)!important;
    background:rgba(244,63,94,.08);
}
.form-control.field-invalid:focus{
    border-color:#fb7185!important;
    box-shadow:0 0 0 0.22rem rgba(244,63,94,.3)!important;
}

.form-message{
    display:none;
    padding:.85rem 1rem;
    border-radius:12px;
    font-size:.95rem;
    border:1px solid rgba(59,130,246,.18);
    background:rgba(59,130,246,.08);
    color:#dbeafe;
}

.form-message.success{
    display:block;
    border-color:rgba(16,185,129,.24);
    background:rgba(16,185,129,.14);
    color:#dcfce7;
}

.form-message.error{
    display:block;
    border-color:rgba(248,113,113,.24);
    background:rgba(248,113,113,.14);
    color:#fee2e2;
}

/* Formulario de registro */
.registro-card{
    position:relative;
    overflow:visible;
    isolation:isolate;
    border:1.6px solid rgba(125,211,252,.5);
    background:linear-gradient(160deg, rgba(15,23,42,.9), rgba(11,29,58,.92));
    box-shadow:0 22px 48px rgba(2,6,23,.36), 0 0 0 1px rgba(125,211,252,.26), 0 0 34px rgba(56,189,248,.16);
}

.registro-card::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:inherit;
    background:radial-gradient(circle at 20% 20%, rgba(56,189,248,.25), transparent 52%), radial-gradient(circle at 80% 80%, rgba(96,165,250,.22), transparent 48%);
    filter:blur(12px);
    opacity:.72;
    animation:formGlowPulse 4.8s ease-in-out infinite;
    pointer-events:none;
    z-index:-1;
}

.registro-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    border:1px solid rgba(191,219,254,.45);
    box-shadow:inset 0 0 0 1px rgba(125,211,252,.18);
    opacity:.95;
    pointer-events:none;
}

@keyframes formGlowPulse{
    0%, 100%{
        opacity:.6;
        transform:scale(.995);
    }
    50%{
        opacity:.95;
        transform:scale(1.004);
    }
}

@keyframes testimonialGlowPulse{
    0%, 100%{
        opacity:.72;
        filter:drop-shadow(0 0 8px rgba(56,189,248,.05));
    }
    50%{
        opacity:.95;
        filter:drop-shadow(0 0 14px rgba(56,189,248,.1));
    }
}

.card-body,
.registro-card .card-body{
    position:relative;
    z-index:1;
}

.reveal-item{
    opacity:0;
    transform:translateY(22px) scale(.985);
    transition:opacity .62s ease, transform .62s ease;
    will-change:opacity, transform;
}

.reveal-item.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

.reveal-item[data-reveal="left"]{
    transform:translateX(-20px);
}

.reveal-item[data-reveal="right"]{
    transform:translateX(20px);
}

.reveal-item.is-visible[data-reveal="left"],
.reveal-item.is-visible[data-reveal="right"]{
    transform:translateX(0);
}

.registro-benefits li{
    margin-bottom:1rem;
    color:rgba(248,250,252,.78);
}

.registro-benefits i{ font-size:1.1rem; }

@media(max-width:992px){

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

    .hero-media{
        justify-content:center;
    }

    .nav-link{
        margin-left:0;
        padding:15px 0;
    }
}

@media(max-width:768px){

    /* Mas margen lateral en telefono para evitar contenido pegado a los bordes */
    .container,
    .container-fluid{
        padding-left:1.05rem !important;
        padding-right:1.05rem !important;
    }

    /* Separacion vertical consistente entre secciones en telefono */
    section + section{
        margin-top:.9rem;
    }

    .bg-surface,
    .section-light,
    .about-section,
    .stats-section,
    .footer-tusala{
        margin-top:.7rem;
    }

    .hero-content{
        margin-top:1.4rem !important;
    }

    .hero-badge{
        margin-top:.95rem;
    }

    .hero-section{
        padding:52px 0 36px;
    }

    .hero-row{
        min-height:auto;
    }

    .hero-title,
    .hero-typed{
        font-size:2.05rem;
    }

    section{
        padding:50px 0;
    }

    .section-title{
        font-size:1.9rem;
    }

    .section-copy,
    p{
        line-height:1.62;
    }

    .hero-copy{
        margin-bottom:1rem !important;
    }

    .hero-notes{
        gap:.6rem !important;
    }

    .hero-notes span{
        padding:.45rem .82rem;
        font-size:.88rem;
    }

    .hero-media .interactive-logo{
        margin-top:1.05rem;
    }

    .espacios-section .my-5{
        margin-top:1.5rem !important;
        margin-bottom:1.5rem !important;
    }

    .espacios-section .gy-5{
        --bs-gutter-y:1.35rem;
    }

    .espacios-section .feature-card{
        margin-top:.2rem;
    }

    .stats-section{
        padding-top:44px !important;
        padding-bottom:42px !important;
    }

    .stats-section .community-title{
        max-width:22ch;
        margin-inline:auto;
    }

    .stats-section .display-5{
        font-size:1.55rem;
        margin-bottom:.55rem;
    }

    .stats-section .lead{
        font-size:1rem;
        line-height:1.55;
    }

    .stats-section .row.mt-5{
        margin-top:1.2rem !important;
    }

    .stats-section h2{
        font-size:1.9rem;
        margin-top:.45rem;
    }

    .stats-section .col-6{
        margin-top:.7rem;
    }

    .pricing-offset-desktop{
        margin-top:0 !important;
    }

    #planes .row.g-4{
        --bs-gutter-y:1.6rem;
    }

    #planes .row.g-4 > [class*="col-"]{
        margin-bottom:.35rem;
    }

    .plan-premium-mobile-gap{
        margin-top:1.9rem !important;
    }

    .pricing-card{
        min-height:auto;
    }

    .pricing-list li{
        margin-bottom:.65rem;
    }

    .pricing-commission-note{
        margin-top:.85rem;
        padding:.6rem .8rem;
        font-size:.78rem;
    }

    .commission-highlight{
        max-width:100%;
        margin-bottom:2.25rem;
        padding:1.1rem 1.25rem;
    }

    .registro-card .card-body{
        padding:1.35rem !important;
    }

    .form-control,
    .form-select{
        margin-bottom:.55rem;
    }

    .footer-tusala .row > [class*="col-md"]{
        margin-bottom:1.2rem !important;
    }

    /* En movil: solo logo y texto descriptivo centrados */
    .footer-main-row > .col-md-3{
        text-align:center;
        margin-bottom:.8rem !important;
    }

    .footer-main-row > .col-md-3 img,
    .footer-main-row > .col-md-3 p{
        margin-inline:auto;
    }

    /* En movil: bloques Explorar, Empresa, Legal y Contacto alineados a la izquierda */
    .footer-links-grid,
    .footer-links-grid .footer-links,
    .footer-links-grid .footer-title,
    .footer-links-grid p{
        text-align:left;
    }

    .footer-links-grid{
        --bs-gutter-y:1.1rem;
    }

    .footer-links-grid > [class*="col-"]{
        margin-bottom:0 !important;
    }

    .footer-links-grid .footer-title{
        margin-bottom:.5rem;
    }

    .footer-links-grid .footer-links li,
    .footer-links-grid p{
        margin-bottom:.38rem;
    }

    .footer-tusala .my-4{
        margin-top:.8rem !important;
        margin-bottom:.95rem !important;
    }

    .logo{height:60px;}

    .novedad-item{
        grid-column:span 12;
    }

    .novedad-main{
        padding:1.4rem;
    }

    .closing-shell{
        padding:1.3rem;
    }

    #carouselTestimonios{
        padding:0 0 4rem;
    }

    .carousel-control-prev.testimonial-nav{
        left:0;
    }

    .carousel-control-next.testimonial-nav{
        right:0;
    }

    .testimonial-nav{
        top:auto;
        bottom:64px;
        transform:none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}

/* ===========================================================================
   SaaS Payment Modal
   =========================================================================== */
.payment-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #666;
    transition: color 0.2s;
}
.payment-step.active {
    color: #fff;
    font-weight: 600;
}
.payment-step.completed {
    color: #3b82f6;
}
.payment-step .step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #333;
    font-size: 0.75rem;
    font-weight: 700;
    color: #aaa;
    transition: background 0.2s, color 0.2s;
}
.payment-step.active .step-dot {
    background: #3b82f6;
    color: #fff;
}
.payment-step.completed .step-dot {
    background: #1d4ed8;
    color: #fff;
}
.payment-step-sep {
    color: #444;
    font-size: 1rem;
}
.payment-section {
    min-height: 200px;
}

/* ===========================================================================
   Wizard de registro SaaS inline
   =========================================================================== */
.wizard-progress{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    max-width:720px;
    margin-inline:auto;
}

.wizard-step-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:0 0 auto;
    min-width:78px;
    color:rgba(226,232,240,.58);
    transition:color .25s ease;
}

.wizard-dot{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    margin-bottom:.45rem;
    border:1px solid rgba(148,163,184,.5);
    border-radius:50%;
    background:rgba(15,23,42,.84);
    color:inherit;
    font-size:.88rem;
    font-weight:700;
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.wizard-label{
    max-width:92px;
    font-size:.72rem;
    line-height:1.2;
    text-align:center;
}

.wizard-connector{
    flex:1 1 46px;
    height:2px;
    margin-top:16px;
    background:rgba(148,163,184,.35);
    transition:background .25s ease;
}

.wizard-step-item.active,
.wizard-step-item.completed{
    color:#e0f2fe;
}

.wizard-step-item.active .wizard-dot{
    border-color:#38bdf8;
    background:#0284c7;
    box-shadow:0 0 0 5px rgba(56,189,248,.16), 0 0 18px rgba(56,189,248,.42);
}

.wizard-step-item.completed .wizard-dot{
    border-color:#22c55e;
    background:#16a34a;
}

.wizard-step-item.completed .wizard-dot span{
    font-size:0;
}

.wizard-step-item.completed .wizard-dot::after{
    content:'✓';
    font-size:1rem;
}

.wizard-connector.completed{
    background:linear-gradient(90deg,#16a34a,#38bdf8);
}

.wizard-panel{
    animation:wizardPanelIn .3s ease both;
}

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

.wizard-panel-title{
    color:#f8fafc;
    font-weight:700;
}

.wizard-plan-card{
    display:block;
    height:100%;
    cursor:pointer;
}

.wizard-plan-inner{
    position:relative;
    height:100%;
    padding:1.1rem .9rem;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.34);
    border-radius:16px;
    background:rgba(15,23,42,.48);
    color:#e2e8f0;
    transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.wizard-plan-card:hover .wizard-plan-inner,
.wizard-plan-card.selected .wizard-plan-inner{
    border-color:#38bdf8;
    background:rgba(14,116,144,.22);
    box-shadow:0 0 0 2px rgba(56,189,248,.15), 0 12px 22px rgba(2,132,199,.16);
    transform:translateY(-2px);
}

.wizard-plan-name{font-size:1rem; font-weight:700; color:#f8fafc;}
.wizard-plan-price{margin:.45rem 0 .75rem; color:#7dd3fc; font-size:1.45rem; font-weight:800;}
.wizard-plan-price span{font-size:.72rem; font-weight:500; color:#cbd5e1;}
.wizard-plan-features{margin:0; padding-left:1rem; color:#cbd5e1; font-size:.77rem; line-height:1.6;}
.wizard-plan-badge{position:absolute; top:.5rem; right:.5rem; font-size:.67rem; color:#fef3c7;}

.wizard-payment-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.8rem 1rem;
    border:1px solid rgba(56,189,248,.34);
    border-radius:12px;
    background:rgba(14,116,144,.15);
    color:#e0f2fe;
}

.wizard-apay-frame{
    width:100%;
    min-height:390px;
    margin:1.25rem 0 .35rem;
    border:1px solid rgba(56,189,248,.45);
    border-radius:14px;
    background:#fff;
}

/* ── Animación de proceso de pago (paso "Procesando") ── */
.payment-orbit{
    position:relative;
    width:88px; height:88px;
    margin:.25rem auto 1rem;
    display:grid; place-items:center;
    border-radius:50%;
    color:#7dd3fc;
    background:rgba(56,189,248,.1);
}
.payment-orbit span{
    position:absolute; inset:0;
    border:3px solid rgba(125,211,252,.16);
    border-top-color:#38bdf8;
    border-right-color:#7c5cff;
    border-radius:50%;
    animation:paymentOrbitSpin 1s linear infinite;
}
.payment-orbit i{ font-size:1.8rem; }
@keyframes paymentOrbitSpin{ to{ transform:rotate(360deg); } }

.payment-steps{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    align-items:center;
    gap:.5rem;
    max-width:340px;
    margin:1.1rem auto;
}
.payment-steps > div{ display:grid; justify-items:center; gap:.35rem; color:#7a94b8; font-size:.68rem; }
.payment-steps b{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:rgba(148,163,184,.16); color:#cbd5e1; font-size:.72rem; }
.payment-steps > i{ height:2px; background:rgba(148,163,184,.18); }
.payment-steps > div.active{ color:#93c5fd; } .payment-steps > div.active b{ background:#2f7cff; color:#fff; }
.payment-steps > div.done b{ background:#16a34a; color:#fff; }

/* ── Pago confirmado: requiere que el usuario presione "Continuar" ──
   Antes esta pantalla avanzaba sola apenas se detectaba el pago —
   el iframe de éxito de APay desaparecía de inmediato sin que la persona
   alcanzara a verlo. Ahora se queda aquí hasta el clic. */
.payment-result-icon{
    width:76px; height:76px;
    margin:.25rem auto 1rem;
    display:grid; place-items:center;
    border-radius:50%;
    font-size:2rem;
    color:#86efac;
    background:rgba(22,163,74,.16);
    box-shadow:0 0 0 8px rgba(22,163,74,.06);
    animation:paymentResultPop .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes paymentResultPop{
    from{ opacity:0; transform:scale(.7); }
    to{ opacity:1; transform:scale(1); }
}

/* ── Icono de acceso (cuenta de prueba lista) — reemplaza el cohete por
   la puerta de la marca TuSala: coherente con el logo, sin animación
   infantil. Pulso suave, no rebote. ── */
.trial-access-icon{
    width:84px; height:84px;
    margin:0 auto;
    display:grid; place-items:center;
    border-radius:50%;
    font-size:2.4rem;
    color:#7dd3fc;
    background:rgba(56,189,248,.12);
    box-shadow:0 0 0 0 rgba(56,189,248,.28);
    animation:trialAccessPulse 2.6s ease-out infinite;
}
@keyframes trialAccessPulse{
    0%{ box-shadow:0 0 0 0 rgba(56,189,248,.28); }
    70%{ box-shadow:0 0 0 14px rgba(56,189,248,0); }
    100%{ box-shadow:0 0 0 0 rgba(56,189,248,0); }
}
@media (prefers-reduced-motion: reduce){
    .payment-orbit span, .trial-access-icon, .payment-result-icon{ animation:none; }
}


/* El flujo SaaS se presenta en tres etapas: datos, pago y acceso al panel. */
#wpStep5, #wpConn4 { display: none; }

/* ── Paso 0: elección de tipo de cuenta (prueba vs. definitiva) ── */
.trial-offer-banner{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:1rem 1.15rem;
    margin-bottom:1.25rem;
    border:1px solid rgba(56,189,248,.34);
    border-radius:14px;
    background:linear-gradient(135deg, rgba(14,116,144,.22), rgba(15,23,42,.55));
}
.trial-offer-text{ display:contents; }
.trial-offer-banner > i,
.trial-offer-text > i{
    flex:0 0 auto;
    margin-top:.15rem;
    font-size:1.3rem;
    color:#38bdf8;
}
.trial-offer-banner strong{ color:#f8fafc; }

.trial-offer-actions-standalone{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}
.trial-offer-choice{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.4rem;
    padding:1.35rem 1rem;
    border:1.5px solid rgba(148,163,184,.34);
    border-radius:16px;
    background:rgba(15,23,42,.48);
    color:#e2e8f0;
    font-size:.92rem;
    font-weight:700;
    transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.trial-offer-choice i{ font-size:1.5rem; color:#7dd3fc; }
.trial-offer-choice:hover{
    border-color:#38bdf8;
    background:rgba(14,116,144,.22);
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(2,132,199,.16);
}
#chooseDefinitiveBtn i{ color:#a5b4fc; }
@media(max-width:576px){
    .trial-offer-actions-standalone{ grid-template-columns:1fr; }
}

.trial-plan-note{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.7rem .9rem;
    border:1px solid rgba(56,189,248,.3);
    border-radius:10px;
    background:rgba(14,116,144,.14);
    color:#bae6fd;
    font-size:.82rem;
}
.trial-plan-note i{ color:#38bdf8; }

/* ── OTP: verificación de correo ── */
.otp-input{
    width:3rem;
    height:3.4rem;
    text-align:center;
    font-size:1.4rem;
    font-weight:700;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.08);
    color:#f8fafc;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.otp-input:focus{
    outline:none;
    border-color:rgba(59,130,246,.75);
    box-shadow:0 0 0 .2rem rgba(59,130,246,.18);
}
.otp-input.field-invalid{
    border-color:#f43f5e;
    box-shadow:0 0 0 .2rem rgba(244,63,94,.22);
}
@media (max-width:400px){ .otp-input{ width:2.6rem; height:3rem; font-size:1.2rem; } }

/* ── OTP: escenario de animación de verificación ── */
.otp-stage{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:3.4rem;
    margin-bottom:1rem;
}
.otp-inputs-row{
    transition:opacity .3s ease;
}
.otp-input-wrap{
    position:relative;
    z-index:2;
    will-change:transform;
}
.otp-input-wrap.otp-hide{ opacity:0; }
.otp-stage.otp-collapse .otp-inputs-row{ opacity:0; pointer-events:none; }
/* Panel de error OTP: centrado, con icono y presentación cuidada. */
.otp-error-panel{
    text-align:center;
    background:rgba(244,63,94,.08);
    border:1px solid rgba(244,63,94,.35);
    border-radius:0.6rem;
    color:#fda4af;
    font-weight:500;
}
.otp-error-panel i{
    vertical-align:-0.1em;
}
/* Durante la animación el escenario crece para alojar el círculo de dígitos. */
.otp-stage.otp-animating{
    min-height:14.5rem;
    min-width:14.5rem;
}

/* Anillo circular dibujado por segmentos (SVG, detrás de los dígitos). */
.otp-connectors{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}
.otp-connector-arc{
    fill:none;
    stroke:#38bdf8;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0;
}

.otp-result-circle{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:4rem; height:4rem;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:1.7rem;
    line-height:1;
    z-index:3;
}
/* Fase 1: girando (spinner) mientras el código viaja */
.otp-result-circle.otp-spinning{
    background:rgba(14,165,233,.12);
    border:.32rem solid rgba(14,165,233,.2);
    border-top-color:#38bdf8;
    animation:otp-rotate .7s linear infinite;
    box-shadow:0 .3rem 1.2rem rgba(14,165,233,.25);
}
/* Fase 2: círculo azul unificado con pulso */
.otp-result-circle.otp-pulsing{
    background:radial-gradient(circle at 35% 30%, #38bdf8, #0284c7 70%);
    box-shadow:0 0 0 .55rem rgba(14,165,233,.2), 0 .3rem 1.2rem rgba(14,165,233,.4);
    animation:otp-pulse 1s ease-in-out infinite;
}
/* Resultado: anillo e icono SVG que se dibujan con un pop profesional. */
.otp-result-circle.otp-ok,
.otp-result-circle.otp-error{
    background:transparent;
    animation:otp-pop .45s cubic-bezier(.34,1.56,.64,1);
    width:4.2rem; height:4.2rem;
}
.otp-result-circle.otp-ok{
    filter:drop-shadow(0 .3rem .8rem rgba(16,185,129,.45));
}
.otp-result-circle.otp-error{
    filter:drop-shadow(0 .3rem .8rem rgba(244,63,94,.45));
}
.otp-icon{
    width:100%;
    height:100%;
    display:block;
}
.otp-icon-ring{
    animation:otp-draw .55s ease-out forwards;
}
.otp-icon-check{
    animation:otp-draw .45s ease-out .25s forwards;
}
.otp-icon-x{
    animation:otp-draw .4s ease-out .3s forwards;
}
@keyframes otp-draw{
    to{ stroke-dashoffset:0; }
}
/* Reversa tras error: oculta el icono para reintentar. */
.otp-result-circle.otp-reset{
    background:transparent;
    opacity:0;
    animation:none;
}
@keyframes otp-rotate{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes otp-pulse{
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-50%) scale(1.14); }
}
@keyframes otp-pop{
    0%{ transform:translate(-50%,-50%) scale(.6); opacity:.5; }
    60%{ transform:translate(-50%,-50%) scale(1.12); }
    100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}

@media(max-width:575.98px){
    .wizard-step-item{min-width:0; flex:1 1 0;}
    .wizard-label{max-width:56px; font-size:.61rem;}
    .wizard-connector{flex:0 1 20px;}
    .wizard-dot{width:30px; height:30px;}
    .wizard-connector{margin-top:14px;}
    .wizard-plan-inner{padding:1rem;}
    .wizard-apay-frame{min-height:470px;}
}

/* ===========================================================================
   Escala responsive de la landing
   Mantiene intacta la composicion de escritorio (>= 992px).
   =========================================================================== */
@media (max-width:991.98px){
    html{
        scroll-padding-top:82px;
        overflow-x:hidden;
    }

    body{
        overflow-x:hidden;
    }

    .custom-navbar{
        padding:.55rem 0;
    }

    .custom-navbar .logo{
        height:46px;
    }

    .navbar-toggler{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        width:46px;
        height:42px;
        padding:0;
        overflow:hidden;
        border:1px solid rgba(148,163,184,.3);
        border-radius:12px;
        background:linear-gradient(145deg, rgba(15,34,67,.92), rgba(8,20,43,.96));
        box-shadow:0 8px 20px rgba(2,6,23,.24), inset 0 1px rgba(255,255,255,.06);
        transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
    }

    .navbar-toggler:hover,
    .navbar-toggler:focus-visible,
    .navbar-toggler[aria-expanded="true"]{
        border-color:rgba(96,165,250,.72);
        background:linear-gradient(145deg, rgba(30,64,175,.48), rgba(8,27,57,.98));
        box-shadow:0 0 0 3px rgba(59,130,246,.12), 0 10px 24px rgba(2,6,23,.3);
    }

    .navbar-toggler:focus{
        box-shadow:0 0 0 3px rgba(59,130,246,.16);
    }

    .hamburger-line{
        display:block;
        width:20px;
        height:2px;
        border-radius:999px;
        background:#cbd5e1;
        transform-origin:center;
        transition:transform .34s cubic-bezier(.68,-.35,.27,1.35), opacity .2s ease, width .25s ease, background .25s ease;
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-line{
        background:#bfdbfe;
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2){
        width:0;
        opacity:0;
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .navbar-collapse{
        margin-top:.65rem;
        padding:.65rem;
        border:1px solid rgba(96,165,250,.2);
        border-radius:16px;
        background:linear-gradient(160deg, rgba(8,23,49,.98), rgba(4,13,31,.99));
        box-shadow:0 20px 42px rgba(2,6,23,.42);
        backdrop-filter:blur(18px);
    }

    .navbar-nav{
        gap:.28rem;
    }

    .navbar-collapse .nav-item{
        width:100%;
        margin:0 !important;
    }

    .navbar-collapse .nav-link{
        position:relative;
        display:flex;
        align-items:center;
        min-height:42px;
        margin:0;
        padding:.68rem .85rem;
        overflow:hidden;
        border:1px solid transparent;
        border-radius:11px;
        color:#cbd5e1 !important;
        font-size:.84rem;
        opacity:0;
        transform:translateY(-6px);
        transition:opacity .26s ease, transform .26s ease, color .22s ease, background .22s ease, border-color .22s ease;
    }

    .navbar-collapse.show .nav-link,
    .navbar-collapse.collapsing .nav-link{
        opacity:1;
        transform:translateY(0);
    }

    .navbar-collapse .nav-item:nth-child(2) .nav-link{transition-delay:.025s;}
    .navbar-collapse .nav-item:nth-child(3) .nav-link{transition-delay:.05s;}
    .navbar-collapse .nav-item:nth-child(4) .nav-link{transition-delay:.075s;}
    .navbar-collapse .nav-item:nth-child(5) .nav-link{transition-delay:.1s;}
    .navbar-collapse .nav-item:nth-child(6) .nav-link{transition-delay:.125s;}
    .navbar-collapse .nav-item:nth-child(7) .nav-link{transition-delay:.15s;}

    .navbar-collapse .nav-link::before{
        content:"";
        width:6px;
        height:6px;
        margin-right:.7rem;
        border-radius:50%;
        background:#475569;
        box-shadow:0 0 0 0 rgba(59,130,246,0);
        transition:background .22s ease, box-shadow .22s ease;
    }

    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link.active{
        color:#eff6ff !important;
        border-color:rgba(96,165,250,.24);
        background:rgba(59,130,246,.12);
    }

    .navbar-collapse .nav-link:hover::before,
    .navbar-collapse .nav-link.active::before{
        background:#60a5fa;
        box-shadow:0 0 0 4px rgba(59,130,246,.13);
    }

    .navbar-collapse .btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-height:44px;
        margin-top:.35rem;
        border-radius:11px;
        box-shadow:0 10px 22px rgba(37,99,235,.2);
    }

    .custom-navbar.nav-open{
        background:rgba(3,7,27,.98) !important;
        box-shadow:0 18px 42px rgba(2,6,23,.42) !important;
    }

    section{
        padding-block:64px;
    }

    .hero-content{
        max-width:760px;
        margin-inline:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-actions .btn{
        flex:0 0 auto;
        min-width:0;
        text-align:center;
        white-space:nowrap;
    }

    .hero-notes{
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        width:100%;
        max-width:620px;
        margin-inline:auto;
        gap:.65rem !important;
    }

    .hero-notes span{
        justify-content:center;
        min-width:0;
        padding:.48rem .55rem;
        font-size:.76rem;
        white-space:nowrap;
    }

    .hero-media{
        width:min(100%, 720px);
        margin:1.75rem auto 0;
    }

    .section-title{
        font-size:clamp(1.85rem, 4.5vw, 2.45rem);
    }

    .feature-card.p-4,
    .pricing-card,
    .about-card,
    .novedad-main,
    .novedad-item,
    .closing-shell{
        padding:1.45rem !important;
    }

    .novedad-item{
        grid-column:span 6;
    }

    #como-funciona .row.g-4{
        --bs-gutter-x:.9rem;
        --bs-gutter-y:.9rem;
    }

    #como-funciona .row.g-4 > [class*="col-"]{
        flex:0 0 auto;
        width:50%;
    }
}

@media (max-width:767.98px){
    body{
        font-size:.9rem;
    }

    section,
    section.py-5,
    section.py-10{
        padding-top:40px !important;
        padding-bottom:40px !important;
    }

    .container,
    .container-fluid{
        padding-left:1.15rem !important;
        padding-right:1.15rem !important;
    }

    .hero-section{
        padding-top:100px !important;
        padding-bottom:30px !important;
    }

    .hero-content{
        margin-top:.65rem !important;
    }

    .hero-badge{
        margin-top:.35rem;
        padding:.48rem .72rem;
        font-size:.7rem;
        letter-spacing:.015em;
    }

    .hero-title{
        margin-bottom:1rem !important;
    }

    .hero-title,
    .hero-typed{
        font-size:clamp(1.55rem, 7.2vw, 1.85rem);
        line-height:1.12;
        letter-spacing:-.035em;
    }

    .hero-typed-wrapper{
        display:flex;
        width:100%;
        min-height:3.35rem;
        align-items:center;
    }

    .hero-typed{
        width:100%;
        overflow-wrap:anywhere;
    }

    .hero-copy{
        max-width:35ch;
        margin-inline:auto;
        margin-bottom:1rem !important;
        font-size:.86rem;
        line-height:1.62;
    }

    .hero-actions{
        flex-wrap:wrap !important;
        width:100%;
        max-width:100%;
        margin:0 auto 1rem !important;
        gap:.65rem !important;
    }

    .hero-actions .btn{
        flex:0 0 auto;
        min-width:0;
        padding:.66rem 1rem;
        border-radius:10px;
        font-size:.9rem;
        white-space:nowrap;
    }

    .hero-notes{
        gap:.38rem !important;
        max-width:none;
        margin-inline:auto;
    }

    .hero-notes span{
        padding:.4rem .2rem;
        border-radius:10px;
        font-size:clamp(.54rem, 2.45vw, .68rem);
        line-height:1.15;
    }

    .hero-media{
        gap:.85rem;
        margin-top:1rem;
    }

    .hero-media .interactive-logo{
        margin-top:.35rem;
        margin-bottom:.4rem !important;
        padding:1rem !important;
        border-radius:16px !important;
    }

    .hero-media .interactive-logo video{
        max-height:230px;
        object-fit:contain;
    }

    .logo-label{
        margin-top:.55rem;
        font-size:.76rem;
    }

    .hero-panel{
        min-height:0;
        padding:1.1rem;
        border-radius:16px;
        text-align:left;
    }

    .hero-panel h5{
        margin-bottom:.65rem;
        font-size:.94rem;
    }

    .hero-panel-list{
        margin-top:.65rem;
        font-size:.8rem;
        line-height:1.5;
    }

    .hero-panel-list li{
        margin-bottom:.55rem;
    }

    .section-label{
        font-size:.67rem;
        letter-spacing:.13em;
    }

    .section-title,
    .espacios-section h2{
        font-size:clamp(1.48rem, 6.2vw, 1.78rem);
        line-height:1.16;
    }

    .section-copy,
    .espacios-section p,
    .novedad-main p,
    .novedad-item p,
    .feature-card p,
    .about-card p,
    .closing-shell p,
    .closing-point{
        font-size:.82rem;
        line-height:1.58;
    }

    .feature-card.p-4,
    .pricing-card,
    .about-card,
    .novedad-main,
    .novedad-item,
    .closing-shell,
    .closing-card{
        padding:1.05rem !important;
        border-radius:16px;
    }

    .feature-card .feature-icon{
        font-size:1.45rem !important;
    }

    .feature-card h5,
    .novedad-item h5,
    .about-card h3,
    .closing-card h5{
        margin-top:.65rem !important;
        margin-bottom:.42rem;
        font-size:.94rem;
    }

    .novedad-main h4{
        font-size:1.08rem;
    }

    .novedades-grid{
        gap:.72rem;
    }

    .novedad-main{
        grid-column:span 12;
    }

    .novedad-item{
        grid-column:span 6;
        min-height:155px;
    }

    #impacto > .container > .row.g-4,
    #como-funciona .row.g-4,
    #espacios .row.g-3{
        --bs-gutter-x:.72rem;
        --bs-gutter-y:.72rem;
    }

    #impacto > .container > .row.g-4 > [class*="col-"],
    #como-funciona .row.g-4 > [class*="col-"],
    #espacios .row.g-3 > [class*="col-"]{
        flex:0 0 auto;
        width:50%;
    }

    #impacto .feature-card,
    #como-funciona .feature-card,
    #espacios .row.g-3 .feature-card{
        min-height:100%;
    }

    .novedad-tags{
        gap:.4rem;
    }

    .novedad-tags span,
    .novedad-step{
        font-size:.68rem;
    }

    .pricing-card-head h5{
        font-size:1.06rem;
    }

    .price-value{
        font-size:2.15rem;
    }

    .price-value span,
    .price-subtext,
    .pricing-list,
    .pricing-card .btn{
        font-size:.8rem;
    }

    .pricing-list li{
        padding-left:1.55rem;
        margin-bottom:.5rem;
    }

    .pricing-commission-note{
        margin-top:.65rem;
        padding:.45rem .65rem;
        font-size:.72rem;
    }

    .pricing-commission-badge{
        font-size:.92rem;
    }

    .commission-highlight{
        flex-direction:column;
        align-items:flex-start;
        gap:.75rem;
        margin-bottom:2rem;
        padding:1.1rem;
    }

    .commission-highlight-icon{
        width:44px;
        height:44px;
        font-size:1.2rem;
    }

    .commission-highlight-title{
        font-size:.98rem;
    }

    .commission-highlight-text{
        font-size:.85rem;
    }

    .btn:not(.navbar-toggler){
        padding:.66rem 1rem;
        font-size:.84rem;
    }

    .form-label,
    .form-check-label,
    .form-text,
    .form-message{
        font-size:.78rem;
    }

    .form-control,
    .form-select{
        min-height:42px;
        padding:.58rem .72rem;
        font-size:.82rem;
        border-radius:10px;
    }

    .registro-card .card-body{
        padding:1rem !important;
    }

    .wizard-panel-title{
        font-size:1.05rem;
    }

    .footer-tusala,
    .footer-tusala p,
    .footer-tusala a{
        font-size:.78rem;
    }

    .footer-tusala .footer-title{
        font-size:.88rem;
    }
}

@media (max-width:380px){
    .hero-actions{
        max-width:300px;
    }

    .hero-actions .btn{
        padding-inline:.48rem;
        font-size:.78rem;
    }

    .hero-notes span{
        font-size:.54rem;
    }

    .novedad-item{
        min-height:165px;
    }
}