/* =========================================================
   VANGUARDIA LUCENA - Hoja de estilos principal
   Estilo: elegante, blanco y negro con el rojo de la marca
   ========================================================= */

/* ---------- 1. Variables (colores y medidas reutilizables) ----------
   Si quieres cambiar un color en toda la web, cámbialo solo aquí. */
:root {
  --rojo: #c4161c; /* rojo del logo y de la decoración del salón */
  --rojo-oscuro: #9e1116;
  --negro: #111111;
  --gris-oscuro: #1c1c1c;
  --gris: #8c8c8c; /* gris del logo */
  --texto: #2b2b2b;
  --texto-suave: #6b6b6b;
  --crema: #f7f4f1;
  --blanco: #ffffff;
  --borde: #e6e1dc;

  --fuente-titulos: "Cormorant Garamond", Georgia, serif;
  --fuente-texto: "Montserrat", system-ui, sans-serif;

  --ancho-max: 1200px;
  --alto-cabecera: 120px;
  --margen-lateral: 56px; /* distancia del logo y los iconos al borde */
}

/* ---------- 2. Reset básico ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* desplazamiento suave al pulsar el menú */
}
/* Al pulsar un enlace del menú, la sección queda justo debajo de la
   cabecera fija (si no, la cabecera taparía su parte de arriba) */
section[id] {
  scroll-margin-top: var(--alto-cabecera);
}

body {
  font-family: var(--fuente-texto);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.7;
  font-size: 15px;
}

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

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

h1,
h2,
h3 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-style: italic;
  line-height: 1.1;
}

.container {
  width: min(100% - 48px, var(--ancho-max));
  margin-inline: auto;
}

/* ---------- 3. Elementos reutilizables ---------- */

/* Subtítulo pequeño en mayúsculas y espaciado */
.etiqueta {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rojo);
}

/* Cabecera de sección: título en cursiva + adorno */
.titulo-seccion {
  text-align: center;
  margin-bottom: 60px;
}
.titulo-seccion h2 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  margin-bottom: 12px;
}
.titulo-seccion p {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--texto-suave);
}

/* Adorno: línea – rombo – línea */
.adorno {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 0;
}
.adorno::before,
.adorno::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--rojo);
}
.adorno span {
  width: 8px;
  height: 8px;
  border: 1px solid var(--rojo);
  transform: rotate(45deg);
}

/* Botones con borde (estilo elegante) */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-family: var(--fuente-texto);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.btn-claro {
  color: var(--blanco);
}
.btn-claro:hover {
  background: var(--blanco);
  color: var(--negro);
}
.btn-oscuro {
  color: var(--negro);
}
.btn-oscuro:hover {
  background: var(--negro);
  color: var(--blanco);
}
.btn-rojo {
  background: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco);
}
.btn-rojo:hover {
  background: var(--rojo-oscuro);
  border-color: var(--rojo-oscuro);
}

.icono {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- 4. Logo (recreado con HTML y CSS) ---------- */
.logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.logo-bloques {
  display: flex;
  height: 9px;
  margin-bottom: 9px;
}
.logo-bloques span {
  flex: 1;
}
.logo-bloques span:first-child {
  background: var(--rojo);
}
.logo-bloques span:last-child {
  background: var(--gris);
}
.logo-nombre {
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 1.7rem;
}
.logo-sub {
  font-size: 0.74rem;
  letter-spacing: 0.42em;
  margin-top: 8px;
  opacity: 0.8;
}

/* ---------- 5. Cabecera ----------
   Transparente encima de la portada; negra al hacer scroll
   (la clase "solida" la añade js/main.js). */
.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--blanco);
  transition: background 0.4s;
}
.cabecera.solida {
  background: var(--negro);
}
/* La barra ocupa todo el ancho: logo en la esquina izquierda
   e iconos en la derecha */
.nav {
  display: flex;
  align-items: center;
  height: var(--alto-cabecera);
  padding: 0 var(--margen-lateral);
}
.menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  list-style: none;
}
.menu a {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  position: relative;
  padding: 6px 0;
}
/* Línea roja que aparece debajo al pasar el ratón */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--rojo);
  transition: width 0.3s;
}
.menu a:hover::after,
.menu a.activo::after {
  width: 100%;
}
.nav-redes {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-redes .icono {
  width: 24px;
  height: 24px;
}
.nav-redes a {
  transition: color 0.3s;
}
.nav-redes a:hover {
  color: var(--rojo);
}

/* Botón hamburguesa: solo se ve en pantallas pequeñas */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: inherit;
  cursor: pointer;
}

