/* ==========================================================================
   CLASES DE ESQUI — PAGE 390 ONLY
   Enqueued exclusively by ski_school_child_clases_esqui_assets() behind
   is_page( 390 ). Every selector is additionally prefixed with
   body.page-id-390, so nothing here can reach the Home (1552 / 37) or any
   other internal page. Delete this file and the guarded enqueue in
   functions.php to fully revert to native Divi styling.

   This file REUSES the approved Home2 design system (tokens, eyebrow,
   display H2, card, steps, FAQ, final CTA, Sierra cut, contour) but is a
   page of its own: a static 3-up option grid instead of the home slider,
   an indexed personalisation band, a slim support bar and a compact
   cross-link. No JavaScript is added — the page relies only on the motion
   classes that already ship in the child theme (ski-reveal-stagger,
   ski-heading-reveal, ski-image-reveal, ski-number-reveal).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — identical values to the approved Home2 reference so the two
   pages share one grid, one palette and one vertical rhythm.
   -------------------------------------------------------------------------- */
body.page-id-390 {
  --ski-deep: #214A5E;
  --ski-blue: #26ADE2;
  --ski-ink: #0F2430;
  --ski-ice: #E8F1F5;
  --ski-snow: #FFFFFF;
  --ski-line: rgba(33, 74, 94, 0.16);
  --ski-muted: rgba(15, 36, 48, 0.72);
  /* Aligned to the project's Content Max Width variable (1240px). */
  --ski-edge: max(48px, calc((100vw - 1240px) / 2));
  --ski-space: clamp(64px, 6vw, 96px);
  --ski-space-dense: clamp(52px, 4.8vw, 76px);
  --ski-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow-x: clip;
}
@media (max-width: 980px) {
  body.page-id-390 { --ski-edge: 40px; --ski-space: 64px; --ski-space-dense: 56px; }
}
@media (max-width: 767px) {
  body.page-id-390 { --ski-edge: 24px; --ski-space: 56px; --ski-space-dense: 48px; }
}

/* --------------------------------------------------------------------------
   2. HERO — image-led internal-page header.
   Shorter and calmer than the Home hero: one column, bottom-anchored, a
   single primary action plus a quiet in-page link. The photograph and the
   gradient stay native Divi settings; only composition lives here.
   -------------------------------------------------------------------------- */
body.page-id-390 #ski-hero.ski-page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Legibility scrim on the native overlay layer (the module's own gradient
   attr does not compile in this Divi 5 build, same as on Home2). */
body.page-id-390 #ski-hero.ski-page-hero > .et_pb_fullwidth_header_overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Anchored to the copy, not spread across the picture: densest at the
     lower-left corner where the headline sits, fully clear by two thirds
     across, so the upper-right of the photograph stays a photograph instead
     of a tinted field. */
  background-image:
    radial-gradient(125% 100% at 4% 100%, rgba(15, 36, 48, 0.90) 0%, rgba(15, 36, 48, 0.60) 34%, rgba(15, 36, 48, 0.18) 60%, rgba(15, 36, 48, 0) 80%),
    linear-gradient(0deg, rgba(15, 36, 48, 0.62) 0%, rgba(15, 36, 48, 0.14) 30%, rgba(15, 36, 48, 0) 50%);
}
@media (max-width: 980px) {
  body.page-id-390 #ski-hero.ski-page-hero > .et_pb_fullwidth_header_overlay {
    background-image: linear-gradient(180deg, rgba(15, 36, 48, 0.26) 0%, rgba(15, 36, 48, 0.08) 24%, rgba(15, 36, 48, 0.6) 54%, rgba(15, 36, 48, 0.9) 100%);
  }
}
body.page-id-390 #ski-hero.ski-page-hero .et_pb_fullwidth_header_container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
}
body.page-id-390 #ski-hero.ski-page-hero .header-content-container { display: block; width: 100%; }
body.page-id-390 #ski-hero.ski-page-hero .header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
/* Eyebrow with the recurring short blue rule */
body.page-id-390 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead {
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
body.page-id-390 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead::before {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 2px;
  background: currentColor;
}
body.page-id-390 #ski-hero.ski-page-hero .et_pb_module_header {
  order: 1;
  max-width: 15ch;
  margin: 0 0 20px;
  padding: 0;
  text-wrap: balance;
}
body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_content_wrapper { order: 2; margin: 0; text-align: left; }
body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_content_wrapper p { margin: 0; padding: 0; }
body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_button_wrapper {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px 22px;
  margin: 28px 0 0;
}
body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_button_wrapper .et_pb_button { margin: 0; }
/* The two hero actions are deliberately NOT styled here. Radius, transitions,
   the pointer- and motion-guarded hover, the focus ring and the
   reduced-motion fallbacks all come from the shared button system already in
   style.css (#ski-hero .et_pb_button_one / .et_pb_button_two, .ski-btn,
   .et_pb_promo_button), and the outline anatomy of the secondary action —
   transparent fill, 1.5px Snow rule, 12px radius, 44px, 14px/32px padding —
   is the same one the approved Home hero declares, set in this module's own
   Divi attrs. Redefining any of it locally is exactly the near-duplicate the
   project rules forbid. */
/* The hero's Divi column is floated; a new block formatting context keeps
   that float from intruding into the trust strip below it. */
