/* PANAMA CROSSROADS — /wellness-2/ (WELLNESS, PC 2024). Loads after main.css.
   Values from the inline Elementor CSS of reference/page-wellness-2.html
   (<style id="elementor-frontend-inline-css">, rules scoped .elementor-23250) plus the
   theme tokens in reference/css/__custom.css. Root font-size 17px, so
   1em=17, 1.5em=25.5, 1.882em=32, 2.6em=44.2.
   Theme heading tokens (__custom.css + the page's wp-custom-css override):
     h1 kikuta 2.6em/1.2127em 400 uppercase, ls 1px
     h2 kikuta 1.5em/1.1em bold uppercase ls 1px
     h3 config 1.882em/1.1em 600 uppercase ls 1px
   Schemes on this page: hero = scheme_dark (text #D4D4D6, text_dark #FFFFFF);
   the "PANAMÁ RESPIRA" band = scheme_light (text #6D6F72, text_dark #11131A);
   everything below = scheme_default (bg #F8F8F8, text #6D6F72, text_dark #000000,
   bd #E1E1E3, alter_text #797C7F).
   body.elementor-page-23250 sets background-color #F8F8F8 and every section below the
   hero repeats it, so one background on <main> replaces ten section rules. */

.wl {
  background: #F8F8F8;
  color: #6D6F72;
}

/* ---- W1 hero (73a254f, banner-1.jpg cover + #000 @ .88, container 943px) ----- */

.wl-hero {
  position: relative;
  background: url(/assets/banner-1.webp) center center / cover no-repeat;
  color: var(--text);
}
/* .elementor-background-overlay: #000000, opacity .88 (.87 ≤1024) */
.wl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
}
/* .elementor-section-with-custom-width → container max-width 943px */
.wl-hero .container { position: relative; max-width: 943px; }

.wl-hero__title {
  font-family: kikuta, sans-serif;
  font-size: 2.6em;              /* 44.2px */
  font-weight: 400;
  line-height: 1.2127em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
}
/* spacers aa7de87 / 778c7b7 carry sc_layouts_hide_on_tablet + _mobile → gone ≤1024px,
   unlike the shared .hide-mobile which only drops ≤767px */
.wl-hide-t { display: block; }

.wl-hero__text { text-align: center; }
.wl-hero__text p + p { margin-top: 1.3em; }   /* --theme-font-p_margin-bottom */

/* ---- W2 PANAMÁ RESPIRA (e796115 10px band + fd7d5fe, scheme_light, min 498px) -- */

.wl-respira .container { min-height: 498px; }
.wl-respira__title {
  font-family: kikuta, sans-serif;
  font-size: 2.6em;              /* h1 tag in the source; demoted to h2, size kept */
  font-weight: 400;
  line-height: 1.2127em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #11131A;
}
.wl-respira__text { text-align: center; }
.wl-respira__text p + p { margin-top: 1.3em; }

/* icon-box 0975efc: text-align center, h3 tag → theme h3 token */
.wl-respira__lead {
  font-family: config, sans-serif;
  font-size: 1.882em;            /* 32px */
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #11131A;
}

/* trx_sc_price metro, three trx_addons_column-1_3 cards + columns_padding_bottom, so
   the gutter is --theme-var-grid_gap (30px).
   ponytail: the trx_addons sheet that styles .sc_price_item_metro was not archived with
   the reference page (same gap as /pc-2023/), so a card is just its two lines: the step
   number as the h3 token above the body copy. The page's own
   `.elementor-element-83a5a76 .sc_item_title_text{font-size:135px}` matches nothing in
   the rendered markup (the widget has no title), so it is a no-op — ignored. */
