/* ===== Viva Estética — hoja de estilos =====
   Paleta e identidad: ver proyectos/Viva Estetica/index.md > Identidad de marca */

:root {
  --marron: #6D422C;
  --dorado: #EAC965;
  --durazno: #FFD596;
  --arena: #CEB9AD;
  --crema: #FAF4EE;
  --crema-alt: #F3E9DF;
  --blanco: #FFFFFF;
  --texto: #4A362B;

  --font-titulo: 'Fraunces', serif;
  --font-label: 'Jost', sans-serif;
  --font-texto: 'Manrope', sans-serif;

  --radio: 4px;
  --sombra: 0 20px 40px rgba(109, 66, 44, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-texto);
  color: var(--texto);
  background: var(--crema);
  line-height: 1.6;
}

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

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

.contenedor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--marron);
  font-weight: 500;
}

.eyebrow--claro { color: var(--durazno); }

h1, h2, h3 {
  font-family: var(--font-titulo);
  color: var(--marron);
  font-weight: 500;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
h3 { font-size: 1.3rem; }

p { margin: 0; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: var(--radio);
  border: 1px solid var(--marron);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.boton--relleno {
  background: var(--marron);
  color: var(--crema);
}
.boton--relleno:hover { background: #573323; transform: translateY(-1px); }

.boton--contorno {
  background: transparent;
  color: var(--marron);
}
.boton--contorno:hover { background: var(--marron); color: var(--crema); }

.boton--claro {
  background: var(--crema);
  color: var(--marron);
  border-color: var(--crema);
}
.boton--claro:hover { background: var(--durazno); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Fondo casi opaco en vez de blur: el backdrop-filter combinado con
     position:sticky dejaba una costura clara justo debajo del header en
     varios navegadores (Safari/Chrome mobile) — bug de renderizado conocido
     de esa combinación, no un problema de layout. */
  background: rgba(250, 244, 238, 0.98);
  border-bottom: 1px solid rgba(109, 66, 44, 0.08);
}

.header__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca img { height: 56px; width: auto; }
.marca__texto {
  font-family: var(--font-titulo);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--marron);
  text-align: center;
}
.marca__texto span {
  display: block;
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--arena);
  text-transform: uppercase;
  text-align: center;
}

.nav {
  display: flex;
  gap: 32px;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav a { position: relative; padding: 4px 0; }
.nav a:hover { color: var(--dorado); }

.header__acciones { display: flex; align-items: center; gap: 18px; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--marron);
  display: block;
}

/* ---------- Hero: carrusel ----------
   Full-bleed (borde a borde) como la referencia LUMIÈRE, pero ahora con
   varias fotos que rotan. Cada slide es una imagen de fondo + degradé +
   texto propio; solo el slide activo es visible (opacity), el resto sigue
   en el DOM para que Google lea todo el texto de cada slide. */
.hero {
  padding: 0;
}
.hero__carrusel {
  position: relative;
  height: 86vh;
  min-height: 560px;
  max-height: 780px;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
  /* Margen lateral alineado con .contenedor. Va como padding del slide (no
     del bloque de texto): en pantallas anchas ese margen supera los 300px y,
     puesto dentro de una caja de 480px, dejaba el texto en ~100px de ancho. */
  padding-inline: max(24px, calc((100% - 1180px) / 2 + 24px));
}
.hero__slide.is-activo {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(45, 30, 22, 0.72) 0%, rgba(45, 30, 22, 0.42) 45%, rgba(45, 30, 22, 0.18) 100%);
}

/* Slide con el cuerpo a la izquierda de la foto: el texto se pasa al lado
   derecho (degradé espejado) para no taparlo. */
.hero__slide--der { justify-content: flex-end; }
.hero__slide--der .hero__overlay {
  background: linear-gradient(280deg, rgba(45, 30, 22, 0.72) 0%, rgba(45, 30, 22, 0.42) 45%, rgba(45, 30, 22, 0.18) 100%);
}
.hero__slide--der .hero__texto { text-align: right; }

.hero__texto {
  position: relative;
  z-index: 2;
  max-width: 480px;
  color: var(--crema);
}
.hero__texto .eyebrow { margin-bottom: 18px; display: block; }
.hero__texto h1,
.hero__titulo {
  font-family: var(--font-titulo);
  color: var(--crema);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.12;
  margin: 0 0 20px;
}
.hero__texto p:not(.hero__titulo) { color: var(--arena); margin-bottom: 28px; font-size: 1.02rem; }

