/* ================================================================
   SKIN V3.1 — THE CANTOR EXPERIENCE
   Specs finales Figma: Poppins + Saira, #FFEA00, caja navy unificada.
   Carga DESPUES de css/styles.css. No toca runtime JS ni V3.
   ================================================================ */

:root {
  --font-display: "Poppins", sans-serif;
  --font-heading: "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;
  --font-mundial: "Saira", "Poppins", sans-serif;

  --v31-yellow: #FFEA00;
  --v31-navy-box: #00063D;
  --v31-navy-bar: #000A6B;
  --v31-nav-bg: #08102A;
  --v31-red: #CC1020;
  --v31-red-arabesque: #AC0019;
  --v31-white: #FFFFFF;

  --accent-secondary: #FFEA00;
}

body,
.nav-links a,
.nav-lang button,
.logo-radio,
.logo-fdp,
.hero-desc,
.section-desc,
.mc-desc,
.btn,
.btn-mode,
.btn-talk,
.stat-label,
.stat-label-only,
.mc-label,
.section-tag,
.ticker-text,
.footer-links a,
.tech-badge,
.footer-copy {
  font-family: "Poppins", sans-serif !important;
}

body {
  background:
    radial-gradient(circle at 52% 28%, rgba(255,255,255,0.08), transparent 30rem),
    linear-gradient(180deg, var(--v31-navy-bar) 0%, var(--v31-navy-box) 68%, var(--v31-red) 100%) !important;
}

html {
  scroll-snap-type: none !important;
}

.section {
  scroll-snap-align: none !important;
}

#shader-bg {
  opacity: 0.16 !important;
}

/* NAV — Figma arabesque, nav/lang stay pill. */
#main-nav {
  background:
    linear-gradient(rgba(8,16,42,0.55), rgba(8,16,42,0.55)),
    url("../assets/images/bg-mundial-swirl.jpg") center top / cover no-repeat !important;
  background-blend-mode: normal !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28) !important;
}

#main-nav.scrolled {
  background:
    linear-gradient(rgba(8,16,42,0.70), rgba(8,16,42,0.70)),
    url("../assets/images/bg-mundial-swirl.jpg") center top / cover no-repeat !important;
  background-blend-mode: normal !important;
}

.logo-fdp {
  color: var(--v31-white) !important;
  font-weight: 800 !important;
}

.logo-sep {
  color: rgba(255,255,255,0.40) !important;
}

