/* ==========================================================================
   SKI KIDS — PAGE 498 ONLY
   Enqueued exclusively by ski_school_child_clases_esqui_assets() behind
   is_page( 390 ). Every selector is additionally prefixed with
   body.page-id-498, 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-498 {
  --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-498 { --ski-edge: 40px; --ski-space: 64px; --ski-space-dense: 56px; }
}
@media (max-width: 767px) {
  body.page-id-498 { --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-498 #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-498 #ski-hero.ski-page-hero > .et_pb_fullwidth_header_overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The rider sits high and centre in this photograph, so the scrim is pulled
     tighter into the bottom-left corner than on the ski page: it covers the
     headline block and clears by roughly 60% across and 45% up, leaving the
     jump, the lift line and the ridge reading as a real photograph rather
     than a tinted field. */
  background-image:
    radial-gradient(92% 80% at 0% 100%, rgba(15, 36, 48, 0.92) 0%, rgba(15, 36, 48, 0.62) 32%, rgba(15, 36, 48, 0.16) 62%, rgba(15, 36, 48, 0) 82%),
    linear-gradient(0deg, rgba(15, 36, 48, 0.58) 0%, rgba(15, 36, 48, 0.10) 28%, rgba(15, 36, 48, 0) 46%);
}
@media (max-width: 980px) {
  body.page-id-498 #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-498 #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-498 #ski-hero.ski-page-hero .header-content-container { display: block; width: 100%; }
body.page-id-498 #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-498 #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-498 #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-498 #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-498 #ski-hero.ski-page-hero .et_pb_header_content_wrapper { order: 2; margin: 0; text-align: left; }
body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_content_wrapper p { margin: 0; padding: 0; }
body.page-id-498 #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-498 #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-498 .et_pb_section:has(.ski-page-hero),
body.page-id-498 .et_pb_row:has(.ski-page-hero) { display: flow-root; }
@media (max-width: 980px) {
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_module_header { max-width: 17ch; margin-bottom: 16px; }
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead { margin-bottom: 14px; }
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { margin-top: 24px; }
}
@media (max-width: 767px) {
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { gap: 6px 18px; }
  body.page-id-498 #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-498 .ski-band {
  position: relative;
  padding: var(--ski-space) var(--ski-edge) !important;
}
body.page-id-498 .ski-band--dense { padding: var(--ski-space-dense) var(--ski-edge) !important; }
body.page-id-498 .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-498 .ski-band > .ski-section-head { margin-bottom: clamp(28px, 3vw, 44px) !important; }
body.page-id-498 .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-498 .ski-eyebrow { margin: 0 0 14px !important; }
body.page-id-498 .ski-eyebrow .et_pb_text_inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ski-blue);
}
body.page-id-498 .ski-eyebrow .et_pb_text_inner::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 2px;
  background: currentColor;
}
body.page-id-498 .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-498 .ski-display-h2,
body.page-id-498 .ski-display-h2 .et_pb_heading_container {
  margin: 0 !important;
  text-align: left !important;
  transform: none !important;
}
body.page-id-498 .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-498 .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-498 .ski-lead { margin: 18px 0 0 !important; }
body.page-id-498 .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-498 .ski-lead p { font-size: 16.5px; }
}

/* --------------------------------------------------------------------------
   5. TRUST STRIP — flush surface change under the hero, not a floating card.
   -------------------------------------------------------------------------- */
