/* ═══════════════════════════════════════════════════════════════════
   Dream Nails Lleida — hoja de estilos

   1. Tipografías        6. Portada           11. Pie
   2. Variables          7. El salón          12. WhatsApp flotante
   3. Base               8. Servicios         13. Menú del móvil
   4. Utilidades         9. Trabajos          14. Visor de fotos
   5. Componentes       10. Opiniones y      15. Páginas legales
                            contacto          16. Movimiento reducido
   ═══════════════════════════════════════════════════════════════════ */


/* ═════════════ 1. Tipografías ═════════════
   Las dos salen del propio logo: la «DN» es una Bodoni y el «SALÓN DE
   MANICURA» una sans geométrica. Alojadas aquí, sin pedir nada a Google. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ═════════════ 2. Variables ═════════════ */
:root {
  color-scheme: light;

  --blanco: #ffffff;
  --marfil: #faf6f3;
  --nude: #f2e8e4;
  --rosa: #e8d2cc;
  --tinta: #1c1719;
  --tinta-suave: #463e41;
  --gris: #6c6266;
  --linea: #e6dcd8;
  --vino: #7b2b3a;

  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --cabecera: 64px;
  --ancho: 1240px;
  --margen: clamp(20px, 5vw, 56px);
  --seccion: clamp(88px, 11vw, 160px);

  --curva: cubic-bezier(0.16, 1, 0.3, 1);          /* salida suave: entradas y hover */
  --curva-io: cubic-bezier(0.65, 0, 0.35, 1);      /* ida y vuelta: el indicador de pestañas */
  --rapido: 180ms;
  --medio: 420ms;
}

@media (min-width: 960px) {
  :root { --cabecera: 76px; }
}


/* ═════════════ 3. Base ═════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Con un diálogo abierto (menú o visor) la página de detrás no se mueve. */
html:has(dialog[open]) {
  overflow: hidden;
}

body {
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

img {
  height: auto;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--rosa);
  color: var(--tinta);
}

:focus-visible {
  outline: 2px solid var(--vino);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Las anclas del menú dejan la sección justo debajo de la cabecera fija. */
section[id] {
  scroll-margin-top: var(--cabecera);
}

/* Lenis (desplazamiento suave con ratón): sus reglas recomendadas. */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}


/* ═════════════ 4. Utilidades ═════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.iconos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.saltar {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: 0.875rem;
  transform: translateY(-160%);
  transition: transform var(--medio) var(--curva);
}

.saltar:focus {
  transform: none;
}


/* ═════════════ 5. Componentes ═════════════ */

/* Rótulo pequeño en mayúsculas, como el «SALÓN DE MANICURA» del logo. */
.etiqueta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris);
}

.etiqueta::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.titulo {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.45rem + 3.3vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.titulo em,
.portada__titulo em {
  font-style: italic;
  color: var(--vino);
}

.seccion__cabecera {
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.seccion__intro {
  margin-top: 20px;
  max-width: 52ch;
  color: var(--gris);
}

/* Botones: un barrido de color vino los rellena al pasar el ratón. */
.boton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 1.7em;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--medio) var(--curva),
    border-color var(--medio) var(--curva),
    transform var(--rapido) var(--curva);
}

.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vino);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--medio) var(--curva);
}

.boton:active {
  transform: scale(0.97);
}

.boton--oscuro {
  background: var(--tinta);
  color: var(--blanco);
}

.boton--linea {
  border: 1px solid var(--tinta);
}

.boton--claro {
  background: var(--blanco);
}

@media (hover: hover) {
  .boton:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .boton--linea:hover,
  .boton--claro:hover {
    color: var(--blanco);
    border-color: var(--vino);
  }
}

/* Enlace de texto subrayado. */
.enlace {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color var(--rapido), text-underline-offset var(--medio) var(--curva);
}

@media (hover: hover) {
  .enlace:hover {
    color: var(--vino);
    text-underline-offset: 0.45em;
  }
}

.estrellas {
  display: flex;
  gap: 3px;
  color: var(--vino);
}

