/* ==========================================================================
   Al Tiro — theme (fictional brand, demo). Slug: altiro-hogar
   "Friendly and fast": warm cream, deep ink-green text, forest green as the trust colour, soft mint surfaces
   and a coral accent kept for the actions. Restrained rounded cards (14px), pill chips for the response-time
   promises, one set of inline line icons, big photos of hands and tools.
   Fonts: Bricolage Grotesque 600/700 (headings) + DM Sans 400/500 (body). Uses the premium layer, the image
   pipeline and the shared extra-fields module.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
/* Metric-matched local fallbacks (Arial Bold / Arial). size-adjust is the ratio of each font's advance width to
   the fallback's over this page's headings and body copy (measured at 1000px); the vertical overrides are the web
   font's ascent and descent divided by size-adjust. */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 102.1%;
  ascent-override: 91.1%;
  descent-override: 26.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Fallback";
  font-weight: 400;
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 104.5%;
  ascent-override: 94.9%;
  descent-override: 29.7%;
  line-gap-override: 0%;
}

:root {
  /* Palette (as briefed) */
  --at-cream: #faf7f2;
  --at-ink: #14201b;
  --at-forest: #1e5b45;
  --at-mint: #dcebe3;
  --at-coral: #c23f27;            /* CTA fill; white text 5.2:1 (the briefed #d9482f gives 4.3:1, below AA) */
  --at-coral-deep: #a8321c;       /* CTA hover; white text 6.7:1 */
  --at-coral-bright: #d9482f;     /* decorative only (icons, markers): 4.0:1 on cream, never text */

  /* Derived. Pairs checked: ink 15.7:1 on cream, 13.6:1 on mint; muted 6.8:1 on cream, 5.9:1 on mint;
     forest 7.5:1 on cream, 6.5:1 on mint; white 8.0:1 on forest. */
  --at-white: #ffffff;
  --at-muted: #4a5a53;
  --at-mint-deep: #c7ddd0;        /* hairlines on mint */
  --at-line: rgb(20 32 27 / 0.14);
  --at-field: #5b7368;            /* control borders: 5.0:1 on white (UI >= 3:1) */
  --at-warm: #fff1ec;             /* safety note surface; ink 16:1, coral-deep 5.9:1 */

  --color-bg: var(--at-cream);
  --color-surface: var(--at-white);
  --color-text: var(--at-ink);
  --color-text-muted: var(--at-muted);
  --color-border: var(--at-line);
  --color-border-strong: var(--at-field);
  --color-accent: var(--at-coral);
  --color-accent-ink: var(--at-forest);        /* focus rings and links on light surfaces */
  --color-on-accent: #ffffff;

  --color-dark-bg: var(--at-forest);
  --color-dark-surface: #174a38;
  --color-dark-text: var(--at-cream);          /* 7.5:1 on forest */
  --color-dark-muted: var(--at-mint);          /* 6.5:1 on forest */
  --color-dark-border: rgb(250 247 242 / 0.28);

  --color-error: #a3201b;                      /* 6.9:1 on white */
  --color-success: #1e5b45;

  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Arial Rounded MT Bold", Arial, sans-serif;
  --font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;

  --at-radius: 14px;
  --section-space: clamp(3.75rem, 2.2rem + 6vw, 6.5rem);
  --hero-space: 0px;
  --hero-bg: var(--at-cream);
  --header-bg: var(--at-cream);
  --header-border: var(--at-line);
  --button-font: var(--font-display);
  --button-size: 1rem;
  --button-weight: 600;
  --button-tracking: 0;
  --button-transform: none;
  --button-radius: 999px;
  --button-padding: 0.75rem 1.5rem;
  --card-radius: var(--at-radius);
  --footer-bg: var(--at-ink);
  --footer-text: #bfd8cb;                      /* 11.1:1 on ink */
  --footer-border: transparent;
  --field-radius: 10px;
  --bar-h: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* Forest and ink contexts: the focus ring is cream, muted text is mint. */
.on-dark,
.section--dark {
  --color-accent-ink: var(--at-cream);
  --color-text-muted: var(--at-mint);
}
.on-dark {
  --color-text-muted: #bfd8cb;
}

body {
  font-weight: 400;
}
strong,
b {
  font-weight: 500;
}

/* ---- Type ---- */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h2 {
  font-size: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);
  line-height: 1.05;
}
h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.eyebrow {
  display: inline-block;
  justify-self: start;
  color: var(--at-forest);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
.section--dark .eyebrow {
  color: var(--at-mint);
}
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}
.section__header {
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  max-width: 44rem;
}
.note {
  max-width: none;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ---- Buttons: coral fill with white text; ghost = forest outline. Pills, 48px tall. ---- */
.button {
  min-height: 48px;
  border-width: 2px;
  border-color: var(--at-coral);
}
.button:hover,
.on-dark .button:hover,
.section--dark .button:hover {
  background: var(--at-coral-deep);
  border-color: var(--at-coral-deep);
  color: #fff;
}
.button--ghost {
  background: transparent;
  border-color: var(--at-forest);
  color: var(--at-forest);
}
.button--ghost:hover {
  background: var(--at-forest);
  border-color: var(--at-forest);
  color: #fff;
}
.button svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* ---- Line icons (inline SVG sprite): decorative, stroke follows currentColor ---- */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
svg:has(> use) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Header ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--at-forest);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark__mark {
  width: 2.125rem;
  height: 2.125rem;
}
.wordmark__bg {
  fill: var(--at-forest);
}
.wordmark__bolt {
  fill: var(--at-cream);
}
.site-nav .button {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
}
@media (min-width: 52rem) {
  .site-nav ul {
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  .site-nav a:not(.button) {
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
  }
}
@media (forced-colors: active) {
  .wordmark__bg {
    fill: CanvasText;
  }
  .wordmark__bolt {
    fill: Canvas;
  }
}

/* ---- "Illustrative image" label: cream pill, ink text, coral dot ---- */
.img-tag {
  position: absolute;
  z-index: 2;
  right: 0.625rem;
  bottom: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgb(250 247 242 / 0.95);
  color: var(--at-ink);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  pointer-events: none;
  user-select: none;
}
.img-tag::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--at-coral-bright);
}
@media (forced-colors: active) {
  .img-tag {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* ---- Pill chip (response-time promise) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  padding: 0.4375rem 1rem 0.4375rem 0.75rem;
  border-radius: 999px;
  background: var(--at-mint);
  color: var(--at-forest);                     /* 6.5:1 on mint */
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}
.chip svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
@media (forced-colors: active) {
  .chip {
    border: 1px solid CanvasText;
  }
}

/* ---- Hero: copy beside a large photo (below it on phones) ---- */
.hero {
  padding-block: var(--space-6) var(--space-7);
}
.hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.hero .hero__content {
  gap: var(--space-4);
  max-width: 35rem;
}
.hero h1 {
  font-size: clamp(2.75rem, 1.4rem + 5.2vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero__actions {
  margin-top: var(--space-2);
}
.hero__media {
  position: relative;
  margin: 0;
}
.hero__media .ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--at-radius);
}
@media (min-width: 60rem) {
  .hero {
    padding-block: var(--space-7) var(--space-8);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-8);
  }
  /* A soft mint block offset behind the photo */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--at-radius);
    background: var(--at-mint);
    transform: translate(0.875rem, 0.875rem);
  }
  .hero__media .ph {
    position: relative;
    z-index: 1;
  }
  .hero__media .img-tag {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}

