/* ================================================
   LEVEL TECH — MISIÓN & VISIÓN — styles.css
   Depende de: core.css (variables, reset)
   Namespace: .mv-*

   LAYOUT POR BREAKPOINT:
   ≥ 1200px + landscape + ≥500px alto  → side-by-side + cortina drag (desktop)
   Resto portrait/tablet               → tabs fullcard
   Landscape ≤ 500px alto              → paneles apilados, scroll libre
================================================ */

/* ══════════════════════════════════════════════
   INTRO — Magnetic Pull
══════════════════════════════════════════════ */
.mv-intro-section {
  position: relative;
  z-index: 2;
  overflow: clip;
}
.mv-intro-sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.mv-intro-text {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 7rem);
  line-height: 1.05;
  letter-spacing: .04em;
  text-align: center;
  max-width: min(90vw, 1100px);
  color: var(--color-white);
  position: relative;
}
.mv-intro-word {
  display: inline-block;
  /* will-change gestionado dinámicamente por GSAP — no estático para no estresar GPU */
}
.mv-intro-word.hl-green, .hl-green {
  color: var(--color-green);
  filter: drop-shadow(0 0 20px rgba(57,181,74,.6));
}
.mv-intro-word.hl-blue, .hl-blue {
  color: var(--color-blue-light);
  filter: drop-shadow(0 0 20px rgba(74,157,255,.6));
}
.mv-intro-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mv-intro-rule {
  display: block;
  width: 0; height: 1px;
  margin: 1.8rem auto 0;
  background: linear-gradient(90deg,
    transparent, rgba(57,181,74,.6) 30%,
    rgba(255,255,255,.3) 50%,
    rgba(2,87,210,.6) 70%, transparent);
  box-shadow: 0 0 12px rgba(57,181,74,.3);
}

/* ══════════════════════════════════════════════
   SECCIÓN + STICKY
══════════════════════════════════════════════ */
.mv-section { position: relative; z-index: 2; }

.mv-sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.8rem, 3vw, 3rem);
  overflow: visible;
  isolation: isolate; /* contexto de posicionamiento para mv-corners-outer */
}

/* ══════════════════════════════════════════════
   CARD — liquid glass
══════════════════════════════════════════════ */
.mv-card {
  position: relative;
  width: min(98vw, 1480px);
  height: min(92svh, 950px);
  border-radius: 28px;
  overflow: hidden;
  cursor: grab;

  background: rgba(4, 10, 24, 0.50);
  backdrop-filter: blur(22px) saturate(1.6) brightness(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(1.08);

  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    0 0 0 1px rgba(2,87,210,.12),
    0 0 50px rgba(2,87,210,.08),
    0 40px 120px rgba(0,0,0,.9),
    inset 0  1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset  1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(255,255,255,.06);
}
.mv-card:active { cursor: grabbing; }

/* Highlight top */
.mv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(57,181,74,.35) 20%, rgba(255,255,255,.20) 50%,
    rgba(2,87,210,.40) 80%, transparent);
  z-index: 40; pointer-events: none;
}
/* Línea derecha */
.mv-card::after {
  content: '';
  position: absolute;
  top: 5%; bottom: 5%; right: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(2,87,210,.2) 30%,
    rgba(2,87,210,.45) 50%, rgba(2,87,210,.2) 70%, transparent);
  box-shadow: 0 0 12px rgba(2,87,210,.18);
  z-index: 40; pointer-events: none;
}

/* ── Esquinas decorativas ── */
.mv-corners-outer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.mv-corner { position: absolute; width: 22px; height: 22px; }
.mv-corner::before, .mv-corner::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0 8px rgba(255,255,255,.25), 0 0 3px rgba(57,181,74,.3);
}
.mv-corner--tl { top:0; left:0; }
.mv-corner--tl::before { top:0; left:0; width:1px; height:22px; }
.mv-corner--tl::after  { top:0; left:0; width:22px; height:1px; }
.mv-corner--tr { top:0; right:0; }
.mv-corner--tr::before { top:0; right:0; width:1px; height:22px; }
.mv-corner--tr::after  { top:0; right:0; width:22px; height:1px; }
.mv-corner--bl { bottom:0; left:0; }
.mv-corner--bl::before { bottom:0; left:0; width:1px; height:22px; }
.mv-corner--bl::after  { bottom:0; left:0; width:22px; height:1px; }
.mv-corner--br { bottom:0; right:0; }
.mv-corner--br::before { bottom:0; right:0; width:1px; height:22px; }
.mv-corner--br::after  { bottom:0; right:0; width:22px; height:1px; }

