/* ROSENET-UI-READY-GOALS-SERVICES-LAYOUT-01
   Presents the "What do you want to improve" goals with the same editorial row
   language as the Services page. The Services visuals come from the reused
   services-ui-polish.css row classes (.rn-services-row*, .rn-services-number,
   .rn-services-explore, .rn-services-arrow). This file only adds the narrow Ready
   modifier: button-as-trigger reset, title-as-span (keeps the page heading
   outline unchanged), and image framing. The recommendation modal is untouched —
   each row is a <button data-sol-need> that sol-recommender.js already listens to. */

.rs-goal-rows {
  /* R1: shared header-aware sticky top (see stack block below). Clears the fixed,
     compacted navbar (~72px) with a small breathing gap, matching the Services
     scrolled-header offset (headerBottom + ~14px). */
  --rs-goal-stack-top: 90px;
  width: min(1160px, 100%);
  margin: 0 auto;
}

/* The row surface is a real <button> (Ready modal architecture) instead of the
   Services <div>. Strip button chrome; the card look stays from
   .rn-services-row-surface. */
.rs-goal-row-surface {
  width: 100%;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Title keeps the Services h2 look but stays a <span> so the document heading
   outline (single section H2) is not changed. Mirrors `.rn-services-row h2`. */
.rs-goal-row-title {
  display: block;
  margin: 0 0 28px;
  color: #0b1730;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 650;
  text-wrap: balance;
}

/* Description mirrors `.rn-services-row-copy p` (spans are used because <p> is not
   valid phrasing content inside a <button>). */
.rs-goal-row-desc {
  display: block;
  margin: 0 0 20px;
  color: #43546d;
  font-size: 17px;
  line-height: 1.65;
}

/* Goal images are landscape scene/preview art, so they fill the fixed Services
   image frame with cover + a soft radius instead of the phone-mockup contain. */
.rs-goal-row-image {
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* Row-level hover echoes the Services arrow-fill cue for the whole trigger. */
.rs-goal-row-surface:hover {
  border-color: #b9c9e4;
}
.rs-goal-row-surface:hover .rn-services-arrow {
  background: #174bc4;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .rs-goal-row-surface {
    transition: border-color 150ms ease;
  }
}

/* Tablet (~768px) rides the Services `max-width: 900px` strategy already applied
   through the shared row classes; only the span title needs the size step. */
@media (max-width: 900px) {
  .rs-goal-row-title {
    margin-bottom: 22px;
  }
}

/* Mobile: the shared `max-width: 600px` Services rules turn .rn-services-row-content
   into display:contents and re-grid the surface (number | title | arrow, then the
   body full width). The span title needs the same placement + size the Services h2
   gets for free. */
@media (max-width: 600px) {
  .rs-goal-row-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 18px;
    font-size: 27px;
  }
}

/* =========================================================================
   R1 — Services sticky/stack scroll effect (exact scoped reuse)
   Reproduces the /servicios/ interaction with the same mechanic: every row is
   position:sticky at one shared, header-aware top, and rows already carry an
   ascending z-index (--rn-services-layer 1..5 on .rn-services-row). So while
   scrolling, 01 pins, then 02 rises and covers 01, 03 covers 02, and so on;
   scrolling up reverses it naturally. The rows' direct parent (.rs-goal-rows)
   is the sticky containing block, so row 05 releases exactly as the group ends
   and Combos flows on — no spacer divs, no giant min-height.

   The Services JS only computes a near-constant top (headerBottom + 14) plus an
   imperceptible scale(-3%)/lift(-10px) polish, so this stays pure CSS: no new
   scroll listener, matching the "CSS mechanics" reuse rule.
   ========================================================================= */

/* The baseline `body`/`html` set overflow-x:hidden, which makes <body> a scroll
   container and breaks position:sticky. Services solves this with overflow:clip
   on its page body (services-ui-polish.css); mirror it exactly here. `clip`
   still prevents horizontal scrolling but does not create a scroll container. */
.rs-ready-solutions-page {
  overflow-x: clip;
  overflow-y: visible;
}

.rs-goal-rows .rs-goal-row {
  position: sticky;
  top: var(--rs-goal-stack-top);
  /* z-index ascends 1..5 through --rn-services-layer on .rn-services-row, so each
     later pinned row paints above the earlier ones. Opaque .rn-services-row-surface
     backgrounds do the covering. */
}

