/* Configuración General y Desplazamiento Fluido */

html, body {
  max-width: 100%;
  overflow-x: hidden; /* Corta cualquier elemento que intente salirse por la derecha */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px; /* Evita que el menú fijo tape los títulos */
    font-family: sans-serif;
}

/* ==========================================
   SISTEMA DE PESTAÑAS EXCLUSIVAS (INTERACTIVO)
   ========================================== */
   nav ul.activo {
        display: flex; /* Se muestra al hacer clic */
    }
    /* MENU INICIO, QSOMOS,  */
    nav a {
         text-decoration: none;
         font-size: 18px;
         color: black;
         display: block;
         padding: 15px;
         text-align: center;
         border-bottom: 1px solid #444;
    }

/* ==========================================
   ESTRUCTURA DEL HEADER (DOS FILAS)
   ========================================== */
header {
    top: 0;
    width: 100%;
    background-color:white; /* Fondo claro sofisticado */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    color: white;
    
}

/* Fila 1: Logo centrado y Teléfono a la derecha */
.header-superior {
  padding: 0 5rem;
  border-bottom: 1px solid #eaeaea;
}

.header-container{
    display: flex;
    justify-content: space-between;
     padding: 1px 1px;
}

/* Asegura que los tres bloques principales pesen lo mismo para un centrado perfecto */
.img-redes, .logo, .telefono-cabecera {
  flex: 1;
}

.img-redes {
  display: flex;
  gap: 10px;
  justify-content: flex-start; /* Redes a la izquierda */
}


.logo  {
  justify-content: space-between; /* Distribuye izquierda, centro y derecha */
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  padding: 25px;

}

.telefono-cabecera {
  text-align: center;
  font-size: 18px;
}

.telefono-cabecera a {
  text-decoration: none;
  color: #333;
}

/* ==========================================
   FONDO GENERAL (Peluquería & Spa)
   ========================================== */
  /* NAV CORREGIDO HOY 11-06-2026 */
/* ==========================================
/* --- Estilos base del Nav --- */
nav {
    width: 100%;
    padding: 5px 0;
}
.nav-ul {
   display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 10px 0;
    text-decoration: none;
}
 
.menu-hamburguesa{
    text-decoration: none;
     position: fixed;
    top: 20px;
    right: 10px; /* Lo sitúa en la esquina superior derecha */
    z-index: 10000; /* Un número mayor que el ul para que quede por encima del fondo blanco */
    cursor: pointer;
    background: none;
    border: none;
    /*menu hamb*/
     width: 10%;
    max-width: 1200px;
    max-height: 200px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.menu-hamburguesa{
    display: none;
    text-decoration: none;
}

/* Efecto al pasar el cursor (Hover) */
nav a:hover {
    color: #b4791b; /* Cambia a un color elegante/dorado tipo peluquería */
}
   
.nav a {
 
  font-family: sans-serif;
  font-size: 18px;
  letter-spacing: 1.9px; /* JUNTAR LETRAS: -2px puede ser mucho, te recomiendo empezar en -0.5px */

  /* Efecto visual */
  transition: color 0.3s ease;
}

/* --- Estilos para el Menú Hamburguesa (Móvil) --- */
.menu-hamburguesa {
  display: none; /* Oculto en pantallas grandes */
  position: static;
  left: auto;
  right: auto;
  top: auto;
  font-size: 20px;
  cursor: pointer; 
}

 /* Caja interna del contenido para que no se estire demasiado */
.contenido-bienvenida {
    max-width: 600px; /* Evita que el texto sea incómodo de leer */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Espaciado uniforme entre título, texto y botón */
}

/* Título principal (H1) INICIO */
.contenido-bienvenida h1 {
    font-size: 2.9rem; /* Tamaño grande y legible */
    color: #d68a8a; /* Gris oscuro elegante, evita el negro puro */
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif; /* Tipografía elegante si la tienes, si no, usa serif */
    line-height: 1.8;
}

/* Párrafo del mensaje INICIO */
.contenido-bienvenida p {
    font-size: 1.4rem;
    color: white; /* Blanco para una lectura suave */
    line-height: 1.09;
    margin: 0;
}
 
/* Resaltado del nombre "Lia, Peluquería y Spa" INICIOI, Un Respiro para tu cuerpo y Cabello */
.contenido-bienvenida p span {
    color: #d4a373; /* Un tono dorado/tierra suave, muy de spa */
    font-weight: bold;
}
.bienvenida img{
    flex: 1.6;
     width:150%; /* Permite que se expanda */
    max-width: 100%; /* ¡Clave! Sube este número si la quieres aún más grande (ej. 700px o 800px) */
    height: auto; /* Mantiene la proporción para que no se estire la foto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px; /* Opcional: le da esquinas suavemente redondeadas muy elegantes */
    box-shadow: 0px 12px 30px rgba(0,0,0,0.15); /* Opcional: le da una sombra profunda muy premium */
}

.bienvenida img:hover {
    transform: scale(1.0); /* Se eleva sutilmente al pasar el ratón */
    box-shadow: 0 6px 20px rgba(163, 132, 91, 0.3); /* Destello dorado suave */
    border-color: #a3845b; /* El borde cambia al tono de tus botones */
    cursor: pointer;
} 
/* Específico para Celulares (Pantallas más pequeñas) */

/* Oculta todas las cajas de servicio por defecto */
.caja-servicio {
    display: none;
}

/* Muestra únicamente la caja que tenga la clase 'activo' */
.caja-servicio.activo {
    display: block; /* O 'flex' según el diseño de tu página */
}

/* Estilo visual opcional para identificar el botón seleccionado */

    /* Forzamos a que las imágenes no se estrujen ni dejen franjas negras gigantes a los lados */
    .foto-bienvenida, 
    #inicio .card, 
    .galeria-servicio-interna div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 10px 0 !important; /* Separa las cajas verticalmente */
    }

    .bienvenida {
        width: 150vh !important;
        height: auto !important; /* Mantiene la proporción del cabello sin estirarse */
        border-radius: 28px !important;
        display: flex;
        align-items: center;
        gap: 30px;
        padding: 50px 0;

    }
    /*SECCIONES EN NEGRO Y BIEN CENTRADAS
   ========================================== */