.estrellas svg {
  width: 15px;
  height: 15px;
}

/* ─── Cabecera ─── */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--cabecera);
  background: rgb(255 255 255 / 0.94);
  transition: box-shadow var(--medio) var(--curva);
}

@supports (backdrop-filter: blur(12px)) {
  .cabecera {
    background: rgb(255 255 255 / 0.8);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}

.cabecera.es-desplazada {
  box-shadow: 0 1px 0 var(--linea);
}

.cabecera__interior {
  height: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
  display: flex;
  align-items: center;
  gap: 16px;
}

.cabecera__logo img {
  width: auto;
  height: 42px;
}

.cabecera__nav {
  display: none;
}

.cabecera__nav ul {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
}

.cabecera__nav a {
  position: relative;
  display: block;
  padding-block: 8px;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cabecera__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--medio) var(--curva);
}

.cabecera__nav a[aria-current]::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .cabecera__nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.cabecera__reservar {
  margin-inline-start: auto;
  min-height: 40px;
  padding-inline: 1.25em;
}

.cabecera__cita {
  display: none;
}

.cabecera__menu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
}

.cabecera__hamburguesa {
  width: 22px;
  height: 9px;
  border-block: 1.5px solid currentColor;
}

@media (min-width: 540px) {
  .cabecera__cita { display: inline; }
}

@media (min-width: 960px) {
  .cabecera__interior { gap: clamp(24px, 3vw, 44px); }
  .cabecera__logo img { height: 54px; }
}

/* Los cinco enlaces solo caben en una línea a partir de 1280 px; por debajo
   se usa el botón de menú. */
@media (min-width: 1280px) {
  .cabecera__nav { display: block; margin-inline-start: auto; }
  .cabecera__nav + .cabecera__reservar { margin-inline-start: 0; }
  .cabecera__menu { display: none; }
}


/* ═════════════ 6. Portada ═════════════
   La sección mide varias pantallas y su escena se queda fija (sticky):
   ese recorrido es el que abre el abanico. */
.portada {
  position: relative;
  height: 220svh;
}

.portada__escena {
  position: sticky;
  top: 0;
  height: 100svh;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding: calc(var(--cabecera) + 20px) var(--margen) 20px;
  display: flex;
  flex-direction: column;
}

.portada__etiqueta {
  margin-bottom: 18px;
}

.portada__titulo {
  font-family: var(--serif);
  font-size: clamp(2.6rem, min(1.4rem + 5.4vw, 10.5svh), 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

/* Cada línea del titular sube desde detrás de su propio borde inferior. */
.portada__linea {
  display: block;
  padding-bottom: 0.1em;
  clip-path: inset(-1em -1em 0 -1em);
}

.portada__linea > span {
  display: inline-block;
  animation: subir 1.1s var(--curva) 0.1s both;
}

.portada__linea:nth-child(2) > span { animation-delay: 0.19s; }
.portada__linea:nth-child(3) > span { animation-delay: 0.28s; }

.portada__entradilla {
  max-width: 36ch;
  margin-top: 22px;
  color: var(--tinta-suave);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.valoracion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--gris);
  transition: color var(--rapido);
}

.valoracion strong {
  color: var(--tinta);
  font-weight: 500;
}

@media (hover: hover) {
  .valoracion:hover { color: var(--tinta); }
}

.portada__valoracion {
  margin-top: 22px;
  align-self: flex-start;
}

.portada__etiqueta,
.portada__entradilla,
.portada__acciones,
.portada__valoracion {
  animation: aparecer 0.9s var(--curva) both;
}

.portada__etiqueta { animation-delay: 0.05s; }
.portada__entradilla { animation-delay: 0.42s; }
.portada__acciones { animation-delay: 0.52s; }
.portada__valoracion { animation-delay: 0.62s; }

/* El abanico ocupa el hueco que deja el texto. La imagen y el lienzo llenan
   ese hueco y encajan dentro el cuadrado del fotograma (object-fit), pegado
   a la derecha: así nunca se deforma ni se sale, sea cual sea la pantalla. */
.portada__abanico {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 16px;
  animation: aparecer-abanico 1.4s var(--curva) 0.2s both;
}

.portada__poster,
.portada__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.portada__abanico.con-lienzo .portada__poster {
  visibility: hidden;
}

.portada__pista {
  display: none;
}

/* Texto a la izquierda y abanico a la derecha: en pantalla ancha y también
   en pantallas bajas y apaisadas (móvil tumbado, ventanas pequeñas), donde
   uno debajo del otro no cabrían en la escena fija. */
@media (min-width: 960px), (orientation: landscape) and (max-height: 640px) {
  .portada {
    height: 240svh;
  }

  .portada__escena {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
    padding-bottom: 32px;
  }

  .portada__texto {
    grid-area: 1 / 1;
  }

  .portada__abanico {
    grid-area: 1 / 2;
    align-self: stretch;
    margin: 0;
  }

  .portada__pista {
    position: absolute;
    left: var(--margen);
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gris);
    transition: opacity var(--medio) var(--curva);
    animation: aparecer 0.9s var(--curva) 1.1s both;
  }

  .portada__pista::before {
    content: "";
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, var(--tinta) 50%, var(--linea) 50%) 0 0 / 200% 100%;
    animation: pista 2.4s var(--curva-io) infinite;
  }

  .portada.ha-empezado .portada__pista {
    opacity: 0;
  }
}