@media (max-width: 600px) {
  .rs-goal-rows { --rs-goal-stack-top: 78px; }
}

/* Parity with Services: the stack is a motion effect, so honor reduced motion by
   returning rows to normal document flow (mirrors services-ui-polish.css's
   reduced-motion release of the sticky rows). */
@media (prefers-reduced-motion: reduce) {
  .rs-goal-rows .rs-goal-row {
    position: relative;
    top: auto;
  }
}

/* =========================================================================
   ROSENET-UI-READY-SOLUTIONS-DARK-01 — Dark / Raycast-inspired atmosphere
   Color + surface treatment ONLY. Scoped to /soluciones-listas/ via the
   .rs-ready-solutions-page wrapper. No layout, no JS, no content changes.
   This file loads LAST, so these rules win over the light polish where
   specificity ties. The moving edge light (.rs-ready-horizon) is untouched.
   ========================================================================= */

.rs-ready-solutions-page {
  --rs-dark-bg: #080a0f;
  --rs-dark-bg-2: #05070c;
  --rs-dark-surface: #0f1219;
  --rs-dark-surface-2: #0c0f16;
  --rs-dark-border: rgba(255, 255, 255, 0.14);
  --rs-dark-border-strong: rgba(150, 190, 255, 0.5);
  --rs-dark-text: #eef4ff;
  --rs-dark-muted: #aebfe0;
  --rs-dark-blue: #8fb4ff;
  --rs-dark-glow: rgba(120, 160, 255, 0.25);

  /* Page base: deep near-black + subtle dark circuit (reuse cir2.png, the
     existing dark-shell circuit motif). A heavy dark overlay keeps it visible
     only when looking for it. Scoped to this page's body only. */
  background-color: var(--rs-dark-bg);
  background-image:
    linear-gradient(180deg, rgba(8, 10, 15, 0.9), rgba(6, 8, 13, 0.955)),
    url("../assets/images/backgrounds/cir2.png");
  background-repeat: no-repeat, repeat;
  background-position: center top, center top;
  background-size: cover, 1100px auto;
  background-attachment: scroll, scroll;
  color: var(--rs-dark-text);
}

/* Neutralize the light shell wash so the dark page shows through hero + goals. */
.rs-ready-solutions-page .rs-ready-shell {
  color: var(--rs-dark-muted);
}
.rs-ready-solutions-page .rs-ready-shell::before {
  background: transparent;
}

/* --- HERO: ready-background dot-map, full-bleed, with dark overlay + vignette
   so the title/CTA stay dominant. Image lives ONLY in the hero. --- */
.rs-ready-solutions-page .rs-ready-intro::before {
  top: -120px;
  right: auto;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50vw);
  background-color: var(--rs-dark-bg-2);
  background-image:
    linear-gradient(180deg, rgba(5, 7, 12, 0.55) 0%, rgba(5, 7, 12, 0.3) 45%, rgba(5, 7, 12, 0.8) 100%),
    radial-gradient(ellipse 62% 68% at 50% 42%, rgba(37, 99, 235, 0.16), transparent 72%),
    url("../assets/images/backgrounds/ready-background_pc.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: cover, cover, cover;
}

/* Responsive hero art: the phone-composed asset takes over on mobile/tablet-
   portrait. Same ::before mechanism and box (top:-120px / bottom:0), so the
   image still terminates at the hero boundary and never leaks into the goals,
   combos, or other dark sections. Only the image layer swaps — repeat/position/
   size (no-repeat, center, cover ×3) cascade from the base rule above, so the
   overlay gradients and vignette are preserved. Reuses this file's existing
   900px breakpoint; no new media-query system. */
@media (max-width: 900px) {
  .rs-ready-solutions-page .rs-ready-intro::before {
    background-image:
      linear-gradient(180deg, rgba(5, 7, 12, 0.55) 0%, rgba(5, 7, 12, 0.3) 45%, rgba(5, 7, 12, 0.8) 100%),
      radial-gradient(ellipse 62% 68% at 50% 42%, rgba(37, 99, 235, 0.16), transparent 72%),
      url("../assets/images/backgrounds/ready-phone.png");
  }
}

.rs-ready-solutions-page .rs-ready-intro .eyebrow { color: var(--rs-dark-blue); }
.rs-ready-solutions-page .rs-ready-intro .sol-hero__title { color: var(--rs-dark-text); }
.rs-ready-solutions-page .rs-ready-intro .sol-hero__lede { color: var(--rs-dark-muted); }

