/* PANAMA CROSSROADS — /gastro-2025/ (GASTRO – 2025). Loads after main.css.
   Values extracted from the inline Elementor CSS of reference/page-gastro-2025.html
   (post 25800) plus its two tab templates (25419 = GENERAL, 25422 = VIP).
   Root font-size is 17px, so em → px: 1em=17, 1.7em=28.9, 2em=34, 2.2em=37.4, 5em=85.
   Theme defaults (reference/css/__custom.css) + the page's wp-custom-css:
     h1 kikuta 2.6em/1.2127em 400 uppercase, ls 1px (wp-custom-css beats the 2px token)
     h2 kikuta 1.5em/1.1em bold uppercase ls 1px (wp-custom-css beats 2.353em/400)
     h3 config 1.882em/1.1em 600 uppercase ls 1px
     p  config 1rem/1em, margin-bottom 1.3em
   Elementor forces `margin:0; line-height:1` on .elementor-heading-title.
   Schemes: hero = scheme_light, G2–G4 = scheme_default (text #6D6F72, text_dark #000),
   G5/G6 carry no scheme and inherit the body's scheme_dark (text_dark #FFFFFF). */

@font-face {
  font-family: ochighway;
  src: url(/fonts/OCHighwayVAR2-Series5G-1-2.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- G1 hero (58a864f, gradient, container min-height 855px, items middle) --- */

.gs-hero { background: linear-gradient(180deg, #FB4D08 0%, #3CE3DC 100%); }
.gs-hero .container { min-height: 855px; justify-content: center; }

.gs-hero__logo { text-align: center; }
.gs-hero__logo img { display: block; width: 8%; margin-inline: auto; }

/* trx_sc_title h1 → .sc_item_title_text carries the explicit 56px, .sc_item_title #FFF */
.gs-hero__title {
  margin: 0;
  font-family: kikuta, sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2127em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

/* three heading widgets with an h2 tag (95f1f83 / 03ae4aa / fc8104e): body copy in
   OCHighway, 22px (23px for the closing line), transform none, 1.6em, white.
   Marked up as <p> — they are prose, and the page already has its one h1. */
.gs-hero__copy {
  font-family: ochighway, sans-serif;
  font-size: 22px;
  font-weight: 700;            /* wp-custom-css h2 { font-weight: bold } */
  line-height: 1.6em;
  text-align: center;
  color: var(--white);
}
.gs-hero__copy--23 { font-size: 23px; }

/* ---- G2 six flavours (8ad9631, stretched, bg #FFFFFF, padding 2em 0 5em) ----- */

.gs-flavors {
  background: #FFFFFF;
  color: #6D6F72;
  padding: 2em 0 5em;
}
.gs-flavors__title {
  margin: 0;
  font-family: kikuta, sans-serif;
  font-size: 2.2em;            /* 37.4px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
}

/* inner sections 6eaf4ac / 231f652: three elementor-col-33, margin 2em 0.
   column-gap-extended = 15px column padding → 30px gutter. */
.gs-flavors__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 2em 0;
}
.gs-flavor { text-align: center; }             /* image-box wrapper default */
/* heading widget (h2 tag) — 1.7em/400/#FF6919 */
.gs-flavor__name {
  margin: 0;
  font-family: kikuta, sans-serif;
  font-size: 1.7em;            /* 28.9px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FF6919;
}
/* image-box title (h3 tag) — same size/weight/colour, theme h3 family + 1.1em.
   ponytail: the plugin CSS that zeroes image-box title margins was not archived with
   the reference page, so the theme h3 margins are replaced by a flat 10px gap. */
.gs-flavor__sub {
  margin: 0 0 10px;
  font-family: config, sans-serif;
  font-size: 1.7em;            /* 28.9px */
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FF6919;
}
.gs-flavor__desc { font-size: 22px; line-height: 1.8em; }

/* ---- G3 photo carousel (0eb5a40, stretched, bg #FFFFFF) --------------------- */
/* Elementor image-carousel: 3 slides on desktop, 2 tablet, 1 mobile, 20px spacing,
   arrows inside + dots outside, autoplay 5000 — the shared .carousel does all of it. */

.gs-gallery { background: #FFFFFF; }
.gs-gallery .carousel__track > li { flex-basis: calc((100% - 2 * 20px) / 3); }
/* main.css paints the dots for a dark section; this one is white */
.gs-gallery .carousel__dots button { background: rgba(0, 0, 0, .25); }
.gs-gallery .carousel__dots button[aria-selected="true"] { background: #000000; }

/* ---- G4 guest chefs (23f132f, stretched, bg #FFFFFF) ------------------------ */

.gs-chefs { background: #FFFFFF; color: #6D6F72; }

/* icon-box 2cc3985: position inline-start, align-items:start, gap 15px;
   mobile-position block-start stacks it ≤767px. */
.gs-chefs__head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.gs-chefs__icon {
  flex: none;
  width: 32.527px;
  height: 32.527px;
  fill: #000000;
}
.gs-chefs__title {                             /* icon-box title, h3 tag → theme h3 */
  margin: 0;
  font-family: config, sans-serif;
  font-size: 1.882em;          /* 32px */
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;
}
.gs-chefs__subtitle {
  margin: 6px 0 0;
  font-size: 1em;
  line-height: 1.45;           /* theme p is 1em; this wraps at 375px */
}
/* text-editor 84b96d5 — theme p, left aligned in the column */
.gs-chefs__intro {
  font-size: 1em;
  line-height: 1.45;           /* theme p is 1em; unreadable for multi-line copy */
}

/* sc_team 3d-simple, trx_addons_column-1_3, gutter --theme-var-grid_gap (30px).
   ponytail: the widget container's -45px bottom margin exists only to swallow the
   trailing column padding of the last row, which this grid never adds. */
.gs-chefs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.gs-chef__img {
  display: block;
  width: 100%;
  aspect-ratio: 570 / 696;     /* muzicon-thumb-rectangle */
  object-fit: cover;
}
/* wp-custom-css: .sc_team_3d-simple .sc_team_item_title (family stays the h4 token) */
.gs-chef__name {
  margin: 12px 0 0;
  font-family: config, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: #000000;
}

/* ---- G5 "Elige tu Camino de Sabores" (ceb9ae1, t8.svg cover, min-height 608) - */

.gs-choose {
  background: url(/assets/t8.svg) center center / cover no-repeat;
}
.gs-choose .container { min-height: 608px; justify-content: center; }
.gs-choose__title {
  margin: 0;
  font-family: kikuta, sans-serif;
  font-size: 53px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);         /* scheme_dark --theme-color-text_dark */
}

/* ---- G6 ticket tiers (0c250d2, bg #FFFFFF, container 881px, padding 1vw 0 6vw) */

.gs-tiers { background: #FFFFFF; padding: 1vw 0 6vw; }
.gs-tiers .container { max-width: 881px; }

/* Each tier is an eael-adv-tabs widget holding a single toggle tab whose label is the
   banner image (13.png / 10.png as a cover background behind an empty title span).
   ponytail: <details> is that toggle with no JS, and the banner is carried as a real
   <img> so its wording stays readable and available to assistive tech. */
.gs-tier { padding: 2px; }
.gs-tier__head { display: block; cursor: pointer; list-style: none; }
.gs-tier__head::-webkit-details-marker { display: none; }
.gs-tier__head img { display: block; width: 100%; }

/* rows: inner sections, 20px padding, 1px #FFFFFF bottom border; the heading widgets
   inside use a span tag → body size, weight 500, colour #000. */
.gs-tier__list > li {
  padding: 20px;
  border-bottom: 1px solid #FFFFFF;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.3;            /* Elementor forces 1; these rows wrap even at 881px */
  color: #000000;
}
.gs-tier__list > li.is-hl { background: #F4FA70; }

/* price row 57a26d5: col-50 pair, 20%/80% ≥768px, 50/50 below; the price column is
   --e-global-color-2d80ac0 (#04D3CB) with 2px of column margin. */
.gs-tier__buy { display: flex; align-items: center; }
.gs-tier__price {
  flex: 0 0 calc(20% - 4px);
  margin: 2px;
  padding: 2px 0;
  background: #04D3CB;
  font-family: ochighway, sans-serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: #FFFFFF;
}
.gs-tier__buy a { margin: 2px; }
.gs-tier__buy img { display: block; width: 184px; }

/* ---- responsive: tablet ≤1024px -------------------------------------------- */

@media (max-width: 1024px) {
  .gs-gallery .carousel__track > li { flex-basis: calc((100% - 20px) / 2); }
  .gs-chefs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-tier { padding: 0; margin: 18px; }
}

/* ---- responsive: mobile ≤767px --------------------------------------------- */

@media (max-width: 767px) {
  .gs-hero .container { min-height: 0; padding-block: 40px; }
  .gs-hero__logo img { width: 30%; }   /* 8% of 375px is a 30px speck */
  .gs-hero__title { font-size: 36px; line-height: 1em; padding: 25px; }
  .gs-s1 { --h: 25px !important; }
  .gs-hero__copy, .gs-hero__copy--23 { font-size: 15px; }

  .gs-flavors__row { grid-template-columns: 1fr; margin: 1em 0 0; }
  .gs-flavors__row + .gs-flavors__row { margin: 0; }

  .gs-gallery .carousel__track > li { flex-basis: 100%; }

  .gs-chefs__head { flex-direction: column; }
  .gs-chefs__grid { grid-template-columns: 1fr; }

  .gs-choose .container { min-height: 380px; }
  .gs-choose__title { font-size: 34px; }

  .gs-tier { margin: 12px; }
  .gs-tier__list > li { padding: 14px; }
  .gs-tier__price { flex-basis: calc(50% - 4px); font-size: 24px; }
}