/* =====================================================
   TRAVORIUM CLUB CHIHUAHUA LANDING
   Version: 3.0 — CSS ORGANIZADO
   Fecha: 21/09/2026

   Responsive:
   Desktop / Tablet / Mobile

   Tipografía:
   Manrope + Inter
===================================================== */


/* =============================================================
   MAPA GENERAL DEL CSS — TRAVORIUM CLUB CHIHUAHUA

   [TRV-00..04]  Base, reset, global, botones y header
   [TRV-05]      Utilidades tempranas / video / proceso / LIVE
   [TRV-10..31]  Estructura principal de la landing y responsive
   [TRV-40..48]  Ajustes y efectos añadidos posteriormente
   [TRV-50..56]  Secciones personalizadas, iconos, stats, videos y FAQ

   NOTA DE MANTENIMIENTO:
   Los bloques [TRV-40..56] son overrides añadidos después del CSS base.
   Se mantienen al final para conservar la cascada original y evitar
   regresiones en las secciones que ya funcionan correctamente.
============================================================= */



/* =============================================================
   [TRV-00] VARIABLES Y CONFIGURACIÓN GLOBAL
   Identificador de sección: [TRV-00]
============================================================= */
/* =====================================================
   VARIABLES
===================================================== */

:root {

    --navy: #071A35;
    --navy-2: #0B3B70;

    --turquoise: #18B7B0;
    --turquoise-dark: #10958F;

    --gold: #D8B56A;

    --white: #FFFFFF;
    --light: #F5F7FA;

    --text: #172033;
    --muted: #64748B;

    --border: #E5E7EB;

    --radius: 16px;

    --container: 1180px;

    --font-heading:
        "Manrope",
        Arial,
        sans-serif;

    --font-body:
        "Inter",
        Arial,
        sans-serif;

    --shadow:
        0 15px 45px rgba(7, 26, 53, .08);

    --shadow-hover:
        0 22px 55px rgba(7, 26, 53, .14);

}



/* =============================================================
   [TRV-01] RESET Y NORMALIZACIÓN
   Identificador de sección: [TRV-01]
============================================================= */
/* =====================================================
   RESET
===================================================== */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 80px;

}

body {

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

    color:
        var(--text);

    background:
        var(--white);

    line-height:
        1.6;

    overflow-x:
        hidden;

}

img {

    width:
        100%;

    display:
        block;

    object-fit:
        cover;

}

a {

    color:
        inherit;

    text-decoration:
        none;

}

button,
input,
select {

    font-family:
        inherit;

}



/* =============================================================
   [TRV-02] ELEMENTOS GLOBALES Y CONTENEDORES
   Identificador de sección: [TRV-02]
============================================================= */
/* =====================================================
   GLOBAL
===================================================== */

.container {

    width:
        min(
            calc(100% - 40px),
            var(--container)
        );

    margin-inline:
        auto;

}

.section {

    padding:
        100px 0;

}

.section-white {

    background:
        var(--white);

}

.section-light {

    background:
        var(--light);

}

.section-dark {

    background:
        var(--navy);

    color:
        var(--white);

}

.section-heading {

    max-width:
        760px;

    margin:
        0 auto 60px;

    text-align:
        center;

}

.section-heading h2 {

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

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1.08;

    letter-spacing:
        -.8px;

    margin:
        12px 0 18px;

}

.section-heading p {

    color:
        var(--muted);

}

.section-heading-dark p {

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

}

.section-label {

    color:
        var(--turquoise);

    font-size:
        15px;

    font-weight:
        800;

    letter-spacing:
        2px;

}



/* =============================================================
   [TRV-03] BOTONES GENERALES
   Identificador de sección: [TRV-03]
============================================================= */
/* =====================================================
   BUTTONS
===================================================== */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 26px;

    border-radius:
        10px;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        .5px;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;

}

.btn-primary {

    background:
        var(--turquoise);

    color:
        var(--white);

}

.btn-primary:hover {

    background:
        var(--turquoise-dark);

    transform:
        translateY(-2px);

}

.btn-outline {

    color:
        var(--white);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .55
        );

}

.btn-outline:hover {

    background:
        rgba(
            255,
            255,
            255,
            .1
        );

}

.btn-secondary {

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

    color:
        var(--navy);

    background:
        transparent;

}

.btn-secondary:hover {

    background:
        var(--navy);

    color:
        var(--white);

}

.btn-card {

    width:
        100%;

}



/* =============================================================
   [TRV-04] HEADER Y NAVEGACIÓN PRINCIPAL
   Identificador de sección: [TRV-04]
============================================================= */
/* =====================================================
   HEADER
===================================================== */

.site-header {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        20;

    color:
        var(--white);

}

.header-inner {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

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

    font-weight:
        800;

    letter-spacing:
        1px;

    white-space:
        nowrap;

}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    width: 170px;
    height: auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 600px) {
    .brand-logo {
        width: 135px;
    }
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-logo {
    width: 180px;
    height: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 14px;
}

@media (max-width: 600px) {
    .footer-logo {
        width: 150px;
    }
}


/* =============================================================
   [TRV-05] UTILIDADES — VIDEO YOUTUBE / PROCESO / LIVE
   Identificador de sección: [TRV-05]
============================================================= */
/* VIDEO YOUTUBE — Contenedor responsive 16:9 */

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* PROCESO — Transición de múltiples colores pastel */

.pastel-transition {
    background: linear-gradient(
        90deg,
        rgba(147, 197, 253, 1),
        rgba(134, 239, 219, 1),
        rgba(196, 181, 253, 1),
        rgba(253, 164, 175, 1),
        rgba(253, 224, 146, 1),
        rgba(147, 197, 253, 1)
    );

    background-size: 400% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: pastelFlow 8s ease-in-out infinite;

    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Movimiento suave del degradado */

@keyframes pastelFlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

/* PROCESO — Responsive móvil */

@media (max-width: 600px) {

    .pastel-transition {
        font-size: 1.4rem;
        line-height: 1.5;
        background-size: 500% 100%;
        animation-duration: 9s;
    }

}

/* LIVE EN TIKTOK — Transición de múltiples colores pastel */

.pastel-live-title {
    background: linear-gradient(
        90deg,
        rgba(147, 197, 253, 1),
        rgba(134, 239, 219, 1),
        rgba(196, 181, 253, 1),
        rgba(253, 164, 175, 1),
        rgba(253, 224, 146, 1),
        rgba(147, 197, 253, 1)
    );

    background-size: 400% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: pastelLiveFlow 8s ease-in-out infinite;

    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Movimiento suave de los colores */

@keyframes pastelLiveFlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

/* LIVE EN TIKTOK — Responsive móvil */

@media (max-width: 600px) {

    .pastel-live-title {
        font-size: 1.25rem;
        background-size: 500% 100%;
        animation-duration: 9s;
    }

}

/* LIVE — Indicador de transmisión */

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Punto rojo de grabación */

.live-dot {
    color: rgba(255, 55, 70, 1);
    font-size: 0.9em;
    line-height: 1;

    animation: liveRecording 1.5s ease-in-out infinite;
}

/* Parpadeo + efecto de brillo */

@keyframes liveRecording {

    0%,
    100% {
        opacity: 1;
        text-shadow:
            0 0 4px rgba(255, 55, 70, 0.45),
            0 0 10px rgba(255, 55, 70, 0.25);
        transform: scale(1);
    }

    80% {
        opacity: 0.25;
        text-shadow: none;
        transform: scale(0.85);
    }

}

/* LIVE — Ajuste para dispositivos móviles */

@media (max-width: 600px) {

    .live-indicator {
        gap: 5px;
        font-size: 0.9rem;
    }

}


.brand-mark {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .6
        );

    border-radius:
        50%;

}

.desktop-nav {

    display:
        flex;

    gap:
        22px;

    font-size:
        12px;

    font-weight:
        600;

}

.desktop-nav a {

    opacity:
        .85;

    transition:
        .25s ease;

}

.desktop-nav a:hover {

    opacity:
        1;

    color:
        var(--turquoise);

}

.btn-header {

    border:
        1px solid
        rgba(
            255,
            255,
            255,

            .6
        );

    white-space:
        nowrap;

}

.mobile-menu-button {

    display:
        none;

    background:
        none;

    border:
        0;

    color:
        white;

    font-size:
        24px;

    cursor:
        pointer;

}




/* =============================================================
   [TRV-10] HERO PRINCIPAL
   Identificador de sección: [TRV-10]
============================================================= */
/* =====================================================
   HERO
===================================================== */

.hero {

    min-height: 760px;

    position: relative;

    display: flex;

    align-items: center;

    background:
        url("../images/pool-resort-banner.jpg")
        center / cover
        no-repeat;

    color: white;

}

/* =====================================================
   HERO — CARRUSEL DE BANNERS
===================================================== */

.hero-slides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;
    transition: opacity 1.5s ease-in-out;

    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
}

/* =====================================================
   HERO — OVERLAY
===================================================== */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,26,53,.94),
            rgba(7,26,53,.60),
            rgba(7,26,53,.15)
        );

    z-index: 1;
}