/* ---------- 6. Portada (hero) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  /* Texto 40% · foto 60%: la foto empieza más a la izquierda */
  grid-template-columns: 2fr 3fr;
  background: var(--negro);
  color: var(--blanco);
}
.hero-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* El margen izquierdo coincide con el del logo */
  padding: calc(var(--alto-cabecera) + 60px) 8% 80px var(--margen-lateral);
}
.hero-texto .etiqueta {
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  margin-bottom: 22px;
}
.hero-lema {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.6rem;
  color: #d9d9d9;
  margin-bottom: 18px;
}
.hero-texto p:not(.hero-lema) {
  max-width: 460px;
  color: #b5b5b5;
  margin-bottom: 44px;
}
.hero-botones {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-imagen {
  position: relative;
  overflow: hidden;
}
.hero-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}
/* Degradado para fundir la foto con el fondo negro */
.hero-imagen::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Funde la foto con el negro de la izquierda y oscurece la parte de
     arriba para que el menú se lea bien sobre fotos claras */
  background:
    linear-gradient(90deg, var(--negro) 0%, transparent 20%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.75) 0%, transparent 28%);
  z-index: 1;
}
/* Difuminado muy leve solo al final de la portada: suaviza el paso
   de la foto a la sección blanca de abajo */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(
    to bottom in oklab,
    transparent,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.15) 60%,
    rgba(255, 255, 255, 0.35)
  );
  z-index: 2;
  pointer-events: none;
}
/* ---------- 7. Secciones ---------- */
.seccion {
  padding: 120px 0;
}
.seccion-crema {
  background: var(--crema);
}
.seccion-negra {
  background: var(--negro);
  color: var(--blanco);
}
.seccion-negra .titulo-seccion p {
  color: #b5b5b5;
}

/* ---------- 8. Nosotros ---------- */
.nosotros-texto {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--texto-suave);
  font-size: 1.05rem;
}
.nosotros-texto p + p {
  margin-top: 18px;
}
.nosotros-texto strong {
  color: var(--texto);
  font-weight: 600;
}

/* ---------- 9. Servicios (mosaico) ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 380px;
  gap: 10px;
}
.mosaico-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: var(--blanco);
  background: var(--gris-oscuro);
}
/* Carrusel: las fotos van en fila y la fila se desliza hacia la izquierda.
   js/main.js cambia la variable --foto (0, 1, 2...) cada pocos segundos. */
.slides {
  position: absolute;
  inset: 0;
  display: flex;
  /* --foto: número de foto · --arrastre: lo que se ha movido el dedo/ratón */
  transform: translateX(calc(var(--foto, 0) * -100% + var(--arrastre, 0px)));
  transition: transform 0.6s ease-in-out;
}
/* Casillas con varias fotos: se pueden arrastrar (lo activa js/main.js) */
.deslizable {
  touch-action: pan-y; /* en móvil: deslizar en horizontal = carrusel; en vertical = bajar por la página */
  user-select: none;
  cursor: grab;
}
.slides img {
  -webkit-user-drag: none; /* que el navegador no "coja" la foto al arrastrar */
  pointer-events: none;
}
/* Mientras se arrastra, las fotos siguen al dedo sin retraso */
.slides.arrastrando {
  transition: none;
}
.deslizable:has(.arrastrando) {
  cursor: grabbing;
}
.slides img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
/* Oscurece la parte de abajo para que se lea el texto */
.mosaico-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, transparent 60%);
  z-index: 1;
}
.mosaico-item > *:not(.slides) {
  position: relative;
  z-index: 2;
}
/* Para fotos cuyo motivo está arriba (no se recorta la parte superior) */
.mosaico-item img.arriba {
  object-position: top;
}
/* Cartel vertical (Jorge de la Garza): se encuadra la cara, que está en la
   parte de arriba; el texto queda tapado por el oscurecido y el título */
.mosaico-item img.cartel {
  object-position: center 20%;
}
.mosaico-item:hover img {
  transform: scale(1.06);
}
.mosaico-item h3 {
  font-size: 2rem;
  margin-bottom: 6px;
}
.mosaico-item p {
  font-size: 0.85rem;
  color: #dcdcdc;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.5s,
    opacity 0.5s;
}
/* La descripción aparece al pasar el ratón */
.mosaico-item:hover p {
  max-height: 120px;
  opacity: 1;
}
.mosaico-grande {
  grid-row: span 2;
}

/* Puntitos del carrusel: indican la foto actual y se pueden pulsar */
.puntos {
  position: absolute !important;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 4px;
}
.puntos button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.puntos button::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.3s;
}
.puntos button.activo::after {
  background: var(--blanco);
}

