/* ==========================================================
   LA SUITE PELUQUEROS — styles.css
   Hoja de estilos única. Diseño "salón boutique": mucho espacio
   en blanco, tipografía clásica grande y el dorado usado poco
   y siempre fino (líneas de 1px, nunca brillos ni degradados).

   Está pensada primero para el móvil. El único punto de corte
   importante es 900px (a partir de ahí es "ordenador").

   Índice rápido (busca estos títulos en MAYÚSCULAS):
   VARIABLES · BASE · UTILIDADES · CABECERA MÓVIL · CABECERA
   ESCRITORIO · PÍLDORA MÓVIL · PORTADA · SERVICIOS · ANTES-DESPUÉS
   · OPINIONES · GALERÍA · EL SALÓN · RESERVAR · VISÍTANOS · PIE
   · ANIMACIONES DE SCROLL · REDUCIR MOVIMIENTO
========================================================== */

/* ---------- VARIABLES ---------- */
:root {
  --negro: #0E0E0E;
  --marfil: #F5F1EA;
  --dorado: #C6A15B;
  --gris: #8A847B;

  /* Versiones con transparencia del dorado, para bordes y líneas finas */
  --dorado-30: rgba(198, 161, 91, 0.3);
  --dorado-15: rgba(198, 161, 91, 0.15);

  --fuente-titulos: 'Cormorant Garamond', serif;
  --fuente-texto: 'Jost', sans-serif;

  /* Curva de animación suave, la misma en toda la web */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);

  --cabecera-movil-alto: 60px;
  --pildora-alto: 68px;
}

/* ---------- BASE ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-texto);
  font-weight: 300;
  color: var(--marfil);
  background-color: var(--negro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Deja hueco abajo en móvil para que la píldora flotante no tape nada */
  padding-bottom: calc(var(--pildora-alto) + 32px);
}

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

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select {
  font-family: inherit;
}

/* Todas las secciones dejan hueco arriba para que la cabecera fija
   no tape el título al llegar con un enlace del menú */
section[id] {
  scroll-margin-top: calc(var(--cabecera-movil-alto) + 16px);
}

@media (min-width: 900px) {
  section[id] {
    scroll-margin-top: 96px;
  }
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  line-height: 1.15;
  /* Reparte las palabras entre líneas para que no quede una sola suelta */
  text-wrap: balance;
}

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
}

/* ---------- UTILIDADES ---------- */
.contenedor {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--marfil);
  border: 1px solid var(--dorado-30);
  border-radius: 999px;
  padding: 7px 16px;
}

.numero {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  color: var(--dorado);
  letter-spacing: 2px;
  /* Números "rectos" (Cormorant por defecto los dibuja como letras bajas) */
  font-variant-numeric: lining-nums;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 34px;
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background-color 0.3s var(--curva), border-color 0.3s var(--curva), color 0.3s var(--curva);
  min-height: 44px;
}

.boton--dorado {
  background-color: var(--dorado);
  color: var(--negro);
}

.boton--dorado:hover {
  background-color: #d6b46f;
}

.boton--linea {
  border-color: var(--dorado-30);
  color: var(--marfil);
}

.boton--linea:hover {
  border-color: var(--dorado);
  background-color: var(--dorado-15);
}

.titulo-seccion {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
}

.subtexto {
  color: var(--gris);
  max-width: 46ch;
}

.section-cabecera {
  margin-bottom: 56px;
}

/* Pequeñas ayudas de colocación */
.espacio-arriba {
  margin-top: 18px;
}

.centrado {
  text-align: center;
}

.centrado-bloque {
  margin-left: auto;
  margin-right: auto;
}

/* Texto que solo leen los lectores de pantalla (no se ve) */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- CABECERA (móvil + escritorio en el mismo <header>) ---------- */
.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: var(--cabecera-movil-alto);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(14, 14, 14, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cabecera__logo {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  color: var(--marfil);
}

.cabecera__logo-sub {
  display: none;
}

/* En móvil, la cabecera de escritorio (enlaces + botón) se oculta entera */
.cabecera__lado,
.cabecera__cta {
  display: none;
}

@media (min-width: 900px) {
  /* La cabecera mide siempre 76px. Para que el cambio al hacer scroll
     sea fluido, solo animamos opacidad y posición (nunca la altura):
     - el fondo negro con la línea dorada aparece con un fundido
     - el contenido sube 14px, así el menú parece "más bajo" */
  .cabecera {
    height: 76px;
    background-color: transparent;
    /* Sin desenfoque en ordenador: si no, la foto de la portada
       se vería borrosa justo debajo del menú */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    justify-content: initial;
  }

  .cabecera::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--negro);
    border-bottom: 1px solid rgba(198, 161, 91, 0.55);
    opacity: 0;
    transition: opacity 0.3s var(--curva);
  }

  .cabecera.esta-scrolleada::before {
    opacity: 1;
  }

  .cabecera__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    transform: translateY(14px);
    transition: transform 0.3s var(--curva);
  }

  .cabecera.esta-scrolleada .cabecera__inner {
    transform: translateY(0);
  }

  .cabecera__lado {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
  }

  .cabecera__lado--derecha {
    justify-content: flex-end;
  }

  .cabecera__lado a:not(.boton) {
    position: relative;
    padding-bottom: 4px;
  }

  .cabecera__lado a:not(.boton)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--dorado);
    /* La línea se "dibuja" de izquierda a derecha escalándose */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--curva);
  }

  .cabecera__lado a:not(.boton):hover::after,
  .cabecera__lado a:not(.boton):focus-visible::after {
    transform: scaleX(1);
  }

  .cabecera__centro {
    text-align: center;
  }

  .cabecera__logo {
    font-size: 1.7rem;
  }

  .cabecera__logo-sub {
    display: block;
    font-family: var(--fuente-texto);
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: var(--gris);
    margin-top: 2px;
  }

  .cabecera__cta {
    display: inline-flex;
    padding: 12px 24px;
    font-size: 0.72rem;
    border-color: var(--dorado);
  }

  /* "Pedir cita": borde dorado fino que se rellena al pasar el ratón */
  .cabecera__cta:hover {
    background-color: var(--dorado);
    border-color: var(--dorado);
    color: var(--negro);
  }
}

/* Enlace oculto para saltar el menú con el teclado (aparece al tabular) */
.salto-contenido {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 2000;
  background-color: var(--dorado);
  color: var(--negro);
  padding: 10px 18px;
  font-size: 0.85rem;
  transform: translateY(-80px);
  transition: transform 0.2s var(--curva);
}

.salto-contenido:focus {
  transform: translateY(0);
}

/* Contorno de foco visible y en dorado para quien navega con teclado */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--dorado);
  outline-offset: 4px;
}

/* ---------- PÍLDORA DE NAVEGACIÓN (solo móvil) ---------- */
.pildora {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  height: var(--pildora-alto);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  background-color: rgba(14, 14, 14, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--dorado-30);
  border-radius: 999px;
  padding: 6px;
}

.pildora__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--gris);
  transition: color 0.3s var(--curva);
}

.pildora__link svg {
  width: 20px;
  height: 20px;
}

.pildora__link span {
  /* 11px: lo mínimo para que se lea bien en cualquier móvil */
  font-size: 0.6875rem;
  line-height: 1.2;
}

.pildora__link.esta-activo {
  color: var(--dorado);
}

.pildora__link--cta {
  flex: 1.15;
  background-color: var(--dorado);
  color: var(--negro);
}

.pildora__link--cta span {
  font-weight: 500;
}

@media (min-width: 900px) {
  .pildora {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ---------- PORTADA (HERO) ---------- */
.portada {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--cabecera-movil-alto);
}

.portada__foto {
  position: relative;
  height: 60vh;
  overflow: hidden;
  border-radius: 16px;
  /* En móvil la foto va primero y el texto debajo */
  order: -1;
}

/* Sombra suave arriba de la foto para que el menú se lea bien encima */
.portada__foto::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(14, 14, 14, 0.55), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Tres fotos en el mismo hueco, una encima de otra. js/main.js va
   alternando cuál se ve (clase "esta-visible") cada 5 segundos,
   con un fundido de 1 segundo entre una y otra. */
.portada__foto-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1s ease;
  animation: zoomSuave 12s var(--curva) infinite alternate;
}

