/* 
   globals.css
   Variables Globales VivaCity — WEB-03 Unificación Tipográfica
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
    /* ── Tipografía Principal ── */
    --font-primary: 'Roboto', sans-serif;

    /* Pesos tipográficos */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 500;
    /* Roboto usa 500 para medium/semibold */
    --fw-bold: 700;
    --fw-extrabold: 900;
    /* Roboto usa 900 para black/extrabold */

    /* ── Paleta Institucional ── */
    --color-purpura: #4B2D8A;
    --color-naranja: #E8821A;
    --color-texto-claro: #FFFFFF;
    --color-fondo-oscuro: #181c25;
}

/* ══════════════════════════════════════════
   WEB-03: Aplicación global de tipografía
   Sin cambiar tamaños — solo family y weight
   ══════════════════════════════════════════ */

/* Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    color: #ffffff;
}

/* Títulos H1 — Unificación de Tamaño, Peso y Degradado */
h1, h1.page-title, .sobre-header h1 {
    font-family: var(--font-primary) !important;
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    background: linear-gradient(90deg, #fff, #E8821A) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Subtítulos H2 — Unificación de Tamaño, Peso y Degradado */
.loja-info-header h2, .destacados-header h2, h2.titulo-seccion, .canton-box h2, h2.section-title, h2.page-subtitle {
    font-family: var(--font-primary) !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    background: linear-gradient(90deg, #fff, #E8821A) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* H3, H4, H5, H6 — SemiBold 600 */
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
}

/* Párrafos y texto cuerpo — Regular 400 */
p,
span,
li,
td,
th,
label,
input,
textarea,
select {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
}

/* Botones — Bold 700 */
button,
.btn,
[class*="btn-"],
a.btn {
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
}

/* Links */
a {
    font-family: var(--font-primary);
}

/* Navegación */
nav,
.navbar,
.nav-link {
    font-family: var(--font-primary);
}

/* ── Estilos para SweetAlert2 (Premium VivaCity) ── */
.swal2-container {
    z-index: 999999 !important;
    /* Fuerza a estar al frente de todo */
}

.swal2-glass-viva {
    backdrop-filter: blur(15px) !important;
    background: rgba(24, 28, 37, 0.9) !important;
    /* Un poco más sólido para que no se pierda */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

.swal2-title,
.swal2-html-container {
    font-family: var(--font-primary) !important;
}


/* ══════════════════════════════════════════
   UNIFICACIÓN VISUAL Y GUÍAS DE ESTILO
   ══════════════════════════════════════════ */

/* Barra vertical decorativa en títulos */
.title-pipe {
    color: #E8821A !important;
    font-weight: 900 !important;
    margin-right: 12px;
    font-size: 1.1em;
    display: inline-block;
    background: none !important;
    -webkit-text-fill-color: #E8821A !important;
}

/* Degradado y centrado unificado para títulos principales */
h1.page-title,
.sobre-header h1,
.loja-info-header h2,
.destacados-header h2,
h2.titulo-seccion {
    font-family: var(--font-primary) !important;
    font-weight: 900 !important;
    text-align: center !important;
    background: linear-gradient(90deg, #fff, #E8821A) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Centrado de títulos de sección h2 del cuerpo */
main h2,
section h2,
.canton h2 {
    text-align: center !important;
    display: block !important;
}

/* Unificación de texto pequeño en blanco */
p.desc,
.desc,
.peaton-badge,
.meta-badge,
.card-categorias h3,
.peaton-card p,
.peaton-meta span,
.alert-meta-badges span,
.transporte-item p,
span.canton-num,
.canton-list a,
.tipo-tab,
.topLeft p {
    color: #ffffff !important;
}

/* Efecto hover premium uniforme para tarjetas */
.cards .card,
.peaton-card,
.vrtour {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.cards .card:hover,
.peaton-card:hover,
.vrtour:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: 0 20px 40px rgba(232, 130, 26, 0.15) !important;
    border-color: rgba(232, 130, 26, 0.3) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Hover para botones de acción */
.card-container button:hover,
button#descubreBtn:hover,
.btn-premium-viva:hover,
.btn-que-hacer:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(232, 130, 26, 0.5) !important;
    background: linear-gradient(135deg, #f3922b 0%, #E8821A 100%) !important;
}

/* Unificación de cabeceras en páginas internas (cualquiera que no sea home-page) */
body:not(.home-page) #hero {
    background-image: linear-gradient(180deg, rgba(6, 4, 13, 0.52) 0%, rgba(6, 4, 13, 0.42) 50%, #06040d 100%), url("/static/vivacity/images/Rectangle_even.png");
    background-size: cover;
    background-position: center;
    height: auto !important;
    min-height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding-bottom: 60px !important;
    position: relative !important;
}

body:not(.home-page) #hero .header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

body:not(.home-page) #hero>div:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 130px !important;
    /* Ajuste para compensar navbar absoluto */
    padding-bottom: 10px !important;
    text-align: center !important;
}

/* Categoría/Subtítulo superior en cabeceras de páginas internas */
.page-category-subtitle {
    color: #E8821A !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: 1.5px !important;
    display: block !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    font-family: var(--font-primary) !important;
}

/* Títulos H1 en cabeceras de páginas internas (cualquiera que no sea home-page) */
body:not(.home-page) #hero h1,
body:not(.home-page) .tours-hero h1,
body:not(.home-page) .beneficios-hero h1,
body:not(.home-page) .sobre-hero h1,
body:not(.home-page) .post-hero h1,
body:not(.home-page) #hero-categoria h1,
body:not(.home-page) .hero-mini h1,
body:not(.home-page) h1.page-title {
    font-family: var(--font-primary, 'Roboto', sans-serif) !important;
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    letter-spacing: -1.5px !important;
    background: linear-gradient(90deg, #FFFFFF 0%, #E8821A 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
    filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.6)) !important;
    text-align: center !important;
}

/* Descripción de cabeceras en páginas internas para máxima legibilidad */
body:not(.home-page) #hero p,
body:not(.home-page) .tours-hero p,
body:not(.home-page) .beneficios-hero p,
body:not(.home-page) .sobre-hero p,
body:not(.home-page) .post-hero p,
body:not(.home-page) #hero-categoria p,
body:not(.home-page) .hero-mini p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95) !important;
    filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.9)) !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* Unificación de selectores de categoría (tipo-tabs) estilo Blog */
.tipo-tabs {
    display: flex !important;
    gap: 15px !important;
    margin: 30px 0 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding-bottom: 30px !important;
    position: relative !important;
    z-index: 20 !important;
}

.tipo-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.tipo-tab i {
    font-size: 1.1rem !important;
    color: #E8821A !important;
    transition: 0.4s !important;
}

.tipo-tab.active {
    background: linear-gradient(135deg, #E8821A, #ffc131) !important;
    color: #000 !important;
    border-color: #E8821A !important;
    box-shadow: 0 10px 30px rgba(240, 171, 8, 0.4) !important;
    transform: translateY(-5px) scale(1.05) !important;
}

.tipo-tab.active i {
    color: #000 !important;
}

.tipo-tab:hover:not(.active) {
    background: rgba(255,255,255,0.12) !important;
    transform: translateY(-3px) !important;
    color: #fff !important;
}

.tipo-tab:hover:not(.active) i {
    color: #fff !important;
}

/* ══════════════════════════════════════════
   SISTEMA DE DISEÑO UNIFICADO DE BOTONES
   ══════════════════════════════════════════ */

/* 1. Clases Base Unificadas */
.btn-primary-viva {
    background-color: var(--color-purpura) !important;
    color: var(--color-texto-claro) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn-primary-viva:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(232, 130, 26, 0.4) !important;
    background: linear-gradient(135deg, #f3922b 0%, var(--color-naranja) 100%) !important;
    color: #fff !important;
}

.btn-secondary-viva {
    background-color: var(--color-naranja) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn-secondary-viva:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2) !important;
}

.btn-filter-viva {
    background-color: var(--color-purpura) !important;
    color: var(--color-texto-claro) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 42px !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn-filter-viva:hover {
    background-color: var(--color-naranja) !important;
    color: var(--color-texto-claro) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(232, 130, 26, 0.3) !important;
}

.btn-card-viva {
    background-color: #582b9c !important;
    color: var(--color-texto-claro) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 32px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    margin: 0 !important;
}

.btn-card-viva:hover {
    background-color: var(--color-naranja) !important;
    color: var(--color-texto-claro) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 15px rgba(232, 130, 26, 0.35) !important;
}

.btn-card-secondary-viva {
    background-color: var(--color-naranja) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 32px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    margin: 0 !important;
}

.btn-card-secondary-viva:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2) !important;
}

.btn-close-viva {
    background: var(--color-naranja) !important;
    color: #FFFFFF !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(232, 130, 26, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn-close-viva:hover {
    transform: scale(1.1) rotate(90deg) !important;
    background: #FFFFFF !important;
    color: var(--color-naranja) !important;
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25) !important;
}

/* 2. Mapeo Global para todas las páginas */
/* Mapear botones de búsqueda de filtros en formularios */
.container-eve button[type="submit"],
.barra-travesias button,
.barra-tours button,
.input-group button[type="submit"] {
    background-color: var(--color-purpura) !important;
    color: var(--color-texto-claro) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 42px !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.container-eve button[type="submit"]:hover,
.barra-travesias button:hover,
.barra-tours button:hover,
.input-group button[type="submit"]:hover {
    background-color: var(--color-naranja) !important;
    color: var(--color-texto-claro) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(232, 130, 26, 0.3) !important;
}

/* Mapear botones de cerrar paneles en todas las páginas */
.btn-close-aside,
.btn-close-lightbox,
.aside_close {
    background: var(--color-naranja) !important;
    color: #FFFFFF !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(232, 130, 26, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn-close-aside:hover,
.btn-close-lightbox:hover,
.aside_close:hover {
    transform: scale(1.1) rotate(90deg) !important;
    background: #FFFFFF !important;
    color: var(--color-naranja) !important;
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25) !important;
}