/* Flechas del carrusel: aparecen al pasar el ratón por la casilla */
.flecha {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.35);
  color: var(--blanco);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.3s,
    background 0.3s;
}
.flecha-izq {
  left: 16px;
}
.flecha-der {
  right: 16px;
}
.mosaico-item:hover .flecha,
.carrusel:hover .flecha {
  opacity: 1;
}
.flecha:hover {
  background: var(--rojo);
  border-color: var(--rojo);
}

/* ---------- 10. Franja "Pide tu cita" ---------- */
.franja-cita {
  position: relative;
  padding: 110px 0;
  background: url("../img/local-estetica.jpg") center / cover;
}
.franja-cita::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
}
.franja-cita .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}
.cita-texto {
  background: rgba(255, 255, 255, 0.94);
  padding: 50px 56px;
}
.cita-texto h2 {
  font-size: 2.8rem;
  color: var(--rojo);
  margin-bottom: 14px;
}
.cita-texto p {
  color: var(--texto-suave);
}
.cita-botones {
  background: var(--rojo);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 40px;
}
.cita-botones .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ---------- 11. Bloque dividido (imagen + texto) ---------- */
.dividido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}
/* La foto se ajusta a la altura del bloque (no lo estira si es vertical) */
.dividido-imagen {
  position: relative;
  overflow: hidden;
}
.dividido-imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dividido-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 10%;
}
.dividido-texto h2 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  margin-bottom: 16px;
}
.dividido-texto .etiqueta {
  margin-bottom: 30px;
}
.dividido-texto p {
  color: var(--texto-suave);
  max-width: 520px;
  margin-bottom: 18px;
}
.dividido-texto .btn {
  margin-top: 20px;
}

/* Variante en negro del bloque dividido (Detoxbody), para que destaque */
.dividido-negro {
  background: var(--negro);
  color: var(--blanco);
}
.dividido-negro .dividido-texto p {
  color: #b5b5b5;
}
.dividido-negro .claves li {
  color: var(--blanco);
}

/* Botón + enlace a la web oficial (Detoxbody) */
.botones-detox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}
.botones-detox .btn {
  margin-top: 0;
}
.enlace-externo {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b5b5b5;
  border-bottom: 1px solid transparent;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.enlace-externo:hover {
  color: var(--blanco);
  border-bottom-color: var(--rojo);
}

/* Carrusel dentro de un bloque dividido: las fotos van en fila, no superpuestas */
.dividido-imagen .slides img {
  position: static;
}
.dividido-imagen:hover .flecha {
  opacity: 1;
}

/* Lista de palabras clave separadas por un punto rojo (diagnóstico capilar) */
.claves {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  list-style: none;
  margin: 10px 0 8px;
}
.claves li {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto);
}
.claves li + li::before {
  content: "·";
  color: var(--rojo);
  margin-right: 22px;
}

/* ---------- 12. Marcas ---------- */
.marcas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 64px;
  padding: 50px 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  margin-bottom: 56px;
}
.marca {
  white-space: nowrap;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #3a3a3a;
  transition: color 0.3s;
}
.marca:hover {
  color: var(--rojo);
}
.centrado {
  text-align: center;
}

/* ---------- 13. Galería del salón ----------
   Rejilla de 4 columnas: "alta" ocupa dos filas y "ancha" dos columnas */
.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 10px;
}
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}
.galeria img:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}
.galeria .alta {
  grid-row: span 2;
}
.galeria .ancha {
  grid-column: span 2;
}

/* ---------- 14. Opiniones ---------- */
/* Flex con "wrap": 3 reseñas por fila y la última fila queda centrada */
.opiniones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.opinion {
  flex: 0 1 calc((100% - 60px) / 3);
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  padding: 40px 34px;
}
/* Empuja el nombre al final para que todas las tarjetas lo tengan a la misma altura */
.opinion .autor {
  margin-top: auto;
  padding-top: 22px;
}
.opinion .estrellas {
  color: #e0a526;
  letter-spacing: 3px;
  margin-bottom: 18px;
}
.opinion p {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #e5e5e5;
}
.opinion .autor {
  font-family: var(--fuente-texto);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- 15. Contacto ---------- */
.contacto {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 70px;
  align-items: stretch;
}
.contacto h2 {
  font-size: 3rem;
  margin: 10px 0 28px;
}
.datos {
  list-style: none;
  margin-bottom: 40px;
}
.datos li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
}
.datos .icono {
  color: var(--rojo);
}
.datos a:hover {
  color: var(--rojo);
}
.contacto-botones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.mapa {
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
  filter: grayscale(100%);
}