/* ══════════════════════════════════════════════
   TABS — solo visible en mobile/tablet portrait
   Ocultos por defecto; media queries los muestran
══════════════════════════════════════════════ */
.mv-tabs {
  display: none; /* oculto en desktop */
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 35;
  padding: 0;
  /* borde inferior sutil */
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mv-tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem .5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  letter-spacing: .14em;
  color: rgba(255,255,255,.3);
  transition: color .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.mv-tab.active { color: rgba(255,255,255,.92); }

/* Línea indicadora bajo el tab activo */
.mv-tab-line {
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 2px;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.87,0,.13,1);
}
.mv-tab.active .mv-tab-line { transform: scaleX(1); }

.mv-tab--mision .mv-tab-line {
  background: var(--color-green);
  box-shadow: 0 0 10px rgba(57,181,74,.7);
}
.mv-tab--vision .mv-tab-line {
  background: var(--color-blue-light);
  box-shadow: 0 0 10px rgba(74,157,255,.7);
}

/* ══════════════════════════════════════════════
   PANELES — desktop: side-by-side
══════════════════════════════════════════════ */
.mv-content-layer {
  position: absolute;
  top: 0; bottom: 0; left: 0; width: 100%;
  z-index: 1;
  display: flex;
}

.mv-panel {
  position: relative;
  width: 50%;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: stretch;
  padding: clamp(2.5rem, 5vh, 4.5rem) clamp(2.5rem, 4vw, 4.5rem);
  flex-shrink: 0;
}
.mv-zone {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 1rem; flex: 1;
}
.mv-zone-top-right { justify-content: flex-end; padding-bottom: 1.2rem; }
.mv-zone-bot-right { justify-content: flex-end; padding-bottom: .5rem; }

/* Separador vertical verde */
.mv-divider-v {
  position: absolute;
  top: 4%; bottom: 4%; left: 50%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(57,181,74,.08) 10%,
    rgba(57,181,74,.38) 35%,
    rgba(57,181,74,.58) 50%,
    rgba(57,181,74,.38) 65%,
    rgba(57,181,74,.08) 90%,
    transparent 100%);
  box-shadow: 0 0 20px rgba(57,181,74,.22), 0 0 40px rgba(57,181,74,.08);
  transform: translateX(-50%);
  z-index: 5; pointer-events: none;
}

/* ── Eyebrow ── */
.mv-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.48);
}
.mv-eyebrow::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--color-green);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(57,181,74,.9);
  flex-shrink: 0;
}
.mv-eyebrow-right::before {
  background: var(--color-blue-light);
  box-shadow: 0 0 8px rgba(74,157,255,.8);
}

/* ── Títulos ── */
.mv-title {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 10vw, 10.5rem);
  line-height: .9;
  letter-spacing: .04em;
  white-space: nowrap;
  position: relative;
  overflow: visible;
}
/* line-height:1 en los variantes con gradient — Bebas Neue accent (Í) protrude
   above the 0.9 line-height box making them transparent with background-clip:text */
.mv-title-mision,
.mv-title-vision {
  line-height: 1;
}