body.page-id-498 .ski-inner-trust {
  position: relative;
  z-index: 1;
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 981px) {
  body.page-id-498 .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, two placements on this page. 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-498 .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;
}
/* 2. the final CTA copy — top-right, pointing into the contour */
body.page-id-498 .ski-final .ski-cta-box { position: relative; }
body.page-id-498 .ski-final .ski-cta-box::after { top: 2px; right: -34px; }
@media (max-width: 767px) {
  body.page-id-498 .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-498 .ski-contour { position: relative; overflow: hidden; isolation: isolate; }
body.page-id-498 .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-498 .ski-contour > .et_pb_row { position: relative; z-index: 1; }
/* 1. PROGRESSION — 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-498 .ski-editorial::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-498 .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-498 .ski-editorial::after {
    left: -34vw;
    bottom: -6%;
    width: 148vw;
    opacity: 0.38;
  }
  body.page-id-498 .ski-final::after {
    top: auto;
    bottom: -8%;
    right: -32vw;
    width: 130vw;
    transform: none;
    opacity: 0.48;
  }
}

/* --------------------------------------------------------------------------
   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-498 .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-498 .ski-adapt > .ski-section-head { margin-bottom: clamp(20px, 2vw, 30px) !important; }
body.page-id-498 .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-498 .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-498 .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: 26px 0 0 !important;
  border-top: 0 !important;
  background-image: none !important;
}
body.page-id-498 .ski-adapt__grid > .et_pb_column::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--ski-blue);
}
body.page-id-498 .ski-adapt__grid .et_pb_blurb { margin: 0 !important; }
body.page-id-498 .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-498 .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-498 .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-498 .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-498 .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-498 .ski-adapt__grid .et_pb_module_header {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 20px !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-498 .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-498 .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-498 .ski-adapt__grid::after { display: none; }
  body.page-id-498 .ski-adapt__grid > .et_pb_column {
    padding: 22px 0 !important;
    border-top: 1px solid var(--ski-line) !important;
  }
  body.page-id-498 .ski-adapt__grid > .et_pb_column:last-child { padding-bottom: 0 !important; }
  body.page-id-498 .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-498 .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-498 .ski-steps > .ski-section-head { margin-bottom: clamp(16px, 1.6vw, 24px) !important; }
body.page-id-498 .ski-steps .ski-booking-steps-row::before { content: none !important; display: none !important; }
body.page-id-498 .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-498 .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-498 .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-498 .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-498 .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-498 .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-498 .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-498 .ski-steps .et_pb_blurb .et_pb_main_blurb_image { display: none !important; }
body.page-id-498 .ski-steps .et_pb_blurb,
body.page-id-498 .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-498 .ski-steps .et_pb_blurb_container,
body.page-id-498 .ski-steps .et_pb_blurb .et_pb_module_header,
body.page-id-498 .ski-steps .et_pb_blurb_description {
  width: 100%;
  padding: 0 !important;
  text-align: left !important;
}
body.page-id-498 .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-498 .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-498 .ski-steps { --ski-step-gap: 28px; } }
@media (max-width: 767px) {
  body.page-id-498 .ski-steps { --ski-step-num: 3rem; }
  body.page-id-498 .ski-steps .ski-booking-steps-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px !important;
  }
  body.page-id-498 .ski-steps .ski-booking-steps-row::after { display: none; }
  body.page-id-498 .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-498 .ski-steps .ski-booking-steps-row > .et_pb_column::before { width: 48px; }
  body.page-id-498 .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-498 .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-498 .ski-steps .ski-step-badge { margin: 0 !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-498 .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-498 .ski-faq__split > .et_pb_heading { grid-column: 1; margin: 0 !important; }
body.page-id-498 .ski-faq__split > .et_pb_accordion { grid-column: 2; margin: 0 !important; }
body.page-id-498 .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-498 .ski-faq .et_pb_toggle:first-child { border-top: 1px solid var(--ski-line) !important; }
body.page-id-498 .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-498 .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-498 .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-498 .ski-faq .et_pb_toggle_title::before { transition: background-size 0.25s ease; }
}
@media (hover: hover) and (pointer: fine) {
  body.page-id-498 .ski-faq .et_pb_toggle_title:hover { color: var(--ski-blue) !important; }
}
body.page-id-498 .ski-faq .et_pb_toggle_title:focus-visible {
  outline: 2px solid var(--ski-blue);
  outline-offset: 3px;
}
body.page-id-498 .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-498 .ski-faq .et_pb_toggle_content p { margin: 0; padding: 0; }
@media (max-width: 980px) {
  body.page-id-498 .ski-faq__split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  body.page-id-498 .ski-faq__split > .et_pb_heading,
  body.page-id-498 .ski-faq__split > .et_pb_accordion { grid-column: 1; }
}
@media (max-width: 767px) {
  body.page-id-498 .ski-faq .et_pb_toggle_title { padding: 22px 44px 22px 0 !important; }
  body.page-id-498 .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-498 .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-498 .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-498 .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-498 .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-498 .ski-final .et_pb_promo_description,
body.page-id-498 .ski-final .et_pb_promo_description div,
body.page-id-498 .ski-final .et_pb_promo_content,
body.page-id-498 .ski-final .et_pb_button_wrapper {
  padding: 0 !important;
  text-align: left !important;
}
body.page-id-498 .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-498 .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-498 .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-498 #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-498 .ski-final .et_pb_promo_button::after { display: none !important; }
body.page-id-498 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button:hover,
body.page-id-498 #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-498 .ski-final .et_pb_button_module_wrapper { margin: 14px 0 0 !important; }
@media (max-width: 767px) {
  body.page-id-498 .ski-final .et_pb_button_wrapper,
  body.page-id-498 #page-container .ski-final .ski-cta-box.et_pb_promo .et_pb_promo_button.et_pb_button { width: 100%; }
  body.page-id-498 #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-498 #ski-kids-modalidades { 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-498 .ski-adapt { border-top: 0; }


/* --------------------------------------------------------------------------
   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-498 #ski-hero.ski-page-hero .et_pb_fullwidth_header_subhead,
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_module_header,
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_content_wrapper,
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_button_wrapper {
    animation: ski390-rise 640ms var(--ski-ease) both;
  }
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_module_header { animation-delay: 80ms; }
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_content_wrapper { animation-delay: 160ms; }
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_button_wrapper { animation-delay: 240ms; }
}

/* --------------------------------------------------------------------------
   18. SECOND-PASS MICRO-CRAFT
   -------------------------------------------------------------------------- */
/* Eyebrow rhythm: the technical label sits the same distance above every
   heading it introduces, whatever module follows it. */
body.page-id-498 .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-498 .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-498 #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-498 #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-498 .et_pb_button_module_wrapper a,
  body.page-id-498 .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-498 .ski-final .et_pb_button_module_wrapper { width: 100%; }
  body.page-id-498 #page-container .et_pb_section .ski-btn-outline { width: 100%; }
}

