/* Valmara — hoja común de las tres páginas.
   Blanco frío, casi negro cálido, un solo rojo. Rotulación condensada
   en mayúsculas (Archivo), texto en serif editorial (Newsreader). */

:root {
  --ground:    #fbfaf8;
  --surface:   #f1eeea;
  --ink:       #1a1618;
  --ink-soft:  #6d6560;
  --line:      #ddd7d0;
  --line-soft: #e9e4dd;
  --accent:    #b4241f;
  --on-accent: #fbfaf8;
  --field:     #ffffff;
  --ok:        #2c5c43;
  --shot-a:    #cfc6bb;
  --shot-b:    #a8968a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #141112;
    --surface:   #1e1a1c;
    --ink:       #efe9e5;
    --ink-soft:  #a1968f;
    --line:      #332c2e;
    --line-soft: #262123;
    --accent:    #e2685f;
    --on-accent: #141112;
    --field:     #171415;
    --ok:        #7cb491;
    --shot-a:    #2a2426;
    --shot-b:    #3d3336;
  }
}
:root[data-theme="dark"] {
  --ground:    #141112;
  --surface:   #1e1a1c;
  --ink:       #efe9e5;
  --ink-soft:  #a1968f;
  --line:      #332c2e;
  --line-soft: #262123;
  --accent:    #e2685f;
  --on-accent: #141112;
  --field:     #171415;
  --ok:        #7cb491;
  --shot-a:    #2a2426;
  --shot-b:    #3d3336;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 300 1.0625rem/1.65 Newsreader, Charter, "Iowan Old Style", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.col { width: min(64rem, 100% - 3rem); margin-inline: auto; }
.narrow { width: min(46rem, 100% - 3rem); margin-inline: auto; }

.sans {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ── fotos ────────────────────────────────────────────────────────
   Fondo sobre un textil de respaldo: si la foto falta, se ve una
   textura intencionada en vez de un icono roto. Mete los .jpg en
   fotos/ y aparecen solas. */
.shot {
  background-color: var(--shot-a);
  background-image:
    radial-gradient(120% 100% at 72% 20%, color-mix(in srgb, var(--shot-b) 70%, transparent), transparent 62%),
    repeating-linear-gradient(101deg, rgba(0,0,0,.05) 0 2px, transparent 2px 8px);
  background-size: cover;
  background-position: center;
}
.shot[data-src] { background-blend-mode: normal; }

/* ── cabecera ─────────────────────────────────────────────────── */
.band { border-bottom: 1px solid var(--line); background: var(--ground); }
.band .col {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem 2rem; flex-wrap: wrap; padding: 1.6rem 0 1.2rem;
}
.mark {
  margin: 0; text-decoration: none; color: inherit;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: .22em; text-transform: uppercase; line-height: .95;
  display: inline-block;
}
.mark .rule { display: block; width: 2.4rem; height: 3px; background: var(--accent); margin-top: .7rem; }

.band nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: .69rem; letter-spacing: .18em; text-transform: uppercase; }
.band nav a { color: var(--ink-soft); text-decoration: none; padding-bottom: .15rem; border-bottom: 1px solid transparent; }
.band nav a:hover, .band nav a:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }
.band nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.band nav .tel { color: var(--ink); letter-spacing: .1em; }

/* ── titulares ────────────────────────────────────────────────── */
h1.page, h2.page {
  font-weight: 300; font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  line-height: 1.22; margin: 0 0 1rem; max-width: 26ch; text-wrap: balance;
}
.eyebrow {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .9rem;
}
.lede { color: var(--ink-soft); max-width: 58ch; margin: 0 0 1.4rem; }

/* ── botones ──────────────────────────────────────────────────── */
.btn, button {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: 2px; padding: 1rem 2.4rem; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn:hover, button:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); filter: none; }

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

/* ── pie ──────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 4rem; }
footer .col { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem; padding: 2.4rem 0 1.4rem; }
footer h4 { font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .7rem; font-weight: 600; }
footer p, footer li { margin: 0 0 .35rem; font-size: .95rem; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
footer a:hover { border-bottom-color: var(--accent); }
.legal { border-top: 1px solid var(--line); }
.legal .col { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0 1.6rem; font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: .64rem; letter-spacing: .12em; color: var(--ink-soft); }
.legal a { color: var(--ink-soft); border: 0; }
.legal a:hover { color: var(--accent); }

/* ── aviso de cookies ─────────────────────────────────────────── */
#cookies {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: var(--ink); color: var(--ground);
  border-top: 3px solid var(--accent);
}
#cookies .col { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap; padding: 1.1rem 0; }
#cookies p { margin: 0; font-size: .92rem; max-width: 52ch; color: var(--ground); }
#cookies a { color: var(--ground); }
#cookies .acciones { display: flex; gap: .7rem; flex-wrap: wrap; }
#cookies button {
  padding: .7rem 1.5rem; font-size: .66rem;
  background: var(--accent); color: var(--on-accent);
}
#cookies button.sec { background: transparent; color: var(--ground);
  border: 1px solid color-mix(in srgb, var(--ground) 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* El campo de fecha abre el calendario al tocarlo (ver reservas.html),
   así que tiene que parecer pulsable en toda su superficie. */
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* ── selector de idioma ───────────────────────────────────────────
   Un <select> nativo con el nombre del idioma, que es lo que llevan
   las webs reales (y lo que rellena bien un agente). El chevron se
   dibuja aquí porque el nativo desentona con la rotulación. */
#idiomas {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: .69rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 0;
  padding: .1rem 1.15rem .15rem .1rem; margin: 0;
  min-height: 0; width: auto; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .38rem center, right .16rem center;
  background-size: .22rem .22rem, .22rem .22rem;
  background-repeat: no-repeat;
  border-bottom: 1px solid transparent;
}
#idiomas:hover { color: var(--ink); border-bottom-color: var(--accent); }
#idiomas option { font-family: inherit; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--ground); }