/* Built file. Do not edit directly - edit assets/css/blocks/*.css and re-run bin/build-css.ps1 */

/* ---- 00-tokens.css ---- */

:root {
  /* colour */
  --sa-ink:        #101A16;
  --sa-forest:     #23392F;
  --sa-bone:       #F6F5F1;
  --sa-surface:    #FFFFFF;
  --sa-mist:       #7C8A83;   /* >=21px text and non-text only */
  --sa-mist-text:  #5E6C66;   /* small secondary text, AA compliant */
  --sa-line:       rgba(16, 26, 22, 0.10);
  --sa-line-dark:  rgba(246, 245, 241, 0.16);
  --sa-lago:       #1B5C6E;   /* single accent, light backgrounds */
  --sa-lago-dark:  #6FB3C4;   /* same accent, forest backgrounds only */

  /* type */
  --sa-display: "EB Garamond", Georgia, serif;
  --sa-ui:      "Geist", system-ui, -apple-system, sans-serif;
  --sa-t-0: 0.8125rem; /* 13px, topbar + legal */
  --sa-t-1: 1.0625rem; /* 17px, body base */
  --sa-t-2: 1.3125rem; /* 21px */
  --sa-t-3: 1.6875rem; /* 27px */
  --sa-t-4: 2.0625rem; /* 33px */
  --sa-t-5: 2.625rem;  /* 42px */
  --sa-t-6: 3.25rem;   /* 52px */
  --sa-t-display: clamp(2.4rem, 5vw, 3.4rem);

  /* space */
  --sa-s-1: 4px;  --sa-s-2: 8px;  --sa-s-3: 12px; --sa-s-4: 16px;
  --sa-s-5: 24px; --sa-s-6: 32px; --sa-s-7: 48px; --sa-s-8: 64px;
  --sa-s-9: 96px; --sa-s-10: 128px;
  --sa-section: clamp(4.5rem, 9vw, 8rem);
  --sa-container: 1280px;
  --sa-gutter: clamp(1rem, 4vw, 2.5rem);

  /* shape + motion */
  --sa-r-card: 12px; --sa-r-control: 6px; --sa-r-pill: 999px;
  --sa-shadow-hover: 0 2px 8px rgba(16, 26, 22, 0.05);
  --sa-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sa-dur: 200ms;
  --sa-dur-reveal: 600ms;
}

/* ---- 01-base.css ---- */

/* Font faces: self-hosted latin subset (covers Spanish accents and punctuation),
   font-display swap. Files live in assets/fonts/ and ship with the theme. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--sa-t-1) / 1.65 var(--sa-ui);
  color: var(--sa-ink);
  background: var(--sa-bone);
  font-variant-numeric: tabular-nums lining-nums;
}

h1, h2, h3, h4 {
  font-family: var(--sa-display);
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-weight: 500;
  margin: 0 0 var(--sa-s-4);
  font-feature-settings: "liga" 1, "dlig" 0;
}

p { margin: 0 0 var(--sa-s-4); max-width: 68ch; }

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

a { color: inherit; }
/* Anchors without a block class must still resolve inside our palette. */
[class^="sa-"] a:not([class]),
[class*=" sa-"] a:not([class]) { color: inherit; }

.sa-eyebrow {
  font-family: var(--sa-display);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--sa-lago);
  display: block;
  margin-block-end: var(--sa-s-3);
}
/* On the forest band the light-background accent (--sa-lago) fails AA against
   the dark bg — swap for the forest-safe accent. */
.sa-forest .sa-eyebrow { color: var(--sa-lago-dark); }

.sa-container {
  max-width: var(--sa-container);
  margin-inline: auto;
  padding-inline: var(--sa-gutter);
}

.sa-section {
  padding-block: var(--sa-section);
}

.sa-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sa-skip {
  position: absolute;
  left: var(--sa-s-4);
  top: -100px;
  background: var(--sa-forest);
  color: var(--sa-bone);
  padding: var(--sa-s-3) var(--sa-s-5);
  border-radius: var(--sa-r-control);
  z-index: 100;
  transition: top var(--sa-dur) var(--sa-ease);
}
.sa-skip:focus { top: var(--sa-s-4); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--sa-lago);
  outline-offset: 2px;
  border-radius: var(--sa-r-control);
}
.sa-forest :focus-visible { outline-color: var(--sa-lago-dark); }

