@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;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%;}
}


/* Redes sociales oficiales (footer y modal de contacto). Las rellena
   renderizarRedesSociales() en script.js; --brand/--on-brand vienen del backend. */
.social-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.social-icon-link {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 50%;
    color: #cbd5e1;
    background: rgba(30, 41, 59, .7);
    text-decoration: none;
    animation: socialIconIn .42s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
    transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
}
.social-icon-link i {
    font-size: 1.05rem;
    line-height: 1;
}
.social-icon-link:hover,
.social-icon-link:focus-visible {
    color: var(--on-brand, #fff);
    background: var(--brand, #2563eb);
    border-color: var(--brand, #2563eb);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
}
.social-icon-link:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
}
@keyframes socialIconIn {
    from { opacity: 0; transform: translateY(6px) scale(.85); }
    to { opacity: 1; transform: none; }
}

/* Modal de contacto: tarjetas de canal + redes sociales al pie */
.contact-modal-dialog {
    max-width: 460px;
    padding-inline: .75rem;
}
.contact-modal-content {
    overflow: hidden;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% -20%, rgba(59, 130, 246, .28), transparent 55%),
        linear-gradient(170deg, rgba(9, 16, 35, .99), rgba(12, 27, 52, .98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.contact-modal-header {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.5rem 1.5rem .4rem;
}
.contact-modal-badge {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #6366f1);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .35);
    font-size: 1.35rem;
}
.contact-modal-heading {
    flex: 1 1 auto;
    min-width: 0;
}
.contact-modal-heading .modal-title {
    margin: .1rem 0 .2rem;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}
.contact-modal-heading p {
    margin: 0;
    color: rgba(203, 213, 225, .85);
    font-size: .88rem;
    line-height: 1.5;
}
.contact-modal-header .btn-close {
    flex: 0 0 auto;
    margin: .1rem 0 0;
    opacity: .7;
}
.contact-modal-header .btn-close:hover {
    opacity: 1;
}
.contact-modal-body {
    padding: 1.1rem 1.5rem 1.5rem;
}
.contact-channels {
    display: grid;
    gap: .65rem;
}
.contact-channel {
    --channel: #3b82f6;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem .95rem;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 15px;
    background: rgba(15, 30, 56, .7);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contact-channel.d-none {
    display: none;
}
.channel-whatsapp { --channel: #25d366; }
.channel-email { --channel: #3b82f6; }
.channel-phone { --channel: #a78bfa; }
.channel-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    color: var(--channel);
    background: color-mix(in srgb, var(--channel) 16%, transparent);
    font-size: 1.25rem;
    transition: color .2s ease, background-color .2s ease;
}
.channel-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}
.channel-text strong {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
}
.channel-text small {
    overflow: hidden;
    color: rgba(203, 213, 225, .78);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.channel-arrow {
    color: rgba(203, 213, 225, .5);
    font-size: .95rem;
    transition: color .2s ease, transform .2s ease;
}
.contact-channel:hover,
.contact-channel:focus-visible {
    color: #fff;
    border-color: color-mix(in srgb, var(--channel) 60%, transparent);
    background: color-mix(in srgb, var(--channel) 10%, rgba(15, 30, 56, .9));
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
}
.contact-channel:hover .channel-icon,
.contact-channel:focus-visible .channel-icon {
    color: #fff;
    background: var(--channel);
}
.contact-channel:hover .channel-arrow,
.contact-channel:focus-visible .channel-arrow {
    color: #fff;
    transform: translate(2px, -2px);
}
.contact-channel:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}
@media (max-width: 420px) {
    .contact-modal-header { padding: 1.2rem 1.1rem .3rem; }
    .contact-modal-body { padding: 1rem 1.1rem 1.2rem; }
    .contact-modal-badge { width: 42px; height: 42px; flex-basis: 42px; font-size: 1.15rem; }
}

.contact-social {
    margin-top: 1.4rem;
}
.contact-social-divider {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
    color: rgba(203, 213, 225, .78);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.contact-social-divider::before,
.contact-social-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(148, 163, 184, .28);
}
.contact-social .social-icon-row {
    justify-content: center;
    gap: .65rem;
}
.contact-social .social-icon-link {
    width: 44px;
    height: 44px;
    /* En el modal se muestran con su color de marca desde el inicio para que
       se reconozcan de inmediato. */
    color: var(--on-brand, #fff);
    background: var(--brand, #2563eb);
    border-color: color-mix(in srgb, var(--on-brand, #fff) 18%, transparent);
}
.contact-social .social-icon-link i {
    font-size: 1.15rem;
}


@media (prefers-reduced-motion: reduce) {
    .social-icon-link,
    .contact-channel,
    .channel-arrow {
        animation: none;
        transition: none;
    }
}

.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;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.legal-modal-content .modal-header{
    border-bottom: 1px solid rgba(148,163,184,.15) !important;
    padding: 1.25rem 1.75rem;
}

.legal-modal-content .modal-title{
    color:#93c5fd;
    font-size: 1.25rem;
    font-weight: 700;
}

.legal-modal-content .modal-body{
    padding: 1.5rem 1.75rem;
    max-height: 70vh;
    overflow-y: auto;
}

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

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

/* Documento Legal: Estilos Compartidos (Modal y Vista Standalone) */
.legal-document {
    color: #e2e8f0;
    font-size: 0.96rem;
    line-height: 1.7;
}

.legal-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 9999px;
    font-size: 0.82rem;
    color: #93c5fd;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.legal-meta-badge i {
    color: #60a5fa;
    font-size: 0.95rem;
}

.legal-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.legal-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.legal-section h3 {
    font-size: 1.18rem;
    font-weight: 700;
    color: #93c5fd;
    margin-bottom: 0.85rem;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.legal-section p {
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.85rem;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section strong {
    color: #f8fafc;
}

.legal-list {
    list-style: none;
    padding-left: 0;
    margin: 0.85rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legal-list li {
    position: relative;
    padding-left: 1.5rem;
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.95rem;
    line-height: 1.6;
}

.legal-list li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.legal-highlight-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 12px;
    margin: 1rem 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #e2e8f0;
}

.legal-highlight-box i {
    font-size: 1.25rem;
    color: #60a5fa;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.legal-alert-box {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}

.legal-alert-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1rem;
    color: #fbbf24;
    margin-bottom: 0.85rem;
}

.legal-alert-title i {
    font-size: 1.2rem;
    color: #f59e0b;
}

.legal-alert-box .legal-list {
    margin: 0;
}

.legal-alert-box .legal-list li::before {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.legal-note {
    font-size: 0.88rem;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    padding: 0.65rem 1rem;
    border-radius: 8px;
    border-left: 3px solid #94a3b8;
    margin-top: 0.75rem;
}

.legal-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.legal-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.legal-contact-item:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(30, 41, 59, 0.7);
    transform: translateY(-2px);
    color: inherit;
}

.legal-contact-item i {
    font-size: 1.6rem;
    color: #60a5fa;
    transition: transform 0.2s ease;
}

.legal-contact-item:hover i {
    transform: scale(1.1);
}

.contact-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.legal-contact-item a,
.legal-contact-item .contact-value {
    color: #93c5fd;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.legal-contact-item:hover a,
.legal-contact-item:hover .contact-value {
    color: #bfdbfe;
    text-decoration: underline;
}

/* Modal Legal Emergente (para visualización dentro de la landing sin salir del formulario) */
.legal-modal-content {
    background:
        radial-gradient(circle at 50% -20%, rgba(59, 130, 246, .22), transparent 55%),
        linear-gradient(170deg, rgba(9, 16, 35, .98), rgba(12, 27, 52, .98));
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    color: #e2e8f0;
    backdrop-filter: blur(16px);
}

.legal-modal-content .modal-header {
    border-bottom: 1px solid rgba(148, 163, 184, .15) !important;
    padding: 1.25rem 1.75rem;
}

.legal-modal-content .modal-title {
    color: #f8fafc;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legal-modal-content .modal-body {
    padding: 1.5rem 1.75rem 2rem;
    max-height: 72vh;
    overflow-y: auto;
}

/* Scrollbar personalizado para el modal legal */
.legal-modal-content .modal-body::-webkit-scrollbar {
    width: 8px;
}
.legal-modal-content .modal-body::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
}
.legal-modal-content .modal-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}
.legal-modal-content .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Vista de Página Independiente en /legal/ */
.legal-page-body {
    background: radial-gradient(circle at 10% 10%, rgba(59,130,246,.12), transparent 40%),
                radial-gradient(circle at 90% 90%, rgba(14,165,233,.08), transparent 40%),
                linear-gradient(180deg, #020617 0%, #06112b 50%, #020617 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.legal-standalone-nav {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.legal-standalone-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.legal-standalone-nav .logo {
    height: 38px;
    width: auto;
}

.btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 9999px;
    padding: 0.5rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-back-home:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    color: #ffffff;
    transform: translateX(-3px);
}

.legal-hero {
    padding: 3rem 0 2rem;
    text-align: center;
}

.legal-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.legal-breadcrumbs a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-breadcrumbs a:hover {
    color: #60a5fa;
}

.legal-breadcrumbs span.sep {
    color: rgba(148, 163, 184, 0.4);
}

.legal-hero h1 {
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.legal-hero-subtitle {
    color: #94a3b8;
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto;
}

.legal-page-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1.25rem 4rem;
    flex-grow: 1;
}

.legal-card-wrapper {
    background: linear-gradient(175deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 24, 53, 0.8) 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    .legal-card-wrapper {
        padding: 1.5rem;
        border-radius: 14px;
    }
}

.legal-nav-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.legal-nav-tab {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #94a3b8;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: all 0.2s ease;
}

.legal-nav-tab:hover {
    color: #e2e8f0;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.legal-nav-tab.active {
    color: #ffffff;
    background: #2563eb;
    border-color: #3b82f6;
    font-weight: 600;
}

.legal-page-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    padding: 2rem 0;
    background: #020617;
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
}

.legal-page-footer a {
    color: #94a3b8;
    text-decoration: none;
}

.legal-page-footer a:hover {
    color: #3b82f6;
}


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{
        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;
    }


    .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;
    }
}

@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;
    }
}

/* =========================================================
   Barra de navegación (rediseño 2026-10)
   - Laptop/escritorio: logo a la izquierda, cápsula centrada
     (Inicio · Cómo funciona · Beneficios · Planes · Contacto ·
     Marketplace · Acceso admin) y "Regístrate" a la derecha.
     La disposición es la misma arriba y al hacer scroll; al
     bajar solo aparece el fondo de la barra (.is-scrolled).
   - Tablet/teléfono: barra flotante y panel desplegable con
     íconos, acciones agrupadas y fondo atenuado.
   ========================================================= */
.custom-navbar{
    padding-block:.75rem;
    background:transparent;
    border-bottom:1px solid transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:background .3s ease, box-shadow .3s ease, padding .3s ease, border-color .3s ease;
}
.custom-navbar.is-scrolled{
    padding-block:.5rem;
    background:rgba(3,7,27,.9);
    border-bottom-color:rgba(255,255,255,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.custom-navbar .logo{
    height:42px;
}

/* Botones de acción (compartidos por ambas vistas) */
.nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:40px;
    padding:.5rem 1rem;
    border:1px solid transparent;
    border-radius:999px;
    font-size:.88rem;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    transition:color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-cta i{ font-size:1rem; line-height:1; }
.nav-cta:focus-visible{ outline:2px solid #93c5fd; outline-offset:3px; }
.nav-cta-market{
    color:#e0ecff;
    border-color:rgba(96,165,250,.35);
    background:linear-gradient(135deg, rgba(37,99,235,.2), rgba(99,102,241,.16));
}
.nav-cta-market:hover{
    color:#fff;
    border-color:rgba(96,165,250,.7);
    background:linear-gradient(135deg, rgba(37,99,235,.34), rgba(99,102,241,.28));
}
.nav-cta-market .nav-cta-external{ font-size:.72rem; opacity:.7; transition:transform .2s ease, opacity .2s ease; }
.nav-cta-market:hover .nav-cta-external{ opacity:1; transform:translate(2px,-2px); }
.nav-cta-ghost{ color:rgba(226,232,240,.88); }
.nav-cta-ghost:hover{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.nav-cta-primary{
    color:#fff;
    background:linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow:0 8px 20px rgba(37,99,235,.32);
}
.nav-cta-primary:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 12px 26px rgba(37,99,235,.42); }

/* ---------- Laptop y escritorio ---------- */
@media (min-width: 992px){
    .custom-navbar > .container{
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
        column-gap:1rem;
    }
    .custom-navbar .navbar-brand{ justify-self:start; margin:0; }
    .custom-navbar.navbar-expand-lg .navbar-collapse{ display:contents !important; }
    .nav-center{
        grid-column:2;
        display:flex;
        align-items:center;
        gap:.3rem;
        padding:.3rem;
        border:1px solid rgba(255,255,255,.12);
        border-radius:999px;
        background:rgba(8,18,40,.45);
        box-shadow:0 14px 36px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.06);
        backdrop-filter:blur(16px) saturate(140%);
        -webkit-backdrop-filter:blur(16px) saturate(140%);
        transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    .custom-navbar.is-scrolled .nav-center{
        background:rgba(255,255,255,.04);
        border-color:rgba(255,255,255,.09);
        box-shadow:none;
    }
    .nav-menu-label{ display:none; }
    .custom-navbar .nav-links{
        position:relative;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:.1rem;
    }
    .custom-navbar .nav-links .nav-item{ position:relative; z-index:1; margin:0; }
    .custom-navbar .nav-links .nav-link{
        display:inline-flex;
        align-items:center;
        margin:0;
        padding:.5rem .95rem;
        border-radius:999px;
        color:rgba(226,232,240,.78) !important;
        font-size:.9rem;
        font-weight:500;
        line-height:1.2;
        background:transparent;
        transition:color .2s ease, background .2s ease;
    }
    .custom-navbar .nav-links .nav-link:hover{ color:#fff !important; background:rgba(255,255,255,.06); }
    .custom-navbar .nav-links .nav-link.active{ color:#fff !important; background:transparent; }
    .custom-navbar .nav-links:not(:has(.nav-indicator.is-visible)) .nav-link.active{ background:rgba(59,130,246,.22); }
    .nav-indicator{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        z-index:0;
        width:0;
        border-radius:999px;
        background:linear-gradient(135deg, rgba(59,130,246,.35), rgba(99,102,241,.3));
        box-shadow:inset 0 0 0 1px rgba(147,197,253,.28);
        opacity:0;
        pointer-events:none;
        transition:transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    }
    .nav-indicator.is-visible{ opacity:1; }
    .nav-divider{ width:1px; height:22px; margin-inline:.25rem; background:rgba(255,255,255,.14); }
    .nav-actions{ display:flex; align-items:center; gap:.3rem; }
    .nav-register{ grid-column:3; justify-self:end; }
}

/* Laptops angostas: todo sigue en una línea, más compacto */
@media (min-width: 992px) and (max-width: 1279.98px){
    .custom-navbar .logo{ height:36px; }
    .custom-navbar .nav-links .nav-link{ padding:.48rem .7rem; font-size:.84rem; }
    .nav-cta{ padding:.48rem .8rem; font-size:.82rem; }
    .nav-cta-market .nav-cta-external{ display:none; }
}
@media (min-width: 992px) and (max-width: 1139.98px){
    .nav-cta-ghost{ width:38px; min-height:38px; padding:0; }
    .nav-cta-ghost span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
    .custom-navbar .nav-links .nav-link{ padding:.46rem .6rem; }
}

/* ---------- Tablet y teléfono: menú hamburguesa ---------- */
@media (max-width: 991.98px){
    .custom-navbar,
    .custom-navbar.is-scrolled{
        padding-block:.6rem;
        background:transparent;
        border-bottom-color:transparent;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
    .custom-navbar.navbar.nav-open{ background:transparent !important; box-shadow:none !important; }
    .custom-navbar > .container{
        position:relative;
        width:calc(100% - 24px);
        max-width:720px;
        padding:.45rem .5rem .45rem .9rem;
        border:1px solid rgba(255,255,255,.12);
        border-radius:18px;
        background:rgba(8,18,40,.5);
        backdrop-filter:blur(16px) saturate(140%);
        -webkit-backdrop-filter:blur(16px) saturate(140%);
        transition:background .3s ease, box-shadow .3s ease;
    }
    .custom-navbar.is-scrolled > .container,
    .custom-navbar.nav-open > .container{
        background:rgba(6,14,32,.94);
        box-shadow:0 12px 30px rgba(2,6,23,.38);
    }
    .custom-navbar .logo{ height:38px; }

    /* Botón hamburguesa (líneas que se convierten en X) */
    .custom-navbar .navbar-toggler{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        width:44px;
        height:42px;
        padding:0;
        border:1px solid rgba(148,163,184,.28);
        border-radius:12px;
        background:rgba(15,34,67,.75);
        box-shadow:none;
        transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
    }
    .custom-navbar .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(59,130,246,.22); }
    .custom-navbar .navbar-toggler[aria-expanded="true"]{
        border-color:rgba(96,165,250,.7);
        background:rgba(30,64,175,.45);
    }
    .custom-navbar .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;
    }
    .custom-navbar .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .custom-navbar .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2){ width:0; opacity:0; }
    .custom-navbar .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    /* Panel desplegable: tarjeta flotante bajo la barra */
    .custom-navbar .navbar-collapse{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;
        margin:0;
        padding:.85rem;
        border:1px solid rgba(96,165,250,.22);
        border-radius:20px;
        background:linear-gradient(165deg, rgba(9,22,48,.985), rgba(4,12,30,.99));
        box-shadow:0 24px 50px rgba(2,6,23,.55);
        max-height:calc(100dvh - 96px);
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .nav-menu-label{
        display:block;
        margin:.1rem .35rem .45rem;
        color:rgba(148,163,184,.85);
        font-size:.66rem;
        font-weight:700;
        letter-spacing:.12em;
        text-transform:uppercase;
    }
    .custom-navbar .nav-links{
        display:grid;
        gap:.25rem;
    }
    .custom-navbar .nav-links .nav-item{ width:100%; margin:0 !important; }
    /* Solo texto: sobrio y fácil de leer; el activo se marca con un fondo suave */
    .custom-navbar .nav-links .nav-link{
        display:flex;
        align-items:center;
        min-height:48px;
        margin:0;
        padding:.7rem .95rem;
        border:1px solid transparent;
        border-radius:12px;
        color:#cbd5e1 !important;
        font-size:.95rem;
        font-weight:500;
        background:transparent;
    }
    .custom-navbar .nav-links .nav-link::before,
    .custom-navbar .nav-links .nav-link::after{ content:none; }
    .custom-navbar .nav-links .nav-link:hover{
        color:#fff !important;
        background:rgba(255,255,255,.05);
    }
    .custom-navbar .nav-links .nav-link.active{
        color:#fff !important;
        font-weight:600;
        border-color:rgba(96,165,250,.22);
        background:rgba(59,130,246,.14);
    }
    .nav-indicator{ display:none; }
    .nav-divider{
        display:block;
        height:1px;
        margin:.75rem .2rem;
        background:rgba(148,163,184,.16);
    }
    .nav-actions{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:.5rem;
    }
    .nav-actions .nav-cta{ min-height:46px; border-radius:14px; }
    .nav-cta-ghost{ border-color:rgba(148,163,184,.25); background:rgba(255,255,255,.03); }
    .nav-register{
        display:flex;
        width:100%;
        min-height:48px;
        margin-top:.5rem;
        border-radius:14px;
        font-size:.95rem;
    }

    /* Fondo atenuado detrás del menú abierto (clic fuera lo cierra, ver script.js) */
    .custom-navbar.nav-open::before{
        content:"";
        position:fixed;
        inset:0;
        z-index:-1;
        background:rgba(2,6,23,.55);
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
        animation:nav-backdrop-in .25s ease both;
    }
    @keyframes nav-backdrop-in{ from{ opacity:0; } to{ opacity:1; } }
}
/* Tablet: los enlaces en dos columnas para aprovechar el ancho */
@media (min-width: 600px) and (max-width: 991.98px){
    .custom-navbar .nav-links{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .custom-navbar .nav-links .nav-item:nth-last-child(2):nth-child(odd){ grid-column:1 / -1; }
}
@media (max-width: 360px){
    .nav-actions{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
    .nav-indicator, .nav-cta, .custom-navbar, .custom-navbar > .container, .nav-center, .custom-navbar .hamburger-line{ transition:none; }
    .custom-navbar.nav-open::before{ animation:none; }
}

/* ============================================================
   Tarjeta interactiva del pago (registro). Mismo diseño que el
   formulario de tarjeta compartido del front y del panel.
   ============================================================ */
.lp-card-stage { width: 100%; max-width: 300px; margin: 0 auto 1.25rem; perspective: 1200px; }
.lp-card { position: relative; width: 100%; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.lp-card.is-flipped { transform: rotateY(180deg); }
.lp-card-face { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 58%, #6c63ff 100%); box-shadow: 0 14px 30px rgba(30,58,138,.28); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lp-card[data-brand="mastercard"] .lp-card-face { background: linear-gradient(135deg, #111827 0%, #374151 60%, #b45309 100%); }
.lp-card[data-brand="amex"] .lp-card-face { background: linear-gradient(135deg, #0f766e 0%, #0e7490 60%, #1d4ed8 100%); }
.lp-card-face::after { content: ''; position: absolute; right: -48px; top: -56px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.09); pointer-events: none; }
.lp-card-front { display: flex; flex-direction: column; justify-content: space-between; padding: 15px 17px; }
.lp-card-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-card-bottom { align-items: flex-end; }
.lp-card-chip { width: 36px; height: 27px; border-radius: 6px; background: linear-gradient(135deg, #fde68a, #d4a017); }
.lp-card-brand { font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: .06em; }
.lp-card-brand.is-empty { font-style: normal; font-weight: 600; font-size: 12px; opacity: .8; }
.lp-card-zone { position: relative; z-index: 1; padding: 3px 6px; margin: -3px -6px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.lp-card-zone.is-active { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.12); }
.lp-card-number { align-self: flex-start; font-size: 17px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-card-holder, .lp-card-exp { display: grid; gap: 1px; min-width: 0; }
.lp-card-holder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.lp-card-exp { text-align: right; }
.lp-card small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.lp-card-holder span, .lp-card-exp span { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.lp-card-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 12px; padding: 18px 0 14px; cursor: pointer; }
.lp-card-stripe { display: block; height: 36px; background: rgba(0,0,0,.75); }
.lp-card-sign { display: flex; align-items: center; gap: 8px; padding-inline: 17px; }
.lp-card-sign-lines { flex: 1; height: 30px; border-radius: 4px; background: repeating-linear-gradient(0deg, #f8fafc 0 5px, #e2e8f0 5px 10px); }
.lp-card-cvc { margin: 0; min-width: 54px; height: 30px; display: inline-grid; place-items: center; border-radius: 6px; color: #111827; background: #fff; font-weight: 800; letter-spacing: .12em; }
.lp-card-cvc.is-active { border-color: #fbbf24; background: #fff; box-shadow: 0 0 0 3px rgba(251,191,36,.45); }
.lp-card-back-note { padding-inline: 17px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .lp-card { transition: none; } }

/* ===== FOOTER COMPARTIDO: inicio =====
   Mismo bloque en elhubsvoffice_front/src/app/app.css y en
   LandingPage_TuSala/assets/css/styles.css: si cambias uno, copia el
   bloque completo al otro. Valores fijos (no variables de tema): el footer
   se ve igual en Light y Dark Mode por decisión de diseño explícita. */
.footer-tusala{position:relative;font-family:'Poppins',sans-serif;z-index:20;flex:none;width:100%;overflow:hidden;padding:clamp(4.5rem,8vw,6.5rem) 0 1.5rem;color:#a9bbd3;background:radial-gradient(ellipse 60% 45% at 85% 18%,rgba(37,99,235,.22),transparent 70%),radial-gradient(ellipse 50% 40% at 8% 10%,rgba(22,119,255,.14),transparent 70%),linear-gradient(180deg,#081a38 0%,#050f22 55%,#030a18 100%)}
.footer-container{position:relative;width:min(1200px,calc(100% - 48px));margin-inline:auto}

/* Onda superior: cada proyecto define el relleno (.footer-wave-fill) con el
   color de la sección que queda encima del footer. */
.footer-wave{position:absolute;top:-1px;left:0;width:100%;height:clamp(36px,6vw,90px);pointer-events:none}
.footer-wave-line{fill:none;stroke:rgba(92,180,255,.35);stroke-width:1.5;vector-effect:non-scaling-stroke}

/* Llamada a la acción (sin panel) */
.footer-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(2rem,5vw,4.5rem)}
.footer-eyebrow{display:block;margin-bottom:.6rem;color:#5cb4ff;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.footer-cta h2{margin:0;color:#f8fafc;font-size:clamp(1.65rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.footer-cta h2 span{display:block;color:#5cb4ff}
.footer-cta-copy>p{max-width:440px;margin:.8rem 0 1.4rem;color:#b9c8dc;font-size:.95rem;line-height:1.6}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:.65rem}
.footer-cta-actions :is(a,button){min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.35rem;border-radius:999px;color:#fff;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.footer-action-primary{border:1px solid transparent;background:linear-gradient(135deg,#1677ff,#2563eb);box-shadow:0 10px 26px rgba(22,119,255,.32)}
.footer-action-secondary{border:1px solid rgba(148,180,220,.32);background:transparent}
.footer-cta-actions :is(a,button):hover{transform:translateY(-2px)}
.footer-action-primary:hover{box-shadow:0 14px 30px rgba(22,119,255,.45)}
.footer-action-secondary:hover{border-color:#5cb4ff;background:rgba(92,180,255,.08)}

/* Fotos en forma de arco con su etiqueta debajo, sin recuadros */
.footer-space-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(.75rem,2vw,1.5rem)}
.footer-space-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;min-width:0;padding:0;border:0;color:#fff;background:none;font:inherit;text-align:center;text-decoration:none;cursor:pointer}
.footer-space-card img{display:block;width:100%;height:210px;object-fit:cover;border-radius:999px 999px 28px 28px;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .35s ease,box-shadow .35s ease}
.footer-space-card.card-meeting img{height:250px}
.card-coworking img{object-position:20% center}.card-meeting img{object-position:55% center}.card-office img{object-position:80% center}
.footer-space-card>span{display:grid;justify-items:center;gap:.1rem}
.footer-space-card>span>i{margin-bottom:.15rem;color:#5cb4ff;font-size:1rem}
.footer-space-card strong{font-size:.86rem;font-weight:700;line-height:1.25}
.footer-space-card small{color:#9fb2cc;font-size:.74rem;line-height:1.3}
.footer-space-card:hover img,.footer-space-card:focus-visible img{transform:translateY(-6px);box-shadow:0 24px 46px rgba(22,119,255,.28)}
.footer-space-card:hover strong{color:#5cb4ff}
.footer-space-more{grid-column:1/-1;margin:.6rem 0 0;color:#9fb2cc;font-size:.84rem;line-height:1.6;text-align:center}
.footer-space-more>span{color:#f1f5fb;font-weight:700}
.footer-space-more-link{display:inline-flex;align-items:center;gap:.3rem;margin-left:.25rem;padding:0;border:0;color:#5cb4ff;background:none;font:inherit;font-weight:700;white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .2s ease}
.footer-space-more-link i{font-size:.8rem;transition:transform .2s ease}
.footer-space-more-link:hover{color:#8bd0ff}.footer-space-more-link:hover i{transform:translateX(3px)}

/* Marca, contacto y enlaces */
.footer-navigation{display:grid;grid-template-columns:minmax(250px,1.5fr) repeat(4,minmax(0,1fr));gap:2rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding:clamp(2rem,4vw,2.75rem) 0 2rem;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(148,180,220,.22),transparent) 1}
/* El PNG trae margen transparente (~15% arriba/abajo, ~10% a la izquierda);
   los márgenes negativos alinean el trazo visible con el texto. */
.footer-logo{display:block;width:150px;height:auto;margin:-20px 0 -20px -14px}
.footer-brand p{max-width:300px;margin:.9rem 0 1rem;color:#a9bbd3;font-size:.85rem;line-height:1.6}
.footer-contact{display:grid;gap:.5rem;margin:0 0 1.1rem;padding:0;list-style:none}
.footer-contact-row{display:flex;align-items:flex-start;gap:.55rem;color:#c9d6e8;font-size:.82rem;line-height:1.45}
.footer-contact i{flex:none;margin-top:.1rem;color:#5cb4ff;font-size:.9rem}
.footer-contact a{color:inherit;text-decoration:none;transition:color .2s ease}
.footer-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-social{display:flex;flex-wrap:wrap;gap:.5rem}
.footer-social :is(.footer-social-icon,.social-icon-link){display:grid;border:0;animation:none;place-items:center;width:38px;height:38px;border-radius:50%;color:#c9d6e8;background:rgba(255,255,255,.07);font-size:1rem;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease}
.footer-social :is(.footer-social-icon,.social-icon-link):is(:hover,:focus-visible){color:var(--on-brand,#fff);background:var(--brand,#1677ff);transform:translateY(-2px)}
.footer-link-column{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.footer-link-column h2{margin:0 0 .7rem;color:#f1f5fb;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.footer-link-column a,.footer-link-column button{display:inline-block;padding:.4rem 0;border:0;color:#a9bbd3;background:none;font:inherit;font-size:.86rem;line-height:1.35;text-align:left;text-decoration:none;cursor:pointer;transition:color .2s ease}
.footer-link-column a>i{margin-left:.3rem;font-size:.62rem;opacity:.65}
.footer-link-column a:hover,.footer-link-column button:hover{color:#fff}

/* Barra inferior centrada: créditos con logos y derechos */
.footer-bottom{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding-top:1.4rem;text-align:center;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(148,180,220,.22),transparent) 1}
.footer-credits{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.4rem}
.footer-credit{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;color:#e2ebf7;text-decoration:none;transition:opacity .2s ease}
.footer-credit small{color:#8a9db8;font-size:.75rem}
.footer-credit img{flex:none;width:auto;height:24px;border-radius:5px}
.footer-credit img.footer-credit-tall{height:29px;margin-block:-3px}
.footer-credit strong{font-size:.84rem;font-weight:700;transition:color .2s ease}
.footer-credit:hover strong{color:#5cb4ff}
.footer-credit-divider{width:1px;height:20px;background:rgba(148,180,220,.25)}
.footer-copyright{margin:0;color:#7f93b0;font-size:.76rem;line-height:1.5}
.footer-tusala :is(a,button):focus-visible{outline:2px solid #8bd0ff;outline-offset:3px}

@media(max-width:1080px){.footer-cta{grid-template-columns:1fr;justify-items:center;text-align:center}.footer-cta-copy{display:grid;justify-items:center}.footer-cta-copy>p{max-width:520px}.footer-cta-actions{justify-content:center}.footer-space-cards{width:min(640px,100%)}.footer-navigation{grid-template-columns:repeat(4,minmax(0,1fr))}.footer-brand{grid-column:1/-1;display:grid;justify-items:center;text-align:center}.footer-logo{margin-left:0}.footer-brand p{max-width:520px}.footer-contact{justify-items:center}.footer-social{justify-content:center}.footer-link-column{align-items:center;text-align:center}.footer-link-column a,.footer-link-column button{justify-content:center;text-align:center}}
@media(max-width:860px){.footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.25rem}}
@media(max-width:720px){.footer-space-card img{height:170px}.footer-space-card.card-meeting img{height:200px}}
@media(max-width:560px){.footer-container{width:calc(100% - 32px)}.footer-cta-actions{display:grid;width:100%;max-width:340px}.footer-cta-actions :is(a,button){width:100%}.footer-space-cards{gap:.6rem}.footer-space-card img{height:130px;border-radius:999px 999px 18px 18px}.footer-space-card.card-meeting img{height:155px}.footer-space-card strong{font-size:.76rem}.footer-space-card small{display:none}.footer-contact-row{text-align:left}.footer-credit-divider{display:none}.footer-credits{flex-direction:column;gap:.35rem}.footer-navigation{gap:1.5rem .75rem}.footer-link-column a,.footer-link-column button{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.footer-tusala *{transition:none!important}}
/* ===== FOOTER COMPARTIDO: fin ===== */
/* Solo landing: anula estilos genéricos de footer y Bootstrap. */
.footer-tusala a{text-decoration:none}


/* Ojo para mostrar u ocultar la contraseña (ver data-toggle-password en script.js). */
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.9rem; }
.password-toggle { position: absolute; top: 50%; right: .4rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: #64748b; transform: translateY(-50%); cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { color: #2563eb; background: rgba(37, 99, 235, .1); outline: none; }


/* Ocultar el ojo nativo de Edge para que no aparezca duplicado junto al
   ojo propio de cada formulario de contraseña. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }