/* CIMES landing. Competitor (aguaivess) layout skinned in the official CIMES brand.
   Brand palette from cimescentral.com brand doc:
   red #da251d (action) + blue #0162c6 (trust) + light blue #00a2dd (water).
   Fonts: Fira Sans (headings) + Roboto (body). All copy comes from copy.es-AR.js. */

/* ============================================================
   FONTS — self-hosted, not fonts.googleapis.com.
   Ad traffic opens this site inside the Instagram/Facebook in-app browser, where a
   cold start pays DNS + TLS to a third-party origin before any text can settle, and
   cache partitioning means there is no shared-cache upside left to trade for it.
   Serving them from our own origin removes two connections from the critical path.

   Only the `latin` subset is shipped: Spanish, accents and ¿¡ included, is entirely
   inside it. Roboto is one variable file covering every weight we use — Google serves
   the identical woff2 for 400/500/700, so shipping three copies would waste ~86 kB.
   Regenerate by re-downloading the `latin` blocks of the css2 URL this replaced.
   tools/og-card.html links ../styles.css, so the card build gets these locally too.
   ============================================================ */
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/fira-sans-600.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;
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fonts/fira-sans-700.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;
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(assets/fonts/fira-sans-800.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;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(assets/fonts/roboto-variable.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;
}

:root {
  /* ============================================================
     SWITCH — dispenser photo behind the mobile header. Swap this one value:

       OFF   none                                                    <- current
       ON    image-set(url("assets/hero-mobile.webp") type("image/webp"),
                       url("assets/hero-desktop.jpg") type("image/jpeg"))

     Mobile only (<=760px); the desktop hero photo is unrelated and unaffected. The
     header keeps its brand-blue gradient in both states, so OFF is the flat blue
     header. ON, a browser too old for image-set() falls back to the desktop hero
     treatment rather than to nothing.
     ============================================================ */
  --hero-mobile-dispenser: none;

  /* ============================================================
     BRAND PALETTE (CIMES, from cimescentral.com).
     Reskin the whole site by editing ONLY this block.
     Never hardcode a brand color in the rules below; reference a token.
     rgb channel tokens exist for the colors used with alpha, e.g.
     rgba(var(--red-rgb), 0.8).
     ============================================================ */
  --red: #da251d;               /* action / accent */
  --red-rgb: 218, 37, 29;
  --red-dark: #b51e17;
  --red-050: #fdecea;           /* light red tint (invalid field bg) */

  --blue: #0162c6;              /* primary / trust */
  --blue-rgb: 1, 98, 198;
  --blue-dark: #0143b5;
  --blue-dark-rgb: 1, 67, 181;
  --blue-deep-rgb: 1, 34, 78;   /* hero overlay dark stop */
  --blue-050: #d9e7f8;          /* light blue tint (hero eyebrow) */

  --celeste: #00a2dd;           /* light blue / water */
  --celeste-rgb: 0, 162, 221;
  --celeste-2: #028fe8;         /* 2nd light-blue grade */
  --celeste-050: #e8f6fc;       /* very light celeste (section bg, secondary btn) */
  --celeste-100: #ccebf8;       /* light celeste (borders) */
  /* ============================================================ */

  /* neutrals (not brand) */
  --ink: #101417;
  --slate: #343b3f;
  --body: #45535c;
  --muted: #6e6e6e;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --field: #f6f8f8;
  --border: #e3e9f5;

  /* functional (fixed platform colors) */
  --wa: #25d366;
  --wa-dark: #1da851;
  --success: #1e9e57;
  --error: #d64541;

  /* shape + depth */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(16, 20, 23, 0.06);
  --shadow: 0 16px 38px -18px rgba(16, 20, 23, 0.20);
  --shadow-celeste: 0 24px 44px -22px rgba(var(--celeste-rgb), 0.55);

  /* scale */
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section-pad: clamp(2.75rem, 6vw, 4.75rem);
  --font-head: "Fira Sans", system-ui, "Helvetica Neue", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  overflow-x: hidden;
}
body.is-at-bottom {
  background: var(--slate);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 2px;
  border-radius: 6px;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; }

/* Emphasis inside copy: `**así**` in copy.es-AR.js becomes <strong> (js/util.js
   `rich`). One look for it site-wide — brand blue, bold. */
strong { font-weight: 700; color: var(--blue); }

/* WCAG 2.4.1 skip link — the first tab stop, invisible until it takes focus, so a
   keyboard user reaches the signup without tabbing the header and hero first (verified:
   Tab, Enter, Tab lands on the «Mercedes» city button, four stops skipped). Home page
   only: on /alta the wizard IS the page.

   Hidden by CLIPPING to a 1px box, not by an off-screen offset. Three offsets were tried
   and each leaked a red sliver over the header in some condition — translateY(-100%)
   rounded its own fractional height to a subpixel, `top: -60px` was outgrown when the
   fallback font wrapped the label, and `top: -4rem` left only 19px of clearance under a
   44.8px pill. Every one of them hides the element by out-measuring it, so a taller pill
   defeats it. A clip has no height to outgrow, which is why this is the last version.
   The cost is the slide-down on focus: you cannot animate out of a clip. */
.skip-link {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  left: 50%; top: 0; transform: translateX(-50%);
  width: auto; height: auto; overflow: visible; clip-path: none;
  background: var(--red); color: #fff; padding: 0.6rem 1.1rem; border-radius: 0 0 10px 10px;
  font-weight: 700; z-index: 100;
}

/* ---------- layout helpers ---------- */

.section-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
main > section { padding-block: var(--section-pad); }

main > section h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 700;
  color: var(--blue);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 0.65rem;
}
main > section h2::after {
  content: ""; display: block; width: 58px; height: 4px; border-radius: 999px;
  background: var(--red); margin: 0.7rem auto 0;
}
/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1;
  min-height: 48px; padding: 0.85rem 1.5rem; border: none; border-radius: var(--radius);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-lg { min-height: 54px; padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn-sm { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.95rem; }

.btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--red-rgb), 0.8); }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); }

