/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================================================== */
:root {
    --azul-main: #1d4a8e;
    --amarillo: #fac902;
    --rojo: #e31e24;
    --gris-claro: #f4f4f4;
    --negro: #1a1a1a;
    --blanco: #ffffff;
    --font-main: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    line-height: 1.2;
    color: var(--negro);
    overflow-x: hidden;
}

a{
    color: #1d4a8e;
    
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   2. BOTONES (Reutilizables)
   ========================================================================== */
.btn {
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    text-align: center;
}

.btn-yellow {
    background-color: var(--amarillo);
    color: var(--negro);
    width: 200px;
}

.btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 200, 0, 0.3);
}


.btn-nav-blue {
    background-color:  var(--amarillo);
    color: var(--azul-main) !important;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-nav-blue:hover {
    background-color: #e6c800;
    color: #002244 !important;
}

/* ==========================================================================
   3. NAVBAR (Desktop y Mobile)
   ========================================================================== */
.navbar {
    background-color: var(--azul-main);
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 2000;
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 30px;
    width: auto;
    display: block;
}

.nav-desktop {
    display: flex;
    align-items: center;
}

.nav-desktop a {
    color: var(--blanco);
    text-decoration: none;
    margin-left: 18px;
    font-size: 0.85rem;
    font-weight: 600;
}

.lang-selector {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 20px;
}

.lang-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.lang-btn:hover {
    opacity: 0.75;
}

.lang-btn.lang-active {
    opacity: 1;
}

.lang-flag {
    width: 30px;
    height: auto;
    display: block;
}

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 3000;
    position: relative;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background-color: var(--blanco);
    transition: 0.3s;
    display: block;
}

.hamburger.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

#mobile-menu {
    display: none; /* El JS lo cambia a 'flex' */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--azul-main);
    z-index: 999999; /* Por encima de TODO */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Estilo para los enlaces dentro del menú móvil */
#mobile-menu a {
    font-size: 1.5rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: none;
    justify-content: flex-start;
}

.mobile-menu-overlay.active {
    transform: translateY(0);
}

.mobile-menu-card {
    width: 100%;
    height: 100%;
    background-color: var(--azul-main);
    padding: 40px 30px;
    position: relative;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.close-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 35px;
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
}

/* Estilo normal de los enlaces del header */
.nav-link {
    font-weight: 400;
    transition: all 0.3s ease;
}

/* Estilo cuando el enlace es el de la página actual */
.nav-link.active {
    font-weight: 700; /* Letra más gruesa */
    color: #007bff;   /* O el color principal de Freelanceland */
    border-bottom: 2px solid #007bff; /* Opcional: una rayita abajo */
}

/* Estilo para el enlace activo */
.nav-desktop a.active-link, 
.mobile-nav-links a.active-link {
    font-weight: 800 !important; /* Más grueso */
    color: #fff;            /* Cambia esto por tu azul corporativo */
    position: relative;
}

.nav-desktop a.active-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 60px;
    text-align: left;
}


.mobile-nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 400;
}

.mobile-nav-links a.active-link {
    font-weight: 800;
}

.mobile-nav-links .btn-nav-blue {
    background-color:  var(--amarillo);
    color: #1d4a8e !important;
    padding: 12px;
    border-radius: 25px;
    text-align: center;
    margin-top: 10px;
    font-weight: 800;
}

.mobile-langs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* ==========================================================================
   4. HERO BANNER
   ========================================================================== */

.hero-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}
.hero-content {
    max-width: 550px;
    text-align: left;
}

.hero-content h1 {
    font-size: 3.2rem; 
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -1px; 
}

.hero-content h1 span {
    font-weight: 400;
    font-style: italic;
    display: inline-block;
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */


.btn-outline {
    border: 1px solid var(--negro);
    background: transparent;
    color: var(--negro);
    margin-top: 10px;
}

.hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 550px;
    width: 100%;
}
.hero-grid-evento {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 550px;
    width: 100%;
}


.hero-text-side h1 {
    color: white;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 25px;
}

.hero-text-side {
    flex: 1;
    display: block;
    padding: 40px 20px;
    margin-top: 11rem;
    margin-left: 5rem;
}

.font-bold-italic {
    font-weight: 800;
    font-style: italic;
    display: block;
}

.hero-image-side {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
 margin-top: 1rem;
    margin-left: 14rem;
}
.img-banner {
    max-width: 280px;
    height: auto;
}

/* ==========================================================================
   SECCIÓN INTRO (COLIBRÍ)
   ========================================================================== */

.intro-section {
    padding: 80px 0;
    background-color: #f5f5f5;
    text-align: center;
}

.intro-logo img {
    max-width: 120px;
    margin-bottom: 30px;
}

.intro-text {
    max-width: 800px;
    margin: 0 auto;
}

.intro-text p {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--negro);
    line-height: 1.2;
    margin-bottom: 20px;
}

.intro-text p:first-child {
    font-weight: 500;
    font-size: 1.1rem;
}

.black-divider {
    width: 60px;
    height: 4px;
    background-color: var(--negro);
    margin: 40px auto 0;
}

/* =============================================================
   FOOTER FIJO ICONOS (Solo en Mobile)
   ============================================================= */

.sticky-icon-bar img {
    height: auto;
    object-fit: contain;
}

.sticky-icon-bar a img[src*="ubi"] {
    width: 20px !important;
}

.sticky-icon-bar a img[src*="mail"] {
    width: 33px !important;
}

.sticky-icon-bar a img[src*="calendario"] {
    width: 30px !important;
}

.sticky-icon-bar a img[src*="tel"],
.sticky-icon-bar a img[src*="whatsApp"] {
    width: 30px !important;
}

/* ==========================================================================
   SECCIÓN: TERRITORIOS (CÓDIGO COMPLETO)
   ========================================================================== */

.territorios-section {
    padding: 65px 0;
    background-color: #fff;
    text-align: center;
    width: 100%;
}

.territorios-title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 45px;
    color: #000;
}

.territorios-grid {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
}

.territorio-card {
    flex: 1;
    max-width: 250px;
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
    background-color: #000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.territorio-card:hover {
    transform: translateY(-10px);
}

.card-media {
    height: 190px;
    width: 100%;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-footer-black {
    background-color: #000;
    padding: 25px 10px;
    text-align: center;
}

.card-footer-black h3 {
    color: #ffc800;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    margin: 0;
    text-transform: capitalize;
}

.btn-yellow-main {
    display: inline-block;
    background-color: #ffc800;
    color: #000;
    padding: 5px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1rem;
    transition: background 0.3s ease;
    width: 220px;
    line-height: 1.2;
}

.btn-yellow-main:hover {
    background-color: #e6b400;
}

.territorios-copy {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.2;
margin-top: 20px;
    margin-bottom: 10px;
}

.link-blue-bold {
    color: #1d4a8e;
    text-decoration: underline;
    font-weight: 800;
}

/* ==========================================================================
   SECCIÓN: INFRAESTRUCTURA (EL EFECTO OVERLAP)
   ========================================================================== */

.infra-section {
    background-color: #f5f5f5;
    width: 100%;
    overflow: hidden;
    padding-bottom: 50px;
}

.infra-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
        padding: 30px 20px;
}


.infra-content {
    flex: 1;
    padding-right: 50px;
    z-index: 2;
}

.infra-title {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #000;

}

.infra-body p {
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
    font-weight: 500;
}

.infra-highlight-box {
    position: absolute;
    bottom: 60px;
    left: 20px;
    background-color: #fff;
    padding: 30px;
    width: 75%;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05);
    z-index: 3;
}

