/* ===================================================================
   Hablemos de Azúcar — Design Tokens
   -------------------------------------------------------------------
   Source of truth: /DESIGN.md (project root)

   This file translates the brand spec into runtime CSS:
   1) :root defines the brand tokens as CSS custom properties.
   2) We re-bind Agron's template variables to point at HDA tokens.
   3) Targeted overrides for selectors that hardcode values in the
      template SCSS (e.g. .link-btn font-family).

   Load order in base.html:
     bootstrap.min.css → font-awesome.css → ...other agron css...
     → main.css (compiled Agron)
     → THIS FILE (must come last to win specificity ties)
   =================================================================== */

/* -------------------------------------------------------------------
   1. Root tokens — every value documented in DESIGN.md frontmatter
   ------------------------------------------------------------------- */
:root {
  /* ---- Brand palette (from the official manual) ---- */
  --hda-color-primary:        #94c04e;   /* PMS 363 C — brand green (botones / acento) */
  --hda-color-primary-soft:   #c8e896;
  --hda-color-surface:        #FFFFFF;
  --hda-color-surface-alt:    #EDF2EC;   /* soft green section bg */
  --hda-color-surface-cream:  #EFEFEF;   /* light gray section bg (section-bg-2) */
  --hda-color-heading:        #0A2803;   /* deep green for titles */
  --hda-color-body:           #5C6672;   /* body copy */
  --hda-color-border:         #CAD2D2;
  --hda-color-black:          #000000;

  /* ---- Typography ---- */
  /* Web equivalents of Museo Sans Rounded + Frutiger Condensed */
  --hda-font-body:        'Nunito', sans-serif;
  --hda-font-display:     'Barlow Condensed', sans-serif;
  --hda-font-icon:        'Font Awesome 5 Pro';

  /* ---- Radius ---- */
  --hda-radius-sm:    8px;
  --hda-radius-md:    12px;
  --hda-radius-lg:    16px;
  --hda-radius-xl:    28px;
  --hda-radius-btn:   82px;
  --hda-radius-pill:  9999px;

  /* ---- Spacing ---- */
  --hda-space-section:        90px;
  --hda-space-container-max:  1780px;
  --hda-space-rhythm-sm:      16px;
  --hda-space-rhythm-md:      24px;
  --hda-space-rhythm-lg:      40px;
  --hda-space-card-gap:       32px;

  /* ---- Elevation ---- */
  --hda-shadow-card: 0 4px 25px rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------------------------
   2. Re-bind Agron template variables to HDA tokens

   The Agron template's `_variables.scss` exposes these CSS custom
   properties at runtime. Re-binding here means we do NOT have to
   recompile the template — every component that uses var(--theme-color)
   automatically renders in HDA green.
   ------------------------------------------------------------------- */
:root {
  --theme-color:    var(--hda-color-primary);        /* was #5B8C51 */
  --theme-color-2:  #e1fc7c;
  --header:         var(--hda-color-heading);        /* was #0A2803 — already brand-compatible */
  --text:           var(--hda-color-body);           /* was #5C6672 — already brand-compatible */
  --border:         var(--hda-color-border);
  --bg:             var(--hda-color-surface);
  --bg-2:           var(--hda-color-surface-cream);
  --white:          var(--hda-color-surface);
  --black:          var(--hda-color-black);
  ---box-shadow:    var(--hda-shadow-card);
}
body.hda-page-atletas {
  --bg: var(--hda-color-surface-alt);
}

/* -------------------------------------------------------------------
   3. Targeted overrides for selectors that hardcode values in the
      template SCSS (these don't use the variables above).
   ------------------------------------------------------------------- */

/* `.link-btn` hardcodes font-family: "DM Sans" in _buttons.scss.
   We do NOT want DM Sans in HDA — single-family Nunito only.
   Both button classes also hardcode `text-transform: capitalize` which
   forces Title Case on every label; we want sentence case per the brand
   manual, so we reset it here. */
.theme-btn,
.link-btn {
  text-transform: none;
}
/* Todos los `.theme-btn` (Agron): `main.css` pinta el fondo con `var(--theme-color)` y el
   ripple del hover con `var(--theme-color-2)` en el `::before`. Variables locales en el
   propio botón unifican colores en cualquier sección (CTA, testimonial, swiper, etc.)
   sin tocar el vendor ni añadir clases en el HTML. */
.theme-btn {
  --theme-color: #94c04e;
  --theme-color-2: #e1fc7c;
}
.hero-4 .hero-button .theme-btn {
  background-color: #94c04e;
  color: var(--white);
}
.hero-4 .hero-button .theme-btn::before {
  background-color: #e1fc7c;
}
.hero-4 .hero-button .theme-btn:hover {
  color: var(--header);
}
.hero-4 .hero-button .theme-btn.style-2::before {
  background-color: #e1fc7c;
}
.link-btn {
  font-family: var(--hda-font-body);
}

/* Header search-form fixes (template-4): the input has no padding-right,
   so the magnifier button overlaps the placeholder text. Also widen a bit
   so common queries don't truncate. */
.header-section-4 .header-4 .header-right-icon .search-form {
  max-width: 260px;
}
.header-section-4 .header-4 .header-right-icon .search-form input {
  padding-right: 32px;
}

/* Header container width — Agron forces `.header-section-4 .container` to
   `max-width: 1785px` (line 1879 of main.css), making the menu wider than
   the rest of the page. Restore Bootstrap's default `.container` widths
   per breakpoint so the menu aligns flush with the body content (hero
   banner, blog cards, sidebar, etc.). */
.header-section-4 .container {
  max-width: 100%;
}
@media (min-width: 576px)  { .header-section-4 .container { max-width: 540px; } }
@media (min-width: 768px)  { .header-section-4 .container { max-width: 720px; } }
@media (min-width: 992px)  { .header-section-4 .container { max-width: 960px; } }
@media (min-width: 1200px) { .header-section-4 .container { max-width: 1140px; } }
@media (min-width: 1400px) { .header-section-4 .container { max-width: 1320px; } }

/* Main menu casing: the template forces title-case on desktop
   (`.header-main .main-menu ul li a` → text-transform: capitalize) and
   ALL CAPS on the mobile drawer (`.mean-container .mean-nav ul li a` →
   text-transform: uppercase). HDA copy is sentence case in Mexican
   Spanish (e.g. "Historias de vida", not "Historias De Vida" or
   "HISTORIAS DE VIDA"). Render labels exactly as written in the HTML. */
.header-main .main-menu ul li a,
.mean-container .mean-nav ul li a {
  text-transform: none;
}

/* Sidebar `widget_categories`: minimalist look. Default Agron boxes each
   item with a 1px border, 17px vertical padding, and 12px gap — for the
   nested HDA category tree that's too heavy. Strip the border, tighten
   padding, and shrink the gap so the list reads as a single clean column.
   Scoped to `.main-sidebar` so other contexts (shop, etc.) keep defaults. */
.main-sidebar .widget_categories ul li a {
  border: 0;
  margin-bottom: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Recientes (sidebar `popular-posts`): Agron forces title-case on h5 + the
   date — HDA copy is sentence case in Mexican Spanish. Same fix pattern as
   the main menu casing override above. */
.main-sidebar .popular-posts .single-post-item .post-content h5,
.main-sidebar .popular-posts .single-post-item .post-content .post-date {
  text-transform: none;
}

/* Site-wide heading rhythm: HDA prefers tighter editorial line-height than
   Agron's default airy 1.4-1.5. Applied to h2-h6 (skipping h1 because
   Agron's hero h1 already sets `line-height: 114%`). NOTE: this is a
   low-specificity baseline — Agron rules that explicitly set their own
   line-height (e.g., `.blog-wrapper .single-blog-post .post-content h2`)
   will still win and need targeted overrides if they too feel too airy. */
h2, h3, h4, h5, h6 {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Listing post-card excerpt: cap at 3 visible lines via CSS line-clamp so
   every card stays visually uniform regardless of how long the source
   `meta_description` (or fallback `content` truncation) ends up being. */
.blog-wrapper .single-blog-post .post-content > p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sidebar `popular-posts` thumb: Agron defaults to a 95x95 square, which
   crops landscape-oriented images (most blog thumbs are designed for IG
   with text near the edges) too aggressively. Slightly landscape (11:8)
   preserves more horizontal content while keeping the row compact. */
.main-sidebar .popular-posts .single-post-item .thumb {
  width: 110px;
  height: 80px;
}

/* Listing card hero image: Agron's `.post-featured-thumb` defaults to a
   fixed `height: 462px` + `bg-cover`, which forces every source image to
   crop to that ratio. HDA blog uses real <img> tags with intrinsic
   aspect-ratio, so the container shrink-wraps each image perfectly — no
   crop, no letterbox, no distortion. Card heights vary by image (editorial
   feel, not tile-grid), which is the intended trade-off. */
.blog-wrapper .single-blog-post .post-featured-thumb {
  height: auto;
  background: none;
  display: block;
  overflow: hidden;
}
.blog-wrapper .single-blog-post .post-featured-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* Article hero banner — featured image on the post detail page. Lives
   inside Bootstrap's `.container` so it aligns flush with the header menu
   (same left/right edges, fully responsive). The <img> is intrinsic-ratio
   so each post displays perfectly: no crop, no letterbox, no overlay. */
.hda-post-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
@media (max-width: 575px) {
  .hda-post-hero img { border-radius: 0; }
}

/* Tighten the gap between the hero banner and the body content. Agron's
   `.section-padding` adds 120px (100/80 responsive) of top padding, which
   creates a huge void after the hero. Adjacent-sibling selector scopes
   the override to "blog-wrapper that immediately follows hda-post-hero" —
   doesn't affect the listing or any other page. */
.hda-post-hero + .blog-wrapper.section-padding {
  padding-top: 40px;
}
@media (max-width: 991px) {
  .hda-post-hero + .blog-wrapper.section-padding {
    padding-top: 28px;
  }
}

/* "Artículos relacionados" cards (post detail page). Tweaks for the
   `.news-section .news-box-items` cards that sit below the article body. */

/* Date overlay: text in white for legibility on the brand-green circle. */
.news-section .news-box-items .news-image .post-date h4,
.news-section .news-box-items .news-image .post-date p {
  color: var(--white);
}

/* Card uniformity: flex column so the CTA button always anchors at the
   bottom regardless of how long the title wraps. Title clamps at 2 lines
   so all cards reserve the same vertical block. */
.news-section .news-box-items {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-section .news-box-items .news-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
.news-section .news-box-items .news-content h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
}
.news-section .news-box-items .news-content .theme-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Article title in body context: large editorial heading anchoring the
   piece. Left-aligned to match the body copy below; sits above the post
   metadata (author/date/category). */
.hda-post-title {
  margin: 8px 0 24px;
  font-family: var(--hda-font-body);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hda-color-heading);
  text-align: left;
}

/* Article body editorial rhythm: Agron's global reset (`p { margin: 0 }`)
   collapses CMS-rendered HTML into a wall of text — no breathing room
   between paragraphs, headings, lists or quotes. Restore proper editorial
   spacing within the post-detail body only (the listing card's `<p>` keeps
   the line-clamp behavior we already set). */
.blog-wrapper .single-blog-post.post-details .post-content p {
  margin-bottom: 1.2em;
}
.blog-wrapper .single-blog-post.post-details .post-content h2,
.blog-wrapper .single-blog-post.post-details .post-content h3,
.blog-wrapper .single-blog-post.post-details .post-content h4 {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}
.blog-wrapper .single-blog-post.post-details .post-content ul,
.blog-wrapper .single-blog-post.post-details .post-content ol {
  margin-bottom: 1.4em;
  padding-left: 1.4em;
}
.blog-wrapper .single-blog-post.post-details .post-content li + li {
  margin-top: 0.4em;
}
/* Agron pinta DOS marcadores en `.post-content ul li`: `list-style-type: disc`
   (bullet nativo) y un `::before` con el check de FontAwesome. Apagamos el
   bullet nativo en `ul` y dejamos sólo el check verde para que el ítem tenga
   un único marcador. La `ol` mantiene su `list-style: decimal`. */
.blog-wrapper .single-blog-post.post-details .post-content ul,
.blog-wrapper .single-blog-post.post-details .post-content ul li {
  list-style: none;
}
.blog-wrapper .single-blog-post.post-details .post-content blockquote {
  margin: 1.6em 0;
  padding: 8px 0 8px 20px;
  border-left: 3px solid var(--hda-color-primary);
  font-style: italic;
}
/* Inline images inside the article body: keep them within the column and
   add a subtle radius so they read as intentional. */
.blog-wrapper .single-blog-post.post-details .post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hda-radius-md);
  margin: 1em 0;
}

