/* =========================================================
   MBA Holding — movimiento
   Tesis: "el corte". La portada se revela como una línea de
   corte que avanza dejando el titular a su paso; el resto del
   sitio usa máscaras y apariciones breves que acompañan la lectura.
   Todo es visible por defecto: los estados ocultos solo existen
   bajo .js-motion (añadido si hay IntersectionObserver).
   ========================================================= */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Superficies del navegador ---------- */
::selection { background: var(--accent); color: var(--navy-950); }
html { scrollbar-color: #9fb3cc var(--tint); }

/* ---------- 1. Momento focal: portada ---------- */
.hero__bg { animation: hero-bg 1.8s var(--ease-out) both; transform-origin: 70% 50%; }
@keyframes hero-bg {
  from { transform: scale(1.08); filter: blur(8px) brightness(.55); }
  to   { transform: scale(1);    filter: none; }
}

.hero .eyebrow { animation: rise .6s var(--ease-out) .15s both; }

/* Cada línea del titular se "corta" de izquierda a derecha */
.hero__title .hl__in { animation: cut-reveal .9s var(--ease-in-out) both; }
.hero__title .hl:nth-child(1) .hl__in { animation-delay: .3s; }
.hero__title .hl:nth-child(2) .hl__in { animation-delay: .7s; }
@keyframes cut-reveal {
  from { clip-path: inset(-10% 100% -10% 0); }
  to   { clip-path: inset(-10% 0 -10% 0); }
}

/* La cuchilla: un filo de luz que encabeza el corte */
.hero__title .hl::after {
  content: ""; position: absolute; inset: 4% 0;
  background: linear-gradient(90deg, transparent calc(100% - 3px), #dff0ff calc(100% - 3px));
  filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px rgba(90,169,255,.8));
  transform: translateX(-100%); opacity: 0; pointer-events: none;
  animation: blade .9s var(--ease-in-out) both;
}
.hero__title .hl:nth-child(1)::after { animation-delay: .3s; }
.hero__title .hl:nth-child(2)::after { animation-delay: .7s; }
@keyframes blade {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

.hero__lead  { animation: rise .7s var(--ease-out) 1.25s both; }
.hero__ctas  { animation: rise .7s var(--ease-out) 1.4s both; }
.hero__strip { animation: strip .8s var(--ease-out) 1.55s both; }
@keyframes rise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes strip { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- 2. Cabecera: estado al hacer scroll ---------- */
.nav { transition: box-shadow .3s var(--ease-out), background-color .3s; }
.nav__logo img { transition: transform .3s var(--ease-out); transform-origin: left center; }
.nav.is-scrolled { box-shadow: 0 10px 30px -12px rgba(5,14,28,.55); }
.nav.is-scrolled .nav__logo img { transform: scale(.88); }
.nav__logo:hover img { transform: scale(1.04); }
.nav.is-scrolled .nav__logo:hover img { transform: scale(.92); }

/* Subrayado que crece en los enlaces del menú (escritorio) */
@media (min-width: 901px) {
  .nav__links a:not(.nav__cta) { position: relative; }
  .nav__links a:not(.nav__cta)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: right;
    transition: transform .3s var(--ease-out);
  }
  .nav__links a:not(.nav__cta):hover::after,
  .nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }
  .nav__links a.is-current { color: var(--white); }
}

/* Menú móvil: despliegue con máscara */
@media (max-width: 900px) {
  .nav__links.is-open { animation: menu-open .35s var(--ease-out) both; }
  .nav__links.is-open a { animation: rise .4s var(--ease-out) both; }
  .nav__links.is-open a:nth-child(2) { animation-delay: .04s; }
  .nav__links.is-open a:nth-child(3) { animation-delay: .08s; }
  .nav__links.is-open a:nth-child(4) { animation-delay: .12s; }
  .nav__links.is-open a:nth-child(5) { animation-delay: .16s; }
  .nav__links.is-open a:nth-child(6) { animation-delay: .2s; }
}
@keyframes menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Barra de progreso de lectura (solo donde el scroll-timeline existe) */
@supports (animation-timeline: scroll()) {
  .nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--accent); transform-origin: left; transform: scaleX(0);
    animation: progress linear both; animation-timeline: scroll(root);
  }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Banderas */
.flags a { transition: background .2s, transform .2s var(--ease-out); }
.flags a:hover { transform: translateY(-2px); }