.portada__foto-item.esta-visible {
  opacity: 1;
}

@keyframes zoomSuave {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.portada__texto {
  padding: 48px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.portada__titulo {
  font-size: clamp(2.4rem, 9vw, 3.4rem);
}

.portada__subtitulo {
  color: var(--gris);
  font-size: 1rem;
  max-width: 38ch;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.portada__confianza {
  color: var(--gris);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
}

.portada__confianza strong {
  color: var(--dorado);
  font-weight: 500;
}

.portada__scroll {
  display: none;
}

@media (min-width: 900px) {
  .portada {
    flex-direction: row;
    min-height: 100vh;
    padding-top: 0;
  }

  .portada__texto {
    width: 45%;
    justify-content: center;
    padding: 0 72px;
    gap: 24px;
  }

  .portada__foto {
    width: 55%;
    height: 100vh;
    order: 0;
  }

  .portada__scroll {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    left: 40px;
    bottom: 48px;
    z-index: 2;
  }

  .portada__scroll-linea {
    width: 1px;
    height: 64px;
    background-color: var(--dorado-30);
    position: relative;
    overflow: hidden;
  }

  .portada__scroll-linea::after {
    content: '';
    position: absolute;
    left: 0;
    top: -40%;
    width: 100%;
    height: 40%;
    background-color: var(--dorado);
    animation: bajaSube 2.6s ease-in-out infinite;
  }

  @keyframes bajaSube {
    0% { top: -40%; }
    50% { top: 100%; }
    100% { top: -40%; }
  }

  .portada__scroll span {
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--gris);
  }
}

/* Aparición escalonada del texto de la portada al cargar la página */
.portada__texto > * {
  opacity: 0;
  transform: translateY(16px);
  animation: apareceDesdeAbajo 0.8s var(--curva) forwards;
}

.portada__texto > *:nth-child(1) { animation-delay: 0.1s; }
.portada__texto > *:nth-child(2) { animation-delay: 0.2s; }
.portada__texto > *:nth-child(3) { animation-delay: 0.3s; }
.portada__texto > *:nth-child(4) { animation-delay: 0.4s; }
.portada__texto > *:nth-child(5) { animation-delay: 0.5s; }

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

/* ---------- ZONA GENERAL DE SECCIÓN ---------- */
.seccion {
  padding: 88px 0;
}

.seccion--marfil {
  background-color: var(--marfil);
  color: var(--negro);
}

.seccion--marfil .subtexto {
  color: #6b655d;
}

.seccion--marfil .etiqueta {
  color: var(--negro);
  border-color: rgba(198, 161, 91, 0.5);
}

/* Sobre fondo marfil el dorado no se lee en textos pequeños,
   así que ahí los textos van en gris oscuro y el dorado queda
   solo para líneas y bordes */
.seccion--marfil .campo label,
.seccion--marfil .reserva-llamar {
  color: #6b655d;
}

.seccion--marfil .galeria-flecha {
  color: var(--negro);
  border-color: rgba(198, 161, 91, 0.6);
}

.seccion--marfil .galeria-punto {
  border-color: rgba(14, 14, 14, 0.35);
}

.seccion--marfil .galeria-punto.esta-activo {
  background-color: var(--negro);
  border-color: var(--negro);
}

.seccion--marfil .campo input,
.seccion--marfil .campo select {
  border-bottom-color: rgba(14, 14, 14, 0.3);
}

.seccion--marfil .campo input:focus,
.seccion--marfil .campo select:focus {
  border-bottom-color: var(--dorado);
}

.seccion--marfil .campo-aviso {
  color: #a4502f;
}

/* ---------- SERVICIOS (estilo portada de revista) ---------- */
#servicios {
  padding: 56px 0; /* antes: 88px (heredado de .seccion) */
}

.servicios-lista {
  display: flex;
  flex-direction: column;
  gap: 44px; /* antes: 72px */
}

.servicio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  opacity: 0;
}

/* Animación en cascada: cada bloque (foto + texto) entra por
   separado, y se repite cada vez que aparece en pantalla, tanto
   bajando como subiendo. La dirección la calcula js/main.js y
   pone una de estas dos clases. */