/* ---- Trust strip: four commitments on mint ---- */
.trust {
  background: var(--at-mint);
}
.trust__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.trust .container {
  padding-block: var(--space-6);
}
.trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.trust__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6875rem;
  border-radius: 50%;
  background: var(--at-white);
  color: var(--at-forest);
}
.trust__item h3 {
  font-size: 1.0625rem;
}
.trust__item p {
  margin-top: 0.125rem;
  color: var(--at-muted);                      /* 5.9:1 on mint */
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (min-width: 40rem) {
  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }
}
@media (min-width: 64rem) {
  .trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .trust .container {
    padding-block: var(--space-7);
  }
}
@media (forced-colors: active) {
  .trust__icon {
    border: 1px solid CanvasText;
  }
}

/* ---- Services: six cards with an icon tile ---- */
.feature-grid {
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60rem) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.feature {
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--at-line);
  border-top-width: 1px;
  background: var(--at-white);
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-2);
  border-radius: 12px;
  background: var(--at-mint);
  color: var(--at-forest);
}
.feature__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}
.feature h3 {
  font-size: 1.25rem;
}
.feature p {
  color: var(--color-text-muted);
  font-size: 1rem;
}
@media (forced-colors: active) {
  .feature,
  .feature__icon {
    border: 1px solid CanvasText;
  }
}