.btn-whatsapp { background: var(--wa); color: #fff; }
.btn-whatsapp:hover { background: var(--wa-dark); transform: translateY(-2px); }

.btn-secondary { background: var(--celeste-050); color: var(--blue-dark); border: 1px solid var(--celeste-100); }
.btn-secondary:hover { background: var(--celeste-100); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--maxw); margin-inline: auto; padding: 0.6rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand img { height: 42px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.4rem); }
.nav-cta { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.nav-cta.is-visible { opacity: 1; pointer-events: auto; }

/* ---------- hero ---------- */

.hero {
  position: relative; color: #fff;
  /* Fallback: plain JPEG for browsers without image-set() + type() (pre-2023: Chrome
     <113, Safari <17). Same file tools/og-card.html crops for the OG cards. */
  background:
    linear-gradient(102deg, rgba(var(--blue-deep-rgb), 0.9) 0%, rgba(var(--blue-dark-rgb), 0.66) 44%, rgba(var(--blue-rgb), 0.12) 74%),
    url("assets/hero-desktop.jpg") center right / cover no-repeat;
  /* Progressive enhancement: WebP where supported (keeps position/size/repeat above). */
  background-image:
    linear-gradient(102deg, rgba(var(--blue-deep-rgb), 0.9) 0%, rgba(var(--blue-dark-rgb), 0.66) 44%, rgba(var(--blue-rgb), 0.12) 74%),
    image-set(url("assets/hero-desktop.webp") type("image/webp"), url("assets/hero-desktop.jpg") type("image/jpeg"));
}
.hero-inner {
  max-width: var(--maxw); margin-inline: auto; padding: clamp(2.75rem, 7vw, 5.5rem) var(--gutter);
  min-height: min(84vh, 720px); min-height: min(84dvh, 720px); display: flex; align-items: center;
}
.hero-copy { max-width: 40rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--blue-050); margin-bottom: 1rem;
}
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.28); }

.hero h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(2.15rem, 5.4vw, 3.8rem); letter-spacing: -0.01em;
  text-wrap: balance; text-shadow: 0 6px 26px rgba(0, 30, 70, 0.45);
}
.hero-sub {
  color: rgba(255, 255, 255, 0.92); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 34rem; margin: 1rem 0 1.75rem;
}