main {
    
    margin-top: 100px !important; /* Ajuste para que empiece justo abajo del menú */
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Tipografía elegante para Spa */
    background-size: cover;
    background-position: center;
    
}
/* Capa protectora para que los textos sobre el fondo se puedan leer de toda la pantalla */
section {
    padding: 80px 20px;
    min-height: 60vh;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    /* Fondo blanco con 85% de opacidad para dar efecto elegante de Spa */
    background-color: rgba(21, 20, 20, 0.85); 
    margin: 40px auto;
    max-width: 1260px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-top: auto;
    
}
/* Fila 2: Menú inferior INICIO-QSOMOS ETC */
/* --- ESTILOS EN PANTALLAS MÓVILES (Por defecto) --- */

    .nav-inferior div {
        display: flex;
        justify-content: center; /* Centra el menú horizontal en pantallas grandes */
        padding: 10px 0px;
         letter-spacing: -1px;
       
    }
    .galeria-servicio-interna,
    .equipo-seccion,
    section div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reemplaza '.tarjeta' por la clase real de tus fondos negros si tienen una */
    .tarjeta, [style*="background-color: black"], [style*="background: black"] {
        width: 100% !important;
        padding: 20px 15px !important; /* Espacio interno cómodo para el texto */
        border-radius: 10px !important;
    }

/*QUIENES SOMOS 09-06-2026*/
.contenedor-quienes-somos {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 1200px;
    margin-top: 20px;
}
.texto-nosotros h3 {
    color: #b8977e;
    font-size: 46px;
    flex-direction: row;
    padding: 20PX 0;
    text-align: center;
    
}
.texto-nosotros p {
    color: #dfcece;
    line-height: 1.9;
    margin-bottom: 26px;
    text-align: justify;
    font-size: 22px;
}


/*QUIENES SOMOs*/
.img-nosotros-contenedor {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    height: auto;
    font-display: block;
    object-fit: cover;
    border-radius: 10px;
    box-shadow:  6px 20px rgba(0,0,0,0.1);
    padding:  20px;
     flex: 1;
    align-items: center;
    float: none ;
    margin-bottom: 40px; /* Separa la imagen del texto inferior */
} 

/* ==========================================
   #2. ESTILOS DE QUIÉNES SOMOS Y TARIFAS
   ========================================== */
/* Sistema de visualización (Modal) para la Galería */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.contenido-modal {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain; 
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    animation: zoomEfecto 0.3s ease;
}


/* Distribución de la sección de Tarifas */
.contenedor-tarifas {
    display: flex;
    justify-content:space-between;
    align-items: center;
    gap: 35px;
    margin-top: 10px;
    padding: 50px;
    max-width: 400px;
    
  
}

.tarjeta-precio {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    width: 20%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.tarjeta-precio:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(184, 151, 126, 0.15);
}

/* Tarjeta Destacada "Gold" */
.tarjeta-precio.destacada {
    border: 2px solid #b8977e;
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(184, 151, 126, 0.2);
}

.tarjeta-precio.destacada:hover {
    transform: scale(1.03) translateY(-5px);
}
/* ETIQUETAS DE TARIFAS */
.etiqueta-popular {
    text-align: center;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #b8977e;
    color: white;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 20px;
    letter-spacing: 5px;
}

/* Textos internos de las tarjetas */
.tarjeta-header h3 {
    margin: 0;
    color: #2c2c2c;
    font-size: 20px;
}

.precio {
    font-size: 32px;
    font-weight: bold;
    color: #b8977e;
    margin: 15px 0;
    text-align: center;
}

.precio span {
    font-size: 14px;
    color: #aaa;
    font-weight: normal;
}

.lista-caracteristicas {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
    text-align: left;
}
/*TARIFAS*/
.lista-caracteristicas li {
    margin-bottom: 12px;
    color: #555;
    font-size: 14px;
}

/* Estilo tachado para lo que no incluye el plan económico*/
.lista-caracteristicas li.no-incluye {
    color: #bbb;
    text-decoration: line-through;
}

/* Botones internos de reserva */
.btn-tarifa, .btn-tarifa-destacada {
    display: block;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    font-size: 15px;
    transition: background 0.2s;
}

.btn-tarifa {
    background: #fcf8f5;
    color: #b8977e;
    border: 1px solid #b8977e;
}

.btn-tarifa:hover {
    background: #b8977e;
    color: white;
}

.btn-tarifa-destacada {
    background: #b8977e;
    color: white;
}

.btn-tarifa-destacada:hover {
    background: #9c7f68;
}