/* ---- Photo strip under the services: four square photos with captions ---- */
.work__title {
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}
.work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 60rem) {
  .work {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
.work__item figure {
  position: relative;
  margin: 0;
}
.work__item .ph {
  aspect-ratio: 1 / 1;
  border-radius: var(--at-radius);
}
.work__item .img-tag {
  right: 0.5rem;
  bottom: 2.75rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
}
.work__item figcaption {
  padding-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

/* ---- How it works (forest): photo beside four numbered steps ---- */
.process-band .section__header {
  margin-bottom: var(--space-6);
}
.process-layout {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 60rem) {
  .process-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-8);
  }
  .process-layout__aside {
    position: sticky;
    top: 6rem;
  }
}
.process-photo {
  position: relative;
  margin: var(--space-5) 0 0;
}
.process-photo .ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--at-radius);
}
.process {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.process__step {
  position: relative;
  display: block;
  padding: 0 0 0 4.25rem;
  border-top: 0;
  min-height: 3rem;
}
.process__step::before {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--at-mint);
  color: var(--at-forest);                     /* 6.5:1 on mint */
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}
/* Thin line joining the number circles */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: calc(-1 * var(--space-5) + 0.25rem);
  width: 2px;
  background: rgb(250 247 242 / 0.35);
}
.process__step h3 {
  padding-top: 0.5rem;
  font-size: 1.3125rem;
}
.process__step p {
  margin-top: var(--space-2);
  color: var(--at-mint);
}
@media (forced-colors: active) {
  .process__step::before {
    border: 1px solid CanvasText;
  }
  .process__step:not(:last-child)::after {
    background: CanvasText;
  }
}

/* ---- Urgency: one card, copy on the left and the safety note on the right ---- */
.urgent__card {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--at-line);
  border-left: 8px solid var(--at-coral-bright);
  border-radius: var(--at-radius);
  background: var(--at-white);
}
@media (min-width: 48rem) {
  .urgent__card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-7);
    align-items: center;
    padding: var(--space-7) var(--space-6);
  }
}
.urgent__copy {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.urgent__copy .eyebrow {
  color: var(--at-coral-deep);                 /* 6.7:1 on white */
}
.urgent__hours {
  margin: 0;
}
.urgent__hours > div,
.coverage__hours > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--at-line);
}
.urgent__hours dt,
.coverage__hours dt {
  color: var(--color-text-muted);
}
.urgent__hours dd,
.coverage__hours dd {
  margin: 0;
  font-weight: 500;
}
.safety {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--at-coral-deep);
  border-radius: var(--at-radius);
  background: var(--at-warm);
}
.safety__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--at-coral-deep);                 /* 5.9:1 on the note */
}
.safety__label {
  color: var(--at-coral-deep);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.safety__text {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.3;
}
@media (forced-colors: active) {
  .urgent__card,
  .safety {
    border: 2px solid CanvasText;
  }
}

/* ---- Price: simple table beside a photo of tools, on mint ---- */
.price {
  background: var(--at-mint);
}
.price-layout {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 60rem) {
  .price-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-8);
  }
}
.price .section__header {
  margin-bottom: var(--space-6);
}
.price-table {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--at-mint-deep);
  border-radius: var(--at-radius);
  background: var(--at-white);
}
.price-table thead th {
  padding: 0.75rem var(--space-4);
  background: var(--at-forest);
  color: #fff;                                 /* 8.0:1 on forest */
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}
.price-table thead th:last-child,
.price-table td {
  text-align: right;
}
.price-table tbody th,
.price-table td {
  padding: var(--space-4);
  border-top: 1px solid var(--at-line);
  vertical-align: top;
}
.price-table tbody tr:first-child th,
.price-table tbody tr:first-child td {
  border-top: 0;
}
.price-table tbody th {
  font-weight: 400;
  text-align: left;
}
.price-table tbody th span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
}
.price-table tbody th small {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.price-table td {
  min-width: 7.5rem;
  color: var(--at-forest);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
}
.price__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: none;
  margin-top: var(--space-5);
  font-weight: 500;
}
.price__note svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  color: var(--at-forest);
}
.price-photo {
  position: relative;
  margin: 0;
}
.price-photo .ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--at-radius);
}
@media (min-width: 60rem) {
  .price-photo .ph {
    aspect-ratio: 4 / 5;
  }
}
@media (forced-colors: active) {
  .price-table {
    border-color: CanvasText;
  }
}