.hero-proof { display: flex; flex-direction: column; align-items: center; width: fit-content; gap: 1.1rem; margin-top: 1.8rem; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; font-size: 0.9rem; font-weight: 500; padding: 0.45rem 0.9rem; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.badge::before { content: ""; width: 17px; height: 17px; background-position: center; background-size: contain; background-repeat: no-repeat; filter: brightness(0) invert(1); }
.badge-pin::before { background-image: url("assets/ic-pin-drop.svg"); }
.badge-drop::before { background-image: url("assets/ic-water-drop.svg"); }
.badge-check::before { background-image: url("assets/ic-check-circle.svg"); }

/* objection remover under the hero CTA */
.hero-reassure {
  margin-top: 0.9rem; color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem; font-weight: 500;
}
/* ratings badge (static image; see index.html placeholder note) */
.hero-rating {
  width: min(100%, 360px); height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

/* ---------- signup options (dual CTA) ---------- */

.options-grid {
  display: grid; gap: 1.25rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.opt-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 2rem 1.75rem; text-align: center; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.opt-card[hidden] { display: none; }
/* Two columns beside a left-aligned hero, so a lone card keeps the width it has when paired. */
@media (min-width: 761px) { .options-grid { grid-template-columns: 1fr 1fr; } }
.opt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.opt-card h3 { font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.opt-card p { color: var(--muted); }
.opt-card .btn { margin-top: 0.75rem; width: 100%; max-width: 260px; }
.opt-ic {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--red-rgb), 0.1); margin-bottom: 0.3rem;
}
.opt-ic-wa { background: rgba(37, 211, 102, 0.14); }

/* ---------- wizard (Flow B) ---------- */

.wizard {
  --wizard-bg: linear-gradient(180deg, var(--celeste-050), #fff);
  background: var(--wizard-bg);
}
/* Home only: province map with one dot per active-client cell (`npm run build:coverage-map`). */
/* Desktop only, section height minus a third of its padding at each end, flush with the content
   column's right edge so the dot cluster (the province's NE corner) clears the title. Below this width the card is
   full-bleed and would hide the map, so it isn't fetched. */
@media (min-width: 960px) {
  .wizard-map {
    --map-gap: calc(var(--section-pad) / 3);
    --option-bg: rgba(255, 255, 255, 0.55);
    background:
      url("assets/coverage-map.svg") no-repeat right max(0px, calc((100vw - var(--maxw)) / 2)) top var(--map-gap)
        / auto calc(100% - 2 * var(--map-gap)),
      var(--wizard-bg);
  }
  .wizard-map .wizard-card { background: rgba(255, 255, 255, 0.35); }
}
/* scroll-margin-top clears the sticky .site-header when a step change scrolls this
   into view (js/wizard.js scrollToStep) — without it the title lands underneath. */
.wizard-head { text-align: center; margin-bottom: 1.6rem; scroll-margin-top: 5rem; }
.wizard-subtitle { color: var(--muted); margin-top: 0.4rem; }
.wizard-card {
  max-width: 540px; margin: 0 auto; text-align: left;
  background: #fff; border: 1px solid var(--celeste-100); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: var(--shadow-celeste);
}
.wizard-card h3 { text-align: center; font-size: 1.35rem; color: var(--blue); margin-bottom: 1.2rem; }
.wizard-hint { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 0.85rem; }
/* Intro paragraph utility for wizard steps. */
.wizard-intro { color: var(--muted); margin-bottom: 1.2rem; line-height: 1.55; }

/* Numbered stepper (rosmino-style progress): a labeled circle per wizard step. */
.wizard-stepper {
  list-style: none; display: flex; align-items: flex-start; gap: 0.25rem; margin-bottom: 1.6rem;
}
.wizard-stepper li {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center;
}
/* Connector line from the previous dot to this one. */
.wizard-stepper li::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.wizard-stepper li:first-child::before { display: none; }
.wizard-stepper li.active::before, .wizard-stepper li.done::before { background: var(--celeste-2); }
.wizard-stepper .dot {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums;
  background: #fff; border: 2px solid var(--border); color: var(--muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wizard-stepper .label { font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1.1; }
.wizard-stepper li.active .dot { background: var(--celeste); border-color: var(--celeste); color: #fff; }
.wizard-stepper li.active .label { color: var(--celeste); }
.wizard-stepper li.done .dot { background: var(--celeste-2); border-color: var(--celeste-2); color: #fff; }
.wizard-stepper li.done .label { color: var(--slate); }
@media (max-width: 460px) {
  .wizard-stepper .label { display: none; }
  .wizard-stepper .dot { width: 28px; height: 28px; font-size: 0.82rem; }
  .wizard-stepper li::before { top: 13px; }
}

.option-list { display: grid; gap: 0.6rem; }
.option-list button, .option-list .city-option {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1.1rem; min-height: 52px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--option-bg, #fff); cursor: pointer; font-size: 1rem; font-family: var(--font-body);
  color: var(--ink); text-align: left; text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.option-list button:hover, .option-list .city-option:hover { border-color: var(--blue); background: var(--celeste-050); transform: translateY(-1px); }
/* City options are links (they navigate to /alta/?city=…); chevron signals the hop. */
.option-list .city-option::after { content: "\203A"; color: var(--celeste-2); font-size: 1.4rem; line-height: 1; }

/* "Otra Ciudad" option, once clicked, becomes an input styled exactly like the
   other options (it already carries .city-option); these tune it for editing. */
.option-list input.city-option { display: block; width: 100%; text-align: left; cursor: text; }
.option-list input.city-option::placeholder { color: var(--muted); } /* example in grey */
.option-list input.city-option:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.12);
}
/* The red submit, revealed only after "Otra Ciudad" is clicked. The id+attr
   selector overrides `.btn { display: inline-flex }`, which otherwise beats the
   UA `[hidden] { display: none }` and would show the button too early. */
#city-other-submit { width: 100%; margin-top: 0.8rem; }
#city-other-submit[hidden] { display: none; }

/* Second thought when the typed city isn't recognized: a "did you mean?" plus a
   "continuar igual" — both are links styled like the picker options (.city-option
   in an .option-list, chevron and all). Sits just under the submit. */
.city-second-thought { margin-top: 0.8rem; }
.city-second-thought .status-msg { padding: 0 0.25rem 0.6rem; text-align: left; color: var(--slate); }

/* Custom "Otra Ciudad" suggestions dropdown — styled from the site tokens so it
   matches the picker (the native <datalist> is unstyleable). */
.city-combobox { position: relative; }
.city-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 0.35rem; list-style: none;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 264px; overflow-y: auto;
}
.city-suggestions:empty { display: none; }
.city-suggestions li {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.55rem 0.85rem; border-radius: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  transition: background 0.12s, color 0.12s;
}
.city-suggestions li.is-active, .city-suggestions li:hover {
  background: var(--celeste-050); color: var(--blue);
}

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--slate); margin-bottom: 0.35rem; }
.field input {
  width: 100%; padding: 0.8rem 0.9rem; min-height: 50px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--field); font-size: 16px; font-family: var(--font-body); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.16); }