/* ---------- 3. Botones y enlaces: respuesta inmediata ---------- */
.btn > span[aria-hidden] { display: inline-block; transition: transform .25s var(--ease-out); }
.btn:hover > span[aria-hidden] { transform: translate(3px, -2px); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--primary, .btn--cut, .btn--filters, .btn--yellow { box-shadow: 0 6px 16px -8px rgba(5,14,28,.5); }
.btn--primary:hover, .btn--cut:hover, .btn--filters:hover, .btn--yellow:hover { box-shadow: 0 12px 24px -10px rgba(5,14,28,.55); }

.brand__mail, .contact__list a, .country a, .footer__col a { transition: color .2s; }

/* WhatsApp: tarjetas y botón flotante */
.wa__go { transition: transform .3s var(--ease-out), background .2s; }
.wa__card:hover .wa__go { transform: rotate(45deg) scale(1.08); }
.wa__card:active { transform: scale(.99); }

.wa-float { animation: float-in .6s var(--ease-out) 2s both; }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: wa-ring 1.8s var(--ease-out) 2.6s 2;
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float { transition: transform .2s var(--ease-out), background .2s; }
@keyframes float-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wa-ring { to { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }

/* ---------- 4. Revelados al hacer scroll ---------- */
/* Titulares de sección: emergen de una máscara inferior */
.js-motion .h2:not(.is-in) { clip-path: inset(0 0 100% 0); transform: translateY(.35em); }
.js-motion .h2 { transition: clip-path .8s var(--ease-out), transform .8s var(--ease-out); }
.js-motion .h2.is-in { clip-path: inset(-10% -5% -15% -5%); transform: none; }

/* Texto de apoyo y eyebrows: aparición breve */
.js-motion :is(.section .eyebrow, .lead, .head__sub, .brands__sep):not(.is-in) { opacity: 0; transform: translateY(14px); }
.js-motion :is(.section .eyebrow, .lead, .head__sub, .brands__sep) { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }

/* Listas que aparecen como listas: escalonado con tope */
.js-motion [data-stagger] > * { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(min(var(--i, 0), 5) * 50ms); }
.js-motion [data-stagger]:not(.is-in) > * { opacity: 0; transform: translateY(22px); }

/* Fotografías: se descubren con un recorte parcial (nunca desde cero, para no dejar huecos) */
.js-motion :is(.brand__media, .sector) img { transition: clip-path .7s var(--ease-out), transform .9s var(--ease-out); }
.js-motion :is(.brand__media, .sector):not(.is-in) img { clip-path: inset(35% 0 0 0); transform: scale(1.06); }
.js-motion :is(.brand__media, .sector).is-in img { clip-path: inset(0 0 0 0); }
.sector.is-in:hover img { transform: scale(1.05); transition-duration: .6s; }
.brand:hover .brand__media img { transform: scale(1.04); transition: transform .8s var(--ease-out); }

/* Etiqueta "En desarrollo": entra tras la foto */
.js-motion .brand__media:not(.is-in) .brand__badge { opacity: 0; transform: translateX(-10px); }
.brand__badge { transition: opacity .4s var(--ease-out) .6s, transform .4s var(--ease-out) .6s; }

/* Tarjetas de marca: el contenido sigue a la foto */
.js-motion .brand:not(.is-in) .brand__body > * { opacity: 0; transform: translateY(16px); }
.js-motion .brand .brand__body > * { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.brand .brand__body > *:nth-child(1) { transition-delay: .05s; }
.brand .brand__body > *:nth-child(2) { transition-delay: .08s; }
.brand .brand__body > *:nth-child(3) { transition-delay: .11s; }
.brand .brand__body > *:nth-child(4) { transition-delay: .14s; }
.brand .brand__body > *:nth-child(5) { transition-delay: .17s; }
.brand .brand__body > *:nth-child(6) { transition-delay: .2s; }
.brand:hover .brand__body > * { transition-delay: 0s; }

/* Chips: respuesta al pasar */
.chips li { transition: background .2s, border-color .2s, color .2s; }
.brand--cut .chips li:hover { border-color: var(--cut); color: var(--ink); }
.brand--filters .chips li:hover { border-color: var(--filters); color: var(--ink); }

/* Checks del programa de distribuidores: el visto se dibuja */
.js-motion .checks:not(.is-in) li::before { transform: scale(0); }
.checks li::before { transition: transform .4s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + .2s); }

/* Pilares y países: realce al pasar */
.pillar { transition: background .3s; }
.pillar:hover { background: #fbfdff; }
.pillar__n { display: inline-block; transition: transform .3s var(--ease-out); }
.pillar:hover .pillar__n { transform: translateX(4px); }
.country { transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.country:hover { transform: translateY(-3px); border-color: rgba(90,169,255,.4); }
.country .flag--lg { transition: transform .4s var(--ease-out); }
.country:hover .flag--lg { transform: rotate(-6deg) scale(1.08); }

/* Footer: el logo vuelve arriba */
.footer__brand a img { transition: transform .3s var(--ease-out), opacity .3s; opacity: .9; }
.footer__brand a:hover img { transform: translateY(-3px); opacity: 1; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero .eyebrow, .hero__lead, .hero__ctas, .hero__strip,
  .hero__title .hl__in, .wa-float { animation: fade .4s ease both !important; }
  .hero__title .hl::after, .wa-float::before, .nav::after { display: none; }
  .js-motion .h2:not(.is-in) { clip-path: none; transform: none; opacity: 0; }
  .js-motion .h2 { transition: opacity .4s ease; }
  .js-motion .h2.is-in { opacity: 1; }
  .js-motion [data-stagger]:not(.is-in) > *,
  .js-motion .brand:not(.is-in) .brand__body > *,
  .js-motion :is(.section .eyebrow, .lead, .head__sub, .brands__sep):not(.is-in) { transform: none; }
  .js-motion :is(.brand__media, .sector):not(.is-in) img { clip-path: none; transform: none; opacity: 0; }
  .js-motion :is(.brand__media, .sector) img { transition: opacity .4s ease; }
  .country:hover, .flags a:hover, .wa-float:hover, .pillar:hover .pillar__n, .country:hover .flag--lg { transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }