/* =============================================
   SERENA SPA — Hoja de estilos principal
   main.css

   Índice:
   1.  Variables / Tokens de diseño
   2.  Reset base
   3.  Utilidades generales
   4.  Tipografía
   5.  Botones
   6.  Navbar
   7.  Hero
   8.  Tarjetas de servicio
   9.  Cabecera de sección
   10. Footer
   11. Chatbot (botón flotante)
   12. Responsive (media queries)
   ============================================= */

/* ─────────────────────────────────────────────
   1. VARIABLES / TOKENS DE DISEÑO
   Paleta: verde oscuro (principal), crema, blanco
   ───────────────────────────────────────────── */
:root {
  /* Colores principales */
  --color-verde:        #2C5F2E;   /* Verde oscuro — color principal del spa */
  --color-verde-claro:  #3D7A40;   /* Verde medio — acentos y precios */
  --color-verde-hover:  #1E4220;   /* Verde oscuro — estado hover de botones */
  --color-crema:        #FAF6EE;   /* Crema cálida — fondos de secciones */
  --color-crema-oscura: #F0E9DC;   /* Crema más intensa — bordes suaves */
  --color-blanco:       #FFFFFF;
  --color-texto:        #2A2A2A;   /* Gris casi negro — texto principal */
  --color-texto-suave:  #666666;   /* Gris medio — texto secundario */
  --color-borde:        #E0D9CE;   /* Borde sutil en componentes */

  /* Tipografía */
  --fuente-titulo:  'Cormorant Garamond', Georgia, serif;  /* Títulos elegantes */
  --fuente-cuerpo:  'Lato', 'Helvetica Neue', sans-serif;  /* Texto legible */

  /* Escala tipográfica */
  --texto-xs:   0.75rem;    /*  12px */
  --texto-sm:   0.875rem;   /*  14px */
  --texto-base: 1rem;       /*  16px */
  --texto-lg:   1.125rem;   /*  18px */
  --texto-xl:   1.375rem;   /*  22px */
  --texto-2xl:  1.75rem;    /*  28px */
  --texto-3xl:  2.25rem;    /*  36px */
  --texto-4xl:  3rem;       /*  48px */
  --texto-5xl:  4rem;       /*  64px */

  /* Espaciado */
  --espacio-xs:  0.5rem;
  --espacio-sm:  1rem;
  --espacio-md:  1.5rem;
  --espacio-lg:  2.5rem;
  --espacio-xl:  4rem;
  --espacio-2xl: 6rem;

  /* Bordes y sombras */
  --radio-sm:   4px;
  --radio-md:   8px;
  --radio-lg:   16px;
  --sombra-sm:  0 2px 8px rgba(44, 95, 46, 0.08);
  --sombra-md:  0 4px 20px rgba(44, 95, 46, 0.12);

  /* Transición estándar */
  --transicion: 0.15s ease-out;
}

/* ─────────────────────────────────────────────
   2. RESET BASE
   Normaliza comportamientos entre navegadores
   ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--fuente-cuerpo);
  color: var(--color-texto);
  background-color: var(--color-blanco);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

/* ─────────────────────────────────────────────
   3. UTILIDADES GENERALES
   ───────────────────────────────────────────── */

/* Contenedor centrado con ancho máximo */
.contenedor {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--espacio-md);
}

/* Bloque de sección con espaciado vertical */
.seccion {
  padding: var(--espacio-2xl) 0;
}

/* Sección con fondo crema */
.seccion--crema {
  background-color: var(--color-crema);
}

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

/* Etiqueta pequeña en verde — usada encima de títulos */
.etiqueta {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-verde);
  display: block;
  margin-bottom: var(--espacio-xs);
}

/* ─────────────────────────────────────────────
   4. TIPOGRAFÍA
   Todos los encabezados usan la fuente serif
   en color verde para reforzar la identidad
   ───────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-verde);
}

h1 { font-size: var(--texto-5xl); }
h2 { font-size: var(--texto-4xl); }
h3 { font-size: var(--texto-2xl); }
h4 { font-size: var(--texto-xl);  }

p {
  color: var(--color-texto-suave);
  font-size: var(--texto-base);
  font-weight: 400;
  line-height: 1.8;
  text-align: justify;
}

/* ─────────────────────────────────────────────
   5. BOTONES
   Tres variantes: primario, secundario y ghost
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-xs);
  padding: 0.85rem 2rem;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: var(--radio-sm);
  transition: all var(--transicion);
}

/* Botón sólido verde — acción principal */
.btn--primario {
  background-color: var(--color-verde);
  color: var(--color-blanco);
}
.btn--primario:hover {
  background-color: var(--color-verde-hover);
  transform: translateY(-1px);
  box-shadow: var(--sombra-md);
}