/* Tree markers for the category list. Visual language:
     - Root categories (no `data-depth`):    short 8px dash (─)
     - Nested children (any depth):          longer 14px dash, indented to
                                             match each level's text origin
   The marker is drawn as a single ::before horizontal line, same color
   for both levels (--hda-color-border) so the system reads as one. */
.main-sidebar .widget_categories ul li:not([data-depth]) a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  width: 8px;
  height: 1px;
  background: var(--hda-color-border);
  transform: translateY(-50%);
  pointer-events: none;
}
.main-sidebar .widget_categories ul li[data-depth] a::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 1px;
  left: calc(20px + (var(--depth, 1) - 1) * 18px);
  background: var(--hda-color-border);
  transform: translateY(-50%);
  pointer-events: none;
}


/* Value-cards (Service Feature section): force consistent 3:4 ratio across
   the 3 cards so a single horizontal image (e.g. atletas) doesn't break the
   row height. The img is forced to cover the card area so it crops gracefully
   instead of stretching. */
.service-feature-section-4 .service-feature-thumb-items-4 {
  aspect-ratio: 3 / 4;
  height: auto;
}
.service-feature-section-4 .service-feature-thumb-items-4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Visible gap between the marquee and the dark-green About block. Without it
   the marquee outline text sits flush against the green fill. The extra
   padding-top pushes the eyebrow ("Sobre el proyecto") away from the top
   edge of the green fill so the section breathes. */
