/* ============================================================
   Fonts. Self-hosted Barlow and Barlow Condensed (SIL OFL, see
   fonts/OFL.txt): only the 7 faces this page uses, latin and
   latin-ext subsets, as served by Google Fonts (v13). The browser
   downloads a file only when the page has characters in its
   unicode-range, so Spanish/English pages load the latin files only.
   The above-the-fold faces are preloaded in index.php.
   caja uses the system font and loads none of these.
   ============================================================ */
/* Barlow 400, latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-v13-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 400, latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-v13-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 600, latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-v13-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 600, latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-v13-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 700, latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-v13-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 700, latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-v13-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 800 italic, latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-800-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 800 italic, latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-800-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 900 italic, latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-900-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 900 italic, latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-900-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 700, latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 700, latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 800, latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 800, latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/barlow-condensed-v13-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Public page. Loaded after base.css, which holds the tokens and
   the rules shared with caja.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + var(--safe-top) + var(--s-4));
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  overflow-x: clip;
}
/* Grid texture and scan line from the mockup, painted behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 163, 23, 0), var(--c-accent) 30%, var(--c-accent) 70%, rgba(255, 163, 23, 0));
  box-shadow: 0 0 18px 3px rgba(255, 163, 23, .45);
  animation: scan 6s linear infinite;
}
@keyframes scan { from { transform: translateY(-40px); } to { transform: translateY(100vh); } }

img, svg { display: block; max-width: 100%; }
a { text-decoration: none; }
a:hover { color: var(--c-strong); }
:focus-visible { outline: 2px solid var(--c-accent-text); outline-offset: 3px; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--max-w) + var(--safe-left) + var(--safe-right));
  margin-inline: auto;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.label {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.skip-link {
  position: absolute;
  left: var(--safe-left);
  top: calc(var(--safe-top) + var(--s-2));
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--c-on-accent); }


/* ============================================================
   Header. Narrow screens show the logo only (the nav is in the bottom
   bar); from breakpoint 1 the inline nav sits next to the logo.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--safe-top);
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--c-accent-line);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--bar-h);
}
.brand {
  flex: none;
  display: block;
  padding-block: var(--s-1);
}
.brand img { width: 52px; height: 52px; }
.site-nav { display: none; }

/* Language switcher: the page's language is an orange block, the others
   plain. A language with no page yet is a disabled link (no href,
   aria-disabled): greyed out, not focusable, announced as unavailable. */
.lang-switch {
  display: flex;
  gap: 2px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
}
.lang-switch li > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  height: var(--tap);
  color: var(--c-text);
}
.lang-switch .lang-current { background: var(--c-accent); color: var(--c-on-accent); }
.lang-switch .lang-pending { color: var(--c-text-faint); cursor: default; }
.lang-switch a[href]:hover { color: var(--c-accent-text); }

/* Language switcher, then the theme toggle at the header's far right */
.header-tools { flex: none; display: flex; align-items: center; gap: var(--s-4); }
/* Theme toggle: the icon is the theme in use. Hidden until the script in
   inc/footer.php shows it. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 20px; height: 20px; }
/* The tap box overhangs into the gutter so the icon, not the box, lines up
   with the content's right edge (the gutter is 18px, the overhang 12px) */
.theme-toggle { margin-right: calc((20px - var(--tap)) / 2); }
.theme-toggle:hover { color: var(--c-accent-text); }
.theme-sun,
:root[data-theme="light"] .theme-moon { display: none; }
:root[data-theme="light"] .theme-sun { display: block; }

/* ============================================================
   Bottom nav (narrow screens only). Fixed to the bottom edge; the body
   gets matching bottom padding so the end of the page stays visible.
   ============================================================ */
html { scroll-padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }
body { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  padding: 0 env(safe-area-inset-right, 0px) var(--safe-bottom) env(safe-area-inset-left, 0px);
  border-top: 1px solid var(--c-accent-line);
  background: var(--c-nav-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* Without blur, near-opaque so text scrolling underneath can't read through */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav { background: var(--c-nav-bg-solid); }
}
/* Cells size to their label and share the leftover width, so a long label
   (CONTACTO) still fits at 320 in a fallback font while Barlow loads */
.bottom-nav a {
  flex: 1 1 auto;
  min-width: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bottom-nav-h);
  padding-inline: 2px;
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.bottom-nav a:hover,
.bottom-nav a[aria-current] { color: var(--c-accent-text); }
.bottom-nav a[aria-current] { box-shadow: inset 0 2px 0 var(--c-accent); }
.bottom-nav a:focus-visible { outline-offset: -3px; }

/* ============================================================
   Hero. Stacked: the photo is a band across the top (its own crop) and
   the text sits under it on solid background, overlapping its bottom
   edge. Wide landscape screens only (see "Hero over the photo" at the
   end): the photo fills the section and the text sits bottom-left over
   a scrim.
   ============================================================ */
main { flex: 1; }
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface-2);
  border-bottom: 3px solid var(--c-accent);
}
.hero-img {
  position: relative;
  width: 100%;
  height: clamp(240px, 40vh, 330px);
  height: clamp(240px, 40svh, 330px);
  object-fit: cover;
  object-position: 70% 50%;
}
/* The img stays the flex item, as before it had a <picture> around it */
.hero-pic { display: contents; }
/* A phone version is made for the strip: centre it rather than use the
   main photo's crop. Over the photo (wide landscape) the main photo's rule
   wins again. */