.hero__puntos {
  position: absolute;
  z-index: 3;
  left: max(24px, calc((100% - 1180px) / 2 + 24px));
  bottom: 28px;
  display: flex;
  gap: 10px;
}
.hero__punto {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  border: none;
  background: rgba(250, 244, 238, 0.4);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, width 0.25s ease;
}
.hero__punto.is-activo { background: var(--crema); width: 38px; }
.hero__punto:hover { background: rgba(250, 244, 238, 0.7); }

/* ---------- Tratamientos ---------- */
.tratamientos {
  padding: 90px 0;
  text-align: center;
}
.tratamientos__intro { max-width: 560px; margin: 0 auto 52px; }
.tratamientos__intro .eyebrow { display: block; margin-bottom: 12px; }

/* Carrusel de tratamientos: scroll horizontal con snap en vez de grilla que
   envuelve — se arrastra/desliza igual en mouse, trackpad y dedo.
   - Margen lateral fijo de 24px + scroll-padding igual: sin eso el snap pega
     la primera tarjeta al borde izquierdo de la pantalla.
   - La fila usa margin auto: si las 5 tarjetas caben (pantallas anchas) queda
     centrada; si no caben, arranca en el margen y se desliza. En ese caso las
     flechas se ven; si todo cabe, main.js las oculta (clase .sin-scroll). */
.tratamientos__carrusel {
  position: relative;
}

.tratamientos__scroll {
  overflow-x: auto;
  padding: 4px 24px 8px;
  scroll-padding-inline: 24px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.tratamientos__scroll::-webkit-scrollbar { display: none; }

.tratamientos__grid {
  display: flex;
  gap: 24px;
  text-align: left;
  width: max-content;
  margin-inline: auto;
}

.tratamientos__carrusel.sin-scroll .tratamientos__flecha { display: none; }

.tratamientos__flecha {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--crema);
  border: 1px solid var(--arena);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(109, 66, 44, 0.15);
  z-index: 5;
  color: var(--marron);
  transition: background 0.2s ease, transform 0.2s ease;
}
.tratamientos__flecha:hover { background: var(--durazno); }
.tratamientos__flecha svg { width: 20px; height: 20px; }
.tratamientos__flecha--izq { left: 10px; }
.tratamientos__flecha--der { right: 10px; }

.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(109, 66, 44, 0.08);
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  width: 300px;
  scroll-snap-align: start;
}

.tarjeta__media {
  height: 220px;
  overflow: hidden;
}
.tarjeta__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.tarjeta:hover .tarjeta__media img { transform: scale(1.05); }

.tarjeta__media--placeholder {
  background: linear-gradient(135deg, var(--durazno), var(--arena));
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarjeta__media--placeholder svg { width: 46px; height: 46px; stroke: var(--marron); }

.tarjeta__cuerpo { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.tarjeta__duracion {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dorado);
  background: rgba(234, 201, 101, 0.15);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  width: fit-content;
}
.tarjeta__cuerpo h3 { margin-bottom: 8px; }
.tarjeta__cuerpo p { color: #7A6252; font-size: 0.92rem; margin-bottom: 16px; flex: 1; }
.tarjeta__enlace {
  font-family: var(--font-label);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--marron);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tarjeta__enlace svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.tarjeta:hover .tarjeta__enlace svg { transform: translateX(4px); }

/* ---------- Confianza ---------- */
.confianza {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  color: var(--crema);
  overflow: hidden;
}
.confianza__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.confianza__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 30, 22, 0.72);
}
.confianza__contenido {
  position: relative;
  z-index: 2;
  max-width: 480px;
  text-align: center;
  margin: 0 auto;
}
.confianza__contenido .boton { margin-top: 6px; }
.confianza__contenido .eyebrow { color: var(--durazno); display: block; margin-bottom: 14px; }
.confianza__contenido h2 { color: var(--crema); margin-bottom: 26px; }

/* ---------- Confianza barra ---------- */
.sellos {
  padding: 56px 0;
  background: var(--crema-alt);
}
.sellos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.sello { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sello svg { width: 30px; height: 30px; stroke: var(--marron); }
.sello span {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--marron);
}

