/* ============================================================================
   Landing pos.3erojo.com — estilos sobre Bootstrap 5.3 (tema claro/oscuro)
   Usa la tríada de color de 3er OJO (rojo, amarillo, cian) sobre el primary.
   ========================================================================== */

:root {
    --tw-primary: #16b6cf;
    --tw-red: #e8352e;
    --tw-yellow: #f4c430;
    --tw-teal: #16b6cf;
    --bs-primary: var(--tw-primary);
    --bs-primary-rgb: 22, 182, 207;
    --bs-link-color: var(--tw-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--tw-primary) 82%, black);
}

.btn-primary {
    --bs-btn-bg: var(--tw-primary);
    --bs-btn-border-color: var(--tw-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tw-primary) 86%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--tw-primary) 82%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--tw-primary) 78%, black);
}
.btn-outline-primary {
    --bs-btn-color: var(--tw-primary);
    --bs-btn-border-color: var(--tw-primary);
    --bs-btn-hover-bg: var(--tw-primary);
    --bs-btn-hover-border-color: var(--tw-primary);
}
.text-primary { color: var(--tw-primary) !important; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* --- Navbar ---------------------------------------------------------------- */
.tw-navbar {
    backdrop-filter: saturate(180%) blur(8px);
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    border-bottom: 1px solid var(--bs-border-color);
}
.tw-logo { height: 34px; width: auto; }

/* Cambio de logo según tema. */
:root[data-bs-theme="dark"] .logo-for-light { display: none; }
:root[data-bs-theme="light"] .logo-for-dark { display: none; }

/* --- Hero ------------------------------------------------------------------ */
.tw-hero {
    position: relative;
    padding: 5rem 0 4rem;
    overflow: hidden;
}
.tw-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 55% at 85% 10%, color-mix(in srgb, var(--tw-red) 22%, transparent), transparent 70%),
        radial-gradient(50% 50% at 10% 20%, color-mix(in srgb, var(--tw-yellow) 20%, transparent), transparent 70%),
        radial-gradient(60% 60% at 70% 90%, color-mix(in srgb, var(--tw-teal) 22%, transparent), transparent 70%);
    z-index: 0; pointer-events: none;
}
.tw-hero > .container { position: relative; z-index: 1; }
.tw-accent {
    background: linear-gradient(90deg, var(--tw-red), var(--tw-yellow), var(--tw-teal));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    white-space: nowrap;
}
.tw-hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; border-radius: 999px;
    background: color-mix(in srgb, var(--tw-primary) 14%, transparent);
    color: var(--tw-primary); font-weight: 600; font-size: .85rem;
    border: 1px solid color-mix(in srgb, var(--tw-primary) 30%, transparent);
}
.tw-hero-mock {
    border-radius: 16px; border: 1px solid var(--bs-border-color);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
    overflow: hidden; background: var(--bs-body-bg);
}
.tw-hero-mock .bar { height: 34px; background: var(--bs-tertiary-bg); display:flex; align-items:center; gap:6px; padding:0 12px; }
.tw-hero-mock .bar span { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* --- Secciones ------------------------------------------------------------- */
section { scroll-margin-top: 80px; }
.tw-section { padding: 4.5rem 0; }
.tw-eyebrow { color: var(--tw-primary); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }

/* --- Feature cards --------------------------------------------------------- */
.tw-feature {
    height: 100%; border: 1px solid var(--bs-border-color); border-radius: 14px;
    padding: 1.5rem; background: var(--bs-body-bg); transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tw-feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tw-primary) 45%, var(--bs-border-color)); box-shadow: 0 16px 30px -18px rgba(0,0,0,.4); }
.tw-feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 12px; font-size: 1.5rem; color: #fff; margin-bottom: 1rem;
}
.tw-feature:nth-child(3n+1) .tw-feature-icon { background: var(--tw-red); }
.tw-feature:nth-child(3n+2) .tw-feature-icon { background: var(--tw-teal); }
.tw-feature:nth-child(3n+3) .tw-feature-icon { background: color-mix(in srgb, var(--tw-yellow) 92%, black); }

/* --- Pasos ----------------------------------------------------------------- */
.tw-step-num {
    width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 800; color: #fff; background: var(--tw-primary); margin-bottom: 1rem;
}

/* --- Pricing --------------------------------------------------------------- */
.tw-plan { height: 100%; border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 2rem; background: var(--bs-body-bg); }
.tw-plan.featured { border-color: var(--tw-primary); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--tw-primary) 25%, transparent); position: relative; }
.tw-plan.featured::after {
    content: attr(data-badge); position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
    background: var(--tw-primary); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .75rem; border-radius: 999px;
}
.tw-plan .price { font-size: 2.4rem; font-weight: 800; }

/* --- CTA band -------------------------------------------------------------- */
.tw-cta {
    border-radius: 20px; padding: 3rem; text-align: center; color: #fff;
    background: linear-gradient(120deg, var(--tw-teal), color-mix(in srgb, var(--tw-teal) 55%, var(--tw-red)));
}
.tw-cta .btn-light { color: var(--tw-primary); font-weight: 600; }

/* --- Footer ---------------------------------------------------------------- */
.tw-footer { border-top: 1px solid var(--bs-border-color); padding: 2.5rem 0; }
.tw-footer-logo { height: 30px; }

@media (max-width: 767.98px) {
    .tw-hero { padding: 3rem 0 2rem; }
    .tw-section { padding: 3rem 0; }
    .tw-accent { white-space: normal; }
}