/* O Pilón do Camiño — shared styles (Phase 1).
   Brand: blue #043962 + gold #DBA817; Helvetica; motto «Un gusto coñecerte».
   Tokens in :root. This file is the SOURCE — minify with build.sh. */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (assets 2026-08-06):
       blue #043962 + gold #DBA817 on white —
       logo: blue, white background, motto "Un gusto conocerte" in gold.
     Helvetica throughout (Arial fallback, metrically compatible).
     Roles: --terra = blue (action, links, functional text);
            --olive = gold (motto, decorative emphasis, display). */
  --paper:        #ffffff;   /* main background — white (logo background) */
  --paper-2:      #f2f6fa;   /* supporting backgrounds / photos (very light blue) */
  --ink:          #043962;   /* main text — brand blue */
  --ink-soft:     #55708c;   /* secondary text (AA on --paper) */
  --line:         #d8e1ea;   /* thin borders (blue at 15%) */
  --terra:        #043962;   /* primary accent — blue (buttons, links) */
  --terra-deep:   #032c4a;   /* blue on hover/focus */
  --olive:        #dba817;   /* secondary accent — gold (motto, emphasis)
                                PANTONE 124 C / official HEX #DBA817 */

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius: 4px;
  --wrap: 68rem;
  --section-pad: clamp(3.5rem, 9vw, 6.5rem);
}

/* ---------- Dark theme ----------
   Adaptive to the device by default (JS sets data-theme from
   prefers-color-scheme on load); the masthead button forces
   light/dark and persists to localStorage. No JS → light (fallback).
   The 404 is already a dark brand page and does not change. */
:root[data-theme="dark"] {
  --paper:      #0d1a26;   /* background — brand navy */
  --paper-2:    #16283c;   /* elevated surfaces */
  --ink:        #e7eef5;   /* main text — near white */
  --ink-soft:   #9fb3c8;   /* secondary text */
  --line:       rgba(255, 255, 255, 0.12);
  --terra:      #5d8fbd;   /* light blue, readable on dark */
  --terra-deep: #7aa6cc;   /* hover */
  --olive:      #dba817;   /* gold — works the same on navy */
}
/* Theme button (masthead): same pill as the language selector */
.theme-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--terra); cursor: pointer;
  padding: 0; font: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { border-color: var(--terra); background: var(--paper-2); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }          /* dark → sun (click = light) */
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Smooth theme transition: only while switching (JS adds/removes the class,
   ~0.35s). prefers-reduced-motion is already handled by the base block. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease !important;
}

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

html {
  scroll-behavior: smooth;
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  main { animation: none; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 1rem;
}
p { text-wrap: pretty; margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--terra); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terra-deep); }

/* Real visible focus (gold — brand accent, defined once) */
:root[data-theme="dark"] :focus-visible {
  /* Slightly brighter on dark for AA contrast */
  outline-color: #f0c93f;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section { padding-block: var(--section-pad); scroll-margin-top: 5.5rem; }

/* ---------- Draft tags ---------- */
.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
  white-space: nowrap;
}
.tag-soft { color: var(--ink-soft); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Under construction notice ---------- */
.notice {
  background: var(--terra);
  color: var(--paper);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.5rem 1rem;
}
.notice p { margin: 0; }

/* ---------- Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.brand svg { width: 30px; height: 30px; color: var(--terra); flex: none; }
/* Real owner logo (docs/design → assets/img):
   masthead = name-only version (logosinslogan), footer/landing = circular (logoweb).
   The white chip is PERMANENT (both themes): on light it blends with the
   background (invisible), on dark it separates the logo from the navy. Since it
   never changes with the theme, there is nothing to animate in the transition
   → no shadows or borders. */
.brand-img {
  padding: 0.3rem 0.6rem;
  background: #fff;
  border-radius: 8px;
}
.brand-logo { display: block; height: 52px; width: auto; }
.footer-logo { width: 56px; height: 56px; flex: none; background: #fff; }

.nav-list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}
.nav-list a:hover { color: var(--terra-deep); background: var(--paper-2); }
.nav-list a[aria-current="page"] { color: var(--terra); }
.nav-list li { display: flex; align-items: center; }
/* Language selector (4 languages): pill group in the masthead */
.nav-list li.lang-links {
  display: flex; gap: 0.25rem; align-items: center;
  margin-left: 0.6rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);   /* visual separation of the menu */
}
.nav-list li.theme-toggle-item { margin-left: 0.5rem; }
.nav-list .lang-link { border-radius: 999px; }
.nav-list .lang-link[aria-current="page"],
.nav-list .lang-link[aria-current="page"]:hover,
.nav-list .lang-link[aria-current="page"]:focus {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}
.lang-link .lang-flag { margin-right: 0.3em; vertical-align: -0.15em; }
.lang-link {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  color: var(--terra);
}
.lang-link:hover { border-color: var(--terra); background: var(--paper-2); }