/* ---------- 16. Pie de página ---------- */
.pie {
  background: var(--negro);
  color: #cfcfcf;
  padding: 90px 0 30px;
  font-size: 0.9rem;
}
.pie-columnas {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 50px;
  margin-bottom: 70px;
}
.pie .logo {
  color: var(--blanco);
  margin-bottom: 24px;
}
/* En el pie, el logo se mantiene algo más pequeño que en la cabecera */
.pie .logo-nombre {
  font-size: 1.3rem;
}
.pie .logo-sub {
  font-size: 0.6rem;
}
.pie h4 {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 24px;
}
.pie ul {
  list-style: none;
}
.pie li {
  margin-bottom: 10px;
}
.pie a:hover {
  color: var(--blanco);
}
/* Horario con doble borde */
.pie-horario {
  border: 1px solid #555;
  outline: 1px solid #555;
  outline-offset: 6px;
  padding: 30px;
}
.pie-horario li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.pie-horario li span:last-child {
  color: var(--blanco);
  text-align: right;
}
.pie-legal {
  border-top: 1px solid #2e2e2e;
  padding-top: 26px;
  text-align: center;
  color: #888;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

/* ---------- 17. Botón fijo de WhatsApp ---------- */

/* Botón redondo de WhatsApp (abajo a la derecha) */
.whatsapp-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: var(--blanco);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 200;
  transition: transform 0.2s;
}
.whatsapp-flotante:hover {
  transform: scale(1.08);
}
.whatsapp-flotante svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* ---------- 18. Página de productos ---------- */
.cabecera-pagina {
  background-color: var(--negro);
  color: var(--blanco);
  text-align: center;
  padding: calc(var(--alto-cabecera) + 90px) 0 90px;
}
.cabecera-pagina h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  margin: 16px 0;
}
.cabecera-pagina p {
  max-width: 560px;
  margin: 0 auto;
  color: #b5b5b5;
}
/* Filtros por necesidad (Caída, Rubios...) */
.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  margin-bottom: 56px;
}
.filtros button {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 6px 0;
  font-family: var(--fuente-texto);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
  cursor: pointer;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.filtros button:hover {
  color: var(--texto);
}
.filtros button.activo {
  color: var(--rojo);
  border-bottom-color: var(--rojo);
}

/* Tarjetas de gama: foto, nombre, para quién, productos estrella y enlace */
.gamas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.gama {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  background: var(--blanco);
  transition: border-color 0.3s;
}
.gama:hover {
  border-color: var(--rojo);
}
.gama[hidden] {
  display: none;
}
.gama img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #ececec;
}
.gama-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 34px;
}
.gama h3 {
  font-size: 2rem;
  margin-bottom: 8px;
}
.gama p {
  color: var(--texto-suave);
  margin-bottom: 18px;
}
.gama ul {
  list-style: none;
  margin-bottom: 24px;
}
.gama li {
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--borde);
}
.gama-texto a {
  margin-top: auto; /* el enlace siempre abajo, aunque el texto sea más corto */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rojo);
}
.gama-texto a:hover {
  color: var(--rojo-oscuro);
}

/* Bloque de herramientas (ghd): texto a la izquierda, carrusel a la derecha */
.herramientas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.herramientas h2 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  margin: 12px 0 24px;
}
.herramientas p {
  color: var(--texto-suave);
  margin-bottom: 18px;
}
.herramientas .btn {
  margin-top: 14px;
}
.carrusel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--gris-oscuro);
}
/* Carrusel de producto: fondo blanco y la foto entera (sin recortar),
   con el nombre del modelo debajo */
