/* =========================================================================
   UI-READY-SERVICE-INTROS-01 — Ready Solutions detail-page intro normalization
   -------------------------------------------------------------------------
   Task-isolated stylesheet. Loaded ONLY by the 15 authorized Ready Solutions
   detail pages (Ready-made Websites / Digital Catalog / AI Product Photos /
   WhatsApp-Instagram Automation / Business Dashboard, in ES / EN / ZH-TW).

   Purpose: replace the large standalone dark hero on four of the families
   with the clean, integrated two-column intro already used by Ready-made
   Websites (`.page-hero` / `.page-hero-inner`), so all five families feel
   like members of the same product family.

   Strategy: the hero markup keeps its existing per-page copy, IDs, and CTA.
   The old dark shell `<div class="sol-dark catalogo-dark">` is replaced by a
   task-namespaced `<div class="rs-intro">` wrapper, and the hero copy is
   regrouped into `.rs-intro__head` (eyebrow + H1) and `.rs-intro__body`
   (description + CTA). Everything below is scoped under `.rs-intro` so it
   cannot leak into shared components. No global element selectors, no
   `!important`. Loaded after pages.css, so ties resolve in our favor.
   ========================================================================= */

/* Neutralize the removed dark shell: the wrapper is now a transparent
   pass-through that lets the light circuit page-surface show through. */
.rs-intro {
  background: transparent;
}

/* Opening block: mirror the Ready-made Websites `.page-hero` rhythm instead
   of the tall, centered marketing hero. */
.rs-intro .catalogo-hero {
  display: block;
  padding: clamp(62px, 7vw, 96px) 0 clamp(38px, 5vw, 70px);
  text-align: left;
}

/* Two-column intro composition: eyebrow + H1 on the left, description + CTA
   on the right, bottom-aligned — matching `.page-hero-inner`. */
.rs-intro .catalogo-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.55fr);
  gap: 40px;
  align-items: end;
  max-width: none;
  width: auto;
  text-align: left;
}

.rs-intro__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.rs-intro__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Strong navy title on the light page (was near-white for the dark hero). */
.rs-intro .catalogo-hero__title {
  margin: 0;
  color: var(--navy);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Supporting description: readable navy-muted body text, left-aligned. */
.rs-intro .catalogo-hero__lede {
  max-width: 46ch;
  margin: 0;
  color: var(--muted-strong);
  font-size: 19px;
  line-height: 1.6;
}

/* Keep the existing CTA, but anchor it to the intro instead of centering it
   like a giant hero call-to-action. */
.rs-intro .catalogo-hero__actions {
  margin: 0;
  justify-content: flex-start;
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .rs-intro .catalogo-hero {
    padding: clamp(48px, 8vw, 72px) 0 clamp(34px, 6vw, 56px);
  }

  .rs-intro .catalogo-hero__copy {
    gap: 28px;
  }
}

/* ---- Mobile: stack naturally (eyebrow, H1, description, CTA) ---- */
@media (max-width: 760px) {
  .rs-intro .catalogo-hero {
    padding: 84px 0 32px;
  }

  .rs-intro .catalogo-hero__copy {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .rs-intro__head {
    gap: 12px;
  }

  .rs-intro .catalogo-hero__title {
    font-size: clamp(32px, 8.8vw, 42px);
    line-height: 1.08;
  }

  .rs-intro .catalogo-hero__lede {
    max-width: none;
    font-size: 17px;
  }
}