/* Botón con contorno — acción secundaria */
.btn--secundario {
  background-color: transparent;
  color: var(--color-verde);
  border: 1.5px solid var(--color-verde);
}
.btn--secundario:hover {
  background-color: var(--color-verde);
  color: var(--color-blanco);
}

/* Botón pequeño — para navbar y espacios reducidos */
.btn--sm {
  padding: 0.35rem 0.85rem;
  font-size: var(--texto-xs);
  letter-spacing: 0.05em;
}

/* Botón de texto — "Ver más →" en tarjetas */
.btn--ghost {
  background-color: transparent;
  color: var(--color-verde);
  padding: 0;
  font-size: var(--texto-sm);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  border-bottom: 1px solid var(--color-verde);
  border-radius: 0;
}
.btn--ghost:hover { opacity: 0.7; }

/* ─────────────────────────────────────────────
   6. NAVBAR
   Barra fija en la parte superior.
   Al hacer scroll adquiere borde y sombra suave.
   ───────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--color-blanco);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

/* Clase añadida por JS al detectar scroll */
.navbar.scrolled {
  border-color: var(--color-borde);
  box-shadow: var(--sombra-sm);
}

.navbar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.2rem var(--espacio-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo: ícono SVG + nombre SERENA */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.navbar__logo-img  { height: 40px; width: auto; object-fit: contain; }
.navbar__logo-texto {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xl);
  font-weight: 600;
  color: var(--color-verde);
  letter-spacing: 0.05em;
}

/* Menú de navegación horizontal */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--espacio-lg);
}

/* Enlace con línea inferior animada al hover */
.navbar__link {
  font-size: var(--texto-sm);
  color: var(--color-texto);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color var(--transicion);
  position: relative;
}
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background-color: var(--color-verde);
  transform: scaleX(0);
  transition: transform var(--transicion);
}
.navbar__link:hover,
.navbar__link.activo { color: var(--color-verde); }
.navbar__link:hover::after,
.navbar__link.activo::after { transform: scaleX(1); }

/* Zona de acciones: botón de login o avatar del usuario */
.navbar__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
}
.navbar__usuario {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.navbar__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-verde);
}

/* ─────────────────────────────────────────────
   7. HERO
   Sección principal de dos columnas:
   izquierda = texto, derecha = collage de fotos
   ───────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 80px; /* Compensa la navbar fija */
}

/* Columna de texto — centra el contenido verticalmente */
.hero__contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--espacio-2xl) var(--espacio-xl)
           var(--espacio-2xl)
           calc((100vw - 1400px) / 2 + var(--espacio-md));
}

.hero__titulo      { font-size: clamp(var(--texto-4xl), 5vw, var(--texto-5xl)); margin-bottom: var(--espacio-md); max-width: 520px; }
.hero__descripcion { max-width: 420px; margin-bottom: var(--espacio-lg); font-size: var(--texto-lg); }
.hero__acciones    { display: flex; gap: var(--espacio-sm); flex-wrap: wrap; }

/* Columna derecha — collage de 3 fotos sobre fondo crema */
.hero__collage {
  background-color: var(--color-crema);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--espacio-xs);
  padding: var(--espacio-md);
}

.hero__foto { border-radius: var(--radio-sm); overflow: hidden; }
/* Primera foto ocupa toda la altura del grid */
.hero__foto:first-child { grid-row: 1 / 3; }
.hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease-out;
}
.hero__foto:hover img { transform: scale(1.03); }

/* ─────────────────────────────────────────────
   8. TARJETAS DE SERVICIO
   Grid de 3 columnas — masajes, spa capilar, faciales
   ───────────────────────────────────────────── */
.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--espacio-md);
  margin-top: var(--espacio-lg);
}

.tarjeta-servicio {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  background-color: var(--color-blanco);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-servicio:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-4px);
}

/* Imagen de la tarjeta con zoom suave al hover */
.tarjeta-servicio__imagen {
  height: 220px;
  overflow: hidden;
  background-color: var(--color-crema);
}
.tarjeta-servicio__imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease-out;
}
.tarjeta-servicio:hover .tarjeta-servicio__imagen img { transform: scale(1.05); }

