@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Open+Sans&display=swap');

/* --- Variables (Añadidas para consistencia) --- */
:root{
--bg: #121212;
--primary: #81b8b2; /* Color principal (utilizado en el navbar y botones hover) */
--accent: #9ee2d9; /* Color de acento */
--card: #171717;
}

/* Reset + Base */
*,
*::before,
*::after { box-sizing: border-box; }
html,body { height: 100%; }
body {
margin: 0;
padding: 0;
background-color: var(--bg);
color: #fff;
font-family: 'Nunito', sans-serif; 
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }

/* --- Barra de navegación --- */
header.navbar {
position: fixed;
top: 0; 
left: 0; 
width: 100%; 
background: rgba(18,18,18,0.95);
display: flex;
justify-content: space-between;
align-items: center;
height: 85px;
padding: 5px 5%;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
box-sizing: border-box;
z-index: 1000;
}

.navbar .logo {
font-weight: bold;
font-size: 1.4em;
color: var(--primary); 
cursor: pointer;
text-decoration: none; /* 💡 MODIFICACIÓN: Quita el subrayado del enlace del logo */
}

.logo a {
  color: inherit;
  text-decoration: none;
}

.logo a:hover {
  opacity: 0.8;
}


.navbar nav {
display: flex;
/* 💡 MODIFICACIÓN: Permite que el nav ocupe el espacio restante en PC */
flex-grow: 1; 
justify-content: flex-end;
align-items: center;
}

.navbar nav ul {
display: flex;
flex-direction: row; /* 💡 CORREGIDO: Asegura la disposición horizontal en PC */
list-style: none;
margin: 0;
padding: 0;
gap: 15px;
justify-content: flex-end;
align-items: center;
}

.navbar nav ul li {
list-style: none;
margin: 0;
padding: 0;
}

.navbar nav ul li a {
display: inline-block;
color: white;
text-decoration: none;
font-weight: 500;
padding: 8px 12px;
transition: color 0.3s, transform 0.3s;
cursor: pointer;
}

.navbar nav ul li a:hover {
color: var(--primary);
transform: scale(1.05);
cursor: pointer;
}

/* Hamburger icon */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
z-index: 1001;
gap: 4px; /* Añadido gap para mejor visualización */
}

.hamburger div {
width: 28px;
height: 3px;
background-color: white;
transition: 0.4s;
}


/* --- SECCIÓN ANTES/DESPUÉS (Resto de estilos) --- */
.before-after-section {
padding: 120px 20px 50px; 
text-align: center;
}

.before-after-section h1 {
font-family: 'Playfair Display', serif;
font-size: 42px;
margin-bottom: 10px;
color: #ffffff;
}

.subtext {
color: #aaa;
font-size: 16px;
margin-bottom: 40px;
}

.container {
display: flex;
justify-content: center;
align-items: center;
}

.slider-container {
position: relative;
width: 60%;
max-width: 800px;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 20px rgba(129, 184, 178, 0.15); 
}

.image-container {
position: relative;
width: 100%;
height: 100%;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: -20px; /* Esto puede causar un pequeño desajuste, pero se mantiene de tu código original */
left: 0;
}

.after-img {
clip-path: inset(0 0 0 50%);
transition: clip-path 0.1s ease-out;
}

.slider-line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: var(--primary); 
transition: left 0.1s ease-out;
z-index: 5;
}

.slider {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 90%;
cursor: pointer;
appearance: none;
background: transparent;
z-index: 10;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
background: var(--primary); 
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--bg); 
}

/* 💡 CORREGIDO: Reglas de PC para estadísticas (Horizontal) */
.stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 50px;
}

.stat h2 {
color: var(--primary); 
font-size: 32px;
margin: 0;
}

.stat p {
color: #aaa;
margin-top: 5px;
}


/* =========================
   CARRUSEL (Escritorio)
   ========================= */
.carousel-section {
padding: 60px 0;
text-align: center;
position: relative;
}

.carousel-section + .carousel-section { 
margin-top: 36px; 
border-top: 1px solid rgba(255,255,255,0.02); 
padding-top: 48px; 
}