.field .error { color: var(--error); font-size: 0.85rem; margin-top: 0.3rem; display: none; }
.field.invalid input { border-color: var(--error); background: var(--red-050); }
.field.invalid .error { display: block; }

/* Masked AR-mobile phone field: the box chrome (border/bg/focus ring) lives on
   the ghost layer; the real <input> is a transparent overlay on top so its
   typed digits and the ghost's grey "_" prediction share one aligned line.
   Monospace keeps both layers' characters the same width, so they line up. */
.phone-mask-box {
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
}
.phone-mask-ghost {
  padding: 0.8rem 0.9rem; min-height: 50px; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--field); display: flex; align-items: center; white-space: pre;
  pointer-events: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-mask-ghost .pm-typed { color: transparent; }
.phone-mask-ghost .pm-pending { color: var(--muted); }
.phone-mask-box input {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  padding: 0.8rem 0.9rem; border: 1.5px solid transparent; background: transparent;
  font: inherit; color: var(--ink);
}
.phone-mask-box input:focus { outline: none; }
.phone-mask-box:focus-within .phone-mask-ghost { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.16); }
.field.invalid .phone-mask-ghost { border-color: var(--error); background: var(--red-050); }

/* City header row at the top of the data step: the city comes from the URL, so it's
   shown here with a way back to the picker rather than as a step of its own. */
.wizard-city {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: 0.92rem; color: var(--muted); margin-bottom: 1.1rem;
  padding-bottom: 0.85rem; border-bottom: 1px dashed var(--border);
}
/* Deliberately link-weight, not a button: it must not compete with "Continuar". */
.wizard-city-change {
  color: var(--red); font-weight: 600; text-decoration: underline;
}
.wizard-city-change:hover { color: var(--red-dark); }

.wizard-actions { display: flex; gap: 0.6rem; justify-content: space-between; margin-top: 1.3rem; }
.wizard-actions .btn { flex: 1; }

.summary-list { list-style: none; margin-bottom: 1.3rem; }
.summary-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--border); }
.summary-list li:last-child { border-bottom: none; }
.summary-list span:first-child { color: var(--muted); }
.summary-list span:last-child { font-weight: 600; color: var(--ink); text-align: right; }
.summary-list .summary-total span:first-child { color: var(--ink); font-weight: 700; }
.summary-list .summary-total span:last-child { color: var(--blue); }
/* The abono's full month, struck through above what's collected on delivery. */
.summary-list span:last-child { display: flex; flex-direction: column; align-items: flex-end; }
.summary-list .price-was { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.summary-heading { font-size: 0.95rem; color: var(--slate); margin-bottom: 0.4rem; }

/* ---------- dispenser picker (wizard step 2) ----------
   Two cards side by side plus a full-width third. Unlike the city/day lists
   these do NOT advance on click — the visitor picks a card, optionally switches
   the water toggle, then presses Siguiente. So this is the one place in the
   wizard that needs a persistent selected state.

   The card is a <div> with a restyled radio inside, never a <button>: it
   contains the water toggle, and a button inside a button is invalid HTML —
   the parser closes the outer one and the toggle spills out of the card. */

/* Two rich cards don't fit the wizard's normal 540px column. */
.wizard-card:has(.dispenser-grid) { max-width: 880px; }

.dispenser-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 0.9rem;
}
.dispenser-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem;
  text-align: left; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.2rem; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dispenser-card:hover { border-color: var(--celeste-100); transform: translateY(-2px); box-shadow: var(--shadow-celeste); }
