/* =========================================

   1. VARIABLES & RESET

   ========================================= */

:root {

    /* Paleta de Colores Lujo */

    --primary: #1a1a1a;       /* Negro suave para texto */

    --secondary: #666666;     /* Gris para subtítulos */

    --accent: #7D5BA6;        /* Morado corporativo */

    --accent-light: #f0ebf7;  /* Fondo morado muy claro */

    --bg-body: #fdfdfd;       /* Blanco roto (más elegante que #fff) */

    --white: #ffffff;

    --border: #eeeeee;

    --error: #cc0000;

    

    /* Tipografías */

    --font-heading: 'Cormorant Garamond', serif;

    --font-body: 'Montserrat', sans-serif;

    

    /* Espaciados */

    --section-padding: 100px 10%;

    --transition: all 0.3s ease;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    background-color: var(--bg-body);

    color: var(--primary);

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

    line-height: 1.6;

    overflow-x: hidden; /* Evita scroll horizontal */

}



a { text-decoration: none; color: inherit; transition: var(--transition); }

ul { list-style: none; }

img { max-width: 100%; display: block; }



/* =========================================

   2. TIPOGRAFÍA

   ========================================= */

h1, h2, h3, h4 {

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

    font-weight: 400;

    color: var(--primary);

    margin-bottom: 1rem;

}



h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; }

h2 { font-size: 2.5rem; text-align: center; margin-bottom: 2rem; }

p { margin-bottom: 1.5rem; color: var(--secondary); }



/* Utility Classes */

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

.uppercase { text-transform: uppercase; letter-spacing: 3px; font-size: 0.8rem; }



/* =========================================

   3. NAVEGACIÓN (NAVBAR)

   ========================================= */

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.5rem 5%;

    background: var(--white);

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 20px rgba(0,0,0,0.03);

}



.logo {

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

    font-size: 1.8rem;

    font-weight: 600;

    letter-spacing: 2px;

    color: var(--primary);

}



.menu { display: flex; align-items: center; gap: 2rem; }



.menu a {

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--primary);

    position: relative;

}



.menu a:not(.btn-client)::after {

    content: '';

    position: absolute;

    width: 0;

    height: 1px;

    bottom: -5px;

    left: 0;

    background: var(--accent);

    transition: var(--transition);

}



.menu a:not(.btn-client):hover::after { width: 100%; }



/* Botón Área Clientes */

.btn-client {

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

    padding: 0.6rem 1.5rem;

    color: var(--accent) !important;

    border-radius: 2px;

}



.btn-client:hover {

    background: var(--accent);

    color: var(--white) !important;

}



/* =========================================

   4. SECCIONES PRINCIPALES (HERO & GRID)

   ========================================= */

.hero {

    height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background-size: cover;

    background-position: center;

    padding: 0 20px;

    /* Un gradiente sutil sobre la foto para leer texto */

    background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), url('../img/hero.jpg'); 

}



.hero-content { max-width: 800px; animation: fadeInUp 1s ease-out; }



.section-padding { padding: var(--section-padding); }



.photo-grid {

    /* En PC: 3 columnas */

    column-count: 3;

    column-gap: 20px; /* Espacio lateral */

    width: 100%;

}



/* Las imágenes individuales */

.photo-grid img {

    width: 100% !important; /* Forzar ancho de columna */

    height: auto !important; /* Altura automática según proporción */

    display: block;

    margin-bottom: 20px; /* Espacio inferior entre fotos */

    border-radius: 4px;

    

    /* EVITALA PARTIRSE: Esto es clave */

    break-inside: avoid; 

    -webkit-column-break-inside: avoid;

    

    /* Efectos visuales */

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

    background-color: #f0f0f0; /* Color de fondo mientras carga */

}



/* Efecto Hover (Zoom sutil) */

.photo-grid img:hover {

    transform: scale(1.02);

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

}



/* =========================================

   RESPONSIVE (AJUSTABLE)

   ========================================= */



/* Tablets (2 columnas) */

@media (max-width: 1024px) {

    .photo-grid {

        column-count: 2;

        column-gap: 15px;

    }

}



/* Móviles (1 columna) */

