/* ================================================
   VIVILIFE — Child Theme Custom Styles
   /wp-content/themes/enfold-child/assets/css/main.css
   ================================================ */


/* ------------------------------------------------
   1. TIPOGRAFÍA BASE
   ------------------------------------------------ */

body, p, li, td, input, textarea, select, button,
.av-special-heading-tag {
    font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
}

body { font-size: 17px; line-height: 1.7; }

h1 { font-size: 72px; line-height: 1.05; font-weight: 900; text-transform: uppercase; }
h2 { font-size: 48px; line-height: 1.1;  font-weight: 800; text-transform: uppercase; }
h3 { font-size: 28px; line-height: 1.2;  font-weight: 700; }
h4 { font-size: 20px; line-height: 1.3;  font-weight: 600; }
h5 { font-size: 14px; line-height: 1.4;  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }

/* Mobile: escalar títulos para que entren */
@media (max-width: 768px) {
    h1 { font-size: 44px; }
    h2 { font-size: 32px; }
    h3 { font-size: 22px; }
}


/* ------------------------------------------------
   2. ENCABEZADOS DE SECCIÓN (Special Heading)
   ------------------------------------------------ */

/* Label (H5) — texto mint */
.vivilife-section-label .av-special-heading-tag {
    font-weight: 600 !important;
    color: #65e7b3; /* sin !important: editable desde Enfold (custom_font del heading) */
}

/* Título (H2) — bold */
.vivilife-section-title .av-special-heading-tag {
    font-weight: 800 !important;
}

/* Espaciado entre label y título */
.vivilife-section-label { margin-bottom: 4px !important; }
.vivilife-section-title { margin-bottom: 60px !important; }


/* ------------------------------------------------
   3. HERO SLIDER
   ------------------------------------------------ */

/* Estilos visuales del caption — aplican a TODOS los slides */
.avia-slideshow .avia-caption-title {
    font-size: clamp(44px, 5.5vw, 80px) !important;
    line-height: 0.95 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}

.avia-slideshow .avia-caption-content {
    font-size: 18px !important;
}

/* Animaciones — scoped a .active-slide para que se RE-DISPAREN cada vez
   que un slide se vuelve activo. Sin esto, mi animación se dispara una sola
   vez al cargar la página (para los 3 slides a la vez) y luego los slides
   2 y 3 caen en la animación nativa de Enfold (caption-left/right, 1s-1.2s),
   quedando más lentos que el slide 1. Con .active-slide los 3 usan 0.7s. */
.avia-slideshow .active-slide .avia-caption-title {
    animation: vivilife-fadeup 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both !important;
}

.avia-slideshow .active-slide .avia-caption-content {
    animation: vivilife-fadeup 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.18s both !important;
}

.avia-slideshow .active-slide .avia-caption a {
    animation: vivilife-fadeup 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both !important;
}

/* Mobile */
@media (max-width: 768px) {
    /* Título: escala con viewport y rompe palabras largas si no entran */
    .avia-slideshow .avia-caption-title {
        font-size: clamp(34px, 10.5vw, 50px) !important;
        line-height: 1 !important;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }
    .avia-slideshow .avia-caption-content {
        font-size: 15px !important;
    }
    /* Padding lateral en el caption container para que el texto respete el viewport */
    .avia-slideshow .caption_container,
    .avia-slideshow .av-slideshow-caption {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box;
        max-width: 100%;
    }
}

@keyframes vivilife-fadeup {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* ------------------------------------------------
   4. HEADER & NAVEGACIÓN
   ------------------------------------------------ */

/* inner-container ya viene con position:relative y height:100% del grid.css de Enfold,
   solo necesitamos asegurar que el dropdown del CTA pueda salirse */
#header .inner-container {
    overflow: visible !important;
}

/* Logo — el <a> ocupa 100% del alto del header (88px full / 44px scroll).
   Enfold pone la img como display:block, que se alinea arriba por default.
   Usamos flex en el <a> para centrar verticalmente la imagen. */
#header span.logo.avia-standard-logo a {
    display: flex !important;
    align-items: center !important;
    max-height: none !important;
    height: 100% !important;
}

#header span.logo.avia-standard-logo img {
    max-height: 38px !important;
    width: auto !important;
    height: auto !important;
}

/* CTA — absolute con altura completa + flex para centrar verticalmente.
   Esto evita el problema del line-height: 88px heredado que rompe translateY(-50%).
   Logo: 800x225px a max-height 38px → ancho = 800*(38/225) ≈ 135px + 25px gap = 160px */
.vivilife-club-cta-wrap {
    position: absolute !important;
    left: 160px !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    z-index: 50 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.vivilife-club-cta-wrap > ul,
.vivilife-club-cta-wrap > ul > li {
    line-height: 1 !important;
    height: auto !important;
}

.vivilife-club-cta-wrap > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Botón principal */
.vivilife-club-cta-wrap > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #65e7b3;
    color: #0a0a0a !important;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.vivilife-club-cta-wrap > ul > li > a:hover {
    opacity: 0.9;
}