.sa-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--sa-dur-reveal) var(--sa-ease), transform var(--sa-dur-reveal) var(--sa-ease);
}
.sa-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .sa-reveal { opacity: 1; transform: none; }
}

/* Naturalist plates: constant line weight at any render size. Still used on
   /servicios/ (fee table, service cards) and /servicios/area/{slug}/ — the
   home page no longer renders any plate.
   vector-effect is NOT an inherited property, so declaring it on the <svg> root
   leaves every child path scaling its stroke with the viewBox — at 96px a 1-unit
   stroke on a 200-unit canvas renders at 0.48px and the plate reads as a smudge.
   Declaring it per descendant is what actually holds the weight. */
.sa-areas__plate svg *,
.sa-areas__plate path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.15;
}

/* ---- 02-buttons.css ---- */

.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sa-s-2);
  min-height: 44px;
  padding-inline: var(--sa-s-5);
  border-radius: var(--sa-r-control);
  font: 500 var(--sa-t-1) var(--sa-ui);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--sa-dur) var(--sa-ease),
              color var(--sa-dur) var(--sa-ease),
              border-color var(--sa-dur) var(--sa-ease),
              transform var(--sa-dur) var(--sa-ease),
              box-shadow var(--sa-dur) var(--sa-ease);
}
.sa-btn:active { transform: scale(0.98); }