/* --- GOALS heading (re-light after the polish forced it navy) --- */
.rs-ready-solutions-page .rs-ready-shell .rs-ready-goals .eyebrow { color: var(--rs-dark-blue); }
.rs-ready-solutions-page .rs-ready-shell .rs-ready-goals .section-title { color: var(--rs-dark-text); }
.rs-ready-solutions-page .rs-ready-shell .rs-ready-goals .sol-selector-head__aside { color: var(--rs-dark-muted); }

/* --- GOAL ROWS 01–05: dark premium surfaces with a soft luminous edge.
   Sticky/stack geometry is untouched (position/top/z-index unchanged). --- */
.rs-ready-solutions-page .rs-goal-row-surface {
  background: linear-gradient(180deg, var(--rs-dark-surface) 0%, var(--rs-dark-surface-2) 100%);
  border: 1px solid var(--rs-dark-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 22px 55px -24px rgba(0, 0, 0, 0.85),
    0 -12px 42px -26px var(--rs-dark-glow);
}
.rs-ready-solutions-page .rs-goal-row-surface:hover {
  border-color: var(--rs-dark-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 26px 60px -22px rgba(0, 0, 0, 0.9),
    0 -14px 48px -24px rgba(120, 160, 255, 0.4);
}

.rs-ready-solutions-page .rs-goal-row-title { color: var(--rs-dark-text); }
.rs-ready-solutions-page .rs-goal-row-desc { color: var(--rs-dark-muted); }
.rs-ready-solutions-page .rn-services-number { color: rgba(214, 226, 248, 0.72); }
.rs-ready-solutions-page .rn-services-explore {
  color: var(--rs-dark-blue);
  border-bottom-color: rgba(143, 180, 255, 0.45);
}
.rs-ready-solutions-page .rn-services-arrow {
  border-color: rgba(255, 255, 255, 0.22);
  color: #cfe0ff;
}

/* Goal images: framed so they don't feel pasted on black. */
.rs-ready-solutions-page .rs-goal-row-image {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0b0e14;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
}

/* --- COMBOS: same dark system; structure/composition preserved. --- */
.rs-ready-solutions-page .sol-combos-stage { background: transparent; }
.rs-ready-solutions-page .rs-ready-combos .eyebrow { color: var(--rs-dark-blue); }
.rs-ready-solutions-page .rs-ready-combos .section-title { color: var(--rs-dark-text); }
.rs-ready-solutions-page .rs-ready-combos .sol-combos__header p { color: var(--rs-dark-muted); }

.rs-ready-solutions-page .rs-combo-card {
  background: linear-gradient(180deg, var(--rs-dark-surface) 0%, var(--rs-dark-surface-2) 100%);
  border: 1px solid var(--rs-dark-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px -24px rgba(0, 0, 0, 0.8),
    0 -10px 38px -26px var(--rs-dark-glow);
  color: var(--rs-dark-muted);
}
.rs-ready-solutions-page .rs-combo-card.sol-combo--featured {
  border-color: rgba(120, 160, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 56px -22px rgba(0, 0, 0, 0.85),
    0 -12px 46px -22px rgba(120, 160, 255, 0.4);
}
.rs-ready-solutions-page .rs-combo-card .sol-combo__title { color: var(--rs-dark-text); }
.rs-ready-solutions-page .rs-combo-card .sol-combo__result { color: var(--rs-dark-muted); }
.rs-ready-solutions-page .rs-combo-card .sol-combo__includes-title {
  color: #cfddf5;
  border-top-color: rgba(255, 255, 255, 0.12);
}
.rs-ready-solutions-page .rs-combo-card .sol-combo__includes li { color: #b4c2d8; }
.rs-ready-solutions-page .rs-combo-card .sol-combo__badge {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.35);
  color: #a9c6ff;
}
.rs-ready-solutions-page .rs-combo-card.sol-combo--featured .sol-combo__badge {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #fff;
}
.rs-ready-solutions-page .rs-combo-letter { color: rgba(120, 160, 255, 0.32); }
.rs-ready-solutions-page .rs-combo-card .button-secondary {
  border-color: rgba(160, 190, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf1ff;
}
.rs-ready-solutions-page .rs-combo-card .button-secondary:hover {
  border-color: rgba(160, 190, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .rs-ready-solutions-page .rs-combo-card:hover {
    border-color: rgba(150, 190, 255, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 26px 56px -20px rgba(0, 0, 0, 0.85),
      0 -12px 44px -22px rgba(120, 160, 255, 0.38);
  }
  .rs-ready-solutions-page .rs-combo-card.sol-combo--featured:hover {
    border-color: rgba(150, 190, 255, 0.62);
  }
}

/* --- BENEFIT STRIP: dark-adapted text + icon chips. --- */
.rs-ready-solutions-page .sol-benefit strong { color: #e6eefc; }
.rs-ready-solutions-page .sol-benefit p span { color: #a2b1c9; }
.rs-ready-solutions-page .sol-benefit__icon {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(150, 180, 255, 0.2);
  color: #8fb4ff;
}
.rs-ready-solutions-page .sol-benefit + .sol-benefit::before {
  background: rgba(150, 175, 220, 0.2);
}

/* --- DARK → FOOTER transition: keep the global footer, fade cleanly into it
   so there is no abrupt bright strip at the end of the dark page. --- */
.rs-ready-solutions-page .site-footer { position: relative; }
.rs-ready-solutions-page .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  height: 140px;
  background: linear-gradient(180deg, rgba(8, 10, 15, 0) 0%, rgba(255, 255, 255, 0.86) 100%);
  pointer-events: none;
}

/* Mobile (<=640px): the light polish forces the goals block white; keep it dark. */
@media (max-width: 640px) {
  .rs-ready-solutions-page .sol-dark .rs-ready-goals {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    color: var(--rs-dark-muted);
  }
  .rs-ready-solutions-page .sol-dark .rs-ready-goals .eyebrow { color: var(--rs-dark-blue); }
  .rs-ready-solutions-page .sol-dark .rs-ready-goals .section-title { color: var(--rs-dark-text); }
  .rs-ready-solutions-page .sol-dark .rs-ready-goals .sol-selector-head__aside { color: var(--rs-dark-muted); }
}

/* =========================================================================
   ROSENET-UI-READY-SOLUTIONS-DARK-02 — refinements
   ========================================================================= */

/* Cards 03 and 04 fill the same media frame as 02 without dark letterboxing.
   Keep 03 aligned to the top so both before/after labels remain visible. */
.rs-ready-solutions-page [data-rn-services-row="photos"] .rs-goal-row-image,
.rs-ready-solutions-page [data-rn-services-row="automation"] .rs-goal-row-image {
  object-fit: cover;
  padding: 0;
  background: transparent;
}
.rs-ready-solutions-page [data-rn-services-row="photos"] .rs-goal-row-image {
  object-position: center top;
}

/* --- NAVBAR: keep it integrated with the dark page in BOTH the top and the
   scrolled states, independent of the JS sol-nav-dark toggle (which only holds
   over the hero). Everything scoped to this page; other routes unaffected.
   The shared blur/saturate glass (layout.css .nav-shell) is preserved. --- */
.rs-ready-solutions-page .nav-shell {
  border-color: rgba(120, 160, 255, 0.18);
  background: rgba(12, 16, 26, 0.72);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(120, 160, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.rs-ready-solutions-page .site-header.is-scrolled .nav-shell {
  background: rgba(9, 12, 20, 0.82);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(96, 150, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rs-ready-solutions-page .brand-name { color: #eef4ff; }
.rs-ready-solutions-page .brand-accent { color: #7ea8ff; }
.rs-ready-solutions-page .main-nav { color: #c7d6f5; }
.rs-ready-solutions-page .main-nav a:hover,
.rs-ready-solutions-page .main-nav a[aria-current="page"] { color: #8fb4ff; }
.rs-ready-solutions-page .main-nav a[aria-current="page"]::after,
.rs-ready-solutions-page .main-nav a:hover::after { background: #8fb4ff; }

.rs-ready-solutions-page .site-header .language-switcher {
  border-color: rgba(160, 190, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.rs-ready-solutions-page .site-header .lang-btn { color: #b9c8e6; }
.rs-ready-solutions-page .site-header .lang-btn:hover,
.rs-ready-solutions-page .site-header .lang-btn:focus-visible { color: #eaf1ff; }
.rs-ready-solutions-page .site-header .lang-btn.is-active {
  color: #fff;
  background: rgba(120, 160, 255, 0.22);
  box-shadow: none;
}
.rs-ready-solutions-page .menu-button {
  border-color: rgba(160, 190, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf1ff;
}