/* Pantallas bajas: sin entradilla y con márgenes más apretados, para que el
   texto quepa entero en la escena fija y quede sitio para el abanico. */
@media (max-width: 959px) and (max-height: 700px), (max-height: 640px) {
  .portada__entradilla { display: none; }
}

@media (max-height: 640px) {
  .portada__escena {
    padding-top: calc(var(--cabecera) + 12px);
    padding-bottom: 12px;
  }

  .portada__etiqueta { margin-bottom: 10px; }
  .portada__titulo { font-size: clamp(2rem, 9.5svh, 4rem); }
  .portada__acciones { margin-top: 16px; }
  .portada__acciones .boton { min-height: 44px; padding-inline: 1.3em; }
  .portada__valoracion { margin-top: 14px; }
  .portada__pista { display: none; }
}

@keyframes subir {
  from { transform: translateY(105%); }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes aparecer-abanico {
  from { opacity: 0; transform: translateX(3%); }
}

@keyframes pista {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Con «reducir movimiento» activado no hay recorrido: la portada es normal y
   js/abanico.js pinta directamente el abanico abierto. */
@media (prefers-reduced-motion: reduce) {
  .portada {
    height: auto;
  }

  .portada__escena {
    position: relative;
    height: auto;
    min-height: 100svh;
  }

  .portada__abanico {
    min-height: min(90vw, 70svh);
  }

  .portada__pista {
    display: none;
  }
}


/* ═════════════ 7. El salón ═════════════ */
.salon {
  padding-block: var(--seccion);
  background: var(--marfil);
}

.salon__rejilla {
  display: grid;
  gap: clamp(48px, 7vw, 104px);
}

/* Marco en forma de arco: la silueta de una uña almendrada. */
.telon {
  overflow: hidden;
  border-radius: 999px 999px 20px 20px;
}

.telon__marco {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: inherit;
  background: var(--nude);
}

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

.salon__foto {
  max-width: 460px;
}

.salon__texto > p:not(.etiqueta) {
  max-width: 56ch;
  margin-top: 20px;
  color: var(--tinta-suave);
}

.salon__texto > .salon__entrada {
  margin-top: 28px;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  color: var(--tinta);
}

.equipo {
  display: grid;
  gap: 28px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--linea);
}

.equipo__persona {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.equipo__inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--blanco);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--vino);
}

.equipo__nombre {
  font-family: var(--serif);
  font-size: 1.5rem;
}