.mv-title-mision {
  background: linear-gradient(100deg,
    rgba(255,255,255,.2) 0%, var(--color-green) 15%, #7fffA0 30%,
    #ffffff 45%, #ffffff 60%, var(--color-green) 75%, rgba(20,80,30,.5) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 40px rgba(57,181,74,.7)) drop-shadow(0 0 12px rgba(57,181,74,.4));
  display: inline-block;
}
.mv-title-mision::before {
  content: 'MISIÓN';
  position: absolute; inset: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit;
  background: linear-gradient(105deg,
    transparent 0%, transparent 30%,
    rgba(255,255,255,.85) 48%, rgba(255,255,255,1) 50%,
    rgba(255,255,255,.85) 52%, transparent 70%, transparent 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mv-mision-sweep 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mv-mision-sweep {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}

.mv-title-vision {
  background: linear-gradient(105deg,
    #0257d2 0%, var(--color-blue-light) 22%, #ffffff 42%,
    #b8d9ff 58%, #ffffff 68%, var(--color-blue-light) 84%, #01378a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 38px rgba(2,87,210,.7)) drop-shadow(0 0 12px rgba(74,157,255,.4));
  display: inline-block;
}
.mv-title-vision::before {
  content: 'VISIÓN';
  position: absolute; inset: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit;
  background: linear-gradient(105deg,
    transparent 0%, transparent 30%,
    rgba(255,255,255,.85) 48%, rgba(255,255,255,1) 50%,
    rgba(255,255,255,.85) 52%, transparent 70%, transparent 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mv-vision-sweep 4.2s ease-in-out infinite 1.6s;
  pointer-events: none;
}
@keyframes mv-vision-sweep {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}

/* ── Regla decorativa ── */
.mv-rule {
  width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--color-green), rgba(57,181,74,.06));
  border-radius: 2px; margin: 0 auto;
  box-shadow: 0 0 10px rgba(57,181,74,.5);
}
.mv-rule-blue {
  background: linear-gradient(90deg, var(--color-blue-light), rgba(2,87,210,.06));
  box-shadow: 0 0 10px rgba(74,157,255,.45);
}

/* ── Body ── */
.mv-body {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 400; line-height: 1.88;
  color: rgba(255,255,255,.75);
  max-width: 400px;
  text-align: center; margin: 0 auto;
}
.mv-body strong { color: rgba(255,255,255,.95); font-weight: 600; }

.mv-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: 1;
  color: rgba(255,255,255,.06);
  user-select: none; pointer-events: none;
}

/* ── Indicador tipográfico de estado — solo desktop ── */
/* Reemplaza los dots de 9px por etiquetas Bebas Neue legibles.
   JS alterna .mv-state-label--mision / --vision en el contenedor,
   y activa .active en cada .mv-state-item individualmente. */
.mv-state-label {
  position: absolute;
  top: clamp(.8rem, 2vh, 1.4rem);
  left: 50%; transform: translateX(-50%);
  z-index: 30;
  display: flex; align-items: center; gap: 0;
  pointer-events: none;
}
/* Separador central */
.mv-state-sep {
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.1vw, 1rem);
  letter-spacing: .06em;
  color: rgba(255,255,255,.18);
  padding: 0 .7rem;
  line-height: 1;
  user-select: none;
}
/* Cada etiqueta de estado */
.mv-state-item {
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.1vw, 1rem);
  letter-spacing: .18em;
  color: rgba(255,255,255,.2);
  transition: color .45s ease, text-shadow .45s ease;
  line-height: 1;
  white-space: nowrap;
}
.mv-state-item.active {
  color: rgba(255,255,255,.85);
}
.mv-state-item--mision.active {
  color: var(--color-green);
  text-shadow: 0 0 18px rgba(57,181,74,.55);
}
.mv-state-item--vision.active {
  color: var(--color-blue-light);
  text-shadow: 0 0 18px rgba(74,157,255,.5);
}
.mv-state-item.mid {
  color: rgba(255,255,255,.45);
}
/* Dot legacy — oculto (mantenido por compatibilidad con JS existente) */
.mv-state-dot { display: none; }