/* Contenido textual de la tarjeta */
.tarjeta-servicio__cuerpo      { padding: var(--espacio-md); }
.tarjeta-servicio__nombre      { font-family: var(--fuente-titulo); font-size: var(--texto-2xl); color: var(--color-verde); margin-bottom: 0.5rem; }
.tarjeta-servicio__precio      { font-size: var(--texto-sm); color: var(--color-verde-claro); font-weight: 600; margin-bottom: var(--espacio-xs); }
.tarjeta-servicio__descripcion { font-size: var(--texto-sm); color: var(--color-texto-suave); margin-bottom: var(--espacio-md); line-height: 1.7; }

/* ─────────────────────────────────────────────
   9. CABECERA DE SECCIÓN
   Bloque centrado que introduce cada sección
   ───────────────────────────────────────────── */
.seccion__cabecera {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--espacio-lg);
}
.seccion__cabecera h2 { margin-bottom: var(--espacio-sm); }

/* ─────────────────────────────────────────────
   10. FOOTER
   Fondo verde oscuro con texto blanco
   ───────────────────────────────────────────── */
.footer {
  background-color: var(--color-verde);
  color: var(--color-blanco);
  padding: var(--espacio-xl) 0 var(--espacio-md);
}

/* Grid de 3 columnas: info del spa, servicios, links */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--espacio-xl);
  margin-bottom: var(--espacio-lg);
}

.footer__logo-texto   { font-family: var(--fuente-titulo); font-size: var(--texto-2xl); color: var(--color-blanco); margin-bottom: var(--espacio-xs); }
.footer__subtitulo    { font-size: var(--texto-xs); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; margin-bottom: var(--espacio-sm); }
.footer p             { color: rgba(255, 255, 255, 0.8); font-size: var(--texto-sm); }
.footer__titulo-columna { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blanco); margin-bottom: var(--espacio-sm); }

/* Enlace de footer con transición de opacidad */
.footer__link { display: block; color: rgba(255,255,255,0.75); font-size: var(--texto-sm); margin-bottom: 0.5rem; transition: color var(--transicion); }
.footer__link:hover { color: var(--color-blanco); }

.footer__separador { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin-bottom: var(--espacio-md); }
.footer__copy      { text-align: center; color: rgba(255,255,255,0.7); font-size: var(--texto-xs); }

/* ─────────────────────────────────────────────
   10a. SECCIÓN NOSOTROS — imagen izquierda
   ───────────────────────────────────────────── */
.nosotros__imagen {
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--sombra-md);
}
.nosotros__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ─────────────────────────────────────────────
   10b. MAPA INTERACTIVO
   Rectángulo contenido, centrado, con bordes suaves
   ───────────────────────────────────────────── */
.mapa-contenedor {
  max-width: 820px;
  margin: 0 auto;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-md);
  border: 1px solid var(--color-borde);
}

/* ─────────────────────────────────────────────
   10c. GRIDS REUTILIZABLES
   Clases de layout para secciones de dos columnas
   ───────────────────────────────────────────── */

/* Grid de dos columnas iguales con gap generoso */
.grid-dos-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
/* Variante sin alineación centrada (ej. Contacto) */
.grid-dos-col--top { align-items: start; }

/* ─────────────────────────────────────────────
   10d. ETIQUETA HERO (variante grande)
   La etiqueta del hero es más visible que las demás
   ───────────────────────────────────────────── */
.etiqueta--hero {
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: var(--espacio-sm);
}

/* ─────────────────────────────────────────────
   10e. MENÚ HAMBURGUESA
   Visible solo en móvil — reemplaza el menú horizontal
   ───────────────────────────────────────────── */
.navbar__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
  flex-shrink: 0;
}
.navbar__hamburguesa span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-verde);
  border-radius: 2px;
  transition: all 0.2s ease-out;
  transform-origin: center;
}
/* Animación de barras → X al abrir el menú */
.navbar__hamburguesa.abierto span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.navbar__hamburguesa.abierto span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar__hamburguesa.abierto span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Overlay de menú móvil (menú expandido pantalla completa) */
.navbar__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--color-blanco);
  z-index: 998;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-lg);
  padding: var(--espacio-2xl);
}
.navbar__overlay.abierto {
  display: flex;
}
.navbar__overlay .navbar__link {
  font-size: var(--texto-2xl);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  color: var(--color-verde);
  letter-spacing: 0.04em;
}
.navbar__overlay .navbar__link::after {
  bottom: -6px;
  height: 2px;
}


