/* ==========================================================================
   Studio ArtTec — reusable classes for the Oxygen build (hybrid model)
   --------------------------------------------------------------------------
   The repeated visual treatments from the landing prototype, expressed as
   plain classes that reference the design tokens in tokens.css. Shipped via the
   studioarttec-tokens mu-plugin, so the styling is version-controlled and works
   on render by class NAME alone — you do NOT restyle these in Oxygen.

   In the builder you only ATTACH the class name to the element (Oxygen class
   field). Styling lives here. Keep Oxygen's own style controls off these
   elements for the properties below, so the cascade stays predictable.

   Prefix: .sa-  (Studio ArtTec). One-offs (hero visual, CTA gradient) stay
   inline per the hybrid decision — only genuinely repeated blocks live here.
   ========================================================================== */

/* ---- Layout: centered column + vertical band ---------------------------- */
.sa-container {
  max-width: var(--sa-container-max, 1200px);
  margin-inline: auto;
  padding-inline: 24px;
}

.sa-section {
  padding-block: clamp(64px, 8vw, 110px);
}

/* Recessed band (process, pricing, FAQ sections) */
.sa-section--alt {
  background: var(--ink-800);
  border-top: 1px solid var(--border-subtle);
}

/* ---- Responsive grids --------------------------------------------------- */
.sa-grid-2,
.sa-grid-3 {
  display: grid;
  gap: 20px;
}
.sa-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sa-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) {
  .sa-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sa-grid-2,
  .sa-grid-3 { grid-template-columns: 1fr; }
}

/* ---- Eyebrow / section index: "02 — Servicios" -------------------------- */
.sa-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--arttec-green);
}

/* ---- Display heading ---------------------------------------------------- */
.sa-heading-display {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

/* ---- Surface card ------------------------------------------------------- */
.sa-card {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 30px;
}

/* Add alongside .sa-card for the hover-lift cards (services) */
.sa-card--interactive {
  transition: transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.sa-card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--arttec-green);
}

/* ---- Pricing plan card -------------------------------------------------- */
.sa-plan-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dur-base) var(--ease-standard);
}
.sa-plan-card:hover {
  transform: translateY(-4px);
}

/* ---- Stat block (hero metrics) ------------------------------------------ */
.sa-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sa-stat__num {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.sa-stat__num--accent { color: var(--arttec-green); }
.sa-stat__label {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Tag / pill --------------------------------------------------------- */
.sa-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-dim);
  color: var(--arttec-green);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
}

/* ==========================================================================
   Motion hooks (paired with sat-motion.js) — no styling, just the
   pre-animation state so content isn't visible before JS runs. Guarded by
   .sat-js on <html>/<body> (set by sat-motion.js) so content stays visible if
   JS is disabled or fails. See sat-motion.js for the markup contract.
   ========================================================================== */
.sat-js [data-sat-reveal] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sat-js [data-sat-reveal] { opacity: 1; }
}

/* ==========================================================================
   Inline-animation keyframes — used directly via `style="animation:satUp ..."`
   on elements built through Respira RichText (which strips data-* attributes,
   so the sat-motion.js hooks can't attach there). These need no JS and survive
   the RichText sanitizer because only the `style` attribute is required.
   Above-the-fold sections (hero, nav) animate on load; float loops forever.
   ========================================================================== */