.hero-img-mobile { object-position: 50% 50%; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 22%);
}
.hero-body {
  position: relative;
  isolation: isolate; /* the fade below paints over the photo, under the text */
  margin-top: -84px;
  padding-top: 84px;
  padding-bottom: 36px; /* room above the orange line under the hero */
}
/* The fade runs edge to edge: on a tablet in portrait the text column is
   narrower than the screen, and a fade on the column showed its edges */
.hero-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0, rgba(10, 10, 10, .9) 52px, var(--c-bg) 84px);
}
/* Never wider than this, stacked or over the photo: keeps the buttons
   from stretching across a tablet */
.hero-text { max-width: 640px; }
.hero-eyebrow {
  margin: 0 0 10px;
  color: var(--c-accent-text);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-title {
  margin: 0;
  color: var(--c-white);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.4rem, 18vw, 4.6rem);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .6);
}
.hero-sub {
  max-width: 32ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-base);
  line-height: 1.45;
}
/* Both buttons on one line; each sizes to its label and they share the
   leftover width. With Barlow they fit from 320. In a fallback font they
   need ~350px, so below that they wrap onto two lines rather than being
   cut off by the hero's overflow: hidden. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: 18px;
}
.hero-primary,
.hero-secondary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--s-3);
  white-space: nowrap;
}
/* The slanted orange block is a layer behind the text, so the clip
   doesn't cut off the focus outline */
.hero-primary {
  position: relative;
  z-index: 0;
  color: var(--c-on-accent);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.hero-primary:hover { color: var(--c-on-accent); }
.hero-primary:hover::before { background: var(--c-white); }
.hero-secondary {
  border: 2px solid var(--c-text);
  color: var(--c-text);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero-secondary:hover { border-color: var(--c-accent); color: var(--c-accent-text); }

/* ============================================================
   Benefits strip, under the hero, between orange rules at every width
   (the hero's border above, its own below). Narrow: a dark full-width
   2x2 grid with orange markers and hairline dividers. From breakpoint 1:
   no markers or dividers; still 2x2, and from breakpoint 3 one row of
   four.
   ============================================================ */
.benefits {
  background: var(--c-bg);
  border-bottom: 3px solid var(--c-accent); /* matches the hero's rule above */
}
.benefits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* both rows as tall as the tallest cell */
}
.benefits-list li {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 14px 32px; /* 16 + 6px marker + 10px gap */
}
.benefits-list li:nth-child(odd) { border-right: 1px solid var(--c-line-soft); }
.benefits-list li:nth-child(-n+2) {
  padding-top: 21px; /* room below the orange line under the hero */
  border-bottom: 1px solid var(--c-line-soft);
}
.benefit-title {
  position: relative;
  color: var(--c-strong); /* the hero headline's white in the dark theme */
  font-family: var(--f-display);
  font-weight: 700; /* upright 700 at both sizes: lighter, so the strip does not dominate */
  font-size: 15px; /* half a step between --t-sm and --t-base */
  letter-spacing: .06em;
  line-height: 1.15;
  text-transform: uppercase;
}
/* Marker hangs off the title, so it follows the title whatever the cell padding */
.benefit-title::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 6px;
  width: 6px;
  height: 6px;
  background: var(--c-accent);
}
.benefit-text {
  margin-top: 2px;
  color: var(--c-text-note);
  font-size: var(--t-sm);
}

/* ============================================================
   Reviews, under the benefits strip. Narrow: the rating on one line,
   the cards in a sideways scroller (each 84% wide, snapping) and the
   "see all" link under them, up to breakpoint 4; from there the rating
   sits left of a row of three cards. No layout in between: three cards
   below 984px are too narrow, and two plus one leaves an orphan.
   DOM order is summary, cards, link; the grid areas move the link.
   ============================================================ */
.reviews {
  /* top: twice the mockup's spacing below the benefits strip, which reads
     tight now the strip is dark. bottom: mockup 22px, less the link's 44px
     box overhang */
  padding: 40px 0 12px;
  background: var(--c-bg); /* plain: covers the page's grid texture */
  border-bottom: 1px solid var(--c-line-soft);
}
.reviews-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the scroller must not widen the grid */
  grid-template-areas: "summary" "list" "link";
}
.reviews-summary {
  grid-area: summary;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--s-3);
  padding: 0 var(--safe-right) 0 var(--safe-left);
}
.reviews-rating {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1;
}
.stars {
  color: var(--c-accent-text);
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}
.star-off { color: var(--c-text-faint); } /* 4.8:1; was .25, 2.0:1 */
.reviews-stars { font-size: 15px; }
.reviews-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.reviews-count svg { flex: none; display: block; width: 16px; height: 16px; }
.reviews-list {
  grid-area: list;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--safe-right) 0 var(--safe-left);
  padding: 14px var(--safe-right) 4px var(--safe-left);
}
.review {
  flex: 0 0 calc(84% + 34px); /* the mockup's 84% is content-box: + padding and border */
  max-width: 330px; /* phone width; wider screens show more cards instead */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-card);
}
.review-text {
  flex: 1;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-text-review);
}
.review-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  margin: 0;
  font-size: var(--t-xs);
}
.review-meta strong { color: var(--c-text); font-weight: 600; }
.review-date { color: var(--c-text-faint); }
.reviews-all {
  grid-area: link;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin: -1px var(--safe-right) 0 var(--safe-left); /* mockup 10px, less the 44px box overhang */
  font-size: var(--t-sm);
  font-weight: 600;
}