body.page-id-390 .et_pb_section:has(.ski-page-hero),
body.page-id-390 .et_pb_row:has(.ski-page-hero) { display: flow-root; }
@media (max-width: 980px) {
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_module_header { max-width: 17ch; margin-bottom: 16px; }
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead { margin-bottom: 14px; }
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { margin-top: 24px; }
}
@media (max-width: 767px) {
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { gap: 6px 18px; }
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_button_wrapper .et_pb_button_one { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   3. BAND RHYTHM — one vertical system for every section below the hero, so
   the page never opens an unintentional white gap. Sections opt in with
   .ski-band; .ski-band--dense is the tighter tier used by the support bar
   and the cross-link.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-band {
  position: relative;
  padding: var(--ski-space) var(--ski-edge) !important;
}
body.page-id-390 .ski-band--dense { padding: var(--ski-space-dense) var(--ski-edge) !important; }
body.page-id-390 .ski-band > .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Heading block -> content block: one gap, everywhere. */
body.page-id-390 .ski-band > .ski-section-head { margin-bottom: clamp(28px, 3vw, 44px) !important; }
body.page-id-390 .ski-section-head > .et_pb_column {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   4. SHARED TYPE — eyebrow, display H2, lead paragraph.
   Identical scale to the approved Home2 reference.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-eyebrow { margin: 0 0 14px !important; }
body.page-id-390 .ski-eyebrow .et_pb_text_inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ski-blue);
}
body.page-id-390 .ski-eyebrow .et_pb_text_inner::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 2px;
  background: currentColor;
}
body.page-id-390 .ski-eyebrow p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--ski-blue) !important;
}
body.page-id-390 .ski-display-h2,
body.page-id-390 .ski-display-h2 .et_pb_heading_container {
  margin: 0 !important;
  text-align: left !important;
  transform: none !important;
}
body.page-id-390 .ski-display-h2 .et_pb_module_header {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 17ch;
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.03em !important;
  color: var(--ski-deep) !important;
  text-align: left !important;
  text-shadow: none !important;
  text-wrap: balance;
}
body.page-id-390 .ski-display-h2--sm .et_pb_module_header {
  max-width: 14ch;
  font-size: clamp(1.875rem, 1.1rem + 1.9vw, 2.9rem) !important;
  line-height: 1.06 !important;
}
/* The approved two-tone heading device, reused verbatim from the Home: the
   second half of the phrase in Ski School Blue. Used exactly twice on this
   page — the personalisation heading and the closing CTA — and never on a
   heading next to either of them. */
body.page-id-390 .ski-lead { margin: 18px 0 0 !important; }
body.page-id-390 .ski-lead p {
  margin: 0;
  padding: 0;
  max-width: 58ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ski-muted);
}
@media (max-width: 767px) {
  body.page-id-390 .ski-lead p { font-size: 16.5px; }
}

/* --------------------------------------------------------------------------
   5. TRUST STRIP — flush surface change under the hero, not a floating card.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-inner-trust {
  position: relative;
  z-index: 1;
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 981px) {
  body.page-id-390 .ski-inner-trust .et_pb_blurb .et_pb_module_header {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: var(--ski-deep) !important;
  }
}

/* --------------------------------------------------------------------------
   6. SIERRA CUT — one registration mark, three placements. Same 18px L,
   same 1.5px weight, same colour as the approved Home; only the corner it
   hugs changes. Never animated, never interactive.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-service-card.is-active::after,
body.page-id-390 .ski-cross__media::before,
body.page-id-390 .ski-final .ski-cta-box::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-color: var(--ski-blue);
  border-width: 1.5px 1.5px 0 0;
  pointer-events: none;
}
/* 1. the ACTIVE service card — top-right, inside the blue border, exactly as
   on the approved Home. It travels with the rail rather than being pinned to
   one card. */
body.page-id-390 .ski-service-card.is-active::after {
  top: calc(var(--ski-card-pad) - 7px);
  right: calc(var(--ski-card-pad) - 7px);
}
/* 2. the snowboard photograph — top-left, mirrored */
body.page-id-390 .ski-cross__media::before {
  top: 14px;
  left: 14px;
  border-width: 1.5px 0 0 1.5px;
}
/* 3. the final CTA copy — top-right, pointing into the contour */
body.page-id-390 .ski-final .ski-cta-box { position: relative; }
body.page-id-390 .ski-final .ski-cta-box::after { top: 2px; right: -34px; }
@media (max-width: 767px) {
  body.page-id-390 .ski-cross__media::before { display: none; }
  body.page-id-390 .ski-final .ski-cta-box::after { right: -6px; }
}

/* --------------------------------------------------------------------------
   7. BRAND CONTOUR — exactly two appearances on this page, both oversized,
   both cropped by their section edge, neither of them wallpaper. multiply
   drops the artwork's white field. Inert and out of flow, so they cannot
   create horizontal overflow.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-contour { position: relative; overflow: hidden; isolation: isolate; }
body.page-id-390 .ski-contour::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
}
body.page-id-390 .ski-contour > .et_pb_row { position: relative; z-index: 1; }
/* 1. OPTIONS — asset 03 carries its ink in the left column, so it enters from
   the lower left, one gutter outside the grid. ~55% visible. */
body.page-id-390 .ski-options::after {
  left: calc(-1 * var(--ski-edge));
  bottom: -14%;
  width: min(1120px, 70vw);
  aspect-ratio: 1915 / 821;
  background-image: url("/wp-content/uploads/2026/09/ski-school-sierra-nevada-bg-logo-contornos-03.png");
  opacity: 0.5;
}
/* 2. FINAL CTA — the signature, right-anchored so the logo-derived mass sits
   in the half opposite the copy. ~60% visible. */
body.page-id-390 .ski-final::after {
  right: calc(-1 * var(--ski-edge) - 7vw);
  top: 50%;
  transform: translateY(-50%);
  width: min(1100px, 64vw);
  aspect-ratio: 1672 / 941;
  background-image: url("/wp-content/uploads/2026/09/ski-school-sierra-nevada-bg-logo-contornos.png");
  opacity: 0.78;
}
@media (max-width: 980px) {
  body.page-id-390 .ski-options::after {
    left: -34vw;
    bottom: -6%;
    width: 148vw;
    opacity: 0.38;
  }
  body.page-id-390 .ski-final::after {
    top: auto;
    bottom: -8%;
    right: -32vw;
    width: 130vw;
    transform: none;
    opacity: 0.48;
  }
}

