/* ==========================================================================
   reservas-landing.css — Landing Comercial · Dark Premium
   Inspirado en diseño cinematográfico, adaptado a guía turbopos
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
    --rl-bg: #272727;
    --rl-card: #111119;
    --rl-accent: #FF8C20;
    --rl-accent2: #fb923c;
    --rl-accent-glow: rgba(255,140,32,.25);
    --rl-green: #22c55e;
    --rl-green-glow: rgba(34,197,94,.15);
    --rl-red: #ef4444;
    --rl-txt: #f0f0f5;
    --rl-muted: #b0b0c0;
    --rl-border: rgba(255,255,255,.06);
    --rl-radius: 14px;
    --rl-transition: 0.3s ease;
}

/* ---------- Base ---------- */
.rl-landing {
    font-family: 'Montserrat', sans-serif;
    color: var(--rl-txt);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.rl-landing *,
.rl-landing *::before,
.rl-landing *::after {
    box-sizing: border-box;
}

/* Reset call-modal para que no herede estilos de la landing */
.rl-landing .call-modal {
    color: #272727;
}

/* Override footer bg para que no desentone */
.rl-landing footer {
    border-top: 1px solid var(--rl-border);
}


/* ==========================================================================
   1. HERO
   ========================================================================== */
.rl-hero {
    min-height: 600px;
    max-height: 90vh;
    height: auto;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 120px 200px 80px;
}


/* Background cinematográfico */
.rl-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.rl-hero-bg .rl-img-layer {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(255,180,80,.10) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 40%, rgba(255,140,32,.06) 0%, transparent 40%),
        linear-gradient(170deg, #2e2430 0%, #272727 35%, #2e2218 70%, #272727 100%);
    animation: rlHeroShift 12s ease-in-out infinite alternate;
}

@keyframes rlHeroShift {
    0%   { filter: brightness(.9); }
    50%  { filter: brightness(1.05); }
    100% { filter: brightness(.95); }
}

.rl-hero-bg .rl-warm1,
.rl-hero-bg .rl-warm2,
.rl-hero-bg .rl-warm3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .25;
    pointer-events: none;
}

.rl-hero-bg .rl-warm1 {
    width: 300px;
    height: 300px;
    background: var(--rl-accent);
    top: 15%;
    left: 5%;
    animation: rlFloat1 8s ease-in-out infinite alternate;
}

.rl-hero-bg .rl-warm2 {
    width: 200px;
    height: 200px;
    background: #fbbf24;
    top: 30%;
    right: 10%;
    animation: rlFloat2 10s ease-in-out infinite alternate;
}

.rl-hero-bg .rl-warm3 {
    width: 250px;
    height: 180px;
    background: var(--rl-accent);
    top: 50%;
    left: 35%;
    opacity: .15;
    animation: rlFloat3 9s ease-in-out infinite alternate;
}

@keyframes rlFloat1 { 0%{transform:translate(0,0)} 100%{transform:translate(20px,-25px)} }
@keyframes rlFloat2 { 0%{transform:translate(0,0)} 100%{transform:translate(-15px,20px)} }
@keyframes rlFloat3 { 0%{transform:translate(0,0)} 100%{transform:translate(15px,15px)} }

.rl-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(39,39,39,.05) 0%, rgba(39,39,39,.3) 50%, var(--rl-bg) 95%);
}

/* Hero grid */
.rl-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.rl-hero-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Badge */
.rl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.2);
    border-radius: 8px;
    padding: 6px 14px;
    width: fit-content;
}

.rl-hero-badge .rl-badge-dot {
    width: 6px;
    height: 6px;
    background: var(--rl-green);
    border-radius: 50%;
    animation: rlPulse 2s ease-in-out infinite;
}

@keyframes rlPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.rl-hero-badge span {
    font-size: .78rem;
    color: var(--rl-green);
    font-weight: 600;
}

/* Título hero */
.rl-hero h1 {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.15;
    margin: 0;
}

.rl-hero h1 .accent {
    background: linear-gradient(135deg, var(--rl-accent), var(--rl-accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rl-hero-sub {
    font-size: 1.25rem;
    color: rgba(240,240,245,1);
    line-height: 1.6;
    margin: 0;
    max-width: 500px;
    font-weight: 400;
}

/* Badges row */
.rl-hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* CTA principal */
.rl-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 16px 36px;
    background: #ff8c20;
    border: none;
    border-radius: var(--rl-radius);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s, box-shadow .3s;
}

.rl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--rl-accent-glow);
}

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

.rl-hero-price {
    display: block;
    margin-top: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.rl-hero-price-prefix {
    font-weight: 400;
}

/* Hero visual */
.rl-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    max-height: 580px;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
}

