/* ==========================================================================
   SKI KIDS PRODUCT PAGE (WooCommerce product 1513, /producto/ski-kids/)
   Presentation only. Every selector is anchored to body.postid-1513, so
   nothing here can reach another product rendered by the shared Theme
   Builder body layout 1630. ThemeComplete groups are addressed by their
   stable Unique Element IDs ([data-uniqid]); no field, rule or price is
   touched. Tokens: the --ski-* (product-template.css) and --ssbu-*
   (booking-ui.css) variables, which resolve to the Divi global colours.
   Breakpoints: <=980 / >=981 (project rule), plus <=620 and <=420.
   ========================================================================== */

body.postid-1513 {
  --skp-blue: var(--gcid-primary-color, #26ADE2);
  --skp-deep: var(--gcid-secondary-color, #214A5E);
  --skp-ink: var(--gcid-heading-color, #0F2430);
  --skp-muted: rgba(15, 36, 48, 0.72);
  --skp-line: rgba(33, 74, 94, 0.16);
  --skp-tint: rgba(38, 173, 226, 0.10);
  --skp-tech: var(--gvid-b5547a12-68b7-4dee-9a11-c6f6c6f0d32b, Orbitron), system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   A. HERO - photo of real kids as the product image; the Kids logo is a
   small identity mark inside the short description. The template's generic
   trust line ('Clase personalizada') is replaced by the product's own meta
   row, which lives in the short description.
   -------------------------------------------------------------------------- */

body.postid-1513 .ski-product-hero__trust {
  display: none !important;
}

/* Kids in the lower half of a portrait photo: keep them in the 4:3 frame. */
body.postid-1513 .ski-product-media__figure img {
  object-position: center 72%;
}

body.postid-1513 .ski-kids-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

body.postid-1513 .ski-kids-hero__figure {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 0;
}

body.postid-1513 .ski-kids-hero__mark {
  flex: 0 0 auto;
  display: block;
  width: 120px !important;
  height: auto !important;
  max-width: 120px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  margin: 2px 0 0;
  border-radius: 12px;
}

body.postid-1513 .ski-kids-hero__body {
  flex: 1 1 auto;
  min-width: 0;
}

body.postid-1513 .ski-product-hero__lead p.ski-kids-hero__lead {
  margin: 0;
  max-width: 44ch;
}

body.postid-1513 .ski-kids-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

body.postid-1513 .ski-kids-hero__meta li {
  position: relative;
  margin: 0;
  padding: 0 0 0 14px;
  font-family: var(--skp-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--skp-deep);
}

body.postid-1513 .ski-kids-hero__meta li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border: solid var(--skp-blue);
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   B. ELIGE LA MODALIDAD - compact two-up comparison (long description)
   -------------------------------------------------------------------------- */

body.postid-1513 .ski-modality-info {
  margin: 0;
  padding: 0;
}

body.postid-1513 .ski-modality-intro h2 {
  margin: 0 0 8px;
  padding: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--skp-ink);
}

body.postid-1513 .ski-modality-lead {
  margin: 0 0 24px;
  padding: 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--skp-muted);
}

body.postid-1513 .ski-modality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

body.postid-1513 .ski-modality-section {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px 26px 24px;
  background: #FFFFFF;
  border: 1px solid var(--skp-line);
  border-top: 3px solid var(--skp-blue);
  border-radius: 16px;
}

body.postid-1513 .ski-modality--grupal {
  border-top-color: var(--skp-deep);
}

body.postid-1513 .ski-modality-kicker {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--skp-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--skp-blue);
}

body.postid-1513 .ski-modality-section h3 {
  margin: 0 0 14px;
  padding: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--skp-ink);
}

body.postid-1513 .ski-modality-features {
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none;
}

body.postid-1513 .ski-modality-features li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--skp-muted);
}

body.postid-1513 .ski-modality-features li + li {
  border-top: 1px solid rgba(33, 74, 94, 0.08);
}

body.postid-1513 .ski-modality-features li::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 2px;
  width: 9px;
  height: 5px;
  border: solid var(--skp-blue);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* 'Material incluido': a quiet meta row on a hairline, not a sticker. */
body.postid-1513 .ski-modality-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 0 0;
  border-top: 1px solid var(--skp-line);
  font-family: var(--skp-tech);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--skp-blue);
}

body.postid-1513 .ski-modality-meta::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 1.5px;
  background: var(--skp-blue);
}

body.postid-1513 .ski-modality-cta {
  margin-top: auto;
}

/* Equal-weight secondary actions: the one primary action on this page is
   the booking submit inside the configurator. */
body.postid-1513 .ski-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--gvid-f5b5fe8b-ccfe-427c-9602-03fd3bd6667e, 12px);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.postid-1513 .ski-btn--outline {
  background: transparent;
  border: 1.5px solid var(--skp-deep);
  color: var(--skp-deep);
}

body.postid-1513 .ski-btn--outline:hover,
body.postid-1513 .ski-btn--outline:focus-visible {
  background: var(--skp-deep);
  color: #FFFFFF;
}

body.postid-1513 .ski-btn:focus-visible {
  outline: 3px solid var(--skp-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   C. CONFIGURATOR - layout, choice pills, total
   -------------------------------------------------------------------------- */

/* Anchor printed before the form (functions.php). The site header is not
   fixed; the offset leaves room for the admin bar and breathing space. */
body.postid-1513 .ski-kids-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--ski-sticky-top, 32px) + 16px);
}