/* Flecha — chevron via CSS */
.vivilife-club-cta-wrap > ul > li > a::after {
    content: '∧';
    font-size: 10px;
    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.vivilife-club-cta-wrap:hover > ul > li > a::after {
    transform: rotate(0deg);
}

/* Dropdown — el trigger es el WRAP entero (no solo el <li>) para evitar
   que el dropdown se cierre cuando el mouse cruza el "gap" entre el botón
   y el dropdown. El dropdown es descendiente DOM del wrap, así que hovering
   el dropdown mantiene :hover en el wrap. */
.vivilife-club-cta-wrap > ul > li > ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    min-width: 220px;
    padding: 0;
    z-index: 9999;
    list-style: none;
    margin: 0;
    overflow: hidden;
}

.vivilife-club-cta-wrap:hover > ul > li > ul.sub-menu {
    display: block;
}

.vivilife-club-cta-wrap > ul > li > ul.sub-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.vivilife-club-cta-wrap > ul > li > ul.sub-menu li:last-child {
    border-bottom: none;
}

.vivilife-club-cta-wrap > ul > li > ul.sub-menu li a {
    display: block;
    padding: 11px 20px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.vivilife-club-cta-wrap > ul > li > ul.sub-menu li a:hover {
    background: #65e7b3 !important;
    color: #0a0a0a !important;
}

/* En mobile/tablet ocultamos el CTA inline — el burger menu hace de acceso.
   El threshold 989px coincide con el de Enfold para activar el menú móvil. */
@media (max-width: 989px) {
    .vivilife-club-cta-wrap { display: none !important; }
}

/* Items del Club CTA appendidos al main menu (vía PHP filter): se muestran
   solo en el burger menu. En el nav desktop los ocultamos. */
.av-main-nav > li.vivilife-mobile-only-menu-item {
    display: none !important;
}

/* ===========================================
   Burger menu (mobile) — estilo tipo Lovable
   =========================================== */
@media (max-width: 989px) {
    /* Sin divisores entre items */
    #top .av-burger-overlay #av-burger-menu-ul li,
    #top .av-burger-overlay #av-burger-menu-ul li > a {
        border: none !important;
    }

    /* Main menu (ACTIVIDADES, CLUBES, etc): gris muted, peso medio */
    #top .av-burger-overlay #av-burger-menu-ul > li > a {
        color: rgba(255, 255, 255, 0.55) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: 0.15em;
        padding: 14px 30px !important;
    }
    #top .av-burger-overlay #av-burger-menu-ul > li > a:hover,
    #top .av-burger-overlay #av-burger-menu-ul > li > a:focus {
        color: #ffffff !important;
        background: transparent !important;
    }

    /* "ELEGÍ TU CLUB" = el ÚNICO direct child del burger UL con nuestra clase
       (los clubs están anidados dentro de su .sub-menu, no son direct children).
       Nota: no podemos usar .menu-item-has-children porque Enfold filtra las
       clases que empiezan con "menu-item-" al construir el burger menu. */
    #top .av-burger-overlay #av-burger-menu-ul > li.vivilife-mobile-only-menu-item {
        margin-top: 24px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    #top .av-burger-overlay #av-burger-menu-ul > li.vivilife-mobile-only-menu-item > a {
        color: #65e7b3 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        pointer-events: none !important;
        cursor: default !important;
    }
    /* Ocultar indicadores de submenú (chevron, bullet, indicator) en el label */
    #top .av-burger-overlay #av-burger-menu-ul > li.vivilife-mobile-only-menu-item .avia-bullet,
    #top .av-burger-overlay #av-burger-menu-ul > li.vivilife-mobile-only-menu-item .avia-menu-fx,
    #top .av-burger-overlay #av-burger-menu-ul > li.vivilife-mobile-only-menu-item .av-arrow-wrap,
    #top .av-burger-overlay #av-burger-menu-ul > li.vivilife-mobile-only-menu-item .av-submenu-indicator {
        display: none !important;
    }

    /* Sub-menu (los clubes): siempre visible, flat, blanco, title case */
    #top .av-burger-overlay #av-burger-menu-ul .vivilife-mobile-only-menu-item .sub-menu {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #top .av-burger-overlay #av-burger-menu-ul .vivilife-mobile-only-menu-item .sub-menu li > a {
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 12px 30px !important;
    }
    #top .av-burger-overlay #av-burger-menu-ul .vivilife-mobile-only-menu-item .sub-menu li > a:hover,
    #top .av-burger-overlay #av-burger-menu-ul .vivilife-mobile-only-menu-item .sub-menu li > a:focus {
        color: #65e7b3 !important;
        background: transparent !important;
    }
}


/* ------------------------------------------------
   5. SECCIÓN CLUBES
   ------------------------------------------------
   Las columnas son av_one_half NATIVAS del ALB.
   Color, font-size, padding, border-radius, link e imagen
   se setean como atributos del shortcode (editables desde
   el builder). Estas reglas son SOLO el polish que Enfold
   no expone como atributo:
     - layout 2-col con gap exacto de 24px
     - aspect-ratio 16/10 + background-size cover
     - gradiente ::after de legibilidad
     - empuja el texto al fondo de la card (flex)
     - text-transform / letter-spacing / font-weight
     - hover color del link
   ------------------------------------------------ */

/* Layout 2-col sobre las columnas flotadas de Enfold. */
.vivilife-club-card.flex_column {
    position: relative;
    float: left;
    width: calc(50% - 12px) !important;
    margin: 0 0 24px 0 !important;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    box-sizing: border-box;
    isolation: isolate;          /* contiene los z-index de la img, el ::after y el texto */
    /* texto al fondo */
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
}