/* --------------------------------------------------------------------------
   20. SNOWBOARD-SPECIFIC EXTENSIONS

   Everything above is the approved internal-page system, generated from the
   Clases de esqui file so the two pages cannot drift: identical tokens,
   identical component rules, only the page prefix differs. The slider block
   was removed because this page has no slider — there is exactly ONE
   confirmed snowboard service, and a three-card rail would have to invent
   two more.

   Only four things are genuinely snowboard-specific, and they are here.
   -------------------------------------------------------------------------- */

/* 3. The closing index names the page rather than the resort. */
body.page-id-498 .ski-final .ski-cta-box::before { content: "SKI KIDS / SIERRA NEVADA"; }


/* --------------------------------------------------------------------------
   21. SKI KIDS MODALITY GRID

   Two options, not three or five — so this is a static two-up comparison, not
   the service rail. The card anatomy is the approved one (snow surface,
   hairline frame, 6px radius, cropped photograph, technical index, H3,
   baseline-pinned arrow CTA); only the column count and the slightly roomier
   padding differ, because a parent reads these two side by side rather than
   scanning past them.
   -------------------------------------------------------------------------- */
body.page-id-498 .ski-modal-grid {
  --ski-card-pad: 26px;
  --ski-card-img: 0.66;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(24px, 2.6vw, 40px) !important;
  row-gap: clamp(24px, 2.4vw, 36px) !important;
  align-items: stretch !important;
}
body.page-id-498 .ski-modal-grid > .ski-modal-card {
  position: relative;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !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;
  background: var(--ski-snow) !important;
  background-image: none !important;
  border: 1px solid var(--ski-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 380ms var(--ski-ease);
}
/* Neither option is the "disabled" one. The group course carries a single
   extra signal — the brand line — because it is the one with something
   concrete included, and nothing else about it is louder. */
body.page-id-498 .ski-modal-grid > .ski-modal-card--incluido { border-color: var(--ski-blue) !important; }
@media (hover: hover) and (pointer: fine) {
  body.page-id-498 .ski-modal-grid > .ski-modal-card:hover,
  body.page-id-498 .ski-modal-grid > .ski-modal-card:focus-within { border-color: var(--ski-blue) !important; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.page-id-498 .ski-modal-card:hover .et_pb_image img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-498 .ski-modal-grid > .ski-modal-card { transition: none; }
}

body.page-id-498 .ski-modal-card .et_pb_image {
  width: 100% !important;
  height: auto !important;
  margin: 0 0 20px !important;
  border-radius: 3px;
  overflow: hidden;
}
body.page-id-498 .ski-modal-card .et_pb_image_wrap {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / var(--ski-card-img);
  overflow: hidden;
}
body.page-id-498 .ski-modal-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. */
body.page-id-498 .ski-modal-card img[src*="IMG-20230319"] { object-position: 50% 46%; }
body.page-id-498 .ski-modal-card img[src*="IMG_0765"] { object-position: 50% 58%; }

body.page-id-498 .ski-modal-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;
}
/* 01 / CLASE PRIVADA — the card's technical label, an editable text module
   (not a CSS counter) so the name of each modality lives in the content. */
body.page-id-498 .ski-modal-card .ski-modal-card__label { margin: 0 !important; }
body.page-id-498 .ski-modal-card .ski-modal-card__label p {
  margin: 0;
  padding: 0;
  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;
  text-transform: uppercase;
  color: var(--ski-blue);
  font-variant-numeric: tabular-nums;
}
body.page-id-498 .ski-modal-card .et_pb_heading { margin: 0 !important; }
body.page-id-498 .ski-modal-card .et_pb_heading .et_pb_module_header {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.65rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.022em !important;
  color: var(--ski-deep) !important;
  text-align: left !important;
}
/* Body: benefit line, compact fact rows, then the action pinned to the
   card's baseline so both CTAs line up side by side. */
body.page-id-498 .ski-modal-card .ski-modal-card__body {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  margin: 2px 0 0 !important;
}
body.page-id-498 .ski-modal-card .ski-modal-card__body .et_pb_text_inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body.page-id-498 .ski-modal-card .ski-modal-card__body p {
  margin: 0 0 18px;
  padding: 0;
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ski-muted);
}
/* Technical meta rows: label | value on one hairline each. */
body.page-id-498 .ski-modal-card .ski-meta {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--ski-line);
}
body.page-id-498 .ski-modal-card .ski-meta li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  margin: 0 !important;
  padding: 11px 0 !important;
  list-style: none !important;
  border-bottom: 1px solid var(--ski-line);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ski-ink);
}
body.page-id-498 .ski-modal-card .ski-meta li span {
  font-family: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ski-muted);
}
/* MATERIAL INCLUIDO — the group course's one extra signal: a Ski School
   Blue hairline and tick on its own row. The label stays Deep Alpine so it
   keeps AA contrast at 11px; the colour lives in the rule, not the text. */