/* ==========================================
   #6 ESTILOS DE LA SECCIÓN EQUIPO  #6
   ========================================== */


 .equipo {
    background-color: #1a1a1a; /* Fondo oscuro que resalta las tarjetas */
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenedor-equipo {
    display: flex !important;
    justify-content: center;
    align-items: stretch; /* Mantiene la misma altura en las 3 tarjetas */
    gap: 25px; /* Separación elegante */
    width: 100%;
    max-width: 1050px; /* Alineación perfecta con tus tarifas y galería */
    margin: 0 auto;
    
}
.contenedor-equipo {
    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    max-width: 1100px;
   
   
}

.tarjeta-equipo {
    
    background: white;
    border: 1px solid #f0e6df;
    border-radius: 12px;
    padding:  25px;
    width: 80px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-equipo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(184, 151, 126, 0.15);
}

.img-equipo {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%; /* Transforma la foto en un círculo perfecto */
    border: 3px solid #b8977e; /* Borde rose-gold estilo spa */
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    zoom: 1.45;
}

.tarjeta-equipo:hover .img-equipo {
    transform: scale(1.05); /* Sutil animación en la foto al pasar el mouse */
    transform: translateY(-3px) scale(1.05); /* Combina el movimiento hacia arriba con el zoom */
    cursor: pointer; /* Cambia el cursor para indicar interactividad */
    
}

.tarjeta-equipo h3 {
    margin: 10px 0 5px 0;
    color: #2c2c2c;
    font-size: 19px;
}

.especialidad {
    display: block;
    color: #b8977e;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.tarjeta-equipo p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
 /* ===================================================
   DISEÑO RESPONSIVE PARA MÓVILES (Pantallas menores a 768px)
   =================================================== */
@media (max-width: 768px) {
    /* 1. Cambia el contenedor de las tarjetas a una sola columna */
    .contenedor-equipo { 
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Espacio vertical entre cada tarjeta */
    }

    /* 2. Ajusta el ancho de cada tarjeta individual */
    .tarjeta-equipo { 
        width: 90%; /* Ocupa casi todo el ancho de la pantalla móvil */
        max-width: 250px; /* Evita que se estiren demasiado */
        margin: 0 auto;
    }
}


@keyframes zoomEfecto {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.cerrar {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}
 
/* #7 Estilos del Formulario de Reserva ok (09/06/2026 */
.formulario {
    background: #7f7d7d;
    padding: 20px 15px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 80%;
    max-width: 700px; /* Evita que se estire demasiado en pantallas grandes */
    box-sizing: border-box;
}

.grupo-input {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.grupo-input-row {
    display: flex;
    gap: 5px;
}

.grupo-input-row .grupo-input {
    flex: 1;
}

.grupo-input label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}

.grupo-input input, 
.grupo-input textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
}

.grupo-input input:focus, 
.grupo-input textarea:focus {
    border-color: #007BFF;
    outline: none;
}

.btn-enviar {
    background-color: #007BFF;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.btn-enviar:hover {
    background-color: #0056b3;
}

/* ==========================================
   # 8 ESTILOS DEL PIE DE PÁGINA (FOOTER)
   ========================================== */
footer {
   
   
    background-color: #222;
    color: #fff;
    padding: 20px 20px 10px 20px;
    font-size: 14px;
    border-radius: 20px;
    font-family:Arial, Helvetica, sans-serif;
}

.contenedor-footer {
    max-width: 1400px;
   font-family:Arial, Helvetica, sans-serif;
    display: flex;
    flex-wrap: wrap;
   padding-left: 50px;
   padding-right: 50px;
    justify-content: space-between;
    gap: 20px;
   
}

.columna-footer {
    flex: 1;
    min-width: 420px;
}

.columna-footer h3  {
    color: #dfe3e7;
    margin-bottom: 15px;
    font-size: 14px;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}

.columna-footer p h3{
    margin: 8px 0;
    color: #ccc;
    gap: 10px;
     padding-bottom: 5px;
}
.enlaces-legales a{
    text-align: center;
    color: white;
    font-size: 14px;
    font-family:Arial, Helvetica, sans-serif;
}

/* Redes y Enlaces Legales */
.redes-sociales {
    display: flex;
    flex-direction: column;
    gap: 10px;
    
}

.redes-sociales a  {
    color: white;
    text-decoration: none;
    transition: color 0.4s;
    font-family:Arial, Helvetica, sans-serif;
}

.redes-sociales a:hover, .enlaces-legales a:hover {
    color: #007BFF;
}

/* Franja de Derechos de Autor */
.derechos-autor {
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #333;
    padding-top: 15px;
    color: #777;
    font-size: 12px;
}

/* Estilo extra para el cuadro de texto de Términos (Modal) */

.cerrar-legal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #aaa;
}

.cerrar-legal:hover {
    color: #000;
}

/* ==========================================
   DISEÑO ADAPTABLE (MEDIA QUERyES)
   ========================================== */
    /* Galería: Cambia a 2 columnas en Tablets */
    .grid-galeria {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        width: 90%;
    }

    /* Formulario de Reserva */
    .formulario {
        max-width: 100px;
        padding: 20px;
        
    }
    /* Footer: Se organiza en 2 columnas */
    .contenido-footer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

/* ==========================================
   ESTILOS DE LOGO Y SERVICIOS INTERACTIVOS
   ========================================== */



/* Contenedor del sistema interactivo */
.contenedor-servicios-interactivos {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    max-width: 850px;
    margin-top: 20px auto 0 auto;
    padding: 30px;
    cursor: pointer;
    
}

/* ==========================================================================
   ESTILOS GENERALES (Para ordenadores y pantallas grandes)
   ========================================================================== */
.contenedor-tarifas {
  display: flex;
  flex-direction: row; /* Alinea las tarjetas una al lado de la otra en PC */
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  gap: 20px;
  box-sizing: border-box;
}

.contenedor-tarifas .tarjeta-precio {
  width: calc(33.33% - 14px); /* Ocupan un tercio del diseño en PC */
  box-sizing: border-box;
}

/* Columna de Botones */
.lista-servicios {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-servicio {
    background-color: #f5eae2;
    color: #666;
    border: 1px solid #e0cfc3;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
}

/* Botón cuando está seleccionado */
.btn-servicio.activo, .btn-servicio:hover {
    background-color: #ce6011;
    color: white;
    border-color: #b8977e;
    box-shadow: 0 4px 10px rgba(184, 151, 126, 0.3);
}

/* Bloques de Contenido (Ocultos por defecto) */
.contenido-servicio {
    display: none;
    align-items: center;
    gap: 30px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
}

/* Mostrar solo el bloque activo Alisado-Manicura-Masaje */
.contenido-servicio.activo {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido internamente */
    text-align: center; /* Centra los títulos y textos */
    gap: 25px;
    width: 100%;
    box-sizing: border-box;
    animation: aparecerSuave 0.5s ease-out;
}

.info-servicio-texto {
    flex: 1;
    
}

.info-servicio-texto h3 {
    color: #000;
    margin-top: 0;
    font-size:24px;

}
/*ok 19-06-2026 lfr*/
.info-servicio-texto p {
    color: #1a1717;
    line-height: 1.6;
    font-size: 18px;
    
}

/* Imagen que se despliega al lado */
.img-servicio-despliegue {
    width: 500px;
    height: 320px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Contenedor principal forzado a estar lado a lado */
.comentario-container {
    display: flex !important;
    flex-direction: row !important; /* Fuerza la alineación horizontal */
    align-items: center; 
    justify-content: space-between;
    gap: 30px; 
    width: 100%;
    max-width: 1000px; /* Ampliamos el espacio para que quepan holgadamente */
    margin: 40px auto;
    padding: 20px;
    background: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* Caja de texto (Ocupa la mitad fija) */
.comentario-texto {
    flex: 1 1 40%; 
    min-width: 250px; /* Evita que se encoja demasiado */
    text-align: left;
}

.comentario-cita {
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 10px 0;
}

.comentario-autor {
    margin: 0;
    color: #007BFF;
    font-size: 36px;
}

/* Caja del video  */
.comentario-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center; 
    justify-content: center; /* Centra el bloque en la pantalla */
    gap: 20px; /* Reduce la separación a 20px */
    width: 100%;
    max-width: 800px; /* Limita el ancho total para que no ocupe toda la laptop */
    margin: 20px auto;
    padding: 0;
    background: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    color: rgb(226, 220, 220);
}

.comentario-cita {
    font-style: italic;
    font-size: 16px; /* Texto ligeramente más pequeño */
    line-height: 1.5;
    color: #efe3e3;
    margin: 0 0 8px 0;
}

/* Caja del video: Rediseño total con tamaño miniatura controlado */
.comentario-video {
    width: 520px;   /* Ancho fijo pequeño para laptop */
    height: auto;  /* Altura fija pequeña para laptop */
    flex-shrink: 0;            /* Evita estrictamente que el video crezca o se estire */
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   
}
.contenedor-farmasi .video{  /* Altura fija pequeña para laptop */
    flex-shrink: 0;            /* Evita estrictamente que el video crezca o se estire */
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}




/* Animación sutil de aparición */
@keyframes aparecerSuave {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Adaptación para pantallas de Celulares */
@media (max-width: 768px) {
     .nav-inferior ul, #menu-enlaces {
        display: none !important; /* Inicia 100% oculto */
        visibility: hidden;
        flex-direction: column !important;
        
        /* Posicionamiento flotante fijo sobre toda la pantalla */
        position: fixed !important;
        top: 0px !important; /* Lo pega al techo */
        left: 0 !important;
        width: 100vw !important; /* Todo el ancho del dispositivo */
        height: auto !important;
        
        background-color: #ffffff !important; /* Fondo blanco */
        padding: 90px 0 30px 0 !important; /* Espacio arriba para que no tape la hamburguesa */
        box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
        z-index: 999999 !important; /* Por encima de cualquier slider o imagen */
    }

    /* 2. ESTADO ACTIVO: Obliga a mostrarse al recibir la clase de JS */
    #menu-enlaces.active {
        display: flex !important;
        visibility: visible !important;
    }

    /* Asegurar que el botón de las 3 líneas quede flotando ARRIBA del menú abierto */
    .menu-toggle, #boton-hamburguesa {
        position: relative !important;
        z-index: 1000000 !important; /* Un nivel más arriba que el fondo blanco */
        font-size: 30px !important;
        cursor: pointer !important;
    }

    /* Diseño para los botones de texto dentro del menú abierto */
    #menu-enlaces li {
        width: 100% !important;
        text-align: center !important;
        margin: 20px 0 !important;
    }

    #menu-enlaces li a {
        font-size: 1.4rem !important; /* Letra grande y cómoda para el dedo */
        color: #2c2c2c !important;
        text-decoration: none !important;
        display: block !important;
    }
}