/* ============================================================
   Tarifas, after the horario. Narrow: the heading left-aligned, the
   three plans as compact rows (name and note left, price right) and the
   other rates folded in a <details> under "Otras tarifas y bonos", up
   to breakpoint 4; from there a centred heading, three tall cards in a
   row and the rates always shown, in groups. No layout in between:
   three cards below 984px are too narrow, and two plus one leaves an
   orphan. The script in index.php opens and folds the <details>.
   ============================================================ */
.tarifas { padding: 36px 0 40px; }
.tarifas-eyebrow { margin: 0; font-size: var(--t-xs); }
.tarifas-title {
  margin: var(--s-1) 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.tarifas-sub {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  color: var(--c-text-sub);
}
.plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-4);
}
.plan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.plan-featured {
  border: 2px solid var(--c-accent);
  box-shadow: 0 0 28px rgba(255, 163, 23, .16);
}
/* Name and badge share a line and wrap; the note goes under them. This
   side takes what the price leaves. */
.plan-main {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px var(--s-2);
  min-width: 0;
}
.plan-name {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .03em;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.plan-badge {
  padding: 2px 7px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.plan-note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--c-text-sub);
}
.plan-price {
  flex: none;
  max-width: 55%; /* a long price wraps at its spaces rather than push past the edge */
  margin: 0;
  overflow-wrap: break-word; /* and inside a word only when one word is too long */
  text-align: right;
  color: var(--c-accent-text);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
}
.plan-amount { font-size: 2.1rem; }
.plan-period {
  display: block;
  margin-top: 3px;
  color: var(--c-text-sub);
  font-style: normal;
  font-weight: 700; /* mockup 600; the nearest condensed upright face loaded */
  font-size: 12px;
}

.rates {
  margin-top: var(--s-3);
  background: var(--c-surface-3);
  border: 1px solid var(--c-line);
}
.rates-toggle {
  min-height: var(--tap);
  padding: 15px var(--s-4);
  color: var(--c-accent-text);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer; /* the browser's own marker, orange like the text, as in the mockup */
}
.rates-toggle:focus-visible { outline-offset: -3px; }
.rates-group {
  margin: 0;
  padding: 14px var(--s-4) var(--s-1);
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-text-faint);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}
/* Rows before the first group heading still get the line under the summary */
.rates-toggle + .rates-list { border-top: 1px solid var(--c-line-soft); }
.rate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: 10px var(--s-4);
  font-size: 15px;
}
.rate-label { min-width: 0; overflow-wrap: anywhere; }
.rate-detail {
  display: block;
  font-size: 12.5px;
  color: var(--c-text-faint);
}
.rate-price { color: var(--c-accent-text); white-space: nowrap; }
.rates-note {
  margin: var(--s-2) var(--s-4) var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-text-note);
}
/* With no rows the note stands alone under the cards */
.plans + .rates-note { margin: var(--s-4) 0 0; }

/* ============================================================
   Novedades, after the prices: two posters on a darker band, no
   captions (the posters carry their own text). Each poster sits in the
   same 4:5 box, shown whole on black (contain), so both are always the
   same height whatever their shape. Narrow: stacked, full width, so a
   text-heavy poster can be read on a phone. From breakpoint 4: side by
   side; a single poster keeps that half width, centred.
   ============================================================ */