/* ─────────────────────────────────────────────
   12. RESPONSIVE (MEDIA QUERIES)
   Breakpoints: 1200 / 1024 / 768 / 480px
   Diseño móvil-primero con foco en UI/UX táctil
   ───────────────────────────────────────────── */

/* ── Pantallas grandes (< 1200px): ajuste de padding del hero ── */
@media (max-width: 1200px) {
  .hero__contenido {
    padding: var(--espacio-xl) var(--espacio-lg)
             var(--espacio-xl) var(--espacio-lg);
  }
}

/* ── Tablet (≤ 1024px): hero apilado, footer 2 cols ── */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__contenido {
    padding: var(--espacio-xl) var(--espacio-md);
    text-align: center;
    align-items: center;
  }
  .hero__titulo      { max-width: 100%; }
  .hero__descripcion { max-width: 560px; }
  .hero__collage     { height: 420px; }

  .grid-dos-col { gap: 2.5rem; }

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

/* ── Móvil (≤ 768px): una columna, hamburguesa, táctil ── */
@media (max-width: 768px) {

  /* ── Tipografía escalada ── */
  h1 { font-size: clamp(var(--texto-2xl), 8vw, var(--texto-3xl)); }
  h2 { font-size: clamp(var(--texto-xl),  7vw, var(--texto-2xl)); }
  h3 { font-size: var(--texto-xl); }

  /* ── Navbar: hamburguesa visible, menú horizontal oculto ── */
  .navbar__menu        { display: none; }
  .navbar__hamburguesa { display: flex; width: 22px; height: 15px; }
  .navbar__hamburguesa.abierto span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .navbar__hamburguesa.abierto span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* En móvil: los botones táctiles se agrandan globalmente — revertir solo en navbar */
  .navbar .btn {
    min-height: 0;
    padding: 0.28rem 0.6rem;
    font-size: 0.68rem;
    white-space: nowrap;
  }
  .navbar__acciones #nav-no-auth .btn { display: none; }
  .navbar__acciones { gap: 0.25rem; }
  .navbar__usuario  { gap: 0.25rem; }
  .navbar__avatar   { width: 24px; height: 24px; border-width: 1.5px; }
  /* Ocultar texto "Mi cuenta" en móvil — el avatar sigue siendo el enlace */
  #mi-cuenta-link   { display: none; }

  /* ── Secciones: menos padding vertical ── */
  .seccion { padding: var(--espacio-xl) 0; }

  /* ── Hero ── */
  .hero__contenido {
    padding: var(--espacio-lg) var(--espacio-sm);
    padding-top: calc(var(--espacio-lg) + 80px);
  }
  .hero__collage { height: 280px; }
  .hero__acciones {
    flex-direction: column;
    width: 100%;
  }
  .hero__acciones .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Grids → una columna ── */
  .grid-servicios { grid-template-columns: 1fr; }
  .grid-dos-col   { grid-template-columns: 1fr; gap: var(--espacio-lg); }

  /* ── Botones más táctiles ── */
  .btn { padding: 0.95rem 1.75rem; min-height: 48px; }

  /* ── Footer ── */
  .footer__grid { grid-template-columns: 1fr; gap: var(--espacio-md); }

  /* ── Mapa ── */
  .mapa-contenedor { border-radius: var(--radio-md); }

}

/* ── Móvil pequeño (≤ 480px): ajustes extra ── */
@media (max-width: 480px) {
  html { font-size: 15px; }

  .navbar__inner {
    padding: 0.9rem var(--espacio-sm);
  }
  .navbar__logo-img  { height: 30px; }
  .navbar__logo-texto { font-size: var(--texto-lg); }

  .contenedor { padding: 0 var(--espacio-sm); }

  .seccion { padding: var(--espacio-lg) 0; }

  h1 { font-size: var(--texto-2xl); }
  h2 { font-size: clamp(1.5rem, 6vw, var(--texto-xl)); }

  .hero__collage { height: 220px; }

  /* Tarjeta de servicio: imagen más corta */
  .tarjeta-servicio__imagen { height: 180px; }

  /* Footer: texto más compacto */
  .footer__grid { gap: var(--espacio-sm); }
}