/* Fuerza a que las minigalerías ocupen todo el ancho disponible */
.galeria-servicio-interna {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    justify-content: center; 
    justify-items: center;
    gap: 20px;
    width: 100%;
    margin-top: 15px;
}

/* Agrega el cursor de mano para que el usuario sepa que puede hacer clic en las fotos */
.img-servicio-despliegue {
    width: 100% !important;
    height: 240px; /* Un poco más grandes para que luzcan mejor */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer; /* Añadido: cursor de lupa/mano */
    transition: transform 0.2s ease;
}

.img-servicio-despliegue:hover {
    transform: scale(1.25);
}

/* ==================================================================
   REESTRUCTURACIÓN ESTRICTA DE SERVICIOS KERATINA, MASAJES Y PEDICURA
   =================================================================== */
/* #4 Caja del video, Galeria y Diagnostico Capilar  */
.comentario-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center; 
    justify-content: center; /* Centra el bloque en la pantalla */
    gap: 20px; /* Reduce la separación a 20px */
    width: 100%;
    max-width: 1200px; /* Limita el ancho total para que no ocupe toda la laptop */
    margin: 20px auto;
    padding: 0;
    background: #fdfdfd;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    color: rgb(167, 147, 19);
    font-size: 18px;
}
/* Mostrar solo el bloque activo */
.contenedor-servicios.activos {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido internamente */
    text-align: center; /* Centra los títulos y textos */
    gap: 25px;
    width: 100%;
    box-sizing: border-box;
    animation: aparecerSuave 0.5s ease-out;
    
}

.info-servicio-texto p{
    flex: 1;
    color: white;
    
}

.info-servicio-texto h3 {
    color: #ede2e2;
    margin-top: 0;
}

.info-servicio-texto  {
    line-height: 1.6;
    color: white;
    
}
/* Caja de texto */
.comentario-texto p {
    flex: 1; /* Ocupa el espacio restante de forma fluida */
    text-align: left;
    color:white;
}


/* Caja del video: Rediseño total con tamaño miniatura controlado */
.comentario-video {
    position: relative;
    width: 350px;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  
}
.comentario-video video{
    width: 100%;
   
}

/* Centrado absoluto del contenedor general masaje, mnicura y keratina */
.contenedor-servicios-interactivos {
    width: 100% !important;
    max-width: 1300px !important;
    margin: 30px auto !important; /* Fuerza el centrado en la página */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Forzar la ocultación de los bloques inactivos */
.caja-servicio {
    display: none !important;
    width: 100% !important;
    align-items: center;
    
}

/* Forzar la aparición del bloque activo y centrarlo */
.caja-servicio.activo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Estilo para los textos informativos Keratina, manicura y masajes */
.info-servicio-texto {
    margin-bottom: 20px !important;
    width: 80% !important;
    color: white;
}

/* Cuadrícula de fotos corregida */
.galeria-servicio-interna {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(2, 1fr)) !important;
    gap: 20px !important;
    max-width: 100% !important;
    justify-content: center !important;
    justify-items: center !important;
    
}

/* Estilo estricto para cada imagen Keratina, Masajes*/
.img-servicio-despliegue {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el título y la cuadrícula en tu laptop */
    width: 80% !important;
    height: 270px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
}
/* Oculta de forma estricta todos los bloques que tengan la clase caja-servicio */
.contenedor-servicios-interactivos .caja-servicio {
    display: none !important;
    
}

/* Muestra ÚNICAMENTE el bloque que tenga la combinación de ambas clases */
.contenedor-servicios-interactivos .caja-servicio.activo {
    display: flex !important;
}



/* Ajustes adaptables para celulares */
@media (max-width: 768px) {
    .contenedor-quienes-somos {
        flex-direction: column;
        text-align: center;
    }
    
    .tarjeta-precio.destacada {
        transform: scale(1); /* Evita que se desfase el tamaño en pantallas chicas */
    }
    
    .tarjeta-precio.destacada:hover {
        transform: translateY(-5px);
    }
}
/* ==========================================
   ESTILO PARA LA CITA DE EPÍCTETO
   ========================================== */
