/* PANAMA CROSSROADS — /talleres/ (TALLERES). Loads after main.css.
   Values come from the `.elementor-24186` block inside
   <style id="elementor-frontend-inline-css"> of reference/page-talleres.html, 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, 2.6em=44.2.

   The page is a single boxed section (dd2b798) with four widgets:
     0b7b062  spacer --spacer-size:50px
     97def13  icon-box, wrapper align-items:start gap:15px, h1 tag, view default
     9550fd9  spacer --spacer-size:50px
     1d59a93  wpr-media-grid, masonry, 3 cols desktop + tablet, 1 mobile, 10px gutters
     96755a7  spacer --spacer-size:50px

   Theme heading default:
     h1 kikuta 2.6em/1.2127em 400 uppercase ls 2px  (wp-custom-css narrows ls to 1px)
   Widget resets that matter:
     .elementor-icon-box-title → margin: .3em 0 (theme __plugins-full.css)
   Scheme is scheme_default over #F8F8F8 → --theme-color-text_dark:#000000. */

/* Elementor's kit sets `.elementor-widget:not(:last-child){margin-block-end:20px}`
   (--widgets-spacing:20px). main.css zeroes --gap for the home because its pixel
   landmarks demanded it; this page has no reference screenshot, so trust the kit. */
.tl-page { --gap: 20px; }

/* body.elementor-page-24186 background-color:#F8F8F8, and section dd2b798 paints the
   same colour — one rule covers both and hides main.css's body::before gradient. */
.tl-page { background: #F8F8F8; }

/* ---- icon-box 97def13 ----------------------------------------------------- */

.tl-head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
/* elementor-view-default: the SVG carries its own 32.527×32.527 and inherits the
   primary colour, which is #000000 in this kit. */
.tl-head__icon {
  flex: none;
  width: 32.527px;
  height: 32.527px;
  fill: #000;
}
.tl-head__title {
  margin: .3em 0;
  font-family: kikuta, sans-serif;
  font-size: 2.6em;              /* 44.2px */
  font-weight: 400;
  line-height: 1.2127em;
  text-transform: uppercase;
  color: #000;
}

/* ---- media grid 1d59a93 --------------------------------------------------- */

/* masonry, 3 columns desktop and tablet, 1 mobile, 10px gutters.
   ponytail: every poster is 1500×1875, so masonry and a plain grid lay out
   identically — no JS packer. The lightgallery lightbox and its hover overlay are
   dropped, as on /comunidad/: the cards are already served full-size. */
.tl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tl-grid img { display: block; width: 100%; height: auto; }

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

@media (max-width: 767px) {
  /* elementor-mobile-position-block-start stacks the icon above the title */
  .tl-head { flex-direction: column; gap: 10px; }
  /* ponytail: no font-size override — kikuta at 44.2px measures 200px, so TALLERES
     still clears a 375px viewport, and the original page shrinks nothing here. */

  .tl-grid { grid-template-columns: minmax(0, 1fr); }
}