.dispenser-card.selected {
  border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(var(--celeste-rgb), 0.18);
}
/* The profit product: tinted so it reads as the recommendation, not an equal. */
.dispenser-card-promo { background: linear-gradient(180deg, var(--celeste-050), #fff 55%); }
.dispenser-card-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.2rem; }
.dispenser-card-wide .dispenser-head { flex: none; }
.dispenser-card-wide .dispenser-body { margin: 0; }

.dispenser-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; cursor: pointer; }
.dispenser-title { font-size: 1.05rem; font-weight: 700; color: var(--blue); }
/* The hero `.badge` is white-on-translucent for a dark photo — invisible on a
   white card. These two are the light-surface variants, and they carry no icon. */
.dispenser-head .badge {
  padding: 0.22rem 0.6rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; backdrop-filter: none;
}
.dispenser-head .badge::before { content: none; }
.badge-free { background: var(--celeste-050); border-color: var(--celeste-100); color: var(--blue); }
.badge-promo { background: var(--red); border-color: var(--red); color: #fff; }
/* Real radio, restyled — keeps arrow-key navigation and screen-reader semantics. */
.dispenser-radio {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid var(--border); transition: border-color 0.15s, box-shadow 0.15s;
}
.dispenser-radio:checked { border-color: var(--celeste); box-shadow: inset 0 0 0 4px var(--celeste); }
.dispenser-radio:focus-visible { outline: 2px solid var(--celeste-2); outline-offset: 2px; }

.dispenser-body { color: var(--body); font-size: 0.9rem; line-height: 1.5; }
.dispenser-points { list-style: none; display: grid; gap: 0.35rem; }
.dispenser-points li {
  position: relative; padding-left: 1.15rem; color: var(--body);
  font-size: 0.88rem; line-height: 1.45;
}
.dispenser-points li::before {
  content: ""; position: absolute; left: 0; top: 0.52em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--celeste);
}
/* The two surprises (flat fee, excedente) — present, not shouted. */
.dispenser-fine { color: var(--muted); font-size: 0.75rem; line-height: 1.45; }

/* Bottom row: photo beside the water choice, pushed down so both cards align
   however long their copy runs (the reference's mt-auto). */
.dispenser-media {
  display: flex; align-items: flex-end; gap: 0.9rem; margin-top: auto; padding-top: 0.4rem;
}
.dispenser-img {
  width: 108px; height: 150px; object-fit: contain; object-position: bottom; flex: none;
}
.water-pick { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; }
.water-label { font-size: 0.78rem; font-weight: 700; color: var(--slate); }

/* Segmented control, not two loose buttons: one pill track, the active segment
   filled. Reads as a switch at a glance. */
.water-toggle {
  display: flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--celeste-050); border: 1px solid var(--celeste-100);
}
.water-toggle button {
  flex: 1; min-width: 0; border: none; background: transparent; border-radius: 999px;
  font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--body);
  padding: 0.42rem 0.5rem; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.water-toggle button:hover { color: var(--blue-dark); }
.water-toggle button[aria-checked="true"] {
  background: var(--celeste); color: #fff; box-shadow: 0 1px 4px rgba(var(--celeste-rgb), 0.45);
}
.water-toggle button:focus-visible { outline: 2px solid var(--celeste-2); outline-offset: 1px; }

/* Step-level validation message, matching the field-level .error contract. */
.step-error { color: var(--error); font-size: 0.85rem; margin-bottom: 0.6rem; }

@media (max-width: 720px) {
  .dispenser-grid { grid-template-columns: 1fr; }
  .dispenser-card-wide { flex-direction: column; align-items: stretch; gap: 0.5rem; }

  /* One column per card: the photo beside the toggle would squeeze it, so the photo
     becomes a washed-out watermark behind the card and the toggle takes the row.
     `.dispenser-media` stays unpositioned so the photo anchors to the card. */
  .dispenser-card { position: relative; overflow: hidden; }
  .dispenser-media { display: block; padding-top: 0.2rem; }
  .dispenser-img {
    position: absolute; right: 0; bottom: 0; width: 48%; height: 82%;
    max-width: 200px; object-position: bottom right;
    /* Washed out, and faded further towards the text so the copy stays first. */
    opacity: 0.25; filter: saturate(0.45); pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, #000 45%, transparent);
    mask-image: linear-gradient(to left, #000 45%, transparent);
  }
  /* Text sits above the watermark (the photo is positioned, so it would win ties). */
  .dispenser-head, .dispenser-points, .dispenser-body, .dispenser-fine, .water-pick {
    position: relative; z-index: 1;
  }
}

/* ---------- multi-item product cart (wizard step 3) ---------- */
.wizard-cart { display: grid; gap: 0.9rem; margin-bottom: 1.2rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 460px) { .wizard-cart { grid-template-columns: 1fr; } }
.cart-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center;
  border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1rem 0.75rem; background: #fff;
}
.cart-card .product-img {
  position: relative; /* anchor for .promo-tag */
  width: 96px; height: 96px; margin-bottom: 0.4rem; padding: 0.5rem;
  border-radius: var(--radius); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--celeste-050), var(--celeste-100));
  border: 1px solid var(--celeste-100);
}
.cart-card .product-img img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
/* Corner label on the botellón we want chosen (steps.js product(), promoName).
   Bare rotated text at the figure's upper-right corner — no plate behind it — glowing
   on a pulse so it catches the eye; the pulse stops under prefers-reduced-motion.
   Decorative — the price and name below carry the real information. */