.equipo__cita {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

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

.higiene {
  margin-top: 44px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  background: var(--blanco);
}

.higiene__titulo {
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: 1.375rem;
}

.higiene__lista {
  display: grid;
  gap: 10px 28px;
}

.higiene__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
}

.higiene__lista svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--vino);
}

@media (min-width: 540px) {
  .higiene__lista { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .equipo { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .salon__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  /* La foto acompaña mientras se lee la columna de texto. */
  .salon__foto {
    position: sticky;
    top: calc(var(--cabecera) + 40px);
  }
}


/* ═════════════ 8. Servicios ═════════════ */
.servicios {
  padding-block: var(--seccion);
}

.pestanas__lista {
  position: relative;
  display: flex;
  gap: 4px;
  margin-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  scrollbar-width: none;
}

.pestanas__lista::-webkit-scrollbar {
  display: none;
}

.pestanas__boton {
  flex: none;
  padding: 14px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gris);
  transition: color var(--rapido);
}

.pestanas__boton[aria-selected="true"] {
  color: var(--tinta);
}

@media (hover: hover) {
  .pestanas__boton:hover { color: var(--tinta); }
}

/* El indicador es una raya de 1 px que se estira (scaleX) y se desplaza
   (translateX) hasta la pestaña activa: solo transform, sin recalcular
   la página. js/main.js le pasa la posición y el ancho. */
.pestanas__indicador {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 1px;
  height: 2px;
  background: var(--vino);
  transform-origin: left;
  transform: translateX(var(--x, 0)) scaleX(var(--ancho-pestana, 0));
  transition: transform var(--medio) var(--curva-io);
}

.pestanas__panel[hidden] {
  display: none;
}

.pestanas__panel:focus-visible {
  outline-offset: 12px;
}

.pestanas__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pestanas__nota {
  margin-bottom: 32px;
  color: var(--gris);
}

.grupo + .grupo {
  margin-top: 48px;
}

.grupo__titulo {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vino);
}

.grupo__nota {
  max-width: 60ch;
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--gris);
}

.carta {
  margin-top: 6px;
}

.carta__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 2px;
  padding-block: 18px;
  border-bottom: 1px solid var(--linea);
}

.carta--compacta .carta__fila {
  padding-block: 12px;
}

.carta__nombre,
.carta__precio {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.35;
}

.carta__precio {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.carta__desc {
  grid-column: 1;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gris);
}

.carta__tiempo {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--gris);
}

.carta__popular {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--nude);
  color: var(--vino);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  vertical-align: 0.25em;
  white-space: nowrap;
}

.servicios__reserva {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: var(--marfil);
}

.servicios__reserva-texto {
  max-width: 24ch;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.2;
}

.servicios__reserva-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

@media (min-width: 960px) {
  /* En pantalla ancha la carta va a dos columnas, como un menú impreso. */
  .pestanas__panel {
    columns: 2;
    column-gap: clamp(48px, 6vw, 96px);
  }

  .pestanas__nota {
    column-span: all;
  }

  /* El espacio va debajo de cada grupo y no encima: así el primero de cada
     columna arranca a la misma altura que el de la otra. */
  .grupo {
    break-inside: avoid;
    padding-bottom: 48px;
  }

  .grupo + .grupo {
    margin-top: 0;
  }
}


/* ═════════════ 9. Trabajos ═════════════ */
.trabajos {
  padding-block: var(--seccion);
  background: var(--marfil);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.filtros__boton {
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  font-size: 0.875rem;
  transition:
    background-color var(--rapido),
    color var(--rapido),
    border-color var(--rapido);
}

.filtros__boton span {
  margin-left: 4px;
  font-size: 0.8125rem;
  color: var(--gris);
  transition: color var(--rapido);
}

.filtros__boton[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
}

.filtros__boton[aria-pressed="true"] span {
  color: rgb(255 255 255 / 0.6);
}

@media (hover: hover) {
  .filtros__boton:hover { border-color: var(--tinta); }
}

/* Mosaico en columnas: cada foto conserva su proporción, sin recortes. */
.galeria {
  columns: 2;
  column-gap: 10px;
}

.galeria__item {
  break-inside: avoid;
  margin-bottom: 10px;
  overflow: clip;
  border-radius: 14px;
}

.galeria__item[hidden] {
  display: none;
}

.galeria__enlace {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--nude);
  cursor: zoom-in;
}