.infra-highlight-box p {
    font-weight: 900;
    font-style: italic;
    font-size: 1.2rem;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

.infra-image {
    flex: 1;
    z-index: 1;
}

.infra-image img  {
    width: 100%;
    border-radius: 15px;
    display: block;
    height: 600px;
    object-fit: contain;
}


.unete-section {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unete-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.unete-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unete-content {
    text-align: center;
    color: white;
    padding: 20px;
    z-index: 3;
}

.unete-action {
    margin: 3rem 0;
}

.btn-yellow-unete {
    display: inline-block;
    background-color: #fac902;
    color: #000;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-yellow-unete:hover {
    background-color: #e6b400;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: #000;
}

.btn-yellow-unete:active {
    transform: translateY(0);
}

.unete-title {
    font-size: 1.8rem;
    line-height: 1.2;
}

.unete-subtitle {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 500;
}


/* SECCIÓN 6: INTENCIONAL */
.intencional-section {
    padding: 100px 20px;
    background-color: #fff;
    text-align: center;
}

.intencional-container {
    max-width: 800px;
    margin: 0 auto;
}

.intencional-icon {
    margin-bottom: 40px;
}

.intencional-icon img {
    width: 80px;
    height: auto;
}

.intencional-content .text-regular {
    font-size: 1.2rem;
    line-height: 1.2;
    color: #000;
    margin-bottom: 30px;
}

.intencional-content .text-bold-highlight {
    font-size: 1.1rem;
    font-weight: 800; 
    line-height: 1.2;
    color: #000;
    margin-bottom: 40px;
}

/* Botón Agéndate Negro */
.btn-black-agendate {
    display: inline-block;
    background-color: #1d4a8e;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-black-agendate:hover {
    background-color: #333;
    transform: scale(1.05);
}

/* SECCIÓN 7: VALORES (Colibrí) */
.valores-section {
    padding: 100px 20px;
    background-color: #f5f5f5; 
}

.valores-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

.valores-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.img-colibri {
    max-width: 200px; 
    height: auto;
    display: block;
}

.valores-content {
    flex: auto;
}

.valores-text p {
    font-size: 1.1rem;
    line-height: 1.2;
    color: #000;
    margin-bottom: 25px;
}

.valores-text p:last-child {
    margin-bottom: 0;
}

.link-ingresa {
    /* color: #000; */
    font-weight: 800; 
    text-decoration: underline;
}

/* ==========================================================================
   SECCIÓN DE CONTACTO
   ========================================================================== */

.contacto-section {
    padding-top: 120px !important; 
    padding-bottom: 80px;
    background-color: #fff;
    min-height: 80vh;
}
.contacto-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px; 
    margin: 0 auto;   
    width: 90% ;      
    align-items: flex-start;
}

.contacto-info-col, 
.contacto-form-col {
    flex: 1;
    width: 100%;
}

.contacto-info-col .contacto-titulo {
    text-align: left;
}

.contacto-detalles {
    margin-top: 40px;
}

.detalle-item {
    margin-bottom: 25px;
}

.detalle-item .label {
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.detalle-item a, 
.detalle-item p {
    text-decoration: none;
    color: #000;
    font-size: 1.1rem;
}

.link-estacionamiento {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--azul-main);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-estacionamiento:hover {
    opacity: 0.75;
}

/* Estilos del Formulario */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row.inputs-nombre-apellido {
    display: flex;
    gap: 20px;      
    width: 100%;    
    margin-bottom: 20px;
}
.form-row.inputs-nombre-apellido .form-group {
    flex: 1;        
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.input-estilo, .textarea-estilo {
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* Botón ENVIAR (Estilo cápsula) */
.btn-enviar-contacto {
    width: 100%;
    padding: 15px;
    background-color: #1d4a8e;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.btn-enviar-contacto:hover {
    background-color: #d0d0d0;
}
.btn-enviar-contacto:disabled {
    background-color: #93a8cc;
    cursor: not-allowed;
}

/* ── Feedback de formulario ─────────────────────────────────────────── */

/* Error por campo */
.field-error {
    display: block;
    min-height: 1.1em;
    margin-top: 5px;
    font-size: 0.8rem;
    color: #dc2626;
    line-height: 1.4;
}
.field-error:empty { display: none; }

/* Borde rojo en el input inválido */
.input-estilo.input-error,
.input-registro.input-error,
.textarea-estilo.input-error {
    border-color: #dc2626;
    background-color: #fff8f8;
}
.input-estilo.input-error:focus,
.input-registro.input-error:focus,
.textarea-estilo.input-error:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Banners generales (error y éxito) */
@keyframes bannerEntrada {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 20px;
    animation: bannerEntrada 0.25s ease;
}
.form-banner .banner-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.form-banner.error-general {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    color: #991b1b;
}
.form-banner.success-message {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    color: #166534;
}

.form-banner.advertencia-precio {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

.form-banner.advertencia-precio .banner-icon {
    color: #d97706;
}

.texto-legible {
    font-size: 1.1rem;
    line-height: 1.2; 
    color: #333;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* SECCIÓN REGISTRO */
.registro-section {
    padding: 100px 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.registro-container {
    max-width: 500px; 
    width: 100%;
    text-align: center;
}

.registro-titulo {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.registro-subtexto {
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.registro-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left; 
}

.form-group-registro label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
    text-transform: none; 
    text-transform: capitalize;
}
.form-group-registro {
    margin-bottom: 20px;
}
.input-registro, 
.select-registro {
    width: 100%;
    padding: 12px;
   border: 1px solid #ccc;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    box-sizing: border-box; 
    border-radius: 4px; 
    box-sizing: border-box;
}

.select-registro {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"14"%20height%3D"14"%20viewBox%3D"0%200%2024%2024" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6%209l6%206%206-6"%2F><%2Fsvg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
}
.select-registro {
    cursor: pointer;
    color: #333;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.btn-ingresar {
    width: 100%;
    max-width: 300px;
    margin: 20px auto 0;
    padding: 15px;
    background-color: #1d4a8e;
    color: #fff;
    border: none;
    border-radius: 50px; 
    font-weight: 800;
    cursor: pointer;
    display: block;
    transition: background 0.3s ease;
    font-size: 1rem;


}


.btn-ingresar:hover {
    background-color: #d0d0d0;
}

.input-calendario {
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #666;
}

.input-calendario::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    filter: invert(0); 
}

.input-registro {
    border: 1px solid #ccc;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* SECCIÓN LOGIN */
.login-section {
    padding: 120px 20px; 
    background-color: #fff;
    display: flex;
    justify-content: center;
    min-height: 60vh;
}

.login-container {
    max-width: 400px; 
    width: 100%;
    text-align: center;
}

.login-titulo {
    font-size: 2rem; 
    font-weight: 800;
    margin-bottom: 10px;
}

.login-subtexto {
    font-size: 1rem;
    margin-bottom: 40px;
    color: #333;
}

.login-form {
    text-align: left;
}

.form-group-login {
    margin-bottom: 25px;
}

.form-group-login label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-align: left;
}

.btn-iniciar-sesion {
    width: 100%;
    max-width: 220px; 
    margin: 20px auto 0;
    padding: 15px;
    background-color: #1d4a8e;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    display: block;
    text-transform: none; 
}

.btn-iniciar-sesion:hover {
    background-color: #d0d0d0;
}

.box-pass{
    text-align: center;
    margin-top: 1rem;
}
.login-recuperar-pass{
    color: #333;
    margin-bottom: 11px;
}


/* SECCIÓN RECUPERAR CONTRASEÑA */
.reset-section {
    padding: 140px 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    min-height: 50vh;
}

.reset-container {
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.reset-titulo {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.reset-subtexto {
    font-size: 1.1rem;
    margin-bottom: 40px;
    color: #333;
}

.reset-form {
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
}

.form-group-reset label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.btn-enviar-reset {
    width: 100%;
    max-width: 200px;
    margin: 30px auto 0;
    padding: 15px;
    background-color: #1d4a8e;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    display: block;
    font-size: 1rem;
}

.btn-enviar-reset:hover {
    background-color: #d0d0d0;
}


/* SECCIÓN POLÍTICAS */
.politicas-section {
    padding: 100px 5%;
    background-color: #fff;
}

.container-lectura {
    max-width: 900px;
    margin: 0 auto;
}

.breadcrumb {
    font-size: 0.9rem;
    margin-bottom: 40px;
}

.breadcrumb a {
    text-decoration: underline;
    color: #000;
}

.breadcrumb span {
    color: #666;
    margin-left: 5px;
}

.titulo-politicas {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 50px;
}

.titulo-politicas strong {
    font-weight: 800;
}

.intro-politicas {
    margin-bottom: 25px;
}

.destacado-politicas {
    font-weight: 700;
    margin-bottom: 30px;
}

.lista-politicas {
    list-style: none;
    padding: 0;
}

.lista-politicas li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.lista-politicas li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

/* SECCIÓN FAQ */
.faq-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-item {
    border-bottom: 1px solid #e6e6e6;
}

.faq-item:first-child {
    border-top: 1px solid #e6e6e6;
}

.faq-item details {
    padding: 0;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.4;
    outline: none;
}

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

.faq-pregunta span {
    flex: 1;
}

.faq-icono {
    transition: transform 0.25s ease;
    font-size: 0.9rem;
    color: #555;
}

.faq-item details[open] .faq-icono {
    transform: rotate(180deg);
}

.faq-respuesta {
    padding: 0 0 22px 0;
    line-height: 1.6;
    color: #333;
}

/* SECCIÓN QUIÉNES SOMOS */
.quienes-banner {
    width: 100%; 
    max-width: 1920px; 
    
    height: auto; 
    
   
    background-size: cover; 
    
    background-position: center; 
    background-repeat: no-repeat;
        aspect-ratio: 16 / 9; 
    
    display: block;
    margin: 0 auto; 
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}




/* --- SECCIÓN NUESTRA HISTORIA --- */
.historia-section {
    padding: 80px 5%;
    background-color: #f5f5f5;
    overflow: hidden;
}

.historia-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.parrafo-historia, .parrafo-trayectoria, .lead-trayectoria {
    font-size: 1.1rem;
    line-height: 1.2;
    color: #000;
    padding-left: 20px;
}

.historia-visual {
    z-index: 1;
}

.img-simbolo {
    width: 100%;
    max-width: 490px; 
    height: 85vh;
    display: block;
}

.historia-texto {
    z-index: 2;
    
}

.titulo-historia {
    font-size: 1.8rem;
    font-weight: 800;
    font-style: italic;
    margin-bottom: 25px;
    padding-left: 20px;
    color: #000;
}

.texto-destacado-caja {
    background-color: #f5f5f5;
    padding: 20px 30px;
    
    margin-left: -250px; 
    margin-top: 30px;
    margin-bottom: 30px;
    
    position: relative;
    width: 160%; 
}

.texto-destacado-caja p {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}


.trayectoria-section {
    background-color: #ffcc00; 
    padding: 100px 10%;
}

.trayectoria-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    max-width: 900px;
    margin: 0 auto;
}

.img-bombillo {
    width: 350px;
}

.trayectoria-lead {
    font-size: 1.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}
.trayectoria-visual {
       margin-top: 20px;

}


.seccion-reservas-page {
    padding: 100px 20px 60px; 
    background-color: #fff;
    overflow-x: hidden; 
}

.contenedor-reserva {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.header-reserva {
    text-align: center;
    margin-bottom: 60px;
}
/* Estilo para las reservas clicables */
.item-reserva-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #555;
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background-color: #f9f9f9;
    width: 100%;
    box-sizing: border-box;
}

.item-reserva-link:hover {
    background-color: #fff;
    border-color: #FFD700; /* Borde amarillo al pasar el mouse */
    color: #000;
    transform: translateX(5px); /* Pequeño efecto de movimiento */
}

.flecha-link {
    color: #FFD700;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.item-reserva-link:hover .flecha-link {
    opacity: 1;
}

.titulo-principal {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.descripcion-header {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.2;
    color: #000;
}

.footer-reserva {
    
    text-align: center;
    color: black;

}
/* .grid-reservas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    margin-bottom: 50px;
} */
.grid-reservas {
    display: grid;
    /* Forzamos 6 columnas iguales en escritorio */
    grid-template-columns: repeat(6, 1fr); 
    gap: 12px; /* Espacio reducido entre tarjetas */
    width: 100%;
    margin: 0 auto;
    align-items: stretch; /* Para que todas las tarjetas midan lo mismo de alto */
}
/* .card-reserva {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
} */
.card-reserva {
    background: #fff;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Alinea el botón abajo siempre */
    position: relative;
    transition: transform 0.3s ease;
}


/* .card-reserva img {
    height: 85px;
    width: auto;
    margin-bottom: 10px;
} */

.card-reserva img {
    width: 100%;
    height: 80px; /* Altura fija para todas las imágenes */
    object-fit: contain; /* Ajusta la imagen sin deformarla */
    margin-bottom: 10px;
}

/* .card-reserva h3 {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 15px;
   
} */

.card-reserva h3 {
    font-size: 0.95rem; /* Un poco más pequeña para que quepa en una fila */
    margin: 10px 0;
    min-height: 40px; /* Espacio reservado para el título (por si tiene 2 líneas) */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.desde { font-size: 0.9rem; color: #000; margin: 0; }
.precio { font-size: 1rem; font-weight: 800; margin: 5px 0 20px; }

.btn-reserva {
        background-color: #ffcc00;
    color: #000;
    padding: 10px 10px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 800;
    display: block;
    font-size: 0.8rem;
    white-space: nowrap;
}



.tag-popular {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 700;
    font-style: italic;
    color: #000;
    bottom: -10px;
}
.plan-ejecutivo{
    color: #000;
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;

}
.terminos-section {
    padding: 120px 20px 80px;
    background-color: #fff;
    color: #333;
}

.container-terminos {
    max-width: 800px; 
    margin: 0 auto;
}

.terminos-header {
    text-align: center;
    margin-bottom: 50px;
}

.terminos-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.intro-legal {
    font-size: 1.1rem;
    line-height: 1.2;
    color: #555;
}

.cuerpo-legal article {
    margin-bottom: 40px;
}

.cuerpo-legal h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    border-bottom: 2px solid #ffcc00; 
    display: inline-block;
}

.cuerpo-legal p, .cuerpo-legal li {
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cuerpo-legal ul {
    padding-left: 20px;
    list-style-type: disc;
}

/* Hero Membresías */
/* .membership-hero {
    height: 100vh;
    background:  url('../img/banner-membresia.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
} */

.membership-hero {
    height: 100vh; 
    min-height: 450px;
    background:  url('../img/banner-membresia.png'); 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    padding-left: 10%; 
    color: white;
}

.membership-hero h1 { font-size: 3rem; font-weight: 800; }
.membership-hero h1 span { font-style: italic; font-weight: 300; }

/* Sección Planes */
.membership-plans { background: #f9f9f9; padding: 40px;}
.membership-plans .container {
    display: flex;
    flex-direction: column; 
    gap: 40px; 
}
.plans-header {
    text-align: center;
    padding: 20px 20px 40px; 
    max-width: 900px;
    margin: 0 auto; 
}
.plans-header h2 {
    font-size: 1.8rem; 
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
    letter-spacing: -1px; 
    line-height: 1.2;
}

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

.plans-header p {
    font-size: 1rem;
    color: #000;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 10px;
}
.plan-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.plan-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
}
.plan-card.featured {
    background: #FFCC00;
    transform: scale(1.05);
    border: none;
    position: relative;
    z-index: 2;
}

.popular-tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.plan-features { list-style: none; padding: 0; margin: 5px 0; flex-grow: 1; }
.plan-features li {
    padding: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.8rem;
    text-transform: uppercase;
    background: #fefef2;
    border-radius: 10px;
    margin: 5px 0;
}
.plan-features li.disabled { color: #ccc; text-decoration: line-through; }

.plan-price { font-size: 2.5rem; font-weight: 800; margin-bottom: 25px; }
.plan-price .currency { font-size: 1.2rem; vertical-align: top; }
.plan-price .period { font-size: 1rem; color: #666; }

.btn-outline { border: 2px solid #000; padding: 12px; border-radius: 25px; text-decoration: none; color: #000; font-weight: bold; }
.btn-dark { background: #000; color: #fff; padding: 12px; border-radius: 25px; text-decoration: none; font-weight: bold; }

.btn-outline {
    display: inline-block;
    border: 2px solid #000;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    transition: all 0.3s ease; 
}

.btn-outline:hover {
    background-color: #000; 
    color: #fff;            
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
}

.btn-dark {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 14px 35px; 
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #000;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background-color: #333;
    border-color: #333;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.btn-outline:active, .btn-dark:active {
    transform: translateY(-1px); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.reservation-footer-text {
    text-align: center;
    max-width: 850px; 
    margin: 50px auto 0;
    padding: 0 25px;
}
.ver-detalles {
    color: black;
    font-size: 10px;
    margin-bottom: 10px;
}
.res-main {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

.res-sub {
    font-size: 1rem;
    color: #000;
    line-height: 1.2;
    font-weight: 500; 
}

.services-section {
    padding: 80px 20px;
    background-color: #ffffff;
    text-align: center;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 60px;
    color: #000;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-box {
    margin-bottom: 25px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-box img {
    height: 70px;
    margin-bottom: 15px;
}

.underline {
    width: 60px;
    height: 3px;
    background-color: #000;
    margin-bottom: 25px;
}

.service-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    font-style: italic; 
    margin-bottom: 15px;
    line-height: 1.2;
    color: #000;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.2;
    color: #333;
    max-width: 220px;
}

.community-section {
    padding: 60px 20px;
    background-color: #f9f9f9; 
}

.community-flex {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 10px;
}

.community-text {
    text-align: left; 
    width: 100%;
}

.coffee-icon img {
    width: 100px;
    margin-bottom: 20px;
}

.community-text h2 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #000;
}

.community-text p {
    font-size: 1rem;
    line-height: 1.2;
    color: #333;
    max-width: 450px;
}

.community-text strong {
    font-style: italic;
    font-weight: 700;
}

.community-image {
    width: 100%;
}

.community-image img {
    width: 100%;
    border-radius: 4px; 
    display: block;
}

.volver-log{
    margin-top: 10px;
}

.hero-banner {
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}
.hero-banner-evento {
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}
.banner-eventos {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/static/img/bg-eventos.jpg');
}

.hero-content h1 {
    color: white;
    font-size: 2rem;
    max-width: 600px;
    /* margin-bottom: 20px; */
    font-weight: 800;
    margin-top: 100px;
}


.intro-red {
    background-color: #dd0200; 
    color: white;
    padding: 160px 0;
    text-align: center;
}

.intro-red p {
    max-width: 800px;
    margin: 0 auto 20px;
    line-height: 1.2;
    font-size: 1.2rem;
    margin-bottom: 70px;
}
.intro-red p:first-of-type {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 30px;
}

.section-convergencia {
    padding: 80px 0;
    background-color: #f5f5f5;
    text-align: center;
}

.icon-divider {
    margin-bottom: 40px;
}

.icon-divider img {
    width: 80px; 
    height: auto;
}

.convergencia-content {
    max-width: 800px;
    margin: 0 auto;
}

.convergencia-content p:first-of-type {
    font-size: 1.1rem;
    color: #000;
    line-height: 1.2;
    margin-bottom: 30px;
    font-weight: 600;
}

.p-sub {
    font-size: 1.4rem;
    color: #000;
    line-height: 1.2;
    margin-bottom: 40px;
    font-weight: 700;
}

.btn-black {
    background-color: #000;
    color: #fff;
    padding: 12px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-black:hover {
    transform: scale(1.05);
    background-color: #333;
}

.seccion-galeria {
    padding: 80px 0;
    text-align: center;
    background-color: #fff;
}

.titulo-galeria {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: #000;
}

.titulo-galeria strong {
    font-weight: 800;
}

/* --- EL GRID --- */
.grid-galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 250px; 
    gap: 15px;
    /* row dense es lo que busca rellenar los huecos vacíos */
    grid-auto-flow: row !important; 
}
.galeria-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

/* --- CLASES DINÁMICAS --- */
/* Si la imagen es horizontal, ocupará 2 de las 3 columnas */
.galeria-item.horizontal { 
    grid-column: span 2; 
}

/* Si es cuadrada, ocupa 1 de las 3 */
.galeria-item.cuadrada { 
    grid-column: span 1; 
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Evita espacios extraños en la base */
}

/* --- ETIQUETA BLANCA --- */
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 10px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    white-space: nowrap;
    z-index: 2;
}

.overlay span {
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- PIE DE GALERÍA --- */
.galeria-footer {
    margin-top: 40px;
    font-size: 1.1rem;
    color: #444;
}

.seccion-comunidad {
    padding: 60px 0;
    text-align: center; /* Centra la imagen y los textos */
    background-color: #f5f5f5;
}

.container-mini {
    max-width: 1100px; /* Contenedor más estrecho para que los párrafos no sean eternos */
    margin: 0 auto;
    padding: 0 20px;
}

/* Imagen arriba */
.comunidad-imagen img {
    max-width: 150px;
    height: auto;
    margin-bottom: 40px;
}

/* Párrafos abajo con diferentes tamaños */
.comunidad-textos .txt-1 {
    font-size: 1.8rem;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 25px;
}

.comunidad-textos .txt-1 strong {
    font-weight: 800;
}

.comunidad-textos .txt-2 {
    font-size: 1.1rem; /* Subtítulo grande */
    color: #000;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.2;
}

.comunidad-textos .txt-3 {
    font-size: 1.1rem; /* Texto de lectura estándar */
    color: #000;
    line-height: 1.2;
    margin-bottom: 25px;
}

.comunidad-textos .txt-4 {
    font-size: 1.3em; /* Cierre con un poco más de peso */
    color: #000;
    font-weight: 700;
}

/* =========================================
   SECCIÓN AGENDA (RESETEO Y CENTRADO)
========================================= */
.evento-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

/* Efecto de elevación al pasar el mouse */
.card-evento:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Estilo del pequeño texto de "Agendar" */
.btn-agendar-texto {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1c52a0; /* Puedes usar el azul de tu marca */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.evento-link:hover .btn-agendar-texto {
    text-decoration: underline;
}
.seccion-agenda {
    padding: 80px 0;
    text-align: center;
    background: #fff;
    width: 100%;
    overflow: hidden; 
}

.titulo-agenda { font-size: 2.5rem; font-weight: 800; margin-bottom: 5px; color: #000; }
.subtitulo-agenda { font-size: 1.1rem; color: #000; margin-bottom: 50px; }

.grid-agenda {
    display: flex;
    gap: 20px;
    overflow-x: hidden; 
    scroll-behavior: smooth;
    padding: 20px 0;
    width: 100%;
}

.card-evento {
    flex: 0 0 250px; 
    height: auto;    
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: center;    
    text-align: center;     
    border-radius: 12px;
    overflow: hidden;
    background: transparent; 
    box-shadow: none;        
}

.card-image-container {
    width: 100%;
    height: 350px; 
    overflow: hidden;
    position: relative;
    border-radius: 15px; /
}

.card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.circulo-fecha {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.am { background: #FFC107; color: #000 !important; }
.az { background: #007bff; }
.rj { background: #dc3545; }

.card-body {
    width: 100%;
    padding: 15px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.evento-precio-badge {
    min-height: 1.4em;
    line-height: 1.4;
    font-size: 13px;
    color: #888;
    margin: 4px 0 8px;
}

.btn-agendarse {
    margin-top: auto;
}

.evento-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    display: block;
    width: 100%;
    line-height: 1.3;
    text-shadow: none; 
}

.agenda-wrapper { position: relative; display: flex; align-items: center; justify-content: center; max-width: 1100px; margin: 0 auto; }
.btn-flecha {
    position: absolute; top: 40%; transform: translateY(-50%);
    background: white; border: none; width: 45px; height: 45px;
    border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center;
}
.btn-flecha.prev { left: -25px; }
.btn-flecha.next { right: -25px; }

.modal-reserva {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.modal-reserva.abierto {
    display: flex;
    animation: fadeInModal 0.22s ease;
}
@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.modal-contenido {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 850px;
    max-height: 90vh; /* Para que no se salga de pantallas pequeñas */
    overflow-y: auto;
    position: relative;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
}

.modal-contenido.split-layout {
    display: flex;
    flex-direction: row;
    background: white;
    width: 95%;
    max-width: 1100px;
    border-radius: 15px;
    position: relative;
    height: 90vh;        /* Altura fija para que los hijos puedan usar height:100% */
    overflow: hidden;    /* El modal no hace scroll — cada columna gestiona el suyo */
}

.cerrar-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 30px;
    cursor: pointer;
    color: #333;
    line-height: 1;
}
.cerrar-modal:hover { color: #ff0000; }
/* Ajuste del Calendario */
#calendar {
    margin-top: 20px;
    max-height: 500px;
}

/* Personalización de colores de FullCalendar para FreelanceLand */
.fc-event {
    background-color: #1c52a0 !important;
    border: none !important;
    padding: 2px 5px;
}

.col-formulario {
    flex: 0 0 350px;
    padding: 40px;
    background: #f8f9fa;
    border-right: 1px solid #eee;
    overflow-y: auto;    /* El formulario hace scroll si su contenido es largo */
}

.col-calendario {
    flex: 1;
    padding: 20px;
    background: white;
    overflow: hidden;    /* El calendario llena exactamente esta columna */
    display: flex;
    flex-direction: column;
}
.col-calendario #calendar {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ESTILOS DE INPUTS */
.campo { margin-bottom: 15px; }
.campo label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }

.input-estilo, .input-readonly {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.input-readonly { background: #e9ecef; cursor: not-allowed; }

.grid-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Selector de modalidad de pago (hora / día / mes) en el modal de reserva */
.pricing-tabs {
    display: flex;
    gap: 6px;
    margin: 10px 0 14px;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 4px;
}
.pricing-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    color: #555;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.pricing-tab:hover { color: #1c52a0; }
.pricing-tab.activo {
    background: #ffd700;
    color: #1c2a44;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.btn-confirmar {
    width: 100%;
    padding: 12px;
    background: #1c52a0;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}
.btn-confirmar:disabled {
    background: #aaa;
    cursor: not-allowed;
    opacity: 0.7;
}
/* Botones de plan como <button> (heredan estilos de .btn-outline / .btn-dark) */
button.btn-outline, button.btn-dark {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}
button.btn-outline:disabled, button.btn-dark:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Badge plan activo */
.badge-plan-activo {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    border: 2px solid #2e7d32;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.95rem;
    text-align: center;
    width: 100%;
}
/* Utilities */
.texto-gris { color: #888; font-size: 0.9rem; }
.mb-4 { margin-bottom: 1.5rem; }
.plan-allowances {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    font-size: 0.85rem;
    color: #555;
}
.plan-allowances li::before { content: "• "; color: #1c52a0; }

/* ── Panel usuario — datos-derecha enriquecido ─────────────────────────── */
.panel-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFD700;
    color: #000;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    align-self: flex-start;
}

.panel-dato-fila {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: #555;
    margin: 4px 0;
}
.panel-dato-fila i { color: #1c52a0; width: 14px; flex-shrink: 0; }

.panel-alerta-cancel {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fdf0f0;
    border-left: 3px solid #e74c3c;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.84rem;
    color: #c0392b;
    font-weight: 600;
    margin-top: 8px;
}

.panel-allowance-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}
.panel-allowance-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f4ff;
    border: 1px solid #d0daf5;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 0.8rem;
    color: #1c52a0;
}
.panel-allowance-tag .tag-hours { font-weight: 700; }

.panel-empty-state {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bbb;
    font-size: 0.88rem;
    padding: 6px 0;
}
.panel-empty-state i { font-size: 1rem; }

.badge-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.badge-status.open   { background: #e8f8f0; color: #27ae60; }
.badge-status.closed { background: #f0f0f0; color: #7f8c8d; }

.item-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.item-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.item-row-icon {
    color: #1c52a0;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.item-row-title {
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-row-meta {
    color: #999;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.item-row-amount {
    font-weight: 700;
    color: #1c52a0;
    font-size: 0.9rem;
}
.cerrar-modal {
    position: absolute;
    right: 15px; top: 10px;
    font-size: 25px;
    cursor: pointer;
    z-index: 10;
}
.plan-status-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #e8f5e9;
    border-left: 4px solid #2e7d32;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #2e7d32;
    font-weight: 600;
}
.precio-preview {
    background: #f0f4ff;
    border-left: 4px solid #1c52a0;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #1c52a0;
    font-weight: 600;
}
.leyenda-calendario {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 12px;
    font-size: 0.78rem;
    color: #555;
    background: #f0f2f5;
    border-radius: 6px;
}
.leyenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.leyenda-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Skeleton loader */
.skeleton-slots {
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skeleton-bar {
    height: 14px;
    width: 100%;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 6px;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fila de botones del formulario */
.fila-botones-modal {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: 12px;
}
.fila-botones-modal .btn-confirmar {
    flex: 1;
    margin-top: 0;
}
.btn-limpiar-modal {
    background: none;
    border: 1px solid #ccc;
    color: #888;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.btn-limpiar-modal:hover { color: #dc3545; border-color: #dc3545; }

/* Panel de resumen de confirmación */
.panel-resumen {
    background: #f8f9ff;
    border: 1px solid #d0d8f0;
    border-radius: 10px;
    padding: 20px;
}
.resumen-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #1c52a0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.resumen-detalle p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    font-size: 0.9rem;
    color: #333;
}
.resumen-detalle i {
    color: #1c52a0;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.resumen-acciones {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.resumen-acciones .btn-confirmar {
    flex: 1;
    margin-top: 0;
}
.btn-editar-reserva {
    background: none;
    border: 2px solid #1c52a0;
    color: #1c52a0;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.btn-editar-reserva:hover { background: #eef2ff; }

/* Tooltip flotante del calendario */
.cal-tooltip {
    position: fixed;
    background: rgba(30,30,30,0.88);
    color: #fff;
    font-size: 0.78rem;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 99999;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Cursor sobre slots del calendario */
.fc-bg-event { transition: opacity 0.15s; }
.fc-bg-event.bg-libre      { background-color: #1c52a0 !important; }
.fc-bg-event.bg-ocupado    { background-color: #dc3545 !important; }
.fc-bg-event.bg-no-laboral { background-color: #999999 !important; }

/* Rango seleccionado en el calendario */
.rango-seleccionado { opacity: 0.55 !important; }

/* Días pasados en el calendario — visualmente atenuados */
.fc-timegrid-col.fc-day-past {
    background: repeating-linear-gradient(
        -45deg,
        rgba(200,200,200,0.08) 0px,
        rgba(200,200,200,0.08) 4px,
        transparent 4px,
        transparent 10px
    );
}
.fc-col-header-cell.fc-day-past {
    opacity: 0.45;
}
.fc-daygrid-day.fc-day-past {
    opacity: 0.45;
}

/* Esto es lo que hace que el menú se vea cuando JS activa la clase */
.mobile-menu-overlay.active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}

/* Asegúrate de que el z-index sea altísimo para que no quede detrás de nada */
.mobile-menu-overlay {
    z-index: 10002 !important; 
}


/* Alineación de la columna de WhatsApp en el Footer */
.whatsapp-desktop-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1; /* Empuja el icono a la derecha */
}

.whatsapp-icon-desktop {
    width: 60px; /* Tamaño ajustable según tu gusto */
    height: auto;
    transition: transform 0.3s ease;
}

.whatsapp-icon-desktop:hover {
    transform: scale(1.1); /* Efecto sutil al pasar el mouse */
}

.main-footer {
    position: relative; 
    padding: 40px 0; /* Asegúrate de que tenga padding para que no se pegue arriba/abajo */
    background-color: #e0e0e0; /* O el color gris que estés usando */
}´
.footer-container {
    display: flex;
    justify-content: flex-start; /* Mantiene tus columnas a la izquierda */
    gap: 50px;
    max-width: 1200px; /* O el ancho de tu web */
    margin: 0 auto;
    padding: 0 20px;
}

/* El icono mágico */
.whatsapp-footer-desktop {
    position: absolute;
    right: 40px; /* Distancia desde la derecha */
    top: 80%;
    transform: translateY(-50%); /* Lo centra perfectamente de arriba a abajo */
    display: block;
}

.whatsapp-footer-desktop img {
    width: 50px; /* Tamaño que necesites */
    height: auto;
    transition: 0.3s;
}

.whatsapp-footer-desktop img:hover {
    transform: scale(1.1);
}


#panel-final-clon {
    width: 100%;
    margin-top: 50px; /* Tu ajuste para que no se solape con el azul */
    display: block;
}

/* El contenido interno de cada tarjeta ocupa todo el ancho disponible */
#panel-final-clon .contenido-tarjeta {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#panel-final-clon .datos-derecha {
    width: 100%;
    align-items: stretch;
}

.nav-link-black {
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 10px 0; /* Espacio arriba y abajo para que sea más fácil de tocar */
    display: inline-block;
}
.nav-item-link {
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
    border: none !important;
}

.logout-form {
    display: inline;
    margin: 0;
    padding: 0;
}
.logout-form button.nav-item-link {
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: #000;
    -webkit-appearance: none;
    appearance: none;
}

.nav-content-center {
    display: flex;
    justify-content: center;
    align-items: center;
   padding: 15px 0 5px 0; /* Ajusta el padding para que quede bien centrado verticalmente */
    gap: 80px;
}
.nav-link-black {
    margin: 0 30px; /* 30px a la izquierda y 30px a la derecha */
}
/* BARRA AMARILLA: Arreglo de alineación */
.header-amarillo-full {
    background-color: #FFD700;
    width: 100%;
}
.nav-links a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 40px;
    display: inline-block;
    position: relative;
}
.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #000;
}
.cuerpo-general {
   
    min-height: 100vh;
}
.cuerpo-gris {
     padding: 40px 0;
    background-color: #f2f2f2;
   
}

.cuerpo-w {
     padding: 40px 0;
    background-color: #fff;
   
}
/* PERFIL: Corregir encimado */
.seccion-perfil { display: flex; align-items: center; gap: 25px; }
.caja-avatar {
    width: 150px; height: 150px; background: #e0e0e0; border: 1px solid #ccc;
    border-radius: 100px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; position: relative; flex-shrink: 0; /* Evita que se aplaste */
}
.caja-avatar img {
    width: 150px;
    border-radius: 100px;
    height: 150px;
}
.tag-foto { 
    background: #FFD700; font-size: 10px; font-weight: 800; 
    padding: 2px 8px; border-radius: 4px; position: absolute; bottom: 15px; 
}
.txt-pajaro { font-size: 1.8rem; margin: 0; color: #333; font-weight: 300; }
.txt-nombre { font-size: 2.2rem; font-weight: 800; margin: 0; color: #000; }
.txt-editar { color: #000; font-weight: 700; text-decoration: none; }

/* FILAS Y BLOQUES: La clave del diseño */
.fila-panel {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    gap: 30px;
}
.tarjeta {
    flex: 1; /* Ocupa todo el espacio de la izquierda */
    border-radius: 15px;
    padding: 25px 40px;
    min-height: 150px;
}
.tarjeta.blanca { border: 1.5px solid #707070; background: #fff; }
.tarjeta.gris { background-color: #d6d6d6; border: none; }

.contenido-tarjeta h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 5px; }

/* Alineación de los datos a la derecha dentro de la tarjeta */
.datos-derecha {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start 
}
.datos-derecha p {
    margin: 3px 0;
    font-size: 1rem;
    text-align: left; 
    width: fit-content; 
    display: block;
}
.datos-centro { text-align: center; }

.columna-botones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 250px; 
}
.btn-amarillo {
    background-color: #FFD700;
    border: none;
    border-radius: 30px;
    padding: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    color: #000;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}

.sub-nav-amarillo {
    background-color: #FFD700;
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: center; 
}

.sub-nav-amarillo a {
    color: #000 !important; 
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: opacity 0.2s;
}

.sub-nav-amarillo a:hover {
    opacity: 0.7;
}

.sub-nav-amarillo a.active::after,
.sub-nav-amarillo a::after {
    display: none !important;
    content: none !important;
}

.sub-nav-amarillo .container div {
    gap: 60px !important; 
}


#historial-v {
    width: 100%;
    margin-top: 50px;
    font-family: sans-serif;
}

.container-historial {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ESTILOS DE CABECERA --- */
#historial-v .cuerpo-gris {
    background-color: #f2f2f2;
    padding: 40px 0;
    border-bottom: 1px solid #ddd;
}

#historial-v .txt-nombre { font-size: 2.2rem; font-weight: 800; margin: 0; }
#historial-v .txt-pajaro { font-size: 1.2rem; font-weight: 300; margin: 5px 0 0; }

#historial-v .seccion-cards-blanca {
    background-color: #ffffff;
    padding: 40px 0;
}

#historial-v .fila-panel {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

#historial-v .tarjeta-v {
    flex: 1;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

#historial-v .tarjeta-v.blanca {
    border: 2px solid #555;
    background-color: #fff;
}

#historial-v .titulo-item {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    border-left: 5px solid #FFD700;
    padding-left: 15px;
}

#historial-v .datos-derecha {
    margin-top: auto;
    display: flex;
    justify-content: flex-end; 
}

#historial-v .bloque-texto-alineado {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    text-align: left;
    min-width: 280px; 
}

#historial-v .bloque-texto-alineado p {
    margin: 4px 0;
    font-size: 1rem;
    color: #333;
}

#historial-v .columna-botones {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 250px;
}

#historial-v .btn-amarillo-v {
    background-color: #FFD700;
    border: none;
    border-radius: 30px;
    padding: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    transition: 0.2s;
    text-decoration: none;
    display: inline-block;
}

#historial-v .btn-amarillo-v:hover {
    background-color: #e6c200;
}


/* --- ESTILOS "PDF" --- */
@media print {

    footer,
    .main-footer,
    .mobile-simple-footer,
    .sticky-icon-bar,
    .whatsapp-footer-desktop,
    nav.sticky-icon-bar,
    .header-amarillo-full,
    .columna-botones,
    .txt-pajaro,
    .btn-rojo-v,

    .btn-amarillo-v {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: white !important;
    }

    #panel-final-clon, #historial-v {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .cuerpo-gris {
        background-color: #f2f2f2 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        padding: 20px !important;
    }

    .tarjeta-v.blanca {
        border: 1px solid #333 !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
        page-break-inside: avoid !important;
    }

    .bloque-texto-alineado {
        min-width: 200px !important;
        max-width: 100% !important;
    }

    #historial-v, 
    #historial-v .container-historial, 
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: white !important;
    }

    #historial-v .tarjeta-v.blanca {
        border: 1px solid #000 !important; 
        box-shadow: none !important;
        page-break-inside: avoid; 
        margin-bottom: 20px;
    }

    #historial-v .cuerpo-gris {
        background-color: #f2f2f2 !important;
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
    }

    #historial-v .bloque-texto-alineado {
        min-width: auto !important; 
    }

    .qr-imprimible {
        border-left: 1px solid #000 !important;
    }
}



/* --- ESTILOS DEL MODAL QR --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Modal de confirmación apilado sobre otro modal */
#modal-refund-confirm {
    z-index: 10001;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    animation: aparecer 0.3s ease-out;
}

@keyframes aparecer {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h3 { margin: 0; font-weight: 800; }

.btn-cerrar-modal {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.caja-qr {
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 15px;
    margin: 20px 0;
}

.caja-qr img {
    width: 200px;
    height: 200px;
}

.info-qr p {
    margin: 5px 0;
    font-size: 0.9rem;
}


#editar-perfil-v .seccion-blanca {
    background-color: #ffffff;
    padding: 60px 0; 
}

#editar-perfil-v .grid-form {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    max-width: 900px; 
    margin: 0 auto;
}

#editar-perfil-v .col-foto {
    flex: 0 0 220px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

#editar-perfil-v .input-file-custom {
    display: none !important;
}
#editar-perfil-v .btn-subir {
    display: inline-block !important;
    background-color: #555555 !important;
    color: #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 25px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background-color 0.2s ease !important;
    margin-top: 15px !important;
    border: none !important;
    line-height: 1 !important;
}

#editar-perfil-v .btn-subir:hover {
    background-color: #333333 !important;
}

#editar-perfil-v .caja-avatar-edit {
    width: 180px;
    height: 180px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

#editar-perfil-v .caja-avatar-edit img {
    max-width: 110px;
    height: auto;
}
#editar-perfil-v .col-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px; 
}

.grupo-input label {
    font-weight: 700;
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 8px; 
    display: block;
}

.grupo-input input {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #ececec; 
    border-radius: 12px;
    font-size: 1rem;
    background-color: #fcfcfc;
    outline: none;
    transition: all 0.3s ease;
}

.grupo-input input:focus {
    border-color: #FFD700;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1); 
}

.botones-form {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 15px;
    padding-top: 10px;
}

.btn-amarillo-save {
    background-color: #FFD700;
    border: none;
    padding: 14px 35px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    transition: transform 0.2s;
}

.btn-amarillo-save:hover {
    transform: translateY(-2px); 
}

.btn-cancelar {
    text-decoration: none;
    color: #999;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.btn-cancelar:hover {
    color: #555;
}


.input-file-oculto {
    display: none !important;
}

.btn-subir-estilizado {
    display: inline-block;
    background-color: #555; 
    color: white !important; 
    padding: 8px 24px; 
    border-radius: 20px; 
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer; 
    text-align: center;
    transition: background-color 0.2s ease;
    margin-top: 10px; 
}

.btn-subir-estilizado:hover {
    background-color: #333;
}


/* --- VISTA TICKETS --- */

#ticket-v .container {
    max-width: 1000px; 
    margin: 0 auto;
}

#ticket-v .cuerpo-gris {
    padding: 80px 0 60px 0 !important; 
}

#ticket-v .seccion-blanca {
    padding: 60px 0 !important;
}

#ticket-v .caja-formulario-ticket {
    max-width: 650px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 35px; 
}

#ticket-v .input-estilo {
    margin-top: 10px; 
    padding: 16px 20px !important; 
}

#ticket-v .botones-form {
    margin-top: 20px;
    gap: 40px !important; 
}

.detalle-container {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 50px;
    font-family: 'Montserrat', sans-serif;
}

/* ACTIVAR EL GRID */
.detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Texto a la izquierda, fotos un poco más anchas a la derecha */
    gap: 60px;
    align-items: start;
}


 .titulo-espacio{
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: #000;
}
.summernote-content p {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin-bottom: .5rem !important;
    color: #000;
    margin-bottom: 50px !important;
}
.summernote-content span {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin-bottom: .5rem !important;
    color: #000;
    font-weight: 800 !important;
}



/* GALERÍA */
.detalle-galeria {
    display: flex;
    gap: 15px;
}

.foto-principal {
    flex: 1.5;
}

.foto-principal img {
    width: 100%;
    height: 600px; 
    object-fit: cover;
    border-radius: 20px;
}

.fotos-secundarias {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.foto-item img {
    width: 100%;
    height: 292px; 
    object-fit: cover;
    border-radius: 25px;
}

.cta-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.btn-disponibilidad {
    background-color: #FFC107;
    color: #000;
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-disponibilidad:hover {
    transform: scale(1.05);
}

/* Estilos para el Lightbox */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); 
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex; 
}

.lightbox-content {
    max-width: 90%;
    max-height: 85%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: zoom 0.3s ease-in-out;
}

.close-lightbox {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
}

.detalle-container {
    padding-top: 60px !important; 
}
.breadcrumb {
    display: block !important; 
    margin-bottom: 40px !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #444; 
}

.breadcrumb a {
    color: #003366; 
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separador {
    margin: 0 10px;
    color: #999;
}

.breadcrumb .current {
    color: #666;
    font-weight: 400;
}
@keyframes zoom {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

 .columna-botones-v {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 240px;
        justify-content: center;
    }


    .btn-oscuro-v {
        background-color: #1d4a8e;
        color: white;
        border: none;
        padding: 12px;
        border-radius: 30px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
        transition: 0.2s;
    }

    .btn-rojo-v {
        background-color: #fee2e2;
        color: #dc2626;
        border: 1px solid #fecaca;
        padding: 10px;
        border-radius: 30px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 4px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
        transition: 0.2s;
    }

    .btn-amarillo-v:hover {
        background-color: #eab308;
    }

    .btn-oscuro-v:hover {
        background-color: #1a252f;
    }

    .btn-rojo-v:hover {
        background-color: #fca5a5;
        color: white;
    }

    .footer-acciones {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
    }

    .btn-link-secundario {
        background: none;
        border: none;
        font-size: 0.75rem;
        color: #777;
        text-decoration: none;
        cursor: pointer;
        font-weight: 500;
    }

    .btn-link-secundario:hover {
        color: #333;
    }

    .divisor {
        color: #eee;
    }

    .txt-duracion {
        color: #888;
        font-size: 0.85rem;
        margin-left: 5px;
    }

    .badge-pendiente {
        background-color: #fff3cd;
        color: #856404;
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.8rem;
    }

    .footer-map-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.link-como-llegar {
    color: #FFC107;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.3s;
}

.link-como-llegar:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.link-como-llegar i {
    margin-right: 5px;
}

.contenido-tarjeta-con-qr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.qr-imprimible {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid #eee;
    padding-left: 25px;
}

.qr-imprimible img {
    width: 90px;
    height: 90px;
    margin-bottom: 5px;
}

.qr-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #888;
    letter-spacing: 1px;
}
/* ==========================================================================
   6. RESPONSIVE (MEDIA QUERIES)
   ========================================================================== */


/* Ajuste para Móvil (768px para abajo) */
@media (max-width: 768px) {
/* 1. Centramos el contenedor principal */
    #editar-perfil-v .grid-form {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important; /* Menos espacio entre foto e inputs en móvil */
        padding: 0 10px;
    }

    /* 2. La columna de la foto siempre al centro */
    #editar-perfil-v .col-foto {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 3. La columna de inputs ocupa todo el ancho y se centra */
    #editar-perfil-v .col-inputs {
        width: 100% !important;
        text-align: center !important; /* Centra los labels si quieres */
    }

    /* 4. Alineamos los labels a la izquierda o centro según prefieras */
    .grupo-input label {
        text-align: left; /* Generalmente se ve mejor a la izquierda incluso en móvil */
        width: 100%;
    }

    /* 5. Centramos los botones y los ponemos uno sobre otro si el espacio es muy poco */
    .botones-form {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100%;
    }

    .btn-amarillo-save {
        width: 100% !important; /* Botón de guardar ancho completo en móvil */
    }

    .btn-cancelar {
        margin-top: 10px;
    }
    .botones-form { justify-content: center; }

    .sub-nav-amarillo .container {
        flex-wrap: wrap; /* Para que no se amontone en móvil */
        gap: 15px !important;
    }
    .sub-nav-amarillo a {
        font-size: 0.9rem;
    }

    .header-amarillo-full .container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .nav-links {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 10px;
    }
    .nav-links a {
        margin-right: 0;
        font-size: 0.9rem;
    }

    /* 2. Sección Perfil: Avatar arriba, texto abajo */
    .seccion-perfil {
        flex-direction: column;
        text-align: center;
    }
    .info-bienvenida {
        margin-left: 0 !important;
    }
    .txt-pajaro {
        font-size: 1.2rem;
    }

    /* 3. FILAS DEL PANEL: Aquí es donde cambiamos a una sola columna */
    .fila-panel {
        flex-direction: column; /* Tarjeta arriba, botones abajo */
        gap: 15px;
    }

    .columna-botones {
        width: 100%; /* Botones a lo ancho del móvil */
        align-self: center !important;
    }

    .tarjeta {
        padding: 20px;
    }

    /* 4. Alineación interna: En móvil es mejor centrar el texto para que se lea bien */
    .datos-derecha {
        text-align: center;
        margin-top: 10px;
    }
    
    .contenido-tarjeta h3 {
        text-align: center;
    }
    
    .btn-amarillo {
        width: 100%; /* Botones grandes y fáciles de tocar */
    }
    .header-reserva{
        margin-top: 2.5rem;
    }
    .grid-agenda {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 15px; overflow-x: hidden; padding: 0 10px;
    }
    .card-evento {
        flex: none; width: 100%; height: auto; text-align: center;
    }
    .card-image-container { height: 250px; }
.comunidad-textos .txt-1 { font-size: 1.8rem; }
    .comunidad-textos .txt-2 { font-size: 1.2rem; }

    .hero-content h1 {
        font-size: 2rem;
        text-align: center;
    }
    .hero-banner {
        height: auto !important;
        min-height: 400px;
    }
    body {
        padding-bottom: 85px !important; /* Un poco más de aire por el sticky-bar */
    }

     .hero-banner-evento {
        justify-content: center;
    }


    .seccion-reservas-page {
    padding: 50px 20px 60px;
    background-color: #fff;
    overflow-x: hidden;
}

.membership-plans .container {
        display: flex;
        flex-direction: column; 
        gap: 1px; 
    }

 

    .reservation-footer-text {
        order: 2; 
        text-align: center; 
        padding: 0 15px; 
        margin-bottom: 20px; 
    }

    .plans-grid {
        order: 3; 
    }
    .hero-banner {
        height: 55vh;
        position: relative;
        background-position: 0% 30% !important;
        display: block;
    }

     .hero-banner-evento {
        height: 55vh;
        position: relative;
        background-position: 0% 30% !important;
        display: block;
    }

    .hero-image-side {
        position: absolute;
        top: 75%;
        left: 35%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: auto;
    }

    .img-banner {
        max-width: 140px;
    }

    .hero-text-side {
        background-color: #1a428a;
        width: 100%;
        padding: 40px 30px;
        position: relative;
        display: block;
    }

    .hero-text-side h1 {
        font-size: 28px;
        color: white;
    }

    .btn-yellow {
        width: 200px;
        margin-top: 20px;
    }

    .intro-section {
        padding: 50px 20px;
    }

    .intro-logo img {
        max-width: 90px;
    }

    .intro-text p:first-child {
        font-size: 1.1rem;
    }

    .intro-text p {
        font-size: 1.1rem;
    }

    .nav-desktop,
    .lang-selector {
        display: none !important;
    }

    .hamburger {
        display: flex !important;
    }

    .nav-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 15px;
    }

    .hero-banner {
        flex-direction: column;
        height: auto;

    }

     .hero-banner-evento {
        flex-direction: column;
        height: auto;

    }

    .hero-content {
        width: 100%;
        padding: 50px 20px;
        text-align: left;
        margin-top: 200px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hide-on-mobile {
        display: none !important;
    }

    .mobile-hero {
        display: block;
    }

    .mobile-photo-area {
        height: 60vh;
        background-size: cover;
        background-position: 25% center;
        position: relative;
    }

    .mobile-logo-float {
        position: absolute;
        bottom: 30px;
        left: 40%;
        width: 200px;
        transform: translateX(-50%);
        z-index: 10;
    }

    .mobile-blue-box {
        background-color: var(--azul-main);
        padding: 60px 30px 40px;
        color: white;
    }

    .mobile-blue-box h1 {
        font-size: 28px;
        line-height: 1.2;
        font-weight: 200;
    }
    .grid-reservas {
        display: flex !important; 
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        gap: 20px !important;
        padding: 0 10px !important;
    }
    .card-reserva {
        flex: 0 1 calc(50% - 20px) !important; 
        min-width: 150px !important;
        margin-bottom: 20px !important;
    }

    .card-reserva.popular {
        flex: 0 1 calc(50% - 20px) !important;
        max-width: none !important;
        margin: 0 0 20px 0 !important;
    }
    .titulo-principal {
        font-size: 1.8rem !important;
        padding: 0 10px !important;
    }
    .btn-reserva {
        background-color: #ffcc00;
        color: #000;
        padding: 10px 16px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 800;
        width: 100%;
        display: block;
        font-size: 0.8rem;
        text-align: center;
        white-space: normal;
    }

.terminos-header h1 {
        font-size: 2.2rem;
    }
    
    .terminos-section {
        padding-top: 100px;
    }

    .plans-header {
        padding: 40px 15px 10px; 
         order: 1; 
        text-align: center; 
    }


    .plans-header h2 {
        font-size: 2rem; 
        margin-bottom: 10px;
    }

    .plans-header p {
        font-size: 1rem;
        line-height: 1.2;
        padding: 0 10px; 
    }
    .membership-hero {
        height: 60vh; 
        justify-content: center; 
        padding-left: 20px;
        padding-right: 20px;
        text-align: center; 
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 2.2rem; 
        padding: 0 10px;
    }

    .reservation-footer-text {
        margin-top: 5px;
        padding: 0 15px;
    }
    .res-main { font-size: 1.1rem; }
    .res-sub { font-size: 0.95rem; }

    .services-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 50px 20px;
        max-width: 450px; 
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .icon-box img {
        height: 50px;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }

    .service-card p {
        font-size: 0.9rem;
        max-width: 100%; 
        padding: 0 5px; 
    }

    .community-text h2 {
        font-size: 1.8rem;
    }
    
    .community-text p {
        font-size: 1rem;
    }
    
    .community-section {
        padding: 40px 20px;
    }
   
    .galeria-footer {
        font-size: 0.95rem;
        padding: 0 15px;
    }

.grid-galeria {
        /* Pasamos de 3 columnas a 1 sola */
        grid-template-columns: 1fr; 
        grid-auto-rows: 250px; /* Mantenemos una buena altura */
        gap: 20px;
    }

    .galeria-item.horizontal, 
    .galeria-item.cuadrada {
        /* En móvil, todas ignoran su tamaño especial y ocupan el ancho total */
        grid-column: span 1; 
    }

    .titulo-galeria {
        font-size: 1.8rem;
        padding: 0 15px;
    }

    .overlay {
        /* Opcional: Hacer el badge un poco más pequeño en móvil */
        padding: 8px 15px;
    }
    
    .overlay span {
        font-size: 0.8rem;
    }
    .card-evento {
        flex: none;
        width: 100%;
        height: auto; 
        /* 👇 ASEGURATE DE QUE ESTO ESTÉ 👇 */
        text-align: center; /* Mantenemos el centrado en móvil */
    }

    /* 1. Bajamos el modal para que respire */
    #modalCalendario {
        padding-top: 70px !important; 
        align-items: flex-start !important;
        overflow-y: auto;
    }

    

    .col-formulario, .col-calendario {
        width: 100%;
        padding: 15px;
    }

    /* En móvil el modal hace scroll vertical */
    .modal-reserva {
        align-items: flex-start !important;
        padding-top: 60px !important;
        overflow-y: auto !important;
    }

    .modal-contenido.split-layout {
        flex-direction: column !important;
        height: auto !important;       /* En móvil no usamos altura fija */
        overflow: visible !important;
        max-height: none !important;
    }

    .col-formulario {
        overflow-y: visible !important;
    }

    .col-calendario {
        overflow: visible !important;
        height: auto !important;
    }

    .col-calendario #calendar {
        height: 420px !important;
        font-size: 0.8rem;
        flex: none !important;
    }

  


}