/* =====================================================
   CONTENIDO DEL HERO
===================================================== */

.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 760px;

    padding-top: 80px;

    padding-bottom: 60px;

}


/* =====================================================
   EYEBROW
===================================================== */

.eyebrow {

    color: var(--turquoise);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

}


/* =====================================================
   TÍTULO
===================================================== */

.hero h1 {

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

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    font-weight: 800;

    line-height: .98;

    letter-spacing: -2px;

    margin: 18px 0 28px;

}


.hero h1 span {

    display: block;

    color: var(--turquoise);

}


/* =====================================================
   DESCRIPCIÓN
===================================================== */

.hero p {

    max-width: 650px;

    font-size: 19px;

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

}


/* =====================================================
   BOTONES
===================================================== */

.hero-actions {

    display: flex;

    gap: 14px;

    margin-top: 36px;

}


/* =====================================================
   CARACTERÍSTICAS
===================================================== */

.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 35px;

    font-size: 13px;

    color:
        rgba(
            255,
            255,
            255,
            .8
        );

}


/* =====================================================
   ESTADÍSTICAS
===================================================== */

.hero-stats {

    display: flex;

    gap: 32px;

    margin-top: 48px;

    align-items: flex-start;

}


.hero-stats > div {

    text-align: left;

}


/* =====================================================
   VALORES — ESTADÍSTICAS
===================================================== */

.hero-stats .text-3xl {

    color: #C68C28;

}


/* =====================================================
   DESCRIPCIÓN — ESTADÍSTICAS
===================================================== */

.hero-stats .text-sm {

    color: rgba(255, 255, 255, .70);

}



/* =============================================================
   [TRV-11] CONCEPT / INTRODUCCIÓN
   Identificador de sección: [TRV-11]
============================================================= */
/* =====================================================
   CONCEPT
===================================================== */

.concept-intro {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

    margin-bottom:
        80px;

}

.concept-copy h3 {

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

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height:
        1.1;

    letter-spacing:
        -.8px;

    margin:
        12px 0 20px;

}

.concept-copy p {

    color:
        var(--muted);

    margin-bottom:
        18px;

}

.concept-image img {

    height:
        440px;

    border-radius:
        var(--radius);

}



/* =============================================================
   [TRV-12] VIDEOS
   Identificador de sección: [TRV-12]
============================================================= */
/* =====================================================
   VIDEOS
===================================================== */

.videos-heading {

    text-align:
        center;

    margin-bottom:
        30px;

}

.videos-heading h3 {

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

    font-size:
        30px;

    margin-top:
        10px;

}

.video-grid {

    display:
        grid;

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

    gap:
        22px;

}

.video-card {

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    overflow:
        hidden;

    box-shadow:
        var(--shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.video-card:hover {

    transform:
        translateY(-5px);

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

}

.video-wrapper {

    position:
        relative;

    aspect-ratio:
        16 / 9;

    background:
        var(--navy);

    overflow:
        hidden;

}

.video-wrapper iframe {

    width:
        100%;

    height:
        100%;

    border:
        0;

}

.video-content {

    padding:
        22px;

}

.video-number {

    color:
        var(--turquoise);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2px;

}

.video-content h4 {

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

    font-size:
        21px;

    margin:
        7px 0;

}

.video-content p {

    color:
        var(--muted);

    font-size:
        14px;

}



/* =============================================================
   [TRV-13] CÓMO FUNCIONA — STEPS
   Identificador de sección: [TRV-13]
============================================================= */
/* =====================================================
   STEPS
===================================================== */

.steps {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        40px;

}

.step {

    position:
        relative;

}

.step-number {

    font-size:
        46px;

    font-weight:
        800;

    color:
        var(--turquoise);

    margin-bottom:
        15px;

}

.step h3 {

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

    font-size:
        22px;

    margin-bottom:
        10px;

}

.step p {

    color:
        rgba(
            255,
            255,
            255,
            .65
        );

    font-size:
        14px;

}



/* =============================================================
   [TRV-14] BENEFICIOS
   Identificador de sección: [TRV-14]
============================================================= */
/* =====================================================
   BENEFITS
===================================================== */

.benefits-grid {

    display:
        grid;

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

    gap:
        22px;

}

.benefit-card {

    padding:
        34px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.benefit-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}

.benefit-icon {

    font-size:
        32px;

    margin-bottom:
        18px;

}

.benefit-card h3 {

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

    font-size:
        20px;

    margin-bottom:
        8px;

}

.benefit-card p {

    color:
        var(--muted);

    font-size:
        14px;

}



/* =============================================================
   [TRV-15] COMUNIDAD — INTRO
   Identificador de sección: [TRV-15]
============================================================= */
/* =====================================================
   COMMUNITY
===================================================== */

.community-intro {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

}

.community-image img {

    height:
        500px;

    border-radius:
        20px;

}

.community-badge {

    display:
        inline-block;

    padding:
        7px 12px;

    border-radius:
        50px;

    background:
        rgba(
            24,
            183,
            176,
            .1
        );

    color:
        var(--turquoise-dark);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}

.community-copy h3 {

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

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    line-height:
        1.08;

    letter-spacing:
        -.8px;

    margin:
        15px 0 20px;

}

.community-copy p {

    color:
        var(--muted);

    margin-bottom:
        18px;

}



/* =============================================================
   [TRV-16] REUNIONES / MEETINGS
   Identificador de sección: [TRV-16]
============================================================= */
/* =====================================================
   MEETINGS
===================================================== */

.meetings-box {

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    gap:
        25px;

    align-items:
        center;

    margin-top:
        70px;

    padding:
        32px;

    background:
        var(--light);

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

    border-radius:
        18px;

}

.meeting-icon {

    width:
        60px;

    height:
        60px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    background:
        var(--white);

    font-size:
        28px;

    box-shadow:
        var(--shadow);

}

.meeting-content h3 {

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

    font-size:
        25px;

    margin:
        5px 0 7px;

}

.meeting-content p {

    color:
        var(--muted);

    font-size:
        14px;

    max-width:
        700px;

}



/* =============================================================
   [TRV-17] LIVE EN TIKTOK
   Identificador de sección: [TRV-17]
============================================================= */
/* =====================================================
   TIKTOK LIVE
===================================================== */

.live-section {

    margin-top:
        90px;

}

.live-heading {

    max-width:
        700px;

    margin-bottom:
        35px;

}

.live-heading h3 {

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

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height:
        1.08;

    margin:
        10px 0 15px;

}

.live-heading p {

    color:
        var(--muted);

}

.live-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        25px;

}

.live-card {

    display:
        grid;

    grid-template-columns:
        230px 1fr;

    background:
        var(--white);

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

    border-radius:
        20px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);

}

.host-photo {

    position:
        relative;

    height:
        100%;

    min-height:
        310px;

    overflow:
        hidden;

    background:
        var(--navy);

}

.host-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        filter .55s ease;

}

.live-card:hover .host-photo img {

    transform:
        scale(1.055);

    filter:
        brightness(1.08)
        contrast(1.04);

}



/* =============================================================
   [TRV-18] EFECTOS DE FOTOGRAFÍA — MIRROR / SHINE
   Identificador de sección: [TRV-18]
============================================================= */
/* =====================================================
   PHOTO MIRROR / SHINE
===================================================== */

.photo-shine {

    position:
        absolute;

    top:
        -20%;

    left:
        -80%;

    width:
        45%;

    height:
        140%;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.05) 35%,
            rgba(255,255,255,.45) 50%,
            rgba(255,255,255,.05) 65%,
            transparent 100%
        );

    transform:
        skewX(-18deg);

    pointer-events:
        none;

    transition:
        left .75s cubic-bezier(.2,.7,.2,1);

}

.live-card:hover .photo-shine {

    left:
        145%;

}

.live-indicator {

    position:
        absolute;

    top:
        15px;

    left:
        15px;

    z-index:
        3;

    padding:
        6px 10px;

    border-radius:
        50px;

    background:
        rgba(
            7,
            26,
            53,
            .8
        );

    backdrop-filter:
        blur(8px);

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

}