.about-section-4 {
  margin-top: 60px;
  padding-top: 180px;
  --theme-color-2: #c6dfaa;
}
@media (max-width: 991px) {
  .about-section-4 {
    padding-top: 120px;
  }
}

/* Testimonial (home-4): `.section-title span` in main.css sets color #404A3D
   globally; testimonial-wrapper-4 uses background var(--theme-color-2) per
   _testimonial.scss. Scope the light eyebrow here only — do not edit main.css
   (vendor; see project-docs/AGRON_TEMPLATE_GUIDE, HDA.md). */
.testimonial-wrapper-4 .testimonial-content .section-title span {
  color: var(--white);
}

/* Marquee separator: icono de caña (SVG) en lugar del asterisco del template
   o del icono Font Awesome. Alineado con el texto display del marquee. */
.marquee-section .marquee .text img {
  display: inline-block;
  width: 56px;
  height: 56px;
  margin-right: 24px;
  vertical-align: middle;
  object-fit: contain;
}

/* The `titlefont` SCSS mixin references League Spartan, which the
   template never imports. Anything using it silently falls back to
   sans-serif. We replace it with our display family. */
[class*="title"] {
  /* deliberately scoped; component classes with explicit fonts win */
}

/* -------------------------------------------------------------------
   4. Body baseline (in case Agron's _typography.scss is not loaded
      or to win cascade ties)
   ------------------------------------------------------------------- */