/* ---------- Sobre nosotros / horarios ---------- */
.sobre {
  padding: 90px 0;
}
.sobre__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}
.sobre__texto .eyebrow { display: block; margin-bottom: 14px; }
.sobre__texto h2 { margin-bottom: 20px; }
.sobre__placeholder {
  border: 1px dashed var(--arena);
  border-radius: var(--radio);
  padding: 20px 22px;
  color: #8a7364;
  font-size: 0.92rem;
  background: rgba(206, 185, 173, 0.12);
}

.horario-tarjeta {
  background: var(--marron);
  color: var(--crema);
  border-radius: var(--radio);
  padding: 34px;
}
.horario-tarjeta h3 { color: var(--durazno); font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; margin-bottom: 20px; }
.horario-fila {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(250,244,238,0.15);
  font-size: 0.95rem;
}
.horario-fila:last-child { border-bottom: none; color: var(--arena); }

/* ---------- Reserva ---------- */
.reserva {
  padding: 90px 0;
  text-align: center;
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-alt) 100%);
}
.reserva__caja {
  max-width: 620px;
  margin: 0 auto;
}
.reserva .eyebrow { display: block; margin-bottom: 14px; }
.reserva h2 { margin-bottom: 18px; }
.reserva p { color: #7A6252; margin-bottom: 32px; }

.reserva__calendario {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: 650px;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(109, 66, 44, 0.12);
}
.reserva__calendario iframe { border-radius: var(--radio); }

/* Solo un panel de servicio visible a la vez — ver lógica de activación en
   js/main.js (mostrarPanelCal). */
.reserva__cal-panel {
  display: none;
  width: 100%;
  min-height: 650px;
}
.reserva__cal-panel.is-activo { display: block; }

/* ---------- Footer ---------- */
.pie {
  background: var(--marron);
  color: var(--crema);
  padding: 60px 0 28px;
}
.pie__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.pie__marca { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pie__marca img { height: 30px; }
.pie__marca span { font-family: var(--font-titulo); font-size: 1.1rem; }
.pie p { color: var(--arena); font-size: 0.9rem; }
.pie h4 {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--durazno);
  margin-bottom: 16px;
}
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pie ul a { color: var(--crema); font-size: 0.92rem; }
.pie ul a:hover { color: var(--durazno); }

.pie__contacto li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
}
.pie__contacto svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--durazno);
}
.pie__contacto span { color: var(--crema); }
.pie__linea {
  border-top: 1px solid rgba(250,244,238,0.15);
  padding-top: 22px;
  font-size: 0.8rem;
  color: var(--arena);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Botón flotante WhatsApp ----------
   Verde propio de WhatsApp (en vez del marrón de marca) + anillo crema:
   así se distingue sobre cualquier fondo, incluido el footer marrón oscuro
   donde antes se perdía. */
.wa-flotante {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  border: 3px solid var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  transition: transform 0.2s ease;
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante svg { width: 27px; height: 27px; fill: var(--crema); }

/* ===================== Responsive ===================== */
@media (max-width: 960px) {
  .hero__carrusel { height: 64vh; min-height: 420px; max-height: 560px; }
  .hero__texto { max-width: 100%; }
  .sobre__grid { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
  .sellos__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}

/* El nav completo no entra cómodo desde tablet chico en adelante (se apretaba
   contra el botón "Agenda tu Cita"), así que el menú hamburguesa arranca antes
   que el resto de los cambios de layout mobile. */
@media (max-width: 880px) {
  .nav {
    position: fixed;
    top: 68px;
    left: 0; right: 0;
    background: var(--crema);
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-bottom: 1px solid rgba(109,66,44,0.08);
  }
  .nav.abierto { max-height: 320px; padding: 10px 0; }
  .nav a { padding: 14px 24px; border-bottom: 1px solid rgba(109,66,44,0.06); }
  .menu-toggle { display: flex; }
  .header__acciones .boton { display: none; }
  .header__acciones { gap: 10px; }
}

@media (max-width: 720px) {
  .confianza { min-height: 340px; }
  .pie__grid { grid-template-columns: 1fr; gap: 30px; }
  .sellos__grid { grid-template-columns: 1fr 1fr; }
  .tratamientos, .sobre, .reserva { padding: 60px 0; }
  /* En mobile el gutter lateral es chico (24px) y las flechas no entran
     cómodas sin taparse con la primera/última tarjeta — ahí se confía en el
     swipe táctil, que ya funciona con el scroll-snap del carrusel. */
  .tratamientos__flecha { display: none; }
}

@media (max-width: 420px) {
  .contenedor { padding: 0 18px; }
  .hero__carrusel { height: 56vh; min-height: 360px; }
}