@media (max-width: 1200px) and (min-width: 1024px) {

    .logo-img {
        height: 20px;
        width: auto;
    }

    .nav-desktop a {
        margin-left: 10px !important;
        font-size: 14px;
    }

    .btn-nav-blue {
        padding: 6px 12px !important;
        font-size: 13px !important;
        margin-left: 10px !important;
    }

    .lang-flag {
        width: 22px !important;
        height: auto;
        margin-left: 5px;
    }

    .lang-selector {
        margin-left: 10px;
        display: flex;
        gap: 5px;
    }
    .grid-reservas {
        display: flex;
        overflow-x: auto;
        padding-bottom: 15px;
    }
    .card-reserva {
        flex: 0 0 200px; /* Ancho fijo en tablets para poder scrollear de lado */
    }
}

@media (max-width: 1023px) and (min-width: 768px) {

    .nav-desktop,
    .lang-selector {
        display: none !important;
    }

    .hamburger {
        display: flex !important;
    }

    .nav-content-center {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 15px 0;
    }

    .card-reserva.popular {
        grid-column: span 1 !important;
        margin-bottom: 24px;
    }

    .community-section {
        padding: 60px 20px;
    }

    .community-flex {
        flex-direction: column;
        gap: 30px;
    }

    .community-text {
        width: 100%;
    }

    .community-text p {
        max-width: 100%;
    }

}