body.page-id-498 .ski-modal-card .ski-meta li.ski-meta__incluido { border-bottom-color: var(--ski-blue); }
body.page-id-498 .ski-modal-card .ski-meta li.ski-meta__incluido::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--ski-blue);
}
body.page-id-498 .ski-modal-card .ski-meta li.ski-meta__incluido span { color: var(--ski-deep); }
body.page-id-498 .ski-modal-card .ski-modal-card__body p.ski-card-cta {
  max-width: none;
  margin: auto 0 0;
  padding: 18px 0 0;
}
body.page-id-498 .ski-modal-card .ski-card-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  font-size: 15.5px;
  font-weight: 700 !important;
  color: var(--ski-deep) !important;
  text-decoration: underline;
  text-decoration-color: var(--ski-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  transition: color 0.2s ease;
}
body.page-id-498 .ski-modal-card .ski-card-cta a:hover,
body.page-id-498 .ski-modal-card .ski-card-cta a:focus-visible { color: var(--ski-blue) !important; }
body.page-id-498 .ski-modal-card .ski-card-cta a:focus-visible { outline: 2px solid var(--ski-blue); outline-offset: 3px; }
body.page-id-498 .ski-modal-card a::after { content: none !important; }
@media (max-width: 980px) {
  body.page-id-498 .ski-modal-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    --ski-card-pad: 22px;
    --ski-card-img: 0.75;
  }
}
@media (max-width: 420px) {
  body.page-id-498 .ski-modal-grid { --ski-card-pad: 18px; }
  body.page-id-498 .ski-modal-card .ski-meta li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* --------------------------------------------------------------------------
   22. HERO CROP — three young skiers, centred and slightly low in a 4:3
   frame, so the crop holds just below centre at every width.
   -------------------------------------------------------------------------- */
body.page-id-498 #ski-hero.ski-page-hero,
body.page-id-498 #ski-hero.ski-page-hero .et-pb-parallax-background {
  background-position: 50% 46% !important;
  background-size: cover !important;
}
@media (max-width: 767px) {
  body.page-id-498 #ski-hero.ski-page-hero,
  body.page-id-498 #ski-hero.ski-page-hero .et-pb-parallax-background {
    background-position: 50% 42% !important;
  }
}