.galeria__enlace img {
  width: 100%;
  transition: transform 1.2s var(--curva);
}

.galeria__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(28 23 25 / 0.28), transparent 50%);
  opacity: 0;
  transition: opacity var(--medio) var(--curva);
}

@media (hover: hover) {
  .galeria__enlace:hover img { transform: scale(1.05); }
  .galeria__enlace:hover::after { opacity: 1; }
}

.trabajos__mas {
  margin-top: 36px;
  text-align: center;
}

@media (min-width: 720px) {
  .galeria { columns: 3; column-gap: 16px; }
  .galeria__item { margin-bottom: 16px; }
}

@media (min-width: 1280px) {
  .galeria { columns: 4; column-gap: 20px; }
  .galeria__item { margin-bottom: 20px; }
}


/* ═════════════ 10. Opiniones y contacto ═════════════ */
.opiniones {
  padding-block: var(--seccion);
}

/* En el móvil las reseñas se pasan con el dedo; desde tableta, rejilla. */
.resenas {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-inline: calc(-1 * var(--margen));
  padding: 4px var(--margen) 12px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.resenas::-webkit-scrollbar {
  display: none;
}

.resena {
  flex: 0 0 min(82vw, 340px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: var(--blanco);
  scroll-snap-align: start;
}

.resena__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--nude);
}

.resena__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}

.resena__texto {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.45;
}

.resena__autora {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 500;
}

.resena__autora time {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--gris);
}

.resena__servicio {
  font-size: 0.8125rem;
  color: var(--gris);
}

.opiniones__mas {
  margin-top: 36px;
  text-align: center;
}

/* Desde tableta, mosaico en columnas: cada tarjeta mide lo que su texto,
   sin huecos vacíos debajo de las reseñas cortas. */
@media (min-width: 720px) {
  .resenas {
    display: block;
    columns: 2;
    column-gap: 20px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .resena {
    break-inside: avoid;
    margin-bottom: 20px;
  }
}

@media (min-width: 1280px) {
  .resenas { columns: 4; }
}

/* ─── Contacto ─── */
.contacto {
  padding-block: var(--seccion);
  background: var(--marfil);
}

.contacto__rejilla {
  display: grid;
  gap: 56px;
}

.contacto__bloques {
  display: grid;
  gap: 32px;
  margin-top: 44px;
}

.contacto__titulo {
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris);
}

.contacto__direccion {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.4;
}

.horario {
  border-collapse: collapse;
}

.horario th {
  padding: 5px 28px 5px 0;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.horario td {
  padding-block: 5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.horario tr.es-hoy {
  font-weight: 500;
}

/* Va en su propia línea, debajo del día: así la tabla no se ensancha. */
.horario__hoy {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.contacto__lista a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 6px;
  transition: color var(--rapido);
}

.contacto__lista svg {
  width: 20px;
  height: 20px;
  color: var(--vino);
}

@media (hover: hover) {
  .contacto__lista a:hover { color: var(--vino); }
}

.contacto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

/* Portada del mapa: se ve hasta que alguien pide cargar el de Google. */
.mapa {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--nude);
}

.mapa__portada {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  background: repeating-radial-gradient(circle at 50% 44%, transparent 0 44px, rgb(123 43 58 / 0.07) 44px 45px);
}

.mapa__pin {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  color: var(--vino);
}

.mapa__calle {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  line-height: 1.2;
}

.mapa__ciudad {
  margin: 4px 0 26px;
  color: var(--gris);
}

.mapa__aviso {
  max-width: 34ch;
  margin-top: 18px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--gris);
}

.mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mapa.con-mapa .mapa__portada {
  display: none;
}