body {
  font-family: var(--hda-font-body);
  color: var(--hda-color-body);
  background-color: var(--hda-color-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hda-font-body);
  color: var(--hda-color-heading);
}

/* Display-family override for elements that opt-in via a class. */
.hda-display,
.hda-display * {
  font-family: var(--hda-font-display);
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------
   5. Brand artifacts — taglines pulled from the manual
   ------------------------------------------------------------------- */
.hda-tagline-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--hda-radius-pill);
  background-color: var(--hda-color-primary-soft);
  color: var(--hda-color-heading);
  font-family: var(--hda-font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------
   Home — Historias de vida (team-section-4): overlay + play, clic abre
   Magnific iframe YouTube. El ::after del theme es solo brillo; sin
   pointer-events no bloquea el enlace.
   ------------------------------------------------------------------- */
.team-box-items-4 .team-image::after {
  pointer-events: none;
}

.team-box-items-4 .team-image .hda-historia-video-trigger {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 28px;
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.team-box-items-4 .team-image .hda-historia-video-trigger__overlay {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 14, 0.05) 0%,
    rgba(8, 22, 14, 0.18) 45%,
    rgba(8, 22, 14, 0.55) 100%
  );
  opacity: 0.55;
  transition: opacity 0.35s ease, background 0.35s ease;
  pointer-events: none;
}