/* --------------------------------------------------------------------------
   23. SKI KIDS LANDING PASS (2026-09-27)
   Hero secondary as a text link, the Family Ski editorial pattern
   (ski-fd-*), the closing cross-link note and fail-safes. Rules copied from
   family-ski.css and re-prefixed to this page; nothing new is invented.
   -------------------------------------------------------------------------- */
/* Hero: ONE dominant action. "Comparar modalidades" is an in-page jump, so it
   reads as a text link, not a second button of equal weight. */
body.page-id-498 #ski-hero.ski-page-hero .et_pb_button_two.et_pb_button,
body.page-id-498 #ski-hero.ski-page-hero .et_pb_button_two.et_pb_button:hover {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
body.page-id-498 #ski-hero.ski-page-hero .et_pb_button_two.et_pb_button:hover,
body.page-id-498 #ski-hero.ski-page-hero .et_pb_button_two.et_pb_button:focus-visible { text-decoration-color: currentColor; }
body.page-id-498 #ski-hero.ski-page-hero .et_pb_button_two.et_pb_button::after { display: none !important; }

/* Editorial — photograph + panel with three indexed points. */
body.page-id-498 .ski-fd-editorial__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  column-gap: clamp(36px, 4vw, 72px) !important;
  align-items: center;
}
body.page-id-498 .ski-fd-editorial__grid > .et_pb_column {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0;
  background-image: none !important;
}
body.page-id-498 .ski-fd-editorial__media { position: relative; }
body.page-id-498 .ski-fd-editorial__img {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--gvid-b1ca321e-a7f9-435b-92bf-2d3cb4d123e5, 16px);
  line-height: 0;
}
body.page-id-498 .ski-fd-editorial__img .et_pb_image_wrap { display: block; width: 100%; }
body.page-id-498 .ski-fd-editorial__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
}
/* Sierra cut on the photograph: 18px, 1.5px, Ski School Blue. */
body.page-id-498 .ski-fd-editorial__media::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -10px;
  left: -10px;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-color: var(--ski-blue);
  border-width: 1.5px 0 0 1.5px;
  pointer-events: none;
}
body.page-id-498 .ski-fd-editorial__body .ski-lead p { max-width: 46ch; }
body.page-id-498 .ski-fd-points { margin: clamp(28px, 2.8vw, 40px) 0 0 !important; }
body.page-id-498 .ski-fd-points ol {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: ski-fd-point;
}
body.page-id-498 .ski-fd-points li {
  position: relative;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--ski-line);
  counter-increment: ski-fd-point;
  list-style: none;
}
body.page-id-498 .ski-fd-points li:last-child { padding-bottom: 0; }
body.page-id-498 .ski-fd-points li::before {
  content: counter(ski-fd-point, decimal-leading-zero);
  position: absolute;
  top: 18px;
  left: 0;
  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.5;
  color: var(--ski-blue);
  font-variant-numeric: tabular-nums;
}
body.page-id-498 .ski-fd-points li > * { padding-left: 44px; }
body.page-id-498 .ski-fd-points h3 {
  margin: 0 0 4px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ski-deep);
}
body.page-id-498 .ski-fd-points p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ski-muted);
}