.Epicteto {
    width: 100%;
    max-width: 800px;
    margin: 40px auto 0;
    text-align: center;
    color: #cccccc !important;
    font-size: 24px !important;
    font-style: italic;
    font-weight: 300 !important;
    line-height: 1.6;
    letter-spacing: 0.5px;
}
.img-item {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
}

.img-item:hover {
    transform: scale(1);
}

/* Sistema de visualización (Modal) para la Galería */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.contenido-modal {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain; 
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    
}
/* Menú Inferior */

ul {
  list-style-type: none;
   font-family: Arial, Helvetica, sans-serif;
}
 /* ==========================================
   ANIMACIÓN DE TÍTULOS CON SCROLL
   ========================================== */
.titulo-animado {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.titulo-animado, p{
    color: white;
    font-size: 24px;
   
    text-align: center;
}

/* Estado final cuando el usuario llega con el scroll */
.titulo-animado.visible {
    opacity: 1;
    transform: translateY(0);
    
}

/* Estilo base del botón flotante, Para Volver al ppio de la Pag*/
.btn-scroll-top {
    position: fixed;
    bottom: 30px; /* Separación desde abajo */
    right: 50px;  /* Separación desde la derecha */
    width: 50px;
    height: 100px;
    background-color: #007BFF; /* Color azul de tu tema */
    color: white;
    border: none;
    border-radius: 50%; /* Lo hace completamente redondo */
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Asegura que esté por encima de todo */
    
    /* Transición suave para el efecto Hover */
    transition: all 0.3s ease; 
    
    /* Oculto por defecto (JavaScript lo mostrará al bajar) */
    opacity: 0;
    pointer-events: none; 
    transform: translateY(20px); 
}
#quienes-somos, #horario-Atención, #tarifas,
 #equipo, #miFarmasi, #detalles-servicio {
    background-color: #1a1a1a; /* Negro Antracita elegante */
}
#tarifas p{
    color: white;
}

/* Contenedores max-width internos para centrar el contenido  */
.contenido-bienvenida, 
.contenedor-quienes-somos, 
.horarios-atencion,
.contenedor-servicios-interactivos,
.grid-galeria,
.contenedor-equipo,
.formulario,
.contenido-farmasi-bloque {
    color: white;
    text-align: center;
    width: 100%;
    max-width: 500px; /* Ancho perfecto para pantallas de laptop */
    margin: 10px auto 0 auto;
    height: auto;
    display:block;
    border-radius: 28px; /* Opcional: le da esquinas suavemente redondeadas muy elegantes */
    /* Opcional: le da una sombra profunda muy premium */
    font-size: 24px;
    text-align: center;
}


h2 {
    color: rgb(255, 255, 255);
    padding: 25px;
}
/* Fondos en tonos de negro premium para separar secciones */
#inicio, #servicios, #galeria, #contacto {
    background-color: black; /* Negro Puro */
    padding: 25px 25px ;
   
}

.titulo-animado {     /*NUESTRO SERVICIOS "TU BIENESTAR" QUIENES SOMOS*/
    text-align: center;
    font-size: 36px; 
    margin-bottom: 40px;
    color: #ffffff;
    padding: 25px;
}
.img-nosotros-contenedor{
     height: 300px; /* Ajusta este valor según la forma de tu logo */
     text-align: center;

}
/* ==========================================
   ESTILOS DE LOGO Y SERVICIOS INTERACTIVOS
   ========================================== */
   /* Oculta por defecto los servicios */
.caja-servicio {
    display: none; 
}

/* Muestra solo el que se activa */
.caja-servicio.activo {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
}


/* Tamaño controlado del logo en la cabecera */
.img-logo {
    height: 150px; /* Ajusta este valor según la forma de tu logo */
    width: auto;
    object-fit: contain;
}

/* Contenedor del sistema interactivo Manicura, Masaje Spa */
.contenedor-servicios-interactivos  {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 400%;
    max-width: 1200px;
    margin-top: 10px auto 0 auto;
    background-color: #000;
   
}