.team-box-items-4 .team-image .hda-historia-video-trigger__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--hda-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding-left: 0.2em;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.team-box-items-4 .team-image .hda-historia-video-trigger:hover .hda-historia-video-trigger__overlay,
.team-box-items-4 .team-image .hda-historia-video-trigger:focus-visible .hda-historia-video-trigger__overlay {
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 14, 0.15) 0%,
    rgba(8, 22, 14, 0.35) 40%,
    rgba(8, 22, 14, 0.72) 100%
  );
}

.team-box-items-4 .team-image .hda-historia-video-trigger:hover .hda-historia-video-trigger__play,
.team-box-items-4 .team-image .hda-historia-video-trigger:focus-visible .hda-historia-video-trigger__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.team-box-items-4 .team-image .hda-historia-video-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(148, 192, 78, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  .team-box-items-4 .team-image .hda-historia-video-trigger__overlay,
  .team-box-items-4 .team-image .hda-historia-video-trigger__play {
    transition: none;
  }

  .team-box-items-4 .team-image .hda-historia-video-trigger:hover .hda-historia-video-trigger__play,
  .team-box-items-4 .team-image .hda-historia-video-trigger:focus-visible .hda-historia-video-trigger__play {
    transform: translate(-50%, -50%);
  }
}
.footer-section-4 {
  background-color: var(--hda-color-surface-alt);
}

.gallery-section-3 {
  background-color: var(--hda-color-surface);
}

/* -------------------------------------------------------------------
   MIGRACION Videos (/videos) — miniatura con play + título; popup vía .video-popup
   ------------------------------------------------------------------- */
.hda-page-videos .hda-video-group + .hda-video-group {
  margin-top: clamp(34px, 5vw, 64px);
}

.hda-page-videos .hda-video-group-title {
  margin-bottom: 22px;
  color: #0f3321;
  font-family: var(--hda-font-heading);
  font-size: clamp(26px, 2.5vw, 40px);
  font-weight: 700;
  line-height: 1.12;
}

.hda-page-videos .hda-video-group-kicker {
  color: var(--hda-color-primary);
}

.hda-page-videos .hda-video-card .news-image.hda-video-thumb {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 10px 28px rgba(14, 27, 18, 0.14);
}

.hda-page-videos .hda-video-thumb-link {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.hda-page-videos .hda-video-thumb img {
  width: 100%;
  display: block;
  border-radius: 16px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  height: auto;
  transition: transform 0.4s ease;
}

.hda-page-videos .hda-video-thumb-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(8, 22, 14, 0.12) 0%,
    rgba(8, 22, 14, 0.38) 48%,
    rgba(8, 22, 14, 0.78) 100%
  );
  pointer-events: none;
}