.novedades {
  padding: clamp(44px, 6vw, 76px) 0;
  background: var(--c-band);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.novedades-eyebrow { margin: 0; }
.novedades-title {
  margin: 6px 0 26px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.posters {
  --poster-gap: clamp(10px, 2vw, 18px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--poster-gap);
}
.poster { background: var(--c-frame); border: 1px solid var(--c-line); }
/* Added by the script in index.php: the poster as a button that opens the lightbox */
.poster-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.poster-open:focus-visible { outline-offset: -3px; }

/* Lightbox: the whole poster, as large as fits the screen (it never
   scrolls; pinch-zoom still works on phones), on a dark backdrop. The
   space above and below holds the close button and the counter. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--tap) + 20px + var(--safe-top)) 12px calc(var(--tap) + 20px + var(--safe-bottom));
  background: rgba(0, 0, 0, .94);
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: var(--c-frame);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0 0 4px;
  border: 1px solid rgba(244, 241, 236, .35);
  background: rgba(10, 10, 10, .75);
  color: var(--c-text);
  font: 400 34px/1 var(--f-body);
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
.lightbox-close { top: calc(10px + var(--safe-top)); right: calc(10px + env(safe-area-inset-right, 0px)); }
/* Portrait: the poster fills the width, so the arrows go in the bottom
   bar either side of the counter rather than over the poster's text */
.lightbox-prev,
.lightbox-next { bottom: calc(6px + var(--safe-bottom)); }
.lightbox-prev { left: calc(10px + env(safe-area-inset-left, 0px)); }
.lightbox-next { right: calc(10px + env(safe-area-inset-right, 0px)); }
/* Landscape: the poster is limited by the height, with room beside it */
@media (min-aspect-ratio: 1/1) {
  .lightbox-prev,
  .lightbox-next { top: 50%; bottom: auto; margin-top: -26px; }
}
.lightbox-count {
  position: absolute;
  bottom: calc(18px + var(--safe-bottom));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}
/* Text for screen readers only */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.poster img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--c-frame);
}

/* ============================================================
   Clases, after the reviews: text-only cards, each a dark panel with
   an orange rule down its left edge. Narrow: two columns, compact. From
   breakpoint 4: three columns, larger type. Never centred: with an odd
   count (or classes hidden) the last row is short and sits on the left.
   ============================================================ */
.clases { padding: 36px 0 40px; }
.clases-eyebrow { margin: 0; font-size: var(--t-xs); }
.clases-title {
  margin: var(--s-1) 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.clases-sub {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  color: var(--c-text-sub);
}
.classes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.class-card {
  min-width: 0;
  padding: var(--s-3);
  background: var(--c-surface);
  border-left: 3px solid var(--c-accent);
  overflow-wrap: break-word; /* a long single word wraps instead of widening the column */
}
.class-name {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
  text-transform: uppercase;
}
.class-text {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-text-class);
}

/* ============================================================
   Horario, after the clases. Narrow: one day at a time behind a row of
   day tabs (one letter each, the full name once all fit), the panel
   listing that day's classes with a count. From breakpoint 4: every day
   in one row of columns, never a sideways scroller, each headed by an
   orange bar (off-white at the weekend: other hours, fewer classes).
   Without the script in index.php the narrow layout shows every day,
   stacked, and no tabs. The note under it is the opening hours.
   ============================================================ */
.horario {
  padding: 36px 0 40px;
  background: var(--c-band);
  border-top: 1px solid var(--c-line-soft);
}
.horario-eyebrow { margin: 0; font-size: var(--t-xs); }
.horario-title {
  margin: var(--s-1) 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.horario-sub {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  color: var(--c-text-sub);
}
.tt-tabs-wrap { container-type: inline-size; margin-top: var(--s-4); }
.tt-tabs {
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  gap: var(--s-1);
}
.tt-tabs[hidden] { display: none; }
/* Seven tabs fit from 332px at 44px each; narrower, two rows */
.tt-tabs-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (min-width: 332px) { .tt-tabs-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.tt-tab {
  min-width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.tt-tab[aria-selected="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.tt-tab:focus-visible { outline-offset: 2px; }
/* The full name: read out always, shown once every tab has room for
   "MIÉRCOLES" (65px in this face, so tabs of 76px or more: from 480px
   for six tabs, 560px for seven) */
.tt-tab-long {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@container (min-width: 480px) {
  .tt-tabs:not(.tt-tabs-7) .tt-tab-short { display: none; }
  .tt-tabs:not(.tt-tabs-7) .tt-tab-long { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@container (min-width: 560px) {
  .tt-tabs-7 .tt-tab-short { display: none; }
  .tt-tabs-7 .tt-tab-long { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
.tt-days { margin-top: 10px; }
.tt-day {
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}
.tt-day + .tt-day { margin-top: 10px; }
.is-tabbed .tt-day:not(.is-current) { display: none; }
.is-tabbed .tt-day:focus-visible { outline-offset: 2px; }
.tt-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: inherit;
  font-weight: inherit;
}
.tt-day-name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
}
.tt-day-count { font-size: var(--t-xs); color: var(--c-text-faint); }
.tt-slot {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--c-line-faint);
  font-size: var(--t-base);
}
.tt-slot:last-child { border-bottom: 0; }
.tt-time {
  flex: none;
  width: 52px;
  font-weight: 700;
  color: var(--c-accent-text);
}
.tt-class { min-width: 0; overflow-wrap: break-word; }
.tt-note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-text-note);
}

/* ============================================================
   Fisio, the last section, after the novedades: on the page's grid
   pattern (the footer below is a plain band). The physio card, full
   width at every size. The card: eyebrow,
   heading, the practice's name, body, its price as a line (amount in
   orange), then a solid call button and a quieter outlined one that
   opens the physio page in the overlay (.fisio-info, further down).
   With its photo the card has no padding of its own: the photo runs to
   the card's edges, above the text below breakpoint 4 and beside it from
   there, always whole (it carries text, so it is never cropped).
   ============================================================ */
.fisio { padding: clamp(48px, 7vw, 88px) 0; }
.svc {
  padding: clamp(22px, 3vw, 32px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.svc-has-img { display: flex; flex-direction: column; padding: 0; }
.svc-has-img .svc-text { padding: clamp(22px, 3vw, 32px); }
.svc-img { display: block; order: -1; width: 100%; height: auto; }
.svc-eyebrow { margin: 0; }
.svc-title {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.svc-practice { margin: calc(-1 * var(--s-2)) 0 var(--s-3); font-weight: 600; color: var(--c-text-muted); }
.svc-body { margin: 0 0 var(--s-4); color: var(--c-text-svc); }
.svc-prices {
  display: grid;
  gap: var(--s-1);
  margin: 0 0 var(--s-4);
}
.svc-prices li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); }
.svc-amount {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-accent-text);
  white-space: nowrap;
}
.svc-note { font-size: var(--t-sm); color: var(--c-text-muted); }
.svc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 13px 22px;
  border: 2px solid var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.svc-button:hover { border-color: var(--c-strong); background: var(--c-strong); color: var(--c-on-strong); }
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.svc-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 13px 22px;
  border: 2px solid var(--c-line);
  color: var(--c-text);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.svc-more:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--c-line-soft); }

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "contact" "hours" "map";
  gap: var(--s-6) var(--s-6);
  padding-block: var(--s-7);
}
.footer-body { background: var(--c-band); }
.footer-bottom { background: var(--c-footer-bottom); }
.footer-block h2 {
  margin: 0 0 var(--s-3);
}
.footer-contact { grid-area: contact; }
.footer-hours { grid-area: hours; }
.footer-map { grid-area: map; }

.footer-contact address {
  font-style: normal;
  font-size: var(--t-lg);
  margin-bottom: var(--s-2);
}
.contact-link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 11px 0;
  border-top: 1px solid var(--c-line);
}
.hours div:last-child { border-bottom: 1px solid var(--c-line); }
.hours dt { color: var(--c-text-muted); }
.hours dd { margin: 0; font-weight: 700; white-space: nowrap; }
.hours { margin: 0; }