.live-card-content {

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}

.host-role {

    color:
        var(--turquoise);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.8px;

}

.live-card-content h4 {

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

    font-size:
        27px;

    margin:
        8px 0 20px;

}

.live-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    color:
        var(--muted);

    font-size:
        13px;

    margin-bottom:
        25px;

}

.tiktok-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        45px;

    padding:
        0 16px;

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

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        .25s ease;

}

.tiktok-button:hover {

    background:
        var(--navy);

    color:
        white;

    transform:
        translateY(-2px);

}

.tiktok-icon {

    font-size:
        17px;

}



/* =============================================================
   [TRV-19] MEMBRESÍAS
   Identificador de sección: [TRV-19]
============================================================= */
/* =====================================================
   MEMBRESIAS
===================================================== */

.membership-grid {

    display:
        grid;

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

    gap:
        24px;

    align-items:
        stretch;

}

.membership-card {

    position:
        relative;

    padding:
        38px 32px;

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

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

    background:
        var(--white);

}

.membership-featured {

    border:
        2px solid
        var(--turquoise);

    transform:
        translateY(-12px);

}

.featured-label {

    position:
        absolute;

    top:
        -14px;

    left:
        50%;

    transform:
        translateX(-50%);

    background:
        var(--turquoise);

    color:
        white;

    padding:
        6px 18px;

    border-radius:
        50px;

    font-size:
        11px;

    font-weight:
        800;

}

.membership-header h3 {

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

    font-size:
        28px;

}

.membership-header p {

    color:
        var(--muted);

    font-size:
        14px;

    margin-top:
        6px;

}

.price {

    padding:
        30px 0;

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

}

.price small,
.price span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        13px;

}

.price strong {

    display:
        block;

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

    font-size:
        42px;

    color:
        var(--navy);

    margin:
        5px 0;

}

.membership-card ul {

    list-style:
        none;

    margin:
        25px 0;

}

.membership-card li {

    padding:
        7px 0;

    font-size:
        14px;

}

.points-badge {

    margin-top:
        20px;

    padding:
        10px;

    background:
        rgba(
            24,
            183,
            176,
            .1
        );

    color:
        var(--turquoise-dark);

    border-radius:
        8px;

    font-size:
        12px;

    font-weight:
        800;

    text-align:
        center;

}

.pricing-note {

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        35px;

}



/* =============================================================
   [TRV-20] PUNTOS
   Identificador de sección: [TRV-20]
============================================================= */
/* =====================================================
   POINTS
===================================================== */

.points-section {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    min-height:
        600px;

}

.points-image img {

    height:
        100%;

}

.points-content {

    padding:
        90px;

    display:
        flex;

    justify-content:
        center;

    flex-direction:
        column;

    background:
        var(--navy);

    color:
        var(--white);

}

.points-content h2 {

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

    font-size:
        52px;

    line-height:
        1.05;

    letter-spacing:
        -1px;

    margin:
        12px 0 20px;

}

.points-content p {

    color:
        rgba(
            255,
            255,
            255,
            .7
        );

    max-width:
        540px;

}

.points-grid {

    display:
        flex;

    gap:
        20px;

    margin:
        30px 0;

}

.point-box {

    width:
        170px;

    padding:
        22px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .15
        );

    border-radius:
        14px;

}

.point-box strong {

    display:
        block;

    font-size:
        44px;

    color:
        var(--turquoise);

}

.point-box span {

    font-size:
        13px;

}

.small-text {

    font-size:
        12px;

    margin-bottom:
        25px;

}



/* =============================================================
   [TRV-21] WORLD TOURS / DESTINOS
   Identificador de sección: [TRV-21]
============================================================= */
/* =====================================================
   WORLD TOURS
===================================================== */

.world-section {

    padding:
        100px 0;

    background:
        var(--navy);

    color:
        white;

}

.destinations {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        18px;

}

.destination {

    height:
        460px;

    border-radius:
        16px;

    overflow:
        hidden;

    position:
        relative;

    background-position:
        center;

    background-size:
        cover;

    transition:
        transform .35s ease;

}

.destination:hover {

    transform:
        translateY(-5px);

}

.destination::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            transparent 40%,
            rgba(0,0,0,.8)
        );

}

.destination > div {

    position:
        absolute;

    z-index:
        2;

    left:
        25px;

    bottom:
        25px;

}

.destination span {

    font-size:
        11px;

    letter-spacing:
        2px;

}

.destination h3 {

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

    font-size:
        32px;

}

.destination-paris {

    background-image:
        url("../images/paris.webp");

}

.destination-bali {

    background-image:
        url("../images/bali.webp");

}

.destination-iceland {

    background-image:
        url("../images/iceland.webp");

}

.destination-japan {

    background-image:
        url("../images/japan.webp");

}

.center-button {

    text-align:
        center;

    margin-top:
        40px;

}



/* =============================================================
   [TRV-22] GETAWAYS
   Identificador de sección: [TRV-22]
============================================================= */
/* =====================================================
   GETAWAYS
===================================================== */

.getaway-layout {

    display:
        grid;

    grid-template-columns:
        1.3fr .7fr;

    align-items:
        center;

}

.getaway-image img {

    min-height:
        580px;

    border-radius:
        18px;

}

.getaway-card {

    margin-left:
        -100px;

    position:
        relative;

    z-index:
        2;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    padding:
        55px;

    border-radius:
        18px;

    box-shadow:
        var(--shadow);

}

.getaway-card h2 {

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

    font-size:
        42px;

    line-height:
        1.1;

    letter-spacing:
        -.8px;

    margin:
        12px 0 20px;

}

.getaway-card p {

    color:
        var(--muted);

}

.highlight {

    margin:
        22px 0;

    padding:
        15px;

    background:
        rgba(
            216,
            181,
            106,
            .12
        );

    border-left:
        3px solid
        var(--gold);

    font-size:
        13px;

}



/* =============================================================
   [TRV-23] FAQ
   Identificador de sección: [TRV-23]
============================================================= */
/* =====================================================
   FAQ
===================================================== */

.faq-container {

    max-width:
        850px;

}

details {

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

}

summary {

    cursor:
        pointer;

    list-style:
        none;

    padding:
        25px 0;

    font-weight:
        700;

    font-size:
        16px;

}

summary::-webkit-details-marker {

    display:
        none;

}

summary::after {

    content:
        "+";

    float:
        right;

    font-size:
        22px;

    color:
        var(--turquoise);

}

details[open] summary::after {

    content:
        "−";

}

details p {

    color:
        var(--muted);

    padding:
        0 0 25px;

}



/* =============================================================
   [TRV-24] CONTACTO / FORMULARIO
   Identificador de sección: [TRV-24]
============================================================= */
/* =====================================================
   CONTACT
===================================================== */

.contact-section {

    position:
        relative;

    padding:
        110px 0;

    background:
        url("../images/contact.webp")
        center / cover
        no-repeat;

    color:
        white;

}

.contact-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            7,
            26,
            53,
            .88
        );

}

.contact-inner {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    align-items:
        center;

}

.contact-copy h2 {

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

    font-size:
        clamp(
            40px,
            5vw,
            62px
        );

    line-height:
        1.05;

    letter-spacing:
        -1px;

    margin:
        12px 0 20px;

}

.contact-copy p {

    max-width:
        550px;

    color:
        rgba(
            255,
            255,
            255,
            .7
        );

}

.lead-form {

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    color:
        var(--text);

    padding:
        35px;

    border-radius:
        18px;

    box-shadow:
        var(--shadow);

}

.form-group {

    margin-bottom:
        18px;

}

.form-group label {

    display:
        block;

    font-size:
        12px;

    font-weight:
        700;

    margin-bottom:
        7px;

}

.form-group input,
.form-group select {

    width:
        100%;

    height:
        48px;

    padding:
        0 14px;

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

    border-radius:
        8px;

    font:
        inherit;

    outline:
        none;

}

.form-group input:focus,
.form-group select:focus {

    border-color:
        var(--turquoise);

}

.checkbox {

    display:

        flex;

    gap:
        9px;

    align-items:
        flex-start;

    font-size:
        11px;

    color:
        var(--muted);

    margin:
        15px 0;

}

.checkbox input {

    margin-top:
        3px;

}

.btn-submit {

    width:
        100%;

    border:
        0;

    cursor:
        pointer;

}

.form-legal {

    text-align:
        center;

    color:
        var(--muted);

    font-size:
        10px;

    margin-top:
        12px;

}



/* =============================================================
   [TRV-25] FOOTER PRINCIPAL
   Identificador de sección: [TRV-25]
============================================================= */
/* =====================================================
   FOOTER
===================================================== */