.vivilife-club-card.flex_column.first {
    margin-right: 24px !important;
    clear: left;
}

/* La imagen del club: av_image nativo de Enfold renderiza un <img> real.
   Markup: .avia-image-container > .avia-image-container-inner > .avia-image-overlay-wrap > img
   La posicionamos absoluta cubriendo la card; el <img> se zoom/dim en hover. */
.vivilife-club-photo,
.vivilife-club-photo .avia-image-container-inner,
.vivilife-club-photo .avia-image-overlay-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
.vivilife-club-photo { z-index: 0; }

.vivilife-club-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}
.vivilife-club-card:hover .vivilife-club-photo img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Gradiente de legibilidad sobre la imagen.
   Cubre TODA la card con un overlay que arranca casi opaco abajo y
   sigue con un tinte oscuro hasta arriba, así la imagen tiene mood
   parejo + el texto queda perfectamente legible. */
/* Gradiente como ::after de la foto (mismo stacking context que el <img>),
   no del card — porque .vivilife-club-photo tiene z-index 0 que aisla. */
.vivilife-club-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0.75) 25%,
        rgba(10, 10, 10, 0.45) 55%,
        rgba(10, 10, 10, 0.25) 100%);
    pointer-events: none;
    z-index: 10;
    transition: background 0.4s ease;
}
.vivilife-club-card:hover .vivilife-club-photo::after {
    background: linear-gradient(to top,
        rgba(10, 10, 10, 0.85) 0%,
        rgba(10, 10, 10, 0.55) 35%,
        rgba(10, 10, 10, 0.20) 70%,
        rgba(10, 10, 10, 0.10) 100%);
}

/* Contenido por encima del gradiente */
.vivilife-club-card > .av-special-heading,
.vivilife-club-card > .av_textblock_section {
    position: relative;
    z-index: 2;
    width: 100%;
}
.vivilife-club-card > .vivilife-club-location { margin: 0 0 6px !important; }
.vivilife-club-card > .vivilife-club-name     { margin: 0 0 8px !important; }
.vivilife-club-card > .av_textblock_section   { margin: 0 !important; }

/* el borde decorativo del special-heading no va dentro de las cards */
.vivilife-club-card .special-heading-border {
    display: none !important;
}