/* Síguenos sits inside the contact column, under the email */
.footer-social h2 { margin-top: var(--s-5); }
.social-list {
  display: flex;
  flex-wrap: wrap; /* wraps rather than overflowing when the column is narrow */
  gap: 0 var(--s-5);
}
.social-list a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: fit-content;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.social-list a:hover { color: var(--c-accent-text); }
.social-list svg { flex: none; width: 22px; height: 22px; }

/* The gym's app, a band under the three columns, before the copyright
   row: 32px from the columns, as between them, and 48px below, as the
   columns' own bottom padding. Shown only with a store link (a "#" link
   has no button). */
.footer-app { margin-top: calc(var(--s-6) - var(--s-7)); padding-bottom: var(--s-7); }
.app-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px var(--s-5);
  padding: 20px 22px;
  border: 1px solid var(--c-line);
  background: linear-gradient(90deg, rgba(255, 163, 23, .14), rgba(255, 163, 23, 0));
}
.app-title {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
}
.app-text { margin: var(--s-1) 0 0; font-size: 14.5px; color: var(--c-text-muted); }
.app-text span { display: inline-block; } /* a part longer than the line still wraps inside itself */
.app-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.app-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--c-text);
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.app-links a:hover { border-color: var(--c-accent-text); color: var(--c-accent-text); }

/* Map: click-to-load facade. Nothing loads from Google until "Ver mapa"
   is pressed (no third-party JS or cookies before consent). The static
   image is a local file drawn from OpenStreetMap data. */