.servicio.entra-bajando {
  animation: servicioEntraBajando 0.7s var(--curva) both;
}

.servicio.entra-subiendo {
  animation: servicioEntraSubiendo 0.7s var(--curva) both;
}

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

/* Al subir usamos la dirección contraria (desde arriba hacia
   abajo) para que no se sienta igual que al bajar. */
@keyframes servicioEntraSubiendo {
  from { opacity: 0; transform: translateY(-32px); }
  to { opacity: 1; transform: translateY(0); }
}

.servicio__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
}

/* Dos fotos en el mismo hueco. js/main.js alterna cuál se ve
   (clase "esta-visible") cada 4 segundos, con un fundido suave. */
.servicio__foto-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.servicio__foto-item.esta-visible {
  opacity: 1;
}

.servicio__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.servicio__titulo {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}

.servicio__descripcion {
  color: var(--gris);
  max-width: 42ch;
}

.servicio__enlace {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--dorado);
  padding-bottom: 2px;
  color: var(--dorado);
  transition: opacity 0.3s var(--curva);
}

.servicio__enlace:hover {
  opacity: 0.7;
}

@media (min-width: 900px) {
  /* Cuadrícula de 2 columnas x 3 filas. El diseño "alternado"
     (foto a un lado, texto al otro) que usábamos en una sola
     columna no cabe bien en una tarjeta de la mitad de ancho, así
     que aquí cada tarjeta pasa a llevar la foto arriba y el texto
     debajo, igual en las 6 (mismo criterio que en móvil, pero en
     2 columnas). Así las 6 tarjetas quedan parejas entre sí. */
  .servicios-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    row-gap: 72px;
  }

  .servicio {
    grid-template-columns: 1fr;
    gap: 32px;
    /* En escritorio el bloque entero ya no se anima como una sola
       pieza: la foto y el texto se animan cada una por su lado,
       más abajo ("movimiento marcado al bajar"). */
    opacity: 1;
  }

  .servicio.entra-bajando,
  .servicio.entra-subiendo {
    animation: none;
  }

  /* ---------- Foto: zoom de entrada + parallax ----------
     El zoom (de 1.1 a 1.0) lo pone esta animación al entrar en
     pantalla. El parallax (que la foto se mueva un poco más lenta
     que el resto al hacer scroll) lo calcula js/main.js y lo
     aplica como "transform" directamente a cada foto; por eso la
     foto necesita ser un poco más alta que su marco (ver más abajo
     en .servicio__foto-item), para que ese movimiento no deje ver
     huecos vacíos en los bordes. */
  .servicio__foto {
    opacity: 0;
  }

  .servicio.entra-bajando .servicio__foto,
  .servicio.entra-subiendo .servicio__foto {
    animation: servicioFotoZoomEntrada 0.9s var(--curva) both;
  }

  @keyframes servicioFotoZoomEntrada {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
  }

  .servicio__foto-item {
    top: -8%;
    height: 116%;
  }

  /* ---------- Texto: desplazamiento más grande ----------
     Mismo espíritu que la animación en cascada del resto de la
     web (fundido + desplazamiento, curva suave), pero con un
     recorrido bastante más largo (80px) para que en escritorio se
     note más que en el resto del sitio. Sigue distinguiendo bajar
     de subir, como en móvil. */
  .servicio__texto {
    opacity: 0;
  }

  .servicio.entra-bajando .servicio__texto {
    animation: servicioTextoBajandoEscritorio 0.8s var(--curva) both;
  }

  .servicio.entra-subiendo .servicio__texto {
    animation: servicioTextoSubiendoEscritorio 0.8s var(--curva) both;
  }

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

  @keyframes servicioTextoSubiendoEscritorio {
    from { opacity: 0; transform: translateY(-80px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- OPINIONES ---------- */
.opiniones {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.opiniones__resumen {
  text-align: center;
}

.opiniones__titulo {
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 18px 0 24px;
}

.opiniones__derecha {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.opiniones__numero {
  font-family: var(--fuente-titulos);
  color: var(--dorado);
  font-size: clamp(5rem, 18vw, 8.5rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.opiniones__estrellas {
  color: var(--dorado);
  font-size: 1.1rem;
  letter-spacing: 3px;
  margin-top: 10px;
}

.opiniones__cantidad {
  color: var(--gris);
  font-size: 0.85rem;
  margin-top: 6px;
}

.opiniones__tarjeta-zona {
  display: grid;
  grid-template-areas: "tarjeta";
  max-width: 640px;
  margin: 0 auto;
}

.opiniones__tarjeta {
  grid-area: tarjeta;
  border: 1px solid var(--dorado-30);
  border-radius: 2px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
  pointer-events: none;
}

.opiniones__tarjeta.esta-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.opiniones__texto {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.4;
}

.opiniones__autora {
  margin-top: 20px;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dorado);
}

.opiniones__puntos {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.opiniones__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--dorado-30);
  background-color: transparent;
  padding: 0;
  transition: background-color 0.3s var(--curva);
}

.opiniones__punto.esta-activo {
  background-color: var(--dorado);
}

.opiniones__enlace {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  color: var(--gris);
  border-bottom: 1px solid var(--dorado-30);
  padding-bottom: 2px;
  width: fit-content;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .opiniones {
    flex-direction: row;
    align-items: center;
    gap: 80px;
  }

  .opiniones__resumen {
    flex: 0 0 280px;
    text-align: left;
  }

  .opiniones__tarjeta-zona {
    flex: 1;
    margin: 0;
  }

  .opiniones__enlace {
    margin-inline: 0;
  }

  .opiniones__puntos {
    justify-content: flex-start;
  }
}

/* ---------- GALERÍA (carrusel con profundidad) ---------- */
.galeria-carrusel {
  position: relative;
  /* Las fotos laterales se salen por los lados: las recortamos aquí
     para que la página nunca se pueda mover en horizontal */
  overflow: hidden;
  padding: 12px 0;
}

.galeria-escenario {
  position: relative;
  height: 420px;
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  /* Evita que al arrastrar con el ratón se seleccionen las fotos en azul */
  user-select: none;
  -webkit-user-select: none;
}

.galeria-item {
  position: absolute;
  width: min(72vw, 360px);
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.5s var(--curva), opacity 0.5s var(--curva);
  will-change: transform, opacity;
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.galeria-flechas {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.galeria-flecha {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--dorado-30);
  background: transparent;
  color: var(--marfil);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--curva), border-color 0.3s var(--curva);
}

.galeria-flecha:hover {
  border-color: var(--dorado);
  background-color: var(--dorado-15);
}

.galeria-puntos {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.galeria-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--dorado-30);
  background: transparent;
  padding: 0;
  transition: background-color 0.3s var(--curva);
}

.galeria-punto.esta-activo {
  background-color: var(--dorado);
}

@media (min-width: 900px) {
  .galeria-escenario {
    height: 480px;
  }

  .galeria-item {
    width: 380px;
  }
}

/* ---------- EL SALÓN ---------- */
.salon {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.salon__foto {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}

.salon__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.salon__texto p {
  color: var(--gris);
  margin-top: 16px;
  max-width: 44ch;
}

@media (min-width: 900px) {
  .salon {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

/* ---------- RESERVAR ---------- */
#reservar {
  position: relative;
  overflow: hidden; /* los iconos de fondo nunca provocan scroll horizontal */
}

/* ---------- Iconos decorativos de fondo ----------
   Tijeras, peine, secador y brocha, dibujados a mano en líneas
   finas doradas. Van detrás del formulario (z-index 0, el
   formulario tiene z-index 1) y muy tenues (14-18% de opacidad)
   para no competir con el contenido. Flotan despacio, cada uno
   con su propio ritmo para que no se muevan a la vez. Con
   "reducir movimiento" activado se quedan quietos (ver más abajo). */
.reserva-decoracion {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--dorado);
}

.reserva-decoracion svg {
  position: absolute;
}

.icono-tijeras {
  top: 6%;
  left: 4%;
  width: 84px;
  height: 84px;
  opacity: 0.16;
  transform: rotate(-18deg);
  animation: flotarTijeras 8s var(--curva) infinite;
}

.icono-peine {
  bottom: 8%;
  left: 5%;
  width: 60px;
  height: 60px;
  opacity: 0.14;
  transform: rotate(8deg);
  animation: flotarPeine 7s var(--curva) infinite;
  animation-delay: -2s;
}

.icono-secador {
  top: 8%;
  right: 4%;
  width: 96px;
  height: 96px;
  opacity: 0.16;
  transform: rotate(10deg);
  animation: flotarSecador 9s var(--curva) infinite;
  animation-delay: -4s;
}

.icono-brocha {
  bottom: 10%;
  right: 6%;
  width: 58px;
  height: 58px;
  opacity: 0.14;
  transform: rotate(-6deg);
  animation: flotarBrocha 10s var(--curva) infinite;
  animation-delay: -6s;
}

@keyframes flotarTijeras {
  0%, 100% { transform: translateY(0) rotate(-18deg); }
  50% { transform: translateY(-12px) rotate(-13deg); }
}

@keyframes flotarPeine {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50% { transform: translateY(10px) rotate(3deg); }
}

@keyframes flotarSecador {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  50% { transform: translateY(-14px) rotate(15deg); }
}

@keyframes flotarBrocha {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(9px) rotate(-1deg); }
}

@media (max-width: 899px) {
  /* En móvil hay menos aire alrededor del formulario: los iconos
     se quedan más pegados a las esquinas y algo más pequeños. */
  .icono-tijeras { width: 56px; height: 56px; top: 2%; left: 2%; }
  .icono-peine { width: 44px; height: 44px; bottom: 3%; left: 3%; }
  .icono-secador { width: 64px; height: 64px; top: 1%; right: 2%; }
  .icono-brocha { width: 42px; height: 42px; bottom: 2%; right: 3%; }
}

/* Vidrio esmerilado: fondo marfil translúcido (14%) + desenfoque
   de lo que quede detrás (los iconos flotantes). El texto sigue
   siendo negro sobre una base clara, así que el contraste se
   mantiene igual de bien que con el fondo opaco de antes. */
.reserva-formulario {
  position: relative;
  z-index: 1; /* por encima de .reserva-decoracion */
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 56px 48px; /* antes: 40px 32px, más espacioso */
  border: 1px solid rgba(198, 161, 91, 0.35); /* dorado al 35% */
  border-radius: 16px; /* antes: 2px, igual que fotos y mapa */
  background-color: rgba(245, 241, 234, 0.14); /* marfil al 14% */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(14, 14, 14, 0.14);
}

@media (max-width: 899px) {
  .reserva-formulario {
    padding: 40px 24px;
  }
}

.reserva-campos {
  display: flex;
  flex-direction: column;
  gap: 32px; /* antes: 28px (gap entre campos suelto) */
}

.reserva-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--dorado-30); /* línea fina que separa campos de la acción de enviar */
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campo label {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gris);
}

.campo input,
.campo select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dorado-30);
  padding: 10px 2px;
  font-size: 1rem;
  color: var(--marfil);
  border-radius: 4px; /* antes: 0, para que el glow de foco se vea redondeado */
  box-shadow: 0 0 0 rgba(198, 161, 91, 0);
  transition: border-color 0.25s var(--curva), box-shadow 0.25s var(--curva);
}