.rl-hero-visual video,
.rl-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Hero mobile: oculto en desktop */
.rl-hero-mobile {
    display: none;
}

@media screen and (max-width: 1280px) {
    .rl-hero { padding: 80px 60px 60px; }
}

@media screen and (max-width: 900px) {
    .rl-hero { display: none; }

    .rl-hero-mobile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        position: relative;
        overflow: hidden;
        padding: 100px 20px 40px;
        min-height: 85vh;
        max-height: -webkit-fill-available;
        justify-content: flex-end;
    }

    /* Video como fondo */
    .rl-hero-bg-video {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }

    .rl-hero-bg-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Overlay oscuro sobre el video para legibilidad */
    .rl-hero-bg-video::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(39,39,39,.2) 0%, rgba(39,39,39,.65) 40%, rgba(39,39,39,.85) 60%, rgba(39,39,39,.92) 100%);
        z-index: 1;
    }

    .rl-hero-mobile .rl-hero-content-m {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .rl-hero-mobile h1 {
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1.2;
        margin: 0;
    }

    .rl-hero-mobile h1 .accent {
        background: linear-gradient(135deg, var(--rl-accent), var(--rl-accent2));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .rl-hero-mobile .rl-hero-sub {
        font-size: .92rem;
        color: rgba(240,240,245,.85);
        max-width: 380px;
        font-weight: 300;
    }

    .rl-hero-mobile .rl-btn-primary {
        width: 100%;
        padding: 16px;
        text-align: center;
    }

}

/* ==========================================================================
   2. PROBLEMA – "Esto te suena"
   ========================================================================== */
.rl-section {
    padding: 2.5rem 200px;
}

.rl-problem {
    background: #f5f5f7;
}

.rl-problem h2 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 1.5rem;
    text-align: center;
    color: #272727;
}

.rl-problem h2 .accent {
    color: var(--rl-accent);
}

/* Pain list */
.rl-pain-list {
    max-width: 550px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Pain card — X a la izquierda, texto a la derecha */
.rl-pain-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 16px 20px;
}

.rl-pain-x {
    display: block;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    color: var(--rl-red);
    stroke-width: 2.5;
    flex-shrink: 0;
}

.rl-pain-card p {
    font-size: .92rem;
    color: #272727;
    line-height: 1.45;
    margin: 0;
}

/* Solución Turbopos */
.rl-pain-solution {
    max-width: 550px;
    margin: 18px auto 0;
    background: #272727;
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
}

.rl-pain-solution-label {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--rl-accent);
    margin-bottom: 8px;
}

.rl-pain-solution p {
    font-size: .95rem;
    color: rgba(255,255,255,.85);
    line-height: 1.5;
    margin: 0;
}

.rl-pain-solution p strong {
    color: var(--rl-accent);
    font-weight: 700;
}

@media screen and (max-width: 1280px) {
    .rl-section { padding: 2.5rem 60px; }
}

@media screen and (max-width: 900px) {
    .rl-section { padding: 2rem 1.25rem; }
    .rl-problem h2 { font-size: 1.5rem; }
    .rl-pain-card { padding: 14px 16px; gap: 12px; }
    .rl-pain-card p { font-size: .85rem; }
    .rl-pain-x { width: 18px; height: 18px; }
    .rl-pain-solution p { font-size: .88rem; }
}

/* ==========================================================================
   3. INTEGRACIÓN CON GOOGLE – Steps
   ========================================================================== */
/* Fondo blanco para la sección steps */
.rl-steps {
    background: #fff;
    padding: 2.5rem 200px;
}

.rl-steps h2 {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: -.02em;
    color: #272727;
}

.rl-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.rl-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f5f5f7;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--rl-radius);
    padding: 1.25rem;
    transition: border-color var(--rl-transition);
}

.rl-step:hover {
    border-color: rgba(255,140,32,.3);
}

.rl-step-icon {
    min-width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rl-step-icon svg {
    width: 22px;
    height: 22px;
}

/* Paso 1 — naranja */
.rl-step-icon--orange {
    background: rgba(255,140,32,.1);
}
.rl-step-icon--orange svg {
    color: var(--rl-accent);
}

/* Paso 2 — Google azul */
.rl-step-icon--google {
    background: rgba(66,133,244,.08);
}
.rl-step-icon--google svg {
    color: inherit;
}

/* Paso 3 — verde */
.rl-step-icon--green {
    background: rgba(34,197,94,.08);
}
.rl-step-icon--green svg {
    color: var(--rl-green);
}

.rl-step-text h4 {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    color: #272727;
}

.rl-step-text p {
    font-size: .85rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Banner Google — estilo ad1_banner */
.rl-google-banner {
    padding: 25px;
}

.rl-google-banner-container {
    height: 100%;
    width: 100%;
    min-height: 260px;
    display: grid;
    place-content: center;
    position: relative;
    padding: 40px 25px;
    overflow: hidden;
    border-radius: 5px;
    background: #272727;
}

.rl-google-banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    z-index: 2;
    max-width: 700px;
}

.rl-google-banner-text h2 {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--rl-txt);
    margin: 0;
    line-height: 1.3;
}