@keyframes satUp   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes satFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes satFloat{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Utility classes carry the animation (the RichText sanitizer allows `class`
   but strips the inline `animation` property, so it must live here). Apply via
   class="sat-up sat-d2" etc. Above-the-fold (hero/nav) plays on load. */
.sat-up   { animation: satUp .7s var(--ease-standard) both; }
.sat-fade { animation: satFade 1s var(--ease-standard) both; }
.sat-float      { animation: satFloat 5s ease-in-out infinite; }
.sat-float-slow { animation: satFloat 6s ease-in-out infinite; animation-delay: 1s; }
.sat-d1 { animation-delay: .06s; }
.sat-d2 { animation-delay: .14s; }
.sat-d3 { animation-delay: .22s; }
.sat-d4 { animation-delay: .30s; }
.sat-d5 { animation-delay: .36s; }
.sat-d6 { animation-delay: .42s; }
.sat-dc { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .sat-up, .sat-fade, .sat-float, .sat-float-slow {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ==========================================================================
   Hover-state corrections — override Oxygen's global link hover
   --------------------------------------------------------------------------
   Oxygen's global-settings.css sets `a:hover { color: var(--bde-links-color-hover) }`
   to the brand green (#01DC36) for EVERY link on the site. That `a:hover`
   selector (specificity 0,1,1) outranks a button's own plain class color
   (0,1,0), so on hover a green-filled CTA's dark label flips to green and
   disappears against its own background. These rules (0,2,0) re-assert each
   button's intended label color on hover, beating the global rule. This
   stylesheet is enqueued AFTER selectors.css / global-settings.css, so it wins.
   The .sat-* classes themselves live in Oxygen's selector store (not editable
   from source without brick-risk); these corrections live here instead.
   ========================================================================== */

/* Solid-green buttons: keep the dark on-accent label on hover. */
.sat-cta-btn:hover,
.sat-hbtn--primary:hover,
.sat-plan-btn--primary:hover {
  color: var(--text-on-accent);
}

/* Nav CTA sits on the signature gradient — keep its light label on hover. */
.sat-nav-cta:hover {
  color: var(--white);
}

/* Nav links must brighten to white on hover, not vanish. The selector-store
   rule set `opacity: 0.01` (a typo for 1), making the link invisible on hover. */
.sat-nav-link:hover {
  color: var(--text-primary);
  opacity: 1;
}

/* ==========================================================================
   Hero (v3) — twin-Swiper portfolio behind a browser window (NATIVE + editable)
   --------------------------------------------------------------------------
   The hero is native Oxygen elements, not code. Left column = [data-sat-hero-copy]
   (native Text/TextLink, hooked by [data-sat="..."]). Right column =
   [data-sat-hero-stage] > [data-sat-hero-track] holding the EDITABLE project
   Image elements (each with data-domain/-client/-plan). Both sit in the existing
   `.sat-hero` grid (#top), which keeps its own padding / column ratio / stack.

   sat-motion.js initHeroStage reads the track's images and builds the rest on the
   front end: a SHARP Swiper (the real images), a BLURRED clone layer behind
   (Controller-synced), a screen-plate, the browser chrome, a caption that follows
   the active slide's data-*, and a pause toggle. So the JS-built chrome below
   (.layer, .swiper, .browser, .chip, .playpause…) is styled by class; the native
   parts by attribute. Everything is scoped under [data-sat-hero-stage] /
   [data-sat-hero-copy] so the generic `.swiper` rules never reach the "Trabajo
   reciente" slider. The window rect lives in the vars below; every mask derives
   from them, so the composition moves together when they change.
   ========================================================================== */

/* The blurred layer bleeds past the stage box; clip the hero on the x-axis so
   that overhang can never push the page into sideways scroll. overflow-x: clip
   leaves the y-axis visible, so drop-shadows below the bar survive. */
.sat-hero {
  overflow-x: clip;
}

/* Give the stage column more room so the browser reads larger + landscape without
   squeezing the left copy (the wider max-width absorbs the extra). Scoped by :has
   to the v3 hero ONLY, so the live original hero (#top on 336) is never touched;
   browsers without :has keep the base 1.05/0.95 grid (harmless). The tablet rule
   restores the single-column stack the base .sat-hero sets at that breakpoint. */
.sat-hero:has([data-sat-hero-stage]) {
  max-width: 1320px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
@media (max-width: 1023px) {
  .sat-hero:has([data-sat-hero-stage]) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Left column (native Text/TextLink; hooked via data-attributes because
   Oxygen-via-MCP can't attach new selector-store classes or set tags) -------- */
[data-sat-hero-copy] { max-width: 36rem; }

[data-sat-hero-copy] [data-sat="eyebrow"] {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 11.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--sage-light);
}
[data-sat-hero-copy] [data-sat="eyebrow"]::before {   /* the status dot */
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--arttec-green);
  box-shadow: 0 0 10px rgba(1, 220, 54, 0.7);
  margin-right: 10px;
  flex: 0 0 auto;
}

[data-sat-hero-copy] [data-sat="h1"] {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(2.7rem, 4.9vw, 4.4rem);
  line-height: 1.06;                      /* accent on "días" clears the line above */
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 28px 0 24px;
}
[data-sat-hero-copy] [data-sat="h1"] em {
  font-style: normal;
  color: #2BE354;                         /* display green — avoids OLED bloom */
}

[data-sat-hero-copy] [data-sat="lede"] {
  color: var(--sage);
  font-size: 1.05rem;
  line-height: 1.72;
  max-width: 34ch;
  margin: 0 0 14px;
}
[data-sat-hero-copy] [data-sat="lede"] strong { color: var(--text-primary); font-weight: 400; }

[data-sat-hero-copy] [data-sat="tagline"] {
  font-family: var(--font-highlight);
  font-style: italic;
  color: #E7EAE5;
  font-size: 1.3rem;
  line-height: 1.4;
  margin: 0 0 32px;
}

[data-sat-hero-copy] [data-sat="actions"] {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
[data-sat-hero-copy] [data-sat="btn"] {
  display: inline-block;
  background: var(--arttec-green);
  color: var(--text-on-accent);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
[data-sat-hero-copy] [data-sat="btn"]:hover {
  color: var(--text-on-accent);           /* beat the global a:hover green flip */
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(1, 220, 54, 0.65);
}
[data-sat-hero-copy] [data-sat="link"] {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
[data-sat-hero-copy] [data-sat="link"]:hover { text-decoration-color: var(--arttec-green); }

[data-sat-hero-copy] [data-sat="fineprint"] {
  margin: 18px 0 0;
  color: #7C857B;                         /* AA on the dark page (~5.2:1) */
  font-size: 0.88rem;
}

[data-sat-hero-copy] [data-sat="stats"] { display: flex; margin-top: 36px; }
[data-sat-hero-copy] [data-sat="stat"] { padding-right: 30px; }
[data-sat-hero-copy] [data-sat="stat"] + [data-sat="stat"] {
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
[data-sat-hero-copy] [data-sat="stat"] b {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
[data-sat-hero-copy] [data-sat="stat"] span {
  display: block;
  margin-top: 6px;
  color: #7C857B;
  font-size: 0.83rem;
}

/* ---- Right column: the stage -------------------------------------------- */
[data-sat-hero-stage] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;                 /* landscape browser (was 16/11) */

  /* window rect inside the stage — drives the mockup AND both masks. Lower top/
     bottom insets (was 11%) let the browser fill more of the taller stage. */
  --wl: 6%;  --wr: 6%;  --wt: 8%;  --wb: 8%;
  --feather: 10px;      /* tight edge: the sharp/blur seam IS the window border */
  --bar: 46px;
  --sat-radius: 16px;
  --screen: var(--ink-900);              /* page surface inside the mockup */
  --bleed-x: 14%;
  --bleed-y: 10%;
  /* 2.44% of the slider's own height ≈ 2% of the stage height: the offset
     between the slider's centred top edge and the window top edge. Both layers
     share pixel height, so they shift identically. */
  --slider-drop: calc(2.44% + var(--bar) + 10px);
}

[data-sat-hero-stage] .layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

/* z-order: blur 0 · plate 1 · sharp slider 2 · chrome bar 3 · chip 4 · toggle 5 */
[data-sat-hero-stage] .layer--blur {
  z-index: 0;
  inset: calc(var(--bleed-y) * -1) calc(var(--bleed-x) * -1);
  filter: blur(7px) brightness(0.68) saturate(0.9);
  will-change: transform;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* the page surface — kills the blurred sliver under the bar and blur bleeding
   through the gaps between slides */
[data-sat-hero-stage] .screen-plate {
  position: absolute;
  z-index: 1;
  left: var(--wl);
  right: var(--wr);
  top: calc(var(--wt) + var(--bar));
  bottom: var(--wb);
  background: var(--screen);
  border-radius: 0 0 10px 10px;
}

[data-sat-hero-stage] .layer--sharp {
  z-index: 2;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, transparent calc(var(--wl) - var(--feather)), #000 var(--wl),
                    #000 calc(100% - var(--wr)), transparent calc(100% - var(--wr) + var(--feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, transparent calc(var(--wt) - var(--feather)), #000 var(--wt),
                    #000 calc(100% - var(--wb)), transparent calc(100% - var(--wb) + var(--feather)), transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0, transparent calc(var(--wl) - var(--feather)), #000 var(--wl),
                    #000 calc(100% - var(--wr)), transparent calc(100% - var(--wr) + var(--feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, transparent calc(var(--wt) - var(--feather)), #000 var(--wt),
                    #000 calc(100% - var(--wb)), transparent calc(100% - var(--wb) + var(--feather)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* 280% → the centred slide is slightly WIDER than the window, so no seam or
   neighbouring slide can appear inside the viewport */
[data-sat-hero-stage] .swiper {
  width: 280%;
  margin-left: -90%;
  height: 82%;
  overflow: visible;
  transform: translateY(var(--slider-drop));
}
/* blurred box is 1.28× wider / 1.20× taller than the stage — rescaled so every
   slide stays pixel-aligned with the sharp layer */
[data-sat-hero-stage] .layer--blur .swiper {
  width: 218.75%;
  margin-left: -59.375%;
  height: 68.33%;
}

[data-sat-hero-stage] .swiper-wrapper { align-items: center; }
[data-sat-hero-stage] .swiper-slide {
  height: 100%;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  opacity: 0.55;
  transform: scale(0.9);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-sat-hero-stage] .swiper-slide-active { opacity: 1; transform: scale(1); }

/* Each slide holds a native Oxygen Image element; the image covers the slide. */
[data-sat-hero-stage] .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Builder / no-JS view: the editable project images stack neatly inside the
   track (sat-motion.js empties this and builds the slider on the front end). */
[data-sat-hero-track] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-sat-hero-track] img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

/* Chrome bar (top border only) */
[data-sat-hero-stage] .browser {
  position: absolute;
  z-index: 3;
  left: var(--wl);
  right: var(--wr);
  top: var(--wt);
  bottom: var(--wb);
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
[data-sat-hero-stage] .browser__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--bar);
  background: linear-gradient(180deg, #1B1E1A, #141613);
  border-radius: var(--sat-radius) var(--sat-radius) 0 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
[data-sat-hero-stage] .browser__chrome {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
}
[data-sat-hero-stage] .lights { display: flex; gap: 7px; opacity: 0.5; }
[data-sat-hero-stage] .lights i { width: 11px; height: 11px; border-radius: 50%; }
[data-sat-hero-stage] .lights i:nth-child(1) { background: #FF5F57; }
[data-sat-hero-stage] .lights i:nth-child(2) { background: #FEBC2E; }
[data-sat-hero-stage] .lights i:nth-child(3) { background: #28C840; }
[data-sat-hero-stage] .url {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #9AA398;
  transition: opacity 0.25s ease;
}

/* caption for the active slide — anchored to the mockup, fixed px offsets */
[data-sat-hero-stage] .chip {
  position: absolute;
  z-index: 4;
  left: -26px;
  bottom: 22px;
  padding: 13px 20px;
  border-radius: 12px;
  background: #1C1F1B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  transition: opacity 0.25s ease;
}
[data-sat-hero-stage] .chip b {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.02rem;
  color: var(--text-primary);
}
[data-sat-hero-stage] .chip span { display: block; margin-top: 3px; color: #7C857B; font-size: 0.78rem; }
[data-sat-hero-stage] .is-swapping { opacity: 0; }

[data-sat-hero-stage] .playpause {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: calc(var(--wb) - 40px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #7C857B;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease, border-color 0.2s ease;
}
[data-sat-hero-stage] .playpause:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}
[data-sat-hero-stage] .playpause:focus-visible {
  outline: 2px solid var(--arttec-green);
  outline-offset: 4px;
}

/* ---- Responsive: sync to the .sat-hero grid stack (Oxygen tablet ≤1023) --- */
@media (max-width: 1023px) {
  [data-sat-hero-stage] {
    aspect-ratio: 4 / 3;
    --wl: 4%;  --wr: 4%;  --wt: 9%;  --wb: 9%;
    --bar: 38px;
    --feather: 8px;
    --slider-drop: calc(var(--bar) + 8px);
  }
  [data-sat-hero-stage] .layer--blur { filter: blur(5px) brightness(0.68) saturate(0.9); }
  [data-sat-hero-stage] .chip { left: 0; bottom: 14px; padding: 11px 16px; }
  [data-sat-hero-copy] [data-sat="stats"] { flex-wrap: wrap; row-gap: 18px; }
  [data-sat-hero-copy] [data-sat="stat"] { padding-right: 20px; }
  [data-sat-hero-copy] [data-sat="stat"] + [data-sat="stat"] { padding-left: 20px; }
}

/* Motion-safety: no slide scale/opacity churn; entrance handled by .sat-up rule. */
@media (prefers-reduced-motion: reduce) {
  [data-sat-hero-stage] .swiper-slide,
  [data-sat-hero-stage] .chip,
  [data-sat-hero-stage] .url,
  [data-sat-hero-copy] [data-sat="btn"] { transition: none; }
}