.footer {

    background:
        #041126;

    color:
        white;

    padding:
        55px 0 20px;

}

.footer-inner {

    display:
        grid;

    grid-template-columns:
        1.3fr 1fr 1fr 1.2fr;

    gap:
        40px;

}

.footer-brand strong {

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

    font-size:
        20px;

}

.footer-brand p {

    color:
        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        12px;

    margin-top:
        8px;

}

.footer-links,
.footer-legal {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    font-size:
        12px;

    color:
        rgba(
            255,
            255,
            255,
            .6
        );

}

.footer-links a,
.footer-legal a {

    transition:
        .25s ease;

}

.footer-links a:hover,
.footer-legal a:hover {

    color:
        var(--turquoise);

}



/* =============================================================
   [TRV-26] REDES SOCIALES DEL FOOTER
   Identificador de sección: [TRV-26]
============================================================= */
/* =================================================
   REDES SOCIALES — FOOTER TRAVORIUM
   Iconografía: Yesicon / Iconify
   ================================================= */

.footer-social {
    text-align: center;
    margin-top: 30px;
}

.footer-social > span {
    display: block;
    margin-bottom: 16px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    opacity: 0.75;
}


/* =================================================
   CONTENEDOR DE ICONOS
   ================================================= */

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}


/* =================================================
   BOTONES SOCIALES
   ================================================= */

.social-icons a {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #ffffff;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =================================================
   ICONOS
   ================================================= */

.social-icons a span {
    display: inline-flex;

    width: 20px;
    height: 20px;

    align-items: center;
    justify-content: center;

    font-size: 20px;

    transition: transform 0.25s ease;
}


/* =================================================
   HOVER
   ================================================= */

.social-icons a:hover {
    transform: translateY(-4px);

    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.40);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


.social-icons a:hover span {
    transform: scale(1.10);
}


/* =================================================
   FOCUS — ACCESIBILIDAD
   ================================================= */

.social-icons a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 3px;
}


/* =================================================
   MOBILE
   ================================================= */

@media (max-width: 600px) {

    .footer-social {
        margin-top: 25px;
    }

    .footer-social > span {
        font-size: 11px;
        letter-spacing: 1.2px;
        margin-bottom: 14px;
    }

    .social-icons {
        gap: 10px;
    }

    .social-icons a {
        width: 40px;
        height: 40px;
    }

    .social-icons a span {
        width: 19px;
        height: 19px;
        font-size: 19px;
    }

}



/* =============================================================
   [TRV-27] FOOTER BOTTOM
   Identificador de sección: [TRV-27]
============================================================= */
/* =====================================================
   FOOTER BOTTOM
===================================================== */

.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .1
        );

    margin-top:
        40px;

    padding-top:
        20px;

    color:
        rgba(
            255,
            255,
            255,
            .4
        );

    font-size:
        10px;

}



/* =============================================================
   [TRV-28] RESPONSIVE — TABLET
   Identificador de sección: [TRV-28]
============================================================= */
/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .desktop-nav {

        gap:
            15px;

    }

    .desktop-nav a {

        font-size:
            11px;

    }

    .btn-header {

        padding:
            0 18px;

        font-size:
            11px;

    }

    .footer-inner {

        grid-template-columns:
            1fr 1fr;

    }

}



/* =============================================================
   [TRV-29] RESPONSIVE — TABLET / MOBILE
   Identificador de sección: [TRV-29]
============================================================= */
/* =====================================================
   TABLET / MOBILE
===================================================== */

@media (max-width: 900px) {

    .desktop-nav {

        display:
            none;

    }

    .desktop-nav.mobile-open {

        display:
            flex;

        position:
            absolute;

        top:
            78px;

        left:
            20px;

        right:
            20px;

        flex-direction:
            column;

        padding:
            20px;

        background:
            var(--navy);

        border-radius:
            12px;

        box-shadow:
            var(--shadow);

    }

    .desktop-nav.mobile-open a {

        padding:
            9px 0;

    }

    .btn-header {

        display:
            none;

    }

    .mobile-menu-button {

        display:
            block;

    }

    .section {

        padding:
            75px 0;

    }

    .concept-intro,
    .community-intro,
    .points-section,
    .getaway-layout,
    .contact-inner {

        grid-template-columns:
            1fr;

    }

    .concept-intro,
    .community-intro {

        gap:
            45px;

    }

    .video-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .steps {

        grid-template-columns:
            repeat(2,1fr);

    }

    .benefits-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .membership-grid {

        grid-template-columns:
            1fr;

    }

    .membership-featured {

        transform:
            none;

    }

    .points-image {

        height:
            400px;

    }

    .points-content {

        padding:
            70px 25px;

    }

    .destinations {

        grid-template-columns:
            repeat(2,1fr);

    }

    .getaway-card {

        margin:
            -70px 20px 0;

    }

    .live-grid {

        grid-template-columns:
            1fr;

    }

    .meetings-box {

        grid-template-columns:
            auto 1fr;

    }

    .meetings-box .btn {

        grid-column:
            1 / -1;

        justify-self:
            start;

    }

}



/* =============================================================
   [TRV-30] RESPONSIVE — MOBILE
   Identificador de sección: [TRV-30]
============================================================= */
/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .container {

        width:
            min(
                calc(100% - 30px),
                var(--container)
            );

    }

    .section {

        padding:
            65px 0;

    }

    .hero {

        min-height:
            680px;

    }

    .hero-content {

        padding-top:
            70px;

    }

    .hero h1 {

        font-size:
            48px;

        letter-spacing:
            -1.5px;

    }

    .hero p {

        font-size:
            16px;

    }

    .hero-actions {

        flex-direction:
            column;

    }

    .hero-actions .btn {

        width:
            100%;

    }

    .hero-features {

        gap:
            10px;

        font-size:
            11px;

    }

    .section-heading {

        margin-bottom:
            45px;

    }

    .section-heading h2 {

        font-size:
            34px;

    }

    .concept-image img {

        height:
            330px;

    }

    .video-grid,
    .benefits-grid,
    .steps,
    .destinations {

        grid-template-columns:
            1fr;

    }

    .video-content {

        padding:
            20px;

    }

    .community-image img {

        height:
            350px;

    }

    .meetings-box {

        grid-template-columns:
            1fr;

        padding:
            25px;

    }

    .meetings-box .btn {

        width:
            100%;

    }

    .live-section {

        margin-top:
            65px;

    }

    .live-card {

        grid-template-columns:
            1fr;

    }

    .host-photo {

        min-height:
            360px;

    }

    /*
       En móvil no dependemos del hover.
       La fotografía permanece estable para
       una experiencia táctil limpia.
    */

    .live-card:hover .host-photo img {

        transform:
            none;

        filter:
            none;

    }

    .live-card:hover .photo-shine {

        left:
            -80%;

    }

    .live-card-content {

        padding:
            25px;

    }

    .tiktok-button {

        width:
            100%;

    }

    .split-content h2,
    .points-content h2 {

        font-size:
            38px;

    }

    .check-list {

        grid-template-columns:
            1fr;

    }

    .destination {

        height:
            350px;

    }

    .getaway-image img {

        min-height:
            400px;

    }

    .getaway-card {

        padding:
            30px;

    }

    .getaway-card h2 {

        font-size:
            34px;

    }

    .points-grid {

        flex-direction:
            column;

    }

    .point-box {

        width:
            100%;

    }

    .contact-inner {

        gap:
            40px;

    }

    .lead-form {

        padding:
            25px 20px;

    }

    .footer-inner {

        grid-template-columns:
            1fr;

    }

    .footer-bottom {

        flex-direction:
            column;

    }

}



/* =============================================================
   [TRV-31] ACCESIBILIDAD / REDUCED MOTION
   Identificador de sección: [TRV-31]
============================================================= */
/* =====================================================
   REDUCED MOTION
   Accesibilidad
===================================================== */

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

    html {

        scroll-behavior:
            auto;

    }

    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}


/* =============================================================
   [TRV-40] OVERRIDES — HERO CARRUSEL
   Identificador de sección: [TRV-40]
============================================================= */
/* =====================================================
HERO — CARRUSEL DE 5 BANNERS
Travorium Club Chihuahua
===================================================== */

.hero {
position: relative;
overflow: hidden;
}

/* =====================================================
CONTENEDOR DE BANNERS
===================================================== */

.hero-slides {
position: absolute;
inset: 0;

width: 100%;
height: 100%;

z-index: 0;

}

/* =====================================================
CADA BANNER
===================================================== */

.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;

