/* PANAMA CROSSROADS — /mercadito-2025/ (MERCADITO 2025). Loads after main.css.
   Values extracted from the inline Elementor CSS of reference/page-mercadito-2025.html
   (post 26616) plus the theme tokens in reference/css/__custom.css and the page's own
   <style id="wp-custom-css">. Root font-size is 17px, so em → px: 1em=17,
   1.882em=32, 1.1em=18.7.
   Theme heading defaults:
     h1 kikuta 2.6em/1.2127em 400 uppercase ls 2px  (wp-custom-css narrows ls to 1px)
     h3 config 1.882em/1.1em 600 uppercase ls 1px
     h4 config 1em/1.231em 400 none
   Both sections after the hero are scheme_default over #FFFFFF
   → --theme-color-text_dark:#000000. */

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

/* ---- M1 hero (58a864f) --------------------------------------------------- */

.mk-hero { background: linear-gradient(180deg, #FB4D08 0%, #3CE3DC 100%); }
/* min-height sits on the Elementor container, items middle */
.mk-hero .container { min-height: 855px; justify-content: center; }

/* image widget 12a7938: img{width:8%}; login.svg carries no intrinsic size, so the
   76×80 viewBox ratio is put on the tag instead of WP's bogus 1024×1024. */
.mk-hero__logo { text-align: center; }
.mk-hero__logo img { display: block; width: 8%; margin-inline: auto; }

/* trx_sc_title h1, sc_align_center, .sc_item_title{color:#FFF},
   .sc_item_title_text{font-size:1.9vw} */
.mk-hero__title {
  margin: 0;
  font-family: kikuta, sans-serif;
  font-size: 1.9vw;
  line-height: 1.2127em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

/* heading widget 95f1f83 — marked up as h2 in the source but it is a paragraph, so
   it is a <p> here. Every typographic property is set inline by Elementor. */
.mk-hero__lede {
  font-family: ochighway, sans-serif;
  font-size: 22px;
  line-height: 1.6em;
  text-transform: none;
  text-align: center;
  color: var(--white);
}

/* ---- M2 brands (b8f1b77 + 23f132f, both stretched, background #FFFFFF) --- */

.mk-brands { background: #FFFFFF; }

/* icon-box 2cc3985: wrapper align-items:start, gap:15px, position inline-start
   (elementor-mobile-position-block-start stacks it ≤767px) */
.mk-head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.mk-head__icon {
  flex: none;
  width: 32.527px;
  height: 32.527px;
  fill: #000;
}
/* title is an h3 tag in the source (h2 here — an h1→h3 jump is the only heading in
   the section); the h3 theme token supplies the type. */
.mk-head__title {
  margin: 0;
  font-family: config, sans-serif;
  font-size: 1.882em;            /* 32px */
  font-weight: 600;
  line-height: 1.1em;
  text-transform: uppercase;
  color: #000;
}

/* trx_sc_team, 11 items in trx_addons_column-1_3 + columns_padding_bottom:
   gutter is --theme-var-grid_gap (30px) in both axes, and the trailing row keeps its
   30px so the widget's own margin-bottom:-45px lands where the original does. */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding-bottom: 30px;
  margin-bottom: -45px;
}
.mk-brand 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{font-size:20px;font-weight:400;
   line-height:1.2em;margin:0;text-transform:uppercase} and the link colour is
   --theme-color-text_dark. Family falls through to the h4 token (config).
   ponytail: the trx plugin CSS that pads .sc_team_item_info was not archived with the
   reference page; 12px is the gap /artistas-2026/ settled on for the same widget. */
.mk-brand__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: #000;
}

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
  /* trx collapses 1_3 to half-width on tablet */
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

  .mk-head { flex-direction: column; }

  /* ponytail: trx would go single-column here; two keeps 11 portraits from becoming
     an 11-screen scroll. 15px gutter buys back the card width. */
  .mk-grid { gap: 15px; margin-bottom: -30px; }
  .mk-brand__name { font-size: 16px; }
}