/* --------------------------------------------------------------------------
   8. SERVICE SLIDER — the APPROVED Home2 component, reused.

   Behaviour is not re-implemented here: experiments/home2-hero.js is now
   loaded on Home2 AND on this page, and it addresses the slider purely by
   component classes (.ski-service-slider / __head / __viewport /
   .ski-service-card). One implementation, two pages — arrows, counter,
   infinite loop, autoplay, swipe, pause/resume and reduced-motion all come
   from that file unchanged.

   What lives here is only the presentation layer, mirrored value-for-value
   from the approved Home2 rules because those are prefixed body.page-id-1552
   and cannot be selected from this page. The single composition difference is
   the phone card width, which the component already exposes as a variable.

   Tunable variables (same names, same meaning as Home2):
     --ski-rail-card   active card width
     --ski-rail-gap    gap between cards
     --ski-rail-img    image height / width ratio
     --ski-card-pad    inner padding (room for the active border)
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-service-slider {
  --ski-rail-card: clamp(300px, 24vw, 360px);
  --ski-rail-gap: clamp(20px, 2vw, 32px);
  /* the rail's side padding centres the active card on the page axis; the
     same value places the arrows on its two edges */
  --ski-rail-edge: calc((100% - var(--ski-rail-card)) / 2);
  --ski-rail-img: 0.75;    /* 4:3 editorial crop on desktop */
  --ski-card-pad: 22px;
  position: relative;
  /* the rail bleeds the full section width, so the horizontal gutter moves
     from the section to the head row */
  padding: var(--ski-space) 0 var(--ski-space-dense) !important;
  overflow: hidden;
}
@media (max-width: 980px) {
  body.page-id-390 .ski-service-slider {
    --ski-rail-card: clamp(280px, 40vw, 340px);
    --ski-rail-gap: 20px;
    --ski-rail-img: 0.8;
    --ski-card-pad: 18px;
  }
}
@media (max-width: 767px) {
  body.page-id-390 .ski-service-slider {
    /* one card plus ~32px of each neighbour at 390px, so the rail announces
       itself as horizontal without a hint or a dot row */
    --ski-rail-card: calc(100vw - 88px);
    --ski-rail-gap: 12px;
    --ski-rail-img: 1.1;
    --ski-card-pad: 16px;
  }
}

/* Head: eyebrow + H2 + copy on the left, technical counter on the right,
   both sitting on the page's content gutter. */
body.page-id-390 .ski-service-slider > .ski-service-slider__head {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 32px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(26px, 2.6vw, 40px) !important;
  padding: 0 var(--ski-edge) !important;
  box-sizing: border-box;
}
body.page-id-390 .ski-service-slider__head > .et_pb_column {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 720px !important;
  margin: 0 !important;
}
/* Technical position indicator, injected by the shared script and driven by
   the slider's own active-card state. Clones never reach it. */
body.page-id-390 .ski-service-slider__count {
  flex: 0 0 auto;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--ski-deep);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.page-id-390 .ski-service-slider__count-now { color: var(--ski-blue); }
body.page-id-390 .ski-service-slider__count-sep {
  display: inline-block;
  margin: 0 2px 0 4px;
  opacity: 0.45;
}
@media (max-width: 767px) {
  body.page-id-390 .ski-service-slider__count {
    font-size: 12px;
    letter-spacing: 0.18em;
    margin-bottom: 3px !important;
  }
}

/* Rail: native horizontal overflow + scroll-snap, so it is usable with the
   script switched off. */
body.page-id-390 .ski-service-slider .ski-service-slider__viewport {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: var(--ski-rail-gap) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* side padding IS the peek: it sets the resting composition and lets the
     first and last card centre even without the loop. The extra bottom room
     keeps the active card's shadow out of the rail's own overflow. */
  padding: 22px var(--ski-rail-edge) 44px !important;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ski-deep) rgba(33, 74, 94, 0.12);
}
body.page-id-390 .ski-service-slider__viewport::-webkit-scrollbar { height: 3px; }
body.page-id-390 .ski-service-slider__viewport::-webkit-scrollbar-track { background: rgba(33, 74, 94, 0.12); }
body.page-id-390 .ski-service-slider__viewport::-webkit-scrollbar-thumb { background: var(--ski-deep); }
/* Looping rail (script on): the scrollbar no longer maps to a real position */
body.page-id-390 .ski-service-slider__viewport.is-looping { scrollbar-width: none; }
body.page-id-390 .ski-service-slider__viewport.is-looping::-webkit-scrollbar { display: none; }
body.page-id-390 .ski-service-slider__viewport.is-jumping { scroll-behavior: auto !important; }
body.page-id-390 .ski-service-slider__viewport.is-jumping .ski-service-card { transition: none !important; }
body.page-id-390 .ski-service-slider__viewport:focus-visible {
  outline: 2px solid var(--ski-blue);
  outline-offset: -2px;
}

/* --- Card: the approved Home2 anatomy, values unchanged ------------------ */
body.page-id-390 .ski-service-slider .ski-service-card {
  position: relative;
  counter-increment: ski-opt;
  flex: 0 0 var(--ski-rail-card) !important;
  width: var(--ski-rail-card) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--ski-card-pad) var(--ski-card-pad) calc(var(--ski-card-pad) + 4px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 2px solid rgba(38, 173, 226, 0.32) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: 50% 50%;
}
body.page-id-390 .ski-service-slider__viewport { counter-reset: ski-opt; }
body.page-id-390 .ski-service-slider .ski-service-card:hover,
body.page-id-390 .ski-service-slider .ski-service-card:focus-within { box-shadow: none !important; }
/* Active card: one fine Ski School Blue line on a clean snow surface. */
body.page-id-390 .ski-service-slider .ski-service-card.is-active {
  border-top-color: var(--ski-blue) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 36, 48, 0.05) !important;
}
body.page-id-390 .ski-service-slider__viewport.is-looping .ski-service-card {
  opacity: 0.84 !important;
  transform: scale(0.97);
}
body.page-id-390 .ski-service-slider__viewport.is-looping .ski-service-card.is-active {
  opacity: 1 !important;
  transform: scale(1) translateY(-5px);
}
@media (prefers-reduced-motion: no-preference) {
  body.page-id-390 .ski-service-slider .ski-service-card {
    transition:
      transform 480ms var(--ski-ease),
      opacity 480ms var(--ski-ease),
      border-color 420ms var(--ski-ease),
      box-shadow 480ms var(--ski-ease) !important;
  }
}
@media (max-width: 767px) {
  body.page-id-390 .ski-service-slider__viewport.is-looping .ski-service-card {
    opacity: 0.86 !important;
    transform: scale(0.985);
  }
  body.page-id-390 .ski-service-slider__viewport.is-looping .ski-service-card.is-active {
    transform: scale(1) translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-390 .ski-service-slider__viewport.is-looping .ski-service-card,
  body.page-id-390 .ski-service-slider__viewport.is-looping .ski-service-card.is-active { transform: none; }
  body.page-id-390 .ski-service-slider__viewport.is-looping .ski-service-card { opacity: 0.85 !important; }
}

body.page-id-390 .ski-service-card .et_pb_image {
  width: 100% !important;
  height: auto !important;
  margin: 0 0 18px !important;
  border-radius: 3px;
  overflow: hidden;
}
body.page-id-390 .ski-service-card .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / var(--ski-rail-img);
  border-radius: 8px;
  overflow: hidden;
}
body.page-id-390 .ski-service-card .et_pb_image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 40%;
  transition: transform 0.8s var(--ski-ease);
}
/* Crop tuning keyed to the file, so it survives re-ordering or cloning. */
body.page-id-390 .ski-service-card img[src*="clase-a-medida-familia"] { object-position: 50% 30%; }
body.page-id-390 .ski-service-card img[src*="IMG_0654"] { object-position: 50% 28%; }
body.page-id-390 .ski-service-card img[src*="full-day-cresta"] { object-position: 50% 45%; }