@media (max-width: 1000px) {
    .detalle-grid {
        grid-template-columns: 1fr;
    }
    .detalle-galeria {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }
    .nav-links a {
        margin-right: 20px;
        font-size: 1rem;
    }
    
    .txt-nombre {
        font-size: 1.8rem;
    }
  
}

@media (max-width: 900px) {

    .nav-content-center {
        gap: 30px;
    }
.modal-contenido.split-layout {
        flex-direction: column !important; /* Formulario arriba, calendario abajo */
        overflow-y: auto !important;      /* Activa el scroll del dedo */
        height: 90vh; 
    }
    .col-formulario, .col-calendario {
        width: 100% !important;
        flex: none !important;
    }
.col-calendario {
        height: auto !important;
        min-height: 600px;
        overflow: visible !important;
    }
    /* Reducir tamaño de fuente en móvil para que quepa más */
    .fc .fc-toolbar-title {
        font-size: 1.2rem !important;
    }

  
    .trayectoria-container {
    display: block;
    align-items: center;
    justify-content: center;
    gap: 1px;
    max-width: 900px;
    margin: 0 auto;
}

.img-bombillo {
    width: 200px;
}
.trayectoria-visual {
    margin-top: unset;
    margin-left: -50px;
}
    .login-titulo {
        font-size: 2rem;
    }
    .btn-iniciar-sesion {
        max-width: 100%; /* En móvil que ocupe todo el ancho */
    }

    .contacto-wrapper {
        flex-direction: column;
    }


    .politicas-section {
        padding: 60px 20px;
    }

    .titulo-politicas {
        font-size: 2rem;
        text-align: center;
    }

    .breadcrumb {
        text-align: center;
        margin-bottom: 30px;
    }

    .only-mobile {
        display: block;
    }
.infra-section {

    padding-bottom: 0px;
}
    .infra-container {
        flex-direction: column !important;
        /* Apila en orden 1, 2, 3 */
        padding: 0;
    }

    /* .infra-content {
        order: 1; 
        width: 100%;
        margin-bottom: 30px;
        padding: 0 25px; 
    } */

    .infra-content {
        width: 100%;
        padding: 40px 25px 30px 25px;
    }

    /* .infra-image {
        order: 2; 
        width: 100%;
        margin-bottom: 0; 
    } */
  
    .infra-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .infra-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0 !important;
    }

    .infra-highlight-box {
        position: static;
        width: 100%;
        background-color: #f5f5f5;
        padding: 40px 25px;
        box-shadow: none;
    }

    .infra-highlight-box p {
        color: #000;
        font-weight: 800;
        font-style: italic;
        font-size: 1.1rem;
        line-height: 1.2;
        margin: 0;
    }

    .unete-section {
        height: 100vh;
    }

    .unete-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 30px;
    }

    .unete-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .unete-subtitle {
        font-size: 1.8rem;
        line-height: 1.2;
        font-weight: 700;
    }

    .btn-yellow-unete {
        padding: 12px 40px;
        font-size: 1rem;
        width: auto;
    }

    .unete-action {
        margin: auto;

    }

    .intencional-section {
        padding: 70px 25px;
    }

    .intencional-content .text-regular {
        font-size: 1.1rem;
    }

    .intencional-content .text-bold-highlight {
        font-size: 1.2rem;
    }

    .valores-section {
        padding: 60px 25px;
    }

    .valores-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .img-colibri {
        max-width: 100px;
    }

    .valores-text p {
        font-size: 1.1rem;
    }
    .valores-content{
        text-align: left;
    }
    .contacto-info-col {
        text-align: center;
        margin-bottom: 40px;
    }
    .contacto-detalles {
        display: none;
    }

    /* Centramos el título y la introducción */
    .contacto-titulo {
        text-align: center !important;
    }
    .contacto-intro {
        text-align: center;
    }

    /* Ajuste de la fila Nombre/Apellido para que no se vea apretada */
    .form-row.inputs-nombre-apellido {
        flex-direction: column;
        gap: 15px;
    }

 
    .historia-container {
        display: flex;
        flex-direction: column; /* Símbolo arriba, texto abajo */
        text-align: left;
    }

  .historia-visual {
        margin-bottom: 40px;
        width: 100%;
        display: flex;
        justify-content: left;
        padding-left: 20px;
    }

      .img-simbolo {
        max-width: 250px;
        height: auto;
    }
    /* DESMONTAJE DE LA CAJA EN MÓVIL */
    .texto-destacado-caja {
        margin-left: 0; /* Quitamos la superposición */
        width: 100%;
        background-color: transparent; /* Quitamos el fondo blanco */
        box-shadow: none; /* Quitamos la sombra */
        padding: 0;
        border-left: none; /* Quitamos el borde negro */
        margin: 25px 0;
         padding-left: 20px;
    }

    .texto-destacado-caja p {
        font-size: 1.2rem;
        /* Aquí puedes decidir si mantener la negrita o no */
    }