.seccion--marfil .campo input,
.seccion--marfil .campo select {
  color: var(--negro);
}

/* Foco: borde dorado sólido + resplandor dorado alrededor del
   campo entero (dos capas: un halo ajustado y otro más difuso). */
.campo input:focus,
.campo select:focus {
  outline: none;
  border-bottom-color: var(--dorado);
  box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.16), 0 0 18px rgba(198, 161, 91, 0.4);
}

.campo-aviso {
  font-size: 0.8rem;
  color: #c67a5b;
  display: none;
}

.campo-aviso.esta-visible {
  display: block;
}

/* ---------- Botón "Enviar por WhatsApp" -> check dorado ----------
   El botón lleva el texto y el check ya en el HTML, uno encima del
   otro; al enviar, js/main.js le pone la clase "esta-enviado" y el
   CSS hace la transición: el texto se desvanece y el check aparece
   con un pequeño retraso, para que se sienta como una sola
   transformación en vez de dos cosas a la vez. */
.reserva-enviar {
  position: relative;
  transition: transform 0.25s var(--curva), box-shadow 0.25s var(--curva), background-color 0.25s var(--curva);
}

/* Pasar el mouse: se aclara (mismo tono que ya usábamos), se eleva
   un poco y le crece una sombra dorada suave debajo. Mantenemos el
   fondo sólido (en vez de invertir a transparente) para no perder
   contraste del texto/check sobre el fondo claro de esta sección. */