.sa-btn--primary {
  background: var(--sa-lago);
  color: #fff;
}
.sa-btn--primary:hover { background: #17505F; }
.sa-btn--primary:disabled,
.sa-btn--primary[aria-disabled="true"] {
  background: var(--sa-mist);
  cursor: not-allowed;
}

.sa-btn--ghost {
  background: transparent;
  border-color: var(--sa-line);
  color: var(--sa-ink);
}
.sa-btn--ghost:hover { border-color: var(--sa-lago); color: var(--sa-lago); }
.sa-btn--ghost:disabled { opacity: 0.5; }

/* Dark bands (hero scrim, ubicación/contacto forest) need a bone ghost, not the
   ink-on-transparent default, or the outline and label both vanish. */
.sa-forest .sa-btn--ghost {
  border-color: rgba(246, 245, 241, 0.55);
  color: var(--sa-bone);
}
.sa-forest .sa-btn--ghost:hover {
  border-color: var(--sa-bone);
  color: var(--sa-bone);
  background: rgba(246, 245, 241, 0.12);
}

.sa-btn--whatsapp {
  background: var(--sa-forest);
  color: var(--sa-bone);
}
.sa-btn--whatsapp:hover { background: #2C4A3C; }

/* On a forest band the button and the section background are the same colour —
   invert to bone so the WhatsApp CTA stays a distinct, tappable shape. */
.sa-forest .sa-btn--whatsapp {
  background: var(--sa-bone);
  color: var(--sa-forest);
}
.sa-forest .sa-btn--whatsapp:hover { background: #E5E3DB; }

.sa-btn--small { min-height: 36px; padding-inline: var(--sa-s-4); font-size: var(--sa-t-0); }

/* ---- 03-topbar.css ---- */

.sa-topbar {
  background: var(--sa-forest);
  color: var(--sa-bone);
}
.sa-topbar__inner {
  max-width: var(--sa-container);
  margin-inline: auto;
  padding-inline: var(--sa-gutter);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-s-4);
  font-size: var(--sa-t-0);
}
.sa-topbar__hours { white-space: nowrap; }
.sa-topbar__address { display: none; }
.sa-topbar__links { display: flex; align-items: center; gap: var(--sa-s-5); }
.sa-topbar__link {
  color: var(--sa-lago-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.sa-topbar__link:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .sa-topbar__address { display: inline; color: var(--sa-bone); }
}

/* ---- 04-header.css ---- */

.sa-header {
  background: var(--sa-surface);
  border-block-end: 1px solid var(--sa-line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.sa-header__inner {
  max-width: var(--sa-container);
  margin-inline: auto;
  padding-inline: var(--sa-gutter);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-s-5);
}
.sa-header__logo { color: var(--sa-ink); display: flex; align-items: center; }
.sa-header__logo svg { height: 32px; width: auto; }

.sa-header__nav { display: none; }
.sa-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--sa-s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sa-header__nav a {
  color: var(--sa-ink);
  text-decoration: none;
  font-size: var(--sa-t-1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sa-header__nav a:hover { color: var(--sa-lago); }

.sa-header__cta { display: none; }

.sa-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-control);
  cursor: pointer;
}
.sa-header__toggle svg { width: 22px; height: 22px; }

.sa-header__sheet {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  background: var(--sa-surface);
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: var(--sa-s-6) var(--sa-gutter);
  transform: translateX(100%);
  transition: transform var(--sa-dur-reveal) var(--sa-ease);
}
.sa-header__sheet.is-open { transform: translateX(0); }
.sa-header__sheet-close {
  align-self: flex-end;
  width: 44px; height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.sa-header__sheet ul {
  list-style: none;
  margin: var(--sa-s-7) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sa-s-5);
}
.sa-header__sheet a {
  color: var(--sa-ink);
  font-family: var(--sa-display);
  font-size: var(--sa-t-4);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--sa-dur-reveal) var(--sa-ease), transform var(--sa-dur-reveal) var(--sa-ease);
}
.sa-header__sheet.is-open a { opacity: 1; transform: translateY(0); }
.sa-header__sheet.is-open li:nth-child(1) a { transition-delay: 60ms; }
.sa-header__sheet.is-open li:nth-child(2) a { transition-delay: 120ms; }
.sa-header__sheet.is-open li:nth-child(3) a { transition-delay: 180ms; }
.sa-header__sheet.is-open li:nth-child(4) a { transition-delay: 240ms; }
.sa-header__sheet-cta { margin-block-start: auto; }

@media (min-width: 1024px) {
  .sa-header__nav { display: block; }
  .sa-header__cta { display: inline-flex; }
  .sa-header__toggle { display: none; }
}

/* ---- 05-hero.css ---- */

.sa-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 78vh, 46rem);
}
.sa-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sa-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(16, 26, 22, 0.92) 0%, rgba(16, 26, 22, 0.78) 45%, rgba(35, 57, 47, 0.35) 100%);
}
.sa-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--sa-container);
  margin-inline: auto;
  padding-inline: var(--sa-gutter);
  padding-block: var(--sa-s-9) var(--sa-s-8);
}
.sa-hero__copy {
  max-width: 60ch;
}
.sa-hero__title {
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  color: var(--sa-bone);
  max-width: 16ch;
}
.sa-hero__lede {
  font-size: var(--sa-t-2);
  color: rgba(246, 245, 241, 0.82);
  max-width: 42ch;
}
.sa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-s-4);
  margin-block-start: var(--sa-s-6);
}
.sa-btn--ghost-on-photo {
  border-color: rgba(246, 245, 241, 0.55);
  color: var(--sa-bone);
}
.sa-btn--ghost-on-photo:hover {
  border-color: var(--sa-bone);
  color: var(--sa-bone);
  background: rgba(246, 245, 241, 0.12);
}

@media (max-width: 767px) {
  .sa-hero { min-height: clamp(26rem, 82vh, 34rem); }
}

/* ---- 06-areas.css ---- */

.sa-areas {
  background: var(--sa-bone);
}
.sa-areas__grid {
  display: grid;
  gap: var(--sa-s-6);
  grid-template-columns: 1fr;
}
.sa-areas__card {
  display: block;
  background: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-card);
  padding: var(--sa-s-7);
  text-decoration: none;
  color: var(--sa-ink);
  transition: border-color var(--sa-dur) var(--sa-ease);
}
.sa-areas__numeral {
  display: block;
  font-family: var(--sa-display);
  font-size: 2.6rem;
  color: var(--sa-lago);
  opacity: 0.38;
  margin-block-end: var(--sa-s-4);
  transition: opacity var(--sa-dur) var(--sa-ease);
}
.sa-areas__name {
  font-family: var(--sa-display);
  font-size: var(--sa-t-3);
  margin: 0 0 var(--sa-s-3);
}
.sa-areas__desc {
  color: var(--sa-mist-text);
  font-size: var(--sa-t-1);
  margin: 0 0 var(--sa-s-5);
}
.sa-areas__link {
  color: var(--sa-lago);
  font-size: var(--sa-t-0);
  font-weight: 500;
}
.sa-areas__card:hover,
.sa-areas__card:focus-visible {
  border-color: var(--sa-lago);
}
.sa-areas__card:hover .sa-areas__numeral,
.sa-areas__card:focus-visible .sa-areas__numeral {
  opacity: 1;
}