body.page-id-390 .ski-service-card .et_pb_group {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* Technical index. Home2's cards carry a small caps TEXT module for this;
   these three carry only a heading and a body, so the index is generated in
   CSS rather than inventing a fourth line of copy per card. Same tier, same
   colour, same tracking as Home2's. */
body.page-id-390 .ski-service-card .et_pb_group::before {
  content: counter(ski-opt, decimal-leading-zero);
  display: block;
  margin: 0 0 2px;
  font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--ski-blue);
  font-variant-numeric: tabular-nums;
}
body.page-id-390 .ski-service-card .et_pb_heading { margin: 0 !important; }
body.page-id-390 .ski-service-card .et_pb_heading .et_pb_module_header {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.022em !important;
  color: var(--ski-deep) !important;
  text-align: left !important;
}
body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  margin: 2px 0 0 !important;
}
body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text .et_pb_text_inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text p {
  margin: 0 0 16px;
  padding: 0;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ski-muted);
}
/* The action sits on the card's baseline, so the three CTAs line up across
   the rail however long the descriptions are. */
body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text p:has(> a) {
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--ski-line);
}
body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700 !important;
  color: var(--ski-deep) !important;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text a:hover,
body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text a:focus-visible {
  color: var(--ski-blue) !important;
  text-decoration-color: currentColor;
}
/* The active card is the one whose action reads as live — the page's subtle
   primary-service emphasis now travels with the rail instead of being pinned
   to card 01, so it can never contradict the active-card border. */
body.page-id-390 .ski-service-card.is-active .et_pb_group > .et_pb_text a { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.page-id-390 .ski-service-card.is-active:hover .et_pb_image img { transform: scale(1.03); }
}
@media (max-width: 767px) {
  body.page-id-390 .ski-service-card .et_pb_image { margin-bottom: 20px !important; }
  body.page-id-390 .ski-service-card .et_pb_group { padding: 0 2px !important; }
  body.page-id-390 .ski-service-card .et_pb_group > .et_pb_text p { font-size: 16px; max-width: none; }
}

/* --- Arrows: flank the ACTIVE card, injected by the shared script --------- */
body.page-id-390 .ski-service-slider__controls {
  --ski-arrow: 44px;
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: var(--ski-rail-mid, 280px);
  height: 0;
  margin: 0;
  pointer-events: none;
}
body.page-id-390 .ski-service-slider__btn {
  position: absolute;
  top: calc(var(--ski-arrow) / -2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ski-arrow);
  height: var(--ski-arrow);
  margin: 0;
  padding: 0;
  border: 1px solid #DCE6EB;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(15, 36, 48, 0.06);
  color: var(--ski-deep);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
body.page-id-390 .ski-service-slider__btn:first-child {
  left: calc(var(--ski-rail-edge) - var(--ski-arrow) / 2);
  right: auto;
}
body.page-id-390 .ski-service-slider__btn:last-child {
  right: calc(var(--ski-rail-edge) - var(--ski-arrow) / 2);
  left: auto;
}
body.page-id-390 .ski-service-slider__btn svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  body.page-id-390 .ski-service-slider__btn:hover {
    border-color: var(--ski-blue);
    color: var(--ski-blue);
    background: #fff;
  }
}
body.page-id-390 .ski-service-slider__btn:active {
  border-color: var(--ski-deep);
  background: var(--ski-ice);
}
body.page-id-390 .ski-service-slider__btn:focus-visible {
  outline: 2px solid var(--ski-blue);
  outline-offset: 2px;
}
body.page-id-390 .ski-service-slider__btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 767px) {
  /* hug the inside of the active card's image so both peeking neighbours
     stay fully visible on a phone */
  body.page-id-390 .ski-service-slider__btn:first-child {
    left: calc(var(--ski-rail-edge) + var(--ski-card-pad) + 7px);
    right: auto;
  }
  body.page-id-390 .ski-service-slider__btn:last-child {
    right: calc(var(--ski-rail-edge) + var(--ski-card-pad) + 7px);
    left: auto;
  }
}


/* --------------------------------------------------------------------------
   9. PERSONALISATION BAND — the one tonal change on the page.
   An indexed three-part answer to "will this fit me?", set on Ice so it
   separates the comparison above from the booking mechanics below without
   adding another photograph.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-adapt { border-top: 1px solid var(--ski-line); }
/* Three short items do not need the full section gap under their heading;
   pulling the rule up makes the heading and the three columns read as one
   block instead of two things sharing a large empty section. */
body.page-id-390 .ski-adapt > .ski-section-head { margin-bottom: clamp(20px, 2vw, 30px) !important; }
body.page-id-390 .ski-adapt__grid {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(32px, 3.2vw, 64px) !important;
  row-gap: 0 !important;
  counter-reset: ski-adapt;
  --ski-aico: var(--ski-icon-lg);
  --ski-aico-col: calc(var(--ski-icon-lg) + 4px);
  --ski-aico-gap: 14px;
}
/* Same technical grammar as the booking steps: ONE continuous hairline
   carrying the three items, with a short Ski School Blue tick where each one
   begins. Reused rather than reinvented — what differs is the content
   (line icons and an index) not the device. */