.promo-tag {
  position: absolute; top: 1px; right: -12px; transform: rotate(45deg);
  color: var(--red);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 0 6px rgba(var(--red-rgb), 0.75);
  animation: promo-glow 1.8s ease-in-out infinite;
}
@keyframes promo-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(var(--red-rgb), 0.45); }
  50% { text-shadow: 0 0 12px rgba(var(--red-rgb), 0.95); }
}
@media (prefers-reduced-motion: reduce) { .promo-tag { animation: none; } }
.cart-name { font-size: 0.9rem; color: var(--slate); line-height: 1.25; }
.cart-price { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
/* Bottles the frío/calor abono already covers. */
.cart-included { font-size: 0.75rem; font-weight: 700; color: var(--celeste-2); }
.qty-stepper { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; }
.qty-stepper .qty { min-width: 1.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 1.25rem; font-weight: 700; line-height: 1; display: grid; place-items: center;
  font-family: var(--font-body); transition: background 0.15s, transform 0.15s;
}
.qty-btn[data-inc] { background: var(--blue); color: #fff; }
.qty-btn[data-inc]:hover { background: var(--blue-dark); transform: translateY(-1px); }
.qty-btn[data-dec] { background: var(--celeste-050); color: var(--blue-dark); }
.qty-btn[data-dec]:hover { background: var(--celeste-100); }
.qty-btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; transform: none; }
.cart-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; border-radius: var(--radius); margin-bottom: 0.4rem;
  background: var(--celeste-050); border: 1px solid var(--celeste-100);
}
.cart-bar .cart-total-label { font-weight: 600; color: var(--slate); }
.cart-bar .cart-total { font-weight: 800; font-size: 1.2rem; color: var(--blue); font-variant-numeric: tabular-nums; }

.status-msg { text-align: center; padding: 1.25rem 0.5rem; color: var(--body); }
.status-msg.success { color: var(--success); font-weight: 600; font-size: 1.05rem; }
.status-msg a { color: var(--blue); text-decoration: underline; }

/* Coverage-check loader (04 §5): a spinning botellón, water waving inside it. The whole group
   (water clipped to the body + cap + outline) spins as one around the body centre, so the
   water is always centred and contained — nothing shows outside the glass. Decorative;
   motion is disabled under prefers-reduced-motion. */
.coverage-anim { display: flex; justify-content: center; padding: 0.5rem 0 0.25rem; }
.canister { width: 120px; height: auto; overflow: visible; }
.canister-spin {
  transform-box: view-box; transform-origin: 60px 78px;
  animation: can-spin 3.4s linear infinite;
}
/* Counter-spin cancels the bottle's rotation so the water surface stays level (gravity),
   even though its clip rotates with the glass. Same origin/period as can-spin, opposite sign. */
.can-water { transform-box: view-box; transform-origin: 60px 78px; animation: can-counterspin 3.4s linear infinite; }
.can-wave { transform-box: view-box; }
.can-wave-back { fill: rgba(var(--blue-rgb), 0.4); animation: can-wave-move 3s linear infinite; }
.can-wave-front { fill: rgba(var(--blue-rgb), 0.85); animation: can-wave-move 2.1s linear infinite; }
.can-cap { fill: #9aa1ab; } /* grey cap, like the real botellón */
.can-shell { fill: none; stroke: var(--blue-dark); stroke-width: 3.2; stroke-linejoin: round; }
@keyframes can-wave-move { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes can-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes can-counterspin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .canister-spin, .can-water, .can-wave-back, .can-wave-front { animation: none; }
}

/* ---------- how it works ---------- */

.how { background: var(--celeste-050); }
.how-inner { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.how-head { flex: 1 1 260px; min-width: 220px; }
.how-bubble {
  display: none; width: 72px; height: 72px; margin-bottom: 1.5rem;
  background: var(--celeste); border-radius: 22px 22px 22px 4px;
}
.how-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; }
.steps { list-style: none; flex: 1.6 1 380px; min-width: 260px; display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 0; }
.step { display: flex; align-items: flex-start; gap: 1.1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); }
.step-num {
  flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--celeste); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; display: grid; place-items: center;
}
@media (min-width: 761px) {
  .how-bubble { display: block; }
}
.step-body h3 { font-size: 1.12rem; font-weight: 700; color: var(--blue); margin-bottom: 0.35rem; }
.step-body p { color: var(--muted); font-size: 0.96rem; }