/* Taxonomy archive header plate — /servicios/area/{slug}/ still uses sa_plate(). */
.sa-areas__plate {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  color: var(--sa-ink);
}

@media (min-width: 768px) {
  .sa-areas__grid { grid-template-columns: 1fr 1fr; gap: var(--sa-s-7); }
}

/* ---- 07b-aranceles.css ---- */

.sa-aranceles {
  background: var(--sa-surface);
}
.sa-aranceles__grid {
  display: grid;
  gap: var(--sa-s-6);
  grid-template-columns: 1fr;
  margin-block-end: var(--sa-s-7);
}
.sa-aranceles__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-card);
  padding: var(--sa-s-7);
}
.sa-aranceles__eyebrow {
  font-size: var(--sa-t-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-lago);
  margin-block-end: var(--sa-s-3);
}
.sa-aranceles__name {
  font-family: var(--sa-display);
  font-size: var(--sa-t-3);
  margin: 0 0 var(--sa-s-4);
}
.sa-aranceles__price {
  font-family: var(--sa-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--sa-s-5);
}
.sa-aranceles__price-label {
  display: block;
  font-family: var(--sa-ui);
  font-size: var(--sa-t-0);
  color: var(--sa-mist-text);
  font-weight: 400;
}
.sa-aranceles__items {
  list-style: none;
  margin: 0 0 var(--sa-s-6);
  padding: 0;
  flex-grow: 1;
}
.sa-aranceles__items li {
  padding-block: var(--sa-s-3);
  border-block-end: 1px solid var(--sa-line);
  color: var(--sa-mist-text);
  font-size: var(--sa-t-1);
}
.sa-aranceles__items li:first-child { padding-block-start: 0; }
.sa-aranceles__items li:last-child { border-block-end: none; }
.sa-aranceles__cta {
  align-self: flex-start;
  color: var(--sa-lago);
  font-weight: 500;
  text-decoration: none;
}
.sa-aranceles__cta:hover { text-decoration: underline; }
.sa-aranceles__empty {
  text-align: center;
  color: var(--sa-mist-text);
  padding-block: var(--sa-s-7);
}
.sa-aranceles__more { text-align: center; margin: 0; }