body.page-id-390 .ski-adapt__grid::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ski-line);
  pointer-events: none;
}
body.page-id-390 .ski-adapt__grid > .et_pb_column {
  position: relative;
  counter-increment: ski-adapt;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 30px 0 0 !important;
  border-top: 0 !important;
  background-image: none !important;
}
body.page-id-390 .ski-adapt__grid > .et_pb_column::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--ski-blue);
}
body.page-id-390 .ski-adapt__grid .et_pb_blurb { margin: 0 !important; }
body.page-id-390 .ski-adapt__grid .et_pb_blurb_content {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--ski-aico-gap);
  width: 100%;
  max-width: none !important;
  text-align: left !important;
}
body.page-id-390 .ski-adapt__grid .et_pb_main_blurb_image {
  display: block !important;
  flex: 0 0 var(--ski-aico-col);
  width: var(--ski-aico-col) !important;
  align-self: flex-start;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}
body.page-id-390 .ski-adapt__grid .et_pb_main_blurb_image img {
  display: block;
  width: var(--ski-aico) !important;
  height: var(--ski-aico) !important;
  object-fit: contain;
  border-radius: 0 !important;
}
body.page-id-390 .ski-adapt__grid .et_pb_blurb_container {
  flex: 1 1 auto;
  padding: 0 !important;
  text-align: left !important;
}
/* Index sits above the title, inside the copy column, so it never competes
   with the icon. */
body.page-id-390 .ski-adapt__grid .et_pb_blurb_container::before {
  content: counter(ski-adapt, decimal-leading-zero);
  display: block;
  margin: 0 0 4px;
  font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--ski-blue);
  font-variant-numeric: tabular-nums;
}
body.page-id-390 .ski-adapt__grid .et_pb_module_header {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  color: var(--ski-deep) !important;
  text-align: left !important;
}
body.page-id-390 .ski-adapt__grid .et_pb_blurb_description p {
  margin: 0;
  padding: 0;
  max-width: 40ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ski-muted);
}
@media (max-width: 980px) {
  /* recomposed, not shrunk: one item per row, and the single horizontal rule
     becomes a rule per item so the progression still reads vertically — the
     same transformation the booking steps make at this breakpoint */
  body.page-id-390 .ski-adapt__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 28px !important;
    --ski-aico: var(--ski-icon-lg);
    --ski-aico-col: calc(var(--ski-icon-lg) + 4px);
  }
  body.page-id-390 .ski-adapt__grid::after { display: none; }
  body.page-id-390 .ski-adapt__grid > .et_pb_column {
    padding: 22px 0 !important;
    border-top: 1px solid var(--ski-line) !important;
  }
  body.page-id-390 .ski-adapt__grid > .et_pb_column:last-child { padding-bottom: 0 !important; }
  body.page-id-390 .ski-adapt__grid .et_pb_blurb_description p { max-width: 60ch; }
}

/* --------------------------------------------------------------------------
   10. BOOKING STEPS — large numerals on a single technical rule.
   Same component as the approved Home2 reference.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-steps {
  --ski-step-gap: clamp(28px, 3.4vw, 72px);
  --ski-step-num: clamp(2.75rem, 1.8rem + 2.2vw, 3.75rem);
  padding-top: var(--ski-space-dense) !important;
  padding-bottom: var(--ski-space-dense) !important;
}
body.page-id-390 .ski-steps > .ski-section-head { margin-bottom: clamp(16px, 1.6vw, 24px) !important; }
body.page-id-390 .ski-steps .ski-booking-steps-row::before { content: none !important; display: none !important; }
body.page-id-390 .ski-steps .ski-booking-steps-row {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--ski-step-gap) !important;
}
body.page-id-390 .ski-steps .ski-booking-steps-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ski-line);
  pointer-events: none;
}
body.page-id-390 .ski-steps .ski-booking-steps-row > .et_pb_column {
  position: relative;
  width: auto !important;
  margin: 0 !important;
  padding: 26px 0 0 !important;
  border-top: 0 !important;
  text-align: left !important;
  background-image: none !important;
}
body.page-id-390 .ski-steps .ski-booking-steps-row > .et_pb_column::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--ski-blue);
}
/* Directional chevron in the gap, level with the numerals: 01 > 02 > 03. */
body.page-id-390 .ski-steps .ski-booking-steps-row > .et_pb_column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(26px + var(--ski-step-num) * 0.42);
  right: calc(var(--ski-step-gap) / -2 - 5px);
  width: 10px;
  height: 10px;
  border-top: 1.5px solid var(--ski-blue);
  border-right: 1.5px solid var(--ski-blue);
  transform: rotate(45deg);
  opacity: 0.7;
}
body.page-id-390 .ski-steps .ski-step-badge {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.page-id-390 .ski-steps .ski-step-badge p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: var(--ski-step-num) !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  color: var(--ski-deep) !important;
}
body.page-id-390 .ski-steps .et_pb_blurb .et_pb_main_blurb_image { display: none !important; }
body.page-id-390 .ski-steps .et_pb_blurb,
body.page-id-390 .ski-steps .et_pb_blurb_content {
  width: 100%;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}
body.page-id-390 .ski-steps .et_pb_blurb_container,
body.page-id-390 .ski-steps .et_pb_blurb .et_pb_module_header,
body.page-id-390 .ski-steps .et_pb_blurb_description {
  width: 100%;
  padding: 0 !important;
  text-align: left !important;
}
body.page-id-390 .ski-steps .et_pb_blurb .et_pb_module_header {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: clamp(1.1875rem, 1.05rem + 0.35vw, 1.375rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ski-deep) !important;
}
body.page-id-390 .ski-steps .et_pb_blurb_description p {
  margin: 0;
  padding: 0;
  max-width: 34ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ski-muted);
}
@media (max-width: 980px) { body.page-id-390 .ski-steps { --ski-step-gap: 28px; } }
@media (max-width: 767px) {
  body.page-id-390 .ski-steps { --ski-step-num: 3rem; }
  body.page-id-390 .ski-steps .ski-booking-steps-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px !important;
  }
  body.page-id-390 .ski-steps .ski-booking-steps-row::after { display: none; }
  body.page-id-390 .ski-steps .ski-booking-steps-row > .et_pb_column {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding-top: 26px !important;
    border-top: 1px solid var(--ski-line) !important;
  }
  body.page-id-390 .ski-steps .ski-booking-steps-row > .et_pb_column::before { width: 48px; }
  body.page-id-390 .ski-steps .ski-booking-steps-row > .et_pb_column:not(:last-child) {
    background-image: linear-gradient(var(--ski-line), var(--ski-line));
    background-repeat: no-repeat;
    background-position: 23px calc(26px + var(--ski-step-num) + 6px);
    background-size: 1px calc(100% - 26px - var(--ski-step-num) + 6px);
  }
  body.page-id-390 .ski-steps .ski-booking-steps-row > .et_pb_column:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -28px;
    left: 19px;
    transform: rotate(135deg);
  }
  body.page-id-390 .ski-steps .ski-step-badge { margin: 0 !important; }
}

