/* hero-nav.css — the ONE nav + button system for every page whose hero
   sits on the blue gradient (home, and every "Producto" landing:
   cierre-mensual, and the rest as they ship). Extracted from what used
   to be home.css's tm-home-hero-nav-* and tm-home-btn-* rules — those were
   accidentally page-scoped, which is exactly how the nav on
   cierre-mensual ended up reusing chrome.jsx's *light* NavBar instead
   (the wrong component) and rendering broken. Every hero page must load
   this file and use <HeroNav /> (chrome.jsx) — never re-declare nav
   styles locally, and never use the light NavBar inside a gradient hero. */

.tm-hero-gradient {
  position: relative;
  overflow: hidden;
  background: linear-gradient(281deg, #2F43D6 4.97%, #263185 97.32%);
  border-radius: 0 0 75px 44px;
  color: #fff;
}

/* Hero-content entrance — shared by every hero-gradient page's own
   eyebrow/H1/sub/actions (each page keeps its own copy sizing in its own
   stylesheet, but the entrance timing/easing is one system, not one per
   page). Keyframe names kept from when this only lived in home.css. */
@keyframes tmHomeHeroRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes tmHomeHeroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmHomeHeroPop { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.94); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }

/* ── Buttons (used in the nav's CTA pill and in each page's hero-content
   actions) ──────────────────────────────────────────────────────── */
.tm-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9999px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms cubic-bezier(0.16,1,0.3,1), background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}
.tm-hero-btn i { transition: transform 240ms cubic-bezier(0.16,1,0.3,1); }
.tm-hero-btn:hover { transform: translateY(-1px); }
.tm-hero-btn:hover i { transform: translateX(2px); }
.tm-hero-btn:hover .ph-play-circle { transform: scale(1.08); }
.tm-hero-btn:active { transform: translateY(0); }
.tm-hero-btn-md { height: 40px; padding: 0 20px; font-size: 14.5px; }
.tm-hero-btn-lg { height: 48px; padding: 0 28px; font-size: 15.5px; }
/* .tm-hero-gradient prefixed on every color rule below: a page-scoped `.tm-home a
   { color }` (or any future page's equivalent) is the same specificity
   (0,1,1) as a bare `a.tm-hero-btn-white`, so whichever stylesheet loads
   last would silently win. Scoping to the always-present `.tm-hero-gradient`
   ancestor (0,2,1) makes these win regardless of load order — the same
   fix already applied once below for `.tm-drawer .tm-btn-primary`. */
.tm-hero-gradient a.tm-hero-btn-white { background: #fff; color: #2F43D6; }
.tm-hero-gradient a.tm-hero-btn-white:hover { box-shadow: 0 10px 26px rgba(11,27,43,.18); }
.tm-hero-gradient a.tm-hero-btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.tm-hero-gradient a.tm-hero-btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.85); }
.tm-hero-gradient a.tm-hero-video-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.tm-hero-video-link i { font-size: 22px; transition: transform 240ms cubic-bezier(0.16,1,0.3,1); }
.tm-hero-gradient a.tm-hero-video-link:hover { color: #fff; }
.tm-hero-video-link:hover i { transform: scale(1.08); }

/* ── Nav ─────────────────────────────────────────────────────────── */
.tm-hero-nav {
  position: relative;
  z-index: 58; /* > .tm-nav-scrim (55): el nav queda nítido sobre el overlay */
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 44px;
}
.tm-hero-nav-logo { display: flex; align-items: center; }
.tm-hero-nav-logo img { height: 19px; width: auto; display: block; }
.tm-hero-nav-links { display: flex; gap: 14px 36px; align-items: center; flex-wrap: wrap; min-width: 0; }
/* Direct-child selector — the dropdown panels (.tm-nav-dropdown-item) also
   nest <a> tags in here, but they sit on a white panel and need their own
   (dark) color, not the hero's on-dark link color. */
.tm-hero-gradient .tm-hero-nav-links > a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color 200ms ease; }
.tm-hero-gradient .tm-hero-nav-links > a:hover { color: #fff; }
.tm-hero-nav-dropdown-trigger { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color 200ms ease; }
.tm-hero-nav-dropdown-trigger:hover, .tm-hero-nav-dropdown-trigger.is-open { color: #fff; }
/* The dropdown panel itself stays the same light surface as the rest of
   the site's nav dropdowns (.tm-nav-dropdown, .tm-nav-dropdown-panel,
   landing.css) — only the trigger needs on-dark styling. */
.tm-hero-nav-actions { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }

/* ES/EN toggle, on-dark — adapted from .tm-lang (landing.css) for the hero's
   dark gradient background. A sliding pill (::before) replaces the old
   per-button background cross-fade — one indicator gliding across reads
   as smoother than two overlapping fades. */
.tm-hero-nav-actions .tm-lang {
  position: relative;
  display: inline-flex;
  background: rgba(255,255,255,.1);
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}
.tm-hero-lang-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11,15,20,.18);
  transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.tm-hero-lang-toggle.is-en::before { transform: translateX(100%); }
.tm-hero-nav-actions .tm-lang button {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  height: 24px;
  padding: 0 9px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: color 260ms ease;
}
.tm-hero-nav-actions .tm-lang button[aria-current="true"] { color: #2F43D6; }
@media (prefers-reduced-motion: reduce) {
  .tm-hero-lang-toggle::before { transition: none; }
}

/* Mobile hamburger — on-dark variant of landing.css's .tm-nav-hamburger,
   hidden on desktop where the nav links/actions show inline. */
.tm-hero-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.tm-hero-hamburger:hover { background: rgba(255,255,255,.12); }
.tm-hero-hamburger span { display: block; height: 2px; border-radius: 2px; background: #fff; }

/* landing.css's .tm-drawer-actions .tm-btn-primary would otherwise lose to
   whatever a./h1-5 rule a hero page's own stylesheet declares — keep the
   drawer's own CTA readable regardless of which hero page it's on. */
.tm-drawer .tm-btn-primary { color: #fff; }

/* Tramo intermedio: entre 1240 y 1365 el nav entra en una línea pero
   sin lugar para el espaciado holgado de arriba. En vez de mandarlo al
   drawer —1280 es una resolución de notebook muy común— se achica el
   ritmo lo justo para que no se parta en dos filas. */
@media (min-width: 1240px) and (max-width: 1365px) {
  .tm-hero-nav { gap: 16px 28px; padding: 24px 24px; }
  .tm-hero-nav-links { gap: 14px 26px; }
  .tm-hero-nav-actions { gap: 18px; }
}

/* 1239 y no 1023: con 6 links + ES/EN + 2 CTAs el nav no entra en una
   línea por debajo de ~1240 y se partía en dos o tres filas (medido:
   128px de alto entre 1100 y 1280). Mismo umbral que .tm-nav-links en
   landing.css — mover los dos juntos si esto cambia. */
@media (max-width: 1239px) {
  .tm-hero-nav { padding: 20px 24px; }
  .tm-hero-nav-links,
  .tm-hero-nav-actions { display: none; }
  .tm-hero-hamburger { display: flex; }
}