.rl-google-banner-text p {
    font-size: 1rem;
    color: var(--rl-accent);
    font-weight: 600;
    margin: 0;
}


@media screen and (max-width: 1280px) {
    .rl-steps { padding: 2.5rem 60px; }
}

@media screen and (max-width: 900px) {
    .rl-steps { padding: 2rem 1.25rem; }
    .rl-steps h2 { font-size: 1.5rem; }
    .rl-steps-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .rl-step { padding: 1rem; }
    .rl-google-banner { padding: 15px; }
    .rl-google-banner-container { min-height: 200px; padding: 30px 20px; }
    .rl-google-banner-text h2 { font-size: 1.5rem; }
    .rl-google-banner-text p { font-size: .88rem; }
}


/* ==========================================================================
   5. PRICING
   ========================================================================== */
.rl-pricing {
    text-align: center;
    background: #fff;
}

.rl-pricing-headline {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    letter-spacing: -.02em;
    color: #272727;
}

.rl-pricing-hook {
    font-size: 1rem;
    color: var(--rl-accent);
    font-weight: 600;
    margin: 0 0 2rem;
}

/* Card pricing única */
.rl-pricing-card {
    background: #272727;
    border: 1px solid var(--rl-border);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 480px;
    margin: 0 auto;
    transition: border-color var(--rl-transition);
}

/* Switch toggle */
.rl-pricing-switch {
    display: inline-flex;
    position: relative;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    padding: 4px;
}

.rl-switch-opt {
    position: relative;
    z-index: 2;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rl-muted);
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .3s;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

.rl-switch-opt.rl-switch-active {
    color: #fff;
}

.rl-switch-indicator {
    position: absolute;
    top: 4px;
    height: calc(100% - 8px);
    background: #ff8c20;
    border-radius: 8px;
    transition: left .3s ease, width .3s ease;
    z-index: 1;
}

/* Precio */
.rl-pricing-amount {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    transition: opacity .25s, transform .25s;
}

.rl-pricing-amount.rl-price-changing {
    opacity: 0;
    transform: translateY(-8px);
}

.rl-pricing-amount span {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255,255,255,.85);
}

.rl-pricing-tagline {
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    margin: -12px 0 0;
    transition: opacity .25s;
}

.rl-pricing-tagline.rl-price-changing {
    opacity: 0;
}

/* Features list */
.rl-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}

.rl-pricing-features li {
    padding: .55rem 0;
    font-size: .88rem;
    color: rgba(240,240,245,1);
    border-bottom: 1px solid var(--rl-border);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.rl-pricing-features li:last-child {
    border-bottom: none;
}

.rl-pricing-features li::before {
    content: '✓';
    color: var(--rl-accent);
    font-weight: 700;
    min-width: 16px;
}

/* CTA pricing */
.rl-pricing-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .3s;
    border: 1px solid var(--rl-border);
    color: var(--rl-txt);
    background: transparent;
    margin-top: auto;
}

.rl-pricing-cta:hover {
    border-color: rgba(255,140,32,.3);
    box-shadow: 0 4px 20px var(--rl-accent-glow);
}

.rl-pricing-cta--featured {
    background: #ff8c20;
    border-color: transparent;
    color: #fff;
}

.rl-pricing-cta--featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--rl-accent-glow);
}

/* Nota bajo pricing */
.rl-pricing-note {
    text-align: center;
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.rl-pricing-note span {
    font-size: .82rem;
    color: #666;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rl-pricing-note span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rl-green);
}

@media screen and (max-width: 900px) {
    .rl-pricing-headline { font-size: 1.5rem; }
    .rl-pricing-card { padding: 2rem 1.25rem; }
    .rl-pricing-amount { font-size: 3rem; }
    .rl-switch-opt { padding: 7px 16px; font-size: .78rem; }
}

/* ==========================================================================
   ANIMATIONS (IntersectionObserver)
   ========================================================================== */
.rl-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.rl-animate.rl-visible {
    opacity: 1;
    transform: translateY(0);
}

.rl-animate-delay-1 { transition-delay: 0.1s; }
.rl-animate-delay-2 { transition-delay: 0.2s; }
.rl-animate-delay-3 { transition-delay: 0.3s; }