/* ---------- generic cards (products / trust) ---------- */

.cards {
  display: grid; gap: 1.25rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem 1.4rem; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.12rem; font-weight: 600; color: var(--ink); margin-bottom: 0.45rem; }
.card p { color: var(--muted); font-size: 0.96rem; }

/* products */
.products { background: var(--bg-soft); }
.product-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.product-card .product-img {
  width: 132px; height: 132px; border-radius: var(--radius-lg); display: grid; place-items: center;
  margin-bottom: 0.6rem; padding: 0.7rem;
  background: radial-gradient(circle at 50% 35%, var(--celeste-050), var(--celeste-100));
  border: 1px solid var(--celeste-100);
}
.product-card .product-img img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }

/* products carousel (competitor-style: swipe + arrows + dots) */
.carousel { position: relative; margin-top: 2rem; }
.carousel-track {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; padding: 0.5rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .card {
  flex: 0 0 auto; width: clamp(210px, 24vw, 250px); scroll-snap-align: start;
}
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--blue); box-shadow: var(--shadow);
  font-size: 1.7rem; line-height: 1; display: grid; place-items: center; cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}
.carousel-arrow:hover { background: var(--celeste-050); }
.carousel-prev { left: -6px; }
.carousel-next { right: -6px; }
.carousel-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.9rem; }
.carousel-dots button {
  position: relative;
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
  background: var(--celeste-100); cursor: pointer; transition: background-color 0.15s, width 0.15s;
}
.carousel-dots button.active { background: var(--red); width: 22px; }
/* Expand the tappable area to ~44px without growing the visible dot. */
.carousel-dots button::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

/* trust */
.trust { background: var(--bg); }
.trust-cards { display: flex; flex-wrap: wrap; justify-content: center; }
.trust-cards .card { flex: 1 1 280px; max-width: 320px; text-align: left; }
.trust-cards .card h3 { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--blue); }
.trust-cards .card-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; /* matches .step-num */
  background: var(--celeste); position: relative;
}
.trust-cards .card-ic::before {
  content: ""; position: absolute; inset: 10px;
  background-color: #fff; /* icon white on celeste circle, matches .step-num */
  -webkit-mask: var(--card-icon, url("assets/ic-check-circle.svg")) center/contain no-repeat;
  mask: var(--card-icon, url("assets/ic-check-circle.svg")) center/contain no-repeat;
}
.trust-cards .card[data-icon="verified"] { --card-icon: url("assets/ic-verified.svg"); }
.trust-cards .card[data-icon="local-shipping"] { --card-icon: url("assets/ic-local-shipping.svg"); }
.trust-cards .card[data-icon="monetization"] { --card-icon: url("assets/ic-monetization.svg"); }
.trust-cards .card[data-icon="build"] { --card-icon: url("assets/ic-build.svg"); }
.trust-cards .card[data-icon="eco"] { --card-icon: url("assets/ic-eco.svg"); }

/* merged trust + brand strip: closing CTA */
.trust-cta { margin-top: 2rem; text-align: center; }
.trust-cta-note { margin-top: 0.6rem; font-size: 0.95rem; color: var(--muted); }

/* ---------- footer ---------- */