background-position: center center;
background-repeat: no-repeat;
background-size: cover;

opacity: 0;

visibility: hidden;

transform: scale(1.02);

transition:
    opacity 1s ease,
    visibility 1s ease,
    transform 6s ease;

}

/* =====================================================
BANNER ACTIVO
===================================================== */

.hero-slide.active {
opacity: 1;

visibility: visible;

transform: scale(1);

}

/* =====================================================
OVERLAY
Se mantiene por encima de los banners
===================================================== */

.hero-overlay {
position: absolute;
inset: 0;

z-index: 1;

background:
    linear-gradient(
        90deg,
        rgba(2, 11, 34, 0.82) 0%,
        rgba(2, 11, 34, 0.62) 35%,
        rgba(2, 11, 34, 0.30) 70%,
        rgba(2, 11, 34, 0.42) 100%
    );

}

/* =====================================================
CONTENIDO DEL HERO
===================================================== */

.hero-content {
position: relative;


z-index: 3;


}

/* =====================================================
INDICADORES
===================================================== */

.hero-dots {
position: absolute;

left: 50%;
bottom: 28px;

transform: translateX(-50%);

display: flex;
align-items: center;

gap: 9px;

z-index: 5;

}

/* =====================================================
DOT
===================================================== */

.hero-dot {
width: 9px;
height: 9px;

padding: 0;

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

border-radius: 50%;

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

cursor: pointer;

transition:
    width 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;

}

/* =====================================================
DOT ACTIVO
===================================================== */

.hero-dot.active {
width: 24px;


border-radius: 20px;

background: #ffffff;

border-color: #ffffff;


}

/* =====================================================
HOVER
===================================================== */

.hero-dot:hover {
transform: scale(1.15);


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


}

/* =====================================================
ACCESIBILIDAD
===================================================== */

.hero-dot:focus-visible {
outline: 2px solid #ffffff;

outline-offset: 4px;


}

/* =====================================================
MOBILE
===================================================== */

@media (max-width: 768px) {

.hero-slide {
    background-position: center center;
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 34, 0.78),
            rgba(2, 11, 34, 0.48)
        );
}

.hero-dots {
    bottom: 20px;

    gap: 7px;
}

.hero-dot {
    width: 8px;
    height: 8px;
}

.hero-dot.active {
    width: 21px;
}


}


/* =============================================================
   [TRV-41] OVERRIDES — LIVE / WHATSAPP / TIKTOK
   Identificador de sección: [TRV-41]
============================================================= */
/* =========================================================
   WhatsApp — LIVE cards
   Aumenta el tamaño del icono de WhatsApp
   ========================================================= */

.live-whatsapp-icon {
    font-size: 26px;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}


/* =========================================================
   Título — Primero conoce Travorium Degradado continuo rosa / morado
   El color se aplica de forma uniforme sobre todo el texto
   ========================================================= */

.title-pink-purple {
    background: linear-gradient(
        90deg,
        #DB49E8 40%,
        #C24CEF 20%,
        #8B5CF6 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



/* =========================================================
   BOTÓN TIKTOK
   Contorno multicolor profesional con animación sutil
   ========================================================= */

.tiktok-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 22px;

    color: #ffffff;
    background: #081224;

    border-radius: 12px;

    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.3px;

    /* Borde degradado */
    border: 2px solid transparent;

    background:
        linear-gradient(#081224, #081224) padding-box,
        linear-gradient(
            120deg,
            #25F4EE,
            #A855F7,
            #EC4899,
            #FE2C55,
            #25F4EE
        ) border-box;

    background-size:
        100% 100%,
        300% 300%;

    animation: tiktokBorder 5s ease infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Movimiento suave del degradado */

@keyframes tiktokBorder {

    0% {
        background-position:
            0% 0%,
            0% 50%;
    }

    50% {
        background-position:
            0% 0%,
            100% 50%;
    }

    100% {
        background-position:
            0% 0%,
            0% 50%;
    }
}


/* Hover */

.tiktok-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 12px rgba(37, 244, 238, 0.18),
        0 0 18px rgba(168, 85, 247, 0.15),
        0 0 22px rgba(236, 72, 153, 0.12);
}


/* Icono TikTok */

.tiktok-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiktok-icon iconify-icon {
    font-size: 26px;
    width: 26px;
    height: 26px;
}


/* =========================================================
   Icono Diversity 2 Rounded
   Tamaño aproximado: 60% del botón
   ========================================================= */

.tiktok-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiktok-icon iconify-icon {
    font-size: 35px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}



/* =============================================================
   [TRV-42] OVERRIDES — BOTÓN QUIERO CONOCERLOS
   Identificador de sección: [TRV-42]
============================================================= */
/* =========================================================
   BOTÓN — QUIERO CONOCERLOS
   Mismo efecto premium del botón TikTok
   ========================================================= */

.conocerlos-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 22px;

    color: #ffffff;
    background: #081224;

    border-radius: 12px;

    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.3px;

    border: 2px solid transparent;

    background:
        linear-gradient(#081224, #081224) padding-box,
        linear-gradient(
            120deg,
            #25F4EE,
            #A855F7,
            #EC4899,
            #FE2C55,
            #25F4EE
        ) border-box;

    background-size:
        100% 100%,
        300% 300%;

    animation: conocerlosBorder 5s ease infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Movimiento suave del contorno */

@keyframes conocerlosBorder {

    0% {
        background-position:
            0% 0%,
            0% 50%;
    }

    50% {
        background-position:
            0% 0%,
            100% 50%;
    }

    100% {
        background-position:
            0% 0%,
            0% 50%;
    }
}


/* Hover */

.conocerlos-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 12px rgba(37, 244, 238, 0.18),
        0 0 18px rgba(168, 85, 247, 0.15),
        0 0 22px rgba(236, 72, 153, 0.12);
}



/* =============================================================
   [TRV-43] OVERRIDES — MEETINGS
   Identificador de sección: [TRV-43]
============================================================= */
/* =========================================================
   MEETINGS BOX
   Barrido de luces multicolor en el fondo interno
   Tipo luces de discoteca / escenario
   ========================================================= */

.meetings-box {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Fondo base */
    background: #081224;
}


/* Capa de luces */

.meetings-box::before {
    content: "";

    position: absolute;
    inset: -60%;

    z-index: -1;

    background:
        radial-gradient(
            ellipse 18% 65% at 10% 50%,
            rgba(236, 72, 153, 0.55) 0%,
            rgba(236, 72, 153, 0.18) 35%,
            transparent 70%
        ),

        radial-gradient(
            ellipse 16% 70% at 35% 50%,
            rgba(168, 85, 247, 0.55) 0%,
            rgba(168, 85, 247, 0.16) 35%,
            transparent 70%
        ),

        radial-gradient(
            ellipse 18% 70% at 60% 50%,
            rgba(37, 244, 238, 0.48) 0%,
            rgba(37, 244, 238, 0.14) 35%,
            transparent 70%
        ),

        radial-gradient(
            ellipse 16% 65% at 85% 50%,
            rgba(59, 130, 246, 0.50) 0%,
            rgba(59, 130, 246, 0.15) 35%,
            transparent 70%
        );

    filter: blur(28px);

    transform: rotate(-12deg) scale(1.2);

    animation: meetingLights 8s ease-in-out infinite alternate;
}


/* Barrido de las luces */

@keyframes meetingLights {

    0% {
        transform:
            translateX(-18%)
            rotate(-12deg)
            scale(1.2);
    }

    50% {
        transform:
            translateX(5%)
            rotate(8deg)
            scale(1.25);
    }

    100% {
        transform:
            translateX(18%)
            rotate(-8deg)
            scale(1.2);
    }
}


/* Contenido siempre por encima de las luces */

.meetings-box > * {
    position: relative;
    z-index: 1;
}


/* =============================================================
   [TRV-44] OVERRIDES — TÍTULOS / COMUNIDAD
   Identificador de sección: [TRV-44]
============================================================= */
/* =========================================================
Título de comunidad Color blanco
========================================================= */

.meeting-content h3 { color: #FFFFFF; }




/* =============================================================
   [TRV-45] OVERRIDES — PLATINUM / EFECTOS
   Identificador de sección: [TRV-45]
============================================================= */
/* =========================================================
   EFECTO ESPEJO — BOTÓN CONOCER PLATINUM
   Aplica al botón .btn-card
   ========================================================= */

.btn-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Reflejo de luz */
.btn-card::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -80%;
    width: 45%;
    height: 220%;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
    );

    transform: rotate(20deg);
    transition: left 0.75s ease;
    pointer-events: none;
    z-index: 1;
}

/* Barrido del reflejo al seleccionar */
.btn-card:hover::before,
.btn-card:focus-visible::before {
    left: 135%;
}

/* Mantiene el texto por encima del reflejo */
.btn-card {
    color: #ffffff;
}

.btn-card:hover,
.btn-card:focus-visible {
    color: #ffffff;
}



/* =========================================================
   PLATINUM — FONDO BLANCO + CONTORNO ANIMADO
   El fondo es blanco.
   El efecto animado se aplica únicamente al contorno.
   
   Colores del contorno:
   1. Blanco
   2. Platinum claro
   3. Platinum gris
   4. Morado
   ========================================================= */

.membership-card.membership-featured {
    position: relative;
    isolation: isolate;

    /* Fondo blanco */
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,

        /* Contorno animado */
        linear-gradient(
            120deg,
            #FFFFFF,
            #E5E7EB,
            #94A3B8,
            #A855F7,
            #E5E7EB,
            #FFFFFF
        ) border-box;

    border: 2px solid transparent;

    background-size:
        100% 100%,
        300% 300%;

    animation: platinumBorder 8s ease infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   ANIMACIÓN DEL CONTORNO
   ========================================================= */

@keyframes platinumBorder {

    0% {
        background-position:
            0 0,
            0% 50%;
    }

    25% {
        background-position:
            0 0,
            50% 100%;
    }

    50% {
        background-position:
            0 0,
            100% 50%;
    }

    75% {
        background-position:
            0 0,
            50% 0%;
    }

    100% {
        background-position:
            0 0,
            0% 50%;
    }
}


/* =========================================================
   BRILLO AL SELECCIONAR
   ========================================================= */

.membership-card.membership-featured:hover {
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.35),
        0 0 18px rgba(148, 163, 184, 0.20),
        0 0 26px rgba(168, 85, 247, 0.15);

    transform: translateY(-3px);
}


/* =========================================================
   CONTENIDO SOBRE EL FONDO
   ========================================================= */

.membership-card.membership-featured > * {
    position: relative;
    z-index: 1;
}



/* =============================================================
   [TRV-46] PROTECCIÓN DE CONTENIDO / IMÁGENES
   Identificador de sección: [TRV-46]
============================================================= */
/* =========================================================
   PROTECCIÓN CONTRA SELECCIÓN Y ARRASTRE
   ========================================================= */

html,
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}