.wl-steps {
  list-style: none;               /* main.css only resets <ul> */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.wl-step { text-align: center; }
.wl-step__n {
  margin: 0 0 10px;
  font-family: config, sans-serif;
  font-size: 1.882em;            /* 32px */
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 1px;
  color: #11131A;
}
.wl-step p { line-height: 1.3; }

/* ---- W3 / W7 premium-img-gallery metro (0a8fb02, ef1d3bb) -------------------- */

/* Each repeater row carries premium_gallery_image_cell (column span, /12) and
   premium_gallery_image_vcell (row span); isotope packs them into a metro grid.
   Reproduced as a plain 12-column CSS grid: each cell gets its grid-area from where
   isotope would have packed it, plus an `aspect-ratio: cell / vcell` so the row bands
   size themselves off the (definite) column width and stay square-ish. The image is
   taken out of flow so its intrinsic height cannot fight the ratio.
   ponytail: ≤1024px the original hands every cell a tablet span of 6 and lets isotope
   re-pack; here that is a 2-column square grid, and ≤767px a single column at the
   image's own aspect so nothing is cropped to a sliver. */
.wl-gal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}
.wl-gal > li { position: relative; min-height: 0; overflow: hidden; }
.wl-gal img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 0a8fb02 — cell/vcell 4/6, 4/3, 4/3, 4/3, 4/3, 6/4, 6/4 → 12 × 10 units */
.wl-gal--a > li:nth-child(1) { grid-area: 1 / 1 / 7 / 5;   aspect-ratio: 4 / 6; }
.wl-gal--a > li:nth-child(2) { grid-area: 1 / 5 / 4 / 9;   aspect-ratio: 4 / 3; }
.wl-gal--a > li:nth-child(3) { grid-area: 1 / 9 / 4 / 13;  aspect-ratio: 4 / 3; }
.wl-gal--a > li:nth-child(4) { grid-area: 4 / 5 / 7 / 9;   aspect-ratio: 4 / 3; }
.wl-gal--a > li:nth-child(5) { grid-area: 4 / 9 / 7 / 13;  aspect-ratio: 4 / 3; }
.wl-gal--a > li:nth-child(6) { grid-area: 7 / 1 / 11 / 7;  aspect-ratio: 6 / 4; }
.wl-gal--a > li:nth-child(7) { grid-area: 7 / 7 / 11 / 13; aspect-ratio: 6 / 4; }

/* ef1d3bb — 4/6, 4/3, 4/3, 5/3 → 12 × 6 units (the 5-wide tail is what isotope
   produces from premium_gallery_image_cell: 5; cols 10–12 of the second row stay empty) */
.wl-gal--b > li:nth-child(1) { grid-area: 1 / 1 / 7 / 5;  aspect-ratio: 4 / 6; }
.wl-gal--b > li:nth-child(2) { grid-area: 1 / 5 / 4 / 9;  aspect-ratio: 4 / 3; }
.wl-gal--b > li:nth-child(3) { grid-area: 1 / 9 / 4 / 13; aspect-ratio: 4 / 3; }
.wl-gal--b > li:nth-child(4) { grid-area: 4 / 5 / 7 / 10; aspect-ratio: 5 / 3; }

/* ---- W4 guía (d4aa15b, content middle, 34.091% / 65.909%) -------------------- */