/* Imagen que se despliega al lado */
.img-servicio-despliegue {
    width: 500px;
    height: 320px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Contenedor principal forzado a estar lado a lado */
.comentario-container {
    display: flex !important;
    flex-direction: row !important; /* Fuerza la alineación horizontal */
    align-items: center; 
    justify-content: space-between;
    gap: 30px; 
    width: 100%;
    max-width: 1000px; /* Ampliamos el espacio para que quepan holgadamente */
    margin: 40px auto;
    padding: 20px;
    background: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.lista-servicios {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.btn-servicio.activo{
    padding: 12px 30px;
    background-color: #262626;
    color: #a0a0a0;
    border: 1px solid #404040;
    border-radius: 20px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}



/* Botón activo: Se ilumina en blanco con fondo oscuro */
.btn-servicio.activo, .btn-servicio:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

@keyframes unirseSuave {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.galeria-servicio-interna{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.img-servicio-despliegue {
    width: 300%;
    height: 550px;
    object-fit: cover;
    border-radius: 15px;
    border: 1px solid #333;
}
/* TRUCO CLAVE: Oculta por completo las cajas que no estén activas */
.lista-servicio {
    display: none; 
}

/* Muestra únicamente la caja que tiene la clase activo */
.lista-servicio.activo {
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: unirseSuave 0.4s ease-in-out forwards;
}

/* EFECTO HOVER (Cuando el usuario pasa el mouse por encima) */
.btn-scroll-top:hover {
    background-color: #0056b3; /* Se vuelve un azul más oscuro */
    transform: translateY(-5px); /* Sube 5 píxeles sutilmente (efecto flote) */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Sombra más profunda */
}

/* Clase que activará JavaScript para mostrar el botón */
.btn-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
/* Estilos para el botón Farmasi */

@media (max-width: 768px) {
    /* Fuerza a que el menú aparezca en formato lista vertical cuando se activa el botón */
     .menu-toggle {
        display: block !important;
        font-size: 28px !important;
        display: block !important;
        cursor: pointer !important;
        color: #1a1a1a!important;
    }

    #menu-enlace {
        display: none;
    }
    #menu-enlaces.mostrar {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important; /* Se abre justo abajo de la barra blanca */
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important; /* Fondo blanco sólido para tapar lo negro de atrás */
        padding: 20px 0 !important;
        gap: 15px !important;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3) !important; /* Sombra para que flote con elegancia */
        z-index: 999999 !important; /* Máxima prioridad: se pone por delante de las secciones oscuras */
    }
    #menu-enlaces li {
        width: 100% !important;
        text-align: center !important;
    }

    #menu-enlaces a {
        display: block !important;
        padding: 10px 0 !important;
        width: 100% !important;
        color: #1a1a1a !important; /* Texto oscuro legible sobre el fondo blanco */
    }
}
/* Contenedor principal para alinear todo al centro */
.contenedor-botones {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ===================================================
   ESTILOS BASE PARA AMBOS BOTONES
   =================================================== */
.btn-farmasi-co, .btn-farmasi-es {
    display: block; /* Obliga a que se comporten como bloques independientes */
    width: fit-content; /* El botón se adapta al tamaño del texto */
    margin: 15px auto; /* Centra los botones horizontalmente y les da espacio vertical */
    padding: 12px 24px;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Ocultar el emoji de la bandera por defecto */
.flag {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    margin-right: 0;
    transition: all 0.3s ease;
    font-size: 18px;
    vertical-align: middle;
}

/* ===================================================
   EFECTO HOVER (Al pasar el ratón por encima)
   =================================================== */
.btn-farmasi-co:hover .flag, .btn-farmasi-es:hover .flag {
    max-width: 30px;
    opacity: 1;
    margin-right: 8px;
}

/* Colores de los botones (He ajustado el de Colombia al amarillo de tu imagen) */
.btn-farmasi-co { background-color: #f7df1e; color: blue; } /* Amarillo con texto negro */
.btn-farmasi-co:hover { background-color: red; }

.btn-farmasi-es { background-color: red; color: #ffffff; } /* Coral con texto blanco */
.btn-farmasi-es:hover { background-color: #e0484d; }


/* Evita que MiFarmasi se desborde al encoger la pantalla a la mitad */
#miFarmasi {
    width: 100%;
    clear: both;
    
}
 .contenedor-farmasi video {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 5%;
 }
.contenedor-farmasi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 auto;
}

/* Hace que la imagen de la tienda se adapte de forma fluida */
.contenido-farmasi-bloque img {
    max-width: 100px;
    height: auto !important;
    width: 100%;
    object-fit: contain;
}

.contenedor-farmasi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    max-width: 1200px;
    gap: 10px;   
    margin-top: auto;
    border: 3px solid black;
    background-color: black;
      
}
.parrafo-farmasi{
    color: white;
    font-size: 24px;
}

.farmasi {
    color: white;
}

html{
    scroll-behavior: smooth;
}


/*Galeria de fotos*/
/* ==========================================
   SECCIÓN GALERÍA GENERAL: CENTRADA Y PREMIUM
   ========================================== */
#galeria {
    background-color: #121212; /* Fondo negro puro */
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el título y la cuadrícula en tu laptop */
}

.grid-galeria {
    display: grid !important;
    /* Crea 3 columnas exactas en ordenadores que se encogen de forma fluida */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 25px; /* Espacio elegante entre imágenes */
    width: 100%;
    max-width: 1200px; /* Alineado exactamente al ancho de tus tarifas */
    margin: 0 auto;
    padding: 20px 0;
}
/* Contenedor principal que alinea las columnas */
.contenedor-footer {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio uniformemente */
    align-items: flex-start;       /* Alinea los títulos arriba */
    flex-wrap: wrap;               /* Hace que sea responsivo en móviles */
    max-width: 1000px;             /* Ancho máximo del contenido */
    margin: 0 auto;                /* Centra el footer en la pantalla */
    padding: 25px;
}

/* Estilo individual para cada columna */
.columna-footer {
    flex: 1;                       /* Hace que todas las columnas midan lo mismo */
    min-width: 250px;              /* Evita que se rompan en pantallas medianas */
    margin-bottom: 20px;
}

/* Quitar los puntos de las listas */
.lista-contacto, .enlaces-legales ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Espaciado de los enlaces legales */
.enlaces-legales li {
    margin-bottom: 8px;
}

/* Línea de copyright abajo del todo */
.copyright-footer {
    text-align: center;
    width: 100%;
    margin-top: 30px;
    border-top: 1px solid #444;    /* Línea divisoria fina */
    padding-top: 15px;
}


/* Las fotos de tu galería */
.img-item {
    width: 100% !important;
    height: 280px !important; /* Altura ideal fija para que todas las filas queden perfectas */
    object-fit: cover; /* TRUCO CLAVE: Adapta y centra la foto dentro de su caja sin deformarla jamás */
    border-radius: 8px; /* Bordes sutiles y suaves */
    border: 1px solid #222; /* Borde oscuro muy fino de lujo */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Sombra profunda elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover interactivo */
.img-item:hover {
    transform: scale(1.03); /* Se eleva sutilmente al pasar el ratón */
    box-shadow: 0 6px 20px rgba(163, 132, 91, 0.3); /* Destello dorado suave */
    border-color: #a3845b; /* El borde cambia al tono de tus botones */
}


/* Botón de acción */
.boton-servicios {
    
    display: inline-block;
    background-color: #d4a373; /* Fondo a juego con el resaltado */
    color: #ffffff;
    text-decoration: none;
    padding: 24px 30px;
    border-radius: 20px; /* Bordes completamente redondeados */
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease; /* Transición suave para el efecto hover */
    box-shadow: 0 4px 15px rgba(212, 163, 115, 0.3); /* Sombra sutil */
}

/* Efecto al pasar el mouse por encima del botón */
.boton-servicios:hover {
    background-color: #bfa2db; /* Cambia a un tono lavanda/rosa suave al interactuar */
    transform: translateY(-3px); /* Levanta el botón ligeramente */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    
}
/* Reemplaza la clase por la que tenga tu imagen del logo */
.contenido-bienvenida.img {
     max-width: 280px; /* Tamaño ideal para el logo */
    height: auto;
    margin-top: 40px;
    
}
/* Columna de Botones */
.lista-servicios {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
    padding: 30px;
}

.btn-servicio {
    background-color: #f5eae2;
    color: #6b2121;
    border: 1px solid #e0cfc3;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
}

/* Botón cuando está seleccionado */
.btn-servicio.activo, .btn-servicio:hover {
    background-color: #b8977e;
    color: white;
    border-color: #b8977e;
    box-shadow: 0 4px 10px rgba(184, 151, 126, 0.3);
}

/* Bloques de Contenido (Ocultos por defecto) */
.contenido-servicio {
    display: none;
    align-items: center;
    gap: 30px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
}
/* ==========================================
   BOTÓN VOLVER ARRIBA CON HOVER ACTIVO
   ========================================== */
.btn-scroll-top {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 99999;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
.btn-scroll-top:hover {
    background-color: #cccccc;
    transform: translateY(-4px);
}

.btn-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}
/* Botón flotante de WhatsApp */
.boton-whatsapp-flotante { /* Asegúrate de usar la clase real de tu icono de WhatsApp */
    position: fixed;
    bottom: 20px;   /* Se queda abajo del todo */
    right: 20px;
    z-index: 1000;
}

/*Galeria de fotos*/
/* ==========================================
   SECCIÓN GALERÍA GENERAL: CENTRADA Y PREMIUM
   ========================================== */
#galeria {
    background-color: #121212; /* Fondo negro puro */
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el título y la cuadrícula en tu laptop */
}

.grid-galeria {
    display: grid !important;
    /* Crea 3 columnas exactas en ordenadores que se encogen de forma fluida */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 25px; /* Espacio elegante entre imágenes */
    width: 100%;
    max-width: 1050px; /* Alineado exactamente al ancho de tus tarifas */
    margin: 0 auto;
    padding: 20px 0;
}

/* Las fotos de tu galería */
.img-item {
    width: 100% !important;
    height: 280px !important; /* Altura ideal fija para que todas las filas queden perfectas */
    object-fit: cover; /* TRUCO CLAVE: Adapta y centra la foto dentro de su caja sin deformarla jamás */
    border-radius: 8px; /* Bordes sutiles y suaves */
    border: 1px solid #222; /* Borde oscuro muy fino de lujo */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Sombra profunda elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover interactivo */
.img-item:hover {
    transform: scale(1.03); /* Se eleva sutilmente al pasar el ratón */
    box-shadow: 0 6px 20px rgba(163, 132, 91, 0.3); /* Destello dorado suave */
    border-color: #a3845b; /* El borde cambia al tono de tus botones */
}

/* ==========================================
   RESPONSIVO PARA TABLETS Y MÓVILES
   ========================================== */
@media (max-width: 1023px) {
    .grid-galeria {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en tablets */
        gap: 15px;
    }
    .img-item {
        height: 240px !important;
    }
}

    /*EFECTO LLUVIA*/
    /* Contenedor invisible que cubre toda la pantalla de fondo */
.lluvia-container {
    position: fixed; /* Cambiado a fixed para que la lluvia siga al usuario al bajar la página */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Se mantiene al fondo */
    pointer-events: none; /* Permite hacer clic en tus botones de reserva o turnos */
}

/* Estilo de cada gota */
.gota {
    position: absolute;
    /* Un degradado que termina en un blanco brillante con un sutil resplandor */
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.8)); 
    width: 1.5px; /* Un poquitito más gruesa para que brille */
    height: 45px;
    box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5); /* Efecto de brillo en la oscuridad */
    animation: caer linear infinite;
}