/* Language landing (root index.html) */
.lang-landing-main { min-height: 100vh; display: flex; align-items: center; text-align: center; }
.lang-landing-logo { border-radius: 50%; margin: 0 auto 1rem; }
.lang-landing-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--terra); margin: 0 0 0.25rem; }
.lang-landing-tagline { margin: 0 0 0.75rem; }
.lang-landing-sub { color: var(--ink-soft); margin: 0 0 2rem; }
.lang-landing-choices { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.lang-flag { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.45em; vertical-align: -0.2em; border-radius: 2px; overflow: hidden; }
.lang-flag svg { width: 100%; height: 100%; display: block; }

/* 404 page — "Perdiches o camiño": brand background, yellow Camino
   arrow, gold CTA. Inverted relative to the rest of the site. */
.notfound { background: var(--terra); color: #fff; }
/* The (dark blue) logo is invisible on the brand background: white disc + shadow */
.notfound-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%;
  padding: 0.6rem; margin-bottom: 0.4rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.notfound-logo img { width: 160px; height: 160px; display: block; border-radius: 50%; }
.notfound-logo:hover { transform: scale(1.04); }
.notfound-main {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 2.5rem 1.5rem;
}
.notfound-code {
  margin: 0; line-height: 1;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(4.5rem, 14vw, 7.5rem);
  color: var(--olive);
}
/* Yellow arrow pointing AT the logo (rotated upward, "back to the brand") */
.notfound-arrow {
  width: 44px; height: 44px; color: var(--olive);
  margin: 0 auto 0.5rem;
  transform: rotate(90deg);
  animation: notfound-bounce 2s ease-in-out infinite;
}
@keyframes notfound-bounce {
  0%, 100% { transform: rotate(90deg) translateX(-6px); }
  50%      { transform: rotate(90deg) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .notfound-arrow { animation: none; }
}
.notfound-title {
  margin: 0 0 0.5rem; color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
}
.notfound-sub { margin: 0 auto 0.4rem; color: rgba(255, 255, 255, 0.88); }
.notfound-langs { margin: 0 auto 2.25rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }
.notfound-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--olive); color: var(--terra);
  border: 1px solid var(--olive); font-weight: 600;
  margin: 0 auto 2rem;
}
.notfound-cta:hover { background: #f0c93f; border-color: #f0c93f; }
.notfound-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.notfound-choices a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0.4rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px; color: #fff; text-decoration: none;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  transition: background 0.2s ease, color 0.2s ease;
}
.notfound-choices a:hover { background: #fff; color: var(--terra); }
.notfound-choices .lang-flag { margin-right: 0.4em; }
.notfound-address {
  margin: 3rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5);
}
.notfound-address em { color: var(--olive); font-style: normal; }

/* Cookie notice (GDPR boilerplate) — hidden until OPILON_COOKIE_BANNER=true */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--paper); border-top: 2px solid var(--terra);
  box-shadow: 0 -6px 24px rgba(4, 57, 98, 0.12);
  padding: 1rem 1.25rem;
}
.cookie-banner-inner { max-width: 68rem; margin: 0 auto; }
.cookie-text { margin: 0 0 0.5rem; font-size: 0.9rem; }
.cookie-policy { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--ink-soft); }
.cookie-policy summary { cursor: pointer; color: var(--terra); font-weight: 600; }
.cookie-policy p { margin: 0.5rem 0 0; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-actions .btn { min-height: 40px; }

/* Soft transition on page enter (same feel when navigating
   between hostel and laundry) */
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
main { animation: page-in 0.35s ease both; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3.5rem, 9vw, 6.5rem); }
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: 22rem;
}
.hero h1 {
  font-size: clamp(2.35rem, 5.5vw, 3.9rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--olive);
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--olive);
  margin: -0.75rem 0 1.5rem;
}
.hero p {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 40rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                 /* touch target ≥ 44 px */
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--terra);
  color: var(--paper);
}
.btn-primary:hover { background: var(--terra-deep); color: var(--paper); }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Photo placeholder ---------- */
.photo {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
}
.photo span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 24rem;
}
.photo-hero { aspect-ratio: 5 / 4; }
.photo-tall { aspect-ratio: 4 / 3; }
/* Brand placeholders as <img> (same ratios; swap the src
   for the real photo in Phase 2 — see assets/img/placeholders/) */