.logo-radio {
  color: var(--v31-white) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

.nav-links a {
  padding: 0.35rem 1rem !important;
  border: 1.5px solid rgba(255,255,255,0.75) !important;
  border-radius: 9999px !important;
  color: var(--v31-white) !important;
  background: rgba(255,255,255,0.04) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.nav-links a:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: var(--v31-white) !important;
}

.nav-links a::after {
  display: none !important;
}

.nav-lang .lang-active {
  background: var(--v31-red) !important;
  border: 1.5px solid var(--v31-red) !important;
  border-radius: 9999px !important;
  color: var(--v31-white) !important;
  font-weight: 700 !important;
  padding: 0.3rem 0.7rem !important;
}

.nav-lang button:not(.lang-active) {
  border: 1.5px solid rgba(255,255,255,0.60) !important;
  border-radius: 9999px !important;
  color: rgba(255,255,255,0.86) !important;
  font-weight: 600 !important;
  padding: 0.3rem 0.7rem !important;
}

.nav-lang button:not(.lang-active):hover {
  border-color: var(--v31-white) !important;
  color: var(--v31-white) !important;
}

/* HERO */
.hero-video-wrap {
  background: url("../assets/images/hero-bg-skyline.jpg") center / cover no-repeat !important;
}

.hero-video-overlay {
  background:
    linear-gradient(180deg,
      rgba(8,16,42,0.55) 0%,
      rgba(8,16,42,0.20) 35%,
      rgba(8,16,42,0.65) 75%,
      rgba(0,6,61,0.96) 100%),
    linear-gradient(90deg,
      rgba(8,16,42,0.70) 0%,
      rgba(8,16,42,0.10) 55%,
      rgba(8,16,42,0.30) 100%) !important;
}

.hero-badge {
  background: var(--v31-red) !important;
  border-color: var(--v31-red) !important;
  border-radius: 9999px !important;
  color: var(--v31-white) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.badge-dot {
  background: var(--v31-white) !important;
}

.hero-title {
  font-family: "Poppins", sans-serif !important;
  line-height: 0.965 !important;
  margin-bottom: 0.85rem !important;
}

.title-line,
.title-name,
.title-accent,
.hero-sub,
.hero-desc {
  opacity: 1 !important;
  transform: none !important;
}

.title-the,
.title-name,
.title-accent {
  font-family: "Poppins", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.30) !important;
}

.title-the {
  color: var(--v31-white) !important;
  font-size: clamp(2rem, 6vw, 4.5rem) !important;
}

.title-name {
  color: var(--v31-white) !important;
  font-size: clamp(2.8rem, 7.4vw, 5.4rem) !important;
  -webkit-text-fill-color: var(--v31-white) !important;
}

.title-accent {
  background: none !important;
  color: var(--v31-yellow) !important;
  font-size: clamp(2.8rem, 7.4vw, 5.4rem) !important;
  -webkit-text-fill-color: var(--v31-yellow) !important;
}

.hero-sub {
  color: var(--v31-yellow) !important;
  font-family: var(--font-mundial) !important;
  font-size: clamp(1rem, 1.8vw, 1.32rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.65rem !important;
}

.hero-desc {
  color: rgba(255,255,255,0.94) !important;
  font-size: clamp(1.05rem, 1.15vw, 1.28rem) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  max-width: 620px !important;
  margin-bottom: 1.1rem !important;
}

.hero-ctas {
  gap: 0.75rem !important;
}

.btn-primary,
.btn-talk,
.btn-mode,
.hero-talk-btn {
  border-radius: 12px !important;
}

.btn-primary,
.hero-talk-btn {
  background: var(--v31-red) !important;
  border-color: var(--v31-red) !important;
  color: var(--v31-white) !important;
  font-size: clamp(0.88rem, 0.9vw, 1rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 0.82rem 1.28rem !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.hero-talk-btn:hover,
.hero-talk-btn:focus-visible,
.btn-talk:hover,
.btn-talk:focus-visible {
  background: var(--v31-red) !important;
  border-color: var(--v31-red) !important;
  color: var(--v31-white) !important;
  box-shadow: 0 0 32px rgba(210, 32, 38, 0.46), 0 0 68px rgba(255, 215, 0, 0.18) !important;
}

/* Dedicated stats image replaces the inherited floating hero cutout in V3.1. */
.hero-twin-img {
  display: none !important;
}

/* NAVY BOX SYSTEM — panel + toolbar + Mundial cards. */
.twin-widget,
.mundial-card {
  background: var(--v31-navy-box) !important;
  border: 2px solid var(--v31-white) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45) !important;
}

.twin-widget {
  border-radius: 0 28px 0 28px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 28px !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 28px !important;
  max-width: 700px !important;
  overflow: hidden !important;
  position: relative !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.twin-widget:hover,
.mundial-card:hover {
  border-color: var(--v31-white) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,0.55) !important;
}

.widget-portrait {
  background: var(--v31-navy-box) !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

.widget-controls {
  background: var(--v31-navy-bar) !important;
  border-top: 2px solid var(--v31-white) !important;
  padding: 0.8rem 1.1rem !important;
  border-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 28px !important;
  overflow: hidden !important;
}

.widget-status {
  background: rgba(0,6,61,0.85) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 7px !important;
  color: var(--v31-white) !important;
  font-family: "Poppins", sans-serif !important;
}

.btn-mode {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  position: relative !important;
  min-height: 42px !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.btn-mode-label {
  white-space: nowrap !important;
}

.btn-mode-badge {
  border: 1px solid rgba(255,234,0,0.38) !important;
  border-radius: 999px !important;
  padding: 0.06rem 0.32rem !important;
  color: var(--v31-yellow) !important;
  font-size: 0.54rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.btn-mode-badge-recommended {
  color: var(--v31-navy-box) !important;
  background: var(--v31-yellow) !important;
  border-color: var(--v31-yellow) !important;
}

.btn-talk {
  font-weight: 700 !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-width: min(100%, 270px) !important;
}

.twin-step-copy-controls {
  margin-left: auto !important;
  text-align: right !important;
}

.et-widget {
  padding: clamp(0.75rem, 2vw, 1.25rem) 0 0 !important;
  border-radius: 0 28px 0 28px !important;
}

.et-widget-title {
  color: var(--v31-white) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(2.05rem, 3.15vw, 3.2rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-bottom: 1.05rem !important;
  text-align: left !important;
}

.et-widget-title br {
  display: none !important;
}

.et-widget-title .title-small {
  font-size: 0.74em !important;
  letter-spacing: 0.1em !important;
  margin-right: 0.35em !important;
  vertical-align: 0.12em !important;
}

.et-widget-title em {
  background: none !important;
  color: var(--v31-yellow) !important;
  font-style: normal !important;
  -webkit-text-fill-color: var(--v31-yellow) !important;
}

/* STATS BAND — red arabesque, no blend. */
.stats-bar-inline,
.stats-bar {
  background: url("../assets/images/bg-stats-wave.jpg") center / cover no-repeat, var(--v31-red-arabesque) !important;
  overflow: visible !important;
  position: relative !important;
}

.stats-andres-img {
  position: absolute !important;
  left: clamp(1.75rem, 6vw, 5.5rem) !important;
  bottom: 0 !important;
  height: 125% !important;
  width: auto !important;
  max-width: clamp(210px, 19vw, 300px) !important;
  object-fit: contain !important;
  object-position: bottom !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.stats-inner {
  position: relative !important;
  z-index: 2 !important;
}

.stat-number {
  color: var(--v31-white) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.stat-label,
.stat-label-only {
  color: var(--v31-white) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.stat-icon {
  color: var(--v31-white) !important;
  width: 52px !important;
  height: 52px !important;
}

.stat-icon svg {
  stroke-width: 1.5 !important;
}

/* MUNDIAL */
.mundial {
  background: url("../assets/images/bg-mundial-swirl.jpg") center / cover no-repeat, var(--v31-navy-bar) !important;
}

.mundial .section-tag,
.mundial-partners .section-tag,
.section-tag {
  color: var(--v31-yellow) !important;
  font-family: var(--font-mundial) !important;
  font-size: clamp(0.86rem, 1.15vw, 1.04rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
}

.section-title {
  color: var(--v31-white) !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 900 !important;
}

.section-title em {
  background: none !important;
  color: var(--v31-yellow) !important;
  font-style: normal !important;
  -webkit-text-fill-color: var(--v31-yellow) !important;
}

.mundial-card {
  border-radius: 0 28px 0 28px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 28px !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 28px !important;
}

.mundial-card:hover {
  transform: translateY(-4px) !important;
}

.mc-number {
  color: var(--v31-yellow) !important;
  font-family: var(--font-mundial) !important;
  font-weight: 800 !important;
}

.mc-label {
  color: var(--v31-white) !important;
  font-weight: 700 !important;
}

.mc-desc {
  color: rgba(255,255,255,0.86) !important;
  font-weight: 400 !important;
}

/* FOOTER / TICKER */
.footer,
.footer-inline {
  background: url("../assets/images/bg-footer-wave.jpg") center / cover no-repeat, var(--v31-red) !important;
  border-top: none !important;
  padding-bottom: calc(var(--space-xl) + 56px) !important;
}

.fdp-ticker {
  background: var(--v31-red) !important;
}

.footer-links a {
  color: rgba(255,255,255,0.82) !important;
  font-weight: 500 !important;
}

.footer-links a:hover {
  color: var(--v31-white) !important;
}

.footer-copy,
.footer-tech span:first-child {
  color: rgba(255,255,255,0.65) !important;
}

.footer-copy {
  border-top: 1px solid rgba(255,255,255,0.55) !important;
  color: rgba(255,255,255,0.85) !important;
  padding-top: var(--space-lg) !important;
}

.mundial-partners {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.sponsors-ribbon {
  background: transparent !important;
  border-top: none !important;
  width: 100% !important;
  max-width: none !important;
}

.marquee-track {
  width: max-content !important;
}

.tech-badge {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: rgba(255,255,255,0.85) !important;
}

.ticker-text {
  color: var(--v31-yellow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
}

.ticker-fdp {
  font-weight: 800 !important;
}

.splash-2 {
  background: rgba(0, 10, 107, 0.35) !important;
}

.splash-3 {
  background: rgba(255, 234, 0, 0.12) !important;
}

html:not(.debug-mode) .voice-debug-panel,
html:not(.debug-mode) #voice-debug-panel,
html:not(.debug-mode) .nnb-debug-panel,
html:not(.debug-mode) #nnb-debug-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Layout guard: Claude spec wins on tokens/assets; prior Codex UAT layout wins on placement. */
@media (min-width: 1120px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(455px, 0.9fr) minmax(560px, 1.1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    column-gap: clamp(1.25rem, 2.4vw, 3.6rem) !important;
    min-height: calc(100vh - 44px) !important;
    padding: 5.15rem 0 0 !important;
  }

  .hero-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    max-width: 730px !important;
    padding: clamp(3rem, 7vh, 5.1rem) 0 1.25rem clamp(2.2rem, 5.8vw, 6.1rem) !important;
  }

  .title-the {
    font-size: clamp(1.55rem, 3.2vw, 3rem) !important;
  }

  .title-name,
  .title-accent {
    font-size: clamp(4.15rem, 7.65vw, 7.7rem) !important;
  }

  .experience-twin-inline {
    display: contents !important;
  }

  .experience-twin-inline .et-grid {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 !important;
    padding: clamp(2.35rem, 5.8vh, 4.1rem) clamp(2rem, 4.3vw, 4.9rem) 1.35rem 0 !important;
  }

  .twin-widget {
    max-width: 100% !important;
  }

  .widget-portrait {
    min-height: clamp(320px, 30vw, 450px) !important;
  }

  .voice-presence {
    --voice-ring-size: clamp(226px, 20vw, 306px) !important;
  }

  .voice-presence-face {
    width: clamp(138px, 11.5vw, 176px) !important;
    height: clamp(138px, 11.5vw, 176px) !important;
  }

  .stats-bar-inline {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: min(8px, calc(100vh - 917px)) !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    height: clamp(192px, 20vh, 236px) !important;
    display: flex !important;
    align-items: center !important;
    transform: translateY(0) !important;
    margin-top: 0 !important;
    padding: 0.85rem clamp(2.2rem, 5.8vw, 6.1rem) !important;
  }

  .stats-inner {
    max-width: 1180px !important;
    width: 100% !important;
    padding-left: clamp(210px, 22vw, 320px) !important;
    gap: clamp(0.85rem, 2vw, 1.65rem) !important;
    align-items: center !important;
  }

  .stats-andres-img {
    left: clamp(1.75rem, 6vw, 5.5rem) !important;
    height: 125% !important;
    max-width: clamp(210px, 19vw, 300px) !important;
    z-index: 4 !important;
  }
}

@media (max-width: 1119px) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 5.35rem 0 0 !important;
    gap: 1.25rem !important;
  }

  .hero-splash {
    display: none !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 1.6rem clamp(1.25rem, 4vw, 2.5rem) 0 !important;
    box-sizing: border-box !important;
  }

  .title-name,
  .title-accent {
    font-size: clamp(3.4rem, 9vw, 5.4rem) !important;
  }

  .hero-desc {
    max-width: 620px !important;
  }

  .experience-twin-inline {
    width: 100% !important;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem) !important;
    box-sizing: border-box !important;
  }

  .experience-twin-inline .et-grid {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .twin-widget {
    max-width: 100% !important;
  }

  .stats-bar-inline {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 760px) !important;
    height: auto !important;
    min-height: 150px !important;
    margin: 1.25rem auto 0 !important;
    padding: 0.9rem clamp(1.2rem, 4vw, 2rem) !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .stats-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(185px, 25vw, 245px) !important;
    gap: clamp(0.75rem, 2vw, 1.25rem) !important;
  }

  .stats-andres-img {
    left: clamp(0.75rem, 3vw, 1.35rem) !important;
    max-width: clamp(170px, 24vw, 230px) !important;
    height: 118% !important;
  }

  .footer-inline {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .nav-links a {
    padding: 0.25rem 0.7rem !important;
    font-size: 0.70rem !important;
  }

  .hero {
    padding-top: 4.35rem !important;
  }

  .hero-content {
    padding: 0.75rem 1.25rem 0 !important;
  }

  .hero-title,
  .hero-sub,
  .hero-desc,
  .hero-ctas {
    display: none !important;
  }

  .hero-badge {
    margin: 0 auto 0.55rem !important;
  }

  .title-the {
    font-size: clamp(1.1rem, 5vw, 1.6rem) !important;
  }

  .title-name,
  .title-accent {
    font-size: clamp(2.6rem, 14vw, 4.4rem) !important;
  }

  .hero-desc {
    max-width: 100% !important;
  }

  .experience-twin-inline .et-grid {
    gap: 0.85rem !important;
    padding: 0.25rem 1.25rem 0 !important;
  }

  .et-widget-title {
    margin-bottom: 0.65rem !important;
  }

  .twin-widget {
    margin-bottom: 0 !important;
  }

  .twin-widget,
  .mundial-card {
    border-width: 1.5px !important;
  }

  .widget-portrait {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  .stats-andres-img {
    display: none !important;
  }

  .stats-bar-inline {
    margin-top: 0.8rem !important;
    padding: 0.9rem 1rem calc(0.9rem + 38px) !important;
  }

  .stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem 0.85rem !important;
    padding-left: 0 !important;
  }

  .stat-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 0.2rem !important;
  }

  .stat-number {
    font-size: clamp(2.4rem, 12vw, 3.15rem) !important;
    margin-bottom: 0.1rem !important;
  }

  .stat-label,
  .stat-label-only {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
  }

  .footer-inline {
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 38px) !important;
  }
}

@media (max-width: 480px) {
  .nav-links {
    display: none !important;
  }

  .title-the {
    font-size: clamp(1.2rem, 6vw, 2rem) !important;
  }

  .title-name,
  .title-accent {
    font-size: clamp(2.4rem, 12vw, 3.4rem) !important;
  }

  .hero-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .experience-twin-inline {
    padding-top: 0.65rem !important;
  }

  .experience-twin-inline .et-grid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .widget-portrait {
    aspect-ratio: 4 / 3 !important;
  }

  .stats-bar-inline {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    width: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FIX 2026-06-09 22:1x — la cinta inferior TAPABA el CTA "Hablar con
   Andrés" (Playwright: laptop 1366x768 → btn-talk top:740 cubierto por
   .ticker-scroll z-180; el click se lo comía la cinta → "aprieto y hablo
   y nada", reporte equipo JP). La cinta es decorativa:
   1) Los clicks la atraviesan SIEMPRE.
   2) En pantallas bajas (laptops chicas / celulares) se oculta para que
      el CTA quede visible y clickeable.
   ════════════════════════════════════════════════════════════════════ */
.fdp-ticker,
.fdp-ticker * {
  pointer-events: none !important;
}
@media (max-height: 860px) {
  .fdp-ticker { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   FIX 2026-06-16 — controles del twin TAPADOS / cortados en viewports
   no-altos (incluye monitores 1080p maximizados y laptops; reporte con
   captura de Marcelo).
   Causa de fondo: en DESKTOP la cinta de stats era `position:absolute`
   pinned al fondo del hero y se pintaba ENCIMA de los controles de la card
   (mic / video / "Hablar con Andrés") en casi todo monitor < ~1200px de
   alto. El scroll además quedaba atrapado (ver styles.css → body
   overflow-x:clip).
   (a) DESKTOP (todo alto): la cinta de stats va en FLUJO del grid (fila 2)
       → NUNCA tapa la card; queda al fondo en pantallas altas (fila 1 = 1fr)
       y empuja el scroll en bajas. Fila 1 = minmax(min-content,1fr): la card
       NO se recorta nunca.
   (b) ALTURA BAJA (≤900px): el hero crece y el retrato se compacta para que
       el CTA quede a la vista sin scroll en laptops.
   No cambia el look en pantallas altas (la cinta sigue al fondo).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1120px) {
  .hero {
    grid-template-rows: minmax(min-content, 1fr) auto !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  /* Cinta de stats: de absolute (tapaba la card) → flujo normal en fila 2,
     ancho completo, debajo de la experiencia. */
  .experience-twin-inline .stats-bar-inline {
    position: relative !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: clamp(1rem, 3.5vh, 3rem) 0 0 !important;
    transform: none !important;
  }
}
@media (max-height: 900px) {
  .hero {
    min-height: auto !important;
    height: auto !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}
@media (min-width: 1120px) and (max-height: 900px) {
  .hero {
    align-items: start !important;
    padding-top: 4.7rem !important;
    padding-bottom: 2.5rem !important;
  }
  .hero-content {
    align-self: start !important;
  }
  .experience-twin-inline .et-grid {
    align-self: start !important;
    padding-top: clamp(0.5rem, 2vh, 1.5rem) !important;
    padding-bottom: 0 !important;
  }
  /* Retrato más compacto en pantallas bajas → el CTA queda a la vista. */
  .widget-portrait {
    min-height: clamp(150px, 22vh, 320px) !important;
  }
}