@media (min-width: 768px) {
  .sa-aranceles__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 07c-cita.css ---- */

.sa-cita {
  position: relative;
  overflow: hidden;
  padding-block: var(--sa-section);
}
.sa-cita__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sa-cita__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(35, 57, 47, 0.91);
}
.sa-cita__inner {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin-inline: auto;
  padding-inline: var(--sa-gutter);
  text-align: center;
}
.sa-cita__quote {
  font-family: var(--sa-display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.35;
  color: var(--sa-bone);
  margin: 0 0 var(--sa-s-5);
}
.sa-cita__cite {
  display: block;
  font-family: var(--sa-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The accent tone measured ~3.7:1 over the brightest sky pixels of this crop,
     so this line uses bone instead: it clears AA over every part of the photo
     without relying on a text-shadow to rescue the ratio. */
  color: rgba(246, 245, 241, 0.78);
  font-style: normal;
}

/* ---- 07-fee-table.css ---- */

.sa-fee-table__filter {
  display: flex;
  gap: var(--sa-s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--sa-s-5);
  margin-block-end: var(--sa-s-6);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sa-fee-table__filter::-webkit-scrollbar { display: none; }
.sa-fee-table__pill {
  scroll-snap-align: start;
  flex-shrink: 0;
  min-height: 44px;
  padding-inline: var(--sa-s-5);
  border-radius: var(--sa-r-pill);
  border: 1px solid var(--sa-line);
  background: var(--sa-surface);
  color: var(--sa-ink);
  font-size: var(--sa-t-0);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.sa-fee-table__pill[aria-pressed="true"] {
  background: var(--sa-forest);
  color: var(--sa-bone);
  border-color: var(--sa-forest);
}

.sa-fee-table__group { margin-block-end: var(--sa-s-7); }
.sa-fee-table__group[hidden] { display: none; }
.sa-fee-table__group-heading {
  display: flex;
  align-items: center;
  gap: var(--sa-s-3);
  padding-block-end: var(--sa-s-4);
  border-block-end: 1px solid var(--sa-line);
  margin-block-end: var(--sa-s-2);
}
.sa-fee-table__group-plate { width: 32px; height: 32px; color: var(--sa-forest); }
.sa-fee-table__group-title { font-family: var(--sa-display); font-size: var(--sa-t-2); margin: 0; }

.sa-fee-table__table { width: 100%; border-collapse: collapse; }
.sa-fee-table__table th,
.sa-fee-table__table td { text-align: start; padding-block: var(--sa-s-4); }
.sa-fee-table__table thead th {
  font-size: var(--sa-t-0);
  color: var(--sa-mist-text);
  font-weight: 500;
  border-block-end: 1px solid var(--sa-line);
}
.sa-fee-table__row { border-block-end: 1px solid rgba(16, 26, 22, 0.06); }
.sa-fee-table__name { font-family: var(--sa-display); font-size: var(--sa-t-2); font-weight: 500; }
.sa-fee-table__scope { color: var(--sa-mist-text); }
.sa-fee-table__value {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sa-fee-table__clp { display: block; font-size: var(--sa-t-0); color: var(--sa-mist-text); }
.sa-fee-table__action { text-align: end; }
.sa-fee-table__cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

@media (max-width: 767px) {
  .sa-fee-table__table,
  .sa-fee-table__table tbody,
  .sa-fee-table__row,
  .sa-fee-table__row > * { display: block; }
  .sa-fee-table__table thead { position: absolute; clip-path: inset(50%); }

  .sa-fee-table__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name value" "scope scope" "action action";
    column-gap: var(--sa-s-4);
    padding-block: var(--sa-s-5);
    border-block-end: 1px solid var(--sa-line);
  }
  .sa-fee-table__name   { grid-area: name;  line-height: 1.2; }
  .sa-fee-table__value  { grid-area: value; font-size: var(--sa-t-2); text-align: end; color: var(--sa-ink); }
  .sa-fee-table__scope  { grid-area: scope; margin-block-start: var(--sa-s-2); }
  .sa-fee-table__action { grid-area: action; text-align: start; margin-block-start: var(--sa-s-3); }
  .sa-fee-table__scope::before { content: attr(data-label) ": "; color: var(--sa-mist-text); }
}

/* ---- 08-proceso.css ---- */

.sa-proceso {
  background: var(--sa-bone);
}
.sa-proceso__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sa-s-8);
  position: relative;
}
.sa-proceso__step {
  display: flex;
  gap: var(--sa-s-5);
  align-items: flex-start;
}
.sa-proceso__num {
  font-family: var(--sa-display);
  font-size: var(--sa-t-3);
  color: var(--sa-lago);
  width: 40px;
  flex-shrink: 0;
}
.sa-proceso__title { font-family: var(--sa-display); font-size: var(--sa-t-3); margin: 0 0 var(--sa-s-2); }
.sa-proceso__text { color: var(--sa-mist-text); margin: 0; max-width: 40ch; }

@media (min-width: 1024px) {
  .sa-proceso__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sa-s-6);
  }
  .sa-proceso__list::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sa-line);
  }
  .sa-proceso__step { flex-direction: column; }
}

/* ---- 09-reviews.css ---- */