.map-box {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-frame);
}
.map-box img,
.map-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-box img { object-fit: cover; object-position: 50% 45%; }
.map-load {
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-4);
  border: 0;
  background: rgba(10, 10, 10, .88);
  box-shadow: 0 0 0 1px var(--c-accent-line), 0 6px 24px rgba(0, 0, 0, .5);
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-base);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.map-load svg { width: 22px; height: 22px; color: var(--c-accent-text); }
.map-load:hover { background: var(--c-accent); color: var(--c-on-accent); }
.map-load:hover svg { color: var(--c-on-accent); }
.map-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 6px;
  background: rgba(10, 10, 10, .7);
  font-size: 11px;
  color: var(--c-text-faint);
}
.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.map-actions a {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: 2px solid var(--c-accent-text);
  color: var(--c-accent-text);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.05rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.map-actions a:hover { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.map-actions .map-primary { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.map-actions .map-primary:hover { background: var(--c-strong); border-color: var(--c-strong); color: var(--c-on-strong); }

.footer-bottom .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  padding-top: var(--s-5);
  padding-bottom: var(--s-6); /* the bottom nav's padding covers the safe area */
}
.footer-bottom img { width: 72px; height: 72px; }
.footer-bottom p {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.8;
  color: var(--c-text-faint);
}
/* The legal pages, as links with a 44px tap area */
.legal-links { display: flex; flex-wrap: wrap; column-gap: var(--s-4); }
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-links a:hover { color: var(--c-strong); }
/* Under the map: Google's cookies, once the map is loaded */
.map-note {
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-text-faint);
}
.map-note a { color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Legal pages (aviso-legal/, privacidad/, cookies/) and the overlay the
   footer links open them in: the same <article class="legal"> in both.
   A detail still to be filled in shows as an orange [PENDIENTE: …].
   ============================================================ */
.legal-wrap { padding-top: var(--s-5); padding-bottom: var(--s-7); }
.legal-back { margin: 0 0 var(--s-3); }
.legal-back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-accent-text);
  font-weight: 600;
}
.legal-back a::before { content: "\2190\00A0"; }
.legal { max-width: 70ch; }
.legal-title {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.legal-updated { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--c-text-faint); }
.legal-body { margin-top: var(--s-5); color: var(--c-text-legal); overflow-wrap: break-word; }
.legal-body h2 {
  margin: var(--s-6) 0 var(--s-2);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--t-xl);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-text);
}
.legal-body p { margin: 0 0 var(--s-3); }
.legal-body ul { margin: 0 0 var(--s-3); padding-left: 1.25em; list-style: disc; }
.legal-body li { margin-bottom: var(--s-1); }
.legal-body li::marker { color: var(--c-accent-text); }
.legal-body a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* The physio page (fisioterapia/), on its own or in the overlay: the
   legal pages' title and measure; the ecoguided-physio photo across the
   text column, the hours as in the footer, then the price and the call
   button on one line when they fit. */
.fisio-info { max-width: 70ch; color: var(--c-text-legal); overflow-wrap: break-word; }
/* In the overlay the panel already sets the measure, so the text takes
   its full width, and the scrollbar's width is kept on both sides: even
   margins left and right, whether the panel scrolls or not */
.legal-panel .fisio-info { max-width: none; }
.legal-panel:has(.fisio-info) { scrollbar-gutter: stable both-edges; }
.fi-eyebrow { margin: 0 0 var(--s-2); }
.fi-lead { margin: var(--s-4) 0 0; font-size: var(--t-lg); }
.fisio-info section { margin-top: var(--s-5); }
.fisio-info section p { margin: 0; }
.fi-heading {
  margin: 0 0 var(--s-2);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--t-xl);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-text);
}
.fi-img { display: block; width: 100%; height: auto; margin-top: var(--s-5); }
.fi-team li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s-3);
  padding: 11px 0;
  border-top: 1px solid var(--c-line);
}
.fi-team li:last-child { border-bottom: 1px solid var(--c-line); }
.fi-team strong { color: var(--c-text); }
.fi-team span { color: var(--c-text-muted); }
.fisio-info .hours dd { color: var(--c-text); }
.fisio-info .fi-note { margin-top: var(--s-3); }
.fisio-info .fi-note + .fi-note { margin-top: var(--s-1); }
.fi-book {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}
.fi-book .svc-prices { margin: 0; }
.legal-pending {
  padding: 0 4px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
}
.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--tap) + 20px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
  background: rgba(0, 0, 0, .85);
}
.legal-overlay[hidden] { display: none; }
.legal-panel {
  width: 100%;
  max-width: 760px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5) clamp(18px, 4vw, 40px) var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.legal-panel:focus-visible { outline-offset: -3px; }
.legal-close {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: calc(10px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0 0 4px;
  border: 1px solid rgba(244, 241, 236, .35);
  background: rgba(10, 10, 10, .75);
  color: var(--c-text);
  font: 400 34px/1 var(--f-body);
  cursor: pointer;
}
.legal-close:hover { border-color: var(--c-accent); color: var(--c-accent-text); }

/* ============================================================
   Breakpoint 1 (40em = 640px): the inline nav fits next to the logo
   and replaces the bottom nav.
   Measured, not picked: logo + five links + language switcher need
   517px with Barlow Condensed loaded (two languages; each extra one
   adds ~32px), so 640 leaves room.
   The footer goes two-column here too (it fits from ~500px).
   ============================================================ */
@media (min-width: 40em) {
  html { scroll-padding-bottom: auto; }
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }

  .site-nav { display: block; flex: 1; }
  .header-tools { margin-left: var(--s-2); } /* 24px from the nav */
  .nav-list {
    display: flex;
    justify-content: center;
    gap: 0 clamp(12px, 2.4vw, var(--s-5));
  }
  .nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    padding-inline: 2px;
    color: var(--c-text);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .nav-list a:hover { color: var(--c-accent-text); }

  /* Small bordered pills, as in the mockup */
  .lang-switch { font-size: var(--t-xs); }
  .lang-switch li > * {
    min-width: 0;
    height: auto;
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--c-line);
  }
  .lang-switch .lang-current { border-color: var(--c-accent); }
  .lang-switch a[href]:hover { border-color: var(--c-accent); }
  /* The pills are ~30px tall; links get a 44px hit area around them */
  .lang-switch a[href] { position: relative; }
  .lang-switch a[href]::after { content: ""; position: absolute; inset: -8px; } /* from the padding box */
  .footer-bottom .wrap { padding-bottom: calc(var(--s-6) + var(--safe-bottom)); }

  .benefits-list {
    gap: 14px var(--s-5);
    max-width: calc(var(--max-w) + var(--safe-left) + var(--safe-right));
    margin-inline: auto;
    padding: 18px var(--safe-right) 18px var(--safe-left);
  }
  .benefits-list li:nth-child(n) { padding: 0; border: 0; } /* beats the narrow divider rules */
  .benefit-title::before { content: none; }
  .benefit-title {
    font-size: var(--t-xl);
    letter-spacing: 0;
    line-height: 1;
  }
  .benefit-text {
    margin-top: 0;
    font-size: var(--t-sm);
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "contact hours"
      "map map";
  }
  .map-box { aspect-ratio: 16 / 9; }
}