.site-footer { background: var(--slate); color: #d7dde1; padding: clamp(2.25rem, 5vw, 3rem) var(--gutter) 1.5rem; }
.footer-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start;
}
.footer-brand img { height: 40px; width: auto; }
.footer-tag { margin-top: 0.7rem; color: #aeb7bd; max-width: 22rem; }
.footer-contact { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.footer-email { font-weight: 600; color: #fff; }
.footer-email:hover { color: var(--celeste); }
.social { display: flex; align-items: center; gap: 1rem; }
.social a { display: inline-flex; align-items: center; color: #d7dde1; font-weight: 500; }
.social img { filter: brightness(0) invert(1); opacity: 0.9; }
.social a:hover { color: #fff; }
.footer-legal {
  max-width: var(--maxw); margin: 1.75rem auto 0; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center;
  font-size: 0.9rem; color: #aeb7bd;
}
.footer-legal a:hover { color: #fff; text-decoration: underline; }

/* ---------- floating WhatsApp ---------- */

.wa-float {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--wa);
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34); }
.wa-float img { filter: brightness(0) invert(1); }

/* ---------- responsive ---------- */

@media (min-width: 900px) {
  .footer-inner { flex-wrap: nowrap; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  /* The dispenser as a BAND across the top of the hero, not `cover`.
     `cover` is what hid it: this hero is ~390x1389 on a phone (both CTA cards sit inside
     it) against a 2.5:1 photo, so cover scaled the image to 3465px wide and painted the
     middle 390 of it — a vertical slice of flat wall. The photo was there the whole time,
     11% of it, none of it the dispenser.
     `background-size: 100% auto` paints the full width instead and lets the image's own
     aspect set the band height, so what shows is decided by the CROP (assets/hero-mobile
     .webp is now framed on the dispenser — tools/optimize-hero.mjs). The gradient reaches
     solid --blue-dark at 33%, just past where the band ends, and background-color carries
     the rest of the hero — that is what keeps the band's bottom edge from reading as a
     seam. Lighter at the top than the old overlay (0.62/0.55) because there is finally
     something worth seeing through it.
     The gradient is sized to the BAND (`100% 110.4vw`, the crop's 773/700 ratio), not to
     the hero: sized to the hero its opaque stop lands at a fixed fraction of a box whose
     height depends on how the copy wraps, and at 760px that cut the dispenser in half. */
  .hero {
    color: #fff; text-align: center;
    background-color: rgb(var(--blue-dark-rgb));
    /* Fallback for no image-set(): the wide desktop JPEG in the same band, so pre-2023
       browsers get a photo strip rather than a broken layout. It is not the crop. */
    background-color: rgb(var(--blue-dark-rgb));
    background-image:
      linear-gradient(180deg, rgba(var(--blue-deep-rgb), 0.62) 0%, rgba(var(--blue-dark-rgb), 0.55) 55%, rgb(var(--blue-dark-rgb)) 100%),
      var(--hero-mobile-dispenser);
    background-position: top center, top center;
    background-size: 100% 110.4vw, 100% auto;
    background-repeat: no-repeat, no-repeat;
  }
  /* copy-first so the H1 + CTA + reassurance are on the first paint (04 CRO §2) */
  .hero-inner { flex-direction: column; min-height: min(70vh, 560px); min-height: min(70dvh, 560px); gap: 1.4rem; text-align: center; justify-content: center; }
  .hero-copy { max-width: 100%; }
  .hero-badges { justify-content: center; }
  .hero-reassure, .hero-proof { margin-inline: auto; }
  .wizard-actions { flex-direction: column-reverse; }
  .footer-inner { flex-direction: column; gap: 1.5rem; }
}

@media (max-width: 480px) {
  /* Below this width only one product card fits at a time (card floors at
     210px via the clamp in .carousel-track > .card) — center it in the
     viewport instead of leaving it flush against the left padding. */
  .carousel-track { padding-inline: calc(50% - 105px); }
  .carousel-track > .card { scroll-snap-align: center; }
}

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

/* ---------- Google Places autocomplete dropdown ---------- */
/* Attached to the Direccion input on /alta; must float above the wizard card. */
.field.pac-anchor { position: relative; }
.pac-container {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 10000; margin: 4px 0 0; padding: 0; list-style: none;
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--celeste-100); border-radius: var(--radius);
  box-shadow: var(--shadow-celeste); background: #fff;
  font-family: var(--font-body);
}
.pac-container[hidden] { display: none; }
.pac-item { padding: 0.5rem 0.75rem; font-size: 0.95rem; color: var(--body); cursor: pointer; border-top: 1px solid var(--celeste-050); }
.pac-item:first-child { border-top: none; }
.pac-item.is-active, .pac-item:hover { background: var(--celeste-050); }

/* ---------- Legal pages (privacy.html) ---------- */
/* Plain prose page with no <main>, so `main > section` never reached it and the
   global reset left the text flush against both viewport edges on a phone. Scoped
   to .legal-page rather than wrapped in <main>, so the marketing h2 treatment
   (centered, red underline) doesn't land on a policy subheading. */
.legal-page section { padding-block: clamp(2rem, 6vw, 3.5rem); }
.legal-page h1 { font-size: clamp(1.55rem, 4vw, 2.2rem); color: var(--blue); margin-bottom: 1.1rem; }
.legal-page h2 { font-size: 1.1rem; font-weight: 700; margin: 1.7rem 0 0.4rem; }
.legal-page p { max-width: 44rem; margin-bottom: 0.85rem; }
.legal-page section a { color: var(--red); font-weight: 600; text-decoration: underline; }

/* ---------- Focused /alta signup page ---------- */
/* Slim single-column page: logo-only header, the wizard fills the viewport. */
.alta-page .site-header { border-bottom: 1px solid var(--celeste-100); }
.alta-page main { min-height: 62vh; min-height: 62dvh; }
.alta-page .wizard { padding-block: clamp(2rem, 6vw, 4rem); }