.sa-reviews {
  background: var(--sa-surface);
}
.sa-reviews__badge {
  display: inline-flex;
  align-items: center;
  margin-block-end: var(--sa-s-5);
  padding: 4px var(--sa-s-4);
  border-radius: var(--sa-r-pill);
  background: var(--sa-lago);
  color: var(--sa-bone);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sa-reviews__head { margin-block-end: var(--sa-s-7); }
.sa-reviews__rating { display: flex; align-items: baseline; gap: var(--sa-s-3); }
.sa-reviews__score { font-family: var(--sa-display); font-size: var(--sa-t-5); }
.sa-reviews__count { color: var(--sa-mist-text); }
.sa-reviews__link { color: var(--sa-lago); text-decoration: underline; }
.sa-reviews__neutral { color: var(--sa-mist-text); max-width: 60ch; }

.sa-reviews__grid {
  display: grid;
  gap: var(--sa-s-7);
}
.sa-reviews__quote { margin: 0; }
.sa-reviews__quote--lead p { font-family: var(--sa-display); font-size: var(--sa-t-3); line-height: 1.35; }
.sa-reviews__quote p { font-size: var(--sa-t-2); }
.sa-reviews__cite { display: block; margin-block-start: var(--sa-s-4); color: var(--sa-mist-text); font-size: var(--sa-t-0); font-style: normal; }
.sa-reviews__stars { display: inline-flex; gap: 2px; margin-block-end: var(--sa-s-3); }
.sa-reviews__star { fill: var(--sa-lago); }
.sa-reviews__star--empty { fill: var(--sa-line); }

@media (min-width: 1024px) {
  .sa-reviews__grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .sa-reviews__quote--lead { grid-row: span 2; }
  .sa-reviews__quote:not(.sa-reviews__quote--lead) + .sa-reviews__quote { border-block-start: 1px solid var(--sa-line); padding-block-start: var(--sa-s-7); margin-block-start: var(--sa-s-7); }
}

/* Two columns in the tablet band, so the third card wraps cleanly instead of
   leaving a hole beside a 3-up grid that does not fit. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sa-reviews__grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

/* ---- 10-contact.css ---- */

.sa-contact {
  background: var(--sa-forest);
  color: rgba(246, 245, 241, 0.78);
}
.sa-contact__grid {
  display: grid;
  gap: var(--sa-s-7);
}
.sa-contact__map {
  width: 100%;
  min-height: 380px;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--sa-r-card);
}
.sa-contact__map--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 245, 241, 0.22);
  color: rgba(246, 245, 241, 0.62);
  text-align: center;
  padding: var(--sa-s-5);
}
.sa-contact__info { margin-block-end: var(--sa-s-6); }
.sa-contact__row { display: flex; gap: var(--sa-s-3); margin-block-end: var(--sa-s-3); align-items: center; }
.sa-contact__row a:not(.sa-btn) { color: var(--sa-lago-dark); text-decoration: underline; }

.sa-contact .ff-el-input--label label,
.sa-contact label {
  font-size: var(--sa-t-0);
  color: rgba(246, 245, 241, 0.72);
  display: block;
  margin-block-end: var(--sa-s-2);
}
.sa-contact input[type="text"],
.sa-contact input[type="email"],
.sa-contact input[type="tel"],
.sa-contact textarea,
.sa-contact select,
.sa-contact .ff-el-form-control {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(246, 245, 241, 0.22);
  border-radius: var(--sa-r-control);
  padding: var(--sa-s-3) var(--sa-s-4);
  font: var(--sa-t-1) var(--sa-ui);
  background: rgba(246, 245, 241, 0.08);
  color: var(--sa-bone);
}
.sa-contact input::placeholder,
.sa-contact textarea::placeholder { color: rgba(246, 245, 241, 0.62); }
.sa-contact input:focus,
.sa-contact textarea:focus,
.sa-contact select:focus { border-color: var(--sa-lago-dark); }
.sa-contact .ff-btn-submit,
.sa-contact button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--sa-s-5);
  border-radius: var(--sa-r-control);
  background: var(--sa-lago-dark);
  color: var(--sa-ink);
  border: none;
  font: 500 var(--sa-t-1) var(--sa-ui);
  cursor: pointer;
}

.sa-contact-fallback { display: flex; flex-direction: column; gap: var(--sa-s-4); align-items: flex-start; }