/* Evita arrastrar imágenes */
img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}



/* =============================================================
   [TRV-47] OVERRIDES — BENEFIT CARDS
   Identificador de sección: [TRV-47]
============================================================= */
/* =========================================================
   TRAVORIUM — BENEFIT CARD
   Interior: blanco glassmorphism
   Contorno: 3 tonalidades doradas
   ========================================================= */

.benefit-card {
    position: relative;
    overflow: hidden;

    /* INTERIOR BLANCO TRANSPARENTE */
    background: rgba(255, 255, 255, 0.10);

    /* Efecto glass */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* Contorno transparente para permitir el degradado */
    border: 2px solid transparent;
    border-radius: 18px;

    /* SOLO EL BORDE es dorado */
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.10)
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FFFFFF 50%,
            #FFFFFF 100%
        );

    background-origin: border-box;
    background-clip: padding-box, border-box;

    /* Bisel blanco */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.45),
        inset -1px -1px 2px rgba(255, 255, 255, 0.12),
        0 12px 30px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* =========================================================
   REFLEJO BLANCO DE CRISTAL
   ========================================================= */

.benefit-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: -100%;

    width: 55%;
    height: 100%;

    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 100%
    );

    transform: skewX(-18deg);

    pointer-events: none;

    transition: left 0.7s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.benefit-card:hover {
    transform: translateY(-6px);

    box-shadow:
        inset 1px 1px 3px rgba(255, 255, 255, 0.55),
        inset -1px -1px 3px rgba(255, 255, 255, 0.15),
        0 18px 40px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(198, 140, 40, 0.18);
}


/* Reflejo al pasar el mouse */

.benefit-card:hover::before {
    left: 140%;
}


/* =========================================================
   ÍCONO DORADO
   ========================================================= */

.benefit-card .travel-icon iconify-icon {
    position: relative;
    z-index: 2;

    font-size: 42px;
    color: #C68C28;

    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));

    transition:
        transform 0.4s ease,
        color 0.4s ease;
}

.benefit-card:hover .travel-icon iconify-icon {
    color: #E8C46A;
    transform: scale(1.07);
}



/* =============================================================
   [TRV-48] FOOTER — CONTACTO Y SEDE CHIHUAHUA
   Identificador de sección: [TRV-48]
============================================================= */
/* =========================================================
   FOOTER — CONTACTO Y SEDE CHIHUAHUA
   Centrado y tipografía mejorada
   ========================================================= */

.footer-bottom > div {
    text-align: center;
}

/* Títulos: Contacto / Sede Chihuahua */
.footer-bottom > div h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.2px;
}

/* Contenido de contacto */
.footer-bottom > div p,
.footer-bottom > div a {
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Correo */
.footer-bottom > div a {
    justify-content: center;
}

/* Horario y fax */
.footer-bottom > div .text-xs {
    font-size: 0.88rem;
    line-height: 1.7;
}

/* Dirección Chihuahua */
.footer-bottom > div .gt-block {
    line-height: 1.7;
}


/* =============================================================
   [TRV-50] SECCIÓN CÓMO FUNCIONA — DISEÑO PERSONALIZADO
   Identificador de sección: [TRV-50]
============================================================= */
/* =====================================================
   SECCIÓN — CÓMO FUNCIONA
   Fondo fotográfico + gradiente
===================================================== */

.process-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 110px 0;

    min-height: 600px;

    color: #ffffff;
}


/* =====================================================
   IMAGEN DE FONDO
===================================================== */

.process-background {
    position: absolute;
    inset: 0;

    z-index: -3;

    background-image: url("images/fondo-buceo.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =====================================================
   GRADIENTE
   MISMA PALETA QUE EL DISEÑO ACTUAL

   Naranja → Púrpura → Azul
===================================================== */

.process-gradient {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(124, 45, 18, 0.90) 0%,
            rgba(88, 28, 135, 0.90) 50%,
            rgba(30, 58, 138, 0.90) 100%
        );
}


/* =====================================================
   CONTENEDOR
===================================================== */

.process-container {
    position: relative;
    z-index: 2;
}


/* =====================================================
   ENCABEZADO
===================================================== */

.process-heading {
    position: relative;

    text-align: center;

    margin-bottom: 70px;
}


/* =====================================================
   ETIQUETA
===================================================== */

.process-heading .section-label {
    display: inline-block;

    margin-bottom: 18px;

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

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* =====================================================
   TÍTULO
===================================================== */

.process-heading .process-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 52px);

    font-weight: 700;

    line-height: 1.15;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.20);
}


/* =====================================================
   DESCRIPCIÓN
===================================================== */

.process-heading > p {
    max-width: 650px;

    margin: 20px auto 0;

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

    font-size: 18px;

    line-height: 1.7;
}


/* =====================================================
   GRID DE PASOS
===================================================== */

.process-section .steps {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 30px;

    max-width: 1150px;

    margin: 0 auto;

}


/* =====================================================
   PASO
===================================================== */

.process-section .step {
    position: relative;

    text-align: center;

    padding: 30px 24px;

    border-radius: 18px;

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

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

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

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}


/* =====================================================
   HOVER
===================================================== */

.process-section .step:hover {
    transform: translateY(-6px);

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

    border-color: rgba(255, 255, 255, 0.28);
}


/* =====================================================
   NÚMERO
===================================================== */

.process-section .step-number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin: 0 auto 22px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;

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

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

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.15);
}


/* =====================================================
   TÍTULO DEL PASO
===================================================== */

.process-section .step h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;
}


/* =====================================================
   TEXTO DEL PASO
===================================================== */