@media (max-width: 600px) {

    .photo-grid {

        column-count: 1;

    }

    .photo-grid img {

        margin-bottom: 15px;

    }

}



/* Disponibilidad / Calendario Visual */

#disponibilidad { background-color: #f9f9f9; }

input[type="date"] {

    padding: 15px 20px;

    border: 1px solid #ddd;

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

    font-size: 1rem;

    border-radius: 4px;

    outline: none;

    cursor: pointer;

    background: white;

}

input[type="date"]:focus { border-color: var(--accent); }



/* =========================================

   5. ÁREA DE CLIENTES (VIDEO & GALERÍA)

   ========================================= */

.client-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px 100px 20px; }



.video-wrapper {

    position: relative;

    padding-bottom: 56.25%; /* Ratio 16:9 */

    height: 0;

    background: #000;

    border-radius: 8px;

    overflow: hidden;

    margin-bottom: 2rem;

    box-shadow: 0 15px 40px rgba(0,0,0,0.1);

}



.video-wrapper video {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

}



.expired-msg {

    padding: 40px;

    background: #fff5f5;

    border: 1px solid #ffcccc;

    color: var(--error);

    text-align: center;

    border-radius: 8px;

}



/* Login Form */

.login-container {

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f4f4f4;

}

.login-box {

    background: white;

    padding: 40px;

    width: 100%;

    max-width: 400px;

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

    text-align: center;

}

.login-box input {

    width: 100%;

    padding: 12px;

    margin-bottom: 15px;

    border: 1px solid #ddd;

}

.login-box button {

    width: 100%;

    padding: 12px;

    background: var(--primary);

    color: white;

    border: none;

    cursor: pointer;

}



/* =========================================

   6. ADMIN PANEL (TARJETAS)

   ========================================= */

.admin-grid {

    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 30px;

    padding: 40px;

    max-width: 1400px;

    margin: 0 auto;

}



.card {

    background: white;

    padding: 25px;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

}



.card h2 { font-size: 1.5rem; margin-bottom: 1.5rem; text-align: left; }



.btn-save {

    background: var(--accent);

    color: white;

    border: none;

    padding: 12px 25px;

    cursor: pointer;

    font-size: 1rem;

    transition: 0.3s;

    border-radius: 4px;

}

.btn-save:hover { background: #684a8c; }



/* =========================================

   7. CHATS (VISITANTE & PRIVADO) - UNIFICADO

   ========================================= */



/* Contenedor Flotante */

#chat-widget-container, #private-chat-widget {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 9999;

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

}



/* Botón Redondo (Solo para Visitante) */

.chat-toggle-btn {

    width: 60px;

    height: 60px;

    background: var(--accent);

    border-radius: 50%;

    box-shadow: 0 5px 20px rgba(125, 91, 166, 0.4);

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: transform 0.3s;

}

.chat-toggle-btn:hover { transform: scale(1.1); }

.chat-toggle-btn svg { fill: white; width: 30px; height: 30px; }



/* Ventana de Chat (Estructura Flexible) */

.chat-window, #private-chat-widget {

    /* Por defecto oculto en visitante, visible fijo en privado */

    width: 350px;

    height: 450px;

    background: var(--white);

    border-radius: 15px;

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

    display: flex;

    flex-direction: column; /* Clave para el layout */

    overflow: hidden;

    border: 1px solid #f0f0f0;

}



/* Visitante: Oculto por defecto */

.chat-window { display: none; position: absolute; bottom: 80px; right: 0; }

.chat-window.open { display: flex; }



/* Encabezado del Chat */

.chat-header {

    background: var(--accent);

    color: white;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0; /* No encoger */

}



/* Cuerpo de Mensajes (Scroll) */