/* ---- Coverage ---- */
.coverage-layout {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 60rem) {
  .coverage-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}
.coverage .section__header {
  margin-bottom: var(--space-5);
}
.comunas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.comunas li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border: 1px solid var(--at-forest);
  border-radius: 999px;
  background: var(--at-white);
  font-size: 0.9375rem;
  font-weight: 500;
}
.comunas svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--at-forest);
}
.coverage__note {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.coverage__hours {
  margin: var(--space-5) 0 0;
}
.coverage-photo {
  position: relative;
  margin: 0;
}
.coverage-photo .ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--at-radius);
}

/* ---- Testimonials placeholder (reserved space, no invented content) ---- */
.reviews {
  background: var(--at-mint);
}
.placeholder-block {
  max-width: 44rem;
  border: 2px dashed var(--at-field);
  border-radius: var(--at-radius);
  background: var(--at-cream);
  text-align: left;
}
.placeholder-block p {
  margin-inline: 0;
}
.placeholder-block__label {
  color: var(--at-forest);
  letter-spacing: 0.04em;
}

/* ---- FAQ: heading beside separate rounded cards ---- */
.faq-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
.faq-layout .section__header {
  margin-bottom: 0;
}
@media (min-width: 60rem) {
  .faq-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-8);
  }
}
.faq {
  display: grid;
  gap: var(--space-2);
  border-top: 0;
}
.faq details {
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: var(--at-white);
}
.faq details[open] {
  border-color: var(--at-forest);
}
.faq summary {
  align-items: center;
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
/* Plus that becomes a minus, in a mint circle */
.faq summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--at-forest), var(--at-forest)) center / 0.875rem 2px no-repeat,
    linear-gradient(var(--at-forest), var(--at-forest)) center / 2px 0.875rem no-repeat,
    var(--at-mint);
  transition: background-size var(--duration) var(--ease);
}
.faq details[open] summary::after {
  transform: none;
  background-size: 0.875rem 2px, 2px 0, auto;
}
.faq details p {
  max-width: 60ch;
  padding: 0 var(--space-4) var(--space-4);
}

/* ---- Contact: intro with the WhatsApp action beside a white form card, on mint ---- */
.contact-band {
  background: var(--at-mint);
}
.contact {
  gap: var(--space-7);
}
@media (min-width: 60rem) {
  .contact {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-8);
  }
}
.contact__intro {
  gap: var(--space-4);
  align-content: start;
}
.contact__cta {
  margin: var(--space-2) 0;
}
.contact__details {
  display: grid;
  margin: 0;
}
.contact__details > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--at-mint-deep);
}
.contact__details > div:first-child {
  border-top: 1px solid var(--at-mint-deep);
}
.contact__details dt {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.contact__details dd {
  margin: 0;
  font-weight: 500;
}
.contact-form--light {
  --field-border: var(--at-field);
  padding: var(--space-5);
  border-radius: var(--at-radius);
  background: var(--at-white);
}
@media (min-width: 48rem) {
  .contact-form--light {
    padding: var(--space-6);
  }
}
.field label {
  letter-spacing: 0;
}
.field label small {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
}
.field select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--field-radius);
  background: #fff;
  color: var(--field-text);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline-offset: 0;
  border-color: var(--at-forest);
}
.form-photos {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: none;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: var(--at-mint);
  font-size: 0.9375rem;
}
.form-photos svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.0625rem;
  color: var(--at-forest);
}
.form-photos a {
  color: var(--at-forest);
  font-weight: 500;
  white-space: nowrap;
}
.contact-form .button {
  justify-self: start;
}
.form-note {
  max-width: none;
  padding-top: var(--space-3);
  border-top: 1px solid var(--at-line);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 0;
}
.site-footer a:hover {
  color: var(--at-cream);
}

/* ---- Mobile action bar: Call + WhatsApp. Fixed, fixed height (no layout shift), phones only.
   extra-fields.js adds .bar-hidden while the form is on screen so it never covers it. ---- */
