@font-face {
  font-family: "Inter";
  src: url("/fuentes/Inter-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fuentes/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #FFFFFF;
  --texto: #4E4C4A;   /* negro grisáceo para todos los textos (contraste 8,6:1) */
  --negro: #000000;   /* logotipo, página actual y enlaces al pasar el ratón */
  --margen: 1.25rem;
  --columna: 40rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-feature-settings: "tnum";
}

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

p { margin: 0; }

/* Enlaces y botones: texto normal; negro puro al pasar el ratón. */
a { color: inherit; text-decoration: none; }
/* Enlaces dentro de una frase: al revés, para que se distingan del texto. */
a.en-texto { color: var(--negro); }
/* El cambio de color solo con ratón: en el móvil se quedaría pegado tras tocar. */
@media (hover: hover) {
  a:hover { color: var(--negro); }
  a.en-texto:hover { color: var(--texto); }
}
a, button { -webkit-tap-highlight-color: transparent; }

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

/* Estructura
   Móvil: logotipo arriba; al pulsarlo se despliega el menú. Debajo, la página.
   Ordenador (desde 60rem): menú fijo a la izquierda (1/3) y página a la derecha (2/3). */
.menu { padding: 1.25rem var(--margen) 0; }
.menu ul { margin: 0; padding: 0; list-style: none; }
.menu a[aria-current="page"] { color: var(--negro); }
.menu img { width: 5.5rem; }

.logo-enlace { display: none; }
/* Zona de toque más grande que el dibujo (el relleno lo compensa el margen negativo). */
.logo-boton {
  display: block;
  margin: -0.5rem -0.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu .nav-principal { margin-top: 1.5rem; }
.menu .nav-principal a { display: block; padding: 0.5rem 0; }
.menu .nav-secundaria {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
}
/* Más alto para el dedo; el relleno sustituye al margen, así se ve igual. */
.menu .nav-secundaria a { display: block; padding: 0.75rem 0; }
.js .menu:not(.abierto) nav { display: none; }

.contenido { padding: 2rem var(--margen) 3rem; }
.contenido > * { max-width: var(--columna); }

@media (min-width: 60rem) {
  .marco {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
  }
  .menu {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 3rem;
  }
  .logo-enlace { display: block; }
  .logo-boton, .solo-movil { display: none; }
  .js .menu:not(.abierto) nav,
  nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }
  .menu .nav-principal { margin-top: 3rem; }
  .menu .nav-principal a { padding: 0.25rem 0; }
  .contenido { padding: 3rem 3rem 4rem; }
}

h1, h2 {
  margin: 0 0 1.5rem;
  font-size: inherit;
  font-weight: 400;
}
h1 { margin-bottom: 3rem; }
.contenido * + h2 { margin-top: 4rem; }

/* Solo para lectores de pantalla. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Servicios */
.servicios {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}
.servicios th,
.servicios td {
  padding: 0.5rem 0;
  vertical-align: top;
  font-weight: 300;
  text-align: left;
}
.servicios td {
  padding-left: 1rem;
  text-align: right;
  white-space: nowrap;
}
.servicios td:last-child { width: 3.5rem; }
.nota { display: block; }

p + p { margin-top: 1rem; }

/* Galería: una sola columna, al ancho del contenido (las fotos ya vienen en 4:5). */
.galeria {
  display: grid;
  gap: 1.5rem;
}

/* Horario y ubicación */
.mapa { margin: 2rem 0 0; }
.mapa-dibujo { position: relative; }
.etiqueta {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
}
.mapa figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Filas de etiqueta y texto (reservas, datos del titular). */
.filas { margin: 0; }
.filas > div { padding: 0.5rem 0; }
.filas dt { font-weight: 400; }
.filas dd { margin: 0; }
@media (min-width: 30rem) {
  .filas > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
  }
}

/* Páginas legales */
.pagina-aviso-legal .filas,
.pagina-privacidad .filas { margin: 0 0 2.5rem; }
.fecha { margin-top: 2.5rem; }

/* Servicios: aire entre los precios y las reservas, sin título entre ambos. */
.pagina-servicios .filas { margin-top: 4rem; }