/* ============================================================
   Breakpoint 2 (55em = 880px): footer goes to three equal columns with
   the map alongside. Each column must hold an hours row (216px).
   ============================================================ */
@media (min-width: 55em) {
  .footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "contact hours map";
  }
  /* Drop Síguenos so the left column ends level with the map column */
  .footer-social h2 { margin-top: var(--s-8); }
  .map-box { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Breakpoint 3 (56.75em = 908px): the benefits strip goes to one row
   of four. Below this it stays 2x2, never three plus one; 908 is where
   four columns are each at least 200px wide.
   ============================================================ */
@media (min-width: 56.75em) {
  .benefits-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   Breakpoint 4 (61.5em = 984px): the rating summary moves left of the
   cards, vertically centred on them. 984 is where the mockup's 200px
   summary, its 34px gap and three cards of at least 230px fit
   (200 + 34 + 3 x 230 + 2 x 12 + 2 x 18 gutters).
   ============================================================ */
@media (min-width: 61.5em) {
  .reviews { padding: clamp(60px, 8vw, 88px) 0 clamp(30px, 4vw, 44px); } /* top doubled, as above */
  .reviews-body {
    max-width: calc(var(--max-w) + var(--safe-left) + var(--safe-right));
    margin-inline: auto;
    padding: 0 var(--safe-right) 0 var(--safe-left);
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". list" "summary list" "link list" ". list";
    column-gap: 34px;
  }
  .reviews-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding: 0;
  }
  .reviews-rating {
    font-size: clamp(3rem, 8vw, 4rem);
    line-height: .9;
    color: var(--c-text);
  }
  .reviews-count { gap: var(--s-2); font-size: var(--t-sm); }
  .reviews-count svg { width: 18px; height: 18px; }
  /* mockup 8px gap + 4px, less the 44px box overhang; the -11px below
     centres the column on the text, as the mockup does, not on the box */
  .reviews-all { margin: 1px 0 -11px; }
  .reviews-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
    overflow: visible;
    padding: 0;
  }
  .review { max-width: none; gap: 10px; padding: var(--s-4) 18px; }
  .review-text { line-height: 1.55; }
  .stars { font-size: 14px; }
  .reviews-stars { font-size: 18px; }

  /* Novedades: side by side; one poster alone keeps the half width */
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posters-single { grid-template-columns: minmax(0, calc(50% - var(--poster-gap) / 2)); justify-content: center; }

  /* Fisio: the photo beside the text, half the card each, the text
     centred on the photo's height */
  .svc-has-img {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  .svc-img { order: 0; }

  /* Horario: every day in one row, the mockup's desktop columns */
  .horario { padding: clamp(44px, 6vw, 76px) 0; }
  .horario-eyebrow { font-size: var(--t-sm); }
  .horario-title { margin-top: 6px; font-size: var(--t-3xl); }
  .horario-sub { margin-top: 10px; font-size: var(--t-base); color: var(--c-text-muted); }
  .tt-tabs-wrap { display: none; }
  .tt-days {
    display: grid;
    grid-template-columns: repeat(var(--days), minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
  }
  .tt-day + .tt-day { margin-top: 0; }
  .tt-day-head {
    padding: var(--s-2) var(--s-3);
    border-bottom: 0;
    background: var(--c-accent);
    color: var(--c-on-accent);
  }
  .tt-weekend .tt-day-head { background: var(--c-weekend); color: var(--c-on-weekend); }
  .tt-day-name { font-size: 1.25rem; }
  .tt-day-count { display: none; }
  /* Tighter than the mockup up to 1200px, so the longest class names fit
     beside the time in a 147px column at 984px (measured). A name that
     still does not fit (seven days, a longer name) drops under its time
     rather than breaking mid-word. */
  .tt-slot {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 6px;
    min-height: 0;
    padding: 9px var(--s-2);
    border-bottom-color: var(--c-line-soft);
    font-size: var(--t-sm);
  }
  .tt-time { width: auto; }
  .tt-class { margin-left: auto; text-align: right; }
  .tt-note { margin-top: var(--s-4); font-size: var(--t-sm); }

  /* Clases: three columns, the mockup's desktop sizes */
  .clases { padding: clamp(48px, 7vw, 88px) 0; }
  .clases-eyebrow { font-size: var(--t-sm); }
  .clases-title { margin-top: 6px; font-size: var(--t-3xl); }
  .clases-sub { margin-top: 10px; font-size: var(--t-base); color: var(--c-text-muted); }
  .classes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: 26px; }
  .class-card { padding: 18px; }
  .class-name { font-size: 1.55rem; }
  .class-text { margin-top: 6px; font-size: 14.5px; line-height: var(--lh-body); color: var(--c-text-muted); }

  /* Tarifas: three cards in a row, the rates always shown */
  .tarifas { padding: var(--section-pad) 0; }
  .tarifas-head { margin-bottom: 34px; text-align: center; }
  .tarifas-eyebrow { font-size: var(--t-sm); }
  .tarifas-title { margin-top: 6px; font-size: var(--t-3xl); }
  .tarifas-sub {
    max-width: 46ch;
    margin: var(--s-3) auto 0;
    font-size: var(--t-base);
    color: var(--c-text-muted);
  }
  .plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
    margin-top: 0;
  }
  .plan {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 26px 22px;
  }
  .plan-featured { box-shadow: 0 0 40px rgba(255, 163, 23, .18); }
  /* Name, then price, then note: the main block's children join the card */
  .plan-main { display: contents; }
  .plan-name { order: 1; font-size: 1.3rem; letter-spacing: .04em; }
  .plan-price { order: 2; max-width: none; margin: 10px 0 2px; text-align: left; }
  .plan-note { order: 3; flex-basis: auto; font-size: var(--t-sm); }
  .plan-badge {
    position: absolute;
    top: -13px;
    left: 22px;
    white-space: nowrap; /* one line on the border; caja caps it at 30 characters */
    padding: var(--s-1) var(--s-3);
    font-size: 13px;
    letter-spacing: .1em;
  }
  .plan-amount { font-size: 3.6rem; }
  .plan-period { display: inline; margin: 0; font-size: 1.1rem; }

  .rates { margin-top: 0; background: none; border: 0; }
  .rates-toggle { display: none; }
  .rates-group {
    margin: 30px 0 10px;
    padding: 0;
    border: 0;
    color: var(--c-text);
    font-style: italic;
    font-weight: 900;
    font-size: var(--t-xl);
    letter-spacing: 0;
    line-height: 1.1;
  }
  /* Rows with lines between them; a short last row leaves empty space,
     not a grey cell. The top line is drawn by the first row's cells, so
     a group of one or two rates has no line over the empty columns. */
  .rates-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid var(--c-line);
  }
  .rate:nth-child(-n+3) { border-top: 1px solid var(--c-line); }
  .rates-toggle + .rates-list { margin-top: var(--s-4); }
  .rate {
    padding: 14px 18px;
    background: var(--c-surface-3);
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--t-base);
  }
  .rate-detail { font-size: var(--t-xs); }
  .rates-note,
  .plans + .rates-note {
    margin: var(--s-4) 0 0;
    text-align: center;
    font-size: var(--t-sm);
    color: var(--c-text-sub);
  }
}