.hda-page-videos .hda-video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--hda-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding-left: 0.25em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hda-page-videos .hda-video-thumb-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.75rem 14px 14px;
  color: #fff;
  font-family: var(--hda-font-heading);
  font-size: clamp(0.875rem, 1.35vw, 1.05rem);
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.hda-page-videos .hda-video-thumb-link:hover img,
.hda-page-videos .hda-video-thumb-link:focus-visible img {
  transform: scale(1.04);
}

.hda-page-videos .hda-video-thumb-link:hover .hda-video-thumb-play,
.hda-page-videos .hda-video-thumb-link:focus-visible .hda-video-thumb-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
}

.hda-page-videos .hda-video-thumb-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(148, 192, 78, 0.65);
  border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .hda-page-videos .hda-video-thumb img,
  .hda-page-videos .hda-video-thumb-play {
    transition: none;
  }

  .hda-page-videos .hda-video-thumb-link:hover img,
  .hda-page-videos .hda-video-thumb-link:focus-visible img {
    transform: none;
  }

  .hda-page-videos .hda-video-thumb-link:hover .hda-video-thumb-play,
  .hda-page-videos .hda-video-thumb-link:focus-visible .hda-video-thumb-play {
    transform: translate(-50%, -50%);
  }
}

/* -------------------------------------------------------------------
  Estilos de Iniciativas MIGRACION (/iniciativas-de-comunicacion) — listado campañas
   ------------------------------------------------------------------- */
.hda-page-iniciativas .hda-iniciativas-page-list {
  padding-bottom: clamp(56px, 8vw, 100px);
}

.hda-page-iniciativas .hda-iniciativas-page-item {
  padding: clamp(32px, 4.5vw, 52px) 0;
  border-bottom: 1px solid #e5e7e8;
}

.hda-page-iniciativas .hda-iniciativas-page-item:last-child {
  border-bottom: 0;
}

.hda-page-iniciativas .hda-iniciativas-page-copy {
  position: relative;
}

.hda-page-iniciativas .hda-iniciativas-page-num {
  font-family: var(--hda-font-heading);
  font-size: clamp(3.25rem, 11vw, 6.5rem);
  font-weight: 800;
  line-height: 0.95;
  color: rgba(14, 27, 18, 0.09);
  display: block;
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
  user-select: none;
}

.hda-page-iniciativas .hda-iniciativas-page-name {
  font-family: var(--hda-font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--hda-color-primary);
  line-height: 1.25;
  max-width: 22rem;
}

.hda-page-iniciativas .hda-iniciativas-page-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.15rem;
  padding: 0.55rem 1.65rem;
  border-radius: 999px;
  background: #0e0e0e;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.hda-page-iniciativas .hda-iniciativas-page-cta:hover,
.hda-page-iniciativas .hda-iniciativas-page-cta:focus-visible {
  background: #2a2a2a;
  color: #fff;
}

.hda-page-iniciativas .hda-iniciativas-page-thumb {
  border-radius: 20px;
  overflow: hidden;
  background: #e8ebe8;
  line-height: 0;
  box-shadow: 0 12px 40px rgba(14, 27, 18, 0.08);
}

.hda-page-iniciativas .hda-iniciativas-page-thumb:focus-visible {
  outline: 2px solid var(--hda-color-primary);
  outline-offset: 4px;
}

.hda-page-iniciativas .hda-iniciativas-page-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

@media (max-width: 991.98px) {
  .hda-page-iniciativas .hda-iniciativas-page-copy {
    text-align: center;
  }

  .hda-page-iniciativas .hda-iniciativas-page-name {
    margin-left: auto;
    margin-right: auto;
  }

  .hda-page-iniciativas .hda-iniciativas-page-cta {
    margin-left: auto;
    margin-right: auto;
  }
}

.hda-deco-shape-1 img {
  width: 118px;
  height: auto;
  max-width: 118px;
  display: block;
}

.hda-deco-shape-3 img {
  width: 128px;
  height: auto;
  max-width: 128px;
  display: block;
}

a.gallery-image-box-3 {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.gallery-image-box-3:hover .content h3 {
  color: var(--theme-color);
}