.wl-guide__row {
  display: grid;
  grid-template-columns: 34.091% 65.909%;
  align-items: center;
}
/* column c03cecb margin-right 15px (10px ≤1024) */
.wl-guide__figure { margin: 0 15px 0 0; }
/* image widget d777f9a renders the 400×513 Elementor thumb at its natural size */
.wl-guide__figure img { display: block; }
/* column e904e2c padding 0 0 0 20% */
.wl-guide__body { padding-left: 20%; }
.wl-guide__title {
  font-family: kikuta, sans-serif;
  font-size: 1.5em;              /* 25.5px — h2 token, no Elementor size override */
  font-weight: 700;
  line-height: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;
}
.wl-guide__text { color: #797C7F; }   /* widget 30623cf, explicit #797C7F */
.wl-guide__text p + p { margin-top: 1.3em; }

/* ---- W5 stats (421ccc4 → 861a4c8 → 68f1721 → 98d8697, four col-25) ---------- */

/* column 68f1721 margin-left 15px (0 ≤1024); inner section 98d8697 padding 29px 0 */
.wl-stats__band { margin-left: 15px; padding: 29px 0; }
.wl-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* column padding: 33465e9 / d328e6f / 0e16d56 are 0 15px 0 0, e1d2c50 is 0 0 0 15px;
   the heading widget is elementor-widget__width-auto with padding-right 10px */
.wl-stats > li:nth-child(1),
.wl-stats > li:nth-child(3),
.wl-stats > li:nth-child(4) { padding-right: 15px; }
.wl-stats > li:nth-child(2) { padding-left: 15px; }
/* source markup is <h2><a href="#">…</a></h2>; the href is a placeholder, dropped */
.wl-stat {
  padding-right: 10px;
  font-family: kikuta, sans-serif;
  font-size: 1.5em;              /* 25.5px — h2 token */
  font-weight: 700;
  line-height: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;
}
/* spacers 11px + 12px below each stat */
.wl-stats > li > .spacer { width: 100%; }

/* ---- W6 accordion (cd4222a) -------------------------------------------------- */

/* Elementor's stock accordion chrome: 1px #d5d8dc frame, 15px 20px padding, bold title,
   1px top border on the panel, fa-plus / fa-minus at 1.5em on the left.
   ponytail: <details>/<summary> is the same toggle with no JS, and the icons are the
   +/− glyphs instead of pulling in Font Awesome for two characters. */
.wl-acc { text-align: start; }
.wl-acc > details { border: 1px solid #d5d8dc; }
.wl-acc > details + details { border-top: none; }
.wl-acc summary {
  display: flex;
  align-items: baseline;
  gap: .5em;
  padding: 15px 20px;
  font-weight: 700;
  line-height: 1;
  color: #000000;
  cursor: pointer;
  list-style: none;
}
.wl-acc summary::-webkit-details-marker { display: none; }
.wl-acc summary::before {
  content: "+";
  flex: none;
  width: 1.5em;
  font-weight: 400;
}
.wl-acc details[open] summary::before { content: "\2212"; }
.wl-acc__body {
  padding: 15px 20px;
  border-top: 1px solid #d5d8dc;
  line-height: 1.3;
}
/* main.css strips list markers globally; these panels are real bulleted lists */
.wl-acc__body ul { padding-left: 1.4em; list-style: disc; }
.wl-acc__body li + li, .wl-acc__body li > ul { margin-top: .4em; }
.wl-acc__body p { margin: 0; }
.wl-acc__body p + p { margin-top: .4em; }

/* ---- ≤1024px ---------------------------------------------------------------- */

@media (max-width: 1024px) {
  .wl-hide-t { display: none; }
  .wl-hero::before { background: rgba(0, 0, 0, .87); }
  /* column bd45a5e padding 50px */
  .wl-hero .container { padding: 50px; }
  .wl-hero__title { font-size: 42px; }

  /* the metro grids fall back to two square columns */
  .wl-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* !important beats the per-cell rules above, which are one class more specific */
  .wl-gal > li { grid-area: auto !important; aspect-ratio: 1 !important; }

  /* both columns of d4aa15b go full width */
  .wl-guide__row { grid-template-columns: 100%; }
  .wl-guide__figure { margin: 0 10px 0 0; padding: 20px 15px; }
  .wl-guide__body { padding: 10px 15px; }

  .wl-stats__band { margin-left: 0; }
  .wl-stats { grid-template-columns: 100%; }
  .wl-stats > li:nth-child(2) { padding-left: 0; }
}

/* ---- ≤767px ----------------------------------------------------------------- */

@media (max-width: 767px) {
  .wl-hero .container { padding: 25px; }
  .wl-hero__title { font-size: 36px; }

  .wl-respira__title { font-size: 36px; }
  .wl-steps { grid-template-columns: 100%; }

  /* one column, images at their own aspect so nothing gets cropped away */
  .wl-gal { grid-template-columns: 100%; }
  .wl-gal > li { aspect-ratio: auto !important; }
  .wl-gal img { position: static; height: auto; }

  /* columns 33465e9 / d328e6f / 0e16d56 → 0, e1d2c50 → 20px 0 0 0 */
  .wl-stats > li:nth-child(n) { padding: 0; }
  .wl-stats > li:nth-child(2) { padding-top: 20px; }

  /* column c03cecb → 50% width; e904e2c padding 30px 10px 60px */
  .wl-guide__figure { width: 50%; margin: 0; padding: 0 10px; }
  .wl-guide__body { padding: 30px 10px 60px; }
}