.process-section .step p {
    margin: 0;

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

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   RESPONSIVE — TABLET
===================================================== */

@media (max-width: 900px) {

    .process-section .steps {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }

}


/* =====================================================
   RESPONSIVE — MÓVIL
===================================================== */

@media (max-width: 600px) {

    .process-section {
        padding: 80px 20px;
    }


    .process-heading {
        margin-bottom: 45px;
    }


    .process-heading .process-title {
        font-size: 30px;
    }


    .process-heading > p {
        font-size: 16px;
    }


    .process-section .steps {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .process-section .step {
        padding: 28px 22px;
    }

}



/* =============================================================
   [TRV-51] COMUNIDAD — CTA PRINCIPAL
   Identificador de sección: [TRV-51]
============================================================= */
/* =====================================================
   COMUNIDAD — CTA TRAVORIUM
   Versión: 1.0
   Fecha: 20/09/2026
===================================================== */


/* =====================================================
   SECCIÓN PRINCIPAL
===================================================== */

#comunidad {
    position: relative;
    width: 100%;
    padding: 96px 0;
    
    background:
        linear-gradient(
            90deg,
            #2563EB 0%,
            #7C3AED 50%,
            #EC4899 100%
        );

    overflow: hidden;
}


/* =====================================================
   CONTENEDOR
===================================================== */

#comunidad .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* =====================================================
   CONTENIDO
===================================================== */

#comunidad .max-w-4xl {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   TEXTO SUPERIOR
===================================================== */

#comunidad p.text-white\/90:first-child {
    margin-top: 0;
    margin-bottom: 18px;

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

    font-size: 18px;
    font-weight: 500;

    letter-spacing: 0.03em;
}


/* =====================================================
   TÍTULO PRINCIPAL
===================================================== */

#comunidad h2 {
    margin-top: 0;
    margin-bottom: 32px;

    color: #ffffff;

    font-size: 52px;
    line-height: 1.12;
    font-weight: 700;

    letter-spacing: -0.02em;
}


/* =====================================================
   DESCRIPCIÓN
===================================================== */

#comunidad p.text-white\/90.text-xl {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;

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

    font-size: 20px;
    line-height: 1.7;
    font-weight: 400;
}


/* =====================================================
   CONTENEDOR DEL BOTÓN
===================================================== */

#comunidad .flex {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =====================================================
   BOTÓN CTA
===================================================== */

#comunidad a[href="/join.php"] {
    display: inline-block;

    text-decoration: none;
}


#comunidad a[href="/join.php"] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 58px;
    padding: 16px 40px;

    border: 0;
    border-radius: 999px;

    background: #ffffff;
    color: #7C3AED;

    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* =====================================================
   HOVER DEL BOTÓN
===================================================== */

#comunidad a[href="/join.php"] button:hover {
    background: #ffffff;

    transform: translateY(-3px) scale(1.03);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22);
}


/* =====================================================
   EFECTO DE LUZ
===================================================== */

#comunidad::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    left: -180px;

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

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;
}


#comunidad::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -180px;
    bottom: -250px;

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

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #comunidad {
        padding: 80px 0;
    }

    #comunidad h2 {
        font-size: 44px;
    }

    #comunidad p.text-white\/90.text-xl {
        font-size: 19px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 640px) {

    #comunidad {
        padding: 70px 0;
    }


    #comunidad .container {
        padding-left: 20px;
        padding-right: 20px;
    }


    #comunidad p.text-white\/90:first-child {
        margin-bottom: 14px;

        font-size: 16px;
    }


    #comunidad h2 {
        margin-bottom: 24px;

        font-size: 34px;
        line-height: 1.18;
    }


    #comunidad p.text-white\/90.text-xl {
        margin-bottom: 36px;

        font-size: 17px;
        line-height: 1.65;
    }


    #comunidad a[href="/join.php"] button {
        width: 100%;
        min-height: 56px;

        padding: 15px 28px;

        font-size: 15px;
    }

}




/* =============================================================
   [TRV-52] COMUNIDAD — FONDO FOTOGRÁFICO
   Identificador de sección: [TRV-52]
============================================================= */
/* =====================================================
   COMUNIDAD — FONDO FOTOGRÁFICO
   Versión: 1.1
   Fecha: 20/09/2026
===================================================== */

#comunidad {
    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.78),
            rgba(124, 58, 237, 0.72),
            rgba(236, 72, 153, 0.68)
        ),
        url("../images/comunidad-travorium.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =====================================================
   CONTENIDO SOBRE EL FONDO
===================================================== */

#comunidad .container {
    position: relative;
    z-index: 2;
}


/* =====================================================
   CENTRADO
===================================================== */

#comunidad,
#comunidad .container,
#comunidad .max-w-4xl {
    text-align: center !important;
}

#comunidad p,
#comunidad h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =====================================================
   TÍTULO
===================================================== */

#comunidad h2 {
    max-width: 900px;
}


/* =====================================================
   DESCRIPCIÓN
===================================================== */

#comunidad p.text-white\/90.text-xl {
    max-width: 850px;
}


/* =====================================================
   BOTÓN
===================================================== */

#comunidad .flex {
    justify-content: center !important;
    align-items: center !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 640px) {

    #comunidad {
        background-position: center center;
    }

}




/* =============================================================
   [TRV-53] ICONOS — LIVE TIKTOK Y MEMBRESÍAS
   Identificador de sección: [TRV-53]
============================================================= */
/* =====================================================
ICONOS / LIVE TIKTOK
===================================================== */ 