/* ══════════════════════════════════════════════
   CORTINA — solo desktop/landscape
══════════════════════════════════════════════ */
.mv-curtains {
  position: absolute;
  top: 0; bottom: 0; left: 0; width: 100%;
  z-index: 20; overflow: hidden;
  pointer-events: none;
}
.mv-curtain {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 50%;
  background: rgba(2, 8, 20, 0.22);
  border-left: 1px solid rgba(255,255,255,.10);
  border-right: 1px solid rgba(255,255,255,.04);
  will-change: transform;
}
.mv-curtain::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.04) 0%, transparent 50%, rgba(255,255,255,.02) 100%);
  pointer-events: none;
}
.mv-curtain::after {
  content: '';
  position: absolute;
  top: 5%; bottom: 5%; left: -1px; width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(57,181,74,.5) 20%, rgba(255,255,255,.4) 50%,
    rgba(57,181,74,.5) 80%, transparent 100%);
  box-shadow: 0 0 16px rgba(57,181,74,.5);
  pointer-events: none;
}
.mv-drag-hint {
  /* Centrado en la cortina — posición desde el borde izquierdo del wipe */
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 26;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  pointer-events: none; opacity: 0; transition: opacity .4s;
}
/* Ícono SVG inyectado por JS — ver script.js */
.mv-drag-hint svg {
  width: 36px; height: 36px;
  stroke: var(--color-green);
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(57,181,74,.7));
  animation: mv-hint-pulse 1.6s ease-in-out infinite;
}
.mv-drag-hint-label {
  font-family: var(--font-body);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(57,181,74,.7);
}
@keyframes mv-hint-pulse {
  0%, 100% { transform: scaleX(1);   opacity: .8; }
  50%       { transform: scaleX(1.2); opacity: 1;  }
}

/* ══════════════════════════════════════════════
   MODO TABS — mobile/tablet portrait
   .mv-card.mv-tabs-mode activa el layout de tabs
══════════════════════════════════════════════ */

/* Card en modo tabs: height fija al viewport */
.mv-card.mv-tabs-mode {
  cursor: default;
  height: min(88svh, 760px);
}
.mv-card.mv-tabs-mode:active { cursor: default; }

/* Content layer en tabs: ambos paneles ocupan 100% superpuestos */
.mv-card.mv-tabs-mode .mv-content-layer {
  flex-direction: column;
  /* Cada panel se posiciona absolute para superponerse */
}