.reserva-enviar:hover {
  background-color: #d6b46f;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(198, 161, 91, 0.4);
}

/* Click/tap: se comprime un instante antes de disparar el envío. */
.reserva-enviar:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 6px 14px rgba(198, 161, 91, 0.3);
  transition-duration: 0.12s;
}

.reserva-enviar__texto {
  transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
}

.reserva-enviar__check {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s var(--curva) 0.15s, transform 0.35s var(--curva) 0.15s;
}

.reserva-enviar.esta-enviado .reserva-enviar__texto {
  opacity: 0;
  transform: scale(0.85);
}

.reserva-enviar.esta-enviado .reserva-enviar__check {
  opacity: 1;
  transform: scale(1);
}

.reserva-llamar {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gris);
  border-bottom: 1px solid var(--dorado-30);
  padding-bottom: 2px;
  width: fit-content;
  margin: 0 auto;
}

/* ---------- Mensaje de confirmación ----------
   No existía antes: lo añadí porque el prompt pedía mostrarlo tras
   el check, y no había ningún aviso de confirmación en la web.

   Para animar la altura sin tocar "height"/"max-height" (que fuerzan
   recalcular el layout de toda la página y van a tirones), usamos el
   truco de "grid-template-rows": pasa de una fila de 0fr a 1fr, y el
   texto de dentro (en un <span>) se recorta con overflow:hidden
   mientras crece. Es la misma idea que "height:auto" animado, pero
   sin el coste de layout. */