/* Animación de caída */
@keyframes caer {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(100vh);
    }
}

@keyframes caer {
    0% {
        transform: translateY(-100px) translateX(0px);
    }
    100% {
        transform: translateY(100vh) translateX(-50px); /* Se inclina levemente a la izquierda */
    }
}
/* 💻 2. ORDENADORES / PANTALLAS GRANDES (Desde 1025px en adelante) */
@media only screen and (min-width: 1023px) {
    /* Navegación del Menú (Vuelve a ser horizontal y fijo) */
    nav ul {
        display: flex; /* Fuerza a mostrarse horizontal */
        flex-direction: row;
        height: 100%;
        align-items: center;
        position: static;
        background: transparent;
    }

    nav a {
        border-bottom: none;
        padding: 10px 25px;
    }

    .boton-hamburguesa {
        display: none !important; /* Oculta el botón hamburguesa en PC */
        font-size: 16px;
    }

    /* Secciones */
    section {
        padding: 100px 60px;
        min-height: 100vh; /* Ocupa la pantalla completa en PC */
    }

    /* Galería: Cambia a 3 o 4 columnas según el tamaño en PC */
    .grid-galeria {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
    }

    /* Estructura para Tarifas o Servicios en PC (Diseño Horizontal en paralelo) */
    .contenedor-tarifas, .contenedor-servicios {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 30px;
        width: 100%;
        
    }

    /* Footer: Las 3 columnas alineadas perfectamente de forma horizontal */
    .contenido-footer {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
    }
}