.action-bar {
  display: none;
}
@media (max-width: 47.99rem) {
  .action-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0.5rem;
    align-items: center;
    box-sizing: border-box;
    height: var(--bar-h);
    padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--at-mint-deep);
    background: var(--at-cream);
    box-shadow: 0 -6px 20px -10px rgb(20 32 27 / 0.28);
    transition: transform 200ms var(--ease), visibility 200ms;
  }
  .action-bar .button {
    min-height: 3rem;
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1.15;
    text-align: center;
  }
  .bar-hidden .action-bar {
    transform: translateY(100%);
    visibility: hidden;
  }
  /* Room for the bar below the footer, and for focused elements above it */
  .site-footer {
    padding-bottom: var(--bar-h);
  }
  :root:has(.action-bar) {
    scroll-padding-bottom: calc(var(--bar-h) + 1rem);
  }
}
@media (forced-colors: active) {
  .action-bar {
    border-top: 2px solid CanvasText;
  }
}

/* ==========================================================================
   Premium layer tuning (friendly variant): medium ease-out reveals with a small rise, a gentle card lift,
   no bounce or parallax. Transform and opacity only; the layer disables all of it under prefers-reduced-motion.
   ========================================================================== */
[data-premium] {
  --ease: cubic-bezier(0.25, 0.8, 0.3, 1);
  --duration: 200ms;
  --reveal-duration: 520ms;
  --reveal-distance: 12px;
  --selection-bg: var(--at-forest);
  --selection-text: var(--at-cream);           /* 7.5:1 */
  --shadow-sm: 0 1px 2px rgb(20 32 27 / 0.06), 0 2px 6px rgb(20 32 27 / 0.05);
  --shadow-md: 0 1px 2px rgb(20 32 27 / 0.06), 0 8px 18px -6px rgb(20 32 27 / 0.2);
}
[data-premium] h1,
[data-premium] h2 {
  letter-spacing: -0.02em;
}
[data-premium] .hero h1 {
  letter-spacing: -0.03em;
}
[data-premium] .section--dark {
  background-image: none;                      /* flat forest, no grain */
}
[data-premium] .field :is(input, textarea, select):hover {
  border-color: var(--at-forest);
}
[data-premium] .feature {
  transition: opacity var(--reveal-duration) var(--ease), transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}
@media (hover: hover) {
  [data-premium] .feature.is-in:hover,
  [data-premium] .feature:not([data-reveal]):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-premium] .feature:hover {
    transform: none !important;
  }
  .action-bar {
    transition: none;
  }
}