.carousel-section h2 {
font-family: 'Playfair Display', serif;
font-size: 36px;
margin-bottom: 28px;
color: var(--primary);
}

.carousel-wrapper {
position: relative;
width: 90%;
margin: 0 auto;
overflow: hidden; 
border-radius: 12px;
background-color: rgba(0, 0, 0, 0.1);
padding: 0 50px; /* Espacio para los botones */
}

.carousel-track {
display: flex;
padding: 20px 0; 
gap: 20px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track { -ms-overflow-style: none; scrollbar-width: none; }

.carousel-item {
flex: 0 0 auto; 
width: 300px; 
aspect-ratio: 4 / 6; 
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
scroll-snap-align: start; 
}

.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover; 
cursor: pointer;
}

.carousel-item:hover {
transform: scale(1.02);
box-shadow: 0 6px 20px rgba(129, 184, 178, 0.2);
}

/* Estilos de los botones de navegación */
.prev-btn, .next-btn {
position: absolute; 
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 10;
opacity: 0.8;
transition: opacity 0.3s, background 0.3s;
}

.prev-btn { left: 0; } 
.next-btn { right: 0; } 

.prev-btn:hover, .next-btn:hover {
opacity: 1;
background: var(--primary);
}


/* =========================
   LIGHTBOX
   ========================= */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(6px);
justify-content: center;
align-items: center;
z-index: 2000;
transition: opacity 0.25s ease;
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 12px;
box-shadow: 0 0 40px rgba(129,184,178,0.18);
cursor: zoom-out;
}

/* small visual polish */
.gallery-section + .gallery-section { margin-top: 36px; border-top: 1px solid rgba(255,255,255,0.02); padding-top: 48px; }

/* --- ANIMACIÓN FADE-IN --- */
.fade-in {
animation: fadeIn 1.5s ease-out;
}

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


/* ---------------------------------
   ESTILOS RESPONSIVE (max-width: 768px)
   --------------------------------- */
@media (max-width: 768px) { 
/* --- NAVBAR (Menú Desplegable ARREGLADO) --- */
.navbar {
flex-direction: row;
padding: 10px 5%;
}

.navbar nav {
flex-grow: 1;
justify-content: flex-end;
position: static;
}

.navbar nav ul {
/* 💡 ARREGLO CLAVE: Cambia a columna en móvil */
flex-direction: column;
align-items: center;

/* Oculta la lista usando max-height y overflow para animación */
max-height: 0;
overflow: hidden;

background-color: #1c1c1c;
width: 100%;
position: absolute;
top: 85px; 
left: 0;
padding: 0;
margin: 0;
transition: max-height 0.5s ease-out, padding 0.5s ease-out;
z-index: 999;
}

.navbar nav ul.show {
max-height: 600px;
padding: 10px 0;
}

.hamburger {
display: flex;
}
/* --- ANTES/DESPUÉS Y ESTADÍSTICAS --- */
.before-after-section { 
padding: 110px 20px 30px; 
}
.slider-container { width: 90%; aspect-ratio: 16/10; }

.stats { 
flex-direction: column; /* 💡 CORRECTO: Apila las estadísticas en vertical en móvil */
gap: 30px; 
}

/* --- CARRUSEL RESPONSIVE ARREGLADO --- */
.carousel-section { padding: 36px 0; }
.carousel-section h2 { font-size: 28px; }

.carousel-wrapper { 
width: 100%; /* Ocupa todo el ancho */
padding: 0 5px; /* Pequeño padding lateral para el scroll táctil */
}

.prev-btn, .next-btn { 
display: none; /* Oculta los botones para forzar el scroll táctil */
}

.carousel-item { 
width: 250px; /* Tamaño de tarjeta ajustado */
aspect-ratio: 16 / 22; 
}

.carousel-track {
padding: 20px 15px; /* Padding para que la primera foto no esté pegada al borde */
gap: 10px;
}

/* --- LIGHTBOX --- */
.lightbox img {
max-width: 95%; /* Da más espacio a la imagen en móvil */
max-height: 95%;
}
}
/* ---------------------------------
   FIN DE ESTILOS RESPONSIVE
   --------------------------------- */