img.photo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}
.caption {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.625rem;
}

/* ---------- Sections ---------- */
.section-head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}
.section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  margin-bottom: 0.875rem;
}
.section-head .eyebrow { border-top: none; padding-top: 0; margin-bottom: 0.875rem; }

/* About the hostel: text + photo in two columns */
.sobre-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.sobre-grid .prose { max-width: 38rem; }
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.facts li { display: flex; align-items: baseline; gap: 0.5rem; }

/* ---------- Service lines (brand manual §4) ----------
   Three branded service lines, each with a distinct card colour:
   HOSTEL → gold card (navy icon/text), LAVANDERÍA → navy card (white text),
   SÁBANAS LIMPIAS → gold card (navy icon/text).
   Icons sit in a circle outline (white inner) with the line colour as ring.
   Manual: "iconos de servicio deben ser sobre el fondo de color y con el
   texto a la derecha o debajo". Horizontal cards = web layout from §4. */

/* Tabular service definition list (used on the laundry Máquinas section).
   Thin rules between rows; term on the left, description stacked below on
   mobile, side-by-side on desktop. Distinct from the branded cards above. */
.servicios-list {
  margin: 0;
  border-top: 1px solid var(--line);
}
.servicios-list > div {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.servicios-list dt {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
}
.servicios-list dd {
  margin: 0;
  color: var(--ink-soft);
  max-width: 40rem;
}
.servicios-list .tag { margin-right: 0.5rem; }

.service-lines {
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0 0;
}
.service-line {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(4, 57, 98, 0.15);
}
/* Hover must NOT pick up the generic a:hover color (var(--terra-deep) →
   light blue in dark theme, unreadable on the gold brand swatch). Lock the
   card text to its fixed brand colour on hover — specificity 0,2,0 beats a:hover. */
.service-line.service-line-gold:hover { color: #043962; }
.service-line.service-line-navy:hover { color: #fff; }
/* Gold cards: HOSTEL + SÁBANAS LIMPIAS.
   Fixed brand colours (PANTONE 124 C #DBA817 gold over PANTONE 2955 C
   #043962 navy text) — these are solid brand swatches and must NOT remap
   with the dark theme, so we use literal hex, not var(--terra)/var(--olive). */
.service-line-gold {
  background: #dba817;
  color: #043962;
}
/* Navy card: LAVANDERÍA */
.service-line-navy {
  background: #043962;
  color: #fff;
}
/* Icon circle — white inner, fixed navy ring + navy line-art icon.
   Brand iconography is always navy (PANTONE 2955 C), independent of theme. */
.service-line-icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #043962;
  color: #043962;
}
.service-line-icon svg {
  width: 32px;
  height: 32px;
  color: #043962;
}
/* Label + sub-items */
.service-line-body { flex: 1; min-width: 0; }
.service-line-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}
.service-line-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
  opacity: 0.9;
}
.service-line-items li { margin: 0; }
.service-line-arrow {
  flex: none;
  font-size: 1.25rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.service-line:hover .service-line-arrow { transform: translateX(4px); }

/* Detail list under each service line (secondary items) */
.service-detail-list {
  margin: 0 0 0 3.25rem;
  padding: 0.75rem 0 1.25rem;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.service-detail-list:last-child { border-bottom: none; }
.service-detail-list li {
  display: flex;
  gap: 0.5rem;
  padding-block: 0.35rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.service-detail-list li::before {
  content: "·";
  color: var(--olive);
  font-weight: 700;
  flex: none;
}

/* The Way: short text + panoramic band */
.camino-prose { max-width: 40rem; margin-bottom: 2.5rem; }

/* Bookings */
.reservas-col { max-width: 44rem; }
.engine-placeholder {
  border: 1.5px dashed var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  text-align: center;
  margin: 2.5rem 0 1.75rem;
}
.engine-placeholder h3 {
  font-size: 1.375rem;
  margin-bottom: 0.625rem;
}
.engine-placeholder p {
  color: var(--ink-soft);
  max-width: 30rem;
  margin-inline: auto;
  font-size: 0.9375rem;
}

/* ---------- Avirato booking engine (full-width date+guest form) ----------
   flatpickr is bundled locally (self-origin, CSP-safe) for a reliable
   datepicker — native <input type=date> pickers proved unreliable in this
   context. The card runs the full #reservas column width. */
.booking-card {
  margin: 2.5rem 0 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.booking-card:hover { box-shadow: 0 6px 20px rgba(4, 57, 98, 0.12); }
.booking-hint {
  margin: 0 0 1.5rem;
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.booking-form { display: grid; gap: 1.25rem; }
.booking-fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) {
  .booking-fields {
    grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr);
  }
}
.booking-field { display: grid; gap: 0.375rem; }
.booking-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.booking-date,
.booking-guests {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.booking-guests { -moz-appearance: textfield; }
.booking-guests::-webkit-outer-spin-button,
.booking-guests::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.booking-submit { justify-self: start; min-width: min(100%, 18rem); }
.booking-note {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

/* flatpickr — brand theming (navy accents) */
.flatpickr-calendar {
  background: var(--paper);
  box-shadow: 0 8px 28px rgba(4, 57, 98, 0.18);
}
.flatpickr-day.today { border-color: var(--olive); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.flatpickr-day.inRange {
  background: var(--paper-2);
  border-color: var(--paper-2);
  color: var(--ink);
}
.flatpickr-day:hover {
  background: var(--paper-2);
  border-color: var(--line);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month { color: var(--ink); }
.contact-line {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}
.contact-line a { font-weight: 600; }

/* ---------- Laundry ---------- */
/* Tables: prices and hours with thin rules (same visual grammar) */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0 0 1.75rem;
}
.table th, .table td {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: 1rem;
}
.table td { color: var(--ink-soft); }
.table .num { text-align: right; white-space: nowrap; }

.laundry-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.laundry-grid .prose { max-width: 38rem; }

/* ---------- Map (OpenStreetMap embed — no cookies, no API key) ---------- */
.map-frame {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 14rem;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-actions { margin: 1.25rem 0 0; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem) 3rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.footer-grid {
  display: grid;
  gap: 2rem;
}
/* Real owner logo: circular (logoweb.png), transparent — ok on
   the white footer background. */
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand .footer-logo { border-radius: 50%; }

/* Social links — brand icons (FB/X/IG), href="#" pending URLs */
.socials { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.socials a {
  width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--terra); border-radius: 10px;
  color: var(--terra); transition: background 0.2s ease, color 0.2s ease;
}
.socials a:hover { background: var(--terra); color: #fff; }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* Cookie preferences trigger — same style as the social icons */
.cookie-trigger {
  width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--terra); border-radius: 10px;
  background: transparent; color: var(--terra); cursor: pointer;
  padding: 0; font: inherit; transition: background 0.2s ease, color 0.2s ease;
}
.cookie-trigger:hover { background: var(--terra); color: #fff; }
.cookie-trigger svg { width: 18px; height: 18px; fill: currentColor; }
.footer-brand svg { width: 24px; height: 24px; color: var(--terra); flex: none; }
.footer-brand strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--terra-deep); }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

/* ---------- Desktop ---------- */
@media (min-width: 48rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .sobre-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .laundry-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .footer-grid {
    grid-template-columns: 2fr 1fr;
  }
  /* Tabular service list: term left, description right on desktop */
  .servicios-list > div {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
  /* Service lines: 2-column layout on desktop — LAVANDERÍA spans both */
  .service-lines {
    grid-template-columns: 1fr 1fr;
  }
  .service-lines .service-line-navy { grid-column: 1 / -1; }
}