/* Ubicación (h6): mayúsculas + tracking. Color y size los pone Enfold. */
.vivilife-club-location,
.vivilife-club-location .av-special-heading-tag {
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* Nombre del club (h3): peso bold extra + uppercase. */
.vivilife-club-name,
.vivilife-club-name .av-special-heading-tag {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
}

/* "Ver club" + flecha animada via ::after.
   El texto del link queda como "Ver club" en el ALB; la flecha vive en CSS
   para poder animar el translateX en hover. */
.vivilife-club-link-wrap,
.vivilife-club-link-wrap p {
    transition: color 0.2s ease;
    margin: 0 !important;
}
.vivilife-club-link-wrap p::after {
    content: ' →';
    display: inline-block;
    transition: transform 0.2s ease;
}
.vivilife-club-card:hover .vivilife-club-link-wrap,
.vivilife-club-card:hover .vivilife-club-link-wrap p {
    color: #65e7b3 !important;
}
.vivilife-club-card:hover .vivilife-club-link-wrap p::after {
    transform: translateX(3px);
}

/* Mobile: 1 columna */
@media (max-width: 768px) {
    .vivilife-club-card.flex_column,
    .vivilife-club-card.flex_column.first {
        width: 100% !important;
        margin: 0 0 16px 0 !important;
    }
}


/* ------------------------------------------------
   6. SECCIÓN ACTIVIDADES
   ------------------------------------------------
   8 cards de categorías + 4 cards de horarios. Cada card es un
   av_iconbox NATIVO de Enfold; el icono, título, color, link y
   contenido son atributos del shortcode (editables desde el ALB).
   El CSS solo agrega:
   - bordes/bg/padding visual de la card
   - layout responsive (4 col / 2 col / 1 col)
   - hover (border mint + icon scale)
   - estilos del tag "Solo Life X" y del highlight <strong>
   ------------------------------------------------ */

/* Tipografía del header de la sección */
.vivilife-actividades-section .vivilife-section-label .av-special-heading-tag {
    font-weight: 600 !important;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
.vivilife-actividades-section .vivilife-section-title .av-special-heading-tag {
    font-weight: 800 !important;
    text-transform: uppercase;
}
/* Centrar el header (label + título + subtítulo) */
.vivilife-actividades-section .vivilife-section-label,
.vivilife-actividades-section .vivilife-section-title {
    text-align: center; /* centrado tambien nativo (modern-centered); editable desde Enfold */
}
/* El subtítulo: .vivilife-act-subtitle ESTÁ en el .avia_textblock (no es padre) */
.vivilife-act-subtitle {
    text-align: center !important;
    max-width: 720px;
    margin: 0 auto 60px !important;
    color: #888888 !important;
    font-size: 16px !important;
}
/* Ocultar el border decorativo de Enfold (la rayita al lado del heading) */
.vivilife-actividades-section .special-heading-border {
    display: none !important;
}

/* ===== CARDS DE ACTIVIDADES ===== */

/* Convertimos el wrapper en flex para conseguir equal-height por fila.
   Headings van full-width (flex-basis 100%), las cards toman calc(25% - 15px).
   gap: 20px maneja todos los gaps (horizontal y vertical entre filas). */
.vivilife-actividades-section .entry-content-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
}
/* Los hijos directos que no son cards de actividad/horarios = full row */
.vivilife-actividades-section .entry-content-wrapper > .av-special-heading,
.vivilife-actividades-section .entry-content-wrapper > .av_textblock_section {
    flex: 0 0 100%;
    margin: 0;
}
/* Cards = 4 per row */
.vivilife-actividades-section .flex_column.av_one_fourth {
    flex: 0 0 calc(25% - 15px);
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Tablet: 2 cols */
@media (max-width: 989px) and (min-width: 769px) {
    .vivilife-actividades-section .flex_column.av_one_fourth {
        flex: 0 0 calc(50% - 10px);
    }
}

/* Mobile: 1 col */
@media (max-width: 768px) {
    .vivilife-actividades-section .flex_column.av_one_fourth {
        flex: 0 0 100%;
    }
}

/* La card en sí (av_iconbox renderiza como .iconbox).
   Hacemos la card full-height del column via flex en la columna padre. */
.vivilife-actividades-section .flex_column.av_one_fourth {
    display: flex;
    flex-direction: column;
}
.vivilife-act-card.iconbox {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
    padding: 20px !important;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
    flex: 1;          /* fill the column height */
    min-height: 170px;
    /* Layout via Grid: row 1 = icon + título; row 2 = items full width */
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon title"
        "items items";
    column-gap: 10px;
    row-gap: 14px;
    align-items: center;
    align-content: start;
}
.vivilife-act-card.iconbox:hover {
    background: #222222 !important;
    border-color: #65e7b3 !important;
}
/* Mapeo de cada elemento al grid area */
.vivilife-act-card.iconbox .iconbox_icon {
    grid-area: icon;
}
/* .iconbox_content envuelve título + container; display:contents hace que sus
   hijos se promuevan como grid items directos del card */
.vivilife-act-card.iconbox .iconbox_content {
    display: contents;
}
.vivilife-act-card.iconbox header.entry-content-header,
.vivilife-act-card.iconbox .iconbox_content_title {
    grid-area: title;
    margin: 0 !important;
}
.vivilife-act-card.iconbox .iconbox_content_container {
    grid-area: items;
}
/* Footer vacío que mete Enfold lo ocultamos */
.vivilife-act-card.iconbox footer.entry-footer {
    display: none !important;
}

/* Icono mint, scale en hover */
.vivilife-act-card.iconbox .iconbox_icon {
    color: #65e7b3 !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 26px !important;
    line-height: 1 !important;
    margin-right: 14px !important;
    margin-top: 2px !important;
    transition: transform 0.3s ease;
}
.vivilife-act-card.iconbox:hover .iconbox_icon {
    transform: scale(1.1);
}
.vivilife-act-card.iconbox .iconbox_icon::before {
    margin: 0 !important;
    width: auto !important;
}

/* Título: alineado con el icono */
.vivilife-act-card.iconbox .iconbox_content_title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Lista de items */
.vivilife-act-card.iconbox .iconbox_content_container,
.vivilife-act-card.iconbox p {
    color: #999999 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* Highlight (envuelto en <strong>) */
.vivilife-act-card.iconbox strong {
    color: #65e7b3 !important;
    font-weight: 700;
}

/* Tag "SOLO LIFE X" (envuelto en <small class='vivilife-only-tag'>) */
.vivilife-act-card.iconbox .vivilife-only-tag {
    display: block;
    color: #65e7b3 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 8px;
}

/* ===== HEADING DE HORARIOS + CARDS DE HORARIOS ===== */

.vivilife-horarios-label {
    text-align: center;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
}
.vivilife-horarios-label .av-special-heading-tag {
    font-weight: 600 !important;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.vivilife-horarios-card.iconbox {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
    padding: 18px 16px !important;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;     /* arrow va a la DERECHA del título */
    gap: 10px;
    flex: 1;
    min-height: 64px;
}
.vivilife-horarios-card.iconbox:hover {
    background: #222222 !important;
    border-color: #65e7b3 !important;
}

/* Título de la card de horarios */
.vivilife-horarios-card.iconbox .iconbox_content_title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    flex: 1;
}
/* También el wrapper <header> que mete Enfold */
.vivilife-horarios-card.iconbox header.entry-content-header {
    text-align: left !important;
    margin: 0 !important;
    flex: 1;
}

/* Icono (flecha) a la derecha, mint */
.vivilife-horarios-card.iconbox .iconbox_icon {
    color: #65e7b3 !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: transform 0.3s ease;
}
.vivilife-horarios-card.iconbox:hover .iconbox_icon {
    transform: translateX(3px);
}
.vivilife-horarios-card.iconbox .iconbox_icon::before {
    margin: 0 !important;
    width: auto !important;
}


/* ------------------------------------------------
   7. SECCIÓN PLANES
   ------------------------------------------------
   2 cards lado a lado: BASIC (fondo oscuro) y ALL IN (fondo mint).
   Fondo, padding y border-radius van como atributos nativos del
   av_one_half (background_color, padding, radius). CSS aporta:
   - layout 2-col con gap 24px
   - borde sutil en BASIC (RGBA no funciona como atributo nativo)
   - tipografía del plan name, tagline y feature list
   - divider entre tagline y features (::before)
   - checkmarks via SVG data-URI en li::before
   ------------------------------------------------ */

/* 2-col con igual altura via flexbox.
   Los av_one_half de Enfold flotan por defecto; los pasamos a flex items
   para que align-items:stretch iguale la altura de ambas cards. */
.vivilife-planes-section .entry-content-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
}
/* Headings y subtítulo antes de las cards: ocupan la fila completa */
.vivilife-planes-section .entry-content-wrapper > .av-special-heading,
.vivilife-planes-section .entry-content-wrapper > .av_textblock_section {
    flex: 0 0 100% !important;
    width: 100% !important;
}
/* Cards: flex items que se estiran a la misma altura */
.vivilife-plan-card.flex_column {
    float: none !important;
    flex: 0 0 calc(50% - 12px) !important;
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Borde sutil en la card BASIC (RGBA no soportado como atributo nativo) */
.vivilife-plan-basic.flex_column {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: border-color 0.3s ease, background-color 0.3s ease !important;
    cursor: default;
}
.vivilife-plan-basic.flex_column:hover {
    border-color: rgba(101, 231, 179, 0.5) !important;
    background-color: #1a1a1a !important;
}

.vivilife-plan-allin.flex_column {
    transition: filter 0.3s ease !important;
    cursor: default;
}
.vivilife-plan-allin.flex_column:hover {
    filter: brightness(0.92);
}

/* Ocultar el border decorativo de los headings dentro de las cards */
.vivilife-plan-card .special-heading-border {
    display: none !important;
}

/* Plan name — gran titular */
.vivilife-plan-name .av-special-heading-tag {
    font-size: clamp(44px, 5vw, 60px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 6px !important;
}
.vivilife-plan-basic .vivilife-plan-name .av-special-heading-tag {
    color: #ffffff; /* editable desde Enfold */
}
.vivilife-plan-allin .vivilife-plan-name .av-special-heading-tag {
    color: #0a0a0a; /* editable desde Enfold */
}

/* Plan tagline — label uppercase pequeño */
.vivilife-plan-tagline .av-special-heading-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    margin-bottom: 28px !important;
}
.vivilife-plan-basic .vivilife-plan-tagline .av-special-heading-tag {
    color: rgba(255, 255, 255, 0.45) !important;
}
.vivilife-plan-allin .vivilife-plan-tagline .av-special-heading-tag {
    color: rgba(10, 10, 10, 0.55) !important;
}

/* Divider entre tagline y features — ::before en el wrapper del textblock */
.vivilife-plan-features {
    padding-top: 28px !important;
    margin-top: 0 !important;
    position: relative;
}
.vivilife-plan-features::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
}
.vivilife-plan-basic .vivilife-plan-features::before {
    background: rgba(255, 255, 255, 0.12);
}
.vivilife-plan-allin .vivilife-plan-features::before {
    background: rgba(10, 10, 10, 0.15);
}

/* Feature list */
.vivilife-plan-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.vivilife-plan-list li {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
/* Separador entre items */
.vivilife-plan-list li + li {
    border-top: 1px solid transparent;
}
.vivilife-plan-basic .vivilife-plan-list li + li {
    border-top-color: rgba(255, 255, 255, 0.06);
}
.vivilife-plan-allin .vivilife-plan-list li + li {
    border-top-color: rgba(10, 10, 10, 0.08);
}

/* Checkmark via SVG data-URI */
.vivilife-plan-list li::before {
    content: '';
    display: inline-block;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-top: 1px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.vivilife-plan-basic .vivilife-plan-list li {
    color: rgba(255, 255, 255, 0.75) !important;
}
.vivilife-plan-basic .vivilife-plan-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365e7b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.vivilife-plan-allin .vivilife-plan-list li {
    color: rgba(10, 10, 10, 0.8) !important;
}
.vivilife-plan-allin .vivilife-plan-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Subtítulo de la sección centrado */
.vivilife-planes-subtitle {
    text-align: center !important;
    max-width: 480px;
    margin: 0 auto 60px !important;
}

/* Mobile: 1 columna */
@media (max-width: 768px) {
    .vivilife-plan-card.flex_column {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .vivilife-plan-card.flex_column + .vivilife-plan-card.flex_column {
        margin-top: 20px !important;
    }
}


/* ------------------------------------------------
   8. SECCIÓN UBICACIONES
   ------------------------------------------------
   Layout: header centrado + 2 cols (lista de clubes | mapa).
   Lista: cards con pin mint + hover border.
   Mapa: iframe Google My Maps con filtro CSS para cohesión.
   ------------------------------------------------ */

/* Headings centrados */
.vivilife-ubicaciones-section .vivilife-section-label,
.vivilife-ubicaciones-section .vivilife-section-title {
    text-align: center; /* centrado tambien nativo (modern-centered); editable desde Enfold */
}
.vivilife-ubicaciones-section .special-heading-border {
    display: none !important;
}

/* 2 columnas con igual altura */
.vivilife-ubicaciones-section .entry-content-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 32px;
}
.vivilife-ubicaciones-section .entry-content-wrapper > .av-special-heading {
    flex: 0 0 100% !important;
    width: 100% !important;
}
.vivilife-ubicaciones-section .flex_column.av_one_half {
    float: none !important;
    flex: 0 0 calc(50% - 16px) !important;
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Lista de clubes */
.vivilife-ubicaciones-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vivilife-ubicacion-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.vivilife-ubicacion-item:hover {
    border-color: #65e7b3 !important;
    background-color: #1a1a1a;
}
.vivilife-ubicacion-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vivilife-ubicacion-pin {
    color: #65e7b3;
    flex-shrink: 0;
    margin-top: 2px;
}
.vivilife-ubicacion-nombre {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
    color: #ffffff !important;
    margin: 0 0 3px !important;
    line-height: 1.2 !important;
}
.vivilife-ubicacion-lugar {
    font-size: 13px !important;
    color: #888888 !important;
    margin: 0 !important;
}
.vivilife-ubicacion-arrow {
    color: #65e7b3;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.vivilife-ubicacion-item:hover .vivilife-ubicacion-arrow {
    transform: translateX(4px);
}

/* Mapa Google My Maps */
.vivilife-mapa-wrap {
    width: 100%;
    height: 100%;
    min-height: 440px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    display: flex;
}
.vivilife-mapa-wrap iframe {
    width: 100%;
    flex: 1;
    display: block;
    border: 0 !important;
    filter: grayscale(0.2) contrast(1.05);
}

/* Mobile: 1 columna */
@media (max-width: 768px) {
    .vivilife-ubicaciones-section .flex_column.av_one_half {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .vivilife-mapa-wrap {
        min-height: 320px;
    }
}


/* ------------------------------------------------
   9. SECCIÓN FAQ
   ------------------------------------------------
   Selectores correctos (verificados en el template PHP de Enfold):
   - El título es <h3 class="toggler"> (NO .av_toggle_title)
   - El ícono +/- es .toggle_icon > .vert_icon + .hor_icon
   - Al abrirse el toggler recibe clase "activeTitle" (via JS)
   - El contenido está en .toggle_wrap > .toggle_content
   ------------------------------------------------ */

/* Headings centrados */
.vivilife-faq-section .vivilife-section-label,
.vivilife-faq-section .vivilife-section-title {
    text-align: center; /* centrado tambien nativo (modern-centered); editable desde Enfold */
}
.vivilife-faq-section .special-heading-border {
    display: none !important;
}

/* Contenedor: max-width centrado */
.vivilife-faq-accordion.av_toggle_container {
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* Cada item: sin box, solo separador horizontal */
.vivilife-faq-accordion .single_toggle {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.vivilife-faq-accordion .single_toggle:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ocultar el +/- nativo de Enfold */
.vivilife-faq-accordion .toggle_icon {
    display: none !important;
}

/* El toggler <h3>: pregunta + chevron a la derecha */
.vivilife-faq-accordion .toggler {
    position: relative !important;
    padding: 20px 40px 20px 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    transition: color 0.2s ease;
}
.vivilife-faq-accordion .toggler:hover {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Chevron apuntando abajo (estado cerrado) */
.vivilife-faq-accordion .toggler::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365e7b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.25s ease;
}

/* Abierto: pregunta → mint, chevron → arriba */
.vivilife-faq-accordion .toggler.activeTitle {
    color: #65e7b3 !important;
}
.vivilife-faq-accordion .toggler.activeTitle::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Contenido de la respuesta */
.vivilife-faq-accordion .toggle_wrap {
    border: none !important;
    background: transparent !important;
}
.vivilife-faq-accordion .toggle_content {
    padding: 4px 0 20px 0 !important;
    background: transparent !important;
    border: none !important;
}
.vivilife-faq-accordion .toggle_content p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin-bottom: 10px !important;
}
.vivilife-faq-accordion .toggle_content p:last-child {
    margin-bottom: 0 !important;
}
.vivilife-faq-accordion .toggle_content ul {
    margin: 8px 0 10px 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}
.vivilife-faq-accordion .toggle_content ul li {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    padding-left: 16px !important;
    position: relative;
}
.vivilife-faq-accordion .toggle_content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #65e7b3;
}


/* ------------------------------------------------
   10. FOOTER (nativo Enfold)
   ------------------------------------------------ */

/* ---- Títulos de columna (widgettitle) ---- */
#footer .widgettitle {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #65e7b3 !important;
    margin: 0 0 16px 0 !important;
    font-family: 'Inter', sans-serif !important;
    border: none !important;
    padding: 0 !important;
}

/* ---- Logo brand (col 1) ---- */
.vivilife-footer-logo-link {
    display: inline-block;
    margin-bottom: 16px;
}
.vivilife-footer-logo {
    height: 40px;
    width: auto;
    display: block;
}
.vivilife-footer-tagline {
    font-size: 14px !important;
    color: #888888 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* ---- Listas de links en columnas ---- */
#footer .vivilife-footer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#footer .vivilife-footer-list li {
    margin-bottom: 8px !important;
}
#footer .vivilife-footer-list a {
    font-size: 14px !important;
    color: #888888 !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    transition: color 0.2s ease !important;
}
#footer .vivilife-footer-list a:hover {
    color: #ffffff !important;
}

/* ---- Columna 1 ligeramente más ancha ---- */
#footer .flex_column:first-child {
    flex: 1.5 !important;
}

/* ---- Socket: copyright izq + Instagram der ---- */
#socket .copyright {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
.vivilife-socket-copy {
    font-size: 12px;
}
.vivilife-socket-ig {
    color: #666666;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color 0.2s ease;
}
.vivilife-socket-ig:hover {
    color: #65e7b3 !important;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    #socket .copyright {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}


/* ================================================
   11. PÁGINAS DE CLUB (Life Outdoor, etc.)
   ================================================
   Secciones construidas con elementos NATIVOS del ALB de Enfold
   (av_heading, av_textblock, av_button, av_icon_box, av_table).
   El CSS solo aporta el polish visual sobre el markup de Enfold.
   Nota: las columnas pueden ser .flex_column o .flex_column_div, así que
   seleccionamos por la clase de tamaño (.av_one_half / .av_one_fifth).
   ------------------------------------------------ */

/* ---- Botón de club genérico (av_button → <a.avia-button>) ----
   Color lo pone Enfold via custom_bg/custom_font; acá: forma + tipografía. */
.vivilife-cta-strip .avia-button,
.vivilife-club-planes .avia-button,
.vivilife-club-act-section .avia-button,
.vivilife-club-final-section .avia-button {
    border-radius: 0 !important;
    border: none !important;
    padding: 16px 30px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    transition: opacity 0.2s ease, border-color 0.2s ease !important;
}
.vivilife-cta-strip .avia-button:hover,
.vivilife-club-planes .avia-button:hover,
.vivilife-club-act-section .avia-button:hover,
.vivilife-club-final-section .avia-button:hover {
    opacity: 0.9;
}

/* Ocultar el borde decorativo de los headings en estas secciones */
.vivilife-club-hero .special-heading-border,
.vivilife-cta-strip .special-heading-border,
.vivilife-club-act-section .special-heading-border,
.vivilife-horarios-section .special-heading-border,
.vivilife-club-final-section .special-heading-border {
    display: none !important;
}

/* ------------------------------------------------
   11.1 HERO de club
   ------------------------------------------------ */
.vivilife-club-hero {
    min-height: 560px !important;
    display: flex !important;
    align-items: flex-end !important;
    background-size: cover !important;
    background-position: center center !important;
    position: relative;
    overflow: hidden;
}
/* Gradiente de legibilidad de abajo hacia arriba */
.vivilife-club-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        #0a0a0a 0%,
        rgba(10, 10, 10, 0.6) 45%,
        rgba(10, 10, 10, 0.2) 100%);
    z-index: 1;
    pointer-events: none;
}
/* El contenido de la sección por encima del gradiente */
.vivilife-club-hero > .container,
.vivilife-club-hero .av-section-color-overlay-wrap,
.vivilife-club-hero .container_wrap {
    position: relative;
    z-index: 2;
}
/* Hero alineado a la izquierda (no centrado) y pegado abajo */
.vivilife-club-hero .container { padding-bottom: 24px; }
.vivilife-club-hero .av-special-heading,
.vivilife-club-hero .avia_textblock { text-align: left !important; }

.vivilife-club-hero-label .av-special-heading-tag {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4em !important;
    text-transform: uppercase !important;
    color: #65e7b3; /* editable desde Enfold */
}
.vivilife-club-hero-label { margin: 0 0 8px 0 !important; }
.vivilife-club-hero-title .av-special-heading-tag {
    font-size: clamp(44px, 7vw, 80px) !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #ffffff; /* editable desde Enfold */
    letter-spacing: -0.01em !important;
}
.vivilife-club-hero-title { margin: 0 0 16px 0 !important; }
/* Badge + nota (textblock con 2 spans) */
.vivilife-club-hero-badges {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px 0 !important;
}
.vivilife-club-hero-badge {
    background: #65e7b3;
    color: #0a0a0a;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vivilife-club-hero-note {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
}
.vivilife-club-hero-desc {
    max-width: 560px;
    margin: 0 !important;
}
.vivilife-club-hero-desc,
.vivilife-club-hero-desc p {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

/* ------------------------------------------------
   11.2 CTA strip (mint)
   ------------------------------------------------ */
/* fondo del CTA strip: 100% nativo (custom_bg de la seccion en Enfold) — editable desde el builder */
.vivilife-cta-strip .vivilife-cta-strip-title { text-align: center; margin: 0 0 22px 0 !important; }
.vivilife-cta-strip-title .av-special-heading-tag {
    font-size: clamp(22px, 3vw, 30px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #0a0a0a; /* editable desde Enfold */
    line-height: 1.15 !important;
}

/* ------------------------------------------------
   11.3 Planes — botón CTA al fondo de cada card
   ------------------------------------------------ */
.vivilife-club-planes .vivilife-plan-card {
    display: flex !important;
    flex-direction: column;
}
/* El av_button es el último hijo de la card; margin-top:auto lo pega al fondo */
.vivilife-club-planes .avia-button-wrap {
    margin-top: auto;
    width: 100%;
    padding-top: 28px;
}
.vivilife-club-planes .avia-button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    margin: 0 !important;
}
/* Color fallback por si el inline de Enfold no aplica */
.vivilife-plan-cta-basic.avia-button,
.vivilife-plan-cta-basic .avia-button { background-color: #65e7b3 !important; color: #0a0a0a !important; }
.vivilife-plan-cta-allin.avia-button,
.vivilife-plan-cta-allin .avia-button { background-color: #0a0a0a !important; color: #65e7b3 !important; }

/* ------------------------------------------------
   11.4 Actividades (5 av_icon_box en av_one_fifth)
   ------------------------------------------------ */
.vivilife-club-act-title .av-special-heading-tag {
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #ffffff; /* editable desde Enfold */
}
.vivilife-club-act-section .vivilife-club-act-title { text-align: center; margin: 0 0 48px 0 !important; }

/* Layout: 5 columnas en una fila, responsive */
.vivilife-club-act-section .entry-content-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
}
.vivilife-club-act-section .entry-content-wrapper > .av-special-heading,
.vivilife-club-act-section .entry-content-wrapper > .avia-button-wrap {
    flex: 0 0 100%;
    margin: 0;
}
.vivilife-club-act-section .entry-content-wrapper > .avia-button-wrap { margin-top: 48px; text-align: center; }
.vivilife-club-act-section .av_one_fifth {
    flex: 0 0 calc(20% - 16px) !important;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    display: flex;
}
.vivilife-club-act-section .av_one_fifth .vivilife-club-act-card { flex: 1; }

@media (max-width: 989px) and (min-width: 769px) {
    .vivilife-club-act-section .av_one_fifth { flex: 0 0 calc(33.333% - 11px) !important; }
}
@media (max-width: 768px) {
    .vivilife-club-act-section .av_one_fifth { flex: 0 0 calc(50% - 8px) !important; }
}

/* La card (av_icon_box → .iconbox): icono izquierda + título */
.vivilife-club-act-card.iconbox {
    display: flex !important;
    align-items: center;
    gap: 14px;
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
    padding: 22px !important;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.vivilife-club-act-card.iconbox:hover {
    background: #222222 !important;
    border-color: #65e7b3 !important;
}
.vivilife-club-act-card .iconbox_icon {
    color: #65e7b3 !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 26px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: transform 0.3s ease;
}
.vivilife-club-act-card.iconbox:hover .iconbox_icon { transform: scale(1.1); }
.vivilife-club-act-card .iconbox_icon::before { margin: 0 !important; width: auto !important; }
.vivilife-club-act-card .iconbox_content { margin: 0 !important; }
.vivilife-club-act-card .iconbox_content_title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
/* Sin contenido bajo el título y sin footer vacío */
.vivilife-club-act-card .iconbox_content_container,
.vivilife-club-act-card footer.entry-footer { display: none !important; }

/* ------------------------------------------------
   11.5 Horarios (av_table)
   ------------------------------------------------ */
.vivilife-horarios-section .vivilife-horarios-title { text-align: center; margin: 0 0 28px 0 !important; }
.vivilife-horarios-title .av-special-heading-tag {
    font-size: clamp(24px, 3.5vw, 32px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #ffffff; /* editable desde Enfold */
}
.vivilife-horarios-table {
    max-width: 580px;
    margin: 0 auto !important;
}
.vivilife-horarios-table table {
    width: 100%;
    border-collapse: collapse !important;
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 !important;
}
.vivilife-horarios-table td {
    padding: 15px 24px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
    font-size: 15px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}
.vivilife-horarios-table tr:last-child td { border-bottom: none !important; }
.vivilife-horarios-table td:last-child {
    text-align: right !important;
    color: #888888 !important;
    font-weight: 400 !important;
}

/* ------------------------------------------------
   11.6 CTA final
   ------------------------------------------------ */
.vivilife-club-final-section { text-align: center; }
.vivilife-club-final-l1 .av-special-heading-tag,
.vivilife-club-final-l2 .av-special-heading-tag {
    font-size: clamp(30px, 5vw, 56px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
}
.vivilife-club-final-l1 .av-special-heading-tag { color: #ffffff; /* editable desde Enfold */ }
.vivilife-club-final-l2 .av-special-heading-tag {
    background: linear-gradient(90deg, #65e7b3, #2bd49a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #65e7b3; /* fallback; editable desde Enfold */
}
.vivilife-club-final-l1 { margin: 0 !important; }
.vivilife-club-final-l2 { margin: 0 0 32px 0 !important; }
/* Los dos botones en línea, centrados */
.vivilife-club-final-section .avia-button-wrap {
    display: inline-block !important;
    margin: 8px !important;
    width: auto !important;
}
.vivilife-club-final-btn-primary.avia-button,
.vivilife-club-final-btn-primary .avia-button { background-color: #65e7b3 !important; color: #0a0a0a !important; }
.vivilife-club-final-btn-outline.avia-button,
.vivilife-club-final-btn-outline .avia-button {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.vivilife-club-final-btn-outline.avia-button:hover,
.vivilife-club-final-btn-outline .avia-button:hover { border-color: #65e7b3 !important; opacity: 1 !important; }

@media (max-width: 600px) {
    .vivilife-club-final-section .avia-button-wrap { display: block !important; }
    .vivilife-club-final-section .avia-button { display: inline-block; }
}