/* Generated by scripts/images.mjs: image placeholders (dominant colour + 24px WebP). */
.ph-altiro-01-hero{background-color:#6e6257;background-image:url(data:image/webp;base64,UklGRsgAAABXRUJQVlA4ILwAAACQBQCdASoYABIAPu1ur1IppiQiqAgBMB2JQBOmWLeEA5QAKR2ZP1ySD+o+oAkgxrhifCffAAD81/HLuXeOo3H7YI0/jg4sNmtgBI8O+d9ijQW61KRFFJMmCAiLKYJ8F2+RAu3J3xTWClTBwjicBZ/M9E2fc2FcJJFM0MWE5+DhUj7A1IgnTxP+S1A5UDf+uDfu51e030QemEkZvlX1+xVkerUd1HsNApc3FDBgljhp6fN4rg/zvIwMEUAAAA==)}
.ph-altiro-02-gasfiteria{background-color:#9a8e8a;background-image:url(data:image/webp;base64,UklGRugAAABXRUJQVlA4INwAAADQBQCdASoYABgAPu1qrVCppaQiqAqpMB2JZAC7AzBLpIJ0Hsp2YI8+/xp5mhFkq3feitSl3tDQAP7Fxks7OR4gl9QuThzR4S7zjZva0l/t1pC2tVjd03Vn7B6vqkJUJ2mgJhWLzg4S86Gvua1dxgpEY9MmZwVe1RL76KTq2qsy/DBMzd9bSmOWYBaM8nLz1nnfWsQNYBVu6a/dGkJYtdiN9fQr7zWDHrhgjeOEkjnvwQmungSlqXSDlC2TEwE2R7pBu/mkJFgSLzgnb1I9mFxhMzxr22fK/zC2Q8gA)}
.ph-altiro-03-electricidad{background-color:#aba09f;background-image:url(data:image/webp;base64,UklGRtAAAABXRUJQVlA4IMQAAABQBQCdASoYABgAPu1qqVAppiOiqA1RMB2JQBfrJ3QYANV71VcGK2SkSGVEPwr0RuZ0FqAA/uGqSn8dwYBQnd3xPxADSXRRau1hTVt44TNBedggmUhHi4iPBIH3DElgq2dXSXV3JoNOp9cB1TtzwuVzy1yT1NIUQYVlprJILxJqpz9WU4lcweYeYzIxPvp0dlM4Uq+OXUji76XyTknambExkKnOS1+tBJFDb37g6+O+plMCtRwJ2VhcGN/qHQGKt5jGUAAA)}
.ph-altiro-04-mantencion{background-color:#9b8b7e;background-image:url(data:image/webp;base64,UklGRg4BAABXRUJQVlA4IAIBAACwBQCdASoYABgAPu1urlKppiQiqAgBMB2JaACdIQSgxgtzH/PKhW/7VQYn2Mq/7LCj9oYG7AAA/uFEIyGnyA1FROfFm1mSOzxR0S3vj2aozUsDUmGP/zfkGrRf6c+rVAbAOgp6yKzz4HkzS+2gYIallBt5Yi4Q9sv+T9r4y+cq6G4x2ifKBccRm15kkGHPhqin0CdPJi/uHC01hWSuFWnzSZsesA6ICDJCr1bhB+aW/zlZ9a9RsluEMO/vWh/j5uoah1hwQaeQX/77Hk/m6zvqO1TOlO714UaC9tRrJlcQwYrYyt7pMuWzDJxDpxyWR8BbeMayQs5vwefyZs9OqOdZAAA=)}
.ph-altiro-06-calefon{background-color:#827771;background-image:url(data:image/webp;base64,UklGRuwAAABXRUJQVlA4IOAAAABwBQCdASoYABgAPu1qqlEppaOiqAqpMB2JZACdAYzGUiGN12HUW0zSIa/gp1FRHpgKTaSAAP5kVbZnd7QI+eV4ZNiLkdSSnEypXyUWHgLmeakifXK/tp3ByauJpz0kXDD0IOpprXBW+ENDa5Pq0rXWvXvIbmLYIY8OTaPb0Dhhg4uwxy4MrlmD5N8xay4sR+Mx6nrj5a8sCfFfhbr1rORFwjbTU7QQAaamU9MfPP1hpA6WCrN8APsHatA/7tiRjrfmrUn1zYVRQId6QnWDxv8vpBFBfXuaA7Z0yNsErQAAAA==)}
.ph-altiro-05-reparaciones{background-color:#a49896;background-image:url(data:image/webp;base64,UklGRroAAABXRUJQVlA4IK4AAADwBACdASoYABIAPu1wsFIppiSiqAgBMB2JQBadAU++x/83e891bg6Dnvvb3RiixaAA/rdP1bUz/9kY0XSplq3D3abDTbr/MeVTuuGdbFf9upqNm3no5b3KeGJC73tfXViUCLWFgpCIDrRJys+cC6WK071sMSpM+OydSdHPRUaMHhru91i1BRqkFTfOV+7Rh89LxEmmaFOl0D8luHM/Jz+msHYcKX+W/3Vb3BYAAAA=)}
.ph-altiro-07-herramientas{background-color:#734e37;background-image:url(data:image/webp;base64,UklGRg4BAABXRUJQVlA4IAIBAABQBgCdASoYAB4APu1qrVEppaQiqAqpMB2JZgCxHtTFAj0B4xvcuG00Um/rVj8XXP92SK3n60LkeOKawAD+6iIYAFKBbtYjCtscMlal7bB8fo6LdwDJzvp7poE4zNjZWnxLvznRQWT4alOLxCA0jLbrXzVrbhSil7qanOLdmi6ZcFS+5AP/D+LnX2vroSCdf2Xoss8PCHeFWLi2yIVn/p2KArs4Uh0uhpdJbUOkdZnO8Ap5He2jwiTAprAj7IFnmhcJNC30xgWCqy5UpLm6wVYqGhiIleUt/2LG3OljXoAs25f8thVAkl7cYehSMkw9g/bxGeSosSjOglljZ1aYf7YkAAA=)}
.ph-altiro-08-barrio{background-color:#817768;background-image:url(data:image/webp;base64,UklGRrwAAABXRUJQVlA4ILAAAABwBQCdASoYABIAPu1or1AppaSiqAqpMB2JYwCdMtDBn8+SXaqOwfqzt/SMcBFga+Y01/oAAP7nViP3g7bRfwfDTefP38GWhV31NEUpH4JQ/m6Vn6pk9yU9zKCHIJMvDGlEhQIybSnkKyG56Jual5LODCQcNOGMfuhFnVlywybKLR/T4xTfAnY6GGkMTGu4GvIapBnNKuPkOrbf4RKIm792qX0PBGlWKhdATIQe0QAAAA==)}