/*
 * Salesio universal template — sections.css
 *
 * One block per section type. Every block is scoped under the
 * section's `.sx-{type}` class so they cannot bleed into each other
 * regardless of order in site.json. Themes never override this file —
 * they override the `--sx-*` tokens in base.css and the visual
 * change propagates.
 */

/* ─ HERO SPLIT — full-bleed image + glass panel ───────────────── */
/*
 * Editorial template hero: photograph spans the entire hero section
 * (full viewport width, ~640px tall on desktop) and the text floats
 * on top inside a frosted-glass panel. The panel sits on the LEFT
 * by default (where editorial photos typically leave "copy space"),
 * with subject of the image on the RIGHT. Setting `image_side: "left"`
 * in the section props moves the panel to the RIGHT side.
 *
 * The panel uses backdrop-filter for the frosted effect; we ship a
 * solid white fallback at >85% opacity so the text stays legible on
 * browsers without backdrop-filter (older Firefox, anything pre-2022).
 *
 * Subject focus: `object-position: 30% center` shows the LEFT third
 * of the photo prominently, so the subject (model, product) reads
 * even when the panel takes 40% of the visible width.
 */
.sx-hero-split {
  position: relative;
  overflow: hidden;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  /* Hero size: taller / more cinematic (esp. for video backgrounds),
     capped so it never dwarfs the page on huge screens. */
  min-height: 640px;
  height: clamp(640px, 88vh, 920px);
}
/* height_style="compact" — shorter hero (opt-in). */
.sx-hero-split--compact {
  min-height: 460px;
  height: clamp(440px, 62vh, 600px);
}
/* height_style="tall" — additive, opt-in bump for templates whose
   hero video needs a bit more stage without changing the shared
   default height across the rest of the catalog. */
.sx-hero-split--tall {
  min-height: 700px;
  height: clamp(700px, 92vh, 980px);
}
/* height_style="full" — viewport-height hero. The image/video fills
   the entire screen on first paint (classic "real hero" feel), the
   text panel floats narrow on the side. Capped at 1080px so 4K
   monitors don't show an absurd 2160px tower. Mobile keeps a sane
   minimum so the panel + CTAs never get cropped. */
.sx-hero-split--fullscreen {
  min-height: 560px;
  height: clamp(560px, 100vh, 1080px);
}
/* Narrower panel for fullscreen heros — keeps the image breathing
   even more when the canvas is huge. */
.sx-hero-split--fullscreen.sx-hero-split--cinematic .sx-hero-split__panel,
.sx-hero-split--fullscreen.sx-hero-split--transparent .sx-hero-split__panel,
.sx-hero-split--fullscreen.sx-hero-split--frosted .sx-hero-split__panel {
  max-width: 440px !important;
}
@media (min-width: 1200px) {
  .sx-hero-split--fullscreen.sx-hero-split--cinematic .sx-hero-split__panel,
  .sx-hero-split--fullscreen.sx-hero-split--transparent .sx-hero-split__panel,
  .sx-hero-split--fullscreen.sx-hero-split--frosted .sx-hero-split__panel {
    max-width: 480px !important;
  }
}
.sx-hero-split__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shift the visible focus to the LEFT third of the wide editorial
     photo so the subject is what the eye lands on first. The panel
     covers the right side of the photo, which is usually negative
     space designed for copy. */
  object-position: 30% center;
  z-index: 0;
}
.sx-hero-split__overlay {
  position: absolute;
  inset: 0;
  /* Very subtle dark wash on the side where the panel sits, so the
     glass panel reads even over busy photos. The gradient is biased
     toward the panel side. */
  background: linear-gradient(to right, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 50%);
  z-index: 1;
  /* CUANDO LA DUEÑA ELIGE (Zoe, 05-sep-2026): su color pinta plano y su
     transparencia manda. Sin elección, el degradado sutil de arriba sigue
     igual — la regla de abajo solo se activa si la variable existe. */
  pointer-events: none;
}.sx-hero-split[style*="--sx-hero-velo"] > .sx-hero-split__overlay {
  background: var(--sx-hero-velo, rgba(0,0,0,0.10));
  opacity: var(--sx-hero-velo-a, 1);
}
.sx-hero-split[style*="--sx-hero-velo-a"] > .sx-hero-split__overlay {
  opacity: var(--sx-hero-velo-a, 1);
}
/* LA POSICIÓN QUE ELIGIÓ LA DUEÑA (06-sep-2026). Sin elección, el foco por
   layout de arriba (30% / 70% / 50%) sigue mandando; con elección, su punto
   gana en TODAS las anchuras — el celular recorta los lados y la computadora
   arriba/abajo, y un solo valor con los dos ejes sirve para las dos. La
   especificidad (clase + atributo + clase) supera a `--panel-right` /
   `--panel-center`. Vale también para el <video> de fondo. */
.sx-hero-split[style*="--sx-hero-pos"] > .sx-hero-split__bg {
  object-position: var(--sx-hero-pos, 30% center);
}

/* Cinematic overlay — opt-in via overlay_style="cinematic" on the
   hero props. Mixes a diagonal dark wash with a subtle brand-color
   tint at the corners, designed for video backgrounds. The panel
   stays readable on top thanks to its frosted glass; if a customer
   later switches the panel to transparent + white text, it still
   works because the overlay is dark enough end-to-end. */
.sx-hero-split--cinematic .sx-hero-split__overlay {
  background:
    radial-gradient(120% 80% at 80% 100%, color-mix(in srgb, var(--sx-color-primary) 35%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.40) 45%, rgba(0,0,0,0.65) 100%);
}
.sx-hero-split--cinematic .sx-hero-split__panel {
  background: rgba(20, 21, 26, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  /* Cinematic panels stay narrower so the video subject (a person, a
     van, etc.) breathes on the other side instead of being covered by
     the text card. Falls back to the universal max-width for narrow
     viewports where the panel is full-width anyway. Bumped 2026-05-28
     from 420/440 → 540/620 (user requested wider headline room). */
  max-width: 620px !important;
}
@media (min-width: 1200px) {
  .sx-hero-split--cinematic .sx-hero-split__panel { max-width: 700px !important; }
}
/* CENTERED cinematic panel — the 0.55 fill above assumes the panel sits on a
   SIDE, where the 135° overlay is at its darkest (0.72 / 0.65). Dead centre is
   the gradient's lightest point (0.40), so a centred panel gets the weakest
   scrim in the frame and usually the brightest part of the footage behind it.
   Everything still measured above 6:1 there, but measuring is not the same as
   reading: the type was sitting on a haze instead of a card. A denser fill for
   the centred case only — side panels keep the look every other template
   already ships. */
.sx-hero-split--cinematic.sx-hero-split--panel-center .sx-hero-split__panel {
  background: rgba(11, 13, 18, 0.80) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.55);
}

/* ── Transparent variant ────────────────────────────────────────
   overlay_style="transparent" — minimal scrim + glass panel. The
   video stays clearly visible UNDER the text without the cinematic
   dark theatrical look. Text stays white with a soft shadow for
   contrast even over bright frames. */
.sx-hero-split--transparent .sx-hero-split__overlay {
  background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.20) 100%);
}
.sx-hero-split--transparent .sx-hero-split__panel {
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  max-width: 640px !important;
  text-shadow: none;
}
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .sx-hero-split--transparent .sx-hero-split__panel { background: rgba(255, 255, 255, 0.06) !important; }
}
.sx-hero-split--transparent .sx-hero-split__panel,
.sx-hero-split--transparent .sx-hero-split__panel h1,
.sx-hero-split--transparent .sx-hero-split__panel p,
.sx-hero-split--transparent .sx-hero-split__panel .sx-eyebrow { color: #fff !important; }
.sx-hero-split--transparent .sx-hero-split__panel .sx-eyebrow::before { background: var(--sx-color-accent-fill, var(--sx-color-accent)); }
/* A white label on `background: transparent` has no ground of its own, so its
   contrast is whatever the photo happens to be at that spot. Measured on
   eagle-multiservice, whose hero video is a bright shop: 2.10:1 — the button
   effectively disappeared. 51 templates pair this variant with a ghost hero
   CTA, so every one of them was one bright photo away from the same result.
   A translucent dark plate with the same blur as the panel keeps the glass
   look and puts a floor under the label: worst case (pure white behind) now
   measures ~4.9:1, and it only improves as the photo darkens. */
.sx-hero-split--transparent .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(0,0,0,0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sx-hero-split--transparent .sx-btn--ghost:hover {
  background: #fff !important;
  color: #0a0a0a !important;
  border-color: #fff !important;
}

/* ══ OPACITY family (additive) ═══════════════════════════════════════
   The transparent/frosted/cinematic variants above are GLASS — a
   backdrop-filter blur behind the panel. The three variants below are
   OPACITY-based instead: a plain translucent box (no blur), or no box at
   all. Same "see-through" feel without the frosted-glass texture.
     • bare  — NO panel box; text sits directly on the image (scrim +
               text-shadow for legibility). White text. ("transparente
               de opacidad", like the editorial layout.)
     • scrim — solid translucent DARK box (opacity, no blur). White text.
     • veil  — solid translucent LIGHT box (opacity, no blur). Dark text. */
.sx-hero-split--bare .sx-hero-split__overlay {
  background: linear-gradient(135deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.32) 100%);
}
.sx-hero-split--bare .sx-hero-split__panel {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0; padding-right: 0;
  max-width: 760px !important;
}
.sx-hero-split--bare .sx-hero-split__panel,
.sx-hero-split--bare .sx-hero-split__panel h1,
.sx-hero-split--bare .sx-hero-split__panel p,
.sx-hero-split--bare .sx-hero-split__panel .sx-eyebrow { color: #fff !important; }
.sx-hero-split--bare .sx-hero-split__title,
.sx-hero-split--bare .sx-hero-split__sub { text-shadow: 0 2px 22px rgba(0,0,0,0.5); }
.sx-hero-split--bare .sx-hero-split__panel .sx-eyebrow::before { background: var(--sx-color-accent-fill, var(--sx-color-accent)); }
.sx-hero-split--bare .sx-btn--ghost {
  color: #fff !important; border-color: rgba(255,255,255,0.6) !important; background: transparent !important;
}
.sx-hero-split--bare .sx-btn--ghost:hover { background: #fff !important; color: #0a0a0a !important; border-color: #fff !important; }

.sx-hero-split--scrim .sx-hero-split__panel {
  background: rgba(14, 11, 20, 0.48) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  color: #fff;
}
.sx-hero-split--scrim .sx-hero-split__panel,
.sx-hero-split--scrim .sx-hero-split__panel h1,
.sx-hero-split--scrim .sx-hero-split__panel p,
.sx-hero-split--scrim .sx-hero-split__panel .sx-eyebrow { color: #fff !important; text-shadow: none; }
.sx-hero-split--scrim .sx-hero-split__panel .sx-eyebrow::before { background: var(--sx-color-accent-fill, var(--sx-color-accent)); }
.sx-hero-split--scrim .sx-btn--ghost {
  color: #fff !important; border-color: rgba(255,255,255,0.5) !important; background: transparent !important;
}
.sx-hero-split--scrim .sx-btn--ghost:hover { background: #fff !important; color: #0a0a0a !important; border-color: #fff !important; }

/* hero_portrait con velo oscuro: el MISMO arreglo que ya tenía hero_split y que
   éste nunca recibió. Con `overlay_style: "dark"` el titular y el subtítulo se
   invierten a blanco (`--tone-light`), pero el botón fantasma se quedaba con la
   tinta del tema — verde oscuro sobre una foto oscurecida, ilegible. Se vio en
   la plantilla del agente inmobiliario con la foto de interior que puso Zoe
   (21-ago-2026): "GET MY HOME VALUATION" se leía y "HOW I WORK" desaparecía.
   Arreglarlo aquí lo arregla para toda plantilla que use este hero sobre foto. */
.sx-hero-portrait--tone-light .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}
.sx-hero-portrait--tone-light .sx-btn--ghost:hover {
  background: #fff !important; color: #0a0a0a !important; border-color: #fff !important;
}

.sx-hero-split--veil .sx-hero-split__panel {
  /* Blanco CÁLIDO y casi opaco, no blanco puro al 62%.
     Medido sobre el render en vivo: al 62% sin desenfoque, la foto se colaba y
     la luminancia del panel oscilaba entre 0.665 y 0.905 según lo que hubiera
     detrás — el subtítulo caía a 3.56:1 sobre las zonas oscuras (ropa, pelo).
     Modelado el mismo caso da 3.57, así que el número no es una impresión.
     Al 95% queda: titular 13.0, subtítulo 6.8, eyebrow 4.6 en la zona oscura.
     El desenfoque es lo que quita la sensación de texto inestable: aplana la
     variación en vez de dejar que cada letra caiga sobre un fondo distinto. */
  background: rgba(253, 250, 244, 0.95) !important;
  -webkit-backdrop-filter: blur(8px) saturate(105%) !important;
  backdrop-filter: blur(8px) saturate(105%) !important;
  border: 1px solid rgba(255, 252, 246, 0.9);
  box-shadow: 0 18px 54px rgba(30, 42, 24, 0.16);
  color: var(--sx-color-ink);
}
.sx-hero-split--veil .sx-hero-split__panel,
.sx-hero-split--veil .sx-hero-split__panel h1,
.sx-hero-split--veil .sx-hero-split__panel p { color: var(--sx-color-ink) !important; text-shadow: none; }
.sx-hero-split--veil .sx-hero-split__sub { color: var(--sx-color-ink-soft) !important; }
.sx-hero-split--veil .sx-hero-split__panel .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-hero-split--veil .sx-hero-split__panel .sx-eyebrow::before { background: var(--sx-color-primary-fill, var(--sx-color-primary)); }

/* framed — a see-through panel with a subtle FRAME (hairline border + soft
   floating shadow) but NO glass blur and (almost) no fill. Gives the apbs
   "marco/resaltado transparente" look at ANY position (left/center/right),
   without forcing the centered editorial layout. White text. */
.sx-hero-split--framed .sx-hero-split__panel {
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.32);
  color: #fff;
}
.sx-hero-split--framed .sx-hero-split__panel,
.sx-hero-split--framed .sx-hero-split__panel h1,
.sx-hero-split--framed .sx-hero-split__panel p,
.sx-hero-split--framed .sx-hero-split__panel .sx-eyebrow { color: #fff !important; }
.sx-hero-split--framed .sx-hero-split__title,
.sx-hero-split--framed .sx-hero-split__sub { text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.sx-hero-split--framed .sx-hero-split__panel .sx-eyebrow::before { background: var(--sx-color-accent-fill, var(--sx-color-accent)); }
.sx-hero-split--framed .sx-btn--ghost {
  color: #fff !important; border-color: rgba(255,255,255,0.55) !important; background: transparent !important;
}
.sx-hero-split--framed .sx-btn--ghost:hover { background: #fff !important; color: #0a0a0a !important; border-color: #fff !important; }

/* ── Frosted variant ────────────────────────────────────────────
   overlay_style="frosted" — opaque-leaning white glass panel.
   Letters use ink color (dark) so they read crisply. Use when the
   bg image/video is busy and you want max copy legibility while
   keeping a hint of glass texture. Less moody than cinematic,
   more readable than transparent. */
.sx-hero-split--frosted .sx-hero-split__overlay {
  background: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 50%);
}

/* ── overlay_style: "warm" — hot warm transparent tint ───────────
   Pink → coral → orange diagonal gradient. Sexy, hot, passionate.
   Ideal for beauty / lash / boudoir / wax brands. Text stays white. */
.sx-hero-split--warm .sx-hero-split__overlay {
  background: linear-gradient(135deg,
    rgba(220, 38, 100, 0.10) 0%,
    rgba(244, 80, 90, 0.10) 45%,
    rgba(255, 140, 70, 0.10) 100%) !important;
}
.sx-hero-split--warm .sx-hero-split__panel {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 22px 56px rgba(220, 38, 100, 0.22);
}
.sx-hero-split--warm .sx-hero-split__title,
.sx-hero-split--warm .sx-hero-split__sub,
.sx-hero-split--warm .sx-eyebrow { color: #ffffff !important; }
.sx-hero-split--warm .sx-eyebrow::before { background: rgba(255,255,255,0.6); }
.sx-hero-split--warm .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.sx-hero-split--warm .sx-btn--ghost:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.85) !important;
}
.sx-hero-split--frosted .sx-hero-split__panel {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 56px rgba(0,0,0,0.18);
  max-width: 660px !important;
}
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .sx-hero-split--frosted .sx-hero-split__panel { background: rgba(255, 255, 255, 0.85) !important; }
}
.sx-hero-split--frosted .sx-hero-split__panel,
.sx-hero-split--frosted .sx-hero-split__panel h1,
.sx-hero-split--frosted .sx-hero-split__panel p { color: var(--sx-color-ink) !important; text-shadow: none; }
.sx-hero-split--frosted .sx-hero-split__panel .sx-hero-split__sub { color: var(--sx-color-ink-soft) !important; }
.sx-hero-split--frosted .sx-hero-split__panel .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-hero-split--frosted .sx-hero-split__panel .sx-eyebrow::before { background: var(--sx-color-primary-fill, var(--sx-color-primary)); }

/* Elegant typography polish for the frosted variant — applies to the
   hero title, subheading, and the italicized <em> emphasis words.
   Goal: editorial / executive feel, not flashy. Keeps everything
   theme-token driven so it adapts to each template's palette. */
.sx-hero-split--frosted .sx-hero-split__title {
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.08;
}
.sx-hero-split--frosted .sx-hero-split__title em {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 600;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  z-index: 0;
}
.sx-hero-split--frosted .sx-hero-split__title em::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.08em;
  height: 0.32em;
  background: color-mix(in srgb, var(--sx-color-primary) 22%, transparent);
  border-radius: 3px;
  z-index: -1;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-hero-split--frosted .sx-hero-split__title:hover em::after {
  height: 0.5em;
}
.sx-hero-split--frosted .sx-hero-split__panel .sx-eyebrow {
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 11.5px;
  padding-bottom: 0;
  margin-bottom: 18px;
}
.sx-hero-split--frosted .sx-hero-split__sub {
  font-size: 17.5px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  margin-top: 6px;
  max-width: 52ch;
}
/* Soft entrance — subheading fades in slightly later than the title
   for a layered reveal feel. The sx-stagger machinery already does
   this for direct children, this just deepens the easing curve. */
.sx-hero-split--frosted .sx-hero-split__sub { transition-delay: 200ms; }
.sx-hero-split--frosted .sx-hero-split__ctas { transition-delay: 380ms; }
.sx-hero-split--cinematic .sx-hero-split__panel .sx-eyebrow { color: #fff; }
.sx-hero-split--cinematic .sx-hero-split__panel .sx-eyebrow::before { background: #fff; }
.sx-hero-split--cinematic .sx-hero-split__panel,
.sx-hero-split--cinematic .sx-hero-split__panel h1,
.sx-hero-split--cinematic .sx-hero-split__panel p { color: #fff !important; }

/* ── Minimal variant ────────────────────────────────────────────
   overlay_style="minimal" — no panel chrome, no scrim. Text floats
   directly on the background image (or on the section bg when no
   image is set). Best for: light/desaturated photos, or no-image
   heroes where the page bg color is the canvas. Inherits ink color
   so it works in both light + dark themes without flipping to white. */
.sx-hero-split--minimal .sx-hero-split__overlay { background: transparent; }
.sx-hero-split--minimal .sx-hero-split__panel {
  background: transparent !important;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
  max-width: 620px !important;
}
.sx-hero-split--minimal .sx-hero-split__panel,
.sx-hero-split--minimal .sx-hero-split__panel h1,
.sx-hero-split--minimal .sx-hero-split__panel p { color: var(--sx-color-ink); text-shadow: none; }
.sx-hero-split--minimal .sx-hero-split__panel .sx-eyebrow {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  padding: 8px 16px;
  border-radius: var(--sx-radius-pill, 999px);
}
/* Ghost CTA in minimal variant — same glass treatment as the text
   blocks so it reads against busy photos but keeps the outlined feel. */
.sx-hero-split--minimal .sx-btn--ghost {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  color: var(--sx-color-ink) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
.sx-hero-split--minimal .sx-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: #fff !important;
}
.sx-hero-split--minimal .sx-hero-split__panel .sx-eyebrow::before { display: none; }
.sx-hero-split--minimal .sx-hero-split__panel .sx-hero-split__sub { color: var(--sx-color-ink-soft); }

/* Minimal variant: anchor the floating text near the BOTTOM of the
   hero so the bg image's subject (face/scene) stays uncovered above. */
.sx-hero-split--minimal .sx-hero-split__container {
  align-items: flex-end;
  padding-bottom: 8vh;
}
/* Each text element gets its OWN glass background (heading + subheading)
   so they read clearly against a busy bg without wrapping the whole
   panel in a card. Inline-block so the bg only spans the actual text
   width per element, not the full panel column. */
.sx-hero-split--minimal .sx-hero-split__title {
  display: inline-block;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  padding: 12px 20px;
  border-radius: var(--sx-radius-md, 6px);
  color: var(--sx-color-ink) !important;
}
.sx-hero-split--minimal .sx-hero-split__sub {
  display: inline-block;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  padding: 12px 18px;
  border-radius: var(--sx-radius-md, 6px);
  color: var(--sx-color-ink) !important;
  max-width: 100%;
}

/* ── Blocks variant ─────────────────────────────────────────────
   overlay_style="blocks" — eyebrow + heading render as colored
   filled blocks using the theme's primary/accent. Box-decoration
   stays clean on multi-line headings. Best for poster-style heros
   with one or two short lines of bold copy. */
.sx-hero-split--blocks .sx-hero-split__overlay { background: transparent; }
/* Blocks variant: anchor the poster blocks to the LOWER part of the
   hero (instead of dead-center) so the subject's face/upper body in
   the bg photo stays uncovered. Combined with the smaller heading
   below it reads as a poster pinned to the bottom-third. */
.sx-hero-split--blocks .sx-hero-split__container {
  align-items: flex-end;
  padding-bottom: 16vh;
}
.sx-hero-split--blocks .sx-hero-split__panel {
  background: transparent !important;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
  max-width: 560px !important;
}
/* Smaller heading for the blocks poster so it doesn't dominate the
   image — was inheriting the .sx-hero-split__title default which is
   clamp(36px, 5vw, 64px). Bring it down a notch for a tighter poster
   feel. */
.sx-hero-split--blocks .sx-hero-split__title {
  font-size: clamp(28px, 4.2vw, 52px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}
/* Bump the blocks panel max-width so a 2-3 word heading fits on
   one line at desktop sizes without the title wrapping. */
.sx-hero-split--blocks .sx-hero-split__panel {
  max-width: 520px !important;
  /* Stack children vertically so eyebrow + heading + CTAs are on
     their own rows. Without this, the inline eyebrow + inline title
     (set inline for the colored-block effect) can flow on the same
     line when the panel is wide enough. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.sx-hero-split--blocks .sx-hero-split__ctas {
  margin-top: 0 !important;
}
.sx-hero-split--blocks .sx-hero-split__panel .sx-eyebrow {
  display: inline-block;
  background: var(--sx-color-accent-fill, var(--sx-color-accent));
  color: #fff;
  padding: 10px 18px;
  letter-spacing: 0.18em;
  border-radius: 0;
  margin-bottom: 0;
}
.sx-hero-split--blocks .sx-hero-split__panel .sx-eyebrow::before { display: none; }
.sx-hero-split--blocks .sx-hero-split__title {
  display: inline;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: #fff;
  padding: 6px 18px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.45;
}
.sx-hero-split--blocks .sx-hero-split__title em {
  background: var(--sx-color-accent-fill, var(--sx-color-accent));
  color: #fff;
  font-style: normal;
  padding: 0 10px;
}
.sx-hero-split--blocks .sx-hero-split__sub {
  color: var(--sx-color-ink);
  margin-top: 0;
  /* Soft white-glass background for legibility over busy hero
     photos/video — matches the poster aesthetic of the blocks
     variant without competing with the colored heading blocks. */
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  padding: 14px 18px;
  border-radius: var(--sx-radius-md, 6px);
  display: inline-block;
}
/* Ghost CTA inside the blocks variant — same glass treatment so it
   reads against the photo without breaking from the panel's design
   language. Keeps the outlined-button feel via a subtle border. */
.sx-hero-split--blocks .sx-btn--ghost {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  color: var(--sx-color-ink) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
.sx-hero-split--blocks .sx-btn--ghost:hover {
  background: #fff !important;
  border-color: #fff !important;
}
/* The cinematic panel is DARK (a scrim over the photo), so the accent here
   needs the inverse-tuned value. `accent-ink` is derived against the page
   background, which is light — using it painted the largest piece of accent
   type on the page at ~2.3:1. 98 templates ship this hero. */
.sx-hero-split--cinematic .sx-hero-split__title em { color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)); }
/* Buttons-on-cinematic: ghost CTAs need white text + visible border on
   the dark gradient (default ghost is dark-text-on-light-border, which
   disappears on the black overlay). Primary buttons already pop because
   the panel is dark — they show as yellow with on_primary text. */
.sx-hero-split--cinematic .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
}
.sx-hero-split--cinematic .sx-btn--ghost:hover {
  background: #fff !important;
  color: var(--sx-color-ink) !important;
  border-color: #fff !important;
}
.sx-hero-split--cinematic .sx-btn--text {
  color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)) !important;
}
/* Center the CTA row inside cinematic panels — buttons aligned to the
   middle of the panel reads as more deliberate / poster-like with a
   dark hero card. Legacy hero_split (no video, light frosted panel)
   keeps the flex-start alignment. */
/* CTAs + feature pills follow the PANEL alignment. Only center them when the
   panel itself is centered (panel-center / editorial). A left/right panel
   keeps them aligned with the text — before, cinematic ALWAYS centered the
   CTAs, so on a left/right panel the buttons floated to the middle while the
   text sat to the side ("botones desorganizados"). */
.sx-hero-split--panel-center .sx-hero-split__ctas,
.sx-hero-split--editorial .sx-hero-split__ctas,
.sx-hero-split--panel-center .sx-hero-split__features,
.sx-hero-split--editorial .sx-hero-split__features {
  justify-content: center;
}
.sx-hero-split__container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  /* Side padding matches the rest of the page container. */
  padding-top: 32px;
  padding-bottom: 32px;
}
.sx-hero-split__panel {
  width: 100%;
  /* Default panel max-width — bumped 2026-05-27 from 560 → 620 so
     longer headlines (10-14 words, as the inventor produces) wrap
     to 2 lines instead of 3. Cinematic + transparent variants set
     their own ceilings above. */
  max-width: 620px;
  padding: 40px 32px;
  border-radius: var(--sx-radius-lg);
  /* Frosted-glass effect. Fallback: 92% opaque white for browsers
     without backdrop-filter support. */
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .sx-hero-split__panel { background: rgba(255, 255, 255, 0.78); }
}
@media (min-width: 720px) {
  .sx-hero-split__panel { padding: 56px 48px; }
}
@media (min-width: 900px) {
  .sx-hero-split__panel { max-width: 620px; }
}
/* panel_size="compact" — opt-in narrower panel for verticals where the
   bg photo subject should breathe (lashes/brows close-ups). Applies on
   top of any overlay_style; uses !important so it overrides per-variant
   max-widths. */
.sx-hero-split--panel-compact .sx-hero-split__panel { max-width: 540px !important; }
@media (min-width: 1200px) {
  .sx-hero-split--panel-compact .sx-hero-split__panel { max-width: 580px !important; }
}
.sx-hero-split__title {
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--sx-color-ink);
  letter-spacing: -0.01em;
}
.sx-hero-split__title em { font-style: italic; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 700; }
.sx-hero-split__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--sx-color-ink-soft);
  margin-bottom: 28px;
  max-width: 440px;
}
.sx-hero-split__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* When the panel should sit on the RIGHT side (image subject on the
   left of the photo), we flip both the panel alignment AND the
   image's object-position so the eye-focus stays on the visible side. */
.sx-hero-split--panel-right .sx-hero-split__container { justify-content: flex-end; }
.sx-hero-split--panel-right .sx-hero-split__bg { object-position: 70% center; }
/* Mobile: regardless of panel side, the panel takes (close to) full
   width and centers in the container — the desktop "panel on the
   right/left over subject" composition only makes sense once the
   viewport is wide enough to show both. Below 720px the photo subject
   slides under the panel anyway, so centering reads as more polished
   than a right-aligned card with a sliver of bg on one side. */
@media (max-width: 719px) {
  .sx-hero-split__container,
  .sx-hero-split--panel-right .sx-hero-split__container { justify-content: center !important; }
}
.sx-hero-split--panel-right .sx-hero-split__overlay {
  background: linear-gradient(to left, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 50%);
}

/* CENTERED panel — opt-in via image_side="center". Useful for verticals
   where the bg is a wide scene (appliance kitchen, barbershop interior,
   van fleet) and no single subject anchors a side. The panel sits as
   a poster in the middle; the bg's focal point centers and the overlay
   is symmetric (no left/right bias) so the panel reads centered. */
.sx-hero-split--panel-center .sx-hero-split__container {
  justify-content: center;
  /* Anchor centered hero panels slightly below center so the image's
     upper portion (usually the subject) stays visible above the
     poster. Combined with the bigger panel width below, the panel
     reads as a lower-third overlay rather than a center bullseye. */
  align-items: flex-end;
  padding-bottom: 7vh;
}
/* panel_valign — explicit vertical position of the hero panel (top/center/
   bottom). Overrides the per-variant default (e.g. panel-center anchors to
   the lower third). Declared AFTER the variant rules so it always wins when
   set; same specificity → source order decides. */
.sx-hero-split--valign-top .sx-hero-split__container    { align-items: flex-start; padding-bottom: 32px; }
.sx-hero-split--valign-center .sx-hero-split__container { align-items: center;     padding-bottom: 32px; }
.sx-hero-split--valign-bottom .sx-hero-split__container { align-items: flex-end; }
/* panel_halign — explicit HORIZONTAL position of the panel (left/center/
   right), a clean override of the legacy image_side mapping. Declared after
   the panel-right/panel-center justify rules so it always wins when set.
   (The <720px rule below still force-centers on phones by design.) */
.sx-hero-split--halign-left .sx-hero-split__container   { justify-content: flex-start; }
.sx-hero-split--halign-center .sx-hero-split__container { justify-content: center; }
.sx-hero-split--halign-right .sx-hero-split__container  { justify-content: flex-end; }
.sx-hero-split--panel-center .sx-hero-split__bg { object-position: 50% center; }
.sx-hero-split--panel-center .sx-hero-split__overlay {
  background: radial-gradient(90% 70% at 50% 50%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 60%);
}
/* Wider panel for centered cinematic/transparent/frosted variants.
   The default cinematic 520px panel looks cramped when centered in a
   full hero frame — bump to ~720-800px so a 1-line headline gets to
   breathe and a 2-line headline still fits naturally. */
.sx-hero-split--panel-center.sx-hero-split--cinematic .sx-hero-split__panel,
.sx-hero-split--panel-center.sx-hero-split--transparent .sx-hero-split__panel,
.sx-hero-split--panel-center.sx-hero-split--frosted .sx-hero-split__panel {
  max-width: 720px !important;
  text-align: center;
}
@media (min-width: 1200px) {
  .sx-hero-split--panel-center.sx-hero-split--cinematic .sx-hero-split__panel,
  .sx-hero-split--panel-center.sx-hero-split--transparent .sx-hero-split__panel,
  .sx-hero-split--panel-center.sx-hero-split--frosted .sx-hero-split__panel {
    max-width: 820px !important;
  }
}
/* Center-align the CTA row too so it doesn't look left-stuck inside
   a now-centered panel. */
.sx-hero-split--panel-center .sx-hero-split__ctas { justify-content: center; }
/* Force the headline + subheading text-align: center inside any
   centered panel — covers cases where a variant or base style set
   left-align on .sx-hero-split__title / .sx-hero-split__sub. */
.sx-hero-split--panel-center .sx-hero-split__panel { text-align: center !important; }
.sx-hero-split--panel-center .sx-hero-split__panel * { text-align: center; }
.sx-hero-split--panel-center .sx-hero-split__title,
.sx-hero-split--panel-center .sx-hero-split__sub {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}
/* Eyebrow has display:inline-flex by default — wrap it in a centered
   flex so its tick + label sit on the panel axis. */
.sx-hero-split--panel-center .sx-eyebrow {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex !important;
}
/* The panel itself needs to be a centered block; .sx-hero-split__panel
   already has max-width, this guarantees it doesn't stretch to full
   container width and stays horizontally centered. */
.sx-hero-split--panel-center .sx-hero-split__panel {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Smaller heading + subheading for the centered poster panel so the
   text doesn't dominate the image. Pairs well with a 1-2 line headline. */
.sx-hero-split--panel-center .sx-hero-split__title {
  font-size: clamp(28px, 3.6vw, 44px) !important;
  line-height: 1.15 !important;
}
.sx-hero-split--panel-center .sx-hero-split__sub {
  font-size: 15px !important;
  line-height: 1.55 !important;
  max-width: 56ch;
}

/* ── hero_split variant: "floating-glass" ─────────────────────── */
.sx-hero-split--floating-glass .sx-hero-split__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.32) 100%);
}
.sx-hero-split--floating-glass .sx-hero-split__panel {
  background: rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.32) !important;
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.32);
  padding: 40px 36px;
  max-width: 520px;
}
/* Same trap as the cinematic panel: this glass sits over a photo with a
   dark scrim, so the title needs the INVERSE-tuned accent. `accent-ink`
   is darkened for the page background, which on a light theme makes the
   biggest type on the page nearly invisible against the glass. */
.sx-hero-split--floating-glass .sx-hero-split__title { color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)) !important; }
/* The eyebrow stays WHITE on this variant. Two rules used to fight here: the
   one below set it white, then a second immediately after re-set it to the
   brand accent and won, leaving a low-contrast tinted line over a photo
   (asia-luxury: "MARYLAND ASIA LUXURY TRAVEL ATELIER" barely readable). The
   panel floats over an image, so contrast comes from the scrim, not from the
   theme — white is the only value that holds on any photo. */
.sx-hero-split--floating-glass .sx-hero-split__sub,
.sx-hero-split--floating-glass .sx-eyebrow { color: #fff !important; }
.sx-hero-split--floating-glass .sx-eyebrow::before { background: #fff !important; }
.sx-hero-split--floating-glass .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
}
.sx-hero-split--floating-glass .sx-btn--ghost:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.85) !important;
}

/* ── hero_split variant: "asymmetrical" ───────────────────────── */
.sx-hero-split--asymmetrical .sx-hero-split__container { align-items: flex-end; }
.sx-hero-split--asymmetrical .sx-hero-split__panel {
  margin-top: auto;
  margin-bottom: 8vh;
  margin-left: clamp(0px, 4vw, 6vw);
  max-width: 540px;
  transform: translateX(-4%);
}
.sx-hero-split--asymmetrical .sx-hero-split__title {
  font-size: clamp(40px, 6vw, 72px) !important;
  letter-spacing: -0.03em;
}
.sx-hero-split--asymmetrical .sx-hero-split__overlay {
  background: linear-gradient(120deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 60%);
}

/* ── hero_split variant: "fullscreen-minimal" ─────────────────── */
.sx-hero-split--fullscreen-minimal { min-height: 100vh; }
.sx-hero-split--fullscreen-minimal .sx-hero-split__container { justify-content: center; }
.sx-hero-split--fullscreen-minimal .sx-hero-split__panel {
  background: transparent !important;
  border: none !important;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px;
}
.sx-hero-split--fullscreen-minimal .sx-hero-split__title {
  font-size: clamp(48px, 9vw, 120px) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em;
  color: #fff !important;
}
.sx-hero-split--fullscreen-minimal .sx-hero-split__sub {
  font-size: 16px !important;
  max-width: 520px;
  margin: 0 auto 36px !important;
  color: rgba(255,255,255,0.85) !important;
}
.sx-hero-split--fullscreen-minimal .sx-hero-split__ctas { justify-content: center; margin-top: 12px; }
.sx-hero-split--fullscreen-minimal .sx-hero-split__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.50) 100%);
}

/* ── hero_split variant: "editorial" ──────────────────────────── */
.sx-hero-split--editorial .sx-hero-split__panel {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: clamp(32px, 5vw, 64px);
  max-width: 920px;
}
/* ── editorial + a panel overlay_style ─────────────────────────────
   `--editorial` strips the panel to nothing (`background: transparent
   !important`) because its whole idea is type sitting directly on the image.
   That is right on a dark photo and wrong on a light one: it also silently
   cancels whatever `overlay_style` the template asked for, since both rules
   are 2 classes with !important and editorial simply comes later in the file.
   Observed on `executive-coach`: `overlay_style: "frosted"` applied its DARK
   text colour but lost its white glass, leaving the copy at 2.23:1 over a
   174/255 photo.

   Fixed by SPECIFICITY, not order: both classes land on the same element, so
   `--editorial.--frosted` is (0,3,0) and wins over editorial's (0,2,0)
   wherever either rule sits. Only the panel surface is restored — editorial
   keeps its own generous padding and type scale. */
.sx-hero-split--editorial.sx-hero-split--frosted .sx-hero-split__panel {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
  backdrop-filter: saturate(160%) blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.18);
}
@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
  .sx-hero-split--editorial.sx-hero-split--frosted .sx-hero-split__panel {
    /* Real glass, not frosted plastic: at 0.55 the photo reads through the
       panel. Checked against the darkest patches of a light hero photo
       (~40/255 under the glass still composites to ~158), where `ink` holds
       6.4:1 — so it stays legible even where the image goes dark. */
    background: rgba(255, 255, 255, 0.55) !important;
  }
}

/* `--editorial` assumes type sits directly on a photo, so it forces white
   text WITH a drop shadow. Over a glass panel both are wrong: `--frosted`
   wins the h1 COLOUR (0,2,1 beats 0,2,0) but nothing overrides the shadow,
   which left a dark halo behind dark type — and the ghost button stayed
   white-on-white, effectively invisible. Same-element double class (0,3,x)
   settles all of it without depending on file order. */
.sx-hero-split--editorial.sx-hero-split--frosted .sx-hero-split__title,
.sx-hero-split--editorial.sx-hero-split--frosted .sx-hero-split__sub,
.sx-hero-split--editorial.sx-hero-split--frosted .sx-eyebrow {
  text-shadow: none !important;
}
.sx-hero-split--editorial.sx-hero-split--frosted .sx-hero-split__sub {
  /* `ink-soft` is too light for glass this transparent: measured 4.44:1 on the
     average patch and 2.66:1 where the photo goes dark under the panel. Pulled
     78% toward `ink`, it clears 6.4:1 even on the darkest patch while staying
     visibly lighter than the title, so the hierarchy survives. */
  color: color-mix(in srgb, var(--sx-color-ink) 78%, var(--sx-color-ink-soft)) !important;
}
/* The eyebrow reads as INK here, not as the brand tint: on a glass panel the
   accent is the least legible thing on the page and the label is structural,
   not decorative. */
.sx-hero-split--editorial.sx-hero-split--frosted .sx-eyebrow {
  color: var(--sx-color-ink) !important;
}
.sx-hero-split--editorial.sx-hero-split--frosted .sx-eyebrow::before {
  background: var(--sx-color-ink) !important;
}
/* Ghost CTA: editorial's white-on-transparent is invisible against glass. */
.sx-hero-split--editorial.sx-hero-split--frosted .sx-btn--ghost {
  color: var(--sx-color-ink) !important;
  border-color: color-mix(in srgb, var(--sx-color-ink) 38%, transparent) !important;
}
.sx-hero-split--editorial.sx-hero-split--frosted .sx-btn--ghost:hover {
  background: color-mix(in srgb, var(--sx-color-ink) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--sx-color-ink) 60%, transparent) !important;
}
/* Same collision for the two dark-veil styles: restore their scrim so the
   white text they force has something to sit on. */
.sx-hero-split--editorial.sx-hero-split--scrim .sx-hero-split__panel,
.sx-hero-split--editorial.sx-hero-split--veil .sx-hero-split__panel {
  background: rgba(16, 16, 22, 0.52) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

.sx-hero-split--editorial .sx-hero-split__title {
  font-family: var(--sx-font-display) !important;
  font-size: clamp(32px, 5vw, 64px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  line-height: 1.05 !important;
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  max-width: 16ch;
  margin-inline: auto;
}
.sx-hero-split--editorial .sx-hero-split__sub {
  max-width: 460px;
  font-size: 15px !important;
  color: rgba(255,255,255,0.85) !important;
  margin-inline: auto;
  margin-bottom: 32px !important;
}
.sx-hero-split--editorial .sx-hero-split__ctas {
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sx-hero-split--editorial .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
}
.sx-hero-split--editorial .sx-btn--ghost:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.85) !important;
}
.sx-hero-split--editorial .sx-hero-split__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
}

/* ── hero_split variant: "dual-panel" ─────────────────────────── */
/* 50% image (kept full-bleed left) + 50% solid color panel right.
   Panel is opaque (not glass) — two-world composition. */
.sx-hero-split--dual-panel .sx-hero-split__bg {
  width: 50%;
  left: 0;
  right: auto;
}
.sx-hero-split--dual-panel .sx-hero-split__overlay { display: none; }
.sx-hero-split--dual-panel {
  background: var(--sx-color-surface, #fff);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-hero-split--dual-panel .sx-hero-split__container {
  align-items: center;
  justify-content: flex-end;
  max-width: none !important;
  padding-right: 0;
}
.sx-hero-split--dual-panel .sx-hero-split__panel {
  background: transparent !important;
  border: none !important;
  width: 50%;
  max-width: 560px;
  padding: clamp(32px, 4vw, 64px) clamp(32px, 4vw, 72px);
  text-align: center;
}
.sx-hero-split--dual-panel .sx-hero-split__title {
  color: var(--sx-color-ink) !important;
  font-size: clamp(30px, 4vw, 50px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.1 !important;
}
.sx-hero-split--dual-panel .sx-hero-split__sub {
  color: var(--sx-color-ink-soft) !important;
  font-size: 16px !important;
  max-width: 44ch;
  margin: 18px auto 32px !important;
}
.sx-hero-split--dual-panel .sx-hero-split__ctas { justify-content: center; }
.sx-hero-split--dual-panel .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)) !important; }
@media (max-width: 820px) {
  .sx-hero-split--dual-panel .sx-hero-split__bg { width: 100%; opacity: 0.35; }
  .sx-hero-split--dual-panel .sx-hero-split__panel { width: 100%; margin: 0; }
}

/* ── hero_split variant: "framed-card" ────────────────────────── */
.sx-hero-split--framed-card .sx-hero-split__panel {
  background: var(--sx-color-surface, #fff) !important;
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08)) !important;
  border-radius: 22px;
  padding: 44px 40px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.20), 0 8px 18px rgba(0,0,0,0.08);
  max-width: 540px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-hero-split--framed-card .sx-hero-split__title { color: var(--sx-color-ink) !important; }
.sx-hero-split--framed-card .sx-hero-split__sub { color: var(--sx-color-ink-soft) !important; }
.sx-hero-split--framed-card .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)) !important; }
.sx-hero-split--framed-card .sx-hero-split__overlay {
  background: linear-gradient(120deg, rgba(0,0,0,0.20), rgba(0,0,0,0.05));
}

/* ── hero_split variant: "floating-bottom" ────────────────────── */
.sx-hero-split--floating-bottom {
  padding-bottom: 0;
  position: relative;
  margin-bottom: 180px;
  overflow: visible !important;
}
.sx-hero-split--floating-bottom .sx-hero-split__container {
  align-items: flex-end;
  padding-bottom: 0;
  position: relative;
  overflow: visible;
}
.sx-hero-split--floating-bottom .sx-hero-split__panel {
  background: var(--sx-color-surface, #fff) !important;
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.06)) !important;
  border-radius: 18px;
  padding: 40px 36px;
  max-width: 760px;
  margin: 0 auto -160px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.18);
  text-align: center;
  position: relative;
  z-index: 5;
  transform: none;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-hero-split--floating-bottom .sx-hero-split__title {
  color: var(--sx-color-ink) !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
}
.sx-hero-split--floating-bottom .sx-hero-split__sub { color: var(--sx-color-ink-soft) !important; }
.sx-hero-split--floating-bottom .sx-hero-split__ctas { justify-content: center; }

/* ── hero_split variant: "premium-luxury" ─────────────────────── */
.sx-hero-split--premium-luxury .sx-hero-split__panel {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none !important;
  padding: 64px 56px;
  max-width: 560px;
}
.sx-hero-split--premium-luxury .sx-hero-split__title {
  font-family: var(--sx-font-display) !important;
  font-size: clamp(32px, 4.5vw, 56px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  color: var(--sx-color-ink) !important;
}
.sx-hero-split--premium-luxury .sx-eyebrow {
  font-family: var(--sx-font-display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sx-color-primary-ink, var(--sx-color-primary)) !important;
}
.sx-hero-split--premium-luxury .sx-hero-split__sub {
  font-style: italic;
  color: var(--sx-color-ink-soft) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
.sx-hero-split--premium-luxury .sx-btn--primary {
  background: transparent !important;
  color: var(--sx-color-ink) !important;
  border: 1px solid var(--sx-color-ink) !important;
  border-radius: 0 !important;
  padding: 14px 36px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}
/* Light-panel layouts (premium-luxury, ultra-clean-white) ALWAYS
   force panel text to ink color — wins over overlay_style="cinematic"
   which hardcodes white text. White-on-white = invisible. */
.sx-hero-split.sx-hero-split--premium-luxury .sx-hero-split__panel,
.sx-hero-split.sx-hero-split--premium-luxury .sx-hero-split__panel h1,
.sx-hero-split.sx-hero-split--premium-luxury .sx-hero-split__panel p,
.sx-hero-split.sx-hero-split--premium-luxury .sx-hero-split__title,
.sx-hero-split.sx-hero-split--premium-luxury .sx-hero-split__sub,
.sx-hero-split.sx-hero-split--ultra-clean-white .sx-hero-split__panel,
.sx-hero-split.sx-hero-split--ultra-clean-white .sx-hero-split__panel h1,
.sx-hero-split.sx-hero-split--ultra-clean-white .sx-hero-split__panel p,
.sx-hero-split.sx-hero-split--ultra-clean-white .sx-hero-split__title,
.sx-hero-split.sx-hero-split--ultra-clean-white .sx-hero-split__sub {
  color: var(--sx-color-ink) !important;
}

/* ── hero_split variant: "modern-saas" ────────────────────────── */
.sx-hero-split--modern-saas .sx-hero-split__panel {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.12) !important;
  padding: 48px 40px;
  border-radius: 16px;
  max-width: 560px;
}
.sx-hero-split--modern-saas .sx-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff !important;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.sx-hero-split--modern-saas .sx-eyebrow::before { display: none; }
.sx-hero-split--modern-saas .sx-hero-split__title {
  font-size: clamp(40px, 5.5vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #fff !important;
}
.sx-hero-split--modern-saas .sx-hero-split__sub {
  color: rgba(255,255,255,0.8) !important;
  font-size: 17px !important;
}
.sx-hero-split--modern-saas .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
}
.sx-hero-split--modern-saas .sx-btn--ghost:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.85) !important;
}

/* ── hero_split variant: "ultra-clean-white" ──────────────────── */
.sx-hero-split--ultra-clean-white {
  background: #fff;
}
.sx-hero-split--ultra-clean-white .sx-hero-split__bg { opacity: 0.92; }
.sx-hero-split--ultra-clean-white .sx-hero-split__overlay {
  background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0) 100%);
}
.sx-hero-split--ultra-clean-white .sx-hero-split__panel {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: clamp(24px, 4vw, 48px);
  max-width: 580px;
  box-shadow: none !important;
}
.sx-hero-split--ultra-clean-white .sx-hero-split__title {
  color: #0a0a0a !important;
  font-size: clamp(36px, 5vw, 60px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.08 !important;
}
.sx-hero-split--ultra-clean-white .sx-hero-split__sub {
  color: rgba(0,0,0,0.6) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-top: 18px !important;
  margin-bottom: 32px !important;
}
.sx-hero-split--ultra-clean-white .sx-eyebrow { color: #0a0a0a !important; }
.sx-hero-split--ultra-clean-white .sx-hero-split__ctas { justify-content: flex-start; }
.sx-hero-split--ultra-clean-white .sx-btn--ghost {
  color: #0a0a0a !important;
  border-color: rgba(0,0,0,0.35) !important;
  background: transparent !important;
}
.sx-hero-split--ultra-clean-white .sx-btn--ghost:hover {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.65) !important;
}

/* ── hero_split variant: "diagonal-split" ─────────────────────── */
.sx-hero-split--diagonal-split { position: relative; overflow: hidden; }
.sx-hero-split--diagonal-split::before {
  content: "";
  position: absolute;
  inset: 0;
  /* ~70% transparent wedge — the hero image reads through it; the blur keeps
     the overlaid copy legible over a busy photo. */
  background: color-mix(in srgb, var(--sx-color-surface, #fff) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 62% 0, 52% 100%, 0 100%);
  z-index: 2;
  pointer-events: none;
}
.sx-hero-split--diagonal-split .sx-hero-split__overlay {
  background: linear-gradient(120deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.0) 60%);
}
.sx-hero-split--diagonal-split .sx-hero-split__container { z-index: 3; }
.sx-hero-split--diagonal-split .sx-hero-split__panel {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: clamp(24px, 4vw, 48px);
  max-width: 460px;
}
.sx-hero-split--diagonal-split .sx-hero-split__title {
  color: var(--sx-color-ink) !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.1 !important;
  max-width: 100%;
  overflow-wrap: break-word;
}
.sx-hero-split--diagonal-split .sx-hero-split__sub {
  color: var(--sx-color-ink-soft) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-top: 18px !important;
  margin-bottom: 28px !important;
  max-width: 36ch;
}
/* The diagonal wedge is a LIGHT frosted panel (surface 30%), and the title/sub
   already use --sx-color-ink(-soft). The eyebrow was hard-coded #fff, which is
   invisible on that light wedge (light themes) — make it follow ink so it adapts
   per theme (dark on light themes, light on dark themes like volt-detail). */
.sx-hero-split--diagonal-split .sx-eyebrow { color: var(--sx-color-ink) !important; }
.sx-hero-split--diagonal-split .sx-hero-split__ctas { justify-content: flex-start; }
.sx-hero-split--diagonal-split .sx-btn--primary { color: #fff !important; }
@media (max-width: 820px) {
  .sx-hero-split--diagonal-split::before { clip-path: polygon(0 0, 100% 0, 100% 55%, 0 65%); }
}

/* ─ HERO PORTRAIT — backdrop + copy + cut-out subject ─────────── */
/*
 * Three LAYERS instead of hero_split's one photo:
 *   z0  .sx-hero-portrait__bg      the backdrop <img> (optional)
 *   z1  .sx-hero-portrait__overlay the legibility scrim
 *   z2  .sx-hero-portrait__container  copy column + figure column
 *
 * The figure is a transparent cut-out that STANDS on the hero's bottom
 * edge — object-fit: contain (never cover) so the subject is never
 * cropped, and its own grid column so the copy never runs under it.
 *
 * Mobile-first: below 1024 (the standard breakpoint) the two columns
 * stack — copy first, figure under it at a capped height. The fixed
 * viewport-ish heights only kick in at >=1024, where there's room for
 * a real side-by-side composition.
 */
.sx-hero-portrait {
  position: relative;
  overflow: hidden;
  background: var(--sx-color-bg);
  padding: 48px 0 0;
}
/* No backdrop uploaded → a soft theme gradient instead of a flat slab,
   so the hero reads finished out of the box (the cut-out subject reads
   as if lit from the copy side). */
.sx-hero-portrait--no-bg {
  background:
    linear-gradient(155deg,
      var(--sx-color-bg) 0%,
      var(--sx-color-bg-alt) 100%);
}
.sx-hero-portrait__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `bg_position` del panel (06-sep-2026): antes estaba clavado al centro. */
  object-position: var(--sx-fondo-pos, center);
  z-index: 0;
}
.sx-hero-portrait__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: transparent;
}
/* Scrims are biased toward the COPY side so the backdrop stays visible
   behind the figure. `--fig-left` mirrors each of them. */
.sx-hero-portrait--ov-light .sx-hero-portrait__overlay {
  background:
    /* A soft white pool centred on the FIGURE side. A cut-out lifted off a
       white studio ground always keeps a hair of white fringe on its edge;
       against a busy photographic backdrop that fringe reads as a bad cut.
       Pooling white behind the subject makes the fringe blend into the
       ground it came from, and it echoes the white-gradient studio look the
       photo was shot on. */
    radial-gradient(58% 78% at 78% 62%,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.62) 45%,
      rgba(255,255,255,0) 100%),
    linear-gradient(to right,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.80) 42%,
      rgba(255,255,255,0.30) 100%);
}
/* Mirror the pool when the cut-out stands on the left. */
.sx-hero-portrait--ov-light.sx-hero-portrait--fig-left .sx-hero-portrait__overlay {
  background:
    radial-gradient(58% 78% at 22% 62%,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.62) 45%,
      rgba(255,255,255,0) 100%),
    linear-gradient(to left,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.80) 42%,
      rgba(255,255,255,0.30) 100%);
}
.sx-hero-portrait--ov-dark .sx-hero-portrait__overlay {
  background: linear-gradient(to right,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.48) 45%,
    rgba(0,0,0,0.18) 100%);
}
.sx-hero-portrait--ov-dark.sx-hero-portrait--fig-left .sx-hero-portrait__overlay {
  background: linear-gradient(to left,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.48) 45%,
    rgba(0,0,0,0.18) 100%);
}
/* Brand-tinted wash — the backdrop keeps its photo detail but picks up
   the theme's primary, so a stock photo still looks on-brand. */
.sx-hero-portrait--ov-gradient .sx-hero-portrait__overlay {
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--sx-color-primary-fill, var(--sx-color-primary)) 78%, transparent) 0%,
    color-mix(in srgb, var(--sx-color-primary-fill, var(--sx-color-primary)) 34%, transparent) 52%,
    rgba(0,0,0,0.10) 100%);
}
/* color-mix fallback for older engines: a plain dark wash still keeps
   white copy legible, which is what this variant pairs with. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .sx-hero-portrait--ov-gradient .sx-hero-portrait__overlay {
    background: linear-gradient(115deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.10) 100%);
  }
}
.sx-hero-portrait__container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}
.sx-hero-portrait__copy {
  width: 100%;
  max-width: 620px;
  padding-bottom: 8px;
}
.sx-hero-portrait--no-figure .sx-hero-portrait__copy { max-width: 720px; }
.sx-hero-portrait__title {
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
  color: var(--sx-color-ink);
}
.sx-hero-portrait__title em {
  font-style: italic;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  font-weight: 700;
}
.sx-hero-portrait__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--sx-color-ink-soft);
  margin-bottom: 28px;
  max-width: 460px;
}
.sx-hero-portrait__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* Light copy — over a dark scrim or a brand wash. Both tones are
   declared explicitly so the section is legible in light AND dark
   themes without depending on which one is active. */
.sx-hero-portrait--tone-light .sx-hero-portrait__title,
.sx-hero-portrait--tone-light .sx-hero-portrait__sub,
.sx-hero-portrait--tone-light .sx-eyebrow {
  color: #fff !important;
}
.sx-hero-portrait--tone-light .sx-eyebrow::before { background: #fff; }
.sx-hero-portrait--tone-light .sx-hero-portrait__title,
.sx-hero-portrait--tone-light .sx-hero-portrait__sub {
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.sx-hero-portrait--tone-dark .sx-hero-portrait__title { color: var(--sx-color-ink); }
.sx-hero-portrait--tone-dark .sx-hero-portrait__sub { color: var(--sx-color-ink-soft); }

/* ── The cut-out ──────────────────────────────────────────────── */
.sx-hero-portrait__figure {
  position: relative;
  align-self: end;
  justify-self: center;
  width: 100%;
  /* Mobile cap — the figure must never push the CTAs off the fold. */
  height: 300px;
}
.sx-hero-portrait__figure-img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, NEVER cover: a cut-out that gets cropped stops reading as
     a cut-out. */
  object-fit: contain;
  object-position: bottom center;
}
.sx-hero-portrait--fig-center .sx-hero-portrait__figure-img {
  object-position: center;
}

/* figure_side="center" — la persona en medio, el texto encima (07-sep-2026).
   OJO CON EL NOMBRE: `--fig-center` YA existe y significa otra cosa (la
   alineación VERTICAL de la figura). Meter aquí el centrado horizontal
   habría hecho que elegir «centro» en un desplegable cambiara en silencio
   el otro. Por eso `--fig-mid`.
   En móvil no hay nada que hacer: la maqueta ya apila copia y figura; sólo
   se centra el texto para que acompañe. */
.sx-hero-portrait--fig-mid .sx-hero-portrait__copy {
  text-align: center;
  align-items: center;
}
.sx-hero-portrait--fig-mid .sx-hero-portrait__ctas { justify-content: center; }

@media (min-width: 1024px) {
  .sx-hero-portrait {
    padding: 0;
    min-height: 620px;
    height: clamp(620px, 86vh, 900px);
  }
  .sx-hero-portrait--tall {
    min-height: 700px;
    height: clamp(700px, 92vh, 980px);
  }
  /* height_style="compact" — hero más corto. Un retrato de BUSTO está
     limitado por el ancho de la columna (object-fit: contain), así que no
     crece al subir la altura del hero: lo único que añade `tall` es aire
     muerto sobre su cabeza. Mismo nombre que el `compact` que hero_split
     ya tenía, para no inventar un segundo vocabulario. */
  .sx-hero-portrait--compact {
    min-height: 540px;
    height: clamp(540px, 68vh, 680px);
  }
  .sx-hero-portrait--full {
    min-height: 620px;
    height: clamp(620px, 100vh, 1080px);
  }
  .sx-hero-portrait__container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 40px;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 0;
  }
  .sx-hero-portrait--no-figure .sx-hero-portrait__container {
    grid-template-columns: minmax(0, 1fr);
  }
  .sx-hero-portrait__copy { padding-bottom: 32px; }
  /* figure_side="left" — flip the columns without touching DOM order,
     so the copy still comes first for screen readers. */
  .sx-hero-portrait--fig-left .sx-hero-portrait__copy   { order: 2; justify-self: end; }
  .sx-hero-portrait--fig-left .sx-hero-portrait__figure { order: 1; }
  /* The figure spans the FULL hero height and the image sits on the
     bottom edge, so a full-body cut-out stands on the fold line. */
  .sx-hero-portrait__figure {
    align-self: stretch;
    height: 100%;
    justify-self: stretch;
  }
  .sx-hero-portrait__figure-img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  /* figure_size — how much of the hero height the cut-out claims. */
  .sx-hero-portrait--fig-sm .sx-hero-portrait__figure-img { height: 68%; }
  .sx-hero-portrait--fig-md .sx-hero-portrait__figure-img { height: 84%; }
  .sx-hero-portrait--fig-lg .sx-hero-portrait__figure-img { height: 100%; }
  /* figure_align="center" — the cut-out floats vertically centered
     instead of standing on the bottom edge (busts, products). */
  .sx-hero-portrait--fig-center .sx-hero-portrait__figure-img {
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
  /* figure_side="center" — UNA columna: la copia arriba, centrada, y la
     persona debajo apoyada en el borde inferior. No es la de dos columnas
     con la figura en medio: ahí el texto le caería sobre la cara. */
  .sx-hero-portrait--fig-mid .sx-hero-portrait__container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
  .sx-hero-portrait--fig-mid .sx-hero-portrait__copy {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 16px;
  }
  .sx-hero-portrait--fig-mid .sx-hero-portrait__figure {
    justify-self: center;
    width: 100%;
    max-width: 620px;
  }
  .sx-hero-portrait--fig-mid .sx-hero-portrait__figure-img {
    object-position: bottom center;
  }
}

/* ─ ACHIEVEMENT BAR ───────────────────────────────────────────── */
.sx-achievement {
  padding: 48px 0;
  background: var(--sx-color-bg-alt);
  border-top: 1px solid var(--sx-color-border);
  border-bottom: 1px solid var(--sx-color-border);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-achievement__grid {
  /* Flex (not grid) so ANY count of stats — 1, 2, 3 or 4 — stays
     centered as a group instead of left-pinning into empty grid
     columns. Wraps on narrow screens, still centered. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 32px clamp(40px, 6vw, 88px);
  text-align: center;
}
.sx-achievement__grid > * { flex: 0 1 180px; }
.sx-achievement__val {
  font-family: var(--sx-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--sx-color-accent-ink, var(--sx-color-accent));
  line-height: 1;
  margin-bottom: 8px;
  white-space: nowrap;
}
.sx-achievement__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
}

/* ── achievement_bar variant: "cards" ─────────────────────────── */
.sx-achievement--cards .sx-achievement__grid {
  gap: 20px;
  flex-wrap: nowrap;
}
.sx-achievement--cards .sx-achievement__item {
  flex: 1 1 0;
  min-width: 0;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: var(--sx-radius-lg, 12px);
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-achievement--cards .sx-achievement__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.10);
}

/* ── achievement_bar variant: "divided" ───────────────────────── */
.sx-achievement--divided .sx-achievement__grid {
  gap: 0;
}
.sx-achievement--divided .sx-achievement__item {
  flex: 1 1 0;
  min-width: 160px;
  padding: 8px 32px;
  border-right: 1px solid var(--sx-color-border, rgba(0,0,0,0.10));
}
.sx-achievement--divided .sx-achievement__item:last-child {
  border-right: none;
}
@media (max-width: 720px) {
  .sx-achievement--divided .sx-achievement__item {
    border-right: none;
    border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.10));
    padding: 18px 0;
  }
  .sx-achievement--divided .sx-achievement__item:last-child { border-bottom: none; }

  /* LAS TARJETAS SE PARTEN EN DOS FILAS EN EL MÓVIL.
     La variante "cards" trae `flex-wrap: nowrap`, así que cuatro tarjetas se
     quedaban en UNA sola fila a cualquier ancho: en un teléfono cada una medía
     un cuarto de pantalla y el texto caía a una palabra por línea —"HOSES, /
     BUCKETS / OR / RUNOFF"— mientras el número, que lleva `white-space:nowrap`,
     se salía de su tarjeta y aparecía cortado. Dos por fila entran holgadas y
     el texto vuelve a leerse como una frase. */
  .sx-achievement--cards .sx-achievement__grid {
    flex-wrap: wrap;
    gap: 14px;
  }
  .sx-achievement--cards .sx-achievement__item {
    flex: 1 1 calc(50% - 14px);
    min-width: 0;
    padding: 20px 16px;
  }
  /* Y con muy poco ancho, una por fila: a 50% de una pantalla de 320px la
     palabra más larga vuelve a no caber. */
  @media (max-width: 400px) {
    .sx-achievement--cards .sx-achievement__item { flex: 1 1 100%; }
  }
  /* El número deja de desbordar: si no cabe, encoge en vez de salirse. */
  .sx-achievement--cards .sx-achievement__val { font-size: clamp(26px, 9vw, 40px); }
  .sx-achievement--cards .sx-achievement__label { letter-spacing: 0.08em; }
}

/* ── achievement_bar variant: "icon-stat" ─────────────────────── */
.sx-achievement--icon-stat .sx-achievement__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sx-color-primary) 12%, transparent);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-achievement--icon-stat .sx-achievement__icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}

/* ── achievement_bar variant: "inline-row" ────────────────────── */
.sx-achievement--inline-row .sx-achievement__grid {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
}
.sx-achievement--inline-row .sx-achievement__item {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.10));
  text-align: left;
}
.sx-achievement--inline-row .sx-achievement__item:last-child { border-bottom: none; }
.sx-achievement--inline-row .sx-achievement__val { margin-bottom: 0; }
.sx-achievement--inline-row .sx-achievement__label { text-align: right; }

/* ── achievement_bar variant: "gradient-glass" ────────────────── */
.sx-achievement--gradient-glass {
  background: linear-gradient(135deg, var(--sx-color-primary) 0%, color-mix(in srgb, var(--sx-color-primary) 70%, #000) 100%);
  border-bottom: none;
  padding: 64px 0;
}
.sx-achievement--gradient-glass .sx-achievement__grid {
  gap: 20px;
  flex-wrap: nowrap;
  align-items: stretch;
}
.sx-achievement--gradient-glass .sx-achievement__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--sx-radius-lg, 12px);
  padding: 28px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.16);
}
.sx-achievement--gradient-glass .sx-achievement__val { color: #fff; }
.sx-achievement--gradient-glass .sx-achievement__label { color: rgba(255,255,255,0.85); }

/* ─ SERVICES VISUAL ───────────────────────────────────────────── */
.sx-services-visual { padding: var(--sx-section-y) 0; background: var(--sx-color-bg); }
.sx-services-visual__grid {
  display: grid;
  /* Mobile-first: ONE card per row. Each service tile carries a full-bleed
     photo + heading + description + price + CTA, so a 2-up grid on a
     360-400px viewport squeezes each card too tight to be readable. The
     `min-width: 720px` block below restores 2/3/4 columns for desktop. */
  grid-template-columns: 1fr;
  gap: 20px;
  /* Center the tracks so that when there are too few items to fill the
     row (e.g. a single product) the grid sits centered on screen instead
     of stretching one card full-width or pinning it to the left. Has no
     visible effect on full 1fr rows (no free space to distribute). */
  justify-content: center;
}
/* Mobile: cap card width so a lone card on a wide phone doesn't span
   the entire viewport. Only kicks in below desktop, where the cols-N
   modifiers haven't taken over yet. */
@media (max-width: 719px) {
  .sx-services-visual__grid { max-width: 480px; margin-left: auto; margin-right: auto; }
}
/* Few items: bound the column width so the grid can actually center.
   1 item → one ~360px card centered; 2 items → two centered cards. */
.sx-services-visual__grid--cols-1 { grid-template-columns: minmax(280px, 400px); }
@media (min-width: 720px) {
  .sx-services-visual__grid--cols-2 { grid-template-columns: repeat(2, minmax(260px, 340px)); }
  .sx-services-visual__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sx-services-visual__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.sx-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sx-color-surface);
  border-radius: var(--sx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sx-color-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-product-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sx-color-accent-fill, var(--sx-color-accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.sx-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--sx-color-accent) 22%, transparent), var(--sx-shadow-card);
  border-color: color-mix(in srgb, var(--sx-color-accent) 60%, var(--sx-color-border));
}
.sx-product-card:hover::after { transform: scaleX(1); }
.sx-product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}
.sx-product-card__img {
  aspect-ratio: 1 / 1;
  background: var(--sx-color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-product-card__img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  transition: transform 0.4s ease, opacity 0.45s ease;
}
.sx-product-card:hover .sx-product-card__img img { transform: scale(1.05); }
/* Shop image load state — fail-safe fade-in. Images are visible BY DEFAULT;
   runtime.js adds .sx-img-pending only WHILE an image is still loading and
   removes it on load, so if the JS never runs the images are never hidden. A
   shimmer fills the already-reserved square (aspect-ratio 1/1) until the photo
   fades in — fixes the "shop images pop in blank then jump" feel. */
.sx-product-card__img.sx-img-pending { position: relative; overflow: hidden; }
.sx-product-card__img.sx-img-pending img { opacity: 0; }
.sx-product-card__img.sx-img-pending::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, transparent 20%, rgba(0, 0, 0, 0.05) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: sx-img-shimmer 1.3s ease-in-out infinite;
}
@keyframes sx-img-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sx-product-card__img.sx-img-pending::after { animation: none; } }
.sx-product-card__body { padding: 20px; text-align: center; }
.sx-product-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sx-color-ink-soft);
  margin: 0 0 14px;
  text-align: center;
}
.sx-product-card__cta { margin-top: 12px; }

/* services_visual carries real photos (people doing work) — fill the
   whole square edge-to-edge with object-fit:cover, no padding. Shop
   product cards keep the contained/padded look for transparent PNGs. */
.sx-services-visual .sx-product-card__img {
  padding: 0;
  aspect-ratio: 4 / 3;
  background: var(--sx-color-bg-alt);
  overflow: hidden;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual .sx-product-card__img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
.sx-services-visual .sx-product-card__body { text-align: left; padding: 24px; }
.sx-services-visual .sx-product-card__title { letter-spacing: 0.02em; font-size: 17px; text-transform: none; }
.sx-services-visual .sx-product-card__desc { text-align: left; }

/* ── Services variant: "icon-only" ───────────────────────────────
   Minimalist cards with a large primary-tinted icon, title and
   description. No image, no price. Great for "what we do" sections
   where photos add noise. */
.sx-services-visual--icon-only .sx-services-visual__grid { gap: 36px 24px; }
.sx-services-visual--icon-only .sx-svc {
  text-align: center;
  padding: 32px 20px;
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-lg, 10px);
  border: 1px solid var(--sx-color-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--icon-only .sx-svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-services-visual--icon-only .sx-svc__icon {
  width: 76px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sx-color-primary) 10%, transparent);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.sx-services-visual--icon-only .sx-svc__icon svg { width: 38px; height: 38px; stroke-width: 1.5; }
.sx-services-visual--icon-only .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--sx-color-ink);
  margin: 0 0 10px;
}
.sx-services-visual--icon-only .sx-svc__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sx-color-ink-soft);
  margin: 0 0 14px;
}

/* ── Services variant: "numbered" ────────────────────────────────
   Editorial big numerals (01-NN) per card. Like process_timeline
   outline but in a grid. */
.sx-services-visual--numbered .sx-services-visual__grid { gap: 40px 32px; }
.sx-services-visual--numbered .sx-svc { padding: 8px; }
.sx-services-visual--numbered .sx-svc__num {
  font-family: var(--sx-font-display);
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--sx-color-primary);
  letter-spacing: -0.04em;
  margin: 0 0 16px;
  opacity: 0.85;
}
.sx-services-visual--numbered .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--sx-color-ink);
  margin: 0 0 10px;
}
.sx-services-visual--numbered .sx-svc__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sx-color-ink-soft);
  margin: 0;
}
.sx-services-visual--numbered .sx-svc__cta { margin-top: 40px; }
.sx-svc__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.sx-svc__tag { font-size:12px; font-weight:600; color:var(--sx-color-ink-soft); background:var(--sx-color-bg-alt); border:1px solid var(--sx-color-border); border-radius:999px; padding:5px 12px;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}

/* ── Services variant: "horizontal" ──────────────────────────────
   Image LEFT + content RIGHT per row, alternating sides on even rows.
   Each row stacks on mobile. */
.sx-services-visual--horizontal .sx-services-visual__grid--horizontal {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.sx-services-visual--horizontal .sx-svc--horizontal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 760px) {
  .sx-services-visual--horizontal .sx-svc--horizontal {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .sx-services-visual--horizontal .sx-svc--horizontal:nth-child(2n) .sx-svc__img { order: 2; }
}
.sx-services-visual--horizontal .sx-svc__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--sx-radius-lg, 10px);
  background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--horizontal .sx-svc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-services-visual--horizontal .sx-svc--horizontal:hover .sx-svc__img img { transform: scale(1.04); }
.sx-services-visual--horizontal .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--sx-color-ink);
  margin: 0 0 12px;
}
.sx-services-visual--horizontal .sx-svc__desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sx-color-ink-soft);
  margin: 0 0 16px;
}
.sx-services-visual--horizontal .sx-svc__price {
  font-family: var(--sx-font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  margin: 0 0 16px;
}

/* ── Services variant: "flip" ────────────────────────────────────
   3D flip on hover. Front shows image + title, back shows description
   + CTA. Each card is a fixed aspect-ratio square so the flip looks
   balanced on both faces. */
.sx-services-visual--flip .sx-svc--flip {
  perspective: 1200px;
  aspect-ratio: 1 / 1;
  background: transparent;
}
.sx-services-visual--flip .sx-svc__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-services-visual--flip .sx-svc--flip:hover .sx-svc__flip-inner,
.sx-services-visual--flip .sx-svc--flip:focus-within .sx-svc__flip-inner { transform: rotateY(180deg); }
.sx-services-visual--flip .sx-svc__face {
  position: absolute;
  inset: 0;
  border-radius: var(--sx-radius-lg, 10px);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sx-services-visual--flip .sx-svc__face--front {
  background: var(--sx-color-bg-alt);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--flip .sx-svc__face--front .sx-svc__img {
  position: absolute;
  inset: 0;
}
.sx-services-visual--flip .sx-svc__face--front .sx-svc__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sx-services-visual--flip .sx-svc__face--front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
}
.sx-services-visual--flip .sx-svc__face--front .sx-svc__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--sx-font-display);
  font-size: 20px;
  font-weight: 800;
  padding: 24px;
  margin: 0;
}
.sx-services-visual--flip .sx-svc__face--back {
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
  transform: rotateY(180deg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.sx-services-visual--flip .sx-svc__title--back {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: inherit;
}
.sx-services-visual--flip .sx-svc__face--back .sx-svc__desc {
  font-size: 14px;
  line-height: 1.55;
  color: inherit;
  opacity: 0.92;
  margin: 0 0 18px;
}
.sx-services-visual--flip .sx-svc__face--back .sx-btn {
  background: #fff !important;
  color: var(--sx-color-primary-ink, var(--sx-color-primary)) !important;
  border-color: #fff !important;
}

/* ── Services variant: "icon-overlay" ────────────────────────────
   Image at top, a floating circular icon overlapping the bottom-left
   of the image, then a clean text body. No CTA in this variant —
   the card is the message. */
.sx-services-visual--image-card .sx-svc--image-card {
  position: relative;
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-md, 6px);
  /* overflow:visible so the floating icon (positioned with
     bottom-offset) can sit over the image-to-body seam without
     being clipped. The inner __img wrapper still clips the image
     itself via its own overflow:hidden. */
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--image-card .sx-svc--image-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.10);
}
.sx-services-visual--image-card .sx-svc__img {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--sx-color-bg-alt);
  border-radius: var(--sx-radius-md, 6px) var(--sx-radius-md, 6px) 0 0;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--image-card .sx-svc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sx-services-visual--image-card .sx-svc__overlay-icon {
  display: flex;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  /* Icon sits cleanly INSIDE the body (no overlap with image) so
     it never gets clipped by any parent. */
  margin: 24px 0 14px;
}
.sx-services-visual--image-card .sx-svc__overlay-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
}
.sx-services-visual--image-card .sx-svc__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sx-services-visual--image-card .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--sx-color-ink);
  margin: 0 0 14px;
}
.sx-services-visual--image-card .sx-svc__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sx-color-ink-soft);
  margin: 0;
}
.sx-services-visual--image-card .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--sx-color-ink);
  margin: 0 0 14px;
}
.sx-services-visual--image-card .sx-svc__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sx-color-ink-soft);
  margin: 0;
}

/* ── Services variant: "panoramic" ───────────────────────────────
   Editorial / luxury layout: wide panoramic image (~3:1) with ONLY a
   title below it. No description, no CTA. Defaults to 2 columns so
   the panoramic aspect actually reads as wide. */
.sx-services-visual--panoramic .sx-services-visual__grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 56px 32px !important;
}
@media (max-width: 720px) {
  .sx-services-visual--panoramic .sx-services-visual__grid {
    grid-template-columns: 1fr !important;
    gap: 36px 0 !important;
  }
}
.sx-services-visual--panoramic .sx-svc--panoramic {
  display: block;
  background: transparent;
}
.sx-services-visual--panoramic .sx-svc__img {
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: var(--sx-radius-md, 6px);
  background: var(--sx-color-bg-alt);
  margin-bottom: 18px;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--panoramic .sx-svc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-services-visual--panoramic .sx-svc--panoramic:hover .sx-svc__img img {
  transform: scale(1.04);
}
.sx-services-visual--panoramic .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sx-color-ink);
  margin: 0;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  width: 100%;
}
.sx-services-visual--panoramic .sx-svc__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-services-visual--panoramic .sx-svc--panoramic:hover .sx-svc__title::after {
  width: 80px;
  left: calc(50% - 40px);
}
.sx-services-visual--panoramic .sx-svc--panoramic:hover .sx-svc__title {
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}

/* ── Services variant: "portrait" ────────────────────────────────
   Same elegant minimal style as panoramic, but the image is TALL
   (3:4) and the grid runs 3-column on desktop. */
.sx-services-visual--portrait .sx-services-visual__grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px 28px !important;
}
@media (max-width: 900px) {
  .sx-services-visual--portrait .sx-services-visual__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .sx-services-visual--portrait .sx-services-visual__grid {
    grid-template-columns: 1fr !important;
  }
}
.sx-services-visual--portrait .sx-svc--portrait { background: transparent; }
.sx-services-visual--portrait .sx-svc__img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--sx-radius-md, 6px);
  background: var(--sx-color-bg-alt);
  margin-bottom: 18px;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--portrait .sx-svc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-services-visual--portrait .sx-svc--portrait:hover .sx-svc__img img {
  transform: scale(1.04);
}
.sx-services-visual--portrait .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sx-color-ink);
  margin: 0;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  width: 100%;
}
.sx-services-visual--portrait .sx-svc__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-services-visual--portrait .sx-svc--portrait:hover .sx-svc__title::after {
  width: 60px;
  left: calc(50% - 30px);
}
.sx-services-visual--portrait .sx-svc--portrait:hover .sx-svc__title {
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}

/* ── Services variant: "teacher-card" ────────────────────────────
   Clean program-style cards: image top, body with colored title +
   description + optional meta footer line ("Teacher: Name"). No CTAs,
   no overlays — pure content cards. */
.sx-services-visual--teacher-card .sx-svc--teacher-card {
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-md, 6px);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--teacher-card .sx-svc--teacher-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.sx-services-visual--teacher-card .sx-svc__img {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-services-visual--teacher-card .sx-svc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-services-visual--teacher-card .sx-svc--teacher-card:hover .sx-svc__img img {
  transform: scale(1.04);
}
.sx-services-visual--teacher-card .sx-svc__body {
  padding: 24px 24px 28px;
}
.sx-services-visual--teacher-card .sx-svc__title {
  font-family: var(--sx-font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  margin: 0 0 14px;
}
.sx-services-visual--teacher-card .sx-svc__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sx-color-ink-soft);
  margin: 0 0 18px;
}
.sx-services-visual--teacher-card .sx-svc__meta {
  font-size: 14px;
  color: var(--sx-color-ink-soft);
  padding-top: 14px;
  border-top: 1px solid var(--sx-color-border);
}
.sx-services-visual--teacher-card .sx-svc__meta-label { color: var(--sx-color-ink); font-weight: 600; }
.sx-services-visual--teacher-card .sx-svc__meta-value { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 600; }

/* ── Property listings (real estate cards) ────────────────────── */
.sx-properties { padding: var(--sx-section-y) 0; background: var(--sx-color-bg); }
.sx-properties__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-content: center;
}
@media (min-width: 720px) {
  .sx-properties__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sx-properties__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sx-properties__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.sx-property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sx-color-surface);
  border-radius: var(--sx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sx-color-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-property-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sx-shadow-elevated);
  border-color: color-mix(in srgb, var(--sx-color-primary) 40%, var(--sx-color-border));
}
.sx-property-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sx-color-bg-alt);
  overflow: hidden;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-property-card__media img,
.sx-property-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.sx-property-card:hover .sx-property-card__media img { transform: scale(1.05); }
.sx-property-card__status {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary);
  border-radius: var(--sx-radius-sm);
  z-index: 1;
}
.sx-property-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sx-property-card__title {
  font-family: var(--sx-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--sx-color-ink);
  margin: 0 0 12px;
  line-height: 1.2;
}
.sx-property-card__loc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--sx-color-ink-soft);
  margin-bottom: 14px;
}
.sx-property-card__loc-icon {
  display: inline-flex;
  color: var(--sx-color-ink-soft);
}
.sx-property-card__loc-icon svg { width: 16px; height: 16px; }
.sx-property-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
}
.sx-property-card__price-val {
  font-family: var(--sx-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-property-card__price-unit {
  font-size: 14px;
  color: var(--sx-color-ink-soft);
  font-weight: 500;
}
.sx-property-card__desc {
  font-size: 14px;
  color: var(--sx-color-ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
}
/* Feature bar — full-width gray strip at the bottom of the card with
   icons + value + label (3 Beds · 2 Baths · 300 Sq Ft). Designed to
   match common real-estate listing card patterns: a clear visual
   separation from the body, dark icons (not branded color) so the
   feature stats read as factual metadata rather than CTAs. */
.sx-property-card__feats {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 18px -24px -24px;
  padding: 14px 18px;
  background: var(--sx-color-bg-alt);
  border-top: 1px solid var(--sx-color-border);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-property-card__feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sx-color-ink);
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.sx-property-card__feat-icon {
  display: inline-flex;
  color: var(--sx-color-ink);
  opacity: 0.85;
}
.sx-property-card__feat-icon svg { width: 18px; height: 18px; }
.sx-property-card__feat-val { font-weight: 600; }
.sx-property-card__feat-lbl { color: var(--sx-color-ink-soft); font-size: 12px; }
/* CTA pushed to the bottom of the body so it lines up across cards
   regardless of description length. The feature bar comes after the
   CTA in markup (added with negative margins to bleed the gray strip
   to the card edges), so the visual order is: description → CTA → gray
   feature footer. */
.sx-property-card__cta { margin-top: auto; padding-top: 16px; }
.sx-property-card__cta .sx-btn { width: 100%; justify-content: center; }
@media (max-width: 719px) {
  .sx-properties__grid { max-width: 480px; margin-left: auto; margin-right: auto; }
}
.sx-product-card__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
  margin-bottom: 6px;
}
.sx-product-card__title {
  font-family: var(--sx-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sx-color-ink);
  margin: 0 0 10px;
}
.sx-product-card__price {
  font-size: 17px;
  font-weight: 700;
  color: var(--sx-color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
}
.sx-product-card__price--old {
  font-size: 14px;
  font-weight: 500;
  color: var(--sx-color-ink-soft);
  text-decoration: line-through;
}
.sx-product-card__price--sale { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.sx-product-card.is-out { opacity: 0.55; }
.sx-product-card.is-out .sx-product-card__img img { filter: grayscale(0.6); }
.sx-badge--muted { background: var(--sx-color-ink-soft); color: var(--sx-color-bg); }
.sx-badge--sale { background: var(--sx-color-primary-fill, var(--sx-color-primary)); font-weight: 800; }
.sx-badge--gift { background: #7C3AED; font-weight: 700; letter-spacing: .01em; }

/* Add-to-cart icon button — sits top-right of the image, visible on
   hover for desktop and always-visible on mobile (touch can't hover). */
.sx-product-card__cart {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--sx-color-border);
  /* Fixed dark on the fixed-white chip — `ink` inverts on dark themes
     (fashion-men: near-white icon on a white chip = invisible). */
  color: #1d1d21;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  box-shadow: var(--sx-shadow-card);
}
.sx-product-card__cart svg { width: 18px; height: 18px; }
.sx-product-card:hover .sx-product-card__cart {
  opacity: 1;
  transform: translateY(0);
}
.sx-product-card__cart:hover {
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  /* on-primary, not #fff — a light-primary theme (B&W fashion) would
     otherwise show a white icon on a near-white hover fill. */
  color: var(--sx-color-on-primary, #fff);
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
  transform: scale(1.05);
}
.sx-product-card__cart:active { transform: scale(0.95); }
@media (hover: none) {
  /* Touch devices have no hover — show the cart button always so the
     thumbs can hit it. */
  .sx-product-card__cart { opacity: 1; transform: none; }
}

/* Star rating row */
.sx-product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 12px;
}
.sx-product-card__rating .sx-stars { font-size: 13px; }
.sx-product-card__reviews { color: var(--sx-color-ink-soft); font-size: 11px; }

/* Low-stock urgency message */
.sx-product-card__stock {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  letter-spacing: 0.02em;
}

/* Add-to-cart pulse animation when fired — runtime adds .is-added
   class briefly after click. */
@keyframes sx-cart-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: #fff; }
  100% { transform: scale(1); }
}
.sx-product-card__cart.is-added { animation: sx-cart-pop 0.5s ease; }

/* ─ ABOUT ─────────────────────────────────────────────────────── */
.sx-about { padding: var(--sx-section-y) 0; }
.sx-about--surface-soft { background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .sx-about__inner { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.sx-about__img img {
  width: 100%;
  border-radius: var(--sx-radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.sx-about__paragraphs { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.sx-about__paragraphs p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sx-color-ink-soft);
}
.sx-about--image-right .sx-about__img { order: 2; }

/* ── About variant: "signature" ───────────────────────────────
   Script-style "owner signature" block under the paragraphs:
   first + last name in large italic cursive accent color, with
   a thin flourish line above and an uppercase role under. Uses
   Italianno (Google Font, loaded in base.css) with cursive
   fallback so the look degrades gracefully if the font fails. */
.sx-about--signature .sx-about__signature {
  margin-top: 36px;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.sx-about--signature .sx-about__sig-flourish {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--sx-color-accent-fill, var(--sx-color-accent));
  margin-bottom: 8px;
}
.sx-about--signature .sx-about__sig-name {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  font-family: 'Italianno', 'Dancing Script', 'Brush Script MT', cursive;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1;
  color: var(--sx-color-accent-ink, var(--sx-color-accent));
  letter-spacing: 0.005em;
}
.sx-about--signature .sx-about__sig-first,
.sx-about--signature .sx-about__sig-last { display: inline-block; }
.sx-about--signature .sx-about__sig-role {
  font-family: var(--sx-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
  margin-top: 4px;
}

/* ── About variant: "features" ────────────────────────────────
   Adds an inline icon-list + a highlighted contact CTA below the
   paragraphs. Opt-in via props.layout="features". The image still
   shows on the right (or whatever image_side says) — this just
   enriches the text column. */
.sx-about--features .sx-about__features {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sx-about--features .sx-about__feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
/* Title-only rows (no description): center the icon with the single-line
   title so the row reads aligned instead of the title floating above a
   taller icon box. Rows WITH text keep top-alignment. */
.sx-about--features .sx-about__feature--titleonly { align-items: center; }
.sx-about--features .sx-about__feature--titleonly .sx-about__feature-title { margin-bottom: 0; }
.sx-about--bleed .sx-about__feature--titleonly { align-items: center; }
.sx-about--bleed .sx-about__feature--titleonly .sx-about__feature-title { margin-bottom: 0; }
.sx-about--features .sx-about__feature-icon {
  flex: 0 0 auto;
  width: 56px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-about--features .sx-about__feature-icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.5;
}
.sx-about--features .sx-about__feature-body { flex: 1; }
.sx-about--features .sx-about__feature-title {
  font-family: var(--sx-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--sx-color-ink);
  margin: 0 0 6px;
}
.sx-about--features .sx-about__feature-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sx-color-ink-soft);
  margin: 0;
}
/* Highlighted support CTA — colored icon disc + label + value (e.g.
   "Quick Support / (+1) 555-1234"). Clickable surface. */
.sx-about--features .sx-about__support {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.sx-about--features .sx-about__support:hover { transform: translateX(4px); }
.sx-about--features .sx-about__support-icon {
  flex: 0 0 auto;
  width: 60px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-about--features .sx-about__support-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.sx-about--features .sx-about__support-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sx-about--features .sx-about__support-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  letter-spacing: 0.02em;
}
.sx-about--features .sx-about__support-value {
  font-family: var(--sx-font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--sx-color-ink);
}

/* ── About variant: "stats" ────────────────────────────────────
   Centered heading+subheading ABOVE the image-text split. Progress
   bars below paragraphs in the text column. Useful for showing
   competency/skill levels (e.g. Preschool Education 75%). */
.sx-about--stats .sx-section__head {
  text-align: center;
  margin: 0 auto 48px;
}
.sx-about--stats .sx-about__bars {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sx-about--stats .sx-about__bar { }
.sx-about--stats .sx-about__bar-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.sx-about--stats .sx-about__bar-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--sx-color-ink);
}
.sx-about--stats .sx-about__bar-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--sx-color-ink-soft);
}
.sx-about--stats .sx-about__bar-track {
  height: 4px;
  background: color-mix(in srgb, var(--sx-color-border) 60%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.sx-about--stats .sx-about__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sx-color-primary), var(--sx-color-accent));
  border-radius: 999px;
  /* Animate from 0 to target on first paint — subtle, only ~700ms.
     Using transform: scaleX would be cheaper but width gives the
     accurate "growing bar" semantic + still cheap (single transition). */
  transform-origin: left;
  animation: sx-about-bar-grow 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sx-about-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-about--stats .sx-about__bar-fill { animation: none !important; }
}

/* ── About variant: "triad" ────────────────────────────────────
   3-column layout — text column (heading + paragraphs) on the left
   + 2 or 3 image cards on the right. Each card = image on top,
   centered title + text below. Replaces the legacy single image. */
.sx-about--triad .sx-about__triad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 760px) {
  .sx-about--triad .sx-about__triad { grid-template-columns: 1fr 1fr 1fr; }
}
.sx-about--triad .sx-about__text .sx-eyebrow {
  /* Replace the dash with a short accent underline below the heading
     (matches the medical-clinic reference where the heading has a
     small primary line under it). */
}
.sx-about--triad .sx-about__text .sx-h2 {
  margin-bottom: 8px;
  font-size: clamp(26px, 3vw, 36px);
}
.sx-about--triad .sx-about__text .sx-h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  margin: 14px 0 0;
  border-radius: 2px;
}
.sx-about--triad .sx-about__text .sx-about__paragraphs p { margin-top: 16px; }
.sx-about--triad .sx-about__card {
  display: flex;
  flex-direction: column;
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-lg, 10px);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-about--triad .sx-about__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.sx-about--triad .sx-about__card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-about--triad .sx-about__card-img img,
.sx-about--triad .sx-about__card-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-about--triad .sx-about__card:hover .sx-about__card-img img { transform: scale(1.06); }
.sx-about--triad .sx-about__card-body {
  padding: 24px 20px 28px;
}
.sx-about--triad .sx-about__card-title {
  font-family: var(--sx-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sx-color-ink);
  margin: 0 0 12px;
}
.sx-about--triad .sx-about__card-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sx-color-ink-soft);
  margin: 0;
}

/* ── About variant: "bleed" ────────────────────────────────────
   Full-bleed 50/50 split — image flush to the section edge with NO
   border-radius/padding; content in the other half. Pairs well with
   editorial workspace/team photos and a features-grid below the lead.
   Image side via `image_side` ("right" default; "left" reverses). */
.sx-about--bleed { padding: 0; }
.sx-about--bleed .sx-container {
  padding: 0;
  max-width: 100%;
}
.sx-about--bleed .sx-about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 600px;
}
@media (min-width: 880px) {
  .sx-about--bleed .sx-about__inner { grid-template-columns: 1fr 1fr; }
}
.sx-about--bleed .sx-about__img {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--sx-color-bg-alt);
  align-self: stretch;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-about--bleed .sx-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
/* Image flush LEFT (default) / RIGHT */
.sx-about--bleed.sx-about--image-right .sx-about__img { order: 2; }
.sx-about--bleed .sx-about__text {
  padding: clamp(40px, 6vw, 96px) clamp(28px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--sx-color-bg);
}
.sx-about--bleed .sx-about__text .sx-h2 {
  margin-bottom: 8px;
}
.sx-about--bleed .sx-about__text .sx-h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  margin: 12px 0 18px;
}
.sx-about--bleed .sx-about__paragraphs { font-size: 15px; line-height: 1.6; color: var(--sx-color-ink-soft); }
.sx-about--bleed .sx-about__paragraphs p { margin-top: 12px; }
.sx-about--bleed .sx-about__paragraphs p:first-child { margin-top: 0; }

/* Features grid (2-column) below lead text */
.sx-about--bleed .sx-about__features {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
@media (max-width: 600px) {
  .sx-about--bleed .sx-about__features { grid-template-columns: 1fr; }
}
.sx-about--bleed .sx-about__feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sx-about--bleed .sx-about__feature-icon {
  flex: 0 0 auto;
  width: 36px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-about--bleed .sx-about__feature-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
}
.sx-about--bleed .sx-about__feature-body { flex: 1; }
.sx-about--bleed .sx-about__feature-title {
  font-family: var(--sx-font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sx-color-ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.sx-about--bleed .sx-about__feature-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sx-color-ink-soft);
  margin: 0;
}

/* ─ MISSION VALUES ────────────────────────────────────────────── */
.sx-values { padding: var(--sx-section-y) 0; background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
/* Optional background-image variant. Triggered by props.background
   (an image ref). The bg renders as a real <img> (per STANDARDS Rule
   26 — editable via data-cms-image) absolutely behind the content.
   A dark overlay sits between for text contrast, then we flip the
   heading + card colors so the section reads on any photo. */
.sx-values--has-bg { position: relative; overflow: hidden; background: transparent; }
.sx-values__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--sx-fondo-pos, center); z-index: 0;
}
.sx-values__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 50%, rgba(0,0,0,0.70) 100%);
  z-index: 1;
}
.sx-values--has-bg .sx-container { position: relative; z-index: 2; }
.sx-values--has-bg .sx-h2,
.sx-values--has-bg .sx-eyebrow,
.sx-values--has-bg .sx-lead { color: #fff !important; }
.sx-values--has-bg .sx-eyebrow::before { background: var(--sx-color-accent-fill, var(--sx-color-accent)); }
.sx-values--has-bg.sx-values--blush-dark .sx-values__overlay {
  background: linear-gradient(135deg, rgba(255, 245, 243, 0.68) 0%, rgba(247, 228, 224, 0.48) 50%, rgba(255, 245, 243, 0.72) 100%);
}
.sx-values--has-bg.sx-values--blush-dark .sx-h2 {
  color: #161216 !important;
  text-shadow: 0 12px 32px rgba(255,255,255,0.18);
}
.sx-values--has-bg.sx-values--blush-dark .sx-eyebrow {
  color: #d88b93 !important;
}
.sx-values--has-bg.sx-values--blush-dark .sx-lead {
  color: rgba(22, 18, 22, 0.78) !important;
}
.sx-values--has-bg.sx-values--blush-dark .sx-eyebrow::before {
  background: #d88b93;
}
.sx-values--has-bg.sx-values--overlay-none .sx-values__overlay {
  display: none;
}
.sx-values--has-bg.sx-values--overlay-none .sx-h2 {
  color: var(--sx-color-ink) !important;
  text-shadow: none;
}
.sx-values--has-bg.sx-values--overlay-none .sx-eyebrow {
  color: var(--sx-color-primary-dark) !important;
}
.sx-values--has-bg.sx-values--overlay-none .sx-eyebrow::before {
  background: var(--sx-color-primary-dark) !important;
}
.sx-values--has-bg.sx-values--overlay-none .sx-lead {
  color: var(--sx-color-ink-soft) !important;
}
.sx-values--has-bg.sx-values--overlay-none .sx-value-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(17, 22, 27, 0.08);
  box-shadow: 0 18px 46px rgba(17, 22, 27, 0.08);
  backdrop-filter: saturate(145%) blur(6px);
  -webkit-backdrop-filter: saturate(145%) blur(6px);
}
.sx-values.sx-values--ink-strong .sx-eyebrow {
  color: var(--sx-color-primary-dark) !important;
}
.sx-values.sx-values--ink-strong .sx-eyebrow::before {
  background: var(--sx-color-primary-dark) !important;
}
.sx-values.sx-values--ink-strong .sx-h2 {
  color: var(--sx-color-ink) !important;
}
/* Cards on photographic bg need a more solid surface for legibility.
   Soft white with slight transparency keeps the photo peeking
   through at the edges without dominating the icon + copy. */
.sx-values--has-bg .sx-value-card {
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
/* dark theme: don't force white cards — use a dark translucent surface so
   titles/icons stay legible and match the dark aesthetic */
html.sx-theme-dark .sx-values--has-bg .sx-value-card,
html.sx-theme-dark .sx-value-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--sx-color-border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  /* The base rule paints this card with the OPAQUE `surface` token and
     re-points ink to `-on-surface` to match. Here the card becomes a 4.5%
     white TINT over whatever the section painted, so `-on-surface` is the
     wrong surface: bartender-party is a dark theme with a white `surface`,
     so the card stayed dark while its copy kept the near-white surface's
     dark ink — 3.20:1 on the title AND the body of every value card.
     Inherit instead, so the copy follows the section it is actually sitting
     on (bg_alt bare, or whatever band wraps it). */
  --sx-color-ink: inherit;
  --sx-color-ink-soft: inherit;
  --sx-color-accent-ink: inherit;
  --sx-color-primary-ink: inherit;
  color: inherit;
}
html.sx-theme-dark .sx-value-card h3 { color: var(--sx-color-ink); }
html.sx-theme-dark .sx-value-card__icon {
  background: color-mix(in srgb, var(--sx-color-primary) 18%, transparent);
}
.sx-values__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 24px;
}
@media (min-width: 600px) { .sx-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .sx-values__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sx-values__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.sx-value-card {
  background: var(--sx-color-surface);
  padding: 32px 24px;
  border-radius: var(--sx-radius-lg);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sx-shadow-card);
}
.sx-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: color-mix(in srgb, var(--sx-color-primary) 10%, transparent);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  border-radius: var(--sx-radius-pill);
  margin-bottom: 20px;
}
.sx-value-card__icon svg { width: 34px; height: 34px; stroke-width: 1; }
.sx-value-card h3 { font-size: 18px; margin-bottom: 8px; font-family: var(--sx-font-body); }
.sx-value-card p { font-size: 14px; color: var(--sx-color-ink-soft); line-height: 1.6; }

/* ── Mission_values variant: "outlined" ──────────────────────────
   Bordered card; fills with primary tint on hover. Clean editorial. */
.sx-values--outlined .sx-value-card {
  padding: 32px 24px;
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-md, 6px);
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.sx-values--outlined .sx-value-card:hover {
  background: color-mix(in srgb, var(--sx-color-primary) 6%, transparent);
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
  transform: translateY(-4px);
}

/* ── Mission_values variant: "elevated" ──────────────────────────
   White surface + soft shadow + lift on hover. Premium feel. */
.sx-values--elevated .sx-value-card {
  padding: 24px 20px;
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-lg, 10px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-values--elevated .sx-value-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}
.sx-values--elevated .sx-value-card__icon svg {
  width: 26px;
  height: 26px;
}
.sx-values--elevated .sx-value-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.sx-values--elevated .sx-value-card p {
  font-size: 0.93rem;
  line-height: 1.55;
}
.sx-values--elevated .sx-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.10);
}

/* Glass mode: elevated + background image → frosted cards. */
.sx-values--has-bg.sx-values--elevated .sx-value-card {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sx-values--has-bg.sx-values--elevated .sx-value-card:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.28);
}
.sx-values--has-bg.sx-values--elevated .sx-value-card__icon {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.sx-values--has-bg.sx-values--elevated .sx-value-card__icon svg {
  stroke: #fff;
  color: #fff;
}
.sx-values--has-bg.sx-values--elevated .sx-value-card h3,
.sx-values--has-bg.sx-values--elevated .sx-value-card p {
  color: #fff;
}

/* ── Mission_values variant: "horizontal" ────────────────────────
   Vertical stack, LEFT-aligned: small icon top → title → description.
   Title + description hang flush left under the icon (not centered). */
.sx-values--horizontal .sx-value-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  padding: 28px 28px 30px;
}
.sx-values--horizontal .sx-value-card__icon {
  margin: 0 0 4px;
  width: 48px;
  height: 48px;
}
.sx-values--horizontal .sx-value-card__icon svg {
  width: 22px;
  height: 22px;
}
.sx-values--horizontal .sx-value-card__body {
  width: 100%;
}
.sx-values--horizontal .sx-value-card h3 {
  margin: 0 0 8px;
  text-align: left;
}
.sx-values--horizontal .sx-value-card p {
  margin: 0;
  text-align: left;
  max-width: none;
}

/* ── Mission_values variant: "minimal" ───────────────────────────
   No card chrome — just icon + title + text. Title shows a primary
   underline on hover for a clean editorial interaction. */
.sx-values--minimal .sx-value-card {
  padding: 16px 8px;
  background: transparent;
  border: none;
}
.sx-values--minimal .sx-value-card__icon {
  background: transparent;
  width: 56px;
  height: 56px;
}
.sx-values--minimal .sx-value-card__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1;
}
.sx-values--minimal .sx-value-card h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.sx-values--minimal .sx-value-card h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-values--minimal .sx-value-card:hover h3::after { width: 32px; }
.sx-values--minimal .sx-value-card:hover h3 { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* ─ LOGOS STRIP (brands) ──────────────────────────────────────── */
.sx-logos { padding: 64px 0; }
.sx-logos__head { text-align: center; margin-bottom: 40px; }
.sx-logos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 720px) { .sx-logos__grid { grid-template-columns: repeat(6, 1fr); } }
.sx-logos__grid img {
  max-height: 120px;
  width: 100%;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.sx-logos__grid img:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.05);
}

/* ─ TESTIMONIALS ──────────────────────────────────────────────── */
.sx-testimonials {
  position: relative;
  overflow: hidden;
  padding: var(--sx-section-y) 0;
}
.sx-testimonials__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sx-fondo-pos, center);   /* bg_position del panel (06-sep-2026) */
  z-index: 0;
}
.sx-testimonials__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(33, 24, 22, calc(var(--sx-testimonials-overlay, 0.54) * 0.82)) 0%, rgba(33, 24, 22, var(--sx-testimonials-overlay, 0.54)) 100%);
  z-index: 1;
}
.sx-testimonials .sx-container {
  position: relative;
  z-index: 2;
}
.sx-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) { .sx-testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
.sx-test-card {
  background: var(--sx-color-surface);
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-test-card__quote {
  font-family: var(--sx-font-body);
  font-style: italic;
  font-size: 12px;
  line-height: 1.95;
  color: var(--sx-color-ink-soft);
  margin: 26px 0 40px;
  flex: 1;
  letter-spacing: 0.01em;
  font-weight: 400;
}
.sx-test-card .sx-stars { font-size: 12px; letter-spacing: 0.1em; }
.sx-test-card__author { padding-top: 26px; gap: 14px; }
/* Decorative open-quote removed — it read as a stray, unclosed mark. */
.sx-test-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--sx-color-border);
}
.sx-test-card__author img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}
/* Monograma: el círculo con iniciales cuando la reseña no trae foto.
 *
 * Mismo tamaño y forma que el avatar, para que la fila de tarjetas no quede
 * desalineada según quién entró con Google y quién no. Las iniciales salen del
 * nombre REAL de quien reseñó — no es un adorno inventado, es el mismo dato
 * que ya se muestra debajo.
 *
 * La alternativa era prestarle la foto de la persona de ejemplo del template,
 * y eso es ponerle una cara falsa a un testimonio firmado por otra. */
.sx-test-card__mono {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-color-primary, #1a1a1a);
  color: var(--sx-color-on-primary, #fff);
  font-family: var(--sx-font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sx-test-card__name { font-weight: 700; font-family: var(--sx-font-body); font-size: 14px; }
.sx-test-card__role { font-size: 12px; color: var(--sx-color-ink-soft); }

.sx-testimonials--has-bg .sx-h2,
.sx-testimonials--has-bg .sx-eyebrow,
.sx-testimonials--has-bg .sx-lead {
  color: #fff;
}
.sx-testimonials--has-bg .sx-eyebrow::before {
  background: rgba(255,255,255,0.88);
}
.sx-testimonials--has-bg .sx-lead {
  color: rgba(255,255,255,0.82);
}
.sx-testimonials--has-bg .sx-test-card {
  background: rgba(255, 250, 247, 0.88);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 18px 42px rgba(36, 24, 21, 0.16);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

/* Optional testimonials card variant — opt in via
   props.card_style = "shadow". Gives the cards a softer modern
   layered shadow + subtle glass surface without affecting older
   templates. */
.sx-testimonials--shadow .sx-test-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,250,249,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 18px 40px rgba(116,97,102,0.08),
    0 34px 84px rgba(116,97,102,0.12);
  -webkit-backdrop-filter: saturate(145%) blur(10px);
  backdrop-filter: saturate(145%) blur(10px);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.sx-testimonials--shadow .sx-test-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
  pointer-events: none;
}
.sx-testimonials--shadow .sx-test-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--sx-color-accent) 24%, rgba(255,255,255,0.78));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 22px 48px rgba(116,97,102,0.12),
    0 42px 96px rgba(116,97,102,0.16);
}

/* ── testimonials variant: "spotlight" ────────────────────────── */
.sx-testimonials--spotlight .sx-testimonials__grid {
  display: block;
  max-width: 880px;
  margin: 0 auto;
}
.sx-testimonials--spotlight .sx-test-card {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 0;
}
.sx-testimonials--spotlight .sx-stars {
  font-size: 22px;
  margin-bottom: 24px;
}
.sx-testimonials--spotlight .sx-test-card__quote {
  font-family: var(--sx-font-display);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.65;
  font-weight: 400;
  color: var(--sx-color-ink);
  margin-bottom: 28px;
  font-style: italic;
  letter-spacing: 0.005em;
  max-width: 56ch;
  margin-inline: auto;
}
.sx-testimonials--spotlight .sx-test-card__quote::before { content: "“"; }
.sx-testimonials--spotlight .sx-test-card__quote::after  { content: "”"; }
.sx-testimonials--spotlight .sx-test-card__author {
  justify-content: center;
}

/* ── testimonials variant: "slider" ───────────────────────────── */
.sx-testimonials--slider .sx-testimonials__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 24px;
}
.sx-testimonials--slider .sx-testimonials__grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  grid-template-columns: none;
  padding-bottom: 4px;
}
.sx-testimonials--slider .sx-testimonials__grid::-webkit-scrollbar { display: none; }
.sx-testimonials--slider .sx-test-card {
  flex: 0 0 auto;
  width: clamp(280px, 50%, 480px);
  scroll-snap-align: start;
}

/* ── testimonials variant: "quote-bg" ─────────────────────────── */
.sx-testimonials--quote-bg .sx-test-card {
  position: relative;
  overflow: hidden;
}
.sx-testimonials--quote-bg .sx-test-card::after {
  content: "“";
  position: absolute;
  top: -32px;
  right: 8px;
  font-family: var(--sx-font-display);
  font-size: 220px;
  line-height: 1;
  color: color-mix(in srgb, var(--sx-color-primary) 14%, transparent);
  pointer-events: none;
  z-index: 0;
  font-weight: 900;
}
.sx-testimonials--quote-bg .sx-stars,
.sx-testimonials--quote-bg .sx-test-card__quote,
.sx-testimonials--quote-bg .sx-test-card__author {
  position: relative;
  z-index: 1;
}

/* ── testimonials variant: "glass" ────────────────────────────── */
.sx-testimonials--glass.sx-testimonials--has-bg .sx-test-card {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sx-testimonials--glass.sx-testimonials--has-bg .sx-test-card__quote,
.sx-testimonials--glass.sx-testimonials--has-bg .sx-test-card__name { color: #fff; }
.sx-testimonials--glass.sx-testimonials--has-bg .sx-test-card__role { color: rgba(255,255,255,0.78); }
.sx-testimonials--glass.sx-testimonials--has-bg .sx-stars { color: #ffd76a; }

/* ── testimonials variant: "compact-row" ──────────────────────── */
.sx-testimonials--compact-row .sx-testimonials__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
.sx-testimonials--compact-row .sx-test-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: var(--sx-radius-lg, 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-testimonials--compact-row .sx-test-card .sx-stars { order: 3; font-size: 13px; }
.sx-testimonials--compact-row .sx-test-card__quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-style: normal;
  order: 2;
}
.sx-testimonials--compact-row .sx-test-card__author {
  order: 1;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.sx-testimonials--compact-row .sx-test-card__author img {
  width: 48px; height: 48px; border-radius: 50%;
}
.sx-testimonials--compact-row .sx-test-card__author > div { display: none; }
@media (max-width: 720px) {
  .sx-testimonials--compact-row .sx-test-card {
    grid-template-columns: 40px 1fr;
  }
  .sx-testimonials--compact-row .sx-test-card .sx-stars { grid-column: 2; justify-self: start; order: 3; }
}

/* ─ SUBSCRIPTION BOX ──────────────────────────────────────────── */
.sx-subscription {
  padding: var(--sx-section-y) 0;
  /* Same inverse trap as `advantage`: this used `ink` as a BACKGROUND, which
     flips light in a dark theme while the text stayed white. And when a band
     painted a light surface under it, the white text vanished (measured 1:1).
     The inverse pair keeps background and text together. */
  background: linear-gradient(135deg, var(--sx-color-inverse-bg) 0%,
    color-mix(in srgb, var(--sx-color-inverse-bg) 82%, var(--sx-color-inverse-ink)) 100%);
  color: var(--sx-color-inverse-ink);
}
.sx-subscription__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) { .sx-subscription__inner { grid-template-columns: 1fr 1fr; } }
.sx-subscription .sx-eyebrow { color: var(--sx-color-accent-on-inverse, var(--sx-color-primary)); }
.sx-subscription h2 { color: var(--sx-color-inverse-ink); font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px; }
.sx-subscription p.sx-subscription__lead { color: var(--sx-color-inverse-ink-soft); font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.sx-subscription__perks { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.sx-subscription__perks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: rgba(255,255,255,0.9);
}
.sx-subscription__perks li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Was a background-image whose SVG had the shell's coral baked into it
     (stroke='%23e85d5d'), so every subscription tick rendered bright red no
     matter the palette — on a navy/gold template it read as an error state,
     and no theme token could reach it. As a MASK the SVG only supplies the
     shape and the colour comes from `background-color`, so it follows the
     brand like everything else on this dark band. */
  background-color: var(--sx-color-accent-on-inverse, var(--sx-color-accent));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin-top: 4px;
}
.sx-subscription__pricecard {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sx-radius-xl);
  padding: 48px 32px;
  text-align: center;
}
.sx-subscription__price {
  font-family: var(--sx-font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
}
.sx-subscription__pricesub { color: var(--sx-color-inverse-ink-soft); font-size: 14px; margin-bottom: 32px; }

/* ─ CONTACT INFO ──────────────────────────────────────────────── */
.sx-contact {
  padding: calc(var(--sx-section-y) * 1.5) 0;
  background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) { .sx-contact__inner { grid-template-columns: 1fr 1fr; gap: 56px; } }
/* When show_map=false the items get the full width and lay out as a
   3-column grid (Phone | Email | Address — or whatever rows exist).
   Collapses to 1 column on narrow viewports. */
.sx-contact__inner--nomap { grid-template-columns: 1fr; }
@media (min-width: 900px) { .sx-contact__inner--nomap { grid-template-columns: 1fr; } }
/* Items above (3 columns), map below full-width — used regardless of
   show_map state. Overrides the legacy 1fr/1fr side-by-side layout. */
.sx-contact__inner--stack { grid-template-columns: 1fr !important; gap: 36px; }
.sx-contact__inner--stack .sx-contact__map { width: 100%; }
.sx-contact__inner--stack .sx-contact__map iframe { width: 100%; min-height: 360px; border: 0; border-radius: var(--sx-radius-lg); }
.sx-contact__items { display: flex; flex-direction: column; gap: 28px; }
.sx-contact__items--cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .sx-contact__items--cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .sx-contact__items--cols { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.sx-contact__item { display: flex; align-items: flex-start; gap: 16px; }
.sx-contact__item-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sx-radius-md);
  background: color-mix(in srgb, var(--sx-color-primary) 12%, transparent);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-contact__item-icon svg { width: 20px; height: 20px; }
.sx-contact__item h3 {
  font-family: var(--sx-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
  margin-bottom: 4px;
}
.sx-contact__item p { font-size: 15px; color: var(--sx-color-ink); margin: 0; }
.sx-contact__item ul { list-style: none; padding: 0; margin: 0; }
.sx-contact__hours li {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px;
  padding: 4px 0;
}
.sx-contact__hours li.is-closed { color: var(--sx-color-ink-soft); }
.sx-contact__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--sx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sx-color-border);
  background: var(--sx-color-surface);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-contact__map iframe { width: 100%; height: 100%; border: 0; }

/* ── contact_info variant: "split-card" ───────────────────────── */
.sx-contact--split-card .sx-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .sx-contact--split-card .sx-contact__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
  }
}
.sx-contact--split-card .sx-contact__items {
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: var(--sx-radius-lg, 16px);
  padding: 40px 36px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-contact--split-card .sx-contact__map {
  aspect-ratio: auto;
  min-height: 380px;
  align-self: stretch;
}

/* ── contact_info variant: "floating-map" ─────────────────────── */
.sx-contact--floating-map .sx-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  position: relative;
  align-items: stretch;
}
@media (min-width: 900px) {
  .sx-contact--floating-map .sx-contact__inner {
    grid-template-columns: 1fr 1.25fr;
    gap: 48px;
  }
}
.sx-contact--floating-map .sx-contact__map {
  border-radius: 24px;
  box-shadow: 0 32px 72px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.06);
  transform: translateY(-16px);
  border: 6px solid var(--sx-color-surface, #fff);
  aspect-ratio: 4 / 3;
  height: auto;
}
.sx-contact--floating-map .sx-contact__items { align-self: center; }

/* ── contact_info variant: "map-focus" ────────────────────────── */
.sx-contact--map-focus { padding-block: 0; padding-bottom: clamp(64px, 9vh, 100px); }
.sx-contact--map-focus .sx-section__head {
  padding-top: clamp(80px, 11vh, 130px);
  padding-bottom: clamp(40px, 5vh, 60px);
  margin-bottom: 0;
}
.sx-contact--map-focus .sx-contact__inner {
  display: block;
  position: relative;
  min-height: 600px;
}
.sx-contact--map-focus .sx-contact__map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; aspect-ratio: auto; border: none;
}
.sx-contact--map-focus .sx-contact__items {
  position: absolute;
  bottom: 32px; right: 32px;
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-lg, 16px);
  padding: 24px 28px;
  width: 320px;
  z-index: 2;
  box-shadow: 0 22px 56px rgba(0,0,0,0.22);
  gap: 16px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-contact--map-focus .sx-contact__item { font-size: 13px; }
.sx-contact--map-focus .sx-contact__item h3 { font-size: 11px; }
.sx-contact--map-focus .sx-contact__item p { font-size: 13px; }
@media (max-width: 720px) {
  .sx-contact--map-focus .sx-contact__items {
    position: relative; bottom: auto; right: auto;
    margin: -80px 16px 16px;
    width: auto;
  }
}

/* ── contact_info variant: "sidebar" ──────────────────────────── */
.sx-contact--sidebar .sx-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .sx-contact--sidebar .sx-contact__inner {
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: stretch;
  }
  .sx-contact--sidebar .sx-contact__items {
    position: sticky;
    top: 90px;
    align-self: start;
  }
}
.sx-contact--sidebar .sx-contact__map {
  aspect-ratio: 16 / 11;
  height: auto;
}

/* ── contact_info variant: "dark-split" ───────────────────────── */
/* Dark color = primary-tinted (not flat black) so it harmonizes with
   the rest of the page palette. For a sky-blue theme it reads navy;
   for a coral theme it reads burnt; etc. */
.sx-contact--dark-split { padding: 64px 0; }
/* Centered inset card (not full-bleed) — the red split + map sit in the middle
   of the page with balanced breathing room on both sides. */
.sx-contact--dark-split .sx-container {
  padding: 0;
  max-width: min(1080px, calc(100% - 48px));
  margin-inline: auto;
  border-radius: var(--sx-radius-lg, 14px);
  overflow: hidden;
}
.sx-contact--dark-split .sx-section__head {
  max-width: none;
  margin: 0;
  padding: 56px clamp(24px, 5vw, 64px) 32px;
  background: color-mix(in srgb, var(--sx-color-primary) 88%, #000);
  color: #fff;
}
.sx-contact--dark-split .sx-section__head .sx-h2,
.sx-contact--dark-split .sx-section__head .sx-eyebrow,
.sx-contact--dark-split .sx-section__head .sx-lead { color: #fff; }
.sx-contact--dark-split .sx-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 900px) {
  .sx-contact--dark-split .sx-contact__inner { grid-template-columns: 1fr 1fr; }
}
.sx-contact--dark-split .sx-contact__items {
  background: color-mix(in srgb, var(--sx-color-primary) 88%, #000);
  color: #fff;
  padding: 48px clamp(24px, 5vw, 64px) 80px;
  gap: 28px;
}
.sx-contact--dark-split .sx-contact__item h3 { color: rgba(255,255,255,0.62); }
.sx-contact--dark-split .sx-contact__item p,
.sx-contact--dark-split .sx-contact__item p a,
.sx-contact--dark-split .sx-contact__hours li { color: #fff; }
.sx-contact--dark-split .sx-contact__item-icon {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.sx-contact--dark-split .sx-contact__map {
  border-radius: 0;
  border: none;
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
}
.sx-contact--dark-split .sx-contact__map iframe { height: 100%; min-height: 540px; }

/* ── contact_info variant: "glass-stack" ──────────────────────── */
.sx-contact--glass-stack {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sx-color-primary) 12%, var(--sx-color-bg)) 0%, var(--sx-color-bg) 100%);
}
.sx-contact--glass-stack .sx-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .sx-contact--glass-stack .sx-contact__inner { grid-template-columns: 1fr 1.2fr; gap: 40px; }
}
.sx-contact--glass-stack .sx-contact__items {
  gap: 14px;
  display: flex;
  flex-direction: column;
}
.sx-contact--glass-stack .sx-contact__item {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--sx-radius-lg, 14px);
  padding: 18px 22px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}
.sx-contact--glass-stack .sx-contact__map {
  border-radius: var(--sx-radius-lg, 18px);
  aspect-ratio: auto;
  height: 100%;
}
.sx-contact--glass-stack .sx-contact__map iframe { height: 100%; min-height: 480px; }

/* ── contact_info variant: "pills-row" ────────────────────────── */
.sx-contact--pills-row .sx-contact__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sx-contact--pills-row .sx-contact__items {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.sx-contact--pills-row .sx-contact__item {
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: 999px;
  padding: 10px 22px 10px 14px;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  flex: 0 0 auto;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
/* Hide the entire "hours" pill — too much content for a pill */
.sx-contact--pills-row .sx-contact__item:has(.sx-contact__hours) { display: none; }
.sx-contact--pills-row .sx-contact__item h3 { display: none; }
.sx-contact--pills-row .sx-contact__item p { font-size: 13.5px; margin: 0; }
.sx-contact--pills-row .sx-contact__item-icon {
  width: 32px; height: 32px;
  background: color-mix(in srgb, var(--sx-color-primary) 12%, transparent);
}
.sx-contact--pills-row .sx-contact__item-icon svg { width: 15px; height: 15px; }
.sx-contact--pills-row .sx-contact__map {
  border-radius: var(--sx-radius-lg, 16px);
  aspect-ratio: 21 / 8;
  height: auto;
  width: 100%;
}

/* ─ Generic fallback (any unknown type renders an empty card) ─── */
.sx-unknown {
  padding: 24px;
  margin: 16px auto;
  max-width: 720px;
  border: 1px dashed var(--sx-color-border);
  border-radius: var(--sx-radius-lg);
  background: var(--sx-color-bg-alt);
  color: var(--sx-color-ink-soft);
  font-size: 13px;
  text-align: center;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-unknown code {
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
 *  MOBILE-FIRST OVERRIDES  (<= 719px)
 * ════════════════════════════════════════════════════════════════
 *
 * Why a single mobile block at the end of sections.css instead of
 * scattering @media into every component:
 *   1. Touch the same selector in one place → easier to audit at a
 *      glance whether a section is mobile-ready.
 *   2. The component blocks above ARE mobile-first in shape (single
 *      column grids by default, breakpoints SCALE UP). This block
 *      is the "shrink the desktop-spec values that bled past the
 *      breakpoint" pass.
 *   3. `--sx-section-y-mobile` was defined in base.css but never
 *      consumed. Every section was getting 96px top+bottom on a
 *      375px phone — too much air, content felt sparse. This block
 *      finally wires it in.
 *
 * Audit notes for whoever touches this next:
 *   - Hero kept at clamp(440px, 70vh, 560px) so it still feels
 *     editorial on small screens, just not "filling the whole
 *     phone before they scroll".
 *   - Achievement bar drops to 1 col under 420px — at 2 cols the
 *     big display numbers butt against each other.
 *   - Contact map shrinks aspect-ratio so it doesn't dominate the
 *     section on mobile (4/3 → 16/10).
 *   - Footer columns stack with reduced gap; legal line wraps
 *     under the socials.
 */
@media (max-width: 719px) {
  /* ── Layout primitives ───────────────────────────────────────── */
  .sx-container { padding: 0 16px; }
  /* Section padding: use the previously-unused mobile token.
     Sections that have their own `padding: ...` declaration (e.g.
     .sx-achievement = 48px) keep theirs, this only affects the
     ones that use --sx-section-y. */
  .sx-section,
  .sx-services-visual,
  .sx-about,
  .sx-values,
  .sx-logos,
  .sx-testimonials,
  .sx-subscription,
  .sx-contact {
    padding-top: var(--sx-section-y-mobile);
    padding-bottom: var(--sx-section-y-mobile);
  }
  .sx-section__head { margin-bottom: 32px; }

  /* ── Hero split ──────────────────────────────────────────────── */
  /* Compress so the visitor can SEE the next section without
     scrolling past a 760px-tall hero on a 712px-tall screen. */
  /* height:auto (not a fixed clamp) so a tall panel — long title +
     long sub + two stacked full-width CTAs — grows the section
     instead of being clipped by `.sx-hero-split { overflow:hidden }`.
     min-height keeps the cinematic floor; the container keeps its
     own min-height so the panel still centres when content is short. */
  .sx-hero-split {
    min-height: 440px;
    height: auto;
  }
  .sx-hero-split__container { min-height: 440px; height: auto; }
  .sx-hero-split__panel {
    /* Container padding is 16px each side → leave panel a bit of
       inset margin so it doesn't feel edge-glued. */
    max-width: none;
    padding: 28px 24px;
  }
  .sx-hero-split__title { font-size: clamp(28px, 8vw, 38px); margin-bottom: 14px; }
  .sx-hero-split__sub   { font-size: 15px; margin-bottom: 20px; }
  /* Buttons full width on mobile — the panel is already narrow, two
     inline CTAs would wrap into wonky 2-line buttons. */
  .sx-hero-split__ctas { flex-direction: column; align-items: stretch; }
  .sx-hero-split__ctas .sx-btn { width: 100%; }
  .sx-hero-split__container { padding-top: 24px; padding-bottom: 24px; }

  /* ── Achievement bar ─────────────────────────────────────────── */
  .sx-achievement { padding: 32px 0; }
  .sx-achievement__grid { gap: 24px 12px; }
  /* Under 420px the 2-col grid presses the big display numbers
     together — go single column. */
  @media (max-width: 419px) {
    .sx-achievement__grid { grid-template-columns: 1fr; }
  }

  /* ── About ───────────────────────────────────────────────────── */
  .sx-about__inner { gap: 24px; }
  /* On mobile show the photo at its NATURAL proportions (full image, no
     crop) instead of forcing a 16/10 band — a portrait founder photo got
     its face cut off. width:100% + aspect-ratio:auto = full width, intrinsic
     height, nothing cropped. */
  .sx-about__img img { aspect-ratio: auto; height: auto; object-fit: contain; }
  .sx-about__paragraphs p { font-size: 15px; line-height: 1.6; }

  /* ── Mission values ──────────────────────────────────────────── */
  /* Cards default to 1fr already; just shrink the padding so they
     don't stack into a 4-card-tall tower. */
  .sx-value-card { padding: 24px 18px; }

  /* ── Logos strip ─────────────────────────────────────────────── */
  /* Default below 720 is whatever the grid resolves to. Force 3
     cols at narrow width so we get a 3×2 grid for 6 logos instead
     of a single-column tower. */
  .sx-logos__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* ── Testimonials ────────────────────────────────────────────── */
  /* Single column under 720, default at the top. Shrink card padding
     so the quote has breathing room on a narrow phone instead of
     wrapping word-per-line. NOTE: the class is `.sx-test-card`, not
     `.sx-testimonial-card` — the old selector here was a dead typo. */
  .sx-test-card { padding: 22px 20px; }
  .sx-test-card__quote { font-size: 16px; margin: 8px 0 20px; }

  /* ── Subscription ────────────────────────────────────────────── */
  .sx-subscription__inner { gap: 24px; }
  /* 48px 32px pricecard padding eats the whole width on a 320px
     phone — the big price number then overflows its card. */
  .sx-subscription__pricecard { padding: 32px 20px; }
  .sx-subscription__price { font-size: clamp(40px, 12vw, 56px); }

  /* ── Contact ─────────────────────────────────────────────────── */
  .sx-contact__inner { gap: 28px; }
  .sx-contact__map { aspect-ratio: 16 / 10; }
  .sx-contact__item-icon { width: 38px; height: 38px; }
  .sx-contact__item-icon svg { width: 18px; height: 18px; }
  .sx-contact__items { gap: 22px; }

  /* ── Product cards (shop / services_visual) ─────────────────── */
  /* Default below 720 is 2 cols. Under 420 single col so each card
     is comfortably tap-sized and the image dominates. */
  @media (max-width: 419px) {
    .sx-services-visual__grid { grid-template-columns: 1fr; }
  }
  .sx-product-card__body { padding: 16px; }
  .sx-product-card__title { font-size: 14px; }
  .sx-product-card__price { font-size: 16px; }
}

/* ── Extra-narrow (<=380px iPhone SE etc.) hard guard ───────────
 * Some older/cheaper Android phones report widths under 360px.
 * Make sure NOTHING horizontally overflows there. */
@media (max-width: 380px) {
  .sx-container { padding: 0 12px; }
  .sx-h1 { font-size: 30px; }
  .sx-h2 { font-size: 24px; }
  .sx-hero-split__title { font-size: 26px; }
  .sx-section__head { margin-bottom: 24px; }
}

/* ──────────────────────────────────────────────────────────────
 * Audit Profundización 9 — styles for the section types whose
 * renderers were added in the same audit (team, partners, faq,
 * cta_mid, hero centered, rating_summary). Before this, the
 * markup landed in the DOM but every class was undefined → plain
 * vertical text stack with no spacing or grid. User reported the
 * Team section in the preview as "Anthony Castagno / CEO &
 * Founder / BB / Benoit Becker / …" all on one column — exactly
 * what unstyled inline-content looks like.
 *
 * Tokens used: --sx-color-primary / --sx-color-bg / --sx-color-bg-alt
 * / --sx-color-ink / --sx-color-ink-soft / --sx-color-border /
 * --sx-radius-lg / --sx-section-y. Same palette the rest of the
 * sections ride, so the new blocks inherit the customer's brand
 * (coral + cream for perfumeszg) without per-template overrides.
 * ────────────────────────────────────────────────────────────── */

/* ── Hero centered (R.hero) ──────────────────────────────────── */
.sx-hero { position: relative; padding: 96px 0 80px; overflow: hidden; }
.sx-hero--centered .sx-hero__inner {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.sx-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.7;
}
.sx-hero--centered .sx-hero__inner > * { position: relative; z-index: 1; }
.sx-hero--centered .sx-h1 { margin-bottom: 16px; color: var(--sx-color-ink); }
.sx-hero--centered .sx-lead { margin-bottom: 28px; }
.sx-hero__ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── Team grid (R.team) ──────────────────────────────────────── */
.sx-team { padding: var(--sx-section-y) 0; background: var(--sx-color-bg); }
.sx-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.sx-team__card {
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-lg);
  border: 1px solid var(--sx-color-border);
  padding: 24px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-team__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.18);
}
.sx-team__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  display: block;
}
.sx-team__initials {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-color-bg-alt);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  font-family: var(--sx-font-display, var(--sx-font-body));
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.06em;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-team__name {
  font-size: 18px;
  color: var(--sx-color-ink);
  margin: 0 0 4px;
  font-weight: 600;
}
.sx-team__role {
  font-size: 13px;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sx-team__bio {
  font-size: 14px;
  color: var(--sx-color-ink-soft);
  line-height: 1.5;
  margin: 0;
}

/* ── Partners (R.partners — same visual as logos_strip) ──────── */
.sx-logos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
  align-items: center;
  justify-items: center;
}
.sx-logos__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  opacity: 0.72;
  transition: opacity 0.18s ease;
}
.sx-logos__cell:hover { opacity: 1; }
.sx-logos__img {
  max-height: 120px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.18s ease;
}
.sx-logos__cell:hover .sx-logos__img { filter: grayscale(0%); }
.sx-logos__name {
  font-size: 16px;
  color: var(--sx-color-ink-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* Monogram chip — visual fallback when a partner/press logo has no image,
   so the strip reads like real logos instead of bare text links. Global. */
.sx-logos__chip { display: inline-flex; align-items: center; gap: 10px; }
.sx-logos__mark {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  background: color-mix(in srgb, var(--sx-color-primary) 16%, transparent);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  font-family: var(--sx-font-display, inherit);
  font-weight: 700; font-size: 15px; line-height: 1;
}
.sx-logos__chip:nth-child(2n) .sx-logos__mark,
.sx-logos__cell:nth-child(3n) .sx-logos__mark { border-radius: 50%; }

/* ── CTA mid-page (R.cta_mid) ────────────────────────────────── */
.sx-cta-mid { padding: var(--sx-section-y) 0; }
.sx-cta-mid__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.sx-cta-mid .sx-eyebrow { margin-bottom: 12px; }
.sx-cta-mid .sx-h2 { margin-bottom: 16px; color: var(--sx-color-ink); }
.sx-cta-mid .sx-lead { margin-bottom: 28px; }
.sx-cta-mid__actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── cta_mid with bg media (video or image) ─────────────────────
   Full-bleed media hero variant. Activates when the section has a
   `video` or `image` prop. Same pattern as hero_split's transparent
   overlay: subtle dark scrim + white text + soft text-shadow for
   legibility over moving footage. */
.sx-cta-mid--has-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sx-color-inverse-bg);
  padding: calc(var(--sx-section-y) * 1.2) 0;
}
.sx-cta-mid__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.sx-cta-mid__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.6) 100%);
}
.sx-cta-mid--has-bg .sx-container { position: relative; z-index: 2; }
.sx-cta-mid--has-bg .sx-h2,
.sx-cta-mid--has-bg .sx-lead,
.sx-cta-mid--has-bg .sx-eyebrow {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.sx-cta-mid--has-bg .sx-eyebrow::before { background: var(--sx-color-accent-fill, var(--sx-color-accent)); }

/* UN FONDO CLARO CONSERVA SUS COLORES (31-ago-2026).
   Toda imagen de fondo en cta_mid recibía un velo negro al 55-60% y el texto
   forzado a blanco. Es lo correcto para una fotografía, y arruina una
   ilustración pastel pensada como banner: el rosa se vuelve barro. `bg_style:
   light` en la sección apaga el velo y devuelve la tinta del tema.

   ADITIVO Y OPCIONAL: sin `bg_style: light` no cambia absolutamente nada, y
   hoy NINGUNA plantilla usa cta_mid con imagen + light (comprobado sobre las
   195), así que ningún sitio publicado se mueve. */
.sx-bg--light .sx-cta-mid__overlay { background: none; }
.sx-bg--light .sx-cta-mid--has-bg .sx-h2,
.sx-bg--light .sx-cta-mid--has-bg .sx-lead,
.sx-bg--light .sx-cta-mid--has-bg .sx-eyebrow {
  color: var(--sx-color-ink) !important;
  text-shadow: none;
}
.sx-bg--light .sx-cta-mid--has-bg .sx-btn--ghost {
  color: var(--sx-color-ink) !important;
  border-color: var(--sx-color-border) !important;
}
.sx-cta-mid--has-bg .sx-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
}
.sx-cta-mid--has-bg .sx-btn--ghost:hover {
  background: #fff !important;
  color: var(--sx-color-ink) !important;
}

/* ── cta_mid variant: "centered" ──────────────────────────────── */
.sx-cta-mid--centered .sx-cta-mid__inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.sx-cta-mid--centered .sx-cta-mid__actions { justify-content: center; }

/* ── cta_mid variant: "split" ─────────────────────────────────── */
.sx-cta-mid--split .sx-cta-mid__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
  align-items: center;
  max-width: 1100px;
}
@media (min-width: 820px) {
  .sx-cta-mid--split .sx-cta-mid__inner {
    grid-template-columns: 1.3fr auto;
    gap: 48px;
  }
}
.sx-cta-mid--split .sx-h2 { margin-bottom: 8px; }
.sx-cta-mid--split .sx-lead { margin-bottom: 0; max-width: 56ch; }
.sx-cta-mid--split .sx-cta-mid__actions { justify-content: flex-start; }
.sx-cta-mid--split .sx-eyebrow,
.sx-cta-mid--split .sx-h2,
.sx-cta-mid--split .sx-lead { grid-column: 1; }
.sx-cta-mid--split .sx-cta-mid__actions { grid-column: 1; }
@media (min-width: 820px) {
  .sx-cta-mid--split .sx-cta-mid__actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* ── cta_mid variant: "gradient-banner" ───────────────────────── */
.sx-cta-mid--gradient-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sx-color-primary) 92%, #000) 0%, var(--sx-color-primary) 100%);
}
/* Type on this banner comes from the theme's own on_primary token, not a
   hardcoded white. The banner is painted in `primary`, and white only reads on
   a DARK primary — measured 2.83:1 for white over eagle-multiservice's cyan
   #00A8F0, while that template's authored on_primary scores 7.19 and was being
   ignored. The `#fff` fallback means a template that never authored on_primary
   renders exactly as it did before. */
.sx-cta-mid--gradient-banner .sx-h2,
.sx-cta-mid--gradient-banner .sx-lead,
.sx-cta-mid--gradient-banner .sx-eyebrow { color: var(--sx-color-on-primary, #fff); }
.sx-cta-mid--gradient-banner .sx-eyebrow::before {
  background: color-mix(in srgb, var(--sx-color-on-primary, #fff) 70%, transparent);
}
.sx-cta-mid--gradient-banner .sx-cta-mid__inner { text-align: center; }
/* The button inverts the banner — chip in on_primary, label in the brand.
   `primary-ink` was wrong here: it is the brand adjusted to read on the PAGE
   background, which on a dark page is a bright tint that then sits on a white
   chip. All eight templates using this variant measure >= 4.60:1 under the
   rule below. */
.sx-cta-mid--gradient-banner .sx-btn--primary {
  background: var(--sx-color-on-primary, #fff) !important;
  color: var(--sx-color-primary) !important;
}

/* ── cta_mid variant: "glass" ─────────────────────────────────── */
.sx-cta-mid--glass {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sx-color-primary) 18%, #fff) 0%, color-mix(in srgb, var(--sx-color-accent, var(--sx-color-primary)) 14%, #fff) 100%);
}
.sx-cta-mid--glass .sx-cta-mid__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 48px;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--sx-radius-lg, 18px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
}

/* ── cta_mid variant: "dark-premium" ──────────────────────────── */
.sx-cta-mid--dark-premium {
  background: #0a0a0a;
  padding: clamp(80px, 12vh, 140px) 0;
}
.sx-cta-mid--dark-premium .sx-cta-mid__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.sx-cta-mid--dark-premium .sx-eyebrow { color: rgba(255,255,255,0.55); }
.sx-cta-mid--dark-premium .sx-eyebrow::before { background: rgba(255,255,255,0.4); }
.sx-cta-mid--dark-premium .sx-h2 {
  color: #fff;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.sx-cta-mid--dark-premium .sx-lead { color: rgba(255,255,255,0.75); font-size: 17px; margin-bottom: 36px; }
.sx-cta-mid--dark-premium .sx-btn--primary {
  background: #fff !important;
  color: #0a0a0a !important;
  padding: 14px 32px !important;
}

/* ── cta_mid variant: "minimal-outline" ───────────────────────── */
.sx-cta-mid--minimal-outline { padding: clamp(80px, 14vh, 160px) 0; background: transparent; }
.sx-cta-mid--minimal-outline .sx-cta-mid__inner { text-align: center; max-width: 580px; margin: 0 auto; }
.sx-cta-mid--minimal-outline .sx-h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sx-cta-mid--minimal-outline .sx-lead { font-size: 14.5px; color: var(--sx-color-ink-soft); }
.sx-cta-mid--minimal-outline .sx-btn--primary {
  background: transparent !important;
  color: var(--sx-color-ink) !important;
  border: 1px solid var(--sx-color-ink) !important;
  padding: 12px 30px !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}
.sx-cta-mid--minimal-outline .sx-btn--primary:hover {
  background: var(--sx-color-ink) !important;
  color: #fff !important;
}

/* ── cta_mid variant: "stacked" ───────────────────────────────── */
.sx-cta-mid--stacked .sx-cta-mid__inner { text-align: center; max-width: 680px; margin: 0 auto; }
.sx-cta-mid--stacked .sx-h2 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  margin-bottom: 24px;
}
.sx-cta-mid--stacked .sx-lead { font-size: 16px; margin-bottom: 36px; }
.sx-cta-mid--stacked .sx-cta-mid__actions {
  flex-direction: column;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── cta_mid variant: "floating-card" ─────────────────────────── */
.sx-cta-mid--floating-card { background: var(--sx-color-bg-alt, #f7f7f8); padding: 48px 0;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-cta-mid--floating-card .sx-cta-mid__inner {
  background: var(--sx-color-surface, #fff);
  border-radius: var(--sx-radius-lg, 18px);
  padding: 56px 48px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 24px 56px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-cta-mid--floating-card .sx-cta-mid__inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 80px rgba(0,0,0,0.14), 0 6px 18px rgba(0,0,0,0.06);
}

/* ── cta_mid variant: "asymmetrical" ──────────────────────────── */
.sx-cta-mid--asymmetrical .sx-cta-mid__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1100px;
  align-items: end;
  text-align: left;
  position: relative;
}
@media (min-width: 820px) {
  .sx-cta-mid--asymmetrical .sx-cta-mid__inner {
    grid-template-columns: 6fr 4fr;
    gap: 64px;
  }
}
.sx-cta-mid--asymmetrical .sx-h2 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.sx-cta-mid--asymmetrical .sx-lead { margin-bottom: 0; max-width: 44ch; }
.sx-cta-mid--asymmetrical .sx-cta-mid__actions {
  justify-content: flex-start;
  padding-bottom: 8px;
}
@media (min-width: 820px) {
  .sx-cta-mid--asymmetrical .sx-cta-mid__actions {
    margin-left: auto;
    padding-left: 32px;
    border-left: 1px solid var(--sx-color-border, rgba(0,0,0,0.1));
    align-self: end;
  }
}

/* ── cta_mid variant: "neon-glow" ─────────────────────────────── */
.sx-cta-mid--neon-glow {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sx-color-primary) 30%, #0b0b14) 0%, #0b0b14 70%);
}
.sx-cta-mid--neon-glow .sx-cta-mid__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.sx-cta-mid--neon-glow .sx-h2 {
  color: #fff;
  text-shadow: 0 0 24px color-mix(in srgb, var(--sx-color-primary) 70%, transparent);
}
.sx-cta-mid--neon-glow .sx-lead { color: rgba(255,255,255,0.75); }
.sx-cta-mid--neon-glow .sx-eyebrow {
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  text-shadow: 0 0 12px color-mix(in srgb, var(--sx-color-primary) 80%, transparent);
}
.sx-cta-mid--neon-glow .sx-eyebrow::before { background: var(--sx-color-primary-fill, var(--sx-color-primary)); box-shadow: 0 0 10px var(--sx-color-primary); }
.sx-cta-mid--neon-glow .sx-btn--primary {
  background: var(--sx-color-primary-fill, var(--sx-color-primary)) !important;
  box-shadow: 0 0 32px color-mix(in srgb, var(--sx-color-primary) 60%, transparent), 0 0 8px color-mix(in srgb, var(--sx-color-primary) 90%, transparent) inset !important;
  border: 1px solid color-mix(in srgb, var(--sx-color-primary) 60%, #fff) !important;
}

/* ── cta_mid variant: "editorial" ─────────────────────────────── */
.sx-cta-mid--editorial { padding: clamp(80px, 14vh, 160px) 0; }
.sx-cta-mid--editorial .sx-cta-mid__inner { max-width: 1100px; text-align: center; margin: 0 auto; }
.sx-cta-mid--editorial .sx-h2 {
  font-family: var(--sx-font-display);
  font-size: clamp(48px, 9vw, 120px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
}
.sx-cta-mid--editorial .sx-lead { max-width: 520px; margin: 0 auto 36px; font-size: 16px; }

/* ── cta_mid variant: "fullscreen" ────────────────────────────── */
.sx-cta-mid--fullscreen { min-height: 100vh; display: flex; align-items: center; padding: 0; }
.sx-cta-mid--fullscreen .sx-cta-mid__inner { text-align: center; max-width: 920px; margin: 0 auto; width: 100%; }
.sx-cta-mid--fullscreen .sx-h2 {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.sx-cta-mid--fullscreen .sx-lead { font-size: clamp(16px, 1.8vw, 20px); max-width: 580px; margin: 0 auto 44px; }
.sx-cta-mid--fullscreen .sx-btn--primary { padding: 16px 40px !important; font-size: 16px !important; }

/* ── cta_mid variant: "animated-gradient" ─────────────────────── */
.sx-cta-mid--animated-gradient {
  background: linear-gradient(
    135deg,
    var(--sx-color-primary) 0%,
    color-mix(in srgb, var(--sx-color-primary) 50%, var(--sx-color-accent, var(--sx-color-primary))) 50%,
    var(--sx-color-primary) 100%
  );
  background-size: 200% 200%;
  animation: sx-cta-gradient 14s ease-in-out infinite;
}
@keyframes sx-cta-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-cta-mid--animated-gradient { animation: none; }
}
.sx-cta-mid--animated-gradient .sx-cta-mid__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.sx-cta-mid--animated-gradient .sx-h2,
.sx-cta-mid--animated-gradient .sx-lead,
.sx-cta-mid--animated-gradient .sx-eyebrow { color: #fff; }
.sx-cta-mid--animated-gradient .sx-eyebrow::before { background: rgba(255,255,255,0.75); }
.sx-cta-mid--animated-gradient .sx-btn--primary {
  background: #fff !important;
  color: var(--sx-color-primary-ink, var(--sx-color-primary)) !important;
}

/* ── cta_mid variant: "luxury-brand" ──────────────────────────── */
.sx-cta-mid--luxury-brand { padding: clamp(100px, 16vh, 180px) 0; background: var(--sx-color-bg, #fafaf8); }
.sx-cta-mid--luxury-brand .sx-cta-mid__inner { text-align: center; max-width: 620px; margin: 0 auto; }
.sx-cta-mid--luxury-brand .sx-eyebrow {
  font-family: var(--sx-font-display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.sx-cta-mid--luxury-brand .sx-h2 {
  font-family: var(--sx-font-display);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.sx-cta-mid--luxury-brand .sx-lead {
  font-style: italic;
  color: var(--sx-color-ink-soft);
  max-width: 460px;
  margin: 0 auto 44px;
  font-size: 15px;
  line-height: 1.7;
}
.sx-cta-mid--luxury-brand .sx-btn--primary {
  background: transparent !important;
  color: var(--sx-color-ink) !important;
  border: 1px solid var(--sx-color-ink) !important;
  padding: 14px 40px !important;
  border-radius: 0 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
.sx-cta-mid--luxury-brand .sx-btn--primary:hover {
  background: var(--sx-color-ink) !important;
  color: #fff !important;
}

/* ── FAQ accordion (R.faq) ───────────────────────────────────── */
.sx-faq { padding: var(--sx-section-y) 0; background: var(--sx-color-bg); }
.sx-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sx-faq__item {
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg);
  padding: 4px 20px;
  transition: border-color 0.18s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-faq__item[open] { border-color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--sx-color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sx-faq__q::-webkit-details-marker { display: none; }
.sx-faq__q::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  transition: transform 0.18s ease;
}
.sx-faq__item[open] .sx-faq__q::after { content: "−"; }
.sx-faq__a {
  padding: 4px 0 18px;
  color: var(--sx-color-ink-soft);
  font-size: 15px;
  line-height: 1.65;
}
.sx-faq__q-text { flex: 1; }
.sx-faq__num {
  font-family: var(--sx-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  margin-right: 14px;
}

/* ── faq variant: "two-column" ────────────────────────────────── */
.sx-faq--two-column .sx-faq__list {
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
@media (max-width: 720px) { .sx-faq--two-column .sx-faq__list { grid-template-columns: 1fr; } }

/* ── faq variant: "boxed-cards" ───────────────────────────────── */
.sx-faq--boxed-cards .sx-faq__list { gap: 16px; max-width: 880px; }
.sx-faq--boxed-cards .sx-faq__item {
  padding: 4px 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  border-radius: var(--sx-radius-lg, 14px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sx-faq--boxed-cards .sx-faq__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.09);
}

/* ── faq variant: "numbered" ──────────────────────────────────── */
.sx-faq--numbered .sx-faq__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: 0;
  padding: 8px 0;
}
.sx-faq--numbered .sx-faq__item:last-child { border-bottom: none; }
.sx-faq--numbered .sx-faq__num {
  font-size: 28px;
  margin-right: 22px;
  font-weight: 800;
  opacity: 0.45;
}

/* ── faq variant: "split-aside" ───────────────────────────────── */
.sx-faq--split-aside .sx-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 880px) {
  .sx-faq--split-aside .sx-container {
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
  }
  .sx-faq--split-aside .sx-section__head { text-align: left; }
}
.sx-faq--split-aside .sx-faq__list { max-width: none; margin: 0; }

/* ── faq variant: "chat-bubble" ─────────────────────────────────
   Asymmetric indents (15% left on Q, 15% right on A) are essential
   — the visible gap is what reads as "conversation" between two
   speakers. Don't remove them. */
.sx-faq--chat-bubble .sx-faq__list { max-width: 720px; gap: 18px; }
.sx-faq--chat-bubble .sx-faq__item {
  background: transparent;
  border: none;
  padding: 0;
}
.sx-faq--chat-bubble .sx-faq__q {
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
  border-radius: 20px 20px 4px 20px;
  padding: 14px 20px;
  margin-left: 15%;
  font-weight: 500;
}
.sx-faq--chat-bubble .sx-faq__q::after { color: rgba(255,255,255,0.85); }
.sx-faq--chat-bubble .sx-faq__a {
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: 4px 20px 20px 20px;
  padding: 14px 20px;
  margin-right: 15%;
  margin-top: 10px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
/* Marble bg_style decorates ALL .sx-faq__item with a white translucent
   card by default (line ~4460). For chat-bubble layout we want the
   item wrapper invisible so only the green Q bubble + white A bubble
   show. Specificity-bumped to beat the marble selector. */
.sx-section-wrap.sx-bg--marble > section.sx-faq--chat-bubble .sx-faq__item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── faq variant: "minimal-inline" ────────────────────────────── */
.sx-faq--minimal-inline .sx-faq__list { max-width: 760px; gap: 0; }
.sx-faq--minimal-inline .sx-faq__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.06));
  border-radius: 0;
  padding: 6px 0;
}
.sx-faq--minimal-inline .sx-faq__item:last-child { border-bottom: none; }
.sx-faq--minimal-inline .sx-faq__q {
  padding: 20px 0;
  font-size: 15px;
  font-weight: 500;
}
.sx-faq--minimal-inline .sx-faq__q::after {
  content: "→";
  font-size: 16px;
  transition: transform 0.25s ease;
}
.sx-faq--minimal-inline .sx-faq__item[open] .sx-faq__q::after {
  content: "→";
  transform: rotate(90deg);
}

/* ── faq variant: "glassmorphism" ─────────────────────────────── */
.sx-faq--glassmorphism .sx-faq__list { gap: 14px; max-width: 880px; }
.sx-faq--glassmorphism .sx-faq__item {
  background: color-mix(in srgb, var(--sx-color-surface, #fff) 50%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--sx-color-border, rgba(0,0,0,0.08)) 70%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.4);
  padding: 4px 24px;
}

/* ── faq variant: "masonry" ───────────────────────────────────── */
.sx-faq--masonry .sx-faq__list {
  column-count: 2;
  column-gap: 20px;
  display: block;
  max-width: 1100px;
}
.sx-faq--masonry .sx-faq__item {
  break-inside: avoid;
  margin-bottom: 14px;
  display: block;
}
@media (max-width: 720px) { .sx-faq--masonry .sx-faq__list { column-count: 1; } }

/* ── faq variant: "hover-reveal" ──────────────────────────────── */
.sx-faq--hover-reveal .sx-faq__item {
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.sx-faq--hover-reveal .sx-faq__item:hover {
  background: color-mix(in srgb, var(--sx-color-primary) 6%, var(--sx-color-surface));
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-faq--hover-reveal .sx-faq__a {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding-bottom 0.3s ease;
}
.sx-faq--hover-reveal .sx-faq__item:hover .sx-faq__a,
.sx-faq--hover-reveal .sx-faq__item[open] .sx-faq__a {
  max-height: 400px;
  opacity: 1;
  padding-bottom: 18px;
}

/* ── faq variant: "timeline" ──────────────────────────────────── */
.sx-faq--timeline .sx-faq__list {
  position: relative;
  max-width: 760px;
  padding-left: 36px;
}
.sx-faq--timeline .sx-faq__list::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--sx-color-border, rgba(0,0,0,0.12));
}
.sx-faq--timeline .sx-faq__item {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: 0;
  padding: 8px 0;
}
.sx-faq--timeline .sx-faq__item::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sx-color-surface, #fff);
  border: 2px solid var(--sx-color-primary);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-faq--timeline .sx-faq__item[open]::before { background: var(--sx-color-primary-fill, var(--sx-color-primary)); }
.sx-faq--timeline .sx-faq__num { display: none; }

/* ── faq variant: "spotlight-active" ──────────────────────────── */
.sx-faq--spotlight-active .sx-faq__list { gap: 8px; }
.sx-faq--spotlight-active .sx-faq__item {
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.sx-faq--spotlight-active .sx-faq__item:hover,
.sx-faq--spotlight-active .sx-faq__item[open] {
  opacity: 1;
  transform: scale(1.01);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
}

/* ── faq variant: "stacked-panels" ────────────────────────────── */
.sx-faq--stacked-panels .sx-faq__list { max-width: none; gap: 0; }
.sx-faq--stacked-panels .sx-faq__item {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  padding: 0 clamp(20px, 6vw, 60px);
  background: transparent;
}
.sx-faq--stacked-panels .sx-faq__item:first-child {
  border-top: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
}
.sx-faq--stacked-panels .sx-faq__q {
  padding: 32px 0;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  font-family: var(--sx-font-display);
}
.sx-faq--stacked-panels .sx-faq__q::after { font-size: 28px; }
.sx-faq--stacked-panels .sx-faq__a {
  font-size: 16px;
  padding: 8px 0 32px;
  max-width: 720px;
}
.sx-faq--stacked-panels .sx-faq__item[open] {
  background: color-mix(in srgb, var(--sx-color-primary) 4%, transparent);
}

/* ── faq variant: "floating-cards" ────────────────────────────── */
.sx-faq--floating-cards .sx-faq__list { gap: 18px; max-width: 880px; }
.sx-faq--floating-cards .sx-faq__item {
  background: var(--sx-color-surface, #fff);
  border: none;
  padding: 8px 28px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  border-radius: var(--sx-radius-lg, 16px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-faq--floating-cards .sx-faq__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

/* ── faq variant: "centered-premium" ──────────────────────────── */
.sx-faq--centered-premium { padding: clamp(80px, 12vh, 140px) 0; }
.sx-faq--centered-premium .sx-section__head { margin-bottom: 64px; }
.sx-faq--centered-premium .sx-faq__list { max-width: 680px; gap: 4px; }
.sx-faq--centered-premium .sx-faq__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.06));
  border-radius: 0;
  padding: 14px 0;
}
.sx-faq--centered-premium .sx-faq__q {
  padding: 24px 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.sx-faq--centered-premium .sx-faq__a {
  font-size: 14.5px;
  line-height: 1.8;
  padding: 0 0 24px;
}

/* ── Rating summary (R.rating_summary) ───────────────────────── */
.sx-rating-summary { padding: var(--sx-section-y) 0; }
.sx-rating-summary__inner { text-align: center; max-width: 480px; margin: 0 auto; }
.sx-rating-summary__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}
.sx-rating-summary__value {
  font-family: var(--sx-font-display, var(--sx-font-body));
  font-size: 64px;
  font-weight: 700;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  line-height: 1;
}
.sx-rating-summary__max {
  font-size: 22px;
  color: var(--sx-color-ink-soft);
}
.sx-rating-summary__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: 28px;
  color: var(--sx-color-border);
  margin: 0 0 12px;
}
.sx-rating-summary__stars .is-on { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-rating-summary__count {
  font-size: 14px;
  color: var(--sx-color-ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .sx-hero { padding: 64px 0 56px; }
  .sx-team__grid { gap: 18px; }
  .sx-team__card { padding: 20px; }
  .sx-team__photo, .sx-team__initials { width: 96px; height: 96px; font-size: 26px; }
  .sx-rating-summary__value { font-size: 48px; }
}

/* ── Universal section DESIGN options ─────────────────────────────────
   Set per-section in the builder's "Design" tab (bg_style / spacing /
   content_width). Applied at .sx-section-wrap and targeting the inner
   <section> so they cleanly override each renderer's own background,
   padding and container width. "default"/"normal" add no class. */
.sx-section-wrap.sx-bg--soft    > section { background: var(--sx-color-bg-alt) !important;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-section-wrap.sx-bg--surface > section { background: var(--sx-color-surface) !important;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}

/* Re-point the INK TOKENS inside a band that swaps the surface.
   Redefining the variables — rather than repainting each element — is what
   makes this hold: all 181 rules that read `var(--sx-color-ink)` inside the
   section inherit the corrected value automatically, whatever their
   specificity. Repainting `h1..p` by hand missed anything with its own
   explicit `color:` (the contact card's VALUES stayed invisible while its
   LABELS were fine).
   Why it is needed: a template can author a light `bg` beside a DARK
   `bg_alt`, so the theme resolves as light (ink dark) and every
   soft/neutral/dots band then paints dark-on-dark — measured 1.04:1 on
   auto-repair. `ink-on-alt` equals `ink` on coherent palettes, so this is a
   no-op for the other ~160 templates.
   Panels that own their surface (advantage, cta_mid, the secondary button)
   read `--sx-color-inverse-*`, never `ink`, so they are unaffected.
   `sx-bg--dark` and `--gradient` already repaint their own text. */
.sx-section-wrap.sx-bg--soft    > section,
.sx-section-wrap.sx-bg--neutral > section,
.sx-section-wrap.sx-bg--dots    > section {
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  /* Re-declare `color` HERE, not just the variables. Headings and most copy
     never set a colour of their own — they inherit it from <body>, and CSS
     inherits the COMPUTED value, not the var() reference. So redefining the
     token alone left every h2 painted with the value body resolved at :root
     (measured: 105 headings still invisible). Re-declaring makes the section
     re-resolve, and everything inheriting from it follows. */
  color: var(--sx-color-ink);
}
.sx-section-wrap.sx-bg--surface > section {
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-section-wrap.sx-bg--primary > section { background: color-mix(in srgb, var(--sx-color-primary) 10%, transparent) !important; }
.sx-section-wrap.sx-bg--dark    > section { background: #14151a !important; }
.sx-section-wrap.sx-bg--dark > section,
.sx-section-wrap.sx-bg--dark > section h1,
.sx-section-wrap.sx-bg--dark > section h2,
.sx-section-wrap.sx-bg--dark > section h3,
.sx-section-wrap.sx-bg--dark > section h4,
.sx-section-wrap.sx-bg--dark > section p,
.sx-section-wrap.sx-bg--dark > section li,
.sx-section-wrap.sx-bg--dark > section blockquote,
.sx-section-wrap.sx-bg--dark > section summary,
.sx-section-wrap.sx-bg--dark > section a:not(.sx-btn) { color: #f3f4f6 !important; }
.sx-section-wrap.sx-bg--dark > section .sx-eyebrow { color: #c7cbe0 !important; }

/* New parametric bg variants — all driven by theme tokens so each
   site's colors flow through automatically. Authored in JSON via the
   `design.bg_style` prop, exposed in the Design tab of both builder
   and editor schemas.
   - accent:   soft tint using --sx-color-accent (10% mix)
   - gradient: primary → primary-dark, light text override
   - dots:     accent-tinted dots scattered over bg_alt
   Light/Spanish-editor alias `light` keeps the older neutral. */
.sx-section-wrap.sx-bg--light   > section { background: var(--sx-color-bg) !important; }
.sx-section-wrap.sx-bg--neutral > section { background: var(--sx-color-bg-alt) !important;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-section-wrap.sx-bg--primary-tint > section { background: color-mix(in srgb, var(--sx-color-primary) 8%, transparent) !important; }

.sx-section-wrap.sx-bg--accent  > section {
  background: color-mix(in srgb, var(--sx-color-accent) 10%, var(--sx-color-bg)) !important;
  position: relative;
}
.sx-section-wrap.sx-bg--accent  > section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sx-color-accent), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.sx-section-wrap.sx-bg--gradient > section {
  background: linear-gradient(135deg, var(--sx-color-primary) 0%, var(--sx-color-primary-dark) 100%) !important;
  position: relative;
  overflow: hidden;
}
.sx-section-wrap.sx-bg--gradient > section,
.sx-section-wrap.sx-bg--gradient > section h1,
.sx-section-wrap.sx-bg--gradient > section h2,
.sx-section-wrap.sx-bg--gradient > section h3,
.sx-section-wrap.sx-bg--gradient > section h4,
.sx-section-wrap.sx-bg--gradient > section p,
.sx-section-wrap.sx-bg--gradient > section li { color: var(--sx-color-on-primary) !important; }
.sx-section-wrap.sx-bg--gradient > section .sx-eyebrow { color: color-mix(in srgb, var(--sx-color-on-primary) 78%, transparent) !important; }
.sx-section-wrap.sx-bg--gradient > section .sx-eyebrow::before { background: var(--sx-color-on-primary) !important; opacity: 0.65; }
/* Buttons-on-gradient: the band is primary-coloured, so a button that pops
   must be filled with the primary's CONTRAST (on-primary) and labelled with
   primary itself — guaranteed ≥4.5 against the band whether primary is a
   light yellow (→ dark pill, yellow label) or a dark navy (→ light pill,
   navy label). Do NOT use --sx-color-ink here: cta_mid also carries
   .sx-section--alt, which re-points --sx-color-ink to ink-on-alt (a LIGHT
   value on a dark bg_alt) — that made the pill light-on-light and the label
   vanish (auto-repair "technical-dark"). on-primary/primary are not
   re-scoped by --alt, so they stay correct. */
.sx-section-wrap.sx-bg--gradient > section .sx-btn--primary {
  background: var(--sx-color-on-primary) !important;
  color: var(--sx-color-primary) !important;
  border-color: var(--sx-color-on-primary) !important;
}
.sx-section-wrap.sx-bg--gradient > section .sx-btn--primary:hover {
  background: color-mix(in srgb, var(--sx-color-on-primary) 85%, black) !important;
  color: var(--sx-color-primary) !important;
}
.sx-section-wrap.sx-bg--gradient > section .sx-btn--ghost {
  color: var(--sx-color-on-primary) !important;
  border-color: color-mix(in srgb, var(--sx-color-on-primary) 50%, transparent) !important;
}
.sx-section-wrap.sx-bg--gradient > section .sx-btn--ghost:hover {
  background: var(--sx-color-on-primary) !important;
  color: var(--sx-color-primary-ink, var(--sx-color-primary)) !important;
  border-color: var(--sx-color-on-primary) !important;
}
/* Same idea for sx-bg--primary (tinted) — primary buttons on a primary
   tint also lose contrast. Borderline-readable but worth tightening. */
.sx-section-wrap.sx-bg--primary > section .sx-btn--primary {
  background: var(--sx-color-ink) !important;
  color: var(--sx-color-bg) !important;
  border-color: var(--sx-color-ink) !important;
}
.sx-section-wrap.sx-bg--primary > section .sx-btn--primary:hover {
  background: color-mix(in srgb, var(--sx-color-ink) 78%, white) !important;
}

.sx-section-wrap.sx-bg--dots > section {
  background-color: var(--sx-color-bg-alt) !important;
  background-image: radial-gradient(color-mix(in srgb, var(--sx-color-accent) 38%, transparent) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: 0 0;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}

.sx-section-wrap.sx-bg--marble > section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(249,248,245,0.985) 100%) !important;
}
.sx-section-wrap.sx-bg--marble > section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.97) 0%, transparent 58%),
    radial-gradient(112% 82% at 100% 100%, rgba(255,255,255,0.86) 0%, transparent 56%),
    radial-gradient(78% 64% at 86% 12%, rgba(221,224,228,0.12) 0%, transparent 60%),
    linear-gradient(118deg, transparent 0 22%, rgba(162,168,174,0.06) 24%, rgba(255,255,255,0) 29%, transparent 100%),
    linear-gradient(32deg, transparent 0 54%, rgba(211,204,193,0.08) 56%, rgba(255,255,255,0) 61%, transparent 100%);
  opacity: 0.94;
  pointer-events: none;
}
.sx-section-wrap.sx-bg--marble > section::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(142deg, transparent 0 60%, rgba(148,154,160,0.055) 62%, rgba(255,255,255,0) 67%, transparent 100%),
    linear-gradient(16deg, transparent 0 34%, rgba(220,214,204,0.06) 36%, rgba(255,255,255,0) 41%, transparent 100%);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.sx-section-wrap.sx-bg--marble > section > * {
  position: relative;
  z-index: 1;
}
.sx-section-wrap.sx-bg--marble > section .sx-card,
.sx-section-wrap.sx-bg--marble > section .sx-pricing__card,
.sx-section-wrap.sx-bg--marble > section .sx-test-card,
.sx-section-wrap.sx-bg--marble > section .sx-faq__item,
.sx-section-wrap.sx-bg--marble > section .sx-gallery__item,
.sx-section-wrap.sx-bg--marble > section .sx-contact__map {
  background: linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.95) 100%);
  border-color: color-mix(in srgb, var(--sx-color-border) 88%, white);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.92) inset,
    0 12px 32px rgba(17,22,27,0.06);
  -webkit-backdrop-filter: saturate(145%) blur(12px);
  backdrop-filter: saturate(145%) blur(12px);
}
.sx-section-wrap.sx-bg--marble > section .sx-area__cities li,
.sx-section-wrap.sx-bg--marble > section .sx-stylist__specs li {
  background: rgba(255,255,255,0.74);
  border: 1px solid color-mix(in srgb, var(--sx-color-border) 82%, white);
}
.sx-section-wrap.sx-bg--marble > section .sx-contact__item-icon {
  background: color-mix(in srgb, var(--sx-color-primary) 10%, white);
  border: 1px solid color-mix(in srgb, var(--sx-color-border) 82%, white);
}
html.sx-page-bg-marble .sx-section-wrap.sx-bg--marble > section,
body.sx-page-bg-marble .sx-section-wrap.sx-bg--marble > section {
  background: rgba(255,255,255,0.64) !important;
  -webkit-backdrop-filter: saturate(138%) blur(6px);
  backdrop-filter: saturate(138%) blur(6px);
}
html.sx-page-bg-marble .sx-section-wrap.sx-bg--marble > section::before,
html.sx-page-bg-marble .sx-section-wrap.sx-bg--marble > section::after,
body.sx-page-bg-marble .sx-section-wrap.sx-bg--marble > section::before,
body.sx-page-bg-marble .sx-section-wrap.sx-bg--marble > section::after {
  display: none;
}

.sx-section-wrap.sx-sp--compact  > section { padding-top: 40px !important; padding-bottom: 40px !important; }
.sx-section-wrap.sx-sp--spacious > section { padding-top: 128px !important; padding-bottom: 128px !important; }

.sx-section-wrap.sx-w--narrow > section .sx-container { max-width: 820px; }
.sx-section-wrap.sx-w--wide   > section .sx-container { max-width: 1320px; }

/* ── Gallery ─────────────────────────────────────────────────────────── */
.sx-gallery { padding: var(--sx-section-y) 0; background: var(--sx-color-bg); }
.sx-gallery__grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.sx-gallery__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
/* cols-3 is the base rule above; 4 and 5 need their own. GalleryProps.columns
   allows 2|3|4|5 — cols-5 was MISSING, so a 5-column gallery silently rendered
   as 3 while the mosaic gate did its math on 5. Keep this set in sync with the
   Literal in backend/schema/sections_v2.py. */
.sx-gallery__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.sx-gallery__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.sx-gallery__item {
  margin: 0; border-radius: var(--sx-radius, 12px); overflow: hidden;
  aspect-ratio: 1 / 1; position: relative; background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sx-gallery__item:hover .sx-gallery__img { transform: scale(1.05); }
/* Empty image slot — shown when a gallery item has no photo yet. Keeps
   the tile from rendering as a blank gray box and stays clickable in the
   builder (data-cms-asset) so the user can upload into it. */
.sx-gallery__ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--sx-color-bg-alt, #eceef3);
  cursor: pointer; transition: none;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-gallery__item:hover .sx-gallery__ph { transform: none; }
.sx-gallery__ph svg { width: 30%; height: 30%; max-width: 64px; max-height: 64px; opacity: .55; }
.sx-gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
  font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6));
}
/* Mosaic: the FIRST tile spans 2×2 for a magazine feel.
   Two things keep this from breaking (both were bugs, fixed 2026-07-29):
   • Only the first tile is promoted. The old `nth-child(5n+1)` added a second
     2×2 tile from the 6th photo on, which no column count can close.
   • NO `aspect-ratio: auto` on the big tile. Without a ratio its height came
     from the image itself, so a PORTRAIT photo stretched past its two rows and
     tore a vertical hole in the grid. Inheriting the 1/1 ratio makes the tile
     exactly 2 columns + 1 gap wide AND tall — it lands flush on the square
     tiles beside it, at any container width. `object-fit: cover` (on
     .sx-gallery__img) handles whatever shape the owner's photo is.
   The renderer only emits this class when (N + 3) % cols === 0, so the last
   row is always full; otherwise it ships the uniform grid. */
.sx-gallery__grid--mosaic { grid-auto-flow: dense; }
.sx-gallery__grid--mosaic .sx-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 768px) {
  .sx-gallery__grid, .sx-gallery__grid--cols-3, .sx-gallery__grid--cols-4,
  .sx-gallery__grid--cols-5 { grid-template-columns: repeat(2, 1fr); }
  /* 2 columns on phones: the big tile becomes a full-width square banner and
     the rest flow 2-up under it — still no holes. */
  .sx-gallery__grid--mosaic .sx-gallery__item:first-child { grid-column: span 2; grid-row: auto; }
}

/* ── Slider gallery variant — layout="slider" ─────────────────────
   Editorial wide-bleed strip: header on top splits title (left) from
   lead text + prev/next arrows (right), then a horizontal rail of
   images that bleed past the container edges with scroll-snap. */
.sx-gallery--slider .sx-gallery__split-head {
  display: flex;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 32px;
}
.sx-gallery--slider .sx-gallery__split-title { flex: 1 1 40%; }
.sx-gallery--slider .sx-gallery__split-title .sx-h2 { margin: 0; }
.sx-gallery--slider .sx-gallery__split-right {
  flex: 1 1 60%;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  justify-content: space-between;
}
.sx-gallery--slider .sx-gallery__split-right .sx-lead {
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.sx-gallery__nav { display: flex; gap: 10px; flex-shrink: 0; }
.sx-gallery__arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--sx-color-border);
  background: transparent;
  color: var(--sx-color-ink);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sx-gallery__arrow:hover {
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
  color: var(--sx-color-on-primary);
}
/* Full-bleed rail wrapper extends past the container so the strip
   reads as a wide cinematic scroller. Overflow hidden on outer; the
   inner grid scrolls horizontally. */
.sx-gallery__rail-wrap {
  width: 100%;
  overflow: hidden;
}
.sx-gallery__grid--slider {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 24px;
  padding: 4px 24px 16px;
  scrollbar-width: none;
}
.sx-gallery__grid--slider::-webkit-scrollbar { display: none; }
.sx-gallery__grid--slider .sx-gallery__item {
  flex: 0 0 auto;
  /* Image cards: ~30% of viewport per tile so 3-3.5 visible at once
     with the next one peeking at the edge. Aspect ratio preserved
     by the inner img object-fit:cover but the tile itself sizes
     to a portrait 4:5 frame for visual rhythm. */
  width: clamp(260px, 30vw, 460px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
}
@media (max-width: 768px) {
  .sx-gallery--slider .sx-gallery__split-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sx-gallery--slider .sx-gallery__split-right { flex-direction: column; align-items: flex-start; }
  .sx-gallery__grid--slider .sx-gallery__item { width: 78vw; aspect-ratio: 3 / 4; }
}

/* ── gallery variant: "stack" ─────────────────────────────────── */
.sx-gallery__grid--stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  grid-template-columns: none;
}
.sx-gallery__grid--stack .sx-gallery__item {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--sx-radius-lg, 12px);
  overflow: hidden;
}
.sx-gallery__grid--stack .sx-gallery__item:nth-child(odd) { aspect-ratio: 16 / 7; }
@media (max-width: 720px) {
  .sx-gallery__grid--stack .sx-gallery__item,
  .sx-gallery__grid--stack .sx-gallery__item:nth-child(odd) { aspect-ratio: 4 / 3; }
}

/* ── gallery variant: "asymmetric" ────────────────────────────── */
/* Repeats every 4 items, tiles perfectly in a 6-col grid with no gaps:
   [1 1 1 1 2 2]
   [1 1 1 1 2 2]
   [3 3 4 4 4 4]
   [3 3 4 4 4 4]
   item1=4×2 big, item2=2×2, item3=2×2, item4=4×2 big — alternates sides. */
.sx-gallery__grid--asymmetric {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 160px;
  gap: 14px;
}
.sx-gallery__grid--asymmetric .sx-gallery__item { aspect-ratio: auto; }
.sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n + 1) { grid-column: span 4; grid-row: span 2; }
.sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n + 2) { grid-column: span 2; grid-row: span 2; }
.sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n + 3) { grid-column: span 2; grid-row: span 2; }
.sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n)     { grid-column: span 4; grid-row: span 2; }
@media (max-width: 900px) {
  .sx-gallery__grid--asymmetric { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; }
  .sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n + 1),
  .sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n)     { grid-column: span 4; grid-row: span 2; }
  .sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n + 2),
  .sx-gallery__grid--asymmetric .sx-gallery__item:nth-child(4n + 3) { grid-column: span 2; grid-row: span 2; }
}

/* ── gallery variant: "masonry" ───────────────────────────────── */
.sx-gallery__grid--masonry {
  column-count: 4;
  column-gap: 14px;
  display: block;
  grid-template-columns: none;
}
.sx-gallery__grid--masonry .sx-gallery__item {
  break-inside: avoid;
  margin-bottom: 14px;
  width: 100%;
  aspect-ratio: auto;
  display: block;
  border-radius: var(--sx-radius-md, 10px);
  overflow: hidden;
}
.sx-gallery__grid--masonry .sx-gallery__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: var(--sx-masonry-ratio, 3/4);
}
.sx-gallery__grid--masonry .sx-gallery__item:nth-child(3n)   { --sx-masonry-ratio: 4/5; }
.sx-gallery__grid--masonry .sx-gallery__item:nth-child(5n)   { --sx-masonry-ratio: 1/1; }
.sx-gallery__grid--masonry .sx-gallery__item:nth-child(7n)   { --sx-masonry-ratio: 4/3; }
.sx-gallery__grid--masonry .sx-gallery__item:nth-child(4n+1) { --sx-masonry-ratio: 2/3; }
@media (max-width: 1100px) { .sx-gallery__grid--masonry { column-count: 3; } }
@media (max-width: 720px)  { .sx-gallery__grid--masonry { column-count: 2; } }

/* ── gallery variant: "bento" ─────────────────────────────────── */
/* 12-col grid, tiles perfectly without gaps for 8 items:
   Rows 1-3:  [1×6×3 | 2×3×3 | 3×3×3]   (big featured + 2 tall)
   Rows 4-5:  [4×4×2 | 5×4×2 | 6×4×2]   (three equals)
   Rows 6-7:  [7×6×2 | 8×6×2]           (two wides) */
.sx-gallery--bento .sx-gallery__rail-wrap { padding-inline: clamp(12px, 3vw, 32px); }
.sx-gallery__grid--bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 140px;
  gap: 14px;
}
.sx-gallery__grid--bento .sx-gallery__item { aspect-ratio: auto; grid-column: span 4; grid-row: span 2; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(1)  { grid-column: span 6; grid-row: span 3; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(2)  { grid-column: span 3; grid-row: span 3; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(3)  { grid-column: span 3; grid-row: span 3; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(4)  { grid-column: span 4; grid-row: span 2; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(5)  { grid-column: span 4; grid-row: span 2; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(6)  { grid-column: span 4; grid-row: span 2; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(7)  { grid-column: span 6; grid-row: span 2; }
.sx-gallery__grid--bento .sx-gallery__item:nth-child(8)  { grid-column: span 6; grid-row: span 2; }
@media (max-width: 900px) {
  .sx-gallery__grid--bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; }
  .sx-gallery__grid--bento .sx-gallery__item,
  .sx-gallery__grid--bento .sx-gallery__item:nth-child(1),
  .sx-gallery__grid--bento .sx-gallery__item:nth-child(7),
  .sx-gallery__grid--bento .sx-gallery__item:nth-child(8) { grid-column: span 6; grid-row: span 2; }
  .sx-gallery__grid--bento .sx-gallery__item:nth-child(2),
  .sx-gallery__grid--bento .sx-gallery__item:nth-child(3) { grid-column: span 3; grid-row: span 2; }
}

/* ── gallery variant: "polaroid" ──────────────────────────────── */
.sx-gallery__grid--polaroid {
  gap: 36px;
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) { .sx-gallery__grid--polaroid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .sx-gallery__grid--polaroid { grid-template-columns: 1fr !important; } }
.sx-gallery__grid--polaroid .sx-gallery__item {
  background: #fff;
  padding: 22px 22px 64px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  aspect-ratio: auto;
  border-radius: 2px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.sx-gallery__grid--polaroid .sx-gallery__item:nth-child(odd)  { transform: rotate(-1.5deg); }
.sx-gallery__grid--polaroid .sx-gallery__item:nth-child(even) { transform: rotate(1.5deg); }
.sx-gallery__grid--polaroid .sx-gallery__item:nth-child(3n)   { transform: rotate(-0.5deg); }
.sx-gallery__grid--polaroid .sx-gallery__item:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
  z-index: 2;
}
.sx-gallery__grid--polaroid .sx-gallery__img {
  aspect-ratio: 4 / 5;
  transition: none;
}
.sx-gallery__grid--polaroid .sx-gallery__item:hover .sx-gallery__img { transform: none; }
.sx-gallery__grid--polaroid figcaption {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  font-family: var(--sx-font-display);
  text-align: center;
  color: var(--sx-color-ink-soft);
  font-size: 14px;
  font-style: italic;
}

/* ── gallery variant: "marquee" ───────────────────────────────── */
.sx-gallery--marquee .sx-gallery__rail-wrap {
  overflow: hidden;
  width: 100%;
  padding: 0;
}
.sx-gallery__grid--marquee {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: sx-gal-marquee 36s linear infinite;
  grid-template-columns: none;
}
.sx-gallery--marquee:hover .sx-gallery__grid--marquee { animation-play-state: paused; }
.sx-gallery__grid--marquee .sx-gallery__item {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 3 / 4;
  border-radius: var(--sx-radius-md, 10px);
  overflow: hidden;
}
@keyframes sx-gal-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-gallery__grid--marquee { animation: none; }
}

/* ── gallery variant: "hover-reveal" ──────────────────────────── */
.sx-gallery__grid--hover-reveal .sx-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--sx-radius-md, 10px);
}
.sx-gallery__grid--hover-reveal .sx-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--sx-color-primary) 78%, transparent) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.sx-gallery__grid--hover-reveal .sx-gallery__item:hover::after { opacity: 1; }
.sx-gallery__grid--hover-reveal .sx-gallery__img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-gallery__grid--hover-reveal .sx-gallery__item:hover .sx-gallery__img {
  transform: scale(1.08);
}
.sx-gallery__grid--hover-reveal figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 20px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 2;
}
.sx-gallery__grid--hover-reveal .sx-gallery__item:hover figcaption {
  transform: translateY(0);
  opacity: 1;
}

/* ── Pricing ─────────────────────────────────────────────────────────── */
.sx-pricing { padding: var(--sx-section-y) 0; background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-pricing__grid {
  display: grid; gap: 20px; align-items: start; max-width: 1040px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.sx-pricing__card {
  background: var(--sx-color-surface); border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg, 16px); padding: 30px 26px; position: relative;
  display: flex; flex-direction: column; gap: 14px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-pricing__card.is-featured {
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
  box-shadow: 0 16px 48px -18px color-mix(in srgb, var(--sx-color-primary) 50%, transparent);
}
.sx-pricing__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary); font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.sx-pricing__name { font-size: 18px; font-weight: 700; color: var(--sx-color-ink); }
.sx-pricing__price { font-size: 38px; font-weight: 800; line-height: 1; color: var(--sx-color-ink); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sx-pricing__period { font-size: 14px; font-weight: 500; color: var(--sx-color-ink-soft); }
.sx-pricing__desc { color: var(--sx-color-ink-soft); font-size: 14px; }
.sx-pricing__features { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 9px; }
.sx-pricing__features li { padding-left: 24px; position: relative; font-size: 14px; color: var(--sx-color-ink); }
.sx-pricing__features li::before { content: "✓"; position: absolute; left: 0; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 800; }
.sx-pricing__card .sx-btn { margin-top: auto; width: 100%; justify-content: center; }

.sx-pricing.sx-pricing--joined .sx-pricing__grid {
  gap: 0;
  align-items: stretch;
  max-width: 1320px;
  border: 0;
  border-radius: calc(var(--sx-radius-lg, 16px) + 8px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.94) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.92) inset,
    0 18px 44px rgba(17,22,27,0.08);
  -webkit-backdrop-filter: saturate(145%) blur(12px);
  backdrop-filter: saturate(145%) blur(12px);
}
.sx-pricing.sx-pricing--joined .sx-pricing__card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 28px 24px;
  height: 100%;
}
.sx-pricing.sx-pricing--joined .sx-pricing__card:not(:last-child) {
  border-right: 1px solid rgba(17,22,27,0.07);
}
.sx-pricing.sx-pricing--joined .sx-pricing__card.is-featured {
  border-color: transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sx-color-primary) 8%, white) 0%, rgba(255,255,255,0.24) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-color-primary) 22%, transparent);
}
.sx-pricing.sx-pricing--joined .sx-pricing__badge {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 12px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
}
.sx-pricing.sx-pricing--joined .sx-pricing__features {
  flex: 1 1 auto;
}
.sx-pricing.sx-pricing--joined .sx-pricing__card .sx-btn {
  margin-top: auto;
}
@media (min-width: 720px) {
  .sx-pricing.sx-pricing--cols-2 .sx-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-pricing.sx-pricing--cols-3 .sx-pricing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-pricing.sx-pricing--cols-3 .sx-pricing__grid { max-width: 1180px; }
  .sx-pricing.sx-pricing--cols-4 .sx-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1180px; }
}
@media (min-width: 1120px) {
  .sx-pricing.sx-pricing--cols-4 .sx-pricing__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1320px; }
  .sx-pricing.sx-pricing--cols-4 .sx-pricing__card { padding: 26px 22px; }
  .sx-pricing.sx-pricing--joined.sx-pricing--cols-4 .sx-pricing__name { font-size: 16px; line-height: 1.25; }
  .sx-pricing.sx-pricing--joined.sx-pricing--cols-4 .sx-pricing__price { font-size: 32px; }
  .sx-pricing.sx-pricing--joined.sx-pricing--cols-4 .sx-pricing__period { font-size: 13px; }
  .sx-pricing.sx-pricing--joined.sx-pricing--cols-4 .sx-pricing__desc,
  .sx-pricing.sx-pricing--joined.sx-pricing--cols-4 .sx-pricing__features li { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 719px) {
  .sx-pricing.sx-pricing--joined .sx-pricing__card:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(17,22,27,0.07);
  }
}

/* Section content alignment (Design tab) */
.sx-section-wrap.sx-align--left   > section { text-align: left; }
.sx-section-wrap.sx-align--center > section { text-align: center; }
.sx-section-wrap.sx-align--right  > section { text-align: right; }

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL CATALOG SECTIONS
   Styles for every section type added in the "+ Add section" picker
   beyond the original 18. Mobile-first; shared utilities first, then
   per-component. Renderers live in js/sections.js.
   ════════════════════════════════════════════════════════════════ */

/* ── shared utilities ────────────────────────────────────────── */
.sx-cards {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.sx-cards--tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
/* Columnas explícitas del editor ("Cuántas columnas"). Mismo breakpoint que
   el patrón cols-N de services-visual: bajo 720px manda el auto-fit base. */
@media (min-width: 720px) {
  .sx-cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sx-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sx-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.sx-card {
  background: var(--sx-color-surface); border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg); padding: 24px; box-shadow: var(--sx-shadow-card);
  display: flex; flex-direction: column; gap: 12px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-card > img { width: 100%; border-radius: var(--sx-radius-md); display: block; }

/* universal image placeholders for the new sections (explicit list so
   we don't clobber the gallery's 1:1 tiles) */
.sx-hero-booking__ph,.sx-founder__ph,.sx-cert__ph,.sx-warranty__ph,
.sx-featured__ph,.sx-potw__ph,.sx-ba__ph,.sx-material__ph,.sx-vtest__ph,
.sx-portfolio__ph,.sx-showcase__ph,.sx-ig__ph,.sx-news__ph,
.sx-feat-article__ph,.sx-insurance__ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--sx-color-bg-alt); color: var(--sx-color-ink-soft);
  border-radius: var(--sx-radius-md); width: 100%; aspect-ratio: 4 / 3;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-hero-booking__ph svg,.sx-founder__ph svg,.sx-cert__ph svg,.sx-warranty__ph svg,
.sx-featured__ph svg,.sx-potw__ph svg,.sx-ba__ph svg,.sx-material__ph svg,.sx-vtest__ph svg,
.sx-portfolio__ph svg,.sx-showcase__ph svg,.sx-ig__ph svg,.sx-news__ph svg,
.sx-feat-article__ph svg,.sx-insurance__ph svg { width: 32px; height: 32px; opacity: .5; }

/* check-mark list (bullets, perks, points, checklists) */
.sx-checklist { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.sx-checklist li { padding-left: 28px; position: relative; color: var(--sx-color-ink); line-height: 1.5; }
.sx-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 800;
}

/* lead / contact forms */
.sx-form, .sx-newsletter__form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 24px auto 0; text-align: left; }
.sx-field { display: flex; flex-direction: column; gap: 6px; }
/* Consent rows: control first, wording beside it, and the two aligned on their
   first line so a two-line sentence does not push the tick to the middle. */
.sx-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.sx-field--check .sx-field__label {
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.sx-field__check {
  width: 18px; height: 18px;
  margin: 2px 0 0;            /* nudge onto the text baseline */
  flex: 0 0 auto;
  accent-color: var(--sx-color-primary-fill, var(--sx-color-primary));
  cursor: pointer;
}
.sx-field__label { font-size: 13px; font-weight: 600; color: var(--sx-color-ink); }
.sx-field__req { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-field__input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-md); font-family: var(--sx-font-body); font-size: 15px;
  background: var(--sx-color-surface); color: var(--sx-color-ink);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-field__input:focus { outline: 2px solid color-mix(in srgb, var(--sx-color-primary) 45%, transparent); outline-offset: 1px; }
.sx-field__textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.sx-field__select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.sx-form .sx-btn { align-self: flex-start; }

/* embedded media frames (video / maps) — responsive 16:9 / 16:10 */
.sx-video__frame, .sx-map__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--sx-radius-lg);
  overflow: hidden; background: var(--sx-color-bg-alt); margin-top: 8px;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-video__frame iframe, .sx-video__frame video,
.sx-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sx-map__frame { aspect-ratio: 16 / 10; max-width: 1000px; margin-inline: auto; }

/* countdown (empty until a future runtime ticks it — hide when empty) */
.sx-countdown:empty { display: none; }
.sx-countdown { font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-size: 18px; margin: 8px 0 16px; }

/* ── Hero variants ───────────────────────────────────────────── */
.sx-hero__phone { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 20px; color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-decoration: none; }
.sx-hero-booking__inner { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
.sx-hero-booking__media img, .sx-hero-booking__ph { width: 100%; border-radius: var(--sx-radius-lg); display: block; }
.sx-hero-booking__ctas { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 800px) { .sx-hero-booking__inner { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

/* ── Founder note ────────────────────────────────────────────── */
.sx-founder__inner { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
.sx-founder__photo img, .sx-founder__ph { width: 100%; border-radius: var(--sx-radius-lg); display: block; }
.sx-founder__quote { font-family: var(--sx-font-display); font-size: clamp(20px, 3vw, 30px); line-height: 1.4; color: var(--sx-color-ink); margin: 0 0 18px; }
.sx-founder__sig img { max-height: 110px; max-width: 320px; width: auto; margin-bottom: 12px; }
.sx-founder__sigtext { display:block; font-family:'Sacramento', cursive; font-size:58px; line-height:1; color: var(--sx-color-primary-ink, var(--sx-color-primary)); margin-bottom:6px; }
.sx-founder__meta { display: flex; flex-direction: column; }
.sx-founder__name { font-weight: 700; color: var(--sx-color-ink); }
.sx-founder__role { font-size: 14px; color: var(--sx-color-ink-soft); }
@media (min-width: 760px) { .sx-founder__inner { grid-template-columns: 320px 1fr; gap: 48px; } }

/* ── Logos grayscale variant ─────────────────────────────────── */
.sx-logos--gray .sx-logos__img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.sx-logos--gray .sx-logos__cell:hover .sx-logos__img { filter: none; opacity: 1; }

/* ── Trust badges strip ──────────────────────────────────────── */
.sx-trust__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; align-items: center; }
.sx-trust__item { display: flex; align-items: center; gap: 14px; }
/* Bumped 2026-05-27: icon 28→44px + tinted circular plate (10%
   primary). The bare-stroke 28px read as decorative noise — at 44px
   with a soft plate they read as real trust signals (Licensed /
   Insured / etc). Cards variant still owns the 72px stadium look. */
.sx-trust__icon {
  width: 44px; height: 44px;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sx-color-primary) 10%, transparent);
  flex: 0 0 44px;
}
.sx-trust__icon svg { width: 22px; height: 22px; stroke-width: 2; }
/* Badge image thumb (strip/cards styles) — same footprint as the icon disc
   so mixed icon/photo badge rows stay perfectly aligned. */
.sx-trust__thumb {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex: 0 0 44px;
}
.sx-trust__label { font-weight: 600; color: var(--sx-color-ink); font-size: 15px; }

/* Cards variant — opt-in via props.card_style="cards". Vertical
   icon-and-label units in a row (no surrounding card box — keeps
   the section airy). Icon gets a soft halo, hover scales + tints
   primary, and a subtle continuous float so the row feels alive
   without being noisy. */
.sx-trust--cards {
  /* Transparent bg (no boundary below) + thin top hairline (line
     directly under hero, where user wants it). */
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--sx-color-border) 70%, transparent);
  border-bottom: none;
}
.sx-trust--cards .sx-trust__strip {
  /* flex-center-wrap so ANY count (3 / 4 / 5) stays centered — a fixed
     5-column grid left a trailing empty column and pushed 4 items left. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 36px 60px;
}
.sx-trust--cards .sx-trust__strip > .sx-trust__item { flex: 0 1 160px; max-width: 200px; }
.sx-trust--cards .sx-trust__item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.sx-trust--cards .sx-trust__icon {
  position: relative;
  /* `flex: 0 0 ...` on the base rule was forcing a 44px basis inside the
     cards' column-flex item, which collapsed the height and produced an
     oval. Reset flex + use aspect-ratio + fixed width so it's a real
     perfect circle regardless of parent layout. */
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sx-color-primary) 8%, transparent);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  /* Soft pulsing halo — runs always, very subtle. Drawn as a
     pseudo-element behind so the inner circle stays crisp. */
}
.sx-trust--cards .sx-trust__icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sx-color-primary) 6%, transparent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: -1;
}
.sx-trust--cards .sx-trust__item:hover .sx-trust__icon {
  transform: scale(1.06);
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
  /* Centered ring halo — perfectly round (no Y offset, no oval shadow). */
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sx-color-primary) 10%, transparent);
}
.sx-trust--cards .sx-trust__item:hover .sx-trust__icon::before {
  opacity: 0;
}
.sx-trust--cards .sx-trust__icon svg { width: 44px; height: 44px; stroke-width: 0.8; }
.sx-trust--cards .sx-trust__label {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--sx-color-ink);
  transition: color 0.25s ease;
}
.sx-trust--cards .sx-trust__item:hover .sx-trust__label {
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}

/* ── trust_badges card_style:"photo" ──────────────────────────────
   The category was 9 variations on "icons + text on a flat band".
   This one carries a real photograph per signal (the crew, the shop,
   the certificate) with the label reversed out over a bottom scrim —
   same content model, completely different visual weight. */
.sx-trust--photo .sx-trust__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  justify-content: initial;
}
.sx-trust--photo .sx-trust__tile {
  position: relative;
  margin: 0;
  border-radius: var(--sx-radius-lg, 16px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--sx-color-bg-alt, #f4f4f6);
  box-shadow: 0 12px 30px rgba(15, 15, 25, .12);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-trust--photo .sx-trust__img,
.sx-trust--photo .sx-trust__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.sx-trust--photo .sx-trust__tile:hover .sx-trust__img { transform: scale(1.05); }
.sx-trust--photo .sx-trust__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 16px 15px;
  /* Scrim rather than a solid bar: the photo stays readable behind it. */
  background: linear-gradient(to top, rgba(10, 10, 18, .82) 0%, rgba(10, 10, 18, .45) 55%, transparent 100%);
}
.sx-trust--photo .sx-trust__label {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.sx-trust--photo .sx-trust__sub {
  color: rgba(255, 255, 255, .78);
  font-size: 12.5px;
  letter-spacing: .02em;
}
@media (max-width: 640px) {
  .sx-trust--photo .sx-trust__strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sx-trust--photo .sx-trust__cap { padding: 12px 11px 10px; }
  .sx-trust--photo .sx-trust__label { font-size: 13.5px; }
  .sx-trust--photo .sx-trust__sub { font-size: 11px; }
}
/* Stagger the floating animation so the icons don't pulse in unison.
   nth-child delays give each badge its own gentle rhythm. */
@keyframes sx-trust-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .sx-trust--cards .sx-trust__icon {
    animation: sx-trust-float 4s ease-in-out infinite;
  }
  .sx-trust--cards .sx-trust__item:nth-child(2) .sx-trust__icon { animation-delay: 0.5s; }
  .sx-trust--cards .sx-trust__item:nth-child(3) .sx-trust__icon { animation-delay: 1.0s; }
  .sx-trust--cards .sx-trust__item:nth-child(4) .sx-trust__icon { animation-delay: 1.5s; }
  .sx-trust--cards .sx-trust__item:nth-child(5) .sx-trust__icon { animation-delay: 2.0s; }
  /* Hover overrides the loop with the snappier hover transform. */
  .sx-trust--cards .sx-trust__item:hover .sx-trust__icon { animation: none; }
}

/* ── Certifications / materials grids ────────────────────────── */
.sx-cert, .sx-material { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sx-cert__img img, .sx-cert__ph, .sx-material__img img, .sx-material__ph { width: 100%; max-width: 160px; aspect-ratio: 1/1; object-fit: contain; border-radius: var(--sx-radius-md); }
.sx-cert__label, .sx-material__label { font-size: 13px; font-weight: 600; color: var(--sx-color-ink); }

/* layout="pair" — for the credentials/awards pattern where there are
   only 2 prominent badges. Constrains the grid so the items sit close
   together, scales the badges up, drops the forced square ratio, and
   adds a soft drop-shadow + hover lift for a modern editorial feel.
   Default certifications grid (3+ items) is untouched. */
.sx-certs--pair .sx-cards--tight {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 720px;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}
.sx-certs--pair .sx-cert { max-width: 280px; gap: 18px; }
.sx-certs--pair .sx-cert__img img {
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 240px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
  transition: transform .25s ease, filter .25s ease;
}
.sx-certs--pair .sx-cert__img img:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.14));
}
.sx-certs--pair .sx-cert__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sx-color-ink-soft);
}
@media (max-width: 600px) {
  .sx-certs--pair .sx-cards--tight { grid-template-columns: 1fr; gap: 32px; max-width: 320px; }
}

/* ── Google reviews ──────────────────────────────────────────── */
.sx-review__text { color: var(--sx-color-ink-soft); line-height: 1.6; flex: 1; }
.sx-review__author { font-weight: 700; color: var(--sx-color-ink); }

/* ── Warranty / guarantee ────────────────────────────────────── */
.sx-warranty__inner { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; justify-content: center; text-align: center; }
.sx-warranty__seal img, .sx-warranty__ph { width: 140px; height: 140px; object-fit: contain; border-radius: 50%; }
.sx-warranty__duration { font-family: var(--sx-font-display); font-size: 26px; font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); margin-bottom: 8px; }
.sx-warranty__body { max-width: 520px; text-align: left; }

/* ── warranty_guarantee layout:"photo" ────────────────────────────
   Dark editorial panel borrowed from .sx-advantage (the one Trust type
   that already looked premium): photo on the left, seal overlapping it,
   copy reversed out. Gives the category a second dark beat so a page
   using several Trust sections alternates instead of stacking white bands. */
.sx-warranty--photo {
  background: var(--sx-color-inverse-bg);
  color: var(--sx-color-inverse-ink);
}
.sx-warranty--photo .sx-warranty__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  position: relative;
}
.sx-warranty--photo .sx-warranty__media {
  border-radius: var(--sx-radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.sx-warranty--photo .sx-warranty__img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
/* The seal overlaps the seam between photo and copy. */
.sx-warranty--photo .sx-warranty__seal {
  position: absolute;
  /* The seal is positioned against `__inner`, which is the WHOLE two-column
     grid — so `left: calc(50% - 62px)` centred it on the divider and pushed
     62px of a 124px badge into the copy column, printing straight through
     the heading. The intent was "seal overlapping the PHOTO".
     The photo column ends at `50% - 24px` (half the 48px gap), so ending the
     seal exactly there keeps it over the image and out of the text: its left
     edge is that point minus its own width. */
  left: calc(50% - 100px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
@media (max-width: 1024px) {
  /* the grid collapses to one column here — a seal pinned to 50% would land
     in the middle of the photo instead of on its edge */
  .sx-warranty--photo .sx-warranty__seal {
    left: auto;
    right: 24px;
    top: auto;
    bottom: -40px;
    transform: none;
  }
}
.sx-warranty--photo .sx-warranty__seal img,
.sx-warranty--photo .sx-warranty__ph {
  width: 124px;
  height: 124px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.sx-warranty--photo .sx-warranty__body { max-width: none; }
.sx-warranty--photo .sx-h2 { color: var(--sx-color-inverse-ink); }
.sx-warranty--photo .sx-eyebrow { color: var(--sx-color-accent-on-inverse, var(--sx-color-primary)); }
.sx-warranty--photo .sx-lead { color: var(--sx-color-inverse-ink-soft); }
.sx-warranty--photo .sx-warranty__duration {
  font-size: 32px;
  color: var(--sx-color-inverse-ink);
}
@media (max-width: 1024px) {
  .sx-warranty--photo .sx-warranty__inner { grid-template-columns: 1fr; gap: 22px; }
  .sx-warranty--photo .sx-warranty__img { min-height: 220px; }
  /* Overlap only works on the two-column seam — inline it below instead. */
  .sx-warranty--photo .sx-warranty__seal { position: static; left: auto; top: auto; transform: none; }
  .sx-warranty--photo .sx-warranty__seal img,
  .sx-warranty--photo .sx-warranty__ph { width: 92px; height: 92px; }
}
@media (max-width: 600px) { .sx-warranty__body { text-align: center; } }

/* ── Featured service ────────────────────────────────────────── */
.sx-featured__inner { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
.sx-featured__media img, .sx-featured__ph { width: 100%; border-radius: var(--sx-radius-lg); display: block; }
.sx-featured__price { font-family: var(--sx-font-display); font-size: 30px; font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); margin: 12px 0 20px; }
@media (min-width: 800px) { .sx-featured__inner { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ── Menu / service categories ───────────────────────────────── */
.sx-menu__cats { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sx-menu__cats { grid-template-columns: 1fr 1fr; gap: 48px; } }
.sx-menu__catname { font-family: var(--sx-font-display); font-size: 22px; color: var(--sx-color-ink); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--sx-color-border); }
.sx-menu__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sx-menu__row { display: flex; align-items: baseline; gap: 8px; }
.sx-menu__title { font-weight: 600; color: var(--sx-color-ink); }
.sx-menu__dots { flex: 1; border-bottom: 1px dotted var(--sx-color-border); transform: translateY(-4px); }
.sx-menu__price { font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); white-space: nowrap; }
.sx-menu__desc { font-size: 13px; color: var(--sx-color-ink-soft); margin-top: 4px; line-height: 1.5; }
/* ── Booking services (live from calendar) ───────────────────── */
.sx-bsvc { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.sx-bsvc__img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin-bottom: 4px; }
.sx-bsvc__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-bsvc__title { font-size: 18px; font-weight: 700; margin: 0; }
/* EL DETALLE, PLEGADO (28-ago-2026). La tarjeta queda del tamaño de una de
   producto y el precio vuelve a verse sin bajar cuatro pantallas. */
.sx-bsvc__more { margin: 0; }
/* EN TINTA, NO EN EL COLOR DE MARCA. Lo puse con `--sx-color-primary` y el
   guardián de contraste lo cazó: 3,41:1 sobre 4,5 con el dorado de Myra. Y el
   fallo de fondo es peor que ese número — el color de marca lo elige cada
   sitio, así que apoyar texto en él no se puede garantizar en ninguno.
   Lo clicable se dice con el subrayado y la flecha, que no dependen del color:
   también es lo correcto para quien no distingue tonos. */
.sx-bsvc__more > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--sx-color-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.sx-bsvc__more > summary:hover { color: var(--sx-color-primary); }
.sx-bsvc__more > summary::-webkit-details-marker { display: none; }
/* La flecha la dibuja el CSS y GIRA al abrir: sin señal de estado, quien lo
   abre no sabe si ya estaba abierto. */
.sx-bsvc__more > summary::after {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .15s ease;
}
.sx-bsvc__more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* `pre-line` conserva los saltos: el detalle de preparación viene en líneas
   sueltas con asterisco, y en un párrafo corrido se leen como una parrafada. */
.sx-bsvc__desc {
  font-size: 14px; color: var(--sx-color-ink-soft); margin: 8px 0 0;
  line-height: 1.55; white-space: pre-line;
}
.sx-bsvc__meta { font-size: 14px; font-weight: 600; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-bsvc__cta { margin-top: auto; padding-top: 8px; }

/* "Book this service" deep-link — shared by menu/addons/specials/schedule rows */
.sx-menu__book { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-decoration: none; }
.sx-menu__book:hover { text-decoration: underline; }
.sx-schedule__row .sx-menu__book { margin-top: 0; margin-left: auto; }

/* ── Service add-ons ─────────────────────────────────────────── */
.sx-addon { display: flex; flex-direction: column; gap: 10px; }
.sx-addon__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--sx-radius-md); background: color-mix(in srgb, var(--sx-color-primary) 12%, transparent); color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-addon__icon svg { width: 22px; height: 22px; }
.sx-addon__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sx-addon__title { font-weight: 700; color: var(--sx-color-ink); }
.sx-addon__price { font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); white-space: nowrap; }
.sx-addon__desc { font-size: 14px; color: var(--sx-color-ink-soft); line-height: 1.5; }

/* ── Product of the week ─────────────────────────────────────── */
.sx-potw__card { text-align: center; gap: 10px; }
.sx-potw__img img, .sx-potw__ph { width: 100%; border-radius: var(--sx-radius-md); display: block; aspect-ratio: 1/1; object-fit: cover; }
.sx-potw__title { font-size: 16px; color: var(--sx-color-ink); }
.sx-potw__price { font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* ── Daily specials ──────────────────────────────────────────── */
.sx-specials__list { list-style: none; padding: 0; margin: 0; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.sx-specials__item { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--sx-color-surface); border: 1px solid var(--sx-color-border); border-radius: var(--sx-radius-md);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-specials__title { font-weight: 600; color: var(--sx-color-ink); }
.sx-specials__price { font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* ── Process timeline ────────────────────────────────────────── */
.sx-timeline__list { list-style: none; padding: 0; margin: 0; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 4px; }
.sx-timeline__step { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 28px; position: relative; }
.sx-timeline__step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--sx-color-border); }
.sx-timeline__num { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; z-index: 1; }
.sx-timeline__title { font-size: 18px; color: var(--sx-color-ink); margin-bottom: 4px; }
.sx-timeline__text { color: var(--sx-color-ink-soft); line-height: 1.6; }

/* Outline variant — opt-in via props.number_style="outline". Giant
   stroked numerals on the left, no circle, no connecting line.
   Editorial / magazine feel. Body text gets more breathing room
   since the number takes more visual space. */
.sx-timeline--outline .sx-timeline__list { max-width: 820px; gap: 12px; }
.sx-timeline--outline .sx-timeline__step { gap: 32px; padding-bottom: 40px; align-items: center; }
/* Suppress the connecting vertical line — outline numerals create
   their own visual rhythm and the line just adds noise next to
   such large characters. */
.sx-timeline--outline .sx-timeline__step::before { display: none; }
.sx-timeline--outline .sx-timeline__num {
  flex: 0 0 auto;
  width: auto; height: auto;
  border-radius: 0;
  background: transparent;
  font-size: 96px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--sx-color-primary);
  text-stroke: 2px var(--sx-color-primary);
  /* Fallback for browsers without text-stroke support — show a
     translucent solid in primary color. Mostly irrelevant today
     (caniuse: 98%+). */
  opacity: 0.85;
  min-width: 96px;
  text-align: center;
}
@media (max-width: 600px) {
  .sx-timeline--outline .sx-timeline__num { font-size: 64px; min-width: 64px; }
  .sx-timeline--outline .sx-timeline__step { gap: 18px; padding-bottom: 24px; }
}
.sx-timeline--outline .sx-timeline__title { font-size: 22px; font-weight: 700; }

/* ── process_timeline variant: "horizontal" ───────────────────── */
.sx-timeline--horizontal .sx-timeline__list {
  /* flex-center so ANY step count (3 or 4) stays centered — a fixed
     4-column grid left a trailing empty column and pushed 3 steps left. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: none;
  margin-inline: auto;
}
.sx-timeline--horizontal .sx-timeline__list > .sx-timeline__step { flex: 1 1 200px; max-width: 280px; }

/* SEIS PASOS NO SON 5 + 1 (26-ago-2026).
 *
 * Con `max-width: 280px` cabían CINCO por fila y el sexto caía solo, dejando la
 * fila de abajo casi vacía: el ojo lee eso como que falta algo, no como un
 * proceso de seis pasos. Y no es un caso raro — 6 es un número de pasos tan
 * normal como 4.
 *
 * Se reparte por el número REAL de pasos, contándolos con `:has()`, en vez de
 * dejar que el ancho decida cuántos entran. Dos filas de tres para seis; una
 * fila de cuatro para cuatro. `:has()` está en todos los navegadores desde 2023
 * y esto es puro reparto: donde no exista, se queda el comportamiento de antes,
 * que es feo pero no roto. */
@media (min-width: 900px) {
  /* 6 pasos → 3 + 3 */
  .sx-timeline--horizontal .sx-timeline__list:has(> .sx-timeline__step:nth-child(6)):not(:has(> .sx-timeline__step:nth-child(7)))
    > .sx-timeline__step { flex: 0 1 calc(33.333% - 16px); max-width: none; }
  /* 5 pasos → 3 + 2, centrados; mejor que 4 + 1 huérfano */
  .sx-timeline--horizontal .sx-timeline__list:has(> .sx-timeline__step:nth-child(5)):not(:has(> .sx-timeline__step:nth-child(6)))
    > .sx-timeline__step { flex: 0 1 calc(33.333% - 16px); max-width: none; }
}
@media (max-width: 900px) { .sx-timeline--horizontal .sx-timeline__list > .sx-timeline__step { flex-basis: 240px; } }
@media (max-width: 520px) { .sx-timeline--horizontal .sx-timeline__list { grid-template-columns: 1fr; } }
.sx-timeline--horizontal .sx-timeline__step {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 0;
  gap: 16px;
  position: relative;
}
.sx-timeline--horizontal .sx-timeline__step::before {
  display: none;
}
.sx-timeline--horizontal .sx-timeline__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(50% + 32px);
  right: calc(-50% + 32px);
  height: 2px;
  background: linear-gradient(to right, var(--sx-color-primary), transparent);
  z-index: 0;
}
@media (max-width: 900px) { .sx-timeline--horizontal .sx-timeline__step::after { display: none; } }
.sx-timeline--horizontal .sx-timeline__body { width: 100%; }
.sx-timeline--horizontal .sx-timeline__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}
.sx-timeline--horizontal .sx-timeline__text {
  font-size: 13.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--sx-color-ink-soft);
  max-width: 26ch;
  margin-inline: auto;
}

/* ── process_timeline variant: "zigzag" ───────────────────────── */
.sx-timeline--zigzag .sx-timeline__list {
  max-width: 920px;
  gap: 0;
  position: relative;
}
.sx-timeline--zigzag .sx-timeline__list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--sx-color-border, rgba(0,0,0,0.1));
  transform: translateX(-1px);
}
.sx-timeline--zigzag .sx-timeline__step {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: center;
  gap: 0;
  padding-bottom: 32px;
}
.sx-timeline--zigzag .sx-timeline__step::before {
  display: none;
}
.sx-timeline--zigzag .sx-timeline__num {
  grid-column: 2;
  grid-row: 1;
  margin: 0 auto;
}
.sx-timeline--zigzag .sx-timeline__body {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 28px;
}
.sx-timeline--zigzag .sx-timeline__step:nth-child(even) .sx-timeline__body {
  grid-column: 3;
  text-align: left;
  padding-right: 0;
  padding-left: 28px;
}
@media (max-width: 720px) {
  .sx-timeline--zigzag .sx-timeline__list::before { left: 23px; }
  .sx-timeline--zigzag .sx-timeline__step,
  .sx-timeline--zigzag .sx-timeline__step:nth-child(even) {
    grid-template-columns: 56px 1fr;
    gap: 16px;
  }
  .sx-timeline--zigzag .sx-timeline__num { grid-column: 1; }
  .sx-timeline--zigzag .sx-timeline__body,
  .sx-timeline--zigzag .sx-timeline__step:nth-child(even) .sx-timeline__body {
    grid-column: 2; text-align: left; padding: 0;
  }
}

/* ── process_timeline variant: "cards" ────────────────────────── */
.sx-timeline--cards .sx-timeline__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: none;
}
.sx-timeline--cards .sx-timeline__step {
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: var(--sx-radius-lg, 12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  gap: 14px;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-timeline--cards .sx-timeline__step::before { display: none; }
.sx-timeline--cards .sx-timeline__step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.10);
}
.sx-timeline--cards .sx-timeline__num {
  width: 40px; height: 40px; flex: 0 0 40px;
  font-size: 14px;
}
.sx-timeline--cards .sx-timeline__body { width: 100%; }

/* ── process_timeline variant: "connected-line" ───────────────── */
.sx-timeline--connected-line .sx-timeline__list { gap: 8px; }
.sx-timeline--connected-line .sx-timeline__step {
  align-items: center;
  padding-bottom: 36px;
}
.sx-timeline--connected-line .sx-timeline__step:not(:last-child)::before {
  top: 56px;
  bottom: -8px;
  background: linear-gradient(to bottom, var(--sx-color-primary), color-mix(in srgb, var(--sx-color-primary) 30%, transparent));
  width: 3px;
}
.sx-timeline--connected-line .sx-timeline__num {
  width: 56px; height: 56px; flex: 0 0 56px;
  font-size: 18px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sx-color-primary) 14%, transparent);
}

/* ── process_timeline variant: "big-number" ───────────────────── */
.sx-timeline--big-number .sx-timeline__list {
  max-width: 920px;
  gap: 32px;
}
.sx-timeline--big-number .sx-timeline__step {
  align-items: center;
  padding-bottom: 0;
  gap: 28px;
}
.sx-timeline--big-number .sx-timeline__step::before { display: none; }
.sx-timeline--big-number .sx-timeline__num {
  flex: 0 0 auto;
  width: auto; height: auto;
  background: transparent;
  color: transparent;
  font-family: var(--sx-font-display);
  font-size: clamp(72px, 11vw, 140px);
  font-weight: 900;
  line-height: 0.85;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--sx-color-primary) 50%, transparent);
  min-width: 130px;
  border-radius: 0;
}

/* ── Before / after ──────────────────────────────────────────── */
.sx-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 880px; margin-inline: auto; }
.sx-ba__cell { position: relative; margin: 0; }
.sx-ba__cell img, .sx-ba__ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--sx-radius-md); display: block; }
.sx-ba__tag { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.66); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.sx-ba-gallery .sx-ba__pair--card { gap: 8px; }

/* ── Checklist / aftercare sections ──────────────────────────── */
.sx-checklist-sec__inner, .sx-aftercare__inner { max-width: 680px; margin-inline: auto; }
.sx-aftercare .sx-btn { margin-top: 12px; }

/* ── Video testimonials ──────────────────────────────────────── */
.sx-vtest__card { text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.sx-vtest__thumb { position: relative; border-radius: var(--sx-radius-md); overflow: hidden; }
.sx-vtest__poster, .sx-vtest__ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.sx-vtest__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; font-size: 20px; }
.sx-vtest__author { font-weight: 600; color: var(--sx-color-ink); text-align: center; }

/* ── Quote banner ────────────────────────────────────────────── */
/* The quote and the cite used to set no color at all: with a bg_image the
   parent's `color:#fff` carried them, but WITHOUT one they fell through to the
   browser's inherited grey and the cite then had `opacity:.9` stacked on top.
   Measured on eagle-multiservice: quote 5.07, cite 4.41 — a failing pair on a
   section whose entire job is one sentence. Routed through two local tokens so
   the photo case keeps its white and the plain case gets real theme ink. */
.sx-quote-banner {
  position: relative; text-align: center; overflow: hidden;
  --sx-qb-ink: var(--sx-color-ink);
  --sx-qb-ink-soft: var(--sx-color-ink-soft);
}
.sx-quote-banner--img {
  color: #fff;
  --sx-qb-ink: #fff;
  --sx-qb-ink-soft: rgba(255,255,255,.88);
}
.sx-quote-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sx-fondo-pos, center); z-index: 0; }
.sx-quote-banner__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 1; }
/* THE overlay is emitted unconditionally by the renderer, but `__inner` only
   got `z-index: 2` under `--img`. With no bg_image the veil therefore painted
   50% black straight over the quote: white type measured #7f7f7f, and the cite
   came out at 4.48:1 — a failing pair produced by a veil with nothing behind it
   to veil. Hide it when there is no photo, and lift the content in both cases. */
.sx-quote-banner:not(.sx-quote-banner--img) .sx-quote-banner__overlay { display: none; }
.sx-quote-banner__inner { position: relative; z-index: 2; }
.sx-quote-banner__q { font-family: var(--sx-font-display); font-size: clamp(24px, 4vw, 40px); line-height: 1.35; max-width: 900px; margin: 0 auto 16px; color: var(--sx-qb-ink); }
/* No `opacity` here — dimming a token is how a passing colour quietly becomes
   a failing one, with nothing in the palette to show for it. */
.sx-quote-banner__author { font-style: normal; font-weight: 600; color: var(--sx-qb-ink-soft); }

/* ── Portfolio grid ──────────────────────────────────────────── */
.sx-portfolio__cell { position: relative; margin: 0; border-radius: var(--sx-radius-lg); overflow: hidden; }
.sx-portfolio__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sx-portfolio__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.sx-portfolio__title { font-weight: 700; }
.sx-portfolio__cat { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }

/* ── Project showcase ────────────────────────────────────────── */
.sx-showcase__heading { text-align: center; margin-bottom: 24px; }
.sx-showcase__hero img, .sx-showcase__ph { width: 100%; border-radius: var(--sx-radius-lg); display: block; }
.sx-showcase__metrics { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; margin: 28px 0; }
.sx-showcase__metric { text-align: center; }
.sx-showcase__val { display: block; font-family: var(--sx-font-display); font-size: 34px; font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-showcase__lbl { font-size: 13px; color: var(--sx-color-ink-soft); }
.sx-showcase__g img, .sx-showcase__ph { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--sx-radius-md); }

/* ── Instagram feed ──────────────────────────────────────────── */
.sx-ig__head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sx-ig__handle { font-weight: 700; font-size: 18px; color: var(--sx-color-ink); }
.sx-ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 700px) { .sx-ig__grid { grid-template-columns: repeat(6, 1fr); } }
.sx-ig__tile, .sx-ig__ph { aspect-ratio: 1/1; border-radius: var(--sx-radius-sm); overflow: hidden; }
.sx-ig__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sx-ig__tile:hover .sx-ig__img { transform: scale(1.04); }

/* ── Stylist cards ───────────────────────────────────────────── */
.sx-stylist { text-align: center; align-items: center; }
.sx-stylist__photo, .sx-stylist__initials { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.sx-stylist__initials { display: flex; align-items: center; justify-content: center; background: var(--sx-color-bg-alt); color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 800; font-size: 32px;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-stylist__name { font-size: 18px; color: var(--sx-color-ink); }
.sx-stylist__role { font-size: 14px; color: var(--sx-color-ink-soft); }
.sx-stylist__specs { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sx-stylist__specs li { font-size: 12px; padding: 3px 10px; background: var(--sx-color-bg-alt); border-radius: 999px; color: var(--sx-color-ink-soft);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}

/* ── Booking calendar CTA ────────────────────────────────────── */
.sx-booking__inner { text-align: center; }
.sx-booking__btn { margin-top: 8px; font-size: 16px; padding: 14px 32px; }

/* ── Lead forms (quote / pet) ────────────────────────────────── */
.sx-leadform__inner { max-width: 600px; margin-inline: auto; text-align: center; }

/* ── Class schedule ──────────────────────────────────────────── */
.sx-schedule__table { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; }
.sx-schedule__row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--sx-color-border); align-items: center; }
.sx-schedule__day { font-weight: 700; color: var(--sx-color-ink); }
.sx-schedule__time { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 600; }
.sx-schedule__name { color: var(--sx-color-ink-soft); }

/* ── Loyalty tiers ───────────────────────────────────────────── */
.sx-tier { text-align: center; }
.sx-tier__name { font-size: 20px; color: var(--sx-color-ink); }
.sx-tier__price { font-family: var(--sx-font-display); font-size: 30px; font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* ── Referral ────────────────────────────────────────────────── */
.sx-referral__inner { text-align: center; max-width: 640px; margin-inline: auto; }
.sx-referral__reward { font-family: var(--sx-font-display); font-size: clamp(24px, 4vw, 38px); font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); margin: 12px 0 20px; }
.sx-referral__steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; max-width: 460px; margin-inline: auto; }
.sx-referral__steps li { counter-increment: step; padding-left: 44px; position: relative; color: var(--sx-color-ink); }
.sx-referral__steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }

/* ── News / blog grid ────────────────────────────────────────── */
.sx-news__card { padding: 0; overflow: hidden; text-decoration: none; }
.sx-news__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.sx-news__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.sx-news__date { font-size: 12px; color: var(--sx-color-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.sx-news__title { font-size: 18px; color: var(--sx-color-ink); }
.sx-news__excerpt { font-size: 14px; color: var(--sx-color-ink-soft); line-height: 1.6; }

/* ── Featured article ────────────────────────────────────────── */
.sx-feat-article__inner { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
.sx-feat-article__media img, .sx-feat-article__ph { width: 100%; border-radius: var(--sx-radius-lg); display: block; }
@media (min-width: 820px) { .sx-feat-article__inner { grid-template-columns: 1.2fr 1fr; gap: 48px; } }

/* ── Text block ──────────────────────────────────────────────── */
.sx-textblock__inner { max-width: 720px; margin-inline: auto; }
.sx-textblock__body { color: var(--sx-color-ink-soft); line-height: 1.75; }
.sx-textblock__body p { margin-bottom: 16px; }

/* ── Limited offer / promo banners ───────────────────────────── */
.sx-offer__inner, .sx-promo__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.sx-offer__discount { font-family: var(--sx-font-display); font-size: clamp(30px, 6vw, 56px); font-weight: 800; color: var(--sx-color-primary-ink, var(--sx-color-primary)); margin: 8px 0; }
.sx-offer__cta, .sx-promo__cta { margin-top: 16px; }

/* ── Sale banner (sticky top bar) ────────────────────────────── */
.sx-sale-banner { background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary); padding: 10px 0; }
.sx-sale-banner__inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.sx-sale-banner__text { font-weight: 600; }
/* This button's fill IS on-primary, and runtime guarantees the
   (primary, on-primary) pair clears 4.5:1 — so the RAW brand colour is
   correct here. The page-tuned primary-ink would be adjusted against the
   wrong surface (the global sweep got this one wrong; measured 4.04:1). */
.sx-sale-banner .sx-btn { background: var(--sx-color-on-primary); color: var(--sx-color-primary-fill, var(--sx-color-primary)); border-color: var(--sx-color-on-primary); padding: 6px 16px; }
.sx-sale-banner__x { background: transparent; border: 0; color: var(--sx-color-on-primary); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
/* Fondo custom del banner de campaña (29-ago-2026): con fg_color puesto, la
   ✕ y el texto heredan la tinta — sin esto, la ✕ clava on-primary (clara) y
   desaparece sobre los fondos Glass/Light. */
.sx-sale-banner--custom .sx-sale-banner__x { color: inherit; }

/* limited_offer con tinta custom (31-ago-2026): la etiqueta de descuento y la
   cuenta atrás se pintan con primary-ink —el rosa oscurecido para fondo
   claro— y sobre un fondo custom oscuro desaparecerían. Con fg_color puesto,
   heredan la tinta elegida. Sin él, nada cambia. */
.sx-offer--custom .sx-offer__discount,
.sx-offer--custom .sx-countdown,
.sx-offer--custom .sx-eyebrow { color: inherit; }
.sx-offer--custom .sx-eyebrow::before { background: currentColor; }
/* El banner es una BARRA: los tamaños del tab Site (Slim/Regular/Tall) no son
   los de una sección de contenido — los 40/128px genéricos de sx-sp-- lo
   volverían una banda. Escala de barra: 6 / 10 (natural) / 28. */
.sx-section-wrap.sx-sp--compact  > section.sx-sale-banner { padding-top: 6px !important; padding-bottom: 6px !important; }
.sx-section-wrap.sx-sp--spacious > section.sx-sale-banner { padding-top: 28px !important; padding-bottom: 28px !important; }

/* ── Stats ───────────────────────────────────────────────────── */
.sx-stats__title { text-align: center; margin-bottom: 28px; }

/* ── Newsletter ──────────────────────────────────────────────── */
.sx-newsletter__inner { text-align: center; max-width: 640px; margin-inline: auto; }
.sx-newsletter__form { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.sx-newsletter__form .sx-field__input { flex: 1; min-width: 220px; }

/* ── Maps / location / area ──────────────────────────────────── */
.sx-map__title { text-align: center; }
.sx-map__addr { text-align: center; color: var(--sx-color-ink-soft); margin-bottom: 4px; }
.sx-map__dir { display: block; width: max-content; margin: 18px auto 0; }
.sx-area__inner { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
.sx-area__cities { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sx-area__cities li { font-size: 13px; padding: 5px 12px; background: var(--sx-color-bg-alt); border-radius: 999px; color: var(--sx-color-ink);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-area__radius { font-weight: 600; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
@media (min-width: 820px) { .sx-area__inner { grid-template-columns: 1.2fr 1fr; gap: 48px; } }

/* ── service_area_map variant: "map-right" ────────────────────── */
@media (min-width: 820px) {
  .sx-area--map-right .sx-area__inner {
    grid-template-columns: 1fr 1.2fr;
  }
  .sx-area--map-right .sx-area__body { order: 1; }
  .sx-area--map-right .sx-area__map  { order: 2; }
}

/* ── service_area_map variant: "stacked" ──────────────────────── */
.sx-area--stacked .sx-area__inner {
  grid-template-columns: 1fr !important;
  gap: 28px;
}
.sx-area--stacked .sx-area__map { width: 100%; }
.sx-area--stacked .sx-area__map .sx-map__frame { aspect-ratio: 21 / 8; }
.sx-area--stacked .sx-area__body { text-align: center; }
.sx-area--stacked .sx-area__cities { justify-content: center; }

/* ── service_area_map variant: "overlay-glass" ────────────────── */
.sx-area--overlay-glass { position: relative; padding-block: 0; }
.sx-area--overlay-glass .sx-area__map {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.sx-area--overlay-glass .sx-area__map .sx-map__frame {
  height: 100%; aspect-ratio: auto; border-radius: 0;
}
.sx-area--overlay-glass .sx-area__map iframe { height: 100%; min-height: 540px; }
.sx-area--overlay-glass .sx-area__inner {
  position: relative; z-index: 2;
  display: block;
  padding-block: 96px;
  pointer-events: none;
}
.sx-area--overlay-glass .sx-area__body {
  pointer-events: auto;
  max-width: 460px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--sx-radius-lg, 12px);
  padding: 32px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
/* The frosted card is always light — force dark heading/body text so it stays
   legible even on dark-theme sites (where --sx-color-ink is near-white). */
.sx-area--overlay-glass .sx-area__body .sx-h2,
.sx-area--overlay-glass .sx-area__body .sx-lead { color: #111418 !important; }

/* ── service_area_map variant: "compact-list" ─────────────────── */
.sx-area--compact-list .sx-area__map .sx-map__frame {
  aspect-ratio: 1 / 1;
  max-width: 380px;
}
.sx-area--compact-list .sx-area__cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.sx-area--compact-list .sx-area__cities li {
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 14px;
  counter-increment: city-counter;
}
.sx-area--compact-list .sx-area__cities {
  counter-reset: city-counter;
}
.sx-area--compact-list .sx-area__cities li::before {
  content: counter(city-counter, decimal-leading-zero);
  position: absolute; left: 0; top: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  letter-spacing: 0.04em;
}

/* ── service_area_map variant: "full-bleed-top" ───────────────── */
.sx-area--full-bleed-top { padding-bottom: 0; }
.sx-area--full-bleed-top .sx-area__head {
  text-align: center;
  margin-bottom: 32px;
}
.sx-area--full-bleed-top .sx-area__head .sx-area__cities {
  justify-content: center;
}
.sx-area--full-bleed-top > .sx-area__map {
  width: 100%;
}
.sx-area--full-bleed-top .sx-area__map .sx-map__frame {
  aspect-ratio: 21 / 7;
  border-radius: 0;
  width: 100%;
}

/* ── Click to call ───────────────────────────────────────────── */
.sx-c2c__inner { text-align: center; }
.sx-c2c__phone { display: inline-block; font-family: var(--sx-font-display); font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-decoration: none; margin: 8px 0; }
.sx-c2c__sub { color: var(--sx-color-ink-soft); }

/* ── Multi-location ──────────────────────────────────────────── */
.sx-loc__name { font-size: 18px; color: var(--sx-color-ink); }
.sx-loc__addr { font-size: 14px; color: var(--sx-color-ink-soft); line-height: 1.5; }
.sx-loc__phone { font-weight: 600; color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-decoration: none; }

/* ── Hours of operation ──────────────────────────────────────── */
.sx-hours__inner { max-width: 560px; margin-inline: auto; }
.sx-hours__table { width: 100%; border-collapse: collapse; }
.sx-hours__table th, .sx-hours__table td { padding: 12px 8px; border-bottom: 1px solid var(--sx-color-border); text-align: left; }
.sx-hours__table th { font-weight: 700; color: var(--sx-color-ink); }
.sx-hours__table td { color: var(--sx-color-ink-soft); text-align: right; }

/* ── Insurance & safety ──────────────────────────────────────── */
.sx-insurance__inner { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
.sx-insurance__badges { display: flex; flex-wrap: wrap; gap: 20px; }
.sx-insurance__badge { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--sx-color-ink-soft); }
.sx-insurance__badge img, .sx-insurance__ph { width: 80px; height: 80px; object-fit: contain; }

/* ── insurance_safety layout:"photo" ──────────────────────────────
   Two columns with a real photograph on the right, seals demoted to a
   small inline row under the copy. Mirrors the .sx-about--bleed rhythm
   already used in Brand & story, so the page reads as one design. */
.sx-insurance--photo .sx-insurance__inner {
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}
.sx-insurance--photo .sx-insurance__media {
  border-radius: var(--sx-radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 15, 25, .18);
}
.sx-insurance--photo .sx-insurance__img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.sx-insurance--photo .sx-insurance__seals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--sx-color-border, rgba(15, 15, 25, .1));
}
.sx-insurance--photo .sx-insurance__seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sx-color-ink-soft);
}
.sx-insurance--photo .sx-insurance__seal img { width: 34px; height: 34px; object-fit: contain; }
@media (max-width: 1024px) {
  .sx-insurance--photo .sx-insurance__inner { grid-template-columns: 1fr; gap: 26px; }
  .sx-insurance--photo .sx-insurance__img { min-height: 220px; }
}
@media (min-width: 760px) { .sx-insurance__inner { grid-template-columns: 1.4fr 1fr; gap: 48px; } }

/* ── Eco pledge ──────────────────────────────────────────────── */
.sx-eco__inner { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
.sx-eco__badge img { width: 100%; max-width: 220px; margin-inline: auto; display: block; }
@media (min-width: 760px) { .sx-eco__inner { grid-template-columns: 1.4fr 1fr; gap: 48px; } }

/* ── Mobile padding for new sections ─────────────────────────── */
@media (max-width: 640px) {
  .sx-trust__strip { gap: 18px; }
  .sx-ba__pair { gap: 8px; }
  .sx-schedule__row { grid-template-columns: 1fr 1fr; }
  .sx-schedule__name { grid-column: 1 / -1; }
}

/* CTA wrapper polish for full-width sections */
.sx-video__cta { text-align: center; margin-top: 18px; }
.sx-featured__cta, .sx-feat-article__cta { margin-top: 4px; }

/* ── Dark-theme icon legibility ─────────────────────────────────
   In dark templates (bg is dark, ink is light), the universal default
   of `color: var(--sx-color-primary-ink, var(--sx-color-primary))` on icon containers becomes hard
   to read when the brand primary is itself a dark or saturated color.
   Force icons to white with a softer white tint background — guaranteed
   contrast on any dark bg, regardless of the primary palette choice.
   Light-theme templates are unaffected. */
html.sx-theme-dark .sx-value-card__icon,
html.sx-theme-dark .sx-contact__item-icon,
html.sx-theme-dark .sx-trust-badge__icon,
html.sx-theme-dark .sx-feature__icon,
html.sx-theme-dark .sx-svc-card__icon,
html.sx-theme-dark .sx-process__icon,
html.sx-theme-dark .sx-stat__icon {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
/* Trust badge plain icons (no container) — keep stroke white in dark */
html.sx-theme-dark .sx-trust-badge,
html.sx-theme-dark .sx-trust-strip__item,
html.sx-theme-dark .sx-feature {
  color: #ffffff;
}
/* Pure SVG icons rendered as inline children inherit currentColor;
   force white where the parent text would have been a dark primary. */
html.sx-theme-dark .sx-trust-badge svg,
html.sx-theme-dark .sx-trust-strip svg,
html.sx-theme-dark .sx-feature svg { color: #ffffff; stroke: #ffffff; }

/* ─── hero_split layout: "product-float" ──────────────────────────────
   Turns the full-bleed bg image into a CONTAINED foreground product that
   floats on a soft gradient with a 3D tilt + glowing halo. Text panel
   sits on the opposite side. Opt-in via props.layout="product-float".
   Built for bottle/can/box hero shots (beverages, cosmetics, packaged
   goods). CSS-only on the existing schema. */
.sx-hero-split--product-float {
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(60% 60% at 72% 38%, color-mix(in srgb, var(--sx-color-primary) 18%, #fff) 0%, transparent 60%),
    linear-gradient(160deg, var(--sx-color-bg-alt, #f0fdf4) 0%, #ffffff 55%, color-mix(in srgb, var(--sx-color-primary) 8%, #fff) 100%);
}
.sx-hero-split--product-float .sx-hero-split__overlay { display: none; }
/* soft airy halo centered behind the bottle */
.sx-hero-split--product-float::before {
  content: "";
  position: absolute;
  top: 50%; right: 19%;
  width: 46vw; height: 46vw; max-width: 680px; max-height: 680px;
  transform: translateY(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--sx-color-primary) 24%, #fff) 0%, transparent 66%);
  filter: blur(24px);
  opacity: .7;
  z-index: 1;
  animation: sxHeroGlow 5s ease-in-out infinite;
  pointer-events: none;
}
/* the product image: UPRIGHT, vertically centered, pulled toward center,
   bigger, with a livelier float */
.sx-hero-split--product-float .sx-hero-split__bg {
  position: absolute;
  top: 50%; right: 15%; left: auto; bottom: auto;
  width: 36%; max-width: 440px; height: auto; max-height: 86%;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 30px 46px rgba(21,128,61,.26));
  z-index: 2;
  animation: sxHeroFloat 5s ease-in-out infinite;
}
.sx-hero-split--product-float .sx-hero-split__container { position: relative; z-index: 3; }
.sx-hero-split--product-float .sx-hero-split__panel {
  max-width: 560px; margin: 0; text-align: left;
  background: none; backdrop-filter: none; box-shadow: none; padding: 0;
}
.sx-hero-split--product-float .sx-hero-split__title { color: var(--sx-color-ink); font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; }
.sx-hero-split--product-float .sx-hero-split__title .sx-hero-accent { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-hero-split--product-float .sx-hero-split__sub { color: var(--sx-color-ink-soft, #4b5d52); }
.sx-hero-split--product-float .sx-eyebrow {
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  background: #fff;
  box-shadow: 0 2px 10px rgba(21,128,61,.10);
  padding: 8px 16px; border-radius: 999px; display: inline-block; font-weight: 700;
}
/* ✓ feature pills (Caffeine Free · Vegan Certified · Gluten Free) */
.sx-hero-split__features {
  list-style: none; margin: 24px 0 32px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.sx-hero-split__features li {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #1d2733;
  font-weight: 600; font-size: 15px;
  padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 2px 12px rgba(21,128,61,.10);
}
.sx-hero-split__features li::before {
  content: "✓"; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 800;
}
/* glass variant — translucent pills for dark/cinematic heroes */
.sx-hero-split__features--glass li {
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: none;
}
.sx-hero-split__features--glass li::before { color: var(--sx-color-accent, #fff); }
@keyframes sxHeroFloat {
  0%, 100% { transform: translateY(-50%) rotate(-1.5deg); }
  50%      { transform: translateY(-66%) rotate(1.5deg); }
}
@keyframes sxHeroGlow {
  0%, 100% { opacity: .6;  transform: translateY(-50%) scale(1); }
  50%      { opacity: .85; transform: translateY(-50%) scale(1.06); }
}
@media (max-width: 860px) {
  /* Stack as a single column (text on top, product below) — the section is
     display:flex for the desktop side-by-side, so without this it would keep
     the product and text cramped side-by-side on mobile. height:auto lets the
     section grow to the stacked content instead of clipping it inside the
     fixed base height (clamp(640px,88vh,920px) + overflow:hidden). */
  .sx-hero-split--product-float {
    min-height: auto; height: auto;
    flex-direction: column-reverse;
    padding: 104px 0 56px; text-align: center;
  }
  .sx-hero-split--product-float .sx-hero-split__container { height: auto; }
  .sx-hero-split--product-float .sx-hero-split__title { font-size: clamp(30px, 7vw, 44px); }
  .sx-hero-split--product-float .sx-hero-split__bg {
    position: relative; top: auto; right: auto; left: auto;
    width: 58%; max-width: 280px; margin: 30px auto 0; display: block;
    transform: translateY(0);
    animation: sxHeroFloatM 6s ease-in-out infinite;
  }
  .sx-hero-split--product-float .sx-hero-split__panel { max-width: 100%; margin: 0 auto; text-align: center; }
  .sx-hero-split--product-float .sx-hero-split__features { justify-content: center; }
  .sx-hero-split--product-float::before { right: 50%; transform: translate(50%, -10%); top: 62%; }
}
@keyframes sxHeroFloatM { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* ─── mission_values layout: split (benefits left + badge images right) ──
   Opt-in via props.badges[]. Heading + benefit cards stack on the LEFT;
   certification/badge images sit in white cards on the RIGHT. */
.sx-values--split .sx-values__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.sx-values--split .sx-values__split-main { text-align: left; }
/* shared head is centered + margin:0 auto by default → flush it LEFT in the
   split column (correct class is sx-section__head, double underscore). */
.sx-values--split .sx-values__split-main .sx-section__head {
  text-align: left; max-width: none; margin: 0 0 28px;
}
.sx-values--split .sx-values__split-main .sx-section__head .sx-h2,
.sx-values--split .sx-values__split-main .sx-section__head .sx-eyebrow,
.sx-values--split .sx-values__split-main .sx-section__head .sx-lead {
  text-align: left; margin-left: 0; margin-right: 0;
}
.sx-values--split .sx-values__split-main .sx-values__grid {
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
.sx-values__badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.sx-values__badge {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 44px rgba(21,128,61,.12);
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: 1 / 1;
}
.sx-values__badge img {
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
}
.sx-values__badge-label {
  font-weight: 700;
  color: var(--sx-color-ink);
  font-size: 15px;
  text-align: center;
}
@media (max-width: 920px) {
  .sx-values--split .sx-values__split { grid-template-columns: 1fr; gap: 36px; }
  .sx-values__badges { max-width: 440px; margin: 0 auto; }
}
/* Narrow phones: two aspect-ratio:1/1 seal badges (each a ~150px image +
   padding) can't sit side by side under ~520px. Left as repeat(2,1fr) their
   ~465px min-content froze the whole split column at ~407px and clipped the
   section off the right edge (the "not responsive" symptom). Stack to one
   column so the badges — and the split track they drag — shrink with the
   viewport. */
@media (max-width: 560px) {
  .sx-values__badges { grid-template-columns: 1fr; max-width: 300px; }
}

/* ─── mission_values card_style: "feature" ────────────────────────────
   BIG icon in a gradient tile on the LEFT, title + text on the RIGHT,
   soft gradient card background. Opt-in via props.card_style="feature". */
.sx-values--feature .sx-value-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sx-color-primary) 8%, #fff) 0%, #ffffff 70%);
  border: 1px solid color-mix(in srgb, var(--sx-color-primary) 14%, #fff);
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 6px 22px rgba(21,128,61,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sx-values--feature .sx-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(21,128,61,.14);
}
.sx-values--feature .sx-value-card__icon {
  width: 72px; height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--sx-color-primary), color-mix(in srgb, var(--sx-color-primary) 55%, var(--sx-color-accent)));
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(21,128,61,.25);
  margin: 0;
}
.sx-values--feature .sx-value-card__icon svg {
  width: 34px; height: 34px; color: #fff; stroke: #fff;
}
.sx-values--feature .sx-value-card__body { text-align: left; }
.sx-values--feature .sx-value-card__body h3 { margin: 0 0 6px; font-size: 19px; }
.sx-values--feature .sx-value-card__body p { margin: 0; color: var(--sx-color-ink-soft, #4b5d52); }

/* Tighter vertical rhythm for the trust strip + stats bar — they sit
   right under the hero / each other, so the full 96px section padding
   left big empty gaps (see "centra esto" / padding feedback). */
.sx-trust--cards { padding-top: 44px; padding-bottom: 44px; }
.sx-achievement { padding-top: 40px; padding-bottom: 40px; }

/* eco_pledge image_style:"wide" — side image fills its column as a wide
   content photo (rounded, cover) instead of the compact badge seal. */
.sx-eco--wide .sx-eco__badge { width: 100%; }
.sx-eco--wide .sx-eco__badge img {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--sx-radius-lg, 22px);
  box-shadow: var(--sx-shadow-card, 0 12px 36px rgba(0,0,0,.10));
  margin-inline: 0;
}

/* image_treatment: "grayscale" — all photos render B&W via CSS filter.
   A color VARIATION that reuses the same images (no regeneration). Opt-in
   per template via theme.effects.image_treatment="grayscale". */
.sx-img-grayscale img:not(.sx-hero-split__bg):not(.sx-logos__img) { filter: grayscale(1) contrast(1.05); }
.sx-img-grayscale .sx-logos__img { filter: grayscale(1); }
/* hero: SUBTLE black & white (partial desaturation) — keeps a hint of color
   instead of the full grayscale used elsewhere. */
.sx-img-grayscale .sx-hero-split__bg { filter: grayscale(0.55) contrast(1.04); }

/* page_background: "blueprint" — fine graph-paper grid behind the whole page
   (architectural plan aesthetic). Subtle; sections sit on top. */
body.sx-page-bg-blueprint {
  background-color: #fbfbfa;
  background-image:
    linear-gradient(rgba(20,20,20,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,20,.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* portfolio_grid → 3 columns (responsive) */
.sx-portfolio .sx-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .sx-portfolio .sx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sx-portfolio .sx-cards { grid-template-columns: 1fr; } }
/* click-to-enlarge affordance — any lightbox trigger (gallery, portfolio,
   project_showcase) shows the zoom cursor. */
[data-sx-lightbox-src] { cursor: zoom-in; }

/* awards_press layout:"cards" — visual press cards (image + outlet + quote + link) */
.sx-press__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 920px) { .sx-press__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sx-press__grid { grid-template-columns: 1fr; } }
.sx-presscard {
  display: flex; flex-direction: column;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg, 16px);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-presscard:hover { transform: translateY(-4px); box-shadow: var(--sx-shadow-elevated, 0 16px 40px rgba(0,0,0,.12)); }
.sx-presscard__media { aspect-ratio: 16 / 10; overflow: hidden; }
.sx-presscard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-presscard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.sx-presscard__name { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-presscard__quote { margin: 0; color: var(--sx-color-ink); font-style: italic; line-height: 1.5; }
.sx-presscard__link { margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* page_background: "dots" — subtle warm dotted paper texture behind the page. */
body.sx-page-bg-dots {
  background-color: #faf6ef;
  background-image: radial-gradient(rgba(120,90,55,.07) 1.3px, transparent 1.3px);
  background-size: 24px 24px;
}

/* ═══ Project / real-estate showcase sections (parametric) ═══════════ */
/* status pill */
.sx-statpill { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.92); color:#1d2733; box-shadow:0 2px 8px rgba(0,0,0,.12); }
/* EL COLOR VIAJA EN UNA VARIABLE, NO EN `background` (09-sep-2026).
   Zoe: «tienes q permitir que se cambien los colores por lugar, RENTED
   AVAILABLE, etc». Con el color puesto directamente en `background`, la clase
   del estado ganaba siempre y un color elegido a mano no tenía forma de
   entrar. Ahora cada clase define la VARIABLE y la ficha puede pisarla con un
   `style` en línea, que gana por cascada sin subir especificidad.

   Y LA LISTA HABLA ESPAÑOL. Estaba solo en inglés, así que una web que
   escribía «DISPONIBLE» —lo normal aquí— se quedaba con el punto gris y sin
   manera de arreglarlo. */
.sx-statpill__dot { width:7px; height:7px; border-radius:50%; background:var(--sx-statpill-dot, var(--sx-color-ink-soft,#888)); }
.sx-statpill--available,.sx-statpill--done,.sx-statpill--completed,
.sx-statpill--disponible,.sx-statpill--libre,.sx-statpill--listo,.sx-statpill--terminado { --sx-statpill-dot:#16a34a; }
.sx-statpill--in-progress,.sx-statpill--en-progreso,.sx-statpill--en-obra { --sx-statpill-dot:var(--sx-color-accent,#f59e0b); }
.sx-statpill--reserved,.sx-statpill--upcoming,
.sx-statpill--reservado,.sx-statpill--apartado,.sx-statpill--proximamente,.sx-statpill--pr-ximamente { --sx-statpill-dot:#9ca3af; }
.sx-statpill--rented,.sx-statpill--alquilado,.sx-statpill--rentado,.sx-statpill--vendido,.sx-statpill--sold { --sx-statpill-dot:#6b7280; }

/* 1) property_showcase — hero + support grid */
/* LA TARJETA GRANDE LLEGA ABAJO (09-sep-2026. Zoe: «haz que la imagen
   principal esté al mismo nivel de las 4, que llegue al bottom»).
   `align-items:start` hacía que cada columna midiera lo que mide su contenido,
   así que la tarjeta destacada terminaba antes que la rejilla y dejaba un
   escalón. Con `stretch` —el valor por defecto de grid— las dos columnas miden
   igual, y como `.sx-prop2__media` ya es `flex:1`, el alto de más se lo queda
   la FOTO y no el texto. */
.sx-prop2__layout { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:stretch; }
.sx-prop2__heroCol { display:flex; }
.sx-prop2__heroCol > .sx-prop2__card { flex:1; }
.sx-prop2__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sx-prop2__card { position:relative; display:flex; flex-direction:column; border:1px solid var(--sx-color-border); border-radius:var(--sx-radius-lg,16px); overflow:hidden; background:var(--sx-color-surface,#fff); text-decoration:none; color:inherit; transition:transform .25s,box-shadow .25s;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-prop2__card:hover { transform:translateY(-3px); box-shadow:var(--sx-shadow-elevated,0 16px 40px rgba(0,0,0,.12)); }
.sx-prop2__card--hero { height:100%; }
.sx-prop2__media { position:relative; flex:1; min-height:200px; overflow:hidden; }
.sx-prop2__card--hero .sx-prop2__media { min-height:420px; }
.sx-prop2__img { width:100%; height:100%; object-fit:cover; display:block; }
.sx-prop2__status { position:absolute; top:16px; left:16px; }
.sx-prop2__body { padding:20px 22px; }
.sx-prop2__cat { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sx-color-ink-soft); }
.sx-prop2__name { font-size:22px; margin:6px 0 10px; }
.sx-prop2__card--hero .sx-prop2__name { font-size:30px; }
.sx-prop2__meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; color:var(--sx-color-ink-soft); font-size:14px; }
.sx-prop2__price { font-weight:800; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-size:17px; }
.sx-prop2__spec strong { color:var(--sx-color-ink); }
@media (max-width:900px){ .sx-prop2__layout{ grid-template-columns:1fr; } .sx-prop2__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sx-prop2__grid{ grid-template-columns:1fr; } }

/* 2) build_program — phase rows */
.sx-bprog__list { display:flex; flex-direction:column; }
.sx-bprog__row { display:grid; grid-template-columns:48px 120px minmax(180px,1fr) 80px 88px 136px; align-items:center; gap:24px; padding:22px 8px; border-top:1px solid var(--sx-color-border); text-decoration:none; color:inherit; transition:background .2s; }
.sx-bprog--nomedia .sx-bprog__row { grid-template-columns:48px minmax(180px,1fr) 80px 88px 136px; }
.sx-bprog__row:last-child { border-bottom:1px solid var(--sx-color-border); }
.sx-bprog__row:hover { background:var(--sx-color-bg-alt); }
.sx-bprog__num { font-family:var(--sx-font-display); font-size:34px; font-weight:300; color:var(--sx-color-ink-soft); opacity:.55; }
.sx-bprog__media { width:120px; height:84px; border-radius:10px; overflow:hidden; }
.sx-bprog__img { width:100%; height:100%; object-fit:cover; }
.sx-bprog__cat { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sx-color-ink-soft); }
.sx-bprog__title { font-size:20px; margin:3px 0 5px; }
.sx-bprog__desc { margin:0; color:var(--sx-color-ink-soft); font-size:14px; }
.sx-bprog__stat { text-align:right; }
.sx-bprog__statuswrap { justify-self:end; }
.sx-bprog__val { display:block; font-weight:800; color:var(--sx-color-ink); }
.sx-bprog__lbl { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sx-color-ink-soft); }
.sx-bprog__arrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-size:20px; }
@media (max-width:980px){ .sx-bprog__row{ grid-template-columns:auto 1fr auto; grid-auto-flow:row; row-gap:8px; } .sx-bprog__media,.sx-bprog__stat{ display:none; } }

/* 3) project_grid — project cards */
.sx-pgrid__grid { display:grid; gap:28px; grid-template-columns:repeat(3,1fr); }
.sx-pgrid__grid--cols-2{ grid-template-columns:repeat(2,1fr);} .sx-pgrid__grid--cols-4{ grid-template-columns:repeat(4,1fr);}
.sx-pgrid__card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.sx-pgrid__media { position:relative; aspect-ratio:1/1; border:1px solid var(--sx-color-border); border-radius:var(--sx-radius-lg,16px); overflow:hidden; background:var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-pgrid__img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.sx-pgrid__card:hover .sx-pgrid__img { transform:scale(1.04); }
.sx-pgrid__status { position:absolute; top:14px; left:14px; }
.sx-pgrid__body { padding:18px 2px 0; }
.sx-pgrid__cat { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sx-color-ink-soft); }
.sx-pgrid__name { font-size:22px; margin:6px 0 8px; }
.sx-pgrid__desc { margin:0 0 16px; color:var(--sx-color-ink-soft); font-size:14px; line-height:1.55; }
.sx-pgrid__metrics { display:flex; gap:26px; padding-top:14px; border-top:1px solid var(--sx-color-border); }
.sx-pgrid__mval { display:block; font-family:var(--sx-font-display); font-size:24px; font-weight:700; color:var(--sx-color-ink); }
.sx-pgrid__mlbl { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sx-color-ink-soft); }
.sx-pgrid__link { display:inline-block; margin-top:16px; font-weight:700; font-size:14px; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
@media (max-width:900px){ .sx-pgrid__grid,.sx-pgrid__grid--cols-2,.sx-pgrid__grid--cols-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sx-pgrid__grid{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════
   SKIN: civic — Meridian Public (gov-procurement) editorial style.
   Fully scoped under .sx-skin-civic so it affects NO other template.
   Applied via theme.skin:"civic" → body class (runtime applyTheme).
   ════════════════════════════════════════════════════════════════ */
.sx-skin-civic { --civic-dark:#1c1c18; --civic-dark2:#23231e; }
.sx-skin-civic .sx-h2, .sx-skin-civic .sx-hero-split__title { letter-spacing:-.01em; }
.sx-skin-civic .sx-eyebrow { letter-spacing:.18em; font-weight:700; font-size:11px; color:var(--sx-color-ink-soft); }

/* —— HERO (dark, full-bleed civic) —— */
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split { background:var(--civic-dark); position:relative; }
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__media img { opacity:.92; filter:saturate(.85); }
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(28,28,24,.82) 28%, rgba(28,28,24,.30) 66%, transparent); pointer-events:none; }
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title,.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__sub { text-shadow:0 2px 18px rgba(0,0,0,.5); }
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__panel { position:relative; z-index:2; background:transparent; box-shadow:none; }
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title { color:#fff; font-size:clamp(40px,6vw,76px); line-height:1.02; font-weight:500; }
/* `accent-ink` is derived against the PAGE background, which here is the cream
   #eae6dd — so the runtime darkens the sage #8a9a78 down to #5a644e to clear
   4.5:1 on cream. This hero is not on cream: it sits on --civic-dark #1c1c18,
   where that darkened value measures 2.74 and the accent word disappears.
   `accent-on-inverse` is the token derived against a DARK panel for exactly
   this case — it leaves #8a9a78 untouched and measures 5.68 here. */
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title em { color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)); font-style:italic; }
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__sub { color:rgba(255,255,255,.72); font-size:17px; max-width:30em; }
.sx-skin-civic :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-eyebrow { display:inline-block; color:rgba(255,255,255,.85); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:6px 14px 6px 12px; }

/* —— STATS strip (continues the dark hero) —— */
.sx-skin-civic [data-cms-section="stats"] { background:var(--civic-dark); margin-top:-1px; }
.sx-skin-civic [data-cms-section="stats"] .sx-section { padding-top:0; }
.sx-skin-civic [data-cms-section="stats"] .sx-achievement__grid { display:grid; grid-template-columns:repeat(3,auto); justify-content:center; gap:72px; border-top:1px solid rgba(255,255,255,.12); padding-top:36px; text-align:center; }
/* This rule never ran. `achievement_bar` emits `.sx-achievement__val` — there
   is no `.sx-stat-value` anywhere in sections.js, and `[class*="value"]` does
   not match "__val" either. So the numbers kept the base colour, which is
   `accent-ink` (#5a644e, darkened for the cream page) on this dark strip:
   2.74:1. Same root cause as the hero above. Only the colour is corrected —
   the old rule's font-size/weight are deliberately NOT resurrected, because
   they never applied and reviving them would resize type nobody asked to change. */
.sx-skin-civic [data-cms-section="stats"] .sx-achievement__val { color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)); }
.sx-skin-civic [data-cms-section="stats"] [class*="label"] { color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.04em; text-transform:lowercase; }

/* —— TRUST logo strip —— */
.sx-skin-civic [data-cms-section="trust"] .sx-logos { border-top:1px solid var(--sx-color-border); border-bottom:1px solid var(--sx-color-border); }
.sx-skin-civic [data-cms-section="trust"] .sx-logos__head { text-align:center; }
.sx-skin-civic [data-cms-section="trust"] .sx-h2 { font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--sx-color-ink); opacity:.75; font-family:var(--sx-font-body); font-weight:700; margin:0 0 38px; }
.sx-skin-civic [data-cms-section="trust"] .sx-logos__grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px 56px; }
.sx-skin-civic [data-cms-section="trust"] .sx-logos__cell { display:flex; }
.sx-skin-civic [data-cms-section="trust"] .sx-logos__name { font-family:var(--sx-font-display); font-size:21px; color:var(--sx-color-ink); opacity:.82; }
/* the monogram tile now comes from the GLOBAL .sx-logos__mark chip (runtime) */

/* —— SERVICES (numbered + tags) —— */
.sx-skin-civic .sx-svc--numbered { background:var(--sx-color-surface); border:1px solid var(--sx-color-border); border-radius:16px; padding:34px 32px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-civic .sx-svc--numbered .sx-svc__num { font-family:var(--sx-font-display); font-size:74px; line-height:1; font-weight:600; margin-bottom:14px; color:transparent; -webkit-text-stroke:1.5px var(--sx-color-accent); text-stroke:1.5px var(--sx-color-accent); }
.sx-skin-civic .sx-svc--numbered .sx-svc__title { font-family:var(--sx-font-display); font-size:27px; font-weight:500; }
.sx-skin-civic .sx-svc__tag { background:#fff; }

/* —— THE PATH (dark build_program) —— */
.sx-skin-civic [data-cms-section="path"] { background:var(--civic-dark); }
/* Same dark-panel case as the hero: this section is --civic-dark (above). */
.sx-skin-civic [data-cms-section="path"] .sx-eyebrow { color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)); }
.sx-skin-civic [data-cms-section="path"] .sx-h2, .sx-skin-civic [data-cms-section="path"] .sx-section__sub { color:#fff; }
.sx-skin-civic [data-cms-section="path"] .sx-section__sub { color:rgba(255,255,255,.6); }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__row { border-top-color:rgba(255,255,255,.12); }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__row:last-child { border-bottom-color:rgba(255,255,255,.12); }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__row:hover { background:rgba(255,255,255,.03); }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__num { color:rgba(255,255,255,.35); opacity:1; }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__title { color:#fff; font-family:var(--sx-font-display); font-size:24px; font-weight:500; }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__desc { color:rgba(255,255,255,.6); }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__val { color:#fff; }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__lbl { color:rgba(255,255,255,.45); }
.sx-skin-civic [data-cms-section="path"] .sx-bprog__arrow { color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; width:34px; height:34px; display:grid; place-items:center; justify-self:end; }
/* status pills on dark: outline by default, ACTIVE NOW filled */
.sx-skin-civic [data-cms-section="path"] .sx-statpill { background:transparent; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.25); }
.sx-skin-civic [data-cms-section="path"] .sx-statpill__dot { display:none; }
.sx-skin-civic [data-cms-section="path"] .sx-statpill--active-now { background:var(--sx-color-accent-fill, var(--sx-color-accent)); color:var(--civic-dark); border-color: var(--sx-color-accent-ink, var(--sx-color-accent)); font-weight:800; }

/* —— SECTORS (image-card) —— */
.sx-skin-civic [data-cms-section="sectors"] { text-align:center; }
.sx-skin-civic [data-cms-section="sectors"] .sx-svc--image-card { border:1px solid var(--sx-color-border); border-radius:16px; overflow:hidden; background:var(--sx-color-surface); text-align:left;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-civic [data-cms-section="sectors"] .sx-svc--image-card .sx-svc__title { font-family:var(--sx-font-display); font-size:21px; font-weight:500; }

/* —— RESULTS (project_grid case studies) —— */
.sx-skin-civic [data-cms-section="results"] .sx-pgrid__name { font-family:var(--sx-font-display); font-size:24px; font-weight:500; }
.sx-skin-civic [data-cms-section="results"] .sx-pgrid__mval { font-family:var(--sx-font-display); }
.sx-skin-civic [data-cms-section="results"] .sx-statpill--awarded { background:var(--civic-dark); color:#fff; }
.sx-skin-civic [data-cms-section="results"] .sx-statpill--awarded .sx-statpill__dot { background:var(--sx-color-accent-fill, var(--sx-color-accent)); }
.sx-skin-civic [data-cms-section="results"] .sx-statpill--in-delivery { background:#fff; color:var(--civic-dark); border:1px solid var(--sx-color-border); }

/* —— WHY (mission_values checklist) + stats —— */
.sx-skin-civic [data-cms-section="why"] .sx-h2 { font-size:clamp(30px,3.6vw,46px); font-weight:500; }
.sx-skin-civic [data-cms-section="why"] .sx-value-card { background:transparent; border:none; box-shadow:none; padding:10px 0; text-align:left; display:flex; gap:12px; align-items:flex-start; }
.sx-skin-civic [data-cms-section="why"] .sx-value-card__icon { width:24px; height:24px; background:var(--sx-color-accent-fill, var(--sx-color-accent)); color:#fff; border-radius:999px; }
.sx-skin-civic [data-cms-section="why"] .sx-value-card__icon svg { width:14px; height:14px; }
.sx-skin-civic [data-cms-section="why"] .sx-value-card h3 { font-size:15px; font-weight:500; font-family:var(--sx-font-body); color:var(--sx-color-ink-soft); }
.sx-skin-civic [data-cms-section="why-stats"] .sx-achievement__grid [class*="value"] { font-family:var(--sx-font-display); font-size:46px; font-weight:500; }

/* —— QUOTE —— */
.sx-skin-civic [data-cms-section="voices"] .sx-quote-banner { background:transparent; }
.sx-skin-civic [data-cms-section="voices"] .sx-quote-banner__overlay { display:none; }
.sx-skin-civic [data-cms-section="voices"] .sx-quote-banner__q { font-family:var(--sx-font-display); font-weight:500; font-size:clamp(28px,3.6vw,44px); line-height:1.22; color:var(--sx-color-ink); max-width:18em; margin:0 auto; }
.sx-skin-civic [data-cms-section="voices"] .sx-quote-banner__author { color:var(--sx-color-ink-soft); margin-top:24px; font-style:normal; }

/* —— CTA — full-bleed civic image band with sage-dark overlay —— */
.sx-skin-civic [data-cms-section="cta"] .sx-section { padding:0; }
.sx-skin-civic [data-cms-section="cta"] .sx-cta-mid { position:relative; border-radius:0; overflow:hidden; padding:120px 24px; isolation:isolate; }
.sx-skin-civic [data-cms-section="cta"] .sx-cta-mid__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.55); z-index:-2; }
.sx-skin-civic [data-cms-section="cta"] .sx-cta-mid::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,28,18,.78), rgba(28,28,24,.86)); }
.sx-skin-civic [data-cms-section="cta"] .sx-cta-mid__heading, .sx-skin-civic [data-cms-section="cta"] .sx-h2 { color:#fff; font-family:var(--sx-font-display); font-size:clamp(34px,4.4vw,58px); font-weight:500; }
.sx-skin-civic [data-cms-section="cta"] .sx-cta-mid__sub, .sx-skin-civic [data-cms-section="cta"] [class*="sub"] { color:rgba(255,255,255,.78); }
.sx-skin-civic [data-cms-section="cta"] .sx-btn--primary { background:#fff; color:var(--civic-dark); }

/* —— civic skin: TEAM / PRICING / FAQ / RESOURCES —— */
.sx-skin-civic [data-cms-section="team"] .sx-team__name { font-family:var(--sx-font-display); font-size:22px; font-weight:500; }
.sx-skin-civic [data-cms-section="team"] .sx-team__role { color: var(--sx-color-accent-ink, var(--sx-color-accent)); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.sx-skin-civic [data-cms-section="team"] .sx-team__photo, .sx-skin-civic [data-cms-section="team"] .sx-team__initials { border-radius:14px; }

/* HORIZONTAL program rows: [name+price+goal] | [features 2-col] | [cta] */
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__grid { display:flex; flex-direction:column; gap:0; max-width:none; margin:0; border:1px solid var(--sx-color-border); border-radius:18px; overflow:hidden; background:var(--sx-color-surface);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
/* 2 columns, no empty gutters: LEFT = identity + goal + CTA (stacked);
   RIGHT = features in 2 columns. Both top-aligned. The CTA lives in the left
   stack (under the goal) so there is never an empty right gutter. */
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card { display:grid; grid-template-columns:300px 1fr; column-gap:56px; align-items:start; padding:30px 36px; border:none; border-bottom:1px solid var(--sx-color-border); border-radius:0; background:transparent; text-align:left; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card:last-child { border-bottom:none; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card.is-featured { background:color-mix(in srgb, var(--sx-color-accent) 9%, #fff); box-shadow:inset 4px 0 0 0 var(--sx-color-accent); }
/* LEFT column (col 1) */
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__badge { position:static; transform:none; top:auto; left:auto; grid-column:1; justify-self:start; background:var(--sx-color-accent-fill, var(--sx-color-accent)); color:#fff; border-radius:999px; padding:4px 12px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; white-space:nowrap; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__name { grid-column:1; font-family:var(--sx-font-display); font-size:23px; font-weight:600; margin:0 0 6px; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__price { grid-column:1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__price span:first-child { font-family:var(--sx-font-display); font-size:30px; font-weight:600; color:var(--sx-color-ink); }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__period { color:var(--sx-color-ink-soft); font-size:13px; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__desc { grid-column:1; color:var(--sx-color-ink-soft); font-size:13px; line-height:1.5; margin:10px 0 0; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card .sx-btn { grid-column:1; justify-self:start; margin-top:20px; min-width:188px; justify-content:center; }
/* RIGHT column (col 2) — features fill the width in 2 columns */
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__features { grid-column:2; grid-row:1 / span 6; align-self:start; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; align-content:start; }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__features li { position:relative; padding-left:24px; font-size:13px; line-height:1.45; color:var(--sx-color-ink-soft); }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__features li::before { content:"✓"; position:absolute; left:0; top:0; color: var(--sx-color-accent-ink, var(--sx-color-accent)); font-weight:800; }
@media (max-width:820px){ .sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card { grid-template-columns:1fr; } .sx-skin-civic [data-cms-section="pricing"] .sx-pricing__features { grid-column:1; grid-row:auto; margin-top:18px; } }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card .sx-btn--ghost { background:transparent; border:1px solid var(--sx-color-border); color:var(--sx-color-ink); }
.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card.is-featured .sx-btn--primary { background:var(--sx-color-accent-fill, var(--sx-color-accent)); border-color: var(--sx-color-accent-ink, var(--sx-color-accent)); color:var(--sx-color-on-accent, var(--sx-color-on-primary)); }
@media (max-width:900px){ .sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card { grid-template-columns:1fr; row-gap:14px; } .sx-skin-civic [data-cms-section="pricing"] .sx-pricing__features,.sx-skin-civic [data-cms-section="pricing"] .sx-pricing__card .sx-btn { grid-column:1; grid-row:auto; } }

.sx-skin-civic [data-cms-section="faq"] .sx-faq__q, .sx-skin-civic [data-cms-section="faq"] .sx-faq__question, .sx-skin-civic [data-cms-section="faq"] summary { font-family:var(--sx-font-display); font-size:20px; font-weight:500; }

.sx-skin-civic [data-cms-section="resources"] .sx-news__title { font-family:var(--sx-font-display); font-size:22px; font-weight:500; }
.sx-skin-civic [data-cms-section="resources"] .sx-news__date { color: var(--sx-color-accent-ink, var(--sx-color-accent)); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.sx-skin-civic [data-cms-section="resources"] .sx-news__card { border:1px solid var(--sx-color-border); border-radius:16px; overflow:hidden; background:var(--sx-color-surface);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}

/* ════════════════════════════════════════════════════════════════
   SKIN: fiesta — Mariachi Corazón (mariachi-band). Festive dark gold/red.
   Scoped under .sx-skin-fiesta. Dark theme (sx-theme-dark) auto-applies
   from the dark bg; this layers the festive flourishes on top.
   ════════════════════════════════════════════════════════════════ */
.sx-skin-fiesta .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); letter-spacing:.18em; font-weight:700; }
.sx-skin-fiesta .sx-h2 { font-family:var(--sx-font-display); font-weight:600; }

/* HERO */
.sx-skin-fiesta :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split { background:#140c0e; }
.sx-skin-fiesta :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__bg { opacity:.62; }
.sx-skin-fiesta :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__panel { background:transparent; box-shadow:none; }
.sx-skin-fiesta :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title { font-family:var(--sx-font-display); color:#fff; font-size:clamp(46px,7vw,96px); line-height:1; font-weight:700; }
.sx-skin-fiesta :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title em { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-style:italic; }
.sx-skin-fiesta :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__sub { color:rgba(246,237,225,.82); font-size:18px; }

/* STATS (divided) */
.sx-skin-fiesta [data-cms-section="stats"] [class*="value"] { font-family:var(--sx-font-display); color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-size:46px; font-weight:600; }
.sx-skin-fiesta [data-cms-section="stats"] [class*="label"] { color:var(--sx-color-ink-soft); }

/* OCCASIONS (image-card) */
.sx-skin-fiesta [data-cms-section="occasions"] .sx-svc--image-card { border:1px solid var(--sx-color-border); border-radius:16px; overflow:hidden; background:var(--sx-color-surface);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-fiesta [data-cms-section="occasions"] .sx-svc--image-card .sx-svc__title { font-family:var(--sx-font-display); font-size:23px; font-weight:600; color:var(--sx-color-ink); }
.sx-skin-fiesta [data-cms-section="occasions"] .sx-svc--image-card .sx-svc__desc { color:var(--sx-color-ink-soft); }

/* WHY (feature cards on dark) */
.sx-skin-fiesta [data-cms-section="why"] .sx-value-card { background:rgba(224,179,65,.05); border:1px solid var(--sx-color-border); border-radius:16px; }
.sx-skin-fiesta [data-cms-section="why"] .sx-value-card h3 { color:var(--sx-color-ink); font-family:var(--sx-font-display); font-size:19px; font-weight:600; }
.sx-skin-fiesta [data-cms-section="why"] .sx-value-card__icon { background:color-mix(in srgb, var(--sx-color-primary) 18%, transparent); color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* BAND (founder_note) */
.sx-skin-fiesta [data-cms-section="band"] .sx-founder { background:var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-fiesta [data-cms-section="band"] .sx-founder__quote { font-family:var(--sx-font-display); font-style:italic; color:var(--sx-color-ink); font-size:clamp(22px,2.6vw,32px); line-height:1.4; }
.sx-skin-fiesta [data-cms-section="band"] .sx-founder__name { font-family:var(--sx-font-display); color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-size:22px; }
.sx-skin-fiesta [data-cms-section="band"] .sx-founder__role { color:var(--sx-color-ink-soft); }

/* COMBOS (pricing) — festive gold featured */
.sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__card { background:var(--sx-color-surface); border:1px solid var(--sx-color-border); border-radius:18px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__card.is-featured { border-color: var(--sx-color-primary-ink, var(--sx-color-primary)); box-shadow:0 0 0 1px var(--sx-color-primary), var(--sx-shadow-elevated); }
.sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__name { font-family:var(--sx-font-display); font-size:24px; font-weight:600; color:var(--sx-color-ink); }
.sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__price span:first-child { font-family:var(--sx-font-display); color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__badge { background:var(--sx-color-primary-fill, var(--sx-color-primary)); color:var(--sx-color-on-primary); }
.sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__features li { color:var(--sx-color-ink-soft); }
.sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__features li::before, .sx-skin-fiesta [data-cms-section="combos"] .sx-pricing__features li svg { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-skin-fiesta [data-cms-section="combos"] .sx-btn--primary { background:var(--sx-color-primary-fill, var(--sx-color-primary)); border-color: var(--sx-color-primary-ink, var(--sx-color-primary)); color:var(--sx-color-on-primary); }
.sx-skin-fiesta [data-cms-section="combos"] .sx-btn--ghost { border:1px solid var(--sx-color-border); color:var(--sx-color-ink); }

/* REPERTOIRE (text_block) */
.sx-skin-fiesta [data-cms-section="repertoire"] { text-align:center; }
.sx-skin-fiesta [data-cms-section="repertoire"] .sx-h2 { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-skin-fiesta [data-cms-section="repertoire"] .sx-textblock__body { color:var(--sx-color-ink-soft); font-size:17px; line-height:1.7; max-width:44em; margin:0 auto; }

/* CTA (image band + dark scrim) */
.sx-skin-fiesta [data-cms-section="cta"] .sx-cta-mid { border-radius:0; overflow:hidden; }
.sx-skin-fiesta [data-cms-section="cta"] .sx-cta-mid__bg { filter:saturate(1.05) brightness(.4); }
.sx-skin-fiesta [data-cms-section="cta"] .sx-cta-mid__heading, .sx-skin-fiesta [data-cms-section="cta"] .sx-h2 { color:#fff; font-family:var(--sx-font-display); font-size:clamp(30px,4vw,50px); font-weight:600; }
.sx-skin-fiesta [data-cms-section="cta"] [class*="sub"] { color:rgba(255,255,255,.82); }
.sx-skin-fiesta [data-cms-section="cta"] .sx-btn--primary { background:var(--sx-color-primary-fill, var(--sx-color-primary)); border-color: var(--sx-color-primary-ink, var(--sx-color-primary)); color:var(--sx-color-on-primary); }

/* ════════════════════════════════════════════════════════════════
   SKIN: pro — shared lead-gen skin for professional / consulting / coaching
   templates. Structural + typographic only; each template sets its OWN
   colors via theme.colors so IT/HR/cyber/data each get a distinct accent.
   Scoped under .sx-skin-pro → affects no other template.
   ════════════════════════════════════════════════════════════════ */
.sx-skin-pro .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); letter-spacing:.16em; font-weight:700; font-size:11px; }
.sx-skin-pro .sx-h2 { letter-spacing:-.01em; font-weight:700; }

/* HERO — dark editorial panel over image */
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split { background:#0b0e14; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__bg { opacity:.92; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, color-mix(in srgb, var(--sx-color-ink) 68%, transparent) 26%, color-mix(in srgb, var(--sx-color-ink) 30%, transparent) 62%, transparent); pointer-events:none; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__panel { position:relative; z-index:2; background:transparent; box-shadow:none; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title { color:#fff; font-size:clamp(40px,5.5vw,72px); line-height:1.04; font-weight:800; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title em { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-style:normal; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__sub { color:rgba(255,255,255,.75); font-size:17px; max-width:32em; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__eyebrow,.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-eyebrow { color:#fff; }
.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title,.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__sub,.sx-skin-pro :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-eyebrow { text-shadow:0 2px 16px rgba(0,0,0,.5); }
/* opt-in clear hero (theme.effects.hero_clear) — no overlay/wash, video shows
   full; text stays white with a soft shadow for legibility. Works on any skin. */
.sx-hero-clear :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split { background:transparent !important; }
.sx-hero-clear :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__bg { opacity:1 !important; }
.sx-hero-clear :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split::after { content:none !important; }
.sx-hero-clear :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__overlay { background:none !important; backdrop-filter:none !important; }
.sx-hero-clear :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title,
.sx-hero-clear :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__sub,
.sx-hero-clear :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-eyebrow { text-shadow:0 2px 20px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4); }
/* opt-in tinted hero (theme.effects.hero_tint) — the SAME cinematic gradient
   as cleaning-dmv (radial of the template's primary + dark linear scrim), so
   the video shows through with a brand-colored glow (e.g. data-ai purple).
   Drops the pro skin's flat ink wash. Reusable on any skin. */
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split { background:#0b0b12 !important; }
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__bg { opacity:.96 !important; }
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split::after { content:none !important; }
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__overlay {
  background:
    radial-gradient(120% 85% at 80% 100%, color-mix(in srgb, var(--sx-color-primary) 38%, transparent) 0%, transparent 58%),
    linear-gradient(135deg, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.42) 100%) !important;
  backdrop-filter:none !important; }
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title,
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__sub,
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-eyebrow { text-shadow:0 2px 18px rgba(0,0,0,.45); }
/* the emphasized word gets a soft WHITE glow instead of the dark shadow */
.sx-hero-tint :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title em { text-shadow:0 0 18px rgba(255,255,255,.55), 0 1px 2px rgba(255,255,255,.4); }

/* STATS */
.sx-skin-pro [data-cms-section="stats"] [class*="value"] { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight:800; font-size:42px; }

/* TRUSTED BY (logos chip from global runtime) */
.sx-skin-pro [data-cms-section="trust"] .sx-logos__head .sx-h2 { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--sx-color-ink-soft); font-weight:700; }

/* SERVICES (numbered) */
.sx-skin-pro .sx-svc--numbered { background:var(--sx-color-surface); border:1px solid var(--sx-color-border); border-radius:16px; padding:30px 28px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-pro .sx-svc--numbered .sx-svc__num { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight:800; font-size:64px; line-height:1; margin-bottom:14px; }
.sx-skin-pro .sx-svc--numbered .sx-svc__title { font-size:21px; font-weight:700; }
.sx-skin-pro .sx-svc__tag { background:var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}

/* SERVICES (image-card) for sectors */
.sx-skin-pro .sx-svc--image-card { border:1px solid var(--sx-color-border); border-radius:16px; overflow:hidden; background:var(--sx-color-surface);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-pro .sx-svc--image-card .sx-svc__title { font-size:19px; font-weight:700; }

/* WHY (mission_values feature) */
.sx-skin-pro [data-cms-section="why"] .sx-value-card { background:var(--sx-color-surface); border:1px solid var(--sx-color-border); border-radius:16px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-pro [data-cms-section="why"] .sx-value-card h3 { font-size:18px; font-weight:700; }
.sx-skin-pro [data-cms-section="why"] .sx-value-card__icon { background:var(--sx-color-primary-fill, var(--sx-color-primary)); box-shadow:0 8px 20px color-mix(in srgb, var(--sx-color-primary) 30%, transparent); }
.sx-skin-pro [data-cms-section="why"] .sx-value-card__icon svg { color:#fff; stroke:#fff; }

/* PRICING — featured uses accent */
.sx-skin-pro [data-cms-section="pricing"] .sx-pricing__card.is-featured { border-color: var(--sx-color-primary-ink, var(--sx-color-primary)); box-shadow:0 0 0 1px var(--sx-color-primary), var(--sx-shadow-elevated); }
.sx-skin-pro [data-cms-section="pricing"] .sx-pricing__badge { background:var(--sx-color-primary-fill, var(--sx-color-primary)); color:#fff; }
.sx-skin-pro [data-cms-section="pricing"] .sx-pricing__price span:first-child { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight:800; }
.sx-skin-pro [data-cms-section="pricing"] .sx-pricing__features li::before,.sx-skin-pro [data-cms-section="pricing"] .sx-pricing__features li svg { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* RESULTS (project_grid) */
.sx-skin-pro [data-cms-section="results"] .sx-pgrid__name { font-size:22px; font-weight:700; }
.sx-skin-pro [data-cms-section="results"] .sx-statpill--completed,.sx-skin-pro [data-cms-section="results"] .sx-statpill--done { background:var(--sx-color-ink); color:#fff; }

/* CTA */
.sx-skin-pro [data-cms-section="cta"] .sx-cta-mid { background:var(--sx-color-ink); border-radius:0; overflow:hidden; }
.sx-skin-pro [data-cms-section="cta"] .sx-cta-mid__bg { filter:brightness(.42) saturate(.9); }
.sx-skin-pro [data-cms-section="cta"] .sx-cta-mid__heading,.sx-skin-pro [data-cms-section="cta"] .sx-h2 { color:#fff; font-weight:800; font-size:clamp(30px,4vw,48px); }
.sx-skin-pro [data-cms-section="cta"] [class*="sub"] { color:rgba(255,255,255,.78); }
.sx-skin-pro [data-cms-section="cta"] .sx-btn--primary { background:var(--sx-color-primary-fill, var(--sx-color-primary)); border-color: var(--sx-color-primary-ink, var(--sx-color-primary)); color:var(--sx-color-on-primary); }

/* ════════════════════════════════════════════════════════════════
   SKIN: boutique — warm artisan shop (jewelry / handmade / accessories).
   Scoped under .sx-skin-boutique. Light warm theme; colors from theme.json.
   ════════════════════════════════════════════════════════════════ */
.sx-skin-boutique .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); letter-spacing:.18em; font-weight:700; }
.sx-skin-boutique .sx-h2 { font-family:var(--sx-font-display); font-weight:600; letter-spacing:-.01em; }
/* HERO — warm lifestyle, soft text panel */
/* hero uses the BASE cinematic + image_side:center treatment (same as
   cleaning-dmv) — full-bleed media, centered text. Only the accent word +
   a warm "fire" overlay are boutique. */
.sx-skin-boutique :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title { font-family:var(--sx-font-display); font-weight:600; }
.sx-skin-boutique :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__title em { color:#eccd84; font-style:italic; }
/* warm "fire" overlay — transparent up top, deep orange rising from the
   bottom with a glowing ember, so the video reads warm. Keeps a soft center
   scrim so the centered text stays legible. */
.sx-skin-boutique :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__overlay {
  background:
    linear-gradient(to top, rgba(138,102,20,.55) 0%, rgba(186,146,52,.26) 26%, rgba(28,22,10,.12) 60%, transparent 100%),
    radial-gradient(130% 85% at 50% 132%, rgba(232,190,92,.34) 0%, rgba(232,190,92,.08) 42%, transparent 66%) !important;
}
.sx-skin-boutique :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__panel h1,
.sx-skin-boutique :is([data-cms-section="hero"],[data-section-type^="hero"]) .sx-hero-split__panel p { text-shadow:0 1px 16px rgba(40,16,6,.45); }
/* value bar (mission_values minimal) */
.sx-skin-boutique [data-cms-section="value"] .sx-values__grid { border-top:1px solid var(--sx-color-border); border-bottom:1px solid var(--sx-color-border); padding:8px 0; }
.sx-skin-boutique [data-cms-section="value"] .sx-value-card { background:transparent; border:none; box-shadow:none; text-align:center; }
.sx-skin-boutique [data-cms-section="value"] .sx-value-card h3 { font-family:var(--sx-font-display); font-size:17px; font-weight:600; }
.sx-skin-boutique [data-cms-section="value"] .sx-value-card__icon { background:color-mix(in srgb, var(--sx-color-primary) 12%, transparent); color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
/* shop product cards */
.sx-skin-boutique [data-cms-section="shop"] .sx-product-card__title,.sx-skin-boutique [data-cms-section="shop"] [class*="title"] { font-family:var(--sx-font-display); }
/* style collections (image-card) */
.sx-skin-boutique [data-cms-section="styles"] .sx-svc--image-card { border:1px solid var(--sx-color-border); border-radius:16px; overflow:hidden; background:var(--sx-color-surface);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-boutique [data-cms-section="styles"] .sx-svc--image-card .sx-svc__title { font-family:var(--sx-font-display); font-size:20px; font-weight:600; }
/* artisan founder_note */
.sx-skin-boutique [data-cms-section="about"] .sx-founder { background:var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-skin-boutique [data-cms-section="about"] .sx-founder__quote { font-family:var(--sx-font-display); font-style:italic; font-size:clamp(22px,2.6vw,30px); color:var(--sx-color-ink); line-height:1.4; }
.sx-skin-boutique [data-cms-section="about"] .sx-founder__name { font-family:var(--sx-font-display); color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
/* gallery rounded warm */
.sx-skin-boutique [data-cms-section="gallery"] .sx-gallery__item img,.sx-skin-boutique [data-cms-section="gallery"] img { border-radius:14px; }

/* ux-product "A look at our craft" — portfolio in 4 columns */
.sx-skin-pro [data-cms-section="portfolio"] .sx-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .sx-skin-pro [data-cms-section="portfolio"] .sx-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sx-skin-pro [data-cms-section="portfolio"] .sx-cards { grid-template-columns:1fr; } }

/* ── Video gallery (R.video_gallery) ─────────────────────────────── */
.sx-vgallery__grid { display:grid; grid-template-columns:repeat(var(--vg-cols,3),1fr); gap:28px; margin-top:32px; }
.sx-vgallery__card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.sx-vgallery__thumb { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:8px; background:#0c0c0c; }
.sx-vgallery__poster, .sx-vgallery__ph, .sx-vgallery__video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.sx-vgallery__video { background:#0c0c0c; }
.sx-vgallery__card:hover .sx-vgallery__poster { transform:scale(1.05); }
.sx-vgallery__play { position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%;
  background:rgba(255,255,255,.85); display:grid; place-items:center; transition:transform .2s, background .2s; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.sx-vgallery__play::after { content:""; width:0; height:0; margin-left:7px;
  border-left:24px solid var(--sx-color-primary,#1f3a5f); border-top:15px solid transparent; border-bottom:15px solid transparent; }
.sx-vgallery__card:hover .sx-vgallery__play { background:#fff; transform:scale(1.08); }
.sx-vgallery__body { padding:18px 6px 0; text-align:center; }
.sx-vgallery__title { font-size:1.3rem; font-weight:700; margin:0 0 6px; }
.sx-vgallery__desc { color:var(--sx-color-ink-soft,#5a6470); font-size:.95rem; line-height:1.6; margin:0; }
@media (max-width:980px){ .sx-vgallery__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .sx-vgallery__grid { grid-template-columns:1fr; } }

/* ── services_visual image-card: viñetas (09-sep-2026) ───────────────── */
.sx-svc--image-card .sx-svc__bullets { list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--sx-color-border,#e5e7eb); display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.sx-svc--image-card .sx-svc__bullets li { font-size:.9rem; color:var(--sx-color-ink-soft,#5a6470); line-height:1.45; }
.sx-svc--image-card .sx-svc__bullets li::before { content:"■"; font-size:.5rem; color:var(--sx-color-accent,#7C3AED); margin-right:9px; vertical-align:middle; }
@media (max-width:620px){ .sx-svc--image-card .sx-svc__bullets { grid-template-columns:1fr; } }

/* ── Video gallery · layout "featured" (09-sep-2026) ─────────────────
   Reproductor grande + panel de texto + tira de miniaturas con flechas.
   Tokens del tema: el borde y la etiqueta usan el acento; el panel usa la
   superficie. Sin tema oscuro sigue legible: todo va sobre --sx-color-*. */
.sx-vgf__stage { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.6fr); gap:18px; margin-top:34px; align-items:stretch; }
.sx-vgf__player { position:relative; aspect-ratio:16/9; min-height:240px; background:#000; border:1px solid color-mix(in srgb, var(--sx-color-accent,#7C3AED) 45%, transparent); box-shadow:0 35px 100px rgba(0,0,0,.35); overflow:hidden; }
.sx-vgf__frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover; background:#000; }
.sx-vgf__frame--empty { background:linear-gradient(160deg, var(--sx-color-surface,#111), #000); }
.sx-vgf__copy { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; padding:34px; border:1px solid var(--sx-color-border,rgba(255,255,255,.14)); background:linear-gradient(160deg, var(--sx-color-surface,#161717), var(--sx-color-bg-alt, var(--sx-color-bg,#090a0a))); min-width:0; }
.sx-vgf__label { color:var(--sx-color-accent-ink, var(--sx-color-accent,#7C3AED)); letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; font-weight:700; }
.sx-vgf__title { font-family:var(--sx-font-display, inherit); font-size:clamp(1.6rem, 2.6vw, 2.6rem); line-height:1.02; margin:12px 0; font-weight:600; color:var(--sx-color-ink,#fff); overflow-wrap:anywhere; }
.sx-vgf__desc { color:var(--sx-color-ink-soft,#999); line-height:1.7; margin:0; font-size:.98rem; max-width:34ch; }
.sx-vgf__strip { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:10px; align-items:center; margin-top:18px; }
.sx-vgf__thumbs { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:2px; }
.sx-vgf__thumbs::-webkit-scrollbar { display:none; }
.sx-vgf__thumb { flex:0 0 clamp(150px, 16.2%, 220px); aspect-ratio:16/10; scroll-snap-align:start; border:1px solid var(--sx-color-border,rgba(255,255,255,.14)); background:#111 center/cover no-repeat; position:relative; cursor:pointer; padding:0; overflow:hidden; transition:border-color .25s, transform .25s; }
.sx-vgf__thumb::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.08)); transition:.3s; }
.sx-vgf__thumb:hover::before, .sx-vgf__thumb.is-active::before { background:color-mix(in srgb, var(--sx-color-accent,#7C3AED) 15%, transparent); }
.sx-vgf__thumb.is-active { border-color:var(--sx-color-accent,#7C3AED); }
.sx-vgf__thumb:hover { transform:translateY(-2px); }
.sx-vgf__play { position:absolute; left:14px; bottom:12px; width:36px; height:36px; border-radius:50%; background:var(--sx-color-accent,#7C3AED); display:grid; place-items:center; }
.sx-vgf__play::after { content:""; width:0; height:0; margin-left:3px; border-left:11px solid var(--sx-color-on-primary,#111); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.sx-vgf__arrow { width:44px; height:44px; border-radius:50%; border:1px solid var(--sx-color-border,rgba(255,255,255,.2)); background:var(--sx-color-surface,#141515); color:var(--sx-color-ink,#fff); font-size:1.6rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.sx-vgf__arrow:hover { border-color:var(--sx-color-accent,#7C3AED); color:var(--sx-color-accent-ink, var(--sx-color-accent,#7C3AED)); }
.sx-vgf__arrow[disabled] { opacity:.35; cursor:default; }
@media (max-width:850px){
  .sx-vgf__stage { grid-template-columns:1fr; }
  /* móvil: sin altura mínima; con aspect-ratio 16/9 el mínimo de 240px obligaba a 427px de ancho y el vídeo se salía de la columna (09-sep-2026) */
  .sx-vgf__player { min-height:0; width:100%; min-width:0; }
  .sx-vgf__copy { padding:24px; }
  .sx-vgf__thumb { flex-basis:46%; }
  .sx-vgf__strip { grid-template-columns:36px minmax(0,1fr) 36px; gap:6px; }
  .sx-vgf__arrow { width:36px; height:36px; }
}

/* ── Before/After cards (R.before_after_cards) ───────────────────── */
.sx-bac__grid { display:grid; grid-template-columns:repeat(var(--bac-cols,2),1fr); gap:36px; margin-top:24px; }
/* Single column → a big, centered, elegant comparator (faces / lashes). */
.sx-bac__grid--one { max-width:820px; margin-inline:auto; }
.sx-bac__card { background:var(--sx-color-surface,#fff); border:1px solid var(--sx-color-border,#ececf3); border-radius:18px; padding:22px 26px 28px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.07);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-bac__icon { display:inline-grid; place-items:center; width:50px; height:50px; border-radius:50%; background:var(--sx-color-primary,#1f3a5f); color:var(--sx-color-on-primary,#fff); margin:0 auto 12px; }
.sx-bac__icon svg { width:24px; height:24px; }
.sx-bac__title { font-size:1.4rem; font-weight:700; color:var(--sx-color-primary-ink, var(--sx-color-primary,#1f3a5f)); margin:0 0 6px; }
.sx-bac__desc { color:var(--sx-color-ink-soft,#5a6470); font-size:.95rem; line-height:1.6; margin:0 0 14px; }
/* Wider, cinematic 3:2 frame — flatters faces / lash close-ups. */
.sx-bac__ba { position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:16px; cursor:ew-resize; user-select:none; touch-action:none; background:#0c0c0c; box-shadow:0 12px 34px rgba(0,0,0,.14); }
.sx-bac__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sx-bac__after { clip-path: inset(0 0 0 var(--pos,50%)); }
.sx-bac__line { position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:rgba(255,255,255,.95); transform:translateX(-50%); box-shadow:0 0 14px rgba(0,0,0,.45); pointer-events:none; }
/* Elegant white handle with the primary-colored arrows + soft ring. */
.sx-bac__handle { position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:#fff; color:var(--sx-color-primary,#1f3a5f); display:grid; place-items:center; box-shadow:0 6px 22px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.05); pointer-events:none; transition:transform .15s ease; }
.sx-bac__ba:hover .sx-bac__handle, .sx-bac__ba:active .sx-bac__handle { transform:translate(-50%,-50%) scale(1.07); }
.sx-bac__ba:focus-visible { outline:3px solid var(--sx-color-accent,#b8893b); outline-offset:2px; }
@media (max-width:980px){ .sx-bac__grid { grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }

/* Before/After SLIDER — single interactive pair (reuses .sx-bac__ba mechanics). */
.sx-bas__wrap { max-width:760px; margin-inline:auto; margin-top:24px; }
.sx-bas__tag { position:absolute; top:14px; z-index:3; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); padding:5px 11px; border-radius:999px; pointer-events:none; }
.sx-bas__tag--before { left:14px; }
.sx-bas__tag--after { right:14px; }

/* Before/After SLIDER · variante EDITORIAL (15-sep-2026, Zoe: «el antes y
   después así», diseño teal de Best Quality Cleaners). OPT-IN por
   `layout:"editorial"`: todo cuelga de .sx-bas--editorial y la versión de
   siempre no cambia. Colores SOLO de los tokens del tema (--sx-color-*): el
   panel es el primario muy diluido sobre el fondo, así funciona con cualquier
   paleta y no sólo con el teal. */
.sx-bas--editorial .sx-bas__panel {
  background: color-mix(in srgb, var(--sx-color-primary, #0f5c5c) 8%, var(--sx-color-bg, #fff));
  border-radius: 8px;
  padding: clamp(28px, 5vw, 70px) clamp(20px, 4vw, 56px);
}
.sx-bas--editorial .sx-bas__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: clamp(24px, 3.2vw, 42px);
}
.sx-bas--editorial .sx-bas__head .sx-section__head { text-align: left; margin: 0; max-width: 640px; }
.sx-bas--editorial .sx-bas__aside {
  max-width: 330px; margin: 0; padding-bottom: 6px;
  font-size: 15px; line-height: 1.65; color: var(--sx-color-ink-soft, #637775);
}
.sx-bas--editorial .sx-bas__wrap { max-width: none; margin-top: 0; }
.sx-bas--editorial .sx-bac__ba {
  aspect-ratio: 3 / 1; min-height: 320px; border-radius: 6px;
  box-shadow: none; background: var(--sx-color-bg-alt, #e6ece9);
}
.sx-bas--editorial .sx-bac__line { box-shadow: none; }
.sx-bas--editorial .sx-bac__handle {
  width: 48px; height: 48px;
  color: var(--sx-color-primary, #0f5c5c);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.sx-bas--editorial .sx-bas__tag {
  top: auto; bottom: 20px;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px;
  color: var(--sx-color-ink, #163f40);
  background: color-mix(in srgb, var(--sx-color-surface, #fffdf5) 92%, transparent);
  padding: 7px 17px; border-radius: 3px;
}
.sx-bas--editorial .sx-bas__tag--before { left: 20px; }
.sx-bas--editorial .sx-bas__tag--after { right: 20px; }
/* ── CABECERA EDITORIAL compartida (sx-edhead) ─────────────────────────
   Servicios y pasos editoriales (15-sep-2026). Titular a la izquierda y el
   texto corto a la derecha; `--centro` lo apila al centro. */
.sx-edhead { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: clamp(26px, 3.2vw, 42px); }
.sx-edhead .sx-section__head { text-align: left; margin: 0; max-width: 680px; }
.sx-edhead__aside { max-width: 330px; margin: 0; padding-bottom: 6px;
  font-size: 15px; line-height: 1.65; color: var(--sx-color-ink-soft, #637775); }
.sx-edhead--centro { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.sx-edhead--centro .sx-section__head { text-align: center; margin-inline: auto; }
.sx-edhead--centro .sx-edhead__aside { max-width: 560px; padding-bottom: 0; }
@media (max-width: 760px) {
  .sx-edhead { display: block; }
  .sx-edhead__aside { margin-top: 16px; max-width: none; }
  .sx-edhead--centro .sx-edhead__aside { margin-inline: auto; }
}

/* ── SERVICIOS · variante EDITORIAL (sx-svced) ──────────────────────────
   Tarjetas grandes con «01 / etiqueta», la primera destacada en el color del
   tema, y el resto en filas finas. Todo bajo sus propias clases: el resto de
   layouts de services_visual no se tocan. */
.sx-svced__grid { display: grid; grid-template-columns: repeat(var(--svced-cols, 3), minmax(0, 1fr)); gap: 20px; }
.sx-svced__card {
  position: relative; display: flex; flex-direction: column; min-height: 330px;
  padding: clamp(24px, 2.4vw, 33px); border-radius: 5px;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, #dce5df);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sx-svced__card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px color-mix(in srgb, var(--sx-color-primary, #095354) 10%, transparent); }
.sx-svced__num { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--sx-color-ink-soft, #627f79); }
.sx-svced__title {
  font-family: var(--sx-font-display, Georgia, serif); font-weight: 400;
  font-size: clamp(27px, 2.3vw, 33px); line-height: 1.2; letter-spacing: -.03em;
  margin: 25px 0 17px; color: var(--sx-color-ink, #163f40);
}
.sx-svced__desc { font-size: 14px; line-height: 1.65; max-width: 300px; margin: 0; color: var(--sx-color-ink-soft, #637775); }
.sx-svced__pie { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: auto; padding-top: 35px; font-size: 12px; color: var(--sx-color-ink, #163f40); }
.sx-svced__arrow { font-size: 22px; line-height: 1; color: inherit; text-decoration: none; }
/* La tarjeta entera lleva al destino: el enlace de la flecha se estira. */
.sx-svced__card .sx-svced__arrow::after, .sx-svced__row .sx-svced__arrow::after { content: ""; position: absolute; inset: 0; }
.sx-svced__arrow:focus-visible { outline: none; }
.sx-svced__card:has(.sx-svced__arrow:focus-visible), .sx-svced__row:has(.sx-svced__arrow:focus-visible) {
  outline: 3px solid var(--sx-color-accent, var(--sx-color-primary, #095354)); outline-offset: 4px; }
.sx-svced__card--destacada { background: var(--sx-color-primary-fill, var(--sx-color-primary, #095354)); border-color: var(--sx-color-primary-fill, var(--sx-color-primary, #095354)); }
.sx-svced__card--destacada .sx-svced__title,
.sx-svced__card--destacada .sx-svced__pie { color: var(--sx-color-on-primary, #fff); }
.sx-svced__card--destacada .sx-svced__num,
.sx-svced__card--destacada .sx-svced__desc { color: color-mix(in srgb, var(--sx-color-on-primary, #fff) 72%, transparent); }
.sx-svced__more { display: grid; grid-template-columns: repeat(var(--svced-cols, 3), minmax(0, 1fr)); column-gap: 30px; margin-top: 33px; }
.sx-svced__row { position: relative; display: flex; align-items: center; gap: 16px; padding: 17px 0;
  border-bottom: 1px solid var(--sx-color-border, #dce5df); }
.sx-svced__rownum { font-size: 12px; color: var(--sx-color-ink-soft, #7e9791); flex: 0 0 auto; }
.sx-svced__rowbody { min-width: 0; }
.sx-svced__rowtitle { font-size: 17px; font-weight: 400; margin: 0; color: var(--sx-color-ink, #163f40); }
.sx-svced__rowdesc { font-size: 12px; margin: 6px 0 0; color: var(--sx-color-ink-soft, #637775); }
.sx-svced__arrow--row { margin-left: auto; font-size: 18px; }
@media (max-width: 900px) {
  .sx-svced__grid, .sx-svced__more { grid-template-columns: 1fr; }
  .sx-svced__card { min-height: 270px; }
  .sx-svced__desc { max-width: none; }
  .sx-svced__more { margin-top: 20px; }
}

/* ── SERVICIOS · variante SIGNATURE (sx-svcsig) ─────────────────────────
   21-sep-2026, plantilla muse-makeup. Tarjetas de «ocasión»: número, palabra
   grande en cursiva (`text`), título, texto, lista con líneas finas y enlace
   subrayado; la del medio va en el color de acento. Sólo sus clases. */
.sx-svcsig__grid { display: grid; grid-template-columns: repeat(var(--svcsig-cols, 3), minmax(0, 1fr)); gap: 18px; }
.sx-svcsig__card {
  display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px);
  background: var(--sx-color-surface, #fff);
  --sx-color-ink: var(--sx-color-ink-on-surface, var(--sx-color-ink));
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-soft));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  color: var(--sx-color-ink);
  border-radius: var(--sx-radius-md, 0);
}
.sx-svcsig__card--destacada {
  background: var(--sx-color-accent-fill, var(--sx-color-accent));
  --sx-color-ink: var(--sx-color-on-accent, var(--sx-color-ink));
  --sx-color-ink-soft: color-mix(in srgb, var(--sx-color-on-accent, var(--sx-color-ink)) 78%, transparent);
  --sx-color-primary-ink: var(--sx-color-on-accent, var(--sx-color-ink));
  --sx-color-accent-ink: var(--sx-color-on-accent, var(--sx-color-ink));
  color: var(--sx-color-ink);
}
.sx-svcsig__num { font-size: 12px; }
.sx-svcsig__badge { letter-spacing: .15em; text-transform: uppercase; }
.sx-svcsig__symbol {
  font-family: var(--sx-font-display, Georgia, serif); font-style: italic;
  font-size: clamp(48px, 5vw, 70px); line-height: 1.1; text-align: center;
  margin: 42px 0; color: var(--sx-color-accent-ink, var(--sx-color-primary-ink, var(--sx-color-ink)));
}
.sx-svcsig__title { font-family: var(--sx-font-display, Georgia, serif); font-weight: 400; font-size: 30px; margin: 15px 0; color: var(--sx-color-ink); }
.sx-svcsig__desc { line-height: 1.7; margin: 0; color: var(--sx-color-ink-soft); }
.sx-svcsig__list { list-style: none; padding: 0; margin: 15px 0 28px; font-size: 14px; }
.sx-svcsig__list li { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--sx-color-ink) 15%, transparent); }
.sx-svcsig__link {
  align-self: flex-start; margin-top: auto; padding-bottom: 7px; font-size: 14px;
  color: var(--sx-color-ink); text-decoration: none; border-bottom: 1px solid currentColor;
}
@media (max-width: 900px) {
  .sx-svcsig__grid { grid-template-columns: 1fr; }
  .sx-svcsig__symbol { margin: 15px 0; }
}

/* ── HERO · tarjeta flotante (sx-hero-split__card) ─────────────────────
   22-sep-2026, azura-cleaning. UNA caja que crece con su texto, sobre la foto.
   Sin `floating_card` en los datos no existe: cero efecto en los heroes de siempre. */
.sx-hero-split__card {
  position: absolute; z-index: 3; left: clamp(16px, 4vw, 56px); bottom: clamp(24px, 5vh, 56px);
  display: flex; align-items: center; gap: 16px; max-width: min(360px, 82vw);
  padding: 22px 24px; border-radius: var(--sx-radius-lg, 12px);
  background: var(--sx-color-surface);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  color: var(--sx-color-ink);
  box-shadow: var(--sx-shadow-card, 0 12px 35px rgba(0,0,0,.12));
}
.sx-hero-split__card-icon { flex: none; display: inline-flex; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-hero-split__card-icon svg { width: 34px; height: 34px; }
.sx-hero-split__card-title { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--sx-color-ink); }
.sx-hero-split__card-text { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--sx-color-ink-soft); }
@media (max-width: 760px) {
  .sx-hero-split__card { padding: 15px 16px; gap: 10px; }
  .sx-hero-split__card-icon svg { width: 26px; height: 26px; }
  .sx-hero-split__card-title { font-size: 14px; }
}

/* ── SERVICIOS · variante ROWS (sx-svcrows) ────────────────────────────
   22-sep-2026, plantilla forma-barber. El menú como lista: número, título y
   texto, etiqueta a la derecha y flecha; la fila entera enlaza. */
.sx-svcrows__row { position: relative; display: grid; grid-template-columns: 55px 1fr 210px 50px; align-items: center; gap: 20px;
  padding: 29px 5px; border-top: 1px solid var(--sx-color-border); transition: padding .2s, background .2s; color: var(--sx-color-ink); }
.sx-svcrows__row:last-child { border-bottom: 1px solid var(--sx-color-border); }
.sx-svcrows__row:hover { padding-left: 18px; background: color-mix(in srgb, var(--sx-color-ink) 5%, transparent); }
.sx-svcrows__num { font-size: 12px; color: var(--sx-color-primary-ink, var(--sx-color-ink)); }
.sx-svcrows__title { font-family: var(--sx-font-display); font-size: 37px; line-height: 1.05; margin: 0; color: var(--sx-color-ink); }
.sx-svcrows__desc { font-size: 14px; line-height: 1.6; margin: 12px 0 0; color: var(--sx-color-ink-soft); }
.sx-svcrows__tag { font-size: 11px; letter-spacing: .08em; text-align: right; text-transform: uppercase; color: var(--sx-color-ink); }
.sx-svcrows__arrow { font-size: 38px; line-height: 1; text-align: right; color: inherit; text-decoration: none; }
.sx-svcrows__row .sx-svcrows__arrow::after { content: ""; position: absolute; inset: 0; }
.sx-svcrows__arrow:focus-visible { outline: none; }
.sx-svcrows__row:has(.sx-svcrows__arrow:focus-visible) { outline: 3px solid var(--sx-color-accent-ink, var(--sx-color-ink)); outline-offset: 4px; }
@media (max-width: 950px) {
  .sx-svcrows__row { grid-template-columns: 40px 1fr 40px; }
  .sx-svcrows__tag { display: none; }
}
@media (max-width: 650px) {
  .sx-svcrows__row { grid-template-columns: 24px 1fr 25px; gap: 12px; }
  .sx-svcrows__title { font-size: 29px; }
  .sx-svcrows__arrow { font-size: 27px; }
}

/* ── SERVICIOS · variante LOOKBOOK (sx-svclook) ─────────────────────────
   21-sep-2026, plantilla muse-makeup. Foto 4:5 con etiqueta encima, título,
   subtítulo, texto, línea pequeña y enlace; la columna central escalonada. */
.sx-svclook__grid { display: grid; grid-template-columns: repeat(var(--svclook-cols, 3), minmax(0, 1fr)); gap: 48px 24px; }
.sx-svclook__card { min-width: 0; }
.sx-svclook__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--sx-color-ink) 6%, var(--sx-color-bg)); }
.sx-svclook__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.sx-svclook__photo:hover img { transform: scale(1.035); }
.sx-svclook__ph { width: 100%; height: 100%; }
.sx-svclook__badge {
  position: absolute; left: 18px; bottom: 18px; padding: 10px 14px;
  font-size: 12px; letter-spacing: .1em;
  /* Fondo OPACO de superficie + su tinta: la etiqueta va sobre una foto
     cualquiera y dentro de bandas de otro color; semitransparente no aguanta. */
  background: var(--sx-color-surface, #fff);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  color: var(--sx-color-ink-on-surface, var(--sx-color-ink));
}
.sx-svclook__copy { padding: 22px 0; }
.sx-svclook__title { font-family: var(--sx-font-display, Georgia, serif); font-weight: 400; font-size: 38px; margin: 0 0 12px; color: var(--sx-color-ink); }
.sx-svclook__sub { font-weight: 500; font-size: 16px; margin: 0 0 10px; color: var(--sx-color-ink); }
.sx-svclook__desc { font-size: 16px; line-height: 1.8; margin: 0 0 18px; color: var(--sx-color-ink-soft); }
.sx-svclook__meta { display: block; font-size: 12px; line-height: 1.7; color: var(--sx-color-ink-soft); }
.sx-svclook__link {
  display: inline-block; margin-top: 20px; padding-bottom: 8px; font-size: 14px;
  color: var(--sx-color-ink); text-decoration: none; border-bottom: 1px solid currentColor;
}
.sx-svclook__card:nth-child(3n+2) { padding-top: 50px; }
@media (max-width: 900px) {
  .sx-svclook__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-svclook__card:nth-child(3n+2) { padding-top: 0; }
}
@media (max-width: 600px) {
  .sx-svclook__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sx-svclook__photo img { transition: none; } }

/* ── PASOS · variante EDITORIAL (sx-timeline--editorial) ────────────────
   Columnas con línea fina arriba y número grande en la tipografía de
   titulares. Anula el disco y la línea vertical de la lista clásica sólo aquí. */
.sx-timeline--editorial .sx-timeline__list {
  max-width: none; display: grid; gap: 35px; margin-top: clamp(30px, 4.5vw, 65px);
  grid-template-columns: repeat(var(--pasos, 4), minmax(0, 1fr));
}
.sx-timeline--editorial .sx-timeline__step { display: block; padding: 22px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--sx-color-primary, #095354) 30%, var(--sx-color-bg, #fff)); }
.sx-timeline--editorial .sx-timeline__step::before { content: none; }
.sx-timeline--editorial .sx-timeline__num {
  width: auto; height: auto; flex: none; display: block; border-radius: 0; background: none;
  font-family: var(--sx-font-display, Georgia, serif); font-weight: 400; font-size: 32px; line-height: 1.1;
  color: var(--sx-color-primary, #3b8d81);
}
.sx-timeline--editorial .sx-timeline__title { font-size: 18px; font-weight: 400; margin: 17px 0 13px; }
.sx-timeline--editorial .sx-timeline__text { font-size: 14px; margin: 0; }
@media (max-width: 900px) {
  .sx-timeline--editorial .sx-timeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
}
@media (max-width: 480px) {
  .sx-timeline--editorial .sx-timeline__list { grid-template-columns: 1fr; }
}

/* ── ENLACE DE TEXTO EDITORIAL (sx-edlink) ─────────────────────────────
   «Read more client reviews ↗», «We're happy to help ↗»: texto con una línea
   fina debajo, del color de lo que lo rodea. */
.sx-edlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  color: inherit; text-decoration: none; padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.sx-edlink:hover { border-bottom-color: currentColor; }

/* ── RESEÑAS · variante EDITORIAL (sx-tested) ───────────────────────────
   Banda a todo lo ancho en el color del tema. El fondo es `primary-fill` y la
   tinta `on-primary`: ese par lo garantiza el runtime a 4,5:1, así que vale
   con cualquier paleta y no sólo con el teal. Los tokens de tinta se
   re-apuntan en la sección para que el antetítulo y la cursiva del titular
   hereden un color legible sobre el panel. */
.sx-testimonials--editorial {
  --ed-fondo: var(--sx-color-primary-fill, var(--sx-color-primary, #095354));
  --ed-tinta: var(--sx-color-on-primary, #fff);
  --sx-color-ink: var(--ed-tinta);
  --sx-color-ink-soft: color-mix(in srgb, var(--ed-tinta) 74%, var(--ed-fondo));
  --sx-color-accent-ink: color-mix(in srgb, var(--ed-tinta) 72%, var(--sx-color-accent, var(--ed-fondo)));
  --sx-color-accent-fill: color-mix(in srgb, var(--ed-tinta) 55%, var(--ed-fondo));
  background: var(--ed-fondo);
  color: var(--ed-tinta);
  text-align: center;
}
.sx-tested__grid { display: grid; grid-template-columns: repeat(var(--resenas, 3), minmax(0, 1fr));
  gap: 45px; max-width: 1250px; margin: 0 auto clamp(30px, 4vw, 45px); }
.sx-tested__item { text-align: left; padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--ed-tinta) 28%, var(--ed-fondo)); }
.sx-tested__stars { font-size: 14px; letter-spacing: 4px; color: color-mix(in srgb, var(--ed-tinta) 78%, var(--ed-fondo)); }
.sx-tested__quote { margin: 24px 0; font-family: var(--sx-font-display, Georgia, serif); font-style: normal;
  font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; color: var(--ed-tinta); }
.sx-tested__author { display: block; font-size: 14px; }
.sx-tested__role { display: block; font-size: 12px; margin-top: 5px; color: var(--sx-color-ink-soft); }
.sx-tested__more { color: var(--sx-color-ink-soft); }
@media (max-width: 800px) {
  .sx-tested__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── ZONAS · variante EDITORIAL (sx-areaed) ─────────────────────────────
   Titular y texto a la izquierda, pastillas a la derecha, sobre el primario
   muy diluido (mismo panel suave que el antes/después). */
.sx-area--editorial { background: color-mix(in srgb, var(--sx-color-primary, #095354) 7%, var(--sx-color-bg, #fff)); }
.sx-areaed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8%; align-items: center; }
.sx-areaed .sx-section__head { text-align: left; margin: 0; max-width: none; }
.sx-areaed__text { max-width: 460px; margin: 24px 0 0; font-size: 15px; line-height: 1.65; color: var(--sx-color-ink-soft); }
.sx-areaed .sx-area__radius { margin: 14px 0 0; font-size: 14px; }
.sx-areaed__zonas { display: flex; flex-wrap: wrap; align-content: center; gap: 10px; }
.sx-areaed__chips { margin: 0; gap: 10px; }
.sx-areaed__chips li { padding: 9px 17px; font-size: 13px; border-radius: 30px;
  background: var(--sx-color-surface, #fff);
  border: 1px solid color-mix(in srgb, var(--sx-color-primary, #095354) 20%, var(--sx-color-bg, #fff));
  --sx-color-ink: var(--sx-color-ink-on-surface);
  color: var(--sx-color-ink); }
.sx-areaed__ask { width: 100%; margin: 8px 0 0; font-size: 13px; color: var(--sx-color-ink-soft); }
.sx-areaed__ask a { color: var(--sx-color-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) {
  .sx-areaed { grid-template-columns: 1fr; gap: 30px; }
}

/* ── PREGUNTAS · variante EDITORIAL (sx-faq--editorial) ─────────────────
   Dos columnas: titular + «¿otra pregunta?» a la izquierda; a la derecha las
   mismas <details> sin caja, con línea fina y el +/− en el color del tema. */
.sx-faq--editorial .sx-container { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10%; align-items: start; }
.sx-faq--editorial .sx-section__head { text-align: left; margin: 0; max-width: none; }
.sx-faqed__help { margin: 25px 0 0; font-size: 15px; line-height: 1.8; color: var(--sx-color-ink-soft); }
.sx-faqed__help .sx-edlink { color: var(--sx-color-ink); margin-top: 4px; }
.sx-faq--editorial .sx-faq__list { max-width: none; margin: 0; gap: 0; }
.sx-faq--editorial .sx-faq__item { background: transparent; border: 0; border-radius: 0; padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sx-color-primary, #095354) 18%, var(--sx-color-bg, #fff));
  --sx-color-ink: inherit; --sx-color-ink-soft: inherit; --sx-color-primary-ink: inherit; }
.sx-faq--editorial .sx-faq__item[open] { border-color: color-mix(in srgb, var(--sx-color-primary, #095354) 18%, var(--sx-color-bg, #fff)); }
.sx-faq--editorial .sx-faq__q { padding: 0; font-weight: 400; font-size: 16px; }
.sx-faq--editorial .sx-faq__a { padding: 17px 25px 0 0; font-size: 14px; }
@media (max-width: 800px) {
  .sx-faq--editorial .sx-container { grid-template-columns: 1fr; gap: 30px; }
  .sx-faq--editorial .sx-faq__item { padding: 20px 0; }
}

/* ── PANEL DE CIERRE (sx-cta-mid--closing-panel) ────────────────────────
   Panel redondeado en el color del tema, todo centrado: titular grande, dos
   botones (claro + contorno), el teléfono en grande y el correo subrayado.
   Mismo par garantizado que las reseñas (primary-fill / on-primary). */
.sx-cta-mid--closing-panel { padding: 0 0 clamp(35px, 4vw, 50px); }
.sx-cta-mid--closing-panel .sx-cpanel {
  --ed-fondo: var(--sx-color-primary-fill, var(--sx-color-primary, #095354));
  --ed-tinta: var(--sx-color-on-primary, #fff);
  --sx-color-ink: var(--ed-tinta);
  --sx-color-ink-soft: color-mix(in srgb, var(--ed-tinta) 76%, var(--ed-fondo));
  --sx-color-accent-ink: color-mix(in srgb, var(--ed-tinta) 72%, var(--sx-color-accent, var(--ed-fondo)));
  background: var(--ed-fondo); color: var(--ed-tinta);
  border-radius: 6px; text-align: center;
  padding: clamp(55px, 7vw, 85px) clamp(20px, 5vw, 64px);
}
.sx-cpanel .sx-eyebrow { justify-content: center; color: var(--sx-color-ink-soft); }
.sx-cpanel .sx-eyebrow::before { background: var(--sx-color-ink-soft); }
.sx-cta-mid .sx-cpanel__title { color: var(--ed-tinta); font-size: clamp(38px, 5vw, 74px); line-height: 1.12; margin: 0 auto; max-width: 16ch; text-wrap: balance; }
.sx-cpanel__title em { color: var(--sx-color-accent-ink); }
.sx-cpanel__lead { margin: 22px auto 0; max-width: 560px; font-size: 16px; line-height: 1.65; color: var(--sx-color-ink-soft); }
.sx-cpanel__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 30px; }
.sx-cpanel__actions .sx-btn { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px;
  padding: 17px 25px; border-radius: 4px; }
.sx-cpanel__actions .sx-btn:first-child { background: var(--ed-tinta); color: var(--ed-fondo); border-color: var(--ed-tinta); }
.sx-cpanel__actions .sx-btn:first-child:hover { background: color-mix(in srgb, var(--ed-tinta) 86%, var(--ed-fondo)); color: var(--ed-fondo); }
.sx-cpanel__actions .sx-cpanel__alt:not(:first-child) { background: transparent; color: var(--ed-tinta);
  border-color: color-mix(in srgb, var(--ed-tinta) 45%, var(--ed-fondo)); }
.sx-cpanel__actions .sx-cpanel__alt:not(:first-child):hover { border-color: var(--ed-tinta); }
.sx-cpanel__phone { display: block; width: max-content; max-width: 100%; margin: 30px auto 0;
  font-family: var(--sx-font-display, Georgia, serif); font-size: clamp(26px, 2.6vw, 30px);
  color: var(--ed-tinta); text-decoration: none; }
.sx-cpanel__email { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--ed-tinta); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ed-tinta) 45%, var(--ed-fondo)); }
.sx-cpanel__note { margin: 22px 0 0; font-size: 12px; letter-spacing: .02em; color: var(--sx-color-ink-soft); }
.sx-cpanel a:focus-visible { outline: 3px solid var(--ed-tinta); outline-offset: 5px; }
@media (max-width: 800px) {
  .sx-cpanel__actions { flex-direction: column; align-items: center; }
  .sx-cpanel__actions .sx-btn { width: 100%; max-width: 280px; }
}

@media (max-width: 760px) {
  .sx-bas--editorial .sx-bas__head { display: block; }
  .sx-bas--editorial .sx-bas__aside { margin-top: 16px; max-width: none; }
  .sx-bas--editorial .sx-bac__ba { aspect-ratio: 4 / 3; min-height: 0; }
  .sx-bas--editorial .sx-bas__tag { bottom: 14px; }
  .sx-bas--editorial .sx-bas__tag--before { left: 14px; }
  .sx-bas--editorial .sx-bas__tag--after { right: 14px; }
}

/* Before/After CARDS — before & after shown side by side inside each card. */
.sx-bac__sbpair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.sx-bac__sbcell { position:relative; margin:0; border-radius:12px; overflow:hidden; background:#0c0c0c; aspect-ratio:3/4; }
.sx-bac__sbimg { width:100%; height:100%; object-fit:cover; display:block; }
.sx-bac__sbtag { position:absolute; top:8px; left:8px; z-index:2; font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); padding:3px 8px; border-radius:999px; }

/* Reviews "See all on Google" footer — shown by R.testimonials when the
   site is connected to Google and live reviews are present. Uses the
   existing button style; just centers it and mutes the attribution. */
.sx-reviews__seeall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:28px;text-align:center;}
.sx-reviews__google{display:inline-flex;align-items:center;gap:6px;}
.sx-reviews__gattr{flex-basis:100%;font-size:12px;opacity:.6;}

/* Embed / iframe section — reel, form, calendar, any external widget. */
.sx-embed__frame { position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin-top:24px; background:#0c0c0c; box-shadow:0 12px 34px rgba(0,0,0,.14); }
.sx-embed__frame iframe, .sx-embed__frame > .sx-img-ph { position:absolute; inset:0; width:100%; height:100%; border:0; }
.sx-embed__raw { margin-top:24px; display:flex; justify-content:center; }
.sx-embed__raw iframe, .sx-embed__raw blockquote { max-width:100%; }

/* ── panorama_360 — visor 360 sobre una equirectangular propia ──────
 * Alto FIJO, nunca aspect-ratio: el visor pinta un canvas y necesita saber
 * cuánto mide antes de proyectar. Con una caja de alto elástico Pannellum
 * arranca en 0px y se queda negro.
 * Los tokens de marca vienen del tema (--sx-color-*) — sin colores fijos aquí,
 * que es lo que exige la regla de contraste (DESIGN_STANDARDS §1b). */
.sx-pano__frame {
  position: relative; margin-top: 24px; width: 100%; height: 480px;
  border-radius: 20px; overflow: hidden;
  background: var(--sx-color-bg-alt, #f3f3f3);
  border: 1px solid var(--sx-color-border, #e5e5e5);
  box-shadow: var(--sx-shadow-card, 0 10px 30px rgba(0,0,0,.10));
}
.sx-pano--short .sx-pano__frame { height: 360px; }
.sx-pano--tall  .sx-pano__frame { height: 620px; }
.sx-pano__stage { position: absolute; inset: 0; }
.sx-pano__stage .pnlm-container { background: var(--sx-color-bg-alt, #f3f3f3); }
.sx-pano__frame > .sx-pano__ph, .sx-pano__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* La pista de "arrastra para mirar" no debe robarle el ratón al visor. */
/* La pista va ENCIMA DE UNA FOTO, así que su contraste no lo puede dar el
   tema: con `--sx-color-surface` al 90 % sobre una panorámica clara salía a
   **1,04:1** —texto invisible— y el gate de contraste lo cazó en cinco temas.
   Sobre una imagen cualquiera, la única forma de garantizar la lectura es
   traerse su propio fondo opaco, y uno oscuro con texto blanco funciona igual
   en tema claro y en oscuro. Por eso aquí NO se usan los tokens del tema:
   no es una excepción por descuido, es que el fondo no es el tema. */
.sx-pano__hint {
  position: absolute; left: 16px; bottom: 16px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 12px; font-size: 12px; font-weight: 700;
  color: #fff;
  background: rgba(17, 17, 17, .78);     /* ~11:1 contra el blanco del texto */
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sx-pano__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sx-pano__tab {
  cursor: pointer; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--sx-color-ink-soft, #555);
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, #e5e5e5);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.sx-pano__tab:hover { border-color: var(--sx-color-primary, #7C3AED); }
.sx-pano__tab.is-active {
  color: var(--sx-color-on-primary, #fff);
  background: var(--sx-color-primary, #7C3AED);
  border-color: var(--sx-color-primary, #7C3AED);
}
/* quick_quote layout="card" — el formulario, enmarcado. */
.sx-leadform--card .sx-leadform__inner { max-width:860px; margin-inline:auto; padding:44px 44px 40px; text-align:center;
  background:var(--sx-color-surface,#fff); border:1px solid var(--sx-color-border,#e5e5e5);
  border-radius:28px; box-shadow:var(--sx-shadow-elevated,0 18px 46px rgba(0,0,0,.10)); }
.sx-leadform__seal { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:999px; margin-bottom:14px; color:var(--sx-color-primary,#7C3AED);
  background:color-mix(in srgb, var(--sx-color-primary,#7C3AED) 12%, transparent); }
.sx-leadform__seal svg { width:24px; height:24px; }
.sx-leadform--card .sx-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin-top:26px; text-align:left; }
.sx-leadform--card .sx-field { display:flex; flex-direction:column; gap:7px; }
.sx-leadform--card .sx-field:has(.sx-field__textarea) { grid-column:1 / -1; }
.sx-leadform--card .sx-field--check { grid-column:1 / -1; flex-direction:row; align-items:center; }
.sx-leadform--card .sx-field__label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sx-color-ink,#111); }
.sx-leadform--card .sx-field__input { width:100%; padding:13px 15px; font-size:14px; border-radius:14px;
  color:var(--sx-color-ink,#111); background:var(--sx-color-bg,#fafafa);
  border:1px solid var(--sx-color-border,#e5e5e5); transition:border-color .2s ease, box-shadow .2s ease; }
.sx-leadform--card .sx-field__input:focus { outline:none; border-color:var(--sx-color-primary,#7C3AED);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sx-color-primary,#7C3AED) 16%, transparent); }
.sx-leadform--card .sx-btn { grid-column:1 / -1; width:100%; justify-content:center; margin-top:8px;
  padding-block:15px; letter-spacing:.05em; text-transform:uppercase; font-weight:800; }
.sx-leadform--card .sx-rfp__status { grid-column:1 / -1; }
@media (max-width:1023px){
  .sx-leadform--card .sx-leadform__inner { padding:28px 20px 26px; border-radius:22px; }
  .sx-leadform--card .sx-form { grid-template-columns:minmax(0,1fr); }
}
/* quick_quote layout="split" (21-sep-2026) — texto a la izquierda, formulario
   a la derecha, campos subrayados en dos columnas. */
.sx-leadform--split .sx-leadform__inner { max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); text-align:left; align-items:center; }
.sx-leadform--split .sx-section__head { text-align:left; margin:0; }
.sx-leadform--split .sx-leadform__sub { margin:0; line-height:1.8; }
.sx-leadform--split .sx-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; max-width:none; width:100%; margin:0; }
.sx-leadform--split .sx-field { display:flex; flex-direction:column; gap:12px; margin-bottom:22px; font-size:14px; }
.sx-leadform--split .sx-field:has(.sx-field__textarea),
.sx-leadform--split .sx-field--check,
.sx-leadform--split .sx-btn,
.sx-leadform--split .sx-rfp__status { grid-column:1 / -1; }
.sx-leadform--split .sx-field__input { width:100%; min-width:0; padding:12px 0; border:0; border-radius:0;
  border-bottom:1px solid color-mix(in srgb, var(--sx-color-ink) 55%, transparent); background:transparent; color:var(--sx-color-ink); font:inherit; }
.sx-leadform--split .sx-field__input:focus { outline:2px solid var(--sx-color-ink); outline-offset:4px; }
.sx-leadform--split .sx-btn { width:100%; justify-content:space-between; }
@media (max-width:760px){
  .sx-leadform--split .sx-leadform__inner { grid-template-columns:1fr; gap:30px; }
  .sx-leadform--split .sx-form { grid-template-columns:minmax(0,1fr); }
}

/* case_studies layout="cards" — rejilla tipo cartera. */
.sx-cases--cards .sx-cases__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:44px; }
.sx-case-card { display:flex; flex-direction:column; overflow:hidden; border-radius:22px; background:var(--sx-color-surface,#fff); border:1px solid var(--sx-color-border,#e5e5e5); box-shadow:var(--sx-shadow-card,0 10px 30px rgba(0,0,0,.08)); transition:border-color .25s ease, transform .25s ease; }
.sx-case-card:hover { border-color:var(--sx-color-primary,#7C3AED); transform:translateY(-3px); }
.sx-case-card__media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.sx-case-card__media img, .sx-case-card__ph { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.sx-case-card:hover .sx-case-card__media img { transform:scale(1.05); }
.sx-case-card__tag { position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700;
  /* primary-ink, no primary crudo: la etiqueta se lee sobre surface y un primary casi blanco o casi negro (07-sep) no despeja 4.5:1 */
  color:var(--sx-color-primary-ink-on-surface,var(--sx-color-primary-ink,var(--sx-color-primary,#7C3AED))); background:color-mix(in srgb, var(--sx-color-surface,#fff) 92%, transparent);
  border:1px solid var(--sx-color-border,#e5e5e5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sx-case-card__body { padding:22px 22px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.sx-case-card__title { font-size:17px; font-weight:700; color:var(--sx-color-ink,#111); margin:0; }
.sx-case-card__text { font-size:13px; line-height:1.5; color:var(--sx-color-ink-soft,#555); margin:0; }
.sx-case-card__foot { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--sx-color-border,#e5e5e5); }
.sx-case-card__stat { display:flex; gap:6px; align-items:baseline; font-size:12px; color:var(--sx-color-ink-soft,#555); }
.sx-case-card__stat b { color:var(--sx-color-ink,#111); font-weight:700; }
.sx-case-card__stat em { font-style:normal; }
@media (max-width:1023px){ .sx-cases--cards .sx-cases__grid { grid-template-columns:minmax(0,1fr); gap:18px; margin-top:30px; } }

/* layout="rows" — una escena por fila, alternando lado. */
/* LA COLUMNA DE TEXTO, MÁS GRANDE (09-sep-2026). Zoe: «que haya una
   descripción a la derecha MAYOR con detalles, bullets, iconos». Estaba en
   5fr contra 7fr y el texto salía apretado en dos palabras por línea; a
   partes iguales cabe una ficha de verdad y el visor sigue siendo usable. */
.sx-pano--rows .sx-pano__row { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:48px; align-items:center; margin-top:56px; }
.sx-pano--rows .sx-pano__row.is-flipped .sx-pano__rowcopy { order:2; }
.sx-pano--rows .sx-pano__row.is-flipped .sx-pano__frame   { order:1; }
.sx-pano--rows .sx-pano__frame { margin-top:0; }
.sx-pano__rowlabel { display:block; font-family:var(--sx-font-display); font-size:26px; line-height:1.2; color:var(--sx-color-ink,#111); }
.sx-pano__rowlist { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.sx-pano__rowlist li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:var(--sx-color-ink,#111); }
.sx-pano__rowlist svg { flex:0 0 auto; width:18px; height:18px; margin-top:1px; color:var(--sx-color-primary,#7C3AED); }
.sx-pano__rowalt { margin-top:10px; font-size:15px; line-height:1.55; color:var(--sx-color-ink-soft,#555); }
@media (max-width:1023px){
  .sx-pano--rows .sx-pano__row { grid-template-columns:minmax(0,1fr); gap:20px; margin-top:36px; }
  .sx-pano--rows .sx-pano__row.is-flipped .sx-pano__rowcopy { order:1; }
  .sx-pano--rows .sx-pano__row.is-flipped .sx-pano__frame   { order:2; }
}

/* layout="split" — copia a un lado, visor al otro. El visor pesa más que el
   texto (7/5) porque es el objeto de la sección; invertirlo lo deja de sello. */
.sx-pano--split .sx-pano__split { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 48px; align-items: center; }
.sx-pano--split.sx-pano--media-left .sx-pano__copy  { order: 2; }
.sx-pano--split.sx-pano--media-left .sx-pano__frame { order: 1; }
.sx-pano--split .sx-pano__frame { margin-top: 0; }
.sx-pano--split .sx-pano__copy .sx-section-head { text-align: left; margin-inline: 0; }
@media (max-width: 1023px) {
  .sx-pano--split .sx-pano__split { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .sx-pano--split.sx-pano--media-left .sx-pano__copy  { order: 1; }
  .sx-pano--split.sx-pano--media-left .sx-pano__frame { order: 2; }
}
@media (max-width: 1023px) {
  .sx-pano__frame { height: 320px; }
  .sx-pano--tall .sx-pano__frame { height: 400px; }
}

/* ── Band background (promo · sale_banner · limited_offer · click_to_call ──
 * · newsletter · booking_calendar)
 *
 * These sections are a headline plus a button by design, which on a plain
 * background reads as an empty strip. An optional `background_image` turns
 * the same copy into something that looks like a real offer. Opt-in: without
 * the field none of these rules apply.
 *
 * Same treatment as `.sx-values--has-bg` (cover photo + dark gradient + white
 * text) so bands match the rest of the template rather than inventing a
 * second look. */
.sx-band--has-bg { position: relative; overflow: hidden; background: transparent; }
.sx-band__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* POSICIÓN GOBERNABLE (Zoe, 05-sep-2026): `object-position` estaba fijo al
     centro, así que una foto con la cara arriba se recortaba sin remedio.
     `bg_position` la mueve; sin valor, el centro de siempre. */
  object-fit: cover; object-position: var(--sx-fondo-pos, center); z-index: 0;
}
.sx-band__overlay {
  position: absolute; inset: 0;
  /* El velo era un degradado NEGRO fijo: una foto clara dejaba el texto
     ilegible y no había mando. Ahora el color y la transparencia vienen del
     editor; sin valores, el degradado de siempre. */
  background: linear-gradient(135deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 50%, rgba(0,0,0,0.70) 100%);
  z-index: 1;
}
.sx-band__overlay { background-color: var(--sx-fondo-velo, transparent); }
.sx-band--has-bg[style*="--sx-fondo-velo"] .sx-band__overlay {
  background-image: none;                       /* manda el color elegido */
  opacity: var(--sx-fondo-velo-a, 0.55);
}
.sx-band--has-bg > .sx-container { position: relative; z-index: 2; }
.sx-band--has-bg .sx-h2,
.sx-band--has-bg .sx-h3,
.sx-band--has-bg .sx-eyebrow,
.sx-band--has-bg .sx-lead,
.sx-band--has-bg p { color: #fff !important; }
.sx-band--has-bg .sx-eyebrow::before { background: var(--sx-color-accent-fill, var(--sx-color-accent)); }
/* The ghost button loses its outline on a photo; give it a light edge. */
.sx-band--has-bg .sx-btn--ghost {
  color: #fff; border-color: rgba(255,255,255,0.6);
}

/* ══════════════════════════════════════════════════════════════════════
   menu_shop — orderable restaurant menu (dish cards grouped by course).
   Dishes are live shop products; the add button reuses the shop cart.
   ══════════════════════════════════════════════════════════════════════ */
.sx-menu-shop { padding: clamp(56px, 8vw, 104px) 0; }

/* Order-type header (pickup / delivery / dine-in) */
/* Order-type strip — informational (available fulfillment), never a selector.
   Quiet outline chips with a check so it can't read as a broken toggle. */
.sx-menu-shop__ordertypes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  justify-content: center; margin: 0 0 22px;
}
.sx-menu-shop__otype {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  border-radius: var(--sx-radius-pill);
  background: transparent; border: 1px solid var(--sx-color-border);
  color: var(--sx-color-ink-soft); font-weight: 600; font-size: .76rem; letter-spacing: .02em;
}
.sx-menu-shop__otype::before { content: "✓"; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 800; }
.sx-menu-shop__ordernote { color: var(--sx-color-ink-soft); font-size: .8rem; }

/* Filter tabs (CSS-only, driven by sibling radios — one course at a time) */
.sx-menu-shop__tabwrap { position: relative; }
.sx-menu-shop__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sx-menu-shop__tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 32px;
}
.sx-menu-shop__tab {
  padding: 9px 20px; border-radius: var(--sx-radius-pill);
  background: var(--sx-color-surface); border: 1px solid var(--sx-color-border);
  color: var(--sx-color-ink); font-weight: 600; font-size: .9rem; cursor: pointer;
  user-select: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-menu-shop__tab:hover { border-color: color-mix(in srgb, var(--sx-color-primary) 50%, var(--sx-color-border)); }
.sx-menu-shop__radio:focus-visible + .sx-menu-shop__tabs .sx-menu-shop__tab { outline: 2px solid var(--sx-color-primary); }
.sx-menu-shop__panel { display: none; }
.sx-menu-shop.is-tabbed .sx-menu-shop__panel .sx-menu-shop__course-blurb { text-align: center; margin: 0 auto 22px; }
/* checked radio N → active label N + visible panel N (up to 12 courses) */
.sx-menu-shop__radio:nth-of-type(1):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(1),
.sx-menu-shop__radio:nth-of-type(2):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(2),
.sx-menu-shop__radio:nth-of-type(3):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(3),
.sx-menu-shop__radio:nth-of-type(4):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(4),
.sx-menu-shop__radio:nth-of-type(5):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(5),
.sx-menu-shop__radio:nth-of-type(6):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(6),
.sx-menu-shop__radio:nth-of-type(7):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(7),
.sx-menu-shop__radio:nth-of-type(8):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(8),
.sx-menu-shop__radio:nth-of-type(9):checked  ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(9),
.sx-menu-shop__radio:nth-of-type(10):checked ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(10),
.sx-menu-shop__radio:nth-of-type(11):checked ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(11),
.sx-menu-shop__radio:nth-of-type(12):checked ~ .sx-menu-shop__tabs .sx-menu-shop__tab:nth-child(12) {
  background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary);
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sx-color-primary) 30%, transparent);
}
.sx-menu-shop__radio:nth-of-type(1):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(1),
.sx-menu-shop__radio:nth-of-type(2):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(2),
.sx-menu-shop__radio:nth-of-type(3):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(3),
.sx-menu-shop__radio:nth-of-type(4):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(4),
.sx-menu-shop__radio:nth-of-type(5):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(5),
.sx-menu-shop__radio:nth-of-type(6):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(6),
.sx-menu-shop__radio:nth-of-type(7):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(7),
.sx-menu-shop__radio:nth-of-type(8):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(8),
.sx-menu-shop__radio:nth-of-type(9):checked  ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(9),
.sx-menu-shop__radio:nth-of-type(10):checked ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(10),
.sx-menu-shop__radio:nth-of-type(11):checked ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(11),
.sx-menu-shop__radio:nth-of-type(12):checked ~ .sx-menu-shop__panels .sx-menu-shop__panel:nth-child(12) {
  display: block;
}

/* Sticky course quick-nav (stacked layout) */
.sx-menu-shop__nav {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap;
  gap: 8px; justify-content: center; padding: 12px 0; margin-bottom: 16px;
  background: color-mix(in srgb, var(--sx-color-bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
}
.sx-menu-shop__chip {
  padding: 7px 16px; border-radius: var(--sx-radius-pill);
  background: var(--sx-color-surface); border: 1px solid var(--sx-color-border);
  color: var(--sx-color-ink); font-weight: 600; font-size: .85rem;
  text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-menu-shop__chip:hover {
  background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary);
  border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
}

/* Course block */
.sx-menu-shop__course { margin-top: 46px; scroll-margin-top: 78px; }
.sx-menu-shop__course:first-of-type { margin-top: 8px; }
.sx-menu-shop__course-title {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.01em;
  color: var(--sx-color-ink); margin: 0;
}
.sx-menu-shop__course-title::after {
  content: ""; display: block; width: 52px; height: 3px; margin-top: 12px;
  background: var(--sx-color-accent-fill, var(--sx-color-accent)); border-radius: 2px;
}
.sx-menu-shop__course-blurb {
  color: var(--sx-color-ink-soft); margin: 12px 0 0; max-width: 60ch;
}

/* Dish grid — mobile 1-up, then 2/3/4 */
.sx-menu-shop__grid { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 640px) {
  .sx-menu-shop__grid--cols-2,
  .sx-menu-shop__grid--cols-3,
  .sx-menu-shop__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .sx-menu-shop__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .sx-menu-shop__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Dish card */
.sx-dish {
  position: relative; display: flex; flex-direction: column;
  background: var(--sx-color-surface); border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-dish:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--sx-color-accent) 18%, transparent), var(--sx-shadow-card);
  border-color: color-mix(in srgb, var(--sx-color-accent) 55%, var(--sx-color-border));
}
.sx-dish.is-out { opacity: .6; }
.sx-dish__img { position: relative; aspect-ratio: 4 / 3; background: var(--sx-color-bg-alt); overflow: hidden;
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-dish__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sx-dish:hover .sx-dish__img img { transform: scale(1.06); }
.sx-dish__badge {
  position: absolute; top: 12px; left: 12px; padding: 5px 11px;
  border-radius: var(--sx-radius-pill); background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary); font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.sx-dish__badgewrap { padding: 14px 18px 0; }
/* Whole-card open button (opens the product-detail modal). Reset native button
   chrome so it reads as the card, not a control. */
.sx-dish__open {
  display: flex; flex-direction: column; flex: 1; width: 100%;
  padding: 0; margin: 0; border: 0; background: none; font: inherit;
  color: inherit; text-align: left; cursor: pointer;
}
.sx-dish__open:focus-visible { outline: 2px solid var(--sx-color-primary); outline-offset: -2px; }
.sx-dish__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; flex: 1; }
.sx-dish__actions { padding: 0 20px 20px; }
/* EL TÍTULO NO SE APLASTA (02-sep-2026, el vestido de Zoe: «Plaid / Heart /
   Skater / Dress» a una palabra por línea): sin ancho mínimo, el par de
   precios de una oferta (~$66.99~ $49.99) estrujaba el nombre a min-content.
   El nombre reclama ≥9rem y, si el par no cabe, salta ENTERO a su propia
   línea con la guía de puntos delante — estilo carta de restaurante. Los
   nombres cortos de un menú ni se enteran. */
.sx-dish__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sx-dish__name { font-size: 1.06rem; font-weight: 700; color: var(--sx-color-ink); margin: 0; line-height: 1.25; flex: 1 1 auto; min-width: min(100%, 9rem); }
.sx-dish__dots {
  flex: 1; align-self: center; border-bottom: 1.5px dotted color-mix(in srgb, var(--sx-color-ink-soft) 55%, transparent);
  min-width: 14px;
}
.sx-dish__price { font-weight: 800; color: var(--sx-color-ink); white-space: nowrap; }
.sx-dish__price-old { text-decoration: line-through; color: var(--sx-color-ink-soft); font-weight: 600; font-size: .9em; margin-right: 4px; }
.sx-dish__price-now { color: var(--sx-color-primary-ink, var(--sx-color-primary-dark, var(--sx-color-primary))); }
.sx-dish__desc { color: var(--sx-color-ink-soft); font-size: .9rem; line-height: 1.5; margin: 0; }
.sx-dish__diet { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-dish__chip {
  padding: 3px 9px; border-radius: var(--sx-radius-pill);
  background: color-mix(in srgb, var(--sx-color-accent) 14%, var(--sx-color-surface));
  border: 1px solid color-mix(in srgb, var(--sx-color-accent) 30%, var(--sx-color-border));
  color: var(--sx-color-ink); font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}
.sx-dish__allerg { color: var(--sx-color-ink-soft); font-size: .74rem; font-style: italic; }
.sx-dish__add {
  align-self: flex-start; display: inline-flex; align-items: center;
  gap: 6px; padding: 10px 20px; border: none; border-radius: var(--sx-radius-pill);
  background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary);
  font-weight: 700; font-size: .85rem; letter-spacing: .02em; cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.sx-dish__add:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--sx-color-primary) 40%, transparent); }
.sx-dish__add.is-out { background: var(--sx-color-border); color: var(--sx-color-ink-soft); cursor: not-allowed; }

.sx-menu-shop__cta { text-align: center; margin-top: 46px; }

/* ── combo_menu — orderable set meals / menú del día ── */
.sx-combo-menu { padding: clamp(56px, 8vw, 104px) 0; }
.sx-combo-menu__grid { display: grid; gap: 26px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 700px) { .sx-combo-menu__grid--cols-2, .sx-combo-menu__grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sx-combo-menu__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } }
.sx-combo {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sx-color-surface); border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-xl);
  box-shadow: var(--sx-shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-combo:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--sx-color-primary) 20%, transparent), var(--sx-shadow-elevated, var(--sx-shadow-card));
  border-color: color-mix(in srgb, var(--sx-color-primary) 50%, var(--sx-color-border));
}
.sx-combo__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sx-color-bg-alt);
  --sx-color-ink: var(--sx-color-ink-on-alt);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-alt, var(--sx-color-ink-on-alt));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-alt, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-alt, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-alt, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-combo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sx-combo:hover .sx-combo__img img { transform: scale(1.05); }
.sx-combo__badge {
  position: absolute; top: 14px; left: 14px; padding: 6px 14px;
  border-radius: var(--sx-radius-pill); background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary); font-size: .74rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sx-color-primary) 40%, transparent);
}
.sx-combo__open {
  display: flex; flex-direction: column; flex: 1; width: 100%;
  padding: 0; margin: 0; border: 0; background: none; font: inherit;
  color: inherit; text-align: left; cursor: pointer;
}
.sx-combo__open:focus-visible { outline: 2px solid var(--sx-color-primary); outline-offset: -2px; }
.sx-combo__top { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 6px; flex: 1; }
.sx-combo__name { font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em; color: var(--sx-color-ink); margin: 0; }
.sx-combo__includes { color: var(--sx-color-ink-soft); font-size: .92rem; line-height: 1.5; margin: 0; flex: 1; }
.sx-combo__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 24px 22px; }
.sx-combo__price { display: flex; flex-direction: column; line-height: 1.1; }
.sx-combo__price .sx-dish__price-now { font-size: 1.5rem; font-weight: 800; color: var(--sx-color-primary-ink, var(--sx-color-primary-dark, var(--sx-color-primary))); }
.sx-combo__price .sx-dish__price-old { font-size: .95rem; }
.sx-combo__save { font-size: .72rem; font-weight: 700; color: var(--sx-color-accent-ink, var(--sx-color-accent)); letter-spacing: .02em; margin-top: 2px; }
.sx-combo__add {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px;
  border: none; border-radius: var(--sx-radius-pill);
  background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary);
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.sx-combo__add:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--sx-color-primary) 42%, transparent); }
.sx-combo__add.is-out { background: var(--sx-color-border); color: var(--sx-color-ink-soft); cursor: not-allowed; }

/* ── menu_categorized — feature layout (dotted-leader menu + big dish photo) ──
   The default .sx-menu__cats is already a 2-col grid (Breakfast | Lunch). The
   "feature" layout pairs a SINGLE-column menu with a large editorial photo. */
.sx-menu--feature .sx-menu__feature {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .sx-menu--feature .sx-menu__feature { grid-template-columns: 1fr 1fr; }
}
.sx-menu--feature .sx-menu__cats { grid-template-columns: 1fr; gap: 28px; }
.sx-menu__feature-img { border-radius: var(--sx-radius-lg); overflow: hidden; }
.sx-menu__feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .sx-menu__feature-img img { aspect-ratio: auto; min-height: 440px; } }
/* "View all menu" CTA (points at the full storefront). */
.sx-menu__cta { text-align: center; margin-top: 44px; }

/* ── request_proposal — lead form (pitch + testimonial | dark form panel) ── */
.sx-rfp { padding: clamp(56px, 8vw, 104px) 0; }
.sx-rfp__grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .sx-rfp__grid { grid-template-columns: 1fr 1fr; } }
.sx-rfp__eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sx-color-primary-ink, var(--sx-color-primary)); margin-bottom: 14px;
}
.sx-rfp__heading { font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; color: var(--sx-color-ink); margin: 0 0 20px; text-wrap: balance; }
.sx-rfp__intro { color: var(--sx-color-ink-soft); font-size: 1rem; line-height: 1.65; margin: 0 0 14px; max-width: 54ch; }
.sx-rfp__quote { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--sx-color-border); }
.sx-rfp__quote blockquote { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.55; color: var(--sx-color-ink); }
.sx-rfp__quote figcaption { margin-top: 10px; font-size: .9rem; font-style: italic; color: var(--sx-color-ink-soft); }
/* dark form panel */
.sx-rfp__panel {
  background: var(--sx-color-inverse-bg); color: var(--sx-color-inverse-ink);
  border-radius: var(--sx-radius-xl); padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--sx-shadow-elevated, var(--sx-shadow-card));
}
.sx-rfp__paneltitle { font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin-bottom: 20px; color: var(--sx-color-inverse-ink); }
.sx-rfp__form { display: flex; flex-direction: column; gap: 14px; }
.sx-rfp__row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .sx-rfp__row { grid-template-columns: 1fr 1fr; } }
.sx-rfp__field { display: flex; flex-direction: column; gap: 6px; }
.sx-rfp__field > span { font-size: .8rem; font-weight: 600; color: var(--sx-color-inverse-ink-soft); }
.sx-rfp__field input, .sx-rfp__field textarea, .sx-rfp__field select {
  width: 100%; padding: 11px 13px; border-radius: var(--sx-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06);
  color: #fff; font: inherit; font-size: .95rem; transition: border-color .18s ease, background .18s ease;
}
.sx-rfp__field textarea { resize: vertical; min-height: 76px; }
.sx-rfp__field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.sx-rfp__field select option { color: #111; }
.sx-rfp__field input::placeholder, .sx-rfp__field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.sx-rfp__field input:focus, .sx-rfp__field textarea:focus, .sx-rfp__field select:focus {
  outline: none; border-color: var(--sx-color-primary-ink, var(--sx-color-primary));
  background: rgba(255, 255, 255, 0.10);
}
.sx-rfp__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sx-rfp__submit {
  margin-top: 6px; padding: 14px 22px; border: none; border-radius: var(--sx-radius-pill);
  background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary);
  font-weight: 700; font-size: .95rem; letter-spacing: .02em; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.sx-rfp__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--sx-color-primary) 45%, transparent); }
.sx-rfp__submit:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.sx-rfp__status { font-size: .9rem; min-height: 1.2em; }
.sx-rfp__status.is-ok { color: #4ade80; font-weight: 600; }
.sx-rfp__status.is-error { color: #fca5a5; font-weight: 600; }

/* request_proposal — LIGHT variant: centered header + full-width underline form
   (the "Initiate a Partnership" style). */
.sx-rfp--light { padding: clamp(56px, 8vw, 104px) 0; background: var(--sx-color-surface, #fff);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-rfp__narrow { max-width: 900px; }
.sx-rfp--light .sx-rfp__head { text-align: center; margin-bottom: 46px; }
.sx-rfp--light .sx-rfp__eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-rfp--light .sx-rfp__heading { color: var(--sx-color-ink); }
.sx-rfp--light .sx-rfp__intro { color: var(--sx-color-ink-soft); max-width: 60ch; margin: 0 auto 12px; }
.sx-rfp--light .sx-rfp__form { max-width: 780px; margin: 0 auto; gap: 26px; }
.sx-rfp--light .sx-rfp__field > span { color: var(--sx-color-ink-soft); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; }
.sx-rfp--light .sx-rfp__field input,
.sx-rfp--light .sx-rfp__field textarea,
.sx-rfp--light .sx-rfp__field select {
  background: transparent; border: none; border-bottom: 1px solid var(--sx-color-border);
  border-radius: 0; padding: 9px 0; color: var(--sx-color-ink);
}
.sx-rfp--light .sx-rfp__field textarea { min-height: 60px; }
.sx-rfp--light .sx-rfp__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230f1628' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px;
}
.sx-rfp--light .sx-rfp__field input::placeholder,
.sx-rfp--light .sx-rfp__field textarea::placeholder { color: var(--sx-color-ink-soft); }
.sx-rfp--light .sx-rfp__field input:focus,
.sx-rfp--light .sx-rfp__field textarea:focus,
.sx-rfp--light .sx-rfp__field select:focus { border-bottom-color: var(--sx-color-primary-ink, var(--sx-color-primary)); background: transparent; }
.sx-rfp--light .sx-rfp__submit {
  display: block; margin: 16px auto 0; background: var(--sx-color-ink); color: #fff;
  border-radius: var(--sx-radius-sm); padding: 15px 42px; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem;
}
.sx-rfp--light .sx-rfp__submit:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--sx-color-ink) 30%, transparent); }
.sx-rfp--light .sx-rfp__status { text-align: center; }
.sx-rfp--light .sx-rfp__status.is-ok { color: #16a34a; }
.sx-rfp--light .sx-rfp__status.is-error { color: #dc2626; }

/* "The Advantage" — dark editorial section (text + features | image + badge) */
.sx-advantage { background: var(--sx-color-inverse-bg); color: var(--sx-color-inverse-ink); padding: clamp(64px, 9vw, 120px) 0; }
.sx-advantage__grid { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) {
  .sx-advantage__grid { grid-template-columns: 1fr 1fr; }
  .sx-advantage--img-left .sx-advantage__text { order: 2; }
}
.sx-advantage__eyebrow { color: var(--sx-color-inverse-ink-soft); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; margin-bottom: 18px; }
.sx-advantage__heading { font-family: var(--sx-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; color: var(--sx-color-inverse-ink); margin: 0 0 20px; }
/* EL TOKEN DE ESTA SECCIÓN ES EL DE SUPERFICIE INVERSA, NO EL DE LA PÁGINA
   (07-sep-2026). `.sx-advantage` se pinta sobre `--sx-color-inverse-bg` —el
   panel oscuro—, pero `--sx-color-primary-ink` lo deriva runtime.js:605 para
   que sea legible sobre el fondo de la PÁGINA (`pageBgHex`). En una plantilla
   de página clara eso da un tono oscuro que sobre el panel negro casi no se
   ve: es lo que le pasaba a los iconos de realtor-personal, apagados y
   grises. `--sx-color-accent-on-inverse` es el que runtime.js:612 calcula
   contra `inverseBgHex`, que es esta superficie. */
.sx-advantage__heading em { font-style: italic; color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)); }
.sx-advantage__lead { color: var(--sx-color-inverse-ink-soft); line-height: 1.7; max-width: 52ch; margin: 0 0 32px; }
.sx-advantage__feats { display: flex; flex-direction: column; gap: 22px; }
.sx-advantage__feat { display: flex; gap: 16px; align-items: flex-start; }
.sx-advantage__ficon { flex: none; color: var(--sx-color-accent-on-inverse, var(--sx-color-accent)); display: inline-flex; }
.sx-advantage__ficon svg { width: 26px; height: 26px; }
.sx-advantage__ftitle { font-family: var(--sx-font-display); font-size: 1.15rem; color: var(--sx-color-inverse-ink); margin: 0 0 4px; }
.sx-advantage__ftext { color: var(--sx-color-inverse-ink-soft); font-size: .92rem; line-height: 1.55; margin: 0; }
.sx-advantage__cta { margin-top: 34px; }
.sx-advantage__media { position: relative; }
.sx-advantage__img { width: 100%; border-radius: var(--sx-radius-lg); display: block; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.sx-advantage__badge {
  position: absolute; left: -18px; bottom: 40px; background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary);
  padding: 20px 26px; border-radius: var(--sx-radius-sm);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--sx-color-primary) 40%, transparent);
}
@media (max-width: 600px) { .sx-advantage__badge { left: 12px; bottom: 12px; padding: 14px 18px; } }
.sx-advantage__bval { display: block; font-family: var(--sx-font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
.sx-advantage__blabel { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; margin-top: 4px; }

/* team — "portrait" layout: large square B&W photos, no cards, serif names +
   copper roles (the "Executive Leadership" editorial look). */
.sx-team--portrait .sx-team__card {
  background: transparent; border: none; box-shadow: none; padding: 0; text-align: center;
}
.sx-team--portrait .sx-team__photo {
  width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0;
  object-fit: cover; object-position: center 22%; border-radius: var(--sx-radius-md);
  filter: grayscale(1) contrast(1.02); transition: filter .35s ease; display: block;
}
.sx-team--portrait .sx-team__card:hover .sx-team__photo { filter: grayscale(0); }
.sx-team--portrait .sx-team__name {
  font-family: var(--sx-font-display); font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700; color: var(--sx-color-ink); margin-top: 18px;
}
.sx-team--portrait .sx-team__role {
  color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; font-weight: 700; margin-top: 4px;
}
.sx-team--portrait .sx-team__bio { color: var(--sx-color-ink-soft); font-size: .88rem; margin-top: 8px; }
.sx-team__cta { text-align: center; margin-top: 48px; }

/* about — copper diamond accent (divider_icon: "diamond") */
.sx-about__diamond { display: flex; justify-content: center; margin-top: 30px; }
.sx-about__diamond svg { filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--sx-color-primary) 35%, transparent)); }

/* ── book_table — reservation form (map | light form) ── */
.sx-book { padding: clamp(56px, 8vw, 104px) 0; }
.sx-book__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .sx-book__grid { grid-template-columns: 1fr 1fr; } .sx-book__grid.is-nomap { grid-template-columns: minmax(0, 620px); justify-content: center; } }
.sx-book__map { border-radius: var(--sx-radius-lg); overflow: hidden; border: 1px solid var(--sx-color-border); min-height: 320px; }
.sx-book__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
/* Light form fields (override the dark rfp panel styles for book_table). */
.sx-book__form .sx-rfp__field > span { color: var(--sx-color-ink-soft); }
.sx-book__form .sx-rfp__field input,
.sx-book__form .sx-rfp__field textarea,
.sx-book__form .sx-rfp__field select {
  border: 1px solid var(--sx-color-border); background: var(--sx-color-surface); color: var(--sx-color-ink);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-book__form .sx-rfp__field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230f1628' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); }
.sx-book__form .sx-rfp__field input::placeholder,
.sx-book__form .sx-rfp__field textarea::placeholder { color: var(--sx-color-ink-soft); }
.sx-book__form .sx-rfp__field input:focus,
.sx-book__form .sx-rfp__field textarea:focus,
.sx-book__form .sx-rfp__field select:focus { border-color: var(--sx-color-primary-ink, var(--sx-color-primary)); background: var(--sx-color-surface); }
.sx-book__form .sx-rfp__status.is-ok { color: #16a34a; }
.sx-book__form .sx-rfp__status.is-error { color: #dc2626; }

/* ── promo_dishes — editorial photo cards with overlaid title + price ── */
.sx-promo-dishes { padding: clamp(48px, 7vw, 96px) 0; }
.sx-promo-dishes__grid { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .sx-promo-dishes__grid--cols-2, .sx-promo-dishes__grid--cols-3, .sx-promo-dishes__grid--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sx-promo-dishes__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .sx-promo-dishes__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } }
.sx-promo {
  position: relative; overflow: hidden; border-radius: var(--sx-radius-lg);
  aspect-ratio: 3 / 4; display: flex; align-items: flex-start;
  box-shadow: var(--sx-shadow-card); isolation: isolate;
}
.sx-promo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.sx-promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.05) 42%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.55) 100%); }
.sx-promo:hover .sx-promo__img { transform: scale(1.06); }
.sx-promo__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 24px; width: 100%; height: 100%; color: #fff; }
.sx-promo__badge { padding: 5px 13px; border-radius: var(--sx-radius-pill); background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sx-promo__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; margin: 4px 0 0; text-shadow: 0 2px 14px rgba(0,0,0,0.4); text-wrap: balance; }
.sx-promo__sub { font-size: .95rem; font-weight: 600; opacity: .92; }
.sx-promo__price { margin-top: auto; font-size: 1.7rem; font-weight: 800; text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.sx-promo__btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px;
  border: none; border-radius: var(--sx-radius-pill); background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary); font-weight: 700; font-size: .85rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.sx-promo__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }

/* ── capability_strip — 'what we do' marquee of labels ────────────── */
.sx-capstrip { border-top: 1px solid var(--sx-color-border); border-bottom: 1px solid var(--sx-color-border); padding: 18px 0; background: var(--sx-color-bg); }
.sx-capstrip__row { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: center; font-family: var(--sx-font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--sx-color-ink-soft); }
.sx-capstrip--left .sx-capstrip__row { justify-content: flex-start; }
.sx-capstrip__eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 700; margin-right: 4px; }
.sx-capstrip__item { white-space: nowrap; }
.sx-capstrip__sep { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* ── capability_grid — full-width, left-aligned icon+label grid + centered CTA ─ */
.sx-capgrid { padding: clamp(56px, 8vw, 100px) 0; }
.sx-capgrid__head { margin-bottom: clamp(28px, 4vw, 46px); max-width: 62ch; }
/* head_align="center": center the eyebrow + heading + subheading block AND
   center the item grid as a SYMMETRIC group — columns sized to their content
   and centered with equal outer margins (space on the left == space on the
   right). Each item's text stays LEFT-aligned. */
.sx-capgrid--head-center .sx-capgrid__head { text-align: center; margin-left: auto; margin-right: auto; }
.sx-capgrid--head-center .sx-capgrid__grid { max-width: none; justify-content: center; }
@media (min-width: 760px) {
  .sx-capgrid--head-center.sx-capgrid--cols2 .sx-capgrid__grid { grid-template-columns: repeat(2, auto); column-gap: clamp(72px, 9vw, 150px); }
  .sx-capgrid--head-center.sx-capgrid--cols3 .sx-capgrid__grid { grid-template-columns: repeat(3, auto); column-gap: clamp(56px, 7vw, 120px); }
  .sx-capgrid--head-center.sx-capgrid--cols4 .sx-capgrid__grid { grid-template-columns: repeat(4, auto); column-gap: clamp(40px, 5vw, 90px); }
}
.sx-capgrid__head .sx-eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; }
.sx-capgrid__heading { font-family: var(--sx-font-display); font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.1; color: var(--sx-color-ink); margin: 12px 0 0; }
.sx-capgrid__heading em, .sx-capgrid__heading span { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-style: normal; }
.sx-capgrid__sub { color: var(--sx-color-ink-soft); line-height: 1.65; margin: 14px 0 0; }
.sx-capgrid__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 30px) clamp(28px, 4vw, 60px);
}
@media (min-width: 760px) {
  .sx-capgrid--cols2 .sx-capgrid__grid { grid-template-columns: repeat(2, 1fr); }
  .sx-capgrid--cols3 .sx-capgrid__grid { grid-template-columns: repeat(3, 1fr); }
  .sx-capgrid--cols4 .sx-capgrid__grid { grid-template-columns: repeat(4, 1fr); }
}
.sx-capgrid__item { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
.sx-capgrid__item--titleonly { align-items: center; }
.sx-capgrid__item--titleonly .sx-capgrid__title { margin-bottom: 0; }
.sx-capgrid__icon { flex: 0 0 auto; width: 48px; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-capgrid__icon svg { width: 34px; height: 34px; stroke-width: 1.5; }
.sx-capgrid__body { flex: 1; min-width: 0; }
.sx-capgrid__title { font-family: var(--sx-font-display); font-size: 1.05rem; font-weight: 700; color: var(--sx-color-ink); margin: 0 0 4px; }
.sx-capgrid__text { font-size: .92rem; line-height: 1.55; color: var(--sx-color-ink-soft); margin: 0; }
.sx-capgrid__cta { margin-top: clamp(32px, 4vw, 50px); text-align: center; }

/* background image + dark overlay — keeps the photo visible but the text
   readable. Whitens the copy; icons + button keep the brand color. */
.sx-capgrid--has-bg { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sx-capgrid--has-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.58) 100%); }
.sx-capgrid--has-bg > .sx-container { position: relative; z-index: 1; }
.sx-capgrid--has-bg .sx-capgrid__heading,
.sx-capgrid--has-bg .sx-capgrid__title { color: #fff; }
.sx-capgrid--has-bg .sx-capgrid__sub,
.sx-capgrid--has-bg .sx-capgrid__text { color: rgba(255, 255, 255, 0.85); }
.sx-capgrid--has-bg .sx-capgrid__heading em,
.sx-capgrid--has-bg .sx-capgrid__heading span { color: var(--sx-color-accent, #8B7CFF); }

/* ── feature_split — 2-col (numbered) feature list + image ────────── */
.sx-featsplit { padding: clamp(64px, 9vw, 110px) 0; background: var(--sx-color-bg); }
.sx-featsplit__grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) {
  .sx-featsplit__grid { grid-template-columns: 1.05fr 1fr; }
  .sx-featsplit--img-left .sx-featsplit__text { order: 2; }
}
.sx-featsplit__eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; margin-bottom: 16px; }
.sx-featsplit__heading { font-family: var(--sx-font-display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; color: var(--sx-color-ink); margin: 0 0 16px; }
.sx-featsplit__heading em, .sx-featsplit__heading span { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-style: normal; }
.sx-featsplit__lead { color: var(--sx-color-ink-soft); line-height: 1.65; max-width: 54ch; margin: 0 0 28px; }
.sx-featsplit__feats { display: flex; flex-direction: column; gap: 18px; }
.sx-featsplit__feat { display: flex; gap: 16px; align-items: flex-start; }
.sx-featsplit__num { flex: none; width: 36px; height: 36px; border-radius: var(--sx-radius-md); background: color-mix(in srgb, var(--sx-color-primary) 14%, transparent); color: var(--sx-color-primary-ink, var(--sx-color-primary)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sx-font-display); font-size: .82rem; font-weight: 700; }
.sx-featsplit__ftitle { font-size: 1.02rem; color: var(--sx-color-ink); margin: 0 0 3px; font-weight: 600; }
.sx-featsplit__ftext { color: var(--sx-color-ink-soft); font-size: .92rem; line-height: 1.55; margin: 0; }
.sx-featsplit__cta { margin-top: 30px; }
.sx-featsplit__img { width: 100%; border-radius: var(--sx-radius-xl, 20px); display: block; border: 1px solid var(--sx-color-border); }

/* ── case_studies — alternating image/text blocks with stats ──────── */
.sx-cases { padding: clamp(64px, 9vw, 110px) 0; background: var(--sx-color-bg); border-top: 1px solid var(--sx-color-border); }
.sx-cases__eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; margin-bottom: 14px; }
.sx-cases__heading { font-family: var(--sx-font-display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; color: var(--sx-color-ink); margin: 0 0 12px; }
.sx-cases__sub { color: var(--sx-color-ink-soft); line-height: 1.65; max-width: 60ch; margin: 0; }
.sx-cases__list { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 90px); margin-top: clamp(40px, 6vw, 72px); }
.sx-cases__row { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .sx-cases__row { grid-template-columns: 1fr 1fr; }
  .sx-cases__row--flip .sx-cases__media { order: 2; }
}
.sx-cases__media { border-radius: var(--sx-radius-lg); overflow: hidden; border: 1px solid var(--sx-color-border); aspect-ratio: 16 / 11; }
.sx-cases__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-cases__tag { font-family: var(--sx-font-display); color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-size: .82rem; letter-spacing: .06em; margin-bottom: 10px; }
.sx-cases__title { font-family: var(--sx-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--sx-color-ink); margin: 0 0 12px; }
.sx-cases__desc { color: var(--sx-color-ink-soft); line-height: 1.65; margin: 0 0 22px; max-width: 46ch; }
.sx-cases__stats { display: flex; flex-wrap: wrap; gap: 28px; }
.sx-cases__sval { font-family: var(--sx-font-display); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary-dark, var(--sx-color-primary))); }
.sx-cases__slabel { font-size: .76rem; color: var(--sx-color-ink-soft); margin-top: 2px; }

/* ── phase_engine — numbered roadmap + intro rail + per-phase Key Outcomes ─ */
.sx-phaseng { padding: clamp(64px, 9vw, 110px) 0; background: var(--sx-color-bg); }
.sx-phaseng__grid { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1160px) {
  .sx-phaseng__grid { grid-template-columns: minmax(280px, 360px) 1fr; }
}
.sx-phaseng__eyebrow { color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 700; margin-bottom: 16px; }
.sx-phaseng__title { font-family: var(--sx-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; color: var(--sx-color-ink); margin: 0 0 18px; }
.sx-phaseng__title em, .sx-phaseng__title span { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-style: normal; }
.sx-phaseng__lead { color: var(--sx-color-ink-soft); line-height: 1.65; max-width: 42ch; margin: 0; }
.sx-phaseng__art { margin-top: 32px; }
.sx-phaseng__art img { width: 100%; max-width: 320px; height: auto; display: block; }

.sx-phaseng__phases { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.sx-phaseng__phase {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "num tile" "num main" "card card";
  column-gap: 18px; row-gap: 6px;
  align-items: start;
}
@media (min-width: 1160px) {
  .sx-phaseng__phase {
    grid-template-columns: 56px 64px minmax(0, 1fr) minmax(230px, 340px);
    grid-template-areas: "num tile main card";
    column-gap: 26px; row-gap: 4px;
    align-items: start;
  }
}
/* --notiles: no per-phase icon tile → number rail connects straight to the
   text, and the extra column collapses so copy + outcomes gain the space. */
.sx-phaseng--notiles .sx-phaseng__phase {
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "num main" "card card";
}
@media (min-width: 1160px) {
  .sx-phaseng--notiles .sx-phaseng__phase {
    grid-template-columns: 56px minmax(0, 1fr) minmax(230px, 340px);
    grid-template-areas: "num main card";
  }
}

/* dotted connecting line down the number rail */
.sx-phaseng__phase::before {
  content: ""; position: absolute; left: 25px; top: 58px; bottom: -46px; width: 2px;
  background: repeating-linear-gradient(var(--sx-color-border) 0 5px, transparent 5px 11px);
}
@media (min-width: 1160px) { .sx-phaseng__phase::before { left: 27px; } }
.sx-phaseng__phase:last-child::before { display: none; }

.sx-phaseng__node { grid-area: num; }
.sx-phaseng__num {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sx-color-primary-fill, var(--sx-color-primary)); color: var(--sx-color-on-primary);
  font-family: var(--sx-font-display); font-weight: 700; font-size: 1rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sx-color-primary) 35%, transparent);
}
.sx-phaseng__tile {
  grid-area: tile; align-self: start;
  width: 56px; height: 56px; border-radius: var(--sx-radius-lg, 14px);
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sx-color-primary) 10%, var(--sx-color-surface, #fff));
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-phaseng__tile svg { width: 26px; height: 26px; }
.sx-phaseng__main { grid-area: main; padding-top: 2px; }
.sx-phaseng__ptitle { font-family: var(--sx-font-display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--sx-color-ink); margin: 0 0 8px; }
.sx-phaseng__ptext { color: var(--sx-color-ink-soft); line-height: 1.6; margin: 0; max-width: 46ch; font-size: .95rem; }

.sx-phaseng__card {
  grid-area: card;
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-lg, 14px);
  padding: 18px 20px;
  box-shadow: var(--sx-shadow-card);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
@media (max-width: 1159px) { .sx-phaseng__card { margin-top: 12px; } }
.sx-phaseng__card-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sx-color-primary) 10%, transparent);
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-phaseng__card-icon svg { width: 22px; height: 22px; }
.sx-phaseng__card-label { color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.sx-phaseng__outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sx-phaseng__outcome { display: flex; gap: 8px; align-items: flex-start; color: var(--sx-color-ink); font-size: .9rem; line-height: 1.4; }
.sx-phaseng__outcome svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--sx-color-primary-ink, var(--sx-color-primary)); }

/* ── resources — downloadable lead-magnets (icon + title + desc + download) ── */
.sx-resources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.sx-resource {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, #ececf3);
  border-radius: var(--sx-radius-md, 14px);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-resource__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
  background: color-mix(in srgb, var(--sx-color-primary) 12%, transparent);
}
.sx-resource__icon svg { width: 22px; height: 22px; }
.sx-resource__title { font-weight: 700; font-size: 1.05rem; color: var(--sx-color-ink); }
.sx-resource__desc { font-size: .92rem; line-height: 1.5; color: var(--sx-color-ink-soft, var(--sx-color-muted)); }
.sx-resource__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .9rem; text-decoration: none;
  color: var(--sx-color-primary-ink, var(--sx-color-primary));
}
.sx-resource__cta svg { width: 16px; height: 16px; }
.sx-resource__cta:hover { text-decoration: underline; }

/* ── philosophy — approach statement + numbered principle pillars ── */
.sx-philosophy__statement {
  max-width: 760px; margin: 20px auto 0; text-align: center;
  font-size: 1.25rem; line-height: 1.6; color: var(--sx-color-ink); font-weight: 500;
}
.sx-philosophy__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; margin-top: 34px;
}
/* Exactly FIVE principles — auto-fit caps at four per row (5 x 240px + gaps
   needs 1280px against a 1132px container), so the fifth card drops onto its
   own line and the block reads as 4 + 1. When there are precisely five, lay
   them out as five columns instead. Scoped with :has(:nth-child(5):last-child)
   so 3-, 4- and 6-item grids are untouched; below 1100px it falls back to the
   auto-fit rule above and wraps normally. */
@media (min-width: 1100px) {
  .sx-philosophy__grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
  .sx-philosophy__grid:has(> :nth-child(5):last-child) .sx-principle { padding: 20px 18px; }
}
.sx-principle {
  padding: 24px; border-radius: var(--sx-radius-md, 14px);
  border: 1px solid var(--sx-color-border, #ececf3); background: var(--sx-color-surface, #fff);
  display: flex; flex-direction: column; gap: 8px;
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-principle__top { display: flex; align-items: center; justify-content: space-between; }
.sx-principle__num { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: color-mix(in srgb, var(--sx-color-primary-ink) 45%, var(--sx-color-ink-soft)); }
.sx-principle__icon { color: var(--sx-color-primary-ink, var(--sx-color-primary)); }
.sx-principle__icon svg { width: 22px; height: 22px; }
.sx-principle__title { font-weight: 700; font-size: 1.05rem; color: var(--sx-color-ink); }
.sx-principle__desc { font-size: .92rem; line-height: 1.5; color: var(--sx-color-ink-soft, var(--sx-color-muted)); }

/* ── publications — books / research covers ── */
.sx-publications__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; margin-top: 28px;
}
.sx-pub { display: flex; gap: 16px; align-items: flex-start; }
.sx-pub__cover { flex: none; width: 96px; }
.sx-pub__cover img, .sx-pub__ph {
  width: 96px; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.sx-pub__body { display: flex; flex-direction: column; gap: 5px; }
.sx-pub__title { font-weight: 700; font-size: 1.05rem; color: var(--sx-color-ink); }
.sx-pub__subtitle { font-size: .82rem; color: var(--sx-color-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.sx-pub__desc { font-size: .92rem; line-height: 1.5; color: var(--sx-color-ink-soft, var(--sx-color-muted)); }
.sx-pub__cta { margin-top: 4px; font-weight: 600; font-size: .9rem; color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-decoration: none; }
.sx-pub__cta:hover { text-decoration: underline; }

/* ── external_products — shop products that check out elsewhere ── */
.sx-external-products__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; margin-top: 28px;
}
.sx-extprod {
  display: flex; flex-direction: column;
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,.08));
  border-radius: 14px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sx-extprod:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.sx-extprod__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sx-extprod__body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1; }
.sx-extprod__title { margin: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--sx-color-ink); }
.sx-extprod__desc { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--sx-color-ink-soft, var(--sx-color-muted)); }
.sx-extprod__price { font-weight: 700; font-size: 1rem; color: var(--sx-color-ink); }
/* Pushed to the bottom so cards of different text length line their buttons up. */
.sx-extprod__cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  text-decoration: none; background: var(--sx-color-primary); color: var(--sx-color-on-primary, #fff);
}
.sx-extprod__cta:hover { filter: brightness(1.06); }
/* No link pasted yet — still shows in the editor, but is inert on the live site. */
.sx-extprod__cta--empty { opacity: .45; cursor: not-allowed; }

/* ── podcast — episode list ── */
.sx-podcast__list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.sx-episode {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: var(--sx-radius-md, 14px); border: 1px solid var(--sx-color-border, #ececf3);
  background: var(--sx-color-surface, #fff);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-episode__icon {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sx-color-primary-ink, var(--sx-color-primary)); background: color-mix(in srgb, var(--sx-color-primary) 12%, transparent);
}
.sx-episode__icon svg { width: 20px; height: 20px; }
.sx-episode__body { flex: 1; min-width: 0; }
.sx-episode__title { font-weight: 700; color: var(--sx-color-ink); }
.sx-episode__desc { font-size: .9rem; color: var(--sx-color-ink-soft, var(--sx-color-muted)); line-height: 1.45; }
.sx-episode__cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .9rem; color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-decoration: none; white-space: nowrap;
}
.sx-episode__cta svg { width: 15px; height: 15px; }

/* ── events — upcoming dates list ── */
.sx-events__list { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.sx-event-row {
  display: flex; align-items: center; gap: 20px; padding: 18px 20px; flex-wrap: wrap;
  border-radius: var(--sx-radius-md, 14px); border: 1px solid var(--sx-color-border, #ececf3);
  background: var(--sx-color-surface, #fff);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  --sx-color-stars: var(--sx-color-stars-on-surface, var(--sx-color-stars));
  color: var(--sx-color-ink);
}
.sx-event-row__date { flex: none; min-width: 120px; font-weight: 700; color: var(--sx-color-primary-ink, var(--sx-color-primary)); font-size: .95rem; }
.sx-event-row__body { flex: 1; min-width: 180px; }
.sx-event-row__title { font-weight: 700; color: var(--sx-color-ink); }
.sx-event-row__loc { font-size: .88rem; color: var(--sx-color-ink-soft); }
.sx-event-row__desc { font-size: .9rem; color: var(--sx-color-ink-soft, var(--sx-color-muted)); line-height: 1.45; margin-top: 2px; }
.sx-event-row__cta {
  flex: none; font-weight: 600; font-size: .9rem; color: var(--sx-color-primary-ink, var(--sx-color-primary)); text-decoration: none;
  padding: 8px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sx-color-primary) 40%, transparent);
}
.sx-event-row__cta:hover { background: color-mix(in srgb, var(--sx-color-primary) 8%, transparent); }
@media (max-width: 640px) { .sx-event-row__date { min-width: 0; } }

/* ─── Skins vs INVERSE bands ────────────────────────────────────────────
   The four skins each re-colour `.sx-eyebrow` for a LIGHT page
   (`primary-ink`, or `ink-soft` for civic). Those rules are `.sx-skin-x
   .sx-eyebrow` — the same (0,2,0) specificity as a section's own
   `.sx-<section> .sx-eyebrow`, but they appear LATER in this file, so the
   skin wins everywhere, including on the five bands that paint themselves
   dark with `inverse-bg`. Result, seen on founder-woman: the "Membership"
   eyebrow rendered in #1B3A5B (primary) on a #14131c panel — dark on dark.

   The section knows its own background, so it has to win. Prefixing with
   the attribute selector takes these to (0,3,0), which beats any skin
   without having to duplicate this per skin, and stays a no-op on templates
   that use no skin at all.

   NOTE: the contrast gate does not catch this class of bug — it renders
   each section standalone, with no skin class on an ancestor. */
[class*="sx-skin-"] .sx-subscription .sx-eyebrow,
[class*="sx-skin-"] .sx-cta-mid--has-bg .sx-eyebrow,
[class*="sx-skin-"] .sx-warranty--photo .sx-eyebrow,
[class*="sx-skin-"] .sx-rfp__panel .sx-eyebrow,
[class*="sx-skin-"] .sx-advantage .sx-eyebrow {
  color: var(--sx-color-accent-on-inverse, var(--sx-color-accent));
}
[class*="sx-skin-"] .sx-subscription .sx-eyebrow::before,
[class*="sx-skin-"] .sx-cta-mid--has-bg .sx-eyebrow::before,
[class*="sx-skin-"] .sx-warranty--photo .sx-eyebrow::before,
[class*="sx-skin-"] .sx-rfp__panel .sx-eyebrow::before,
[class*="sx-skin-"] .sx-advantage .sx-eyebrow::before {
  background: var(--sx-color-accent-on-inverse, var(--sx-color-accent));
}

/* ─── floating-glass, centred at the bottom ─────────────────────────────
   `floating-glass` was authored as a 520px panel floating on one side, so
   when it is centred with panel_halign/panel_valign the narrow column reads
   as off-balance under a full-bleed stage shot. Centring the panel means
   centring its contents too — otherwise the block is centred but the type
   inside still hangs left, which looks like a mistake rather than a choice.
   Scoped to the combination, so the one-sided use of the variant is
   untouched. */
.sx-hero-split--floating-glass.sx-hero-split--halign-center .sx-hero-split__panel {
  max-width: 760px;
  text-align: center;
  padding: 36px 44px;
}
.sx-hero-split--floating-glass.sx-hero-split--halign-center .sx-hero-split__panel .sx-eyebrow {
  justify-content: center;
}
.sx-hero-split--floating-glass.sx-hero-split--halign-center .sx-hero-split__panel .sx-hero-split__ctas {
  justify-content: center;
}
/* Bottom-aligned panels need breathing room from the fold, or the glass
   sits flush against the edge of the section. */
.sx-hero-split--floating-glass.sx-hero-split--valign-bottom .sx-hero-split__container {
  padding-bottom: clamp(32px, 6vh, 72px);
}

/* ─── A phone number is never a wrap opportunity ────────────────────────
   Measured on influencer's contact card: the three-column grid gave the
   phone column 108px, and "(305) 555-0148" broke across THREE lines
   ("(305)" / "555-" / "0148"), which reads as a broken layout and is
   unusable on a touch target. The hyphen and the spaces are legitimate
   break points to the browser, so the fix has to be explicit. Applies to
   every renderer that emits a tel: link, not just contact_info. */
a[href^="tel:"] {
  white-space: nowrap;
}
/* Same for the value cell that holds it, so a long label cannot squeeze the
   column below the number's own width. */
.sx-contact__item a[href^="tel:"],
.sx-contact__value a[href^="tel:"] {
  display: inline-block;
}

/* ─── zigzag + outline ──────────────────────────────────────────────────
   Each variant is fine alone and they collide when combined. `--zigzag`
   gives the numeral column `56px`, sized for the default 48px circular
   badge; `--outline` blows the numeral up to `font-size: 96px` with
   `width: auto`. A 96px "02" is ~110px wide, so it overflowed its column by
   roughly 55px on each side and printed straight through the step title and
   body text on the even (right-hand) rows — seen on cybersecurity, where
   "Fixed quote" and "Report and walkthrough" were unreadable.

   Widen the middle track to fit the numeral and push the copy clear of it.
   Scoped to the combination, so plain `--zigzag` and plain `--outline` are
   untouched. */
.sx-timeline--zigzag.sx-timeline--outline .sx-timeline__step {
  grid-template-columns: 1fr minmax(132px, max-content) 1fr;
}
.sx-timeline--zigzag.sx-timeline--outline .sx-timeline__body {
  padding-right: 40px;
}
.sx-timeline--zigzag.sx-timeline--outline .sx-timeline__step:nth-child(even) .sx-timeline__body {
  padding-right: 0;
  padding-left: 40px;
}
/* The centre rule sits under a 96px numeral; keep it from cutting through. */
.sx-timeline--zigzag.sx-timeline--outline .sx-timeline__num {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  background: var(--sx-color-bg);
}
@media (max-width: 720px) {
  /* the mobile rule already collapses to a 56px first column — let the
     numeral shrink rather than shove the text off-screen */
  .sx-timeline--zigzag.sx-timeline--outline .sx-timeline__step,
  .sx-timeline--zigzag.sx-timeline--outline .sx-timeline__step:nth-child(even) {
    grid-template-columns: 72px 1fr;
  }
  .sx-timeline--zigzag.sx-timeline--outline .sx-timeline__num {
    font-size: 52px;
    padding: 0;
  }
  .sx-timeline--zigzag.sx-timeline--outline .sx-timeline__body,
  .sx-timeline--zigzag.sx-timeline--outline .sx-timeline__step:nth-child(even) .sx-timeline__body {
    padding-left: 12px;
    padding-right: 0;
  }
}

/* ─── diagonal-split + cinematic ────────────────────────────────────────
   `--diagonal-split` forces the eyebrow to `--sx-color-ink` with
   `!important` (line ~1253), written for its usual case: a panel sitting on
   a light half. `--cinematic` does the opposite — it darkens the photo so
   the copy can be white. Combined, the eyebrow renders in dark ink on a
   dimmed photo: measured rgb(28,25,23) on author and rgb(18,36,36) on
   aqua-auto-spa, both effectively unreadable.

   Three rules already tried to make it white (the cinematic panel rule, and
   the skin's hero rule) and all lost to that one `!important`, which is
   exactly what `!important` costs. Matching both classes on the same element
   (0,3,0) plus `!important` settles it for this pairing only; plain
   `--diagonal-split` on a light panel is untouched. */
.sx-hero-split--diagonal-split.sx-hero-split--cinematic .sx-eyebrow {
  color: #fff !important;
}
.sx-hero-split--diagonal-split.sx-hero-split--cinematic .sx-eyebrow::before {
  background: #fff !important;
}

/* iOS Safari ZOOMS the whole page when a focused input's font-size is under
   16px, and it does not zoom back out — the visitor is left pinching their way
   around a form they were halfway through. Every form the shell renders was
   under that line: .sx-field__input at 15px and .sx-rfp__field at .95rem
   (15.2px), which covers book_table, booking_calendar, request_proposal,
   quick_quote, newsletter and pet_profile_form. Measured at 375px in a real
   browser, not assumed.
   16px only up to the 1024 breakpoint, so the desktop type scale is untouched;
   the 0.8px difference is invisible anyway, but the rule stays honest about
   what it is for. */
@media (max-width: 1024px) {
  .sx-field__input,
  .sx-rfp__field input,
  .sx-rfp__field textarea,
  .sx-rfp__field select {
    font-size: 16px;
  }
}

/* ── awards_laurel ──────────────────────────────────────────────────────────
   Uno por fila y con un filete entre medio, no en rejilla. Una rejilla iguala
   visualmente todos los premios, y un keynote ante 1,600 personas no pesa lo
   mismo que un curso: en fila cada uno tiene su turno y el orden lleva el peso.
   La corona hereda currentColor y va a baja opacidad — es el marco, no el
   premio; si compite con el año deja de leerse el dato que importa. */
.sx-laurels__list { list-style: none; margin: 40px 0 0; padding: 0; }
.sx-laurels .sx-laurel {
  display: grid; grid-template-columns: 196px 1fr; gap: 36px;
  align-items: center; padding: 34px 0;
  border-top: 1px solid var(--sx-color-border);
}
.sx-laurels .sx-laurel:last-child { border-bottom: 1px solid var(--sx-color-border); }
.sx-laurel__seal { position: relative; display: grid; place-items: center; color: var(--sx-color-primary); }
.sx-laurel__wreath { width: 170px; height: auto; opacity: .30; display: block; }
.sx-laurel__year {
  position: absolute; font-family: var(--sx-font-display); font-size: 30px;
  color: color-mix(in srgb, var(--sx-color-accent, var(--sx-color-primary)) 60%, #000); /* 40% negro: acentos menta/oro claros daban 1.66-2.6:1 sobre beige — el gate pide 3 en texto grande; con la mezcla el peor caso queda en 4.3:1 */ font-variant-numeric: tabular-nums; line-height: 1;
}
.sx-laurel__title { font-size: 23px; font-weight: 600; margin: 0; line-height: 1.25; color: var(--sx-color-ink); }
/* Primary MEZCLADO con negro (25%): un primary claro (#e85d5d en soft/neutral)
   daba 3.08:1 sobre el beige — bajo el piso 4.5 del gate de contraste. La
   mezcla lo lleva a 5.08:1 conservando el matiz del tema; en temas de primary
   oscuro solo lo oscurece un paso más, que sobre fondos claros suma. */
.sx-laurel__sub { margin: 2px 0 10px; font-family: var(--sx-font-display); font-style: italic; font-size: 17px; color: color-mix(in srgb, var(--sx-color-primary) 75%, #000); }
.sx-laurel__text { margin: 0 0 10px; color: var(--sx-color-ink-soft); font-size: 15px; max-width: 62ch; }
.sx-laurel__issuer { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--sx-color-primary) 75%, #000); font-weight: 600; }
@media (max-width: 880px) {
  .sx-laurels .sx-laurel { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .sx-laurel__text { max-width: none; }
  .sx-laurel__wreath { width: 132px; }
  .sx-laurel__year { font-size: 24px; }
}

/* Insignia del hero_portrait — un sello de credencial sobre el eyebrow.
   Tamaño fijo en px y no en %, porque un sello que escala con la columna
   pierde el detalle del grabado justo cuando la columna se estrecha. */
.sx-hero-portrait__badge { display: block; width: 118px; height: auto; margin: 0 0 22px; }
@media (max-width: 880px) { .sx-hero-portrait__badge { width: 86px; margin-bottom: 16px; } }

/* EL SELLO NO PUEDE QUEDAR DEBAJO DE LA CABECERA (26-ago-2026).
 *
 * Eran DOS cosas a la vez, y arreglar una sola no bastaba:
 *
 *   · el sello llevaba `z-index: 3` y la cabecera `100`, asi que donde se
 *     tocaban ganaba la cabecera;
 *   · y su `top` se mide desde el borde del hero, que empieza DEBAJO de la
 *     cabecera fija — o sea, el sello nacia dentro de esa banda.
 *
 * La salida NO es subirle el z-index por encima de la cabecera: entonces el
 * lacre flotaria sobre el menu al hacer scroll, que es peor. Se le da la altura
 * de la cabecera como suelo, con una variable que se puede afinar por sitio.
 */
:root { --sx-header-h: 72px; }
@media (min-width: 1024px) { :root { --sx-header-h: 78px; } }

/* Sello en la esquina: se sale del flujo, así que puede crecer sin empujar el
   titular. El tope de 200px no es estético — por encima de eso se come el
   espacio sobre la cabeza de la figura en pantallas de portátil. */
.sx-hero-portrait--badge-right .sx-hero-portrait__badge {
  position: absolute; z-index: 3; margin: 0;
  top: calc(var(--sx-header-h, 72px) + clamp(10px, 2.5vh, 34px));
  right: clamp(14px, 3.5vw, 60px);
  width: clamp(120px, 13vw, 200px);
}
@media (max-width: 880px) {
  .sx-hero-portrait--badge-right .sx-hero-portrait__badge {
    width: 96px; top: calc(var(--sx-header-h, 72px) + 10px); right: 14px; }
}

/* Icono de respaldo en certifications. El modelo documenta `icon` como
   "fallback icon if no image" desde siempre, pero el renderer saltaba directo
   al placeholder: una credencial sin foto de insignia salía como el icono de
   imagen rota, que es peor que no ponerla. */
.sx-cert__icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--sx-color-primary); }
.sx-cert__icon svg { width: 30px; height: 30px; }

/* ── results_ledger ─────────────────────────────────────────────────────────
   Tarjetas blancas sobre textura. El velo no es decorativo: la textura tiene
   zonas oscuras y sin él las tarjetas pierden el borde justo donde cae una
   veta. El número va en la display face y en el color de marca porque es lo
   único que se lee de lejos; la atribución va bajo un filete, separada, para
   que se lea como una fuente y no como parte de la frase. */
.sx-ledger { position: relative; overflow: hidden; }
.sx-ledger__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sx-fondo-pos, center); }
.sx-ledger--bg .sx-ledger__wash { position: absolute; inset: 0; background: rgba(255,255,255,.74); pointer-events: none; }
.sx-ledger__inner { position: relative; }
.sx-ledger__grid { display: grid; gap: 22px; margin-top: 40px; }
.sx-ledger--3 .sx-ledger__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sx-ledger--2 .sx-ledger__grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.sx-ledger__card {
  background: var(--sx-color-surface); border-radius: var(--sx-radius-lg);
  padding: 30px 30px 26px; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(20,12,32,.07);
  /* Panel con SUPERFICIE PROPIA dentro de una banda: re-apunta sus tokens de
     tinta a los de superficie (regla de la casa, ver el bloque sx-bg--surface
     arriba). Sin esto heredaba la tinta de la banda — en auto-repair, tinta
     casi blanca sobre tarjeta blanca: 1.07:1. Gate de contraste. */
  --sx-color-ink: var(--sx-color-ink-on-surface, var(--sx-color-ink));
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface, var(--sx-color-ink-soft)));
  color: var(--sx-color-ink);
}
.sx-ledger__value {
  font-family: var(--sx-font-display); font-size: clamp(38px, 4vw, 52px);
  line-height: 1; font-variant-numeric: tabular-nums;
  /* El numeral tira del primary HACIA la tinta correcta de la tarjeta: en
     tarjeta clara se oscurece (menta 1.88:1 → pasa), en tarjeta oscura se
     aclara — legible en ambos modos sin bifurcar reglas. */
  color: color-mix(in srgb, var(--sx-color-primary) 55%, var(--sx-color-ink));
}
.sx-ledger__text { margin: 16px 0 0; color: var(--sx-color-ink-soft); font-size: 15.5px; line-height: 1.55; }
.sx-ledger__source {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sx-color-border);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--sx-color-ink);
}
.sx-ledger__source:not(:first-child) { margin-top: 18px; }
@media (max-width: 640px) { .sx-ledger__card { padding: 24px 22px 22px; } }
.sx-ledger--head-left .sx-section__head { text-align: left; margin-left: 0; margin-right: auto; max-width: none; }
.sx-ledger--head-left .sx-section__head .sx-lead { margin-left: 0; margin-right: auto; max-width: 62ch; }

/* Sello al centro. Se superpone un poco a la figura a propósito: un sello
   flotando en el hueco vacío parece descolocado, encabalgado sobre la foto se
   lee como lo que es, un lacre estampado encima. */
.sx-hero-portrait--badge-center .sx-hero-portrait__badge {
  position: absolute; z-index: 3; margin: 0;
  top: calc(var(--sx-header-h, 72px) + clamp(8px, 2vh, 28px));
  left: 50%; transform: translateX(-50%);
  width: clamp(120px, 13vw, 200px);
}
/* El sello centrado cuelga sobre el arranque de la columna de texto: sin
   holgura, el eyebrow queda debajo del lacre. Se empuja el copy hacia abajo
   solo en desktop (en móvil el sello va en flujo). */
@media (min-width: 1024px) {
  .sx-hero-portrait--badge-center .sx-hero-portrait__copy {
    padding-top: calc(var(--sx-header-h, 72px) + clamp(170px, 24vh, 280px)); }
}
/* En móvil (una sola columna) el sello absoluto caería sobre el eyebrow, así
   que se esconde y aparece la copia en flujo: centrada, después de los CTAs y
   justo antes de la foto. */
.sx-hero-portrait__badge--flow { display: none; }
@media (max-width: 1023px) {
  .sx-hero-portrait--badge-center .sx-hero-portrait__badge { display: none; }
  .sx-hero-portrait--badge-center .sx-hero-portrait__badge--flow {
    display: block; position: static; transform: none;
    width: 112px; margin: 28px auto 0;
  }
}

/* Ilustración sin marco. Un borde alrededor de un PNG transparente dibuja una
   caja donde la imagen no tiene bordes: se ve el rectángulo del archivo, no la
   figura. Para una foto el marco ayuda; para una ilustración recortada, estorba. */
.sx-featsplit--bare .sx-featsplit__img { border: 0; border-radius: 0; }

/* Emisor de una credencial. Va debajo y más pequeño porque no compite con el
   nombre — pero tiene que estar: "Machine Learning" sin MIT, o "MBA" sin la
   escuela, es la mitad de la credencial. */
.sx-cert__issuer { margin-top: 4px; font-size: 12px; letter-spacing: .04em; color: var(--sx-color-ink-soft); }

/* ── zoom_media ─────────────────────────────────────────────────────────────
   Sombra en tres capas, no una. Una sola sombra grande y difusa deja la pieza
   flotando como una calcomanía; tres —contacto, media distancia y ambiente—
   es como se comporta la luz de verdad, y es lo que hace que se lea elevada
   en vez de pegada. */
.sx-zoommedia .sx-section__head:empty + .sx-zoommedia__frame,
.sx-zoommedia__frame:first-child { margin-top: 0; }
.sx-zoommedia__frame {
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  transform-origin: 50% 50%;
  background: var(--sx-color-bg-alt);
  margin-top: 44px;
}
.sx-zoommedia:not(.sx-zoommedia--flat) .sx-zoommedia__frame {
  box-shadow:
    0 1px 2px rgba(20, 12, 32, .05),
    0 8px 18px rgba(20, 12, 32, .06),
    0 28px 56px rgba(20, 12, 32, .09),
    0 60px 120px rgba(20, 12, 32, .07);
}
.sx-zoommedia__el { display: block; width: 100%; height: auto; }
.sx-zoommedia--normal .sx-zoommedia__frame { max-width: 780px; margin-left: auto; margin-right: auto; }
.sx-zoommedia--full .sx-zoommedia__frame { max-width: none; }

/* El zoom sólo existe donde el navegador sabe animar contra el scroll. La
   escala inicial vive DENTRO del @supports a propósito: si estuviera fuera, un
   navegador sin la función dejaría la pieza encogida para siempre. */
@supports (animation-timeline: view()) {
  .sx-zoommedia__frame {
    transform: scale(var(--sx-zoom-from, .88));
    animation: sx-zoom-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 55%;
  }
}
@keyframes sx-zoom-in { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sx-zoommedia__frame { animation: none !important; transform: none !important; }
}

/* ── zoom_media · escena de scroll ──────────────────────────────────────────
   El carril mide 220vh: ese 120% de más ES el recorrido sobre el que corre el
   efecto. Sin él el escenario se despegaría de inmediato y no habría nada que
   animar. El escenario va sticky y llena la ventana, así que el vídeo ocupa
   exactamente el sitio del hero y el lector entra en él al bajar. */
.sx-zoomscene { padding: 0; }
.sx-zoomscene__track { position: relative; height: 220vh; background: var(--sx-color-ink, #111); }
.sx-zoomscene__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--sx-color-ink, #111);
}
.sx-zoomscene__layer {
  position: absolute; inset: 0;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}
.sx-zoomscene__layer video,
.sx-zoomscene__layer img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sx-zoomscene__image { opacity: 0; }
/* Viñeta suave: el texto encima necesita un suelo, y sin ella el contraste
   depende de qué fotograma esté pasando en ese momento. */
.sx-zoomscene__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.06) 0%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.68) 100%);
}
.sx-zoomscene__content {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 24px; text-align: center;
}
.sx-zoomscene__card { max-width: 900px; color: #fff; }
.sx-zoomscene__card .sx-eyebrow { color: rgba(255,255,255,.86); }
.sx-zoomscene__title {
  margin: 10px 0 12px; color: #fff;
  font-family: var(--sx-font-display); font-size: clamp(30px, 5vw, 58px); line-height: 1.06;
}
.sx-zoomscene__sub { margin: 0; color: rgba(255,255,255,.9); font-size: clamp(16px, 2.1vw, 21px); }
@media (max-width: 880px) { .sx-zoomscene__track { height: 190vh; } }
@media (prefers-reduced-motion: reduce) {
  .sx-zoomscene__track { height: 100vh; }
  .sx-zoomscene__layer { transform: none !important; opacity: 1 !important; filter: none !important; }
  .sx-zoomscene__image { opacity: 0 !important; }
}

/* ── estimator · cotizador ─────────────────────────────────────────────────
   La sección es una CÁSCARA: sections.js pinta el punto de montaje `.sx-est` y
   un esqueleto, y el runtime lo hidrata con lo que devuelva el manifiesto. Por
   eso todo cuelga de `.sx-est` y nada depende de CUÁNTOS drivers o extras traiga
   la configuración: un cotizador de tres filas y otro de doce usan estas mismas
   reglas, sin una sola clase por-negocio.

   Panel y formulario se pintan sobre `surface`, así que re-mapean sus tokens de
   tinta igual que las demás tarjetas del archivo. Sin ese re-mapeo un tema
   oscuro invierte el fondo y deja el texto del mismo color — el 1.02:1 que el
   gate de contraste cazó en `advantage`.

   Los nombres de clase son CONTRATO con el hidratador (`attachEstimator` en
   runtime.js): aquí no se inventa ninguno, porque una clase que el runtime no
   emite es CSS muerto y una que emite y falta sale sin estilo en el sitio
   publicado. */
.sx-est {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
/* data-layout="split" abre dos columnas SOLO por encima del breakpoint de la
   casa; "stacked" se queda en una siempre. Por debajo de 1024 dos columnas de
   ~380px dejan los chips en tiras de un elemento y el precio fuera de la vista. */
@media (min-width: 1025px) {
  .sx-est[data-layout="split"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
/* Fetch en vuelo: se atenúa, nunca se esconde el número anterior — un precio
   que desaparece mientras se recalcula se lee como un error. */
.sx-est.is-busy { opacity: .72; transition: opacity .15s ease; }

.sx-est__panel,
.sx-est__gate {
  background: var(--sx-color-surface, #fff);
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 28px);
  --sx-color-ink: var(--sx-color-ink-on-surface);
  --sx-color-ink-soft: var(--sx-color-ink-soft-on-surface, var(--sx-color-ink-on-surface));
  --sx-color-accent-ink: var(--sx-color-accent-ink-on-surface, var(--sx-color-accent-ink));
  --sx-color-primary-ink: var(--sx-color-primary-ink-on-surface, var(--sx-color-primary-ink));
  color: var(--sx-color-ink);
}

/* ── Preguntas: etiqueta a la izquierda, control a la derecha ───────────── */
.sx-est__q {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
}
.sx-est__q:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-est__label { font-weight: 700; font-size: 15px; color: var(--sx-color-ink); }
.sx-est__hint  { display: block; font-weight: 400; font-size: 13px; color: var(--sx-color-ink-soft); margin-top: 2px; }

/* ── Chips (bandas, cadencia, acabado) ──────────────────────────────────── */
.sx-est__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-est__chip {
  padding: 8px 14px;
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.12));
  border-radius: 999px;
  background: var(--sx-color-bg, #fff);
  color: var(--sx-color-ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sx-est__chip:hover { border-color: var(--sx-color-primary, #7C3AED); }
.sx-est__chip.is-on {
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  border-color: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
}

/* ── Stepper: − valor + ─────────────────────────────────────────────────────
   El valor va en cifras tabulares para que pasar de 9 a 10 no ensanche la fila
   y mueva los botones bajo el dedo. */
.sx-est__step { display: flex; align-items: center; gap: 8px; }
.sx-est__step-btn {
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.12));
  border-radius: 10px;
  background: var(--sx-color-bg, #fff);
  color: var(--sx-color-ink);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.sx-est__step-btn:hover { border-color: var(--sx-color-primary, #7C3AED); }
.sx-est__step-btn[disabled] {
  opacity: .45; cursor: not-allowed;
  border-color: var(--sx-color-border, rgba(0,0,0,0.12));
}
.sx-est__step-val {
  min-width: 3ch; text-align: center; font-weight: 700; font-size: 16px;
  color: var(--sx-color-ink); font-variant-numeric: tabular-nums;
}

/* ── Extras, agrupados ──────────────────────────────────────────────────── */
.sx-est__group { padding: 14px 0 0; }
.sx-est__group-title {
  margin: 0 0 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sx-color-ink-soft);
}
.sx-est__addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx-est__addon {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.12));
  border-radius: 12px;
  background: var(--sx-color-bg, #fff);
  color: var(--sx-color-ink);
  font-size: 14px; text-align: left; cursor: pointer;
}
.sx-est__addon:hover { border-color: var(--sx-color-primary, #7C3AED); }
.sx-est__addon.is-on {
  border-color: var(--sx-color-primary-fill, var(--sx-color-primary));
  background: color-mix(in srgb, var(--sx-color-primary) 10%, var(--sx-color-bg, #fff));
}
.sx-est__addon-name  { font-weight: 600; }
.sx-est__addon-price { margin-left: auto; color: var(--sx-color-ink-soft); white-space: nowrap; }
.sx-est__addon-qty {
  width: 4.5rem; flex: none;
  padding: 7px 9px;
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.12));
  border-radius: 8px;
  background: var(--sx-color-bg, #fff);
  color: var(--sx-color-ink);
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
}

/* ── Resultado ──────────────────────────────────────────────────────────────
   Fondo de marca con su tinta pareja (`on-primary`): es el único par que el
   auditor de contraste garantiza legible en los dos modos. Dentro de la tarjeta
   la jerarquía se hace con tamaño y peso, NUNCA bajando la opacidad del texto —
   ahí es donde se pierden los puntos de contraste sin que se note. */
.sx-est__aside { display: grid; gap: 12px; align-content: start; }
.sx-est__result {
  position: sticky; top: 16px;
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 28px);
}
.sx-est__result-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sx-est__range {
  margin: 6px 0 2px;
  font-family: var(--sx-font-display);
  font-size: clamp(32px, 4.4vw, 46px); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sx-est__sub { font-size: 14px; }
.sx-est__table {
  width: 100%; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid currentColor;
  border-collapse: collapse; font-size: 14px;
}
.sx-est__table th,
.sx-est__table td { padding: 5px 0; text-align: left; font-weight: 400; }
.sx-est__table td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Botón: dentro de la tarjeta de marca se invierte (fondo `on-primary`, tinta
   `primary-fill`) — el mismo par, al revés, sigue siendo legible; un botón
   morado sobre morado no se ve. */
.sx-est__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 24px;
  border: 1px solid transparent; border-radius: var(--sx-radius-md, 12px);
  background: var(--sx-color-primary-fill, var(--sx-color-primary));
  color: var(--sx-color-on-primary, #fff);
  font-family: var(--sx-font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.sx-est__result .sx-est__cta {
  margin-top: 16px;
  background: var(--sx-color-on-primary, #fff);
  color: var(--sx-color-primary-fill, var(--sx-color-primary));
}

/* ── Puerta de contacto (lead gate) ─────────────────────────────────────── */
.sx-est__gate { display: none; gap: 10px; }
.sx-est__gate.is-open { display: grid; }
.sx-est__field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sx-est__field input,
.sx-est__field select,
.sx-est__field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.12));
  border-radius: 10px;
  background: var(--sx-color-bg, #fff);
  color: var(--sx-color-ink);
  font: inherit; font-size: 15px;
}
/* Honeypot: fuera de la vista pero PRESENTE en el layout. Con `display:none`
   los bots lo saltan y la trampa deja de atrapar nada. */
.sx-est__hp {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
/* Estado: se conserva el matiz (verde/rojo) pero mezclado con la tinta de la
   superficie, así el mensaje se lee igual sobre un panel claro y uno oscuro —
   un verde fijo cumple en uno de los dos modos y falla en el otro. */
.sx-est__status { min-height: 1.2em; font-size: .9rem; color: var(--sx-color-ink-soft); }
.sx-est__status.is-ok    { font-weight: 600; color: color-mix(in srgb, #16a34a 55%, var(--sx-color-ink)); }
.sx-est__status.is-error { font-weight: 600; color: color-mix(in srgb, #dc2626 55%, var(--sx-color-ink)); }

/* Letra chica del estimado: va sobre la banda, no sobre el panel. */
.sx-est__note { margin: 14px 0 0; font-size: 13px; color: var(--sx-color-ink-soft); }

/* DENTRO de la tarjeta de resultado el fondo es el color de marca, así que la
   tinta de fondo claro (`--sx-color-ink-soft`) queda ilegible: en Dulce
   Cleaning, con marca azul, el aviso salía verde oscuro sobre azul y no se leía
   (Zoe, 21-ago). Aquí se hereda el color de la tarjeta —sea blanco sobre una
   marca oscura o negro sobre una clara— y se atenúa con opacidad, que funciona
   con CUALQUIER marca sin conocerla.

   La puerta de contraste no lo cazó porque estos nodos los inyecta el runtime
   al hidratar, y la auditoría mide lo que pinta el renderer: `R.estimator`
   sólo emite la nota FUERA de la tarjeta, sobre el fondo de la página, donde
   la tinta suave sí es correcta. Misma clase, dos superficies. */
.sx-est__result .sx-est__note { color: inherit; opacity: .78; }
.sx-est__result .sx-est__status { color: inherit; opacity: .9; }
/* El verde y el rojo se mezclan HACIA el color de la tarjeta para seguir
   legibles sobre la marca sin perder su significado: un error que no se lee es
   un formulario que la clienta cree que envió. */
.sx-est__result .sx-est__status.is-ok {
  opacity: 1; color: color-mix(in srgb, currentColor 60%, #16a34a);
}
.sx-est__result .sx-est__status.is-error {
  opacity: 1; color: color-mix(in srgb, currentColor 55%, #dc2626);
}

/* Teclado: chips, extras y stepper son botones reales; sin foco visible no hay
   forma de saber dónde se está al tabular por veinte controles. */
.sx-est__chip:focus-visible,
.sx-est__addon:focus-visible,
.sx-est__step-btn:focus-visible,
.sx-est__cta:focus-visible,
.sx-est__addon-qty:focus-visible,
.sx-est__field input:focus-visible,
.sx-est__field select:focus-visible,
.sx-est__field textarea:focus-visible {
  outline: 2px solid var(--sx-color-primary, #7C3AED);
  outline-offset: 2px;
}

/* ── Esqueleto previo a la hidratación ──────────────────────────────────── */
.sx-est__skel { display: contents; }
.sx-est__skel-panel {
  border: 1px solid var(--sx-color-border, rgba(0,0,0,0.08));
  border-radius: 18px; padding: clamp(18px, 2.2vw, 28px);
  background: var(--sx-color-surface, #fff);
}
.sx-est__skel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.sx-est__skel-bar,
.sx-est__skel-chip,
.sx-est__skel-result {
  background: color-mix(in srgb, var(--sx-color-ink) 12%, transparent);
  border-radius: 999px;
}
.sx-est__skel-bar  { height: 12px; width: 42%; }
.sx-est__skel-chip { height: 30px; width: 132px; }
.sx-est__skel-result { height: 190px; width: 100%; border-radius: 18px; }

@media (max-width: 1024px) {
  .sx-est__addons { grid-template-columns: minmax(0, 1fr); }
  /* El resultado deja de ser sticky: en una sola columna queda justo debajo de
     las preguntas, y una tarjeta pegada taparía la propia puerta de contacto. */
  .sx-est__result { position: static; }
  .sx-est__q { align-items: flex-start; }
  .sx-est__skel-result { height: 120px; }
}

/* ── about_trio — checks · foto · discurso ─────────────────────────
   Tres columnas con la foto EN MEDIO. `about` no la daba: `features`
   es de dos y `triad` obliga a tarjetas con imagen en las columnas 2 y 3
   (maqueta JC, 04-sep-2026). Móvil: se apilan en orden de lectura —
   encabezado, foto, checks— con `order`, porque leer primero los checks
   sin haber leído el titular no tiene sentido. */
.sx-trio__grid { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
.sx-trio__aside { order: 3; }
.sx-trio__media { order: 2; }
.sx-trio__body  { order: 1; }
@media (min-width: 900px) {
  .sx-trio__grid { grid-template-columns: 1fr 1.15fr 1fr; gap: 40px; }
  .sx-trio__aside { order: 1; }
  .sx-trio__media { order: 2; }
  .sx-trio__body  { order: 3; }
}
.sx-trio__tag {
  /* SIN fondo propio a propósito. Lo llevaba en `bg-alt` con la tinta en
     `ink`, y en los temas donde la sección YA se pinta sobre bg-alt eso es
     tinta sobre tinta: 1.04:1 medido en auto-repair y videographer
     (test/section-contrast, 05-sep-2026). Heredando el fondo de la sección,
     el par ink/bg lo garantiza el tema, que es lo que el resto del shell
     hace. La barra roja da el mismo gesto que la maqueta. */
  display: inline-block; padding: 8px 0 8px 16px;
  border-left: 3px solid var(--sx-color-primary);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sx-color-ink);
}
.sx-trio__checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.sx-trio__check { display: flex; gap: 12px; align-items: flex-start; color: var(--sx-color-ink); line-height: 1.5; }
.sx-trio__tick { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sx-color-primary); }
.sx-trio__tick svg { width: 20px; height: 20px; display: block; }
.sx-trio__img, .sx-trio__img-ph {
  width: 100%; display: block; border-radius: var(--sx-radius-lg);
  aspect-ratio: 3 / 4; object-fit: cover; box-shadow: var(--sx-shadow-card);
}
.sx-trio__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--sx-color-primary); color: var(--sx-color-on-primary);
  margin-bottom: 22px;
}
.sx-trio__badge svg { width: 26px; height: 26px; }
.sx-trio__heading { margin: 0 0 18px; }
.sx-trio__text { color: var(--sx-color-ink-soft); line-height: 1.65; margin: 0 0 26px; }

/* Recursos: tarjetas por fila. Sin `columns` se queda la rejilla heredada
   (4 en escritorio); con él manda el template — Zoe pidió 3 en 3 en Tu
   Oficina, donde seis fichas en cuatro columnas dejaban dos huérfanas. */
@media (min-width: 900px) {
  .sx-resources--cols2 .sx-resources__grid { grid-template-columns: repeat(2, 1fr); }
  .sx-resources--cols3 .sx-resources__grid { grid-template-columns: repeat(3, 1fr); }
  .sx-resources--cols4 .sx-resources__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ── El fondo de sección gana al color plano ───────────────────────
   `sx-bg--*` pinta el fondo de los hijos con !important (arriba), así
   que una sección con `bg_style` tapaba por completo la foto de
   `section_background`: la imagen cargaba y no se veía nada. Aquí, al
   final y con la misma arma, la foto vuelve a verse. Sólo afecta al
   hijo directo — las tarjetas de dentro conservan su superficie. */
.sx-section-wrap.sx-secbg > .sx-section,
.sx-section-wrap.sx-secbg > section { background: transparent !important; }

/* ─ ÉNFASIS EN CURSIVA DENTRO DE UN TITULAR ───────────────────────
   El remate del diseño elegante: la segunda mitad del titular en cursiva y
   en el color de acento. Se pinta con `heading_html` + <em>.

   Va con la display (Playfair) y NO en negrita: una serif en cursiva ya pesa
   lo suyo, y engordarla la convierte en un grito.

   El acento tiene que despejar 4,5:1 sobre el papel — el salvia claro del
   original (#A9B6A4) da 1,96:1 y no se lee. Por eso la plantilla usa un
   salvia más profundo; el token manda y aquí no se clava ningún color. */
/* Los titulares con clase PROPIA no pasan por `.sx-h2`, así que la regla de
   abajo no los alcanzaba: `advantage`, `capability_grid` y `feature_split`
   pintaban la cursiva recta y en color de texto. Verificado ejecutando el
   motor: el <em> vive en `.sx-advantage__heading`, `.sx-capgrid__heading` y
   `.sx-featsplit__heading`. */
.sx-h2 em,
.sx-advantage__heading em,
.sx-capgrid__heading em,
.sx-featsplit__heading em,
.sx-hero-portrait__title em {
  font-family: var(--sx-font-display);
  font-style: italic;
  font-weight: inherit;
  color: var(--sx-color-accent-ink, var(--sx-color-accent));
}
/* SOBRE PANEL OSCURO, EL ACENTO ES EL OTRO (07-sep-2026, Zoe: «no se ve esas
   letras»).

   `accent-ink` está afinado contra el PAPEL: para despejar 4,5:1 sobre la
   crema hay que OSCURECER el acento. `advantage` se pinta sobre
   `--sx-color-inverse-bg`, así que ahí ese mismo valor cae encima de un fondo
   casi negro y desaparece — el titular en cursiva quedaba fantasma.

   `--sx-color-accent-on-inverse` es justo el token para eso, y el runtime lo
   DERIVA solo del acento del tema contra el fondo inverso (`legibleAccent`,
   runtime.js:612) cuando el tema no lo declara. Mismo patrón que ya usa
   `.sx-hero-split--cinematic`, cuyo comentario describe este mismo fallo con
   98 plantillas afectadas. */
.sx-advantage__heading em,
.sx-hero-portrait--tone-light .sx-hero-portrait__title em {
  color: var(--sx-color-accent-on-inverse, var(--sx-color-accent));
}

/* ── Materials & tools · variante TARJETAS (09-sep-2026) ─────────────
   Zoe: «haz que esta se vea mucho mejor … con overlay de colores, más el
   link a una sección de la web más la imagen», y el titular «grande y
   elegante».

   La foto va de fondo y encima dos capas: el TINTE de la tarjeta y un
   degradado oscuro de abajo arriba. El degradado no es decoración — sin él
   un tinte claro deja el texto blanco ilegible, que es el fallo con el que
   nacen todas las tarjetas con foto. El orden importa: el oscuro va DEBAJO
   del texto y ENCIMA de la foto. */
.sx-material-cards {
  display: grid;
  grid-template-columns: repeat(var(--sx-mat-cols, 4), minmax(0, 1fr));
  gap: 16px;
}
.sx-material-cards[data-cols="3"] { --sx-mat-cols: 3; }
.sx-material-cards[data-cols="5"] { --sx-mat-cols: 5; }
.sx-material-cards[data-cols="6"] { --sx-mat-cols: 6; }

.sx-material-card {
  position: relative;
  min-height: 240px;
  padding: 24px;
  border-radius: var(--sx-radius-lg, 18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  background-image: var(--sx-mat-foto, none);
  background-size: cover;
  background-position: center;
  box-shadow: var(--sx-shadow-md, 0 10px 30px rgb(0 0 0 / 0.12));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Tinte + oscurecido, en una sola capa para no apilar pseudo-elementos. */
.sx-material-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.05)),
    var(--sx-mat-tinte, var(--sx-color-accent));
  opacity: 0.88;
  pointer-events: none;
}
/* Sin foto el tinte se queda solo: una tarjeta plana de color, que sigue
   siendo legible. Mejor eso que un rectángulo gris de «falta imagen». */
.sx-material-card > * { position: relative; z-index: 1; }
.sx-material-card__t {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.sx-material-card__d {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.92;
  max-width: 24ch;
}
/* La flecha se separa del texto y se apoya abajo a la derecha, como en la
   referencia: dice «esto lleva a algún sitio» sin ocupar una línea. */
.sx-material-card__arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 17px;
  transition: transform 0.18s ease;
}
a.sx-material-card:hover { transform: translateY(-3px); }
a.sx-material-card:hover .sx-material-card__arrow { transform: translateX(3px); }
a.sx-material-card:focus-visible {
  outline: 3px solid var(--sx-color-accent);
  outline-offset: 3px;
}
/* EL TITULAR, GRANDE Y ELEGANTE. Solo en esta variante: subir el `h2` global
   cambiaría todas las secciones de todos los sitios. */
.sx-materials--cards .sx-h2 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

@media (max-width: 1024px) {
  .sx-material-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sx-material-cards { grid-template-columns: 1fr; }
  .sx-material-card { min-height: 200px; }
}


/* ── Visor 360 · ficha de la escena (09-sep-2026) ────────────────────
   Las fichas de todas las escenas viajan en el HTML y solo se ve la activa.
   Se oculta con `display:none` y no con opacidad: una ficha invisible pero
   presente seguiría ocupando su alto y empujaría el visor hacia abajo. */
.sx-pano__scenes { margin-top: 18px; }
.sx-pano__scene { display: none; }
.sx-pano__scene.is-active { display: block; }
/* En `rows` cada fila trae su ficha directamente, sin pila que alternar. */
.sx-pano--rows .sx-pano__scene { display: block; }

/* Los DATOS: icono, cifra y qué es. En rejilla y no en lista para que dos
   columnas de datos cortos no dejen media pantalla vacía. */
.sx-pano__specs {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 18px;
}
.sx-pano__spec {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
}
.sx-pano__spec svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: var(--sx-color-accent);
}
.sx-pano__specv { font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--sx-color-ink); }
.sx-pano__specl { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--sx-color-ink-soft); }

@media (max-width: 640px) {
  .sx-pano__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* quick_quote — título e intro DENTRO del panel del formulario (opcionales) */
.sx-leadform__ftitle { grid-column:1 / -1; font-size:clamp(22px,2.4vw,30px); font-weight:700; line-height:1.1; color:var(--sx-color-ink,#111); margin:0; }
.sx-leadform__fintro { grid-column:1 / -1; margin:-6px 0 4px; color:var(--sx-color-ink-soft,#555); font-size:15px; line-height:1.6; }
.sx-form:not(.sx-leadform--card .sx-form) .sx-leadform__ftitle { margin-bottom:6px; }

/* LA CITA DE LA BARRA DE FORMATO (Zoe, 12-sep-2026: «cada vez que pongo quote
   desaparece, debería salir el " en vez de desaparecer»). El shell no tenía
   ningún estilo para <blockquote>: salía sin comillas y con los márgenes del
   navegador —1em arriba y abajo, que a 140px de titular empujaba el hero hacia
   arriba y escondía el antetítulo bajo la cabecera—. Sólo dentro de un texto
   editable: las citas propias de cada sección conservan su diseño. */
[data-cms-text] blockquote { margin:0; padding:0; border:0; font:inherit; color:inherit; quotes:"\201C" "\201D"; }
[data-cms-text] blockquote::before { content:open-quote; }
[data-cms-text] blockquote::after { content:close-quote; }