.mv-card.mv-tabs-mode .mv-panel {
  position: absolute;
  /* CSS fallback: top = altura del tab bar. JS sobreescribe con el valor medido real.
     --mv-tab-bar-h se inyecta por JS; si falla, el fallback de 56px evita el overlap. */
  top: var(--mv-tab-bar-h, 56px);
  left: 0; right: 0; bottom: 0;
  width: 100%;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: clamp(1.8rem, 5vw, 3rem) clamp(1.6rem, 6vw, 3.2rem);
  gap: 1.2rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Zona en tabs: gap ajustado */
.mv-card.mv-tabs-mode .mv-zone { gap: .8rem; }
.mv-card.mv-tabs-mode .mv-zone-top-right { justify-content: center; padding-bottom: 0; }
.mv-card.mv-tabs-mode .mv-zone-bot-right { justify-content: center; padding-bottom: 0; }

/* Panel derecho (Visión) oculto por defecto en tabs-mode —
   JS lo muestra con autoAlpha cuando corresponde.
   Evita el flash de ambos paneles superpuestos antes de que GSAP corra. */
.mv-card.mv-tabs-mode .mv-panel-right {
  opacity: 0;
  visibility: hidden;
}

/* Separador oculto en tabs */
.mv-card.mv-tabs-mode .mv-divider-v { display: none; }

/* Cortina oculta en tabs */
.mv-card.mv-tabs-mode .mv-curtains { display: none; }

/* Dots ocultos en tabs (reemplazados por tabs) */
.mv-card.mv-tabs-mode .mv-state-label { display: none; }

/* Body más grande en tabs — todo el ancho disponible */
.mv-card.mv-tabs-mode .mv-body {
  max-width: min(90%, 480px);
  font-size: clamp(.88rem, 3.5vw, 1.05rem);
  line-height: 1.82;
}

/* Título más grande en tabs — panel completo */
.mv-card.mv-tabs-mode .mv-title {
  font-size: clamp(4rem, 14vw, 7rem);
}

/* Número decorativo en tabs */
.mv-card.mv-tabs-mode .mv-num {
  font-size: clamp(5rem, 18vw, 9rem);
  position: absolute;
  bottom: clamp(1rem, 3vh, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  opacity: 1; /* ya es rgba baja, no hace falta más */
}

/* ══════════════════════════════════════════════
   RESPONSIVE — LAPTOP ALTURA REDUCIDA
   1280×720, 1366×768, 1536×864
══════════════════════════════════════════════ */
@media (max-height: 780px) and (min-width: 1200px) and (orientation: landscape) {
  .mv-card  { height: min(90svh, 800px); }
  .mv-panel { padding: clamp(1.6rem, 3vh, 2.6rem) clamp(2rem, 3vw, 3.5rem); }
  .mv-title { font-size: clamp(4.5rem, 8vw, 8rem); }
  .mv-num   { font-size: clamp(3rem, 5vw, 5rem); }
  .mv-body  { font-size: clamp(.85rem, 1vw, .98rem); line-height: 1.72; max-width: 340px; }
  .mv-card.mv-tabs-mode .mv-body { font-size: clamp(.85rem, 1vw, .98rem); line-height: 1.72; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET + MOBILE PORTRAIT
   Nuevo sistema 3 criterios — activa TABS
   JS activa .mv-tabs-mode en la card
══════════════════════════════════════════════ */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

  /* Intro comprimido */
  .mv-intro-text {
    font-size: clamp(2rem, 8vw, 3.4rem);
    line-height: 1.1;
  }
  .mv-intro-rule { margin-top: 1.2rem; }

  /* Sticky menos padding */
  .mv-sticky { padding: clamp(.8rem, 2vw, 1.4rem); }

  /* Card — sin cursor grab, sin cortina lateral */
  .mv-card {
    cursor: default;
    border-radius: clamp(14px, 3vw, 22px);
    height: min(88svh, 780px);
    backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
  }
  .mv-card:active { cursor: default; }
  .mv-card::after { display: none; }
  .mv-state-label { display: none; }

  .mv-panel  { padding: clamp(1.8rem, 3.5vh, 3rem) clamp(1.6rem, 3vw, 3rem); }
  .mv-title  { font-size: clamp(3.8rem, 7.5vw, 6.5rem); }
  .mv-body   { font-size: clamp(.88rem, 1.8vw, 1.02rem); max-width: 100%; line-height: 1.78; }
  .mv-num    { font-size: clamp(3rem, 5.5vw, 5.5rem); }

  /* Tabs visibles */
  .mv-tabs {
    display: flex;
    background: rgba(4,10,24,.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Tablet portrait (≥600px) — card más alta */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
  @media (min-width: 600px) {
    .mv-card           { height: min(86svh, 720px); }
    .mv-card.mv-tabs-mode { height: min(86svh, 720px); }
    .mv-tab            { font-size: clamp(1.2rem, 3.5vw, 1.5rem); }
  }
}
/* Mobile portrait pequeño (≤599px) */
@media (max-width: 599px) and (orientation: portrait) {
  .mv-card { height: min(86svh, 620px); }
  .mv-card.mv-tabs-mode { height: min(86svh, 620px); }
  .mv-tab  { font-size: clamp(1rem, 5vw, 1.3rem); padding: .85rem .5rem; }
}
/* SE / S8 — pantallas pequeñas y bajas */
@media (max-width: 599px) and (max-height: 680px) and (orientation: portrait) {
  .mv-card { height: min(88svh, 540px); }
  .mv-card.mv-tabs-mode { height: min(88svh, 540px); }
  .mv-tab  { font-size: clamp(.9rem, 4.5vw, 1.1rem); padding: .7rem .4rem; }
  .mv-card.mv-tabs-mode .mv-title { font-size: clamp(3.4rem, 12vw, 5.5rem); }
  .mv-card.mv-tabs-mode .mv-body  { font-size: clamp(.8rem, 3.2vw, .95rem); line-height: 1.7; }
  .mv-card.mv-tabs-mode .mv-num   { display: none; }
}

/* ── Intro — ajuste mobile pequeño (≤479px) ──
   El texto tiene BRs hardcodeados. A 375px el clamp de 8vw = 30px,
   3 líneas con BR puede causar orfandad en "confían". Ajustamos
   el font-size y el max-width para que las líneas se balanceen mejor. */
@media (max-width: 479px) and (orientation: portrait) {  .mv-intro-text {
    font-size: clamp(1.75rem, 9.5vw, 2.4rem);
    max-width: min(95vw, 360px);
    line-height: 1.08;
  }
}

/* ══════════════════════════════════════════════
   LANDSCAPE MOBILE — orientation:landscape + max-height:500px
   iPhone SE/XR/Plus, Galaxy — todos los móviles landscape.
   Tablets landscape (iPad Mini/Air/Pro) → desktop por los 3 criterios.

   ESTRATEGIA: scroll libre. Sin pin, sin sticky,
   sin cortina, sin tabs. Paneles apilados verticalmente.
══════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {

  /* ── Intro: estática, compacta, sin pin ── */
  .mv-intro-section {
    height: auto !important;  /* JS setea height en px — esto lo anula */
  }
  .mv-intro-sticky {
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
    padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem);
    pointer-events: auto;
  }
  .mv-intro-text {
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    line-height: 1.1;
    text-align: center;
  }
  .mv-intro-rule { display: none; }

  /* ── Sección MV: sin pin, altura automática ── */
  .mv-section {
    height: auto !important;  /* JS setea height en px — esto lo anula */
  }
  .mv-sticky {
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
    padding: clamp(.8rem, 2vw, 1.4rem) clamp(.8rem, 3vw, 1.6rem)
             clamp(1.2rem, 3vw, 2rem);
    display: block;           /* sin flex — flujo normal */
    overflow: visible;
  }

  /* ── Card: altura automática, sin cursor grab ── */
  .mv-card {
    width: 100%;
    height: auto !important;
    min-height: unset;
    border-radius: clamp(12px, 2vw, 18px);
    cursor: default !important;
    overflow: visible;        /* paneles se expanden libremente */
    /* backdrop reducido — menos carga GPU en mobile */
    backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.4) brightness(1.05);
  }
  .mv-card:active { cursor: default !important; }

  /* ── Sin cortina, sin tabs, sin dots ── */
  .mv-curtains    { display: none !important; }
  .mv-tabs        { display: none !important; }
  .mv-state-label { display: none !important; }
  .mv-card::after { display: none; }

  /* ── Paneles: apilados, flujo normal, altura auto ── */
  .mv-content-layer {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
  }
  .mv-panel {
    /* Anular cualquier absolute que tabs-mode haya dejado */
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 4vw, 2.4rem);
    gap: .8rem;
    /* Reset transforms que GSAP pudo haber dejado */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Separador horizontal entre Misión y Visión */
  .mv-divider-v {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important;
    width: 60%; height: 1px;
    transform: none !important;
    /* gradiente verde→azul horizontal para separar paneles */
    background: linear-gradient(90deg,
      transparent,
      rgba(57,181,74,.25) 20%,
      rgba(57,181,74,.5) 50%,
      rgba(2,87,210,.25) 80%,
      transparent) !important;
    box-shadow: 0 0 12px rgba(57,181,74,.15);
    margin: 0 auto;
  }

  /* ── Zonas internas: reset de justify para flujo natural ── */
  .mv-zone {
    flex: none;
    justify-content: flex-start;
    text-align: center;
    gap: .6rem;
  }
  .mv-zone-top-right { justify-content: center; padding-bottom: 0; }
  .mv-zone-bot-right { justify-content: center; padding-bottom: 0; }

  /* ── Tipografía comprimida ── */
  .mv-title {
    font-size: clamp(3rem, 8vw, 5rem);
    white-space: nowrap;
  }
  .mv-body {
    font-size: clamp(.82rem, 2vw, .98rem);
    line-height: 1.68;
    max-width: min(90%, 520px);
  }
  .mv-num { display: none; }
  .mv-eyebrow { justify-content: center; }
  .mv-rule { margin: 0 auto; }
}