@media (min-width: 540px) {
  .contacto__bloques { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .contacto__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(56px, 7vw, 104px);
  }

  .mapa {
    min-height: 100%;
  }
}


/* ═════════════ 11. Pie ═════════════ */
.pie {
  padding-block: 80px 28px;
  background: var(--tinta);
  color: rgb(255 255 255 / 0.8);
  font-size: 0.9375rem;
}

.pie__rejilla {
  display: grid;
  gap: 40px;
}

.pie__logo {
  width: 210px;
  margin-bottom: 18px;
  filter: invert(1);   /* el logo es tinta negra sobre transparente: invertido, queda en blanco */
}

.pie__titulo {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
}

.pie__lista li + li {
  margin-top: 6px;
}

.pie a {
  transition: color var(--rapido);
}

@media (hover: hover) {
  .pie a:hover { color: var(--blanco); }
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.55);
}

.pie__legal ul {
  display: flex;
  gap: 24px;
}

/* En el móvil el botón flotante de WhatsApp queda abajo a la derecha:
   se deja sitio para que no tape los enlaces legales. */
@media (max-width: 719px) {
  .pie { padding-bottom: 100px; }
}

@media (min-width: 720px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .pie__rejilla { grid-template-columns: 1.5fr 1fr 1.2fr 1fr; }
}


/* ═════════════ 12. WhatsApp flotante ═════════════
   Aparece al dejar atrás la portada (la clase la pone js/main.js). */
.whatsapp {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgb(255 255 255 / 0.22);   /* marca el círculo sobre el pie oscuro */
  border-radius: 50%;
  background: var(--tinta);
  color: var(--blanco);
  box-shadow: 0 12px 32px -12px rgb(28 23 25 / 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
  transition:
    opacity var(--medio) var(--curva),
    transform var(--medio) var(--curva),
    visibility 0s linear var(--medio),
    background-color var(--rapido);
}

.whatsapp svg {
  width: 28px;
  height: 28px;
}

/* Un latido suave cada pocos segundos, para que se vea sin molestar. */
.whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--tinta);
  opacity: 0;
  animation: latido 6s var(--curva) 3s infinite;
}

.whatsapp.es-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (hover: hover) {
  .whatsapp:hover { background: var(--vino); }
}

@keyframes latido {
  0% { opacity: 0.5; transform: scale(1); }
  22%, 100% { opacity: 0; transform: scale(1.55); }
}


/* ═════════════ 13. Menú del móvil ═════════════ */
.menu-movil {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 var(--margen) 32px;
  border: 0;
  background: var(--blanco);
  color: var(--tinta);
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.35s var(--curva),
    transform 0.35s var(--curva),
    overlay 0.35s allow-discrete,
    display 0.35s allow-discrete;
}

.menu-movil[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

@starting-style {
  .menu-movil[open] {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.menu-movil::backdrop {
  background: transparent;
}

.menu-movil__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cabecera);
}

.menu-movil__barra img {
  width: auto;
  height: 38px;
}

.menu-movil__cerrar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
}

.menu-movil__cerrar svg {
  width: 26px;
  height: 26px;
}

.menu-movil__nav {
  flex: 1;
  display: flex;
  align-items: center;
}

.menu-movil__nav a {
  display: block;
  padding-block: 6px;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 9vw, 3rem);
  line-height: 1.2;
}

.menu-movil[open] .menu-movil__nav li {
  animation: aparecer 0.6s var(--curva) both;
}

.menu-movil[open] .menu-movil__nav li:nth-child(2) { animation-delay: 0.05s; }
.menu-movil[open] .menu-movil__nav li:nth-child(3) { animation-delay: 0.1s; }
.menu-movil[open] .menu-movil__nav li:nth-child(4) { animation-delay: 0.15s; }
.menu-movil[open] .menu-movil__nav li:nth-child(5) { animation-delay: 0.2s; }

.menu-movil__pie {
  display: grid;
  gap: 18px;
  font-size: 0.9375rem;
  color: var(--gris);
  text-align: center;
}