/* --------------------------------------------------------------------------
   11. SUPPORT BAR — equipment note.
   A slim utility line between two hairlines, not a full section: it answers
   a practical question on the way to booking and must not interrupt the
   page with a screen of empty white.
   -------------------------------------------------------------------------- */
/* An Ice panel inside a Snow section, not a full Ice band and not a giant
   card: the practical question gets its own surface and its own weight on the
   way to booking, while the page keeps Ice for the two sections that earn it
   (personalisation and FAQ). Icon / index / title / copy / action share one
   grid, so the whole block reads as a single practical unit. */
body.page-id-390 .ski-support__bar > .et_pb_column {
  --ski-sico: 52px;
  --ski-sico-col: 56px;
  display: grid !important;
  grid-template-columns: var(--ski-sico-col) minmax(0, 1fr) auto;
  column-gap: clamp(18px, 2vw, 26px);
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(26px, 2.8vw, 38px) clamp(24px, 2.6vw, 36px) !important;
  border: 0 !important;
  border-radius: var(--gvid-1a7de837-bdb9-4740-aea3-b222bbda122d, 14px);
  background-color: var(--ski-ice) !important;
  background-image: none !important;
}
/* Same icon philosophy as the approved Home: a 56px column holding a 52px
   box, optically centred on the whole text block, no disc, no shadow, the
   line art's own colours. */
body.page-id-390 .ski-support__icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  width: var(--ski-sico-col) !important;
  margin: 0 !important;
  line-height: 0;
}
body.page-id-390 .ski-support__icon img {
  display: block;
  width: var(--ski-sico) !important;
  height: var(--ski-sico) !important;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.page-id-390 .ski-support__bar .ski-eyebrow { grid-column: 2; grid-row: 1; margin: 0 0 8px !important; }
body.page-id-390 .ski-support__title { grid-column: 2; grid-row: 2; margin: 0 !important; }
body.page-id-390 .ski-support__title .et_pb_module_header {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  color: var(--ski-deep) !important;
  text-align: left !important;
}
body.page-id-390 .ski-support__copy { grid-column: 2; grid-row: 3; margin: 8px 0 0 !important; }
body.page-id-390 .ski-support__copy p {
  margin: 0;
  padding: 0;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ski-muted);
}
/* The rental action is a real control, not metadata: the approved secondary
   outline button module sits in its own column, optically centred against the
   whole icon+copy block, with enough air that it never crowds the text. The
   grid child is Divi's button WRAPPER, not the anchor. */
body.page-id-390 .ski-support__bar .et_pb_button_module_wrapper {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
  margin: 0 0 0 clamp(28px, 3.4vw, 56px) !important;
}
@media (max-width: 980px) {
  /* two columns is not enough room for copy AND a button, so the action moves
     under the block and the icon keeps its own column */
  body.page-id-390 .ski-support__bar > .et_pb_column { grid-template-columns: var(--ski-sico-col) minmax(0, 1fr); }
  body.page-id-390 .ski-support__bar .et_pb_button_module_wrapper {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    margin: 20px 0 0 !important;
  }
}
@media (max-width: 767px) {
  /* the icon moves above the copy so the title keeps a full-width measure */
  body.page-id-390 .ski-support__bar > .et_pb_column {
    --ski-sico: 44px;
    --ski-sico-col: 48px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding: 26px 22px !important;
  }
  body.page-id-390 .ski-support__icon { grid-column: 1; grid-row: 1; }
  body.page-id-390 .ski-support__bar .ski-eyebrow { grid-column: 1; grid-row: 2; margin: 0 !important; }
  body.page-id-390 .ski-support__title { grid-column: 1; grid-row: 3; }
  body.page-id-390 .ski-support__copy { grid-column: 1; grid-row: 4; margin: 0 !important; }
  body.page-id-390 .ski-support__bar .et_pb_button_module_wrapper {
    grid-column: 1;
    grid-row: 5;
    margin: 6px 0 0 !important;
  }
}

/* --------------------------------------------------------------------------
   12. CROSS-LINK — "prefieres snowboard?".
   A photograph and a short panel, kept deliberately smaller than the option
   cards: this is a redirection for a minority of visitors, not a fourth
   option competing with the three above.
   -------------------------------------------------------------------------- */
body.page-id-390 .ski-cross { border-top: 1px solid var(--ski-line); }
body.page-id-390 .ski-cross__row {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  column-gap: clamp(28px, 3.4vw, 64px) !important;
  align-items: center !important;
}
body.page-id-390 .ski-cross__row > .et_pb_column {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background-image: none !important;
}
/* Height, crop and corner are the image module's own Divi settings (Sizing,
   Fit and the Radius/Small design variable) so they stay editable in the
   builder; this only makes the wrapper fill the box Divi sized. */