.calendar-check-icon { font-size: 23px; color: #C68C28; vertical-align: middle; }

.history-toggle-icon { font-size: 23px; color: #C68C28; vertical-align: middle; }

.map-arrow-icon { font-size: 23px; color: #C68C28; vertical-align: middle; }

.whatsapp-icon { font-size: 23px; color: #C68C28; vertical-align: middle; }


/* =====================================================
ICONO CHECK VERDE - MEMBRESIAS
===================================================== */ 

.check-icon { font-size: 25px; color: #65a30d; vertical-align: middle; }

.minus-circle-icon { font-size: 23px; color: #999999; vertical-align: middle; }

/* =====================================================
ICONO HOTEL 5 ESTRELLAS
===================================================== */ 

.hotel-star-icon { font-size: 25px; color: #C68C28; vertical-align: middle; }

.ship-icon { font-size: 28px; color: #C68C28; vertical-align: middle; }

.flights-hotels-icon { font-size: 28px; color: #C68C28; vertical-align: middle; }

.car-icon { font-size: 28px; color: #C68C28; vertical-align: middle; }

.snorkel-icon { font-size: 32px; color: #C68C28; vertical-align: middle;}

.star-icon {font-size: 25px; color: #eab308; vertical-align: middle;}



/* =============================================================
   [TRV-54] HERO STATS — ESTADÍSTICAS
   Identificador de sección: [TRV-54]
============================================================= */
/* =====================================================
   HERO STATS
   Versión: 1.0
   Fecha: 20/09/2026
===================================================== */


/* Contenedor */

.hero-stats {
    display: flex;
    align-items: center;
    gap: 50px;
}


/* Cada estadística */

.hero-stat {
    text-align: left;
}


/* NÚMEROS
   Ejemplo: 10+ / 65+ / 2000+
*/

.hero-stat-number {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    color: #C68C28;

    margin-bottom: 6px;
}


/* TEXTOS
   Ejemplo: Años en el negocio / Países / Socios del resort
*/

.hero-stat-label {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.70);
}


/* -----------------------------------------------------
   TABLET
----------------------------------------------------- */

@media (max-width: 768px) {

    .hero-stats {
        gap: 30px;
    }

    .hero-stat-number {
        font-size: 30px;
    }

    .hero-stat-label {
        font-size: 13px;
    }

}


/* -----------------------------------------------------
   MÓVIL
----------------------------------------------------- */

@media (max-width: 520px) {

    .hero-stats {
        gap: 20px;
        justify-content: center;
    }

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

    .hero-stat-number {
        font-size: 27px;
    }

    .hero-stat-label {
        font-size: 12px;
    }

}



/* =============================================================
   [TRV-55] VIDEOS — EFECTO ESPEJO / REFLEJO
   Identificador de sección: [TRV-55]
============================================================= */
/* =====================================================
   VIDEOS — EFECTO ESPEJO / REFLEJO
   Versión: 1.0
   Fecha: 20/09/2026
===================================================== */


/* -----------------------------------------------------
   TARJETA DEL VIDEO
----------------------------------------------------- */

.video-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


/* -----------------------------------------------------
   EFECTO DE ELEVACIÓN AL PASAR EL MOUSE
----------------------------------------------------- */

.video-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.20);
}


/* -----------------------------------------------------
   CONTENEDOR DEL VIDEO
----------------------------------------------------- */

.video-wrapper {
    position: relative;
    overflow: hidden;
}


/* -----------------------------------------------------
   CAPA DE REFLEJO
----------------------------------------------------- */

.video-wrapper::after {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    pointer-events: none;

    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 65%,
        transparent 100%
    );

    transform: skewX(-18deg);

    transition:
        left 0.9s ease;
}


/* -----------------------------------------------------
   ANIMACIÓN DEL REFLEJO
----------------------------------------------------- */

.video-card:hover .video-wrapper::after {
    left: 135%;
}


/* -----------------------------------------------------
   EFECTO SUTIL DE CRISTAL SOBRE EL VIDEO
----------------------------------------------------- */

.video-wrapper::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10),
            transparent 35%,
            transparent 65%,
            rgba(255, 255, 255, 0.04)
        );

    opacity: 0;

    transition: opacity 0.45s ease;
}


.video-card:hover .video-wrapper::before {
    opacity: 1;
}


/* -----------------------------------------------------
   CONTENIDO DE LA TARJETA
----------------------------------------------------- */

.video-content {
    position: relative;
    z-index: 3;

    transition:
        background 0.45s ease;
}


/* -----------------------------------------------------
   NÚMERO DEL VIDEO
----------------------------------------------------- */

.video-number {
    transition:
        transform 0.4s ease,
        color 0.4s ease;
}


.video-card:hover .video-number {
    transform: translateX(4px);
}


/* -----------------------------------------------------
   RESPETO A REDUCCIÓN DE MOVIMIENTO
----------------------------------------------------- */

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

    .video-card,
    .video-wrapper::before,
    .video-wrapper::after,
    .video-number {
        transition: none !important;
    }

    .video-card:hover {
        transform: none;
    }

}



/* =============================================================
   [TRV-56] FAQ — ESTILO Y ANIMACIÓN
   Identificador de sección: [TRV-56]
============================================================= */
/* =====================================================
   FAQ — PREGUNTAS FRECUENTES
   Efecto acordeón
   Versión: 1.0
   Fecha: 20/09/2026
===================================================== */


/* -----------------------------------------------------
   CONTENEDOR
----------------------------------------------------- */

.faq-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* -----------------------------------------------------
   CADA PREGUNTA
----------------------------------------------------- */

.faq-container details {
    position: relative;

    margin-bottom: 14px;
    padding: 0;

    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 16px;

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

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.05);

    overflow: hidden;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


/* -----------------------------------------------------
   EFECTO AL PASAR EL MOUSE
----------------------------------------------------- */

.faq-container details:hover {
    border-color: rgba(124, 58, 237, 0.35);

    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.09);

    transform: translateY(-2px);
}


/* -----------------------------------------------------
   PREGUNTA / SUMMARY
----------------------------------------------------- */

.faq-container summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 68px;

    padding: 20px 65px 20px 24px;

    cursor: pointer;

    list-style: none;

    color: #1e293b;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    outline: none;

    transition:
        color 0.3s ease,
        background 0.3s ease;
}


/* Quitar triángulo nativo */

.faq-container summary::-webkit-details-marker {
    display: none;
}

.faq-container summary::marker {
    display: none;
}


/* -----------------------------------------------------
   SIGNO +
----------------------------------------------------- */

.faq-container summary::after {
    content: "+";

    position: absolute;

    right: 22px;
    top: 50%;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(124, 58, 237, 0.10);

    color: #7c3aed;

    font-size: 22px;
    font-weight: 400;

    line-height: 1;

    transition:
        transform 0.35s ease,
        background 0.3s ease,
        color 0.3s ease;
}


/* -----------------------------------------------------
   PREGUNTA ABIERTA
----------------------------------------------------- */

.faq-container details[open] {
    border-color: rgba(124, 58, 237, 0.35);

    box-shadow:
        0 15px 40px rgba(124, 58, 237, 0.10);
}


/* -----------------------------------------------------
   SIGNO -
----------------------------------------------------- */

.faq-container details[open] summary {
    color: #7c3aed;

    background:
        linear-gradient(
            90deg,
            rgba(124, 58, 237, 0.05),
            rgba(37, 99, 235, 0.02)
        );
}


.faq-container details[open] summary::after {
    content: "−";

    background: #7c3aed;

    color: #ffffff;

    transform: translateY(-50%) rotate(180deg);
}


/* -----------------------------------------------------
   RESPUESTA
----------------------------------------------------- */

.faq-container details p {
    margin: 0;

    padding: 0 65px 24px 24px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.75;
}


/* -----------------------------------------------------
   EFECTO DE ENTRADA DEL TEXTO
----------------------------------------------------- */

.faq-container details[open] p {
    animation: faqAnswerIn 0.35s ease both;
}


@keyframes faqAnswerIn {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* -----------------------------------------------------
   MÓVIL
----------------------------------------------------- */

@media (max-width: 600px) {

    .faq-container details {
        margin-bottom: 10px;
        border-radius: 14px;
    }

    .faq-container summary {
        min-height: 62px;

        padding: 18px 58px 18px 18px;

        font-size: 14px;
    }

    .faq-container summary::after {
        right: 17px;

        width: 28px;
        height: 28px;

        font-size: 20px;
    }

    .faq-container details p {
        padding: 0 18px 20px 18px;

        font-size: 14px;
        line-height: 1.7;
    }

}

/* =============================================================
   [TRV-FIX-01] LIVE EN TIKTOK — CONTENCIÓN DE ANCHO
   Fecha: 21/09/2026

   Corrección preventiva para evitar que .live-grid se expanda
   hasta el ancho completo de la pantalla si el contenedor padre
   pierde accidentalmente su límite horizontal.

   NO modifica el fondo de la sección ni el diseño interno de las
   tarjetas; únicamente recupera el ancho máximo del layout.
============================================================= */

.live-section .live-heading,
.live-section .live-grid {
    width: 100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
}

.live-section .live-grid {
    box-sizing: border-box;
}

@media (max-width: 1180px) {
    .live-section .live-heading,
    .live-section .live-grid {
        max-width: 100%;
    }
}

/* =============================================================
   [TRV-END] FIN DEL ARCHIVO
============================================================= */

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ---------------------------------------------------------
   Función:
   - Botón fijo de WhatsApp
   - Animación de pulso
   - Efecto hover
   - Tooltip informativo
   - Adaptación para dispositivos móviles
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR PRINCIPAL DEL BOTÓN
   --------------------------------------------------------- */

.container-boton {
    position: fixed;

    left: 25px;
    bottom: 25px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #25D366;

    border: 2px solid #ffffff;
    border-radius: 20%;

    z-index: 99999;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    animation: whatsapp-pulso 1.8s infinite;
}


/* ---------------------------------------------------------
   EFECTO HOVER DEL BOTÓN
   --------------------------------------------------------- */

.container-boton:hover {
    transform: scale(1.10);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.35);
}


/* ---------------------------------------------------------
   ICONO DE WHATSAPP
   --------------------------------------------------------- */

.boton {
    width: 30px;
    height: 30px;

    display: block;

    transition:
        transform 0.3s ease;
}


/* ---------------------------------------------------------
   ANIMACIÓN DEL ICONO AL PASAR EL CURSOR
   --------------------------------------------------------- */

.container-boton:hover .boton {
    transform: scale(1.05);
}


/* =========================================================
   TOOLTIP WHATSAPP
   ========================================================= */

.tooltip {
    position: absolute;

    left: 65px;
    bottom: 50%;

    transform: translateY(50%);

    width: max-content;
    max-width: 230px;

    padding: 9px 14px;

    background-color: #25D366;
    color: #ffffff;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.3;
    text-align: center;

    border-radius: 8px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    white-space: nowrap;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* ---------------------------------------------------------
   FLECHA DEL TOOLTIP
   --------------------------------------------------------- */

.tooltip::before {
    content: "";

    position: absolute;

    left: -6px;
    top: 50%;

    transform: translateY(-50%);

    width: 0;
    height: 0;

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #25D366;
}


/* ---------------------------------------------------------
   MOSTRAR TOOLTIP AL PASAR EL CURSOR
   --------------------------------------------------------- */

.container-boton:hover .tooltip {
    visibility: visible;
    opacity: 1;

    transform:
        translateY(50%)
        translateX(5px);
}


/* =========================================================
   ANIMACIÓN DE PULSO
   ========================================================= */

@keyframes whatsapp-pulso {

    0% {
        box-shadow:
            0 0 0 0 rgba(37, 211, 102, 0.70);
    }

    70% {
        box-shadow:
            0 0 0 14px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(37, 211, 102, 0);
    }
}


/* =========================================================
   RESPONSIVE — TABLET Y MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    .container-boton {
        left: 18px;
        bottom: 18px;

        width: 50px;
        height: 50px;
    }

    .boton {
        width: 28px;
        height: 28px;
    }

    .tooltip {
        display: none;
    }
}


/* =========================================================
   RESPONSIVE — PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 480px) {

    .container-boton {
        left: 15px;
        bottom: 15px;

        width: 48px;
        height: 48px;
    }

    .boton {
        width: 27px;
        height: 27px;
    }
}