@media (min-width: 1024px) {
  .sa-contact__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---- 11-footer.css ---- */

.sa-footer {
  background: var(--sa-forest);
  color: rgba(246, 245, 241, 0.78);
}
.sa-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sa-s-6);
  padding-block: var(--sa-s-8);
}
.sa-footer__brand svg { height: 32px; width: auto; color: var(--sa-bone); }
.sa-footer__brand-tag { margin-block-start: var(--sa-s-4); max-width: 32ch; }
.sa-footer__heading {
  font-size: var(--sa-t-0);
  color: var(--sa-bone);
  text-transform: none;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  margin-block-end: var(--sa-s-4);
}
.sa-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sa-s-3); }
.sa-footer__list a { text-decoration: none; }
.sa-footer__list a:hover { color: var(--sa-lago-dark); }
.sa-footer__bottom {
  border-block-start: 1px solid var(--sa-line-dark);
  padding-block: var(--sa-s-5);
  font-size: var(--sa-t-0);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-s-3);
  justify-content: space-between;
}

@media (min-width: 768px) {
  .sa-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- 12-service-card.css ---- */

.sa-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sa-s-6);
}
.sa-service-card {
  background: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-r-card);
  padding: var(--sa-s-6);
  display: block;
  text-decoration: none;
  color: var(--sa-ink);
  transition: box-shadow var(--sa-dur) var(--sa-ease), transform var(--sa-dur) var(--sa-ease);
}
.sa-service-card:hover,
.sa-service-card:focus-visible {
  box-shadow: var(--sa-shadow-hover);
}
.sa-service-card:active { transform: scale(0.995); }
.sa-service-card__plate { width: 56px; height: 56px; color: var(--sa-forest); margin-block-end: var(--sa-s-5); transition: stroke-width var(--sa-dur) var(--sa-ease); }
.sa-service-card:hover .sa-service-card__plate path { stroke-width: 1.25; }
.sa-service-card__title { font-family: var(--sa-display); font-size: var(--sa-t-3); margin: 0 0 var(--sa-s-3); }
.sa-service-card__summary { color: var(--sa-mist-text); margin: 0 0 var(--sa-s-5); }
.sa-service-card__price { font-variant-numeric: tabular-nums; font-weight: 500; }

.sa-service-detail__items {
  margin: 0 0 var(--sa-s-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sa-s-3);
}
.sa-service-detail__item {
  padding-inline-start: var(--sa-s-5);
  position: relative;
}
.sa-service-detail__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sa-lago);
}
.sa-service-detail__meta {
  display: grid;
  gap: var(--sa-s-5);
  margin: 0 0 var(--sa-s-6);
  padding: var(--sa-s-5) 0;
  border-block: 1px solid var(--sa-line);
}
.sa-service-detail__meta dt { font-size: var(--sa-t-0); color: var(--sa-mist-text); margin: 0; }
.sa-service-detail__meta dd { margin: var(--sa-s-1) 0 0; font-size: var(--sa-t-2); }

@media (min-width: 768px) {
  .sa-service-detail__meta { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 14-utilities.css ---- */

.sa-float-whatsapp {
  position: fixed;
  inset-block-end: max(16px, env(safe-area-inset-bottom));
  inset-inline-end: 16px;
  z-index: 30;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sa-forest);
  color: var(--sa-bone);
  box-shadow: var(--sa-shadow-hover);
  transition: opacity var(--sa-dur) var(--sa-ease);
}
.sa-float-whatsapp svg { width: 26px; height: 26px; }
.sa-float-whatsapp.is-hidden { opacity: 0; pointer-events: none; }

.sa-404 {
  text-align: center;
  padding-block: var(--sa-s-10);
}
.sa-404__code { font-family: var(--sa-display); font-size: var(--sa-t-6); color: var(--sa-mist); }

.sa-taxonomy__head {
  display: flex;
  align-items: center;
  gap: var(--sa-s-5);
}
.sa-taxonomy__head .sa-areas__plate { width: 56px; height: 56px; }

.sa-page-intro { padding-block-start: var(--sa-s-8); }