/* ═════════════ 14. Visor de fotos ═════════════ */
.visor {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(20 16 18 / 0.95);
  color: var(--blanco);
  touch-action: pan-y pinch-zoom;
  opacity: 0;
  transition:
    opacity 0.3s var(--curva),
    overlay 0.3s allow-discrete,
    display 0.3s allow-discrete;
}

.visor[open] {
  display: grid;
  place-items: center;
  opacity: 1;
}

@starting-style {
  .visor[open] { opacity: 0; }
}

.visor::backdrop {
  background: transparent;
}

.visor__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 92vw;
}

.visor__imagen {
  width: auto;
  max-width: min(92vw, 1400px);
  max-height: 78svh;
  border-radius: 10px;
  object-fit: contain;
  transition: opacity 0.35s var(--curva);
}

.visor__imagen.es-cargando {
  opacity: 0;
}

.visor__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  max-width: 60ch;
  font-size: 0.875rem;
  text-align: center;
  color: rgb(255 255 255 / 0.75);
}

.visor__contador {
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.5);
}

.visor__boton,
.visor__cerrar {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  transition: background-color var(--rapido);
}

.visor__boton svg,
.visor__cerrar svg {
  width: 22px;
  height: 22px;
}

.visor__boton {
  bottom: 20px;
}

.visor__boton--anterior {
  left: calc(50% - 64px);
}

.visor__boton--anterior svg {
  transform: rotate(180deg);
}

.visor__boton--siguiente {
  right: calc(50% - 64px);
}

.visor__cerrar {
  top: 16px;
  right: 16px;
}

@media (hover: hover) {
  .visor__boton:hover,
  .visor__cerrar:hover { background: rgb(255 255 255 / 0.18); }
}

@media (min-width: 720px) {
  .visor__boton {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
  }

  .visor__boton--anterior { left: 24px; }
  .visor__boton--siguiente { right: 24px; }
}


/* ═════════════ 15. Páginas legales ═════════════ */
.legal {
  max-width: calc(760px + 2 * var(--margen));
  margin-inline: auto;
  padding: calc(var(--cabecera) + 56px) var(--margen) var(--seccion);
}

.legal__volver {
  display: inline-block;
  margin-bottom: 32px;
}

.legal h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
}

.legal__fecha {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--gris);
}

.legal h2 {
  margin: 44px 0 14px;
  font-family: var(--serif);
  font-size: 1.5rem;
}

.legal p,
.legal li {
  color: var(--tinta-suave);
}

.legal p + p,
.legal ul + p {
  margin-top: 14px;
}

.legal ul {
  display: grid;
  gap: 8px;
  padding-left: 1.2em;
  list-style: disc;
}

.legal a:not(.boton) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Dato que falta y hay que rellenar antes de publicar: se ve a propósito. */
.todo {
  padding: 1px 7px;
  background: #ffe28a;
  color: var(--tinta);
  font-weight: 500;
}

.error {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: calc(var(--cabecera) + 32px) var(--margen) 64px;
  text-align: center;
}

.error__numero {
  font-family: var(--serif);
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-style: italic;
  line-height: 1;
  color: var(--vino);
}

.error h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

.error p {
  max-width: 40ch;
  color: var(--gris);
}

.error__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}


/* ═════════════ 16. Movimiento reducido ═════════════
   Se quitan los desplazamientos y los bucles; se conservan los fundidos y
   los cambios de color, que no marean y siguen dando respuesta. */
@media (prefers-reduced-motion: reduce) {
  .portada__linea > span,
  .portada__etiqueta,
  .portada__entradilla,
  .portada__acciones,
  .portada__valoracion,
  .portada__abanico,
  .menu-movil[open] .menu-movil__nav li {
    animation-name: fundido;
    animation-duration: 0.6s;
  }

  .whatsapp::after,
  .portada__pista::before {
    animation: none;
  }

  .menu-movil {
    transform: none;
  }

  @starting-style {
    .menu-movil[open] { transform: none; }
  }
}

@keyframes fundido {
  from { opacity: 0; }
}