.carrusel-producto {
  background: var(--blanco);
  border: 1px solid var(--borde);
}
.carrusel-producto figure {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.carrusel-producto img {
  flex: 0 1 auto;
  height: auto;
  max-height: 80%;
  object-fit: contain;
}
.carrusel-producto figcaption {
  margin-top: 24px;
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.8rem;
}
/* Flechas oscuras sobre fondo blanco */
.carrusel-producto .flecha {
  color: var(--negro);
  border-color: var(--borde);
  background: rgba(255, 255, 255, 0.8);
}
.carrusel-producto .flecha:hover {
  color: var(--blanco);
}
.carrusel-producto .puntos button::after {
  background: #ccc;
}
.carrusel-producto .puntos button.activo::after {
  background: var(--rojo);
}

/* ---------- 19. Tablet y móvil ----------
   Hasta 1000px: tablet y móvil (menú hamburguesa, todo en una columna).
   Hasta 600px: ajustes extra para móvil (tamaños y espacios más compactos). */
@media (max-width: 1000px) {
  :root {
    --alto-cabecera: 80px;
    --margen-lateral: 24px;
  }

  /* Cabecera: logo más pequeño y botón hamburguesa a la derecha */
  .logo-bloques {
    height: 6px;
    margin-bottom: 7px;
  }
  .logo-nombre {
    font-size: 1.25rem;
  }
  .logo-sub {
    font-size: 0.56rem;
  }
  .menu,
  .nav-redes {
    display: none;
  }
  .menu-toggle {
    display: block;
    margin-left: auto;
    padding: 8px 0 8px 16px;
  }
  .menu.abierto {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--alto-cabecera);
    left: 0;
    right: 0;
    background: var(--negro);
    padding: 12px 0 28px;
    gap: 0;
  }
  .menu.abierto a {
    display: block;
    padding: 14px var(--margen-lateral);
    font-size: 1.05rem;
  }
  /* Con el menú abierto, la cabecera también se pone negra */
  .cabecera:has(.menu.abierto) {
    background: var(--negro);
  }

  /* Portada: la foto pasa a ser el fondo, con el texto encima */
  .hero {
    grid-template-columns: 1fr;
    min-height: 100svh;
  }
  .hero-imagen {
    position: absolute;
    inset: 0;
  }
  .hero-imagen img {
    object-position: 56% center; /* la cara queda a la derecha, el texto a la izquierda */
  }
  .hero-imagen::before {
    background: linear-gradient(
      90deg,
      rgba(17, 17, 17, 0.88) 0%,
      rgba(17, 17, 17, 0.7) 60%,
      rgba(17, 17, 17, 0.5) 100%
    );
  }
  .hero-texto {
    position: relative;
    z-index: 3;
    padding: calc(var(--alto-cabecera) + 40px) var(--margen-lateral) 120px;
  }

  /* Secciones más compactas */
  .seccion {
    padding: 80px 0;
  }
  .titulo-seccion {
    margin-bottom: 40px;
  }

  /* Bloques de foto + texto: la foto siempre arriba */
  .dividido {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .dividido-imagen {
    order: -1;
    aspect-ratio: 4 / 3;
  }
  .dividido-texto {
    padding: 56px var(--margen-lateral) 64px;
  }

  /* Servicios: una columna */
  .mosaico {
    grid-template-columns: 1fr;
    grid-auto-rows: 340px;
  }
  .mosaico-grande {
    grid-row: span 1;
  }

  /* Pide tu cita */
  .franja-cita {
    padding: 64px 0;
  }
  .franja-cita .container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cita-texto {
    padding: 36px 28px;
  }
  .cita-botones {
    padding: 28px;
  }

  /* Galería: 2 columnas, rellenando huecos */
  .galeria {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
    grid-auto-flow: dense;
  }

  .opiniones,
  .herramientas,
  .contacto {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .opinion {
    flex-basis: 100%;
    padding: 32px 26px;
  }
  .mapa {
    min-height: 320px;
  }

  /* Productos: 2 columnas en tablet */
  .gamas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .filtros {
    gap: 8px 22px;
    margin-bottom: 40px;
  }
  .cabecera-pagina {
    padding: calc(var(--alto-cabecera) + 60px) 0 64px;
  }

  /* Pie */
  .pie {
    padding: 64px 0 24px;
  }
  .pie-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
    margin-bottom: 48px;
  }
}

/* En pantallas táctiles no existe "pasar el ratón": mostramos siempre
   las flechas de los carruseles y la descripción de los servicios */
@media (hover: none) {
  .flecha {
    opacity: 1;
  }
  .mosaico-item p {
    max-height: none;
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .container {
    width: min(100% - 40px, var(--ancho-max));
  }
  .hero h1 {
    font-size: 3.4rem;
  }
  .hero-lema {
    font-size: 1.35rem;
  }
  .hero-botones .btn {
    flex: 1 1 100%;
    text-align: center;
  }
  .gamas {
    grid-template-columns: 1fr;
  }
  .gama img {
    aspect-ratio: 1;
  }
  .claves {
    gap: 6px 14px;
  }
  .claves li + li::before {
    margin-right: 14px;
  }
  .contacto h2 {
    font-size: 2.4rem;
  }
  .datos li {
    font-size: 0.9rem;
    word-break: break-word;
  }
  .pie-columnas {
    grid-template-columns: 1fr;
  }
  .whatsapp-flotante {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}