/* Horario from 1200px: the mockup's own slot spacing and size */
@media (min-width: 75em) {
  .tt-slot { gap: 0 var(--s-2); padding: 9px var(--s-3); font-size: 14.5px; }
}

/* ============================================================
   Hero over the photo: from breakpoint 4 AND in landscape (wider than
   tall). Width alone is not enough: a large tablet in portrait is wider
   than 984px but tall, and the photo-filled hero left the headline low
   under an empty stretch of photo. Portrait screens keep the stacked hero
   at any width; any landscape window from 984px gets the photo, however
   close to square (a 4:3 limit stacked ordinary desktop windows). The
   same condition, negated, picks the phone photo in index.php
   (<source media>): keep them in step.
   ============================================================ */
@media (min-width: 61.5em) and (orientation: landscape) {
  .hero {
    justify-content: flex-end;
    min-height: clamp(560px, 88vh, 820px);
  }
  .hero-img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: 0% 50%;
  }
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, 0) 60%),
      linear-gradient(180deg, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, .85) 100%);
  }
  .hero-body {
    margin-top: 0;
    padding-top: clamp(40px, 8vw, 90px);
    padding-bottom: clamp(34px, 5vw, 56px);
  }
  .hero-body::before { content: none; }
  .hero-eyebrow { font-size: clamp(15px, 2.6vw, 20px); }
  .hero-title {
    font-size: clamp(3rem, 11vw, 7.2rem);
    line-height: .92;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
  }
  .hero-sub {
    max-width: 44ch;
    margin-top: 18px;
    font-size: clamp(16px, 2.4vw, 19px);
    line-height: inherit;
  }
  .hero-actions { margin-top: 26px; }
  .hero-primary,
  .hero-secondary { flex: 0 1 auto; }
  .hero-primary {
    height: auto;
    padding: var(--s-4) 28px;
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }
  .hero-secondary {
    justify-content: flex-start;
    height: auto;
    padding: var(--s-4) 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { animation: none; display: none; }
}