.reserva-confirmacion {
  display: grid;
  grid-template-rows: 0fr;
  text-align: center;
  font-size: 0.9rem;
  color: var(--negro);
  opacity: 0;
  transition: opacity 0.5s var(--curva), grid-template-rows 0.5s var(--curva);
}

.reserva-confirmacion > span {
  overflow: hidden;
  min-height: 0;
}

.reserva-confirmacion.esta-visible {
  opacity: 1;
  grid-template-rows: 1fr;
}

/* ---------- VISÍTANOS ---------- */
.visitanos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.visitanos__direccion {
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.visitanos__tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 0.92rem;
}

.visitanos__tabla td {
  padding: 10px 0;
  border-bottom: 1px solid var(--dorado-15);
  color: var(--gris);
}

.visitanos__tabla td:last-child {
  text-align: right;
}

.visitanos__tabla tr.es-hoy td {
  color: var(--dorado);
  font-weight: 500;
}

.visitanos__contacto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.visitanos__redes {
  display: flex;
  gap: 14px;
}

.visitanos__redes a {
  width: 42px;
  height: 42px;
  border: 1px solid var(--dorado-30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--curva), border-color 0.3s var(--curva), color 0.3s var(--curva);
}

.visitanos__redes a:hover {
  background-color: var(--dorado);
  color: var(--negro);
  border-color: var(--dorado);
}

/* El mapa se hizo más discreto: dos tercios de su ancho anterior
   (era 327×245px en móvil y 556×521px en ordenador), manteniendo
   la misma proporción. Va centrado, con el botón "Cómo llegar"
   debajo, del mismo ancho. */
.visitanos__mapa-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 218px;
  margin-inline: auto;
}

.visitanos__mapa {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
}

.visitanos__mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.1);
}

.visitanos__como-llegar {
  width: 100%;
}