body.page-id-390 .ski-cross__media { position: relative; }
body.page-id-390 .ski-cross__media .et_pb_image { width: 100% !important; margin: 0 !important; }
body.page-id-390 .ski-cross__media .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}
body.page-id-390 .ski-cross__media .et_pb_image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 32%;
}
body.page-id-390 .ski-cross__panel .et_pb_module_header {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 16ch;
  font-size: clamp(1.625rem, 1.15rem + 1.3vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.028em !important;
  color: var(--ski-deep) !important;
  text-align: left !important;
}
body.page-id-390 .ski-cross__panel > .ski-eyebrow { margin: 0 0 12px !important; }
body.page-id-390 .ski-cross__panel > .et_pb_text:not(.ski-eyebrow) { margin: 16px 0 0 !important; }
body.page-id-390 .ski-cross__panel p {
  margin: 0;
  padding: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ski-muted);
}
body.page-id-390 .ski-cross__panel p:has(> a) { margin-top: 16px; }
body.page-id-390 .ski-cross__panel a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700 !important;
  color: var(--ski-deep) !important;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
body.page-id-390 .ski-cross__panel a:hover,
body.page-id-390 .ski-cross__panel a:focus-visible {
  color: var(--ski-blue) !important;
  text-decoration-color: currentColor;
}
@media (max-width: 980px) {
  body.page-id-390 .ski-cross__row {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   13. FAQ — calm hairline accordion, title left, questions right.
   Same component as the approved Home2 reference; the split lives on the
   column because this page keeps heading and accordion in one Divi row.
   -------------------------------------------------------------------------- */
/* The FAQ sits on Ice and the closing CTA returns to Snow, so the surface
   change does the separating and no section rule is needed on either. */
body.page-id-390 .ski-faq__split {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(40px, 4.5vw, 88px);
  align-items: start;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background-image: none !important;
}
body.page-id-390 .ski-faq__split > .et_pb_heading { grid-column: 1; margin: 0 !important; }
body.page-id-390 .ski-faq__split > .et_pb_accordion { grid-column: 2; margin: 0 !important; }
body.page-id-390 .ski-faq .et_pb_toggle {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ski-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.page-id-390 .ski-faq .et_pb_toggle:first-child { border-top: 1px solid var(--ski-line) !important; }
body.page-id-390 .ski-faq .et_pb_toggle_title {
  position: relative;
  margin: 0 !important;
  padding: 18px 56px 18px 0 !important;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--ski-deep) !important;
  cursor: pointer;
}
body.page-id-390 .ski-faq .et_pb_toggle_title::before {
  content: "" !important;
  position: absolute;
  top: 50% !important;
  right: 4px !important;
  left: auto !important;
  width: 16px;
  height: 16px;
  margin-top: -8px !important;
  font-size: 0 !important;
  background:
    linear-gradient(var(--ski-blue), var(--ski-blue)) center / 16px 2px no-repeat,
    linear-gradient(var(--ski-blue), var(--ski-blue)) center / 2px 16px no-repeat;
}
body.page-id-390 .ski-faq .et_pb_toggle_open .et_pb_toggle_title::before {
  display: block !important;
  background:
    linear-gradient(var(--ski-blue), var(--ski-blue)) center / 16px 2px no-repeat,
    linear-gradient(var(--ski-blue), var(--ski-blue)) center / 2px 0 no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  body.page-id-390 .ski-faq .et_pb_toggle_title::before { transition: background-size 0.25s ease; }
}
@media (hover: hover) and (pointer: fine) {
  body.page-id-390 .ski-faq .et_pb_toggle_title:hover { color: var(--ski-blue) !important; }
}
body.page-id-390 .ski-faq .et_pb_toggle_title:focus-visible {
  outline: 2px solid var(--ski-blue);
  outline-offset: 3px;
}
body.page-id-390 .ski-faq .et_pb_toggle_content {
  padding: 0 56px 22px 0 !important;
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ski-muted);
}
body.page-id-390 .ski-faq .et_pb_toggle_content p { margin: 0; padding: 0; }
@media (max-width: 980px) {
  body.page-id-390 .ski-faq__split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  body.page-id-390 .ski-faq__split > .et_pb_heading,
  body.page-id-390 .ski-faq__split > .et_pb_accordion { grid-column: 1; }
}
@media (max-width: 767px) {
  body.page-id-390 .ski-faq .et_pb_toggle_title { padding: 22px 44px 22px 0 !important; }
  body.page-id-390 .ski-faq .et_pb_toggle_content { padding: 0 0 22px !important; }
}

/* --------------------------------------------------------------------------
   14. FINAL CTA — light, typographic conversion moment. Never merges with
   the deep-blue footer.
   -------------------------------------------------------------------------- */
/* The closing CTA is a LIGHT moment on Snow, immediately above the deep-blue
   footer, so the two never merge. The section's dark preset was removed from
   this instance (module level only — the preset itself is untouched and still
   serves whatever else uses it). */
body.page-id-390 .ski-final > .et_pb_row > .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  background-image: none !important;
}
@media (min-width: 981px) {
  body.page-id-390 .ski-final > .et_pb_row > .et_pb_column { max-width: 58% !important; }
}
/* The page's closing echo of the 01/02/03 technical language. */
body.page-id-390 .ski-final .ski-cta-box::before {
  content: "SKI SCHOOL / SIERRA NEVADA";
  display: block;
  margin: 0 0 18px;
  font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  line-height: 1;
  color: var(--ski-blue);
  opacity: 0.85;
}
body.page-id-390 .ski-final .ski-cta-box {
  max-width: 640px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
body.page-id-390 .ski-final .et_pb_promo_description,
body.page-id-390 .ski-final .et_pb_promo_description div,
body.page-id-390 .ski-final .et_pb_promo_content,
body.page-id-390 .ski-final .et_pb_button_wrapper {
  padding: 0 !important;
  text-align: left !important;
}
body.page-id-390 .ski-final .et_pb_promo_description .et_pb_module_header {
  max-width: 13ch;
  margin: 0 !important;
  padding: 0 0 18px !important;
  font-size: clamp(2rem, 1.25rem + 2.7vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  color: var(--ski-deep) !important;
  text-align: left !important;
  text-wrap: balance;
}
body.page-id-390 .ski-final .et_pb_promo_content p {
  margin: 0;
  padding: 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ski-muted) !important;
}
body.page-id-390 .ski-final .et_pb_button_wrapper { margin: 28px 0 0 !important; text-align: left !important; }
/* Primary action. Radius, transition, guarded hover, focus ring and the
   reduced-motion fallbacks all come from the shared .et_pb_promo_button rules
   in style.css; only the light-surface colours are set here, and they are the
   same pair the approved Home closing CTA uses. The #page-container prefix is
   what lets the label colour win over the CTA preset's own !important. */
body.page-id-390 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 24px !important;
  background: var(--ski-blue) !important;
  color: var(--ski-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.page-id-390 .ski-final .et_pb_promo_button::after { display: none !important; }
body.page-id-390 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button:hover,
body.page-id-390 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button:focus-visible {
  background: var(--ski-deep) !important;
  color: #FFFFFF !important;
}
body.page-id-390 .ski-final .et_pb_button_module_wrapper { margin: 14px 0 0 !important; }
@media (max-width: 767px) {
  body.page-id-390 .ski-final .et_pb_button_wrapper,
  body.page-id-390 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button { width: 100%; }
  body.page-id-390 #page-container .ski-final .ski-final__secondary { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   15. MOTION — nothing new is introduced. The page uses only the reveal
   classes already shipped by the child theme, and every one of them is
   already disabled under prefers-reduced-motion by that system. The two
   local transitions (card hover, FAQ icon) are guarded above.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   16. FINAL PASS — anchor offset and hairline hygiene.
   -------------------------------------------------------------------------- */
/* The hero's secondary action jumps to the option grid; the offset keeps the
   section heading clear of the sticky header instead of under it. */
body.page-id-390 #clases-opciones { scroll-margin-top: clamp(84px, 11vh, 128px); }

/* The tonal change to Ice already separates the personalisation band, and
   the support bar already closes with its own rule — a section border on top
   of either would read as a double hairline. */
body.page-id-390 .ski-adapt { border-top: 0; }
body.page-id-390 .ski-cross { border-top: 0; }

/* The shared .ski-service-card rule in style.css sets overflow:hidden, which
   would clip the Sierra cut and the active card's lift. The slider component
   overrides it to visible (same as Home2); the photo is clipped by its own
   .et_pb_image wrapper instead. Stated here so a future edit does not
   "restore" the overflow and lose the mark. */

/* --------------------------------------------------------------------------
   17. SECOND-PASS MOTION — hero entrance only, and pure CSS.
   The background depth is Divi's own parallax setting on the module, already
   enabled, so no scroll library is involved. The entrance is a short staggered
   rise on the four hero elements, declared ONLY inside a
   prefers-reduced-motion: no-preference query: a reduced-motion visitor never
   receives the rule at all and sees the finished state, and because it is CSS
   rather than script, a JS failure cannot leave anything at opacity 0.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ski390-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead,
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_module_header,
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_content_wrapper,
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_button_wrapper {
    animation: ski390-rise 640ms var(--ski-ease) both;
  }
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_module_header { animation-delay: 80ms; }
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_content_wrapper { animation-delay: 160ms; }
  body.page-id-390 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { animation-delay: 240ms; }
}

/* --------------------------------------------------------------------------
   18. SECOND-PASS MICRO-CRAFT
   -------------------------------------------------------------------------- */
/* Divi's own ::after chevron would sit next to the literal "→" that the
   shared .ski-arrow micro-interaction animates, giving two arrows on one
   link. One arrow, everywhere. */
body.page-id-390 .ski-service-card a::after,
body.page-id-390 .ski-cross__panel a::after { content: none !important; }

/* Eyebrow rhythm: the technical label sits the same distance above every
   heading it introduces, whatever module follows it. */
body.page-id-390 .ski-section-head .ski-eyebrow { margin: 0 0 14px !important; }

/* The closing index is Orbitron at the same tracking as every other technical
   label on the page; stated once here so the two never drift apart. */
body.page-id-390 .ski-final .ski-cta-box::before { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   19. SECONDARY BUTTON ON LIGHT SURFACES — ONE definition, two instances.

   Both secondary controls on this page (the rental CTA on the Ice panel and
   Contactar in the closing CTA) are the SAME approved component: the shared
   divi/button outline preset, plus the global .ski-btn / .ski-btn-outline
   rules in style.css that already own radius, transition, guarded hover
   shadow, the focus ring and the reduced-motion fallbacks. The preset also
   supplies the arrow glyph, so the arrow language is inherited rather than
   re-drawn.

   Only two things are set here, and only because the preset's own values are
   wrong for a light surface:
   1. the preset paints the label in --gcid-link-color (#26ADE2). On Snow that
      is 2.57:1 and on Ice 2.4:1 — both well under WCAG AA for text. Deep
      Alpine gives 9.5:1 on Snow and 8.6:1 on Ice.
   2. the preset compiles 8px/4px padding at a specificity that beats the
      global .ski-btn-outline rule, which is what made the control read as
      small text rather than a button.
   The 1.5px rule, 12px radius and 48px height are the same numbers the hero's
   secondary action uses, so every secondary control on the page is one size.
   -------------------------------------------------------------------------- */
body.page-id-390 #page-container .et_pb_section .ski-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 24px !important;
  background-color: transparent !important;
  border: 2px solid var(--ski-deep) !important;
  border-radius: 10px !important;
  color: var(--ski-deep) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
/* Restrained blue accent on hover: the rule and a faint wash pick up the
   brand colour while the label stays readable. */
@media (hover: hover) and (pointer: fine) {
  body.page-id-390 #page-container .et_pb_section .ski-btn-outline:hover {
    border-color: var(--ski-blue) !important;
    background-color: rgba(38, 173, 226, 0.08) !important;
    color: var(--ski-deep) !important;
  }
}
/* The button preset animates a 1.02 scale from a selector that outranks the
   shared reduced-motion rule in style.css, so a reduced-motion visitor still
   got a moving button. Neutralised for this page only. */
@media (prefers-reduced-motion: reduce) {
  body.page-id-390 .et_pb_button_module_wrapper a,
  body.page-id-390 .et_pb_button_module_wrapper a:hover {
    transform: none !important;
    transition: none !important;
  }
}
/* Phones: a full-width target rather than a small pill floating in the panel. */
@media (max-width: 767px) {
  body.page-id-390 .ski-support__bar .et_pb_button_module_wrapper,
  body.page-id-390 .ski-final .et_pb_button_module_wrapper { width: 100%; }
  body.page-id-390 #page-container .et_pb_section .ski-btn-outline { width: 100%; }
}