.grid-reservas {
        grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas iguales */
        gap: 20px;
    }

    /* ESTO ES LO QUE FALTA: 
       Hace que la 5ta tarjeta (Zona Podcast) ocupe las 2 columnas */
    .card-reserva.popular {
        grid-column: span 2; 
        margin-top: 10px;
        width: 100%;
    }
    
    .card-reserva.popular {
        grid-column: span 2; /* Zona Podcast ocupa todo el ancho abajo */
        margin-top: 20px;
    }

    .titulo-principal {
        font-size: 1.8rem;
    }
    .plans-grid { grid-template-columns: 1fr; max-width: 400px; }
    .plan-card.featured { transform: scale(1); margin: 20px 0; }
    .membership-hero h1 { font-size: 2.2rem; padding: 0 20px; }

}

@media (max-width: 850px) {
    #historial-v .fila-panel { flex-direction: column; }
    #historial-v .columna-botones { width: 100%; }
    #historial-v .bloque-texto-alineado { min-width: 100%; }
    #historial-v .datos-derecha { justify-content: flex-start; }
}

@media (max-width: 480px) {

    .nav-content-center {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .logo-img {
        height: 25px;
    }

    .grid-reservas {
        grid-template-columns: 1fr; 
    }
    
    .card-reserva.popular {
        grid-column: span 1;
    }
    .txt-nombre {
        font-size: 1.5rem;
    }
    
    .caja-avatar {
        width: 120px;
        height: 120px;
    }
    
    .caja-avatar img {
        width: 70px;
    }
 
}


@media (min-width: 768px) {
    .hide-on-desktop {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .community-section {
        padding: 100px 20px; 
    }

    .community-flex {
        flex-direction: row-reverse; 
        justify-content: space-evenly;
        align-items: center;
        gap: 60px; 
    }

    .community-text {
        width: 45%; 
        padding: 0;
    }

    .community-text h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    .community-text p {
        font-size: 1.1rem;
        max-width: 480px; 
    }

    .community-image {
        width: 35%; 
        display: flex;
        justify-content: center; 
        margin-left: 100px;
    }

    .community-image img {
        width: 100%; 
        max-width: 380px; 
    }
}


@media (max-width: 800px) {

    .territorios-grid {
        flex-direction: column !important;
        align-items: center;
        gap: 30px;
    }

    .territorio-card {
        width: 100%;
        max-width: 250px;
        flex: none;
    }

    .card-media {
        height: 280px;
    }

    .territorios-title {
        font-size: 1.8rem;
    }

    .mobile-simple-footer {
        background-color: #dddbdc !important;
        padding: 50px 30px 40px 30px !important;
        text-align: left !important;
    }

    .mobile-footer-content h3 {
        font-family: var(--font-main);
        font-weight: 900;
        font-size: 1.6rem;
        margin-bottom: 20px;
        color: #000;
    }

    .mobile-footer-content p {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 8px;
        color: #000;
    }

    .mobile-footer-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .mobile-footer-links a {
        font-size: 14px;
        color: #000;
        text-decoration: underline;
    }

    .mobile-footer-content .btn-footer-outline {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 25px;
        border: 1.5px solid #000;
        border-radius: 25px;
        color: #000;
        text-decoration: none;
        font-weight: 800;
        font-size: 14px;
    }

    .sticky-icon-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 75px;
        background-color: #fff;
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        z-index: 9999;
        padding: 0 10px;
    }

    .sticky-icon-bar img {
        width: 30px;
        height: auto;
    }

    body {
        padding-bottom: 75px !important;
    }

}






@media (min-width: 768px) {

    .main-footer {
        background-color: #dddbdc;
        padding: 60px 0;
        width: 100%;
    }

    .footer-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 50px;
        align-items: start;
    }

    .footer-col h4 {
        font-family: var(--font-main);
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 20px;
        color: #000;
    }

    .footer-col a,
    .footer-col p {
        display: block;
        text-decoration: none;
        color: #000;
        margin-bottom: 10px;
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .footer-col a:hover {
        text-decoration: underline;
    }

    .btn-footer-outline {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 25px;
        border: 2px solid #000;
        border-radius: 25px;
        color: #000 !important;
        font-weight: 800;
        text-decoration: none;
        text-align: center;
        transition: all 0.3s ease;
    }

    .btn-footer-outline:hover {
        background-color: #000;
        color: #fff !important;
        text-decoration: none;
    }
}

@media (min-width: 801px) {

    .mobile-simple-footer,
    .sticky-icon-bar {
        display: none !important;
    }

    .card-image {
        height: 250px;
    }
}

/* ==========================================================================
   HISTORIAL — clases complementarias
   ========================================================================== */

.lista-bloques {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bloque-info {
    flex: 1;
    min-width: 0;
}

@media print {
    .no-print { display: none !important; }
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.badge-activo {
    background: #d4edda;
    color: #155724;
}

.badge-inactivo {
    background: #e9ecef;
    color: #495057;
}

.badge-pagado {
    background: #d4edda;
    color: #155724;
}

.badge-pendiente {
    background: #fff3cd;
    color: #856404;
}

.badge-checkin {
    background: #cce5ff;
    color: #004085;
}

.badge-refunded {
    background: #f8d7da;
    color: #721c24;
}

.btn-peligro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    white-space: nowrap;
}
.btn-peligro:hover { background: #b02a37; }
.btn-peligro:disabled { opacity: 0.6; cursor: not-allowed; }

/* Botón reembolso compacto dentro de tablas/listas */
.btn-refund-compact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff3cd;
    color: #7c5e00;
    border: 1px solid #f0d060;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    transition: background 0.15s;
}
.btn-refund-compact:hover { background: #ffe69c; }

/* ==========================================================================
   TABLA ADMIN
   ========================================================================== */

.tabla-admin {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 8px;
}

.tabla-admin th {
    background: #f5f5f5;
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}

.tabla-admin td {
    padding: 10px 14px;
    border-bottom: 1px solid #efefef;
    vertical-align: middle;
}

.tabla-admin tbody tr:hover {
    background: #fafafa;
}


/* ================================================================
   FACTURA DETALLE
   ================================================================ */

.factura-wrapper {
    max-width: 820px;
    margin: 40px auto;
    padding: 50px 60px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.factura-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 30px;
}

.factura-logo-bloque {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.factura-logo {
    max-width: 100px;
    max-height: 80px;
    object-fit: contain;
}

.factura-empresa-nombre {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.factura-empresa-info p {
    font-size: 0.85rem;
    color: #555;
    margin: 2px 0;
}

.factura-numero-bloque {
    text-align: right;
    min-width: 200px;
}

.factura-titulo {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #222;
    margin: 0;
}

.factura-numero {
    font-size: 1.1rem;
    color: #444;
    margin: 4px 0;
    font-weight: 600;
}

.factura-fecha {
    font-size: 0.9rem;
    color: #555;
}

.factura-divisor {
    border: none;
    border-top: 2px solid #FFD700;
    margin: 25px 0;
}

.factura-cliente {
    margin-bottom: 20px;
}

.factura-seccion-titulo {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: 600;
    margin-bottom: 8px;
}

.factura-cliente p {
    margin: 2px 0;
    font-size: 0.95rem;
}

.factura-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.factura-tabla th {
    padding: 10px 14px;
    border-bottom: 2px solid #222;
    font-size: 0.85rem;
    text-align: left;
    font-weight: 700;
}

.factura-tabla td {
    padding: 14px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    vertical-align: top;
}

.factura-detalle-sub {
    font-size: 0.82rem;
    color: #777;
    display: block;
    margin-top: 3px;
}

.factura-total-row td {
    border-top: 2px solid #222;
    border-bottom: none;
    padding-top: 16px;
    font-size: 1rem;
}

.factura-tabla .text-right,
.text-right {
    text-align: right;
}

.factura-footer-text {
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.82rem;
    color: #777;
    line-height: 1.6;
}

.factura-acciones {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 30px auto;
    max-width: 820px;
    padding: 0 60px;
}

.btn-secundario {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #333;
    border-radius: 30px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-secundario:hover {
    background: #333;
    color: #fff;
}

@media print {
    .factura-wrapper {
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 30px;
        max-width: 100%;
    }
    .factura-acciones,
    #main-header,
    .no-print {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .factura-wrapper {
        padding: 24px 20px;
        margin: 16px;
    }
    .factura-header {
        flex-direction: column;
    }
    .factura-numero-bloque {
        text-align: left;
    }
}