/* --- Adaptación para pantallas móviles --- */
@media only screen and (max-width: 1023px) {
     
    /* Forzamos a que aparezca la hamburguesa al reducir la ventana */
     /* MODIFICACIÓN DEL MENÚ (Estilo barra lateral elegante) */
      /* Agrega esto al final dentro de este mismo @media */
     .tu-contenedor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    }
     nav {
        top: 0;
        left: 0 !important;
        right: auto !important;
        max-width: 1200px!important; /* Por defecto no ocupa espacio en la pantalla */
        height: auto !important;
        z-index: 9999;
     }
    nav ul {
        display: flex !important;
        flex-direction: column !important; 
        position: fixed !important; /* Cambiado a fixed para asegurar control absoluto */
        
        /* ¡Aquí está el truco de magia! */
        top: -100vh !important; /* Escondido arriba en el cielo del navegador */
        opacity: 0 !important;   /* Invisible por completo */
        pointer-events: none !important; /* Hace que el menú sea "fantasma" y no se pueda tocar mientras esté cerrado */
        left: 0 !important;
        width: 100% !important; 

        height: auto !important; 
        max-height: 60vh !important;
        overflow-y: auto !important;
         padding: 55px 30px 15px 30px !important; 

        background-color: #ffffff !important; 
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1) !important;
        z-index: 9999 !important;
        transition: all 0.4s ease-in-out !important; 
        color: white;
    }
    /* Cuando JavaScript añade la clase 'show', el menú entra a la pantalla */
    nav ul.show {
        top: 0 !important; /* Baja a la pantalla */
        opacity: 1 !important; /* Se vuelve visible */
        pointer-events: auto !important; /* Se puede volver a clickear normalmente */
        
    }
     nav li {
        width: 100% !important;
        border-bottom: 1px solid #eaeaea !important;
    }
    nav a {
        display: block !important;
        padding: 10px 0 !important;
        font-size: 15px;
    }
    /* EL BOTÓN HAMBURGUESA FIJO ARRIBA A LA DERECHA */
    .menu-hamburguesa {
        text-decoration: none;
        display: block !important; 
        position: fixed !important;
        top: 20px !important;
        right: 20px !important; /* Lo fijamos a la derecha para que no estorbe */
        left: auto !important;
        transform: none !important;
        z-index: 10000; /* Siempre por encima del menú */
        
        /* Estilos visuales del botón */
        background: none;
         border: none !important;
        color: #000000 !important; 
        font-size: 32px !important; 
        cursor: pointer;
        padding: 5px;

       
    }
}
    @media only screen and (max-width: 1023px) {

    /* 1. Transformamos la fila horizontal en una torre vertical centrada */
        header {
        position: relative !important; /* Cambiado de fixed o absolute a relative */
        background-color: #ffffff !important;
        width: 100% !important;
        height: auto !important;
        padding-bottom: 20px !important;
        z-index: 100 !important;
    }

    .header-superior {
        display: flex !important;
        flex-direction: column !important; /* Apila las 3 cajas en vertical */
        align-items: center !important;    /* Clava todo en el centro de la pantalla */
        justify-content: center !important;
         gap: 12px !important; /* Separa de forma idéntica las redes, el logo y el teléfono */
        width: 100% !important;
        padding: 5px 5px  !important; /* Espacio arriba para que no choque con el botón ☰ */
        box-sizing: border-box !important;
       
    }

    /* 2. Centramos el bloque de las redes sociales del Header*/
    .img-redes {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 35px !important; /* Separa los iconos entre sí */
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 3. Forzamos al logotipo a estar en el centro absoluto */
    .logo {
        display: block;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        text-align: center !important; /* Alinea los textos al medio */
        margin-left:  auto !important;
    }

    .logo a {
        display: inline-block !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Ajustamos el subtítulo ("Peluquería & Spa") para que se ponga debajo y centrado */
    .logo  {
        display: block !important;
        text-align: center !important;
        margin-top: 5px !important;
        padding: 12px 6px 2px 2px;
    }

    /* 4. Centramos el teléfono */
    .telefono-cabecera {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
}
@media only screen and (max-width: 480px) {
     
    .my_class{
        font-size: 1rem;
    }

  .tu-contenedor-grid {
    grid-template-columns: repeat(1, 1fr) !important; /* 1 columna en celulares */
    
    
  }
}
 /*ESTILOS PANTALLAS GRANDES (Laptops / PC desde 769px)
   ========================================================================== */
@media only screen and (max-width: 1023px) {
                

/* Contenedor principal de la Bienvenida */
.contenido-bienvenida {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 50vh; /* Altura ideal para pantallas de computadora y celular */
    margin-top: 100px;
    box-sizing: border-box;
    padding-bottom: 40px;
    padding-left: 25px;
    padding-right: 15px;
    box-sizing: border-box;
    max-width: 80%;
    padding: 0 0;
   
}
.bienvenida img{
    max-width: 100%;
  height: auto;
  display: block;
}

.nav-inferior a:hover {
    color: #0e0b19;
}

/* Ajuste necesario para que el menú fijo no tape el contenido */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /*Aumentado porque el menú ahora es más alto */
}
/* Estilo Base de Secciones */
.horarios-atencion{
    text-align: center;
    justify-content: center;
}
/*Estilo para todos los titulos*/
.titulo-animado {
    background-color: #1a1816;
    color: #666;
    border: 1px solid #e0cfc3;
    padding: 10px 0px;
    font-size: 36px;
    font-weight: 600;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(184, 151, 126, 0.3);
}

/* Galería en Cuadrícula y Video Lya(Grid) # 5 */
.grid-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    width: 80%;
}
/*Img Bambu Quienes somo*/
.img-nosotros-contenedor{
     height: auto; /* Ajusta este valor según la forma de tu logo */
     text-align: center;
     display: block;
  background-size: contain; /* Muestra toda la imagen sin cortarla */
  background-position: center;
    
}

.img-item {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
}

.img-item:hover {
    transform: scale(1.05);
}
}
/* 📱 1. TABLETS (Pantallas medianas - Desde 768px hasta 1024px) */
@media only screen and (min-width: 768px) {
    /* Secciones */
    section {
        padding: 120px 40px; /* Más espacio lateral */
        min-height: 70vh;
    }
}
/* 💻 2. ORDENADORES / PANTALLAS GRANDES (Desde 1025px en adelante) */
@media only screen and  (min-width: 1023px) {
    /* Navegación del Menú (Vuelve a ser horizontal y fijo) */
    nav ul {
        display: flex; /* Fuerza a mostrarse horizontal */
        flex-direction: row;
        justify-content: flex-end;
        position: static;
        width: auto;
        background: transparent;
        
    }

    nav a {
        border-bottom: none;
        padding: 10px 25px;
        letter-spacing: 1px;
    }

    .boton-hamburguesa {
        display: none !important; /* Oculta el botón hamburguesa en PC */
        font-size: 16px;
    }

    /* Secciones */
    section {
        min-height: 100vh; /* Ocupa la pantalla completa en PC */
    }

    /* Galería: Cambia a 3 o 4 columnas según el tamaño en PC */
    .grid-galeria {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1200px;
    }

    /* Estructura para Tarifas o Servicios en PC (Diseño Horizontal en paralelo) */
    .contenedor-tarifas, .contenedor-servicios {
        display: flex;
        justify-content:space-between;
        gap: 10px;
        width: 100%;
        max-width: 1200px;
    }
    

    /* Footer: Las 3 columnas alineadas perfectamente de forma horizontal */
    .contenido-footer {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1200px;
    }
}

@media only screen and (max-width: 1023px) {
  /* Alinea las 3 tarjetas en fila horizontal */
 .contenedor-tarifas {
    flex-direction: column; /* Se apilan en columna en móviles para leerse bien */
    gap: 15px;
  }

  .contenedor-tarifas .tarjeta-precio {
    width: 100%; /* Ocupan todo el ancho en celulares */
  }
}