/* Closing cross-link under the booking steps — a quiet line, not a CTA. */
body.page-id-498 .ski-band > .ski-fd-note.et_pb_row {
  margin-top: clamp(30px, 3vw, 44px) !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--ski-line);
}
body.page-id-498 .ski-fd-note p {
  margin: 0;
  padding: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ski-muted);
}
body.page-id-498 .ski-fd-note a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 700;
  color: var(--ski-deep);
  text-decoration: underline;
  text-decoration-color: var(--ski-blue);
  text-underline-offset: 5px;
}
body.page-id-498 .ski-fd-note a:hover,
body.page-id-498 .ski-fd-note a:focus-visible { color: var(--ski-blue); }

@media (max-width: 980px) {
  body.page-id-498 .ski-fd-editorial__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
  /* Photograph first, then the copy it sets up. */
  body.page-id-498 .ski-fd-editorial__media { order: -1; }
  body.page-id-498 .ski-fd-editorial__img img { aspect-ratio: 4 / 3; object-position: 50% 32%; }
  body.page-id-498 .ski-fd-editorial__media::before { top: -8px; left: 0; }
  body.page-id-498 #ski-hero.ski-page-hero .et_pb_header_button_wrapper .et_pb_button_two { width: auto; }
}
@media (max-width: 620px) {
  body.page-id-498 .ski-fd-points li > * { padding-left: 38px; }
}

/* Fail-safes: nothing may depend on the reveal script to become visible. */
body.page-id-498 .ski-fd-editorial__img,
body.page-id-498 .ski-fd-points,
body.page-id-498 .ski-reveal-stagger > .et_pb_column {
  opacity: 1;
  visibility: visible;
}
body.page-id-498 .ski-band,
body.page-id-498 .ski-page-hero { max-width: 100%; }


/* Cross-link line (QA 2026-09-27): on phones stack the two links and drop the
   bare-text "·" separator, which otherwise dangles after the first link.
   The separator is a text node, so it is collapsed with font-size:0 while
   ::first-line restores the lead-in question. */
@media (max-width: 767px) {
  body.page-id-498 .ski-fd-note .et_pb_text_inner p {
    max-width: none;
    font-size: 0;
    line-height: 0;
  }
  body.page-id-498 .ski-fd-note .et_pb_text_inner p::first-line {
    font-size: 16px;
    line-height: 1.6;
  }
  body.page-id-498 .ski-fd-note .et_pb_text_inner p a {
    display: block;
    width: max-content;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.6;
  }
}