@media (min-width: 900px) {
  .visitanos {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .visitanos__mapa-zona {
    /* Ancho fijo (no "max-width"): si se deja que el ancho se
       calcule solo, el iframe del mapa impone su tamaño por
       defecto (300px) en vez del 371px que queremos. También hay
       que anular el "max-width" de móvil, que si no se queda
       recortando el ancho aquí también. */
    max-width: none;
    width: 371px;
    margin-inline: 0;
    justify-self: center;
  }

  .visitanos__mapa {
    aspect-ratio: 556 / 521;
  }
}

/* ---------- SECCIONES MÁS COMPACTAS ----------
   Opiniones, Galería, El salón y Visítanos ocupan menos alto que
   antes (aprox. un 25% menos de espacio arriba/abajo). Reservar
   cita se deja exactamente igual, a propósito: es la sección más
   importante de la página. No se quita ningún texto ni foto, solo
   se acerca todo un poco. Servicios se compactó aparte, más abajo,
   junto a su animación en cascada. */
#opiniones,
#galeria,
#salon,
#visitanos {
  padding: 68px 0; /* antes: 88px (heredado de .seccion) */
}

#opiniones .opiniones {
  gap: 36px; /* antes: 48px (en móvil; en ordenador no se toca) */
}

#galeria .section-cabecera {
  margin-bottom: 42px; /* antes: 56px (heredado de .section-cabecera) */
}

#salon .salon {
  gap: 24px; /* antes: 32px (en móvil; en ordenador no se toca) */
}

#visitanos .visitanos__direccion {
  margin-bottom: 21px; /* antes: 28px */
}

#visitanos .visitanos__tabla {
  margin-bottom: 21px; /* antes: 28px */
}

#visitanos .visitanos__contacto {
  margin-bottom: 18px; /* antes: 24px */
}

/* ---------- PIE DE PÁGINA ---------- */
.pie {
  padding: 56px 0 40px;
  border-top: 1px solid var(--dorado-15);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pie__logo {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
}

.pie__direccion {
  color: var(--gris);
  font-size: 0.85rem;
}

.pie__redes {
  display: flex;
  gap: 18px;
  font-size: 0.82rem;
  color: var(--gris);
}

.pie__copyright {
  font-size: 0.75rem;
  color: var(--gris);
  margin-top: 8px;
}

/* ---------- ANIMACIONES DE SCROLL (aparecer al hacer scroll) ---------- */
[data-animar] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}

[data-animar].esta-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- REDUCIR MOVIMIENTO ----------
   Si la persona tiene activada esta preferencia en su sistema,
   se quitan todas las animaciones (zoom, opiniones, fundidos). */
@media (prefers-reduced-motion: reduce) {
  .portada__foto-item,
  .servicio__foto-item {
    animation: none;
    transition: none;
  }

  .portada__scroll-linea::after {
    animation: none;
  }

  .portada__texto > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  [data-animar] {
    transition: none;
  }

  .servicio {
    opacity: 1;
  }

  .servicio.entra-bajando,
  .servicio.entra-subiendo {
    animation: none;
  }

  /* En escritorio, la foto y el texto de cada servicio se animan
     por separado (ver @media 900px). Aquí se dejan fijos y
     visibles, y sin parallax (eso lo corta js/main.js). */
  .servicio__foto,
  .servicio__texto {
    opacity: 1;
    transform: none;
  }

  .servicio.entra-bajando .servicio__foto,
  .servicio.entra-subiendo .servicio__foto,
  .servicio.entra-bajando .servicio__texto,
  .servicio.entra-subiendo .servicio__texto {
    animation: none;
  }

  .opiniones__tarjeta {
    transition: none;
  }

  .galeria-item {
    transition: none;
  }

  .cabecera::before,
  .cabecera__inner,
  .cabecera__lado a::after,
  .salto-contenido,
  .pildora__link,
  .servicio__enlace,
  .boton {
    transition: none;
  }

  /* Iconos de fondo de "Reservar cita": quietos, sin flotar. */
  .icono-tijeras,
  .icono-peine,
  .icono-secador,
  .icono-brocha {
    animation: none;
  }

  /* Botón "Enviar por WhatsApp" -> check: el cambio es instantáneo,
     sin fundido ni escala (js/main.js pone el check directamente,
     sin esperar). */
  .reserva-enviar__texto,
  .reserva-enviar__check {
    transition: none;
  }

  .reserva-confirmacion {
    transition: none;
  }
}