body.postid-1513 #tm-extra-product-options .cpf-element {
  margin-bottom: 26px;
}

body.postid-1513 #tm-extra-product-options .tc-epo-label {
  margin-bottom: 12px;
  font-size: 16px;
}

/* Modalidad (2 choices): same tiles as every other group, side by side.
   Replaces the old blanket flex rule that restyled ALL radio groups. */
body.postid-1513 #tm-extra-product-options [data-uniqid='6b06ab86f69ed9da.mod'] .tm-extra-product-options-radio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tap targets and a selected state that reads at a glance:
   blue border + blue tint + a check badge (not colour alone). */
body.postid-1513 #tm-extra-product-options .tm-extra-product-options-radio {
  gap: 12px 10px;
}

body.postid-1513 #tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label {
  position: relative;
  min-height: 48px;
}

body.postid-1513 #tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label:has(input:checked),
body.postid-1513 #tm-extra-product-options .tm-extra-product-options-radio .tmcp-field-wrap.tc-active .tm-epo-field-label {
  background: var(--skp-tint);
  border-color: var(--skp-blue);
  box-shadow: inset 0 0 0 1px var(--skp-blue);
  color: var(--skp-deep);
}

body.postid-1513 #tm-extra-product-options .tm-extra-product-options-radio .tm-epo-field-label:has(input:checked)::after,
body.postid-1513 #tm-extra-product-options .tm-extra-product-options-radio .tmcp-field-wrap.tc-active .tm-epo-field-label::after {
  content: '';
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background:
    url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27M3.5 7.2l2.3 2.3 4.7-4.9%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E') center / 12px 12px no-repeat,
    var(--skp-blue);
  pointer-events: none;
}

/* Comentarios */
body.postid-1513 #tm-extra-product-options .tmcp-textarea {
  min-height: 120px;
}

/* Total: the dominant figure of the panel. */
body.postid-1513 .ski-product-config .tc-epo-totals {
  margin-top: 8px;
  background: #F6FAFC;
}

body.postid-1513 .ski-product-config dd.tm-final-totals,
body.postid-1513 .ski-product-config dd.tm-final-totals .price,
body.postid-1513 .ski-product-config dd.tm-final-totals .amount,
body.postid-1513 .ski-product-config dd.tm-final-totals bdi {
  font-size: clamp(30px, 2.6vw, 38px);
}

/* Note printed after the form (functions.php): what the total means. */
body.postid-1513 .ski-kids-total-note {
  margin: 12px 0 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--skp-muted);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  body.postid-1513 .ski-modality-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 620px) {
  body.postid-1513 .ski-kids-hero {
    gap: 14px;
  }

  body.postid-1513 .ski-kids-hero__figure {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 0;
}

body.postid-1513 .ski-kids-hero__mark {
    width: 88px !important;
    max-width: 88px;
    border-radius: 10px;
  }

  body.postid-1513 .ski-product-hero__lead p.ski-kids-hero__lead {
    font-size: 16px;
  }

  body.postid-1513 .ski-modality-section {
    padding: 22px 20px 20px;
  }

  body.postid-1513 .ski-modality-section h3 {
    font-size: 20px;
  }
}

@media (max-width: 420px) {
  body.postid-1513 .ski-kids-hero__figure {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 0;
}

body.postid-1513 .ski-kids-hero__mark {
    width: 72px !important;
    max-width: 72px;
  }

  /* Personas 1-5: five across only while each tile keeps 48px, else wrap. */
  body.postid-1513 #tm-extra-product-options [data-uniqid='6a9eaf67cb4c02.01287450'] .tm-extra-product-options-radio {
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    column-gap: 8px;
  }

  /* Nivel: word labels, two per row at 360-420. */
  body.postid-1513 #tm-extra-product-options [data-uniqid='6a9eb285b25776.62631965'] .tm-extra-product-options-radio {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.postid-1513 .ski-btn {
    transition: none;
  }
}


/* QA pass 20260927-033646 */
/* Rental yes/no: rental-refine.css paints the checked label text white for a solid-blue fill; this page uses the tinted selected state, so the text must stay dark. */
body.postid-1513 #tm-extra-product-options .ski-rental-question-control-ul .tm-epo-field-label:has(input:checked) .tc-label-text {
  color: var(--skp-deep, #214A5E);
}

/* Support CTA: the secondary button preset (!important, 8px/4px padding, link colour) wins here because this module lacks .ski-btn. Match the landing secondary button; !important is required to beat the preset. */
body.postid-1513 #page-container #et-boc .et-l .ski-product-support__cta.et_pb_button {
  padding: 10px 24px !important;
  min-height: 44px;
  color: var(--skp-deep, #214A5E) !important;
  border-color: var(--skp-deep, #214A5E);
}


/* H2 alignment with the landing (QA 2026-09-27): same navy and the same
   ski-display-h2--sm size token as body.page-id-498. The ID-scoped selector
   and !important are needed to beat the heading preset's colour rule. */
body.postid-1513 #page-container #et-boc .et-l .ski-display-h2--sm .et_pb_module_header,
body.postid-1513 .ski-modality-intro h2 {
  font-size: clamp(1.875rem, 1.1rem + 1.9vw, 2.9rem) !important;
  line-height: 1.06 !important;
  color: var(--skp-deep, #214A5E) !important;
}