.chat-body, .chat-messages {

    flex-grow: 1; /* Ocupa el espacio restante */

    background: #fcfcfc;

    padding: 15px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



/* Burbujas de Chat */

.chat-bubble, .msg-bubble {

    padding: 10px 15px;

    border-radius: 12px;

    font-size: 0.9rem;

    max-width: 85%;

    line-height: 1.4;

    animation: fadeIn 0.3s ease;

}



/* Mensajes del Bot/Olivier */

.chat-bubble.bot, .msg-bubble.olivier {

    background: white;

    color: #333;

    border: 1px solid #eee;

    align-self: flex-start;

    border-bottom-left-radius: 2px;

}



/* Mensajes del Usuario */

.chat-bubble.user, .msg-bubble.me {

    background: var(--accent);

    color: white;

    align-self: flex-end;

    border-bottom-right-radius: 2px;

}



/* Zona de Input (Siempre Visible) */

.chat-input-zone, .chat-input-area {

    background: white;

    padding: 12px;

    border-top: 1px solid #eee;

    display: flex;

    gap: 8px;

    flex-shrink: 0; /* Nunca se oculta */

}



.chat-input-zone input, .chat-input-area input {

    flex: 1;

    border: 1px solid #ddd;

    border-radius: 20px;

    padding: 10px 15px;

    outline: none;

    font-family: inherit;

}



.chat-input-zone button, .chat-input-area button {

    background: var(--accent);

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    color: white;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: 0.2s;

}

.chat-input-zone button:hover { transform: scale(1.1); }



/* =========================================

   8. ANIMACIONES

   ========================================= */

.fade-in {

    animation: fadeIn 1.2s ease-in-out;

}



@keyframes fadeIn {

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

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

}



@keyframes fadeInUp {

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

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

}



/* Placeholder para Lazy Load */

img[data-src] {

    opacity: 0;

    transition: opacity 0.5s ease-in;

}

img.lazy {

    opacity: 1;

}



/* =========================================

   9. RESPONSIVE (MÓVIL)

   ========================================= */

@media (max-width: 768px) {

    .navbar { flex-direction: column; padding: 1rem; }

    .menu { margin-top: 1rem; gap: 1rem; font-size: 0.8rem; }

    h1 { font-size: 2.5rem; }

    

    .section-padding { padding: 60px 5%; }

    

    .admin-grid { grid-template-columns: 1fr; }

    

    /* El chat ocupa más pantalla en móvil pero deja ver */

    .chat-window, #private-chat-widget {

        width: 90vw;

        right: 5vw;

        bottom: 90px;

    }

}

img {

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -o-user-select: none;

    user-select: none;

    pointer-events: auto; /* Si pones 'none', no funciona el clic derecho pero tampoco el clic izquierdo */

}

/* =========================================

   MENÚ MÓVIL (HAMBURGUESA)

   ========================================= */

.hamburger {

    display: none; /* Oculto en PC */

    cursor: pointer;

    flex-direction: column;

    gap: 5px;

}

.hamburger .bar {

    width: 25px;

    height: 2px;

    background-color: var(--primary);

    transition: 0.3s;

}



@media (max-width: 768px) {

    .navbar {

        flex-wrap: wrap; /* Permite que el menú caiga abajo */

        padding: 1rem 20px;

    }



    .hamburger {

        display: flex; /* Visible en móvil */

    }



    .menu {

        display: none; /* Oculto por defecto */

        width: 100%;

        flex-direction: column;

        text-align: center;

        margin-top: 20px;

        border-top: 1px solid #eee;

        padding-top: 20px;

    }



    .menu.active {

        display: flex; /* Se muestra al activar JS */

        animation: slideDown 0.3s ease-out forwards;

    }



    .menu a {

        display: block;

        margin: 15px 0;

        font-size: 1.1rem;

    }



    /* Animación suave */

    @keyframes slideDown {

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

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

    }

}

/* BOTONES DE OPCIONES EN EL CHAT */

.chat-options {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;

    margin-bottom: 10px;

    animation: fadeIn 0.5s ease;

}



.chat-btn-option {

    background: white;

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

    color: var(--accent);

    padding: 8px 16px;

    border-radius: 20px; /* Redondeados */

    cursor: pointer;

    font-size: 0.9rem;

    transition: all 0.2s;

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

    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

}



.chat-btn-option:hover {

    background: var(--accent);

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}
/* ESTILOS DEL LOGO */
.logo-img {
    height: 40px; /* Ajusta este valor según necesites */
    width: auto;
    display: block;
}

/* En móvil quizás quieras que sea más pequeño */
@media (max-width: 768px) {
    .logo-img {
        height: 30px;
    }
}