/* ═══════════════════════════════════════════════════════════════════════════
   Portada · 2-oct-2026
   ─────────────────────────────────────────────────────────────────────────
   Tres piezas de la home con el acabado de mariaprohibida.com y hygea.mx,
   cada una en su bloque:

     1 · .portada   el escenario de arriba: las seis familias en video
     2 · .eq        la pasarela de equipos dentro de Financiamiento
     3 · carrusel   las promociones, en una fila que se arrastra

   La lógica vive en /js/portada.js. Colores: la escala nl de DESIGN.md, sin
   inventar ninguno. Las duraciones de escena son largas a propósito (ver la
   nota de movimiento.css): las de interfaz siguen en --mov-*.
   ═══════════════════════════════════════════════════════════════════════════ */

.portada, .eq, #promos-section {
  --p-900: #0F2A40; --p-800: #14384F; --p-700: #1E4A6E; --p-600: #2A5870;
  --p-teal: #4AB8C8; --p-teal-deep: #1E7A94; --p-teal-bright: #5EEAD4;
  --p-entra: cubic-bezier(.16, 1, .3, 1);
  --p-cruza: cubic-bezier(.77, 0, .18, 1);
}

/* ══ 1 · PORTADA ══════════════════════════════════════════════════════════
   Teléfono primero (DESIGN.md: el celular es el escenario principal): el
   video arriba y un bloque navy con el titular abajo, como el rojo de María
   Prohibida. En escritorio el video toma la pantalla y el texto se escribe
   en la zona en calma de cada toma —las seis se generaron con el lado
   izquierdo vacío para eso—, con una banda navy de las seis familias al pie. */
.portada {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--p-900);
  color: #fff;
}
.portada__escena {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 54svh;
  width: 100%;
  overflow: hidden;
  background: #E9EFF3;
}
/* z-index 0: los videos se ordenan entre ellos (el que entra va encima del
   que sale) sin brincarse el velo de luz, que vive en ::after. */
.portada__medios { position: absolute; inset: 0; z-index: 0; }
.portada__medios > img,
.portada__medios > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 76% 50%;
  display: block;
}
/* La toma activa respira: entra un 5% más grande y se asienta durante la
   escena. Es el movimiento de cámara que les falta a los clips de 5 s. */
.portada__medios > video {
  opacity: 0;
  transform: scale(1.05);
  transition: transform 6.5s linear;
}
.portada__medios > video.on { opacity: 1; transform: none; }
/* La que entra se revela de derecha a izquierda, con la línea teal en el
   borde: la transición de marca de NORLAB, como la línea verde de Hygea. */
.portada__medios > video.entra { animation: portada-cortina 1.05s var(--p-cruza) both; }
@keyframes portada-cortina { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.portada__barrido {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 3px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--p-teal-bright) 18%, var(--p-teal) 82%, transparent);
  box-shadow: 0 0 22px 4px rgba(94, 234, 212, .55);
}
.portada__barrido.corre { animation: portada-barre 1.05s var(--p-cruza) both; }
@keyframes portada-barre {
  0% { transform: translateX(100vw); opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* Ficha de la escena: qué familia es y qué marcas. «Producto y marca
   siempre» (regla de David para los héroes), y además lleva a la familia. */
.portada__ficha {
  position: absolute; left: 16px; bottom: 18px; z-index: 3;
  display: grid; grid-template-columns: auto auto; align-items: center;
  column-gap: 12px; row-gap: 2px;
  max-width: calc(100% - 32px);
  padding: 10px 14px 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15, 42, 64, .18);
  color: var(--p-900);
  text-decoration: none;
  transition: transform var(--mov-medio, 200ms) var(--curva, ease), box-shadow var(--mov-medio, 200ms) var(--curva, ease);
}
.portada__ficha:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15, 42, 64, .24); }
.portada__ficha-n {
  grid-column: 1; grid-row: 1 / span 2;
  font: 700 11px/1 var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
  letter-spacing: .08em; color: var(--p-teal-deep);
  padding-right: 12px; border-right: 1px solid rgba(15, 42, 64, .14);
  align-self: stretch; display: flex; align-items: center;
}
.portada__ficha-fam { grid-column: 2; grid-row: 1; font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; }
.portada__ficha-marcas { grid-column: 2; grid-row: 2; font-size: 12px; color: #4A6275; line-height: 1.3; }
.portada__ficha-fam, .portada__ficha-marcas { transition: opacity .22s ease, transform .22s ease; }
.portada__ficha.cambia .portada__ficha-fam,
.portada__ficha.cambia .portada__ficha-marcas { opacity: 0; transform: translateY(-6px); }
.portada__ficha svg { display: none; }

/* Seis segmentos en el borde del video: cuánto falta para la siguiente
   familia. En el teléfono reemplazan a la banda de abajo. */
.portada__segs {
  position: absolute; left: 16px; right: 16px; top: 14px; z-index: 3;
  display: flex; gap: 5px; pointer-events: none;
}
.portada__segs span { flex: 1; height: 3px; border-radius: 3px; background: rgba(15, 42, 64, .16); overflow: hidden; }
.portada__segs i { display: block; height: 100%; background: var(--p-900); transform: scaleX(0); transform-origin: 0 50%; }
.portada__segs .hecho i { transform: none; }
.portada__segs .on i { animation: portada-llena var(--dur, 5s) linear both; }
@keyframes portada-llena { from { transform: scaleX(0); } to { transform: none; } }

.portada__caja { padding-top: 26px; padding-bottom: 30px; }
.portada__ojo {
  margin: 0 0 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-teal);
}
.portada__titulo {
  margin: 0;
  font-size: clamp(34px, 9.4vw, 46px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
  color: #fff;
}
.portada__titulo > span { display: block; }
.portada__titulo em { font-style: normal; color: var(--p-teal); }
.portada__desc {
  margin: 14px 0 0; max-width: 34em;
  font-size: 15.5px; line-height: 1.55; color: #B9D0DD;
}
.portada__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.portada__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px; border-radius: 10px;
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform var(--mov-rapido, 120ms) var(--curva, ease), background-color var(--mov-medio, 200ms) var(--curva, ease), box-shadow var(--mov-medio, 200ms) var(--curva, ease), border-color var(--mov-medio, 200ms) var(--curva, ease);
}
.portada__cta:active { transform: scale(.97); }
.portada__cta svg { width: 18px; height: 18px; flex: none; }
.portada__cta .flecha { transition: transform .4s cubic-bezier(.23, 1, .32, 1); }
.portada__cta:hover .flecha { transform: translateX(4px); }
/* Sobre navy, el principal va en teal con texto navy (DESIGN.md, 6.3:1). */
.portada__cta--pri { background: var(--p-teal); color: var(--p-900); flex: 1 1 auto; }
.portada__cta--pri:hover { background: var(--p-teal-bright); box-shadow: 0 10px 28px rgba(74, 184, 200, .35); }
.portada__cta--wa { border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; flex: 1 1 auto; }
.portada__cta--wa svg { color: #25D366; }
.portada__cta--wa:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

.portada__cifras {
  list-style: none; margin: 26px 0 0; padding: 18px 0 0;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.portada__cifras b {
  display: flex; align-items: baseline; gap: 1px;
  font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff;
}
.portada__cifras b > i { font-style: normal; color: var(--p-teal); }
.portada__cifras small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: #93B2C4; max-width: 12em; }

/* La banda de las seis familias es de escritorio; en el teléfono la ficha
   y los segmentos hacen su trabajo. */
.portada__fams { display: none; }

@media (min-width: 960px) {
  .portada {
    height: calc(100svh - var(--cab-inicial, 142px));
    min-height: 520px; max-height: 980px;
    display: flex; flex-direction: column;
    background: #EEF3F6; color: var(--p-900);
  }
  .portada__escena { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; z-index: -1; }
  .portada__medios > img, .portada__medios > video { object-position: 50% 50%; }
  /* El velo es luz, no una franja: se lee como la ventana del laboratorio.
     Medido sobre las seis tomas: el titular navy queda arriba de 9:1. */
  .portada__escena::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(244, 248, 250, .96) 0%, rgba(244, 248, 250, .9) 34%, rgba(244, 248, 250, .7) 48%, rgba(244, 248, 250, 0) 66%),
      linear-gradient(0deg, rgba(15, 42, 64, .22), rgba(15, 42, 64, 0) 22%);
  }
  .portada__segs { display: none; }
  .portada__ficha {
    left: auto; right: max(24px, calc((100vw - 1400px) / 2 + 24px));
    bottom: calc(var(--dock, 78px) + 24px);
    padding: 12px 18px 12px 16px;
    grid-template-columns: auto auto auto;
  }
  .portada__ficha svg { display: block; grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--p-teal-deep); transition: transform .4s cubic-bezier(.23, 1, .32, 1); }
  .portada__ficha:hover svg { transform: translateX(4px); }

  .portada__bloque { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  /* width:100% — dentro de una columna flex, el .container con margin:auto
     se encogía a su contenido y el texto quedaba centrado, encima del producto. */
  .portada__caja { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 32px; padding-bottom: 36px; }
  .portada__texto { max-width: 780px; }
  /* En pantallas anchas el titular va en dos renglones exactos: «Tu
     laboratorio surtido» / «en 24–48 horas». A 80 px pide ~990 px. */
  .portada__titulo > span { white-space: nowrap; }
  .portada__ojo { color: var(--p-teal-deep); font-size: 12px; }
  .portada__titulo { font-size: clamp(46px, 5vw, 80px); color: var(--p-900); }
  .portada__titulo em { color: var(--p-teal-deep); }
  .portada__desc { font-size: 17.5px; color: #3E566A; max-width: 30em; margin-top: 18px; }
  .portada__ctas { margin-top: 28px; }
  .portada__cta { min-height: 54px; padding: 0 26px; font-size: 15.5px; }
  .portada__cta--pri, .portada__cta--wa { flex: 0 0 auto; }
  /* Sobre fondo claro, el principal es el azul canónico (DESIGN.md). */
  .portada__cta--pri { background: var(--p-600); color: #fff; }
  .portada__cta--pri:hover { background: var(--p-700); box-shadow: 0 12px 30px rgba(42, 88, 112, .32); }
  .portada__cta--wa { background: #fff; border-color: rgba(15, 42, 64, .14); color: var(--p-900); box-shadow: 0 2px 8px rgba(15, 42, 64, .06); }
  .portada__cta--wa:hover { border-color: rgba(15, 42, 64, .3); background: #fff; box-shadow: 0 10px 26px rgba(15, 42, 64, .12); }
  .portada__cifras { justify-content: start; gap: 36px; margin-top: 34px; padding-top: 0; border-top: 0; }
  .portada__cifras b { font-size: 36px; color: var(--p-900); }
  .portada__cifras b > i { color: var(--p-teal-deep); }
  .portada__cifras small { color: #4A6275; font-size: 12.5px; }

  /* La banda navy: el bloque de color de la marca, y el índice del escenario.
     Pasar el cursor por una familia la pone en pantalla; el clic lleva a
     ella. Cada una se llena mientras su toma está al aire. */
  .portada__fams {
    display: grid; grid-template-columns: repeat(6, 1fr);
    /* Las etiquetas arrancan a la altura del texto de arriba (.container: 1320 px). */
    padding-inline: max(0px, calc((100% - 1320px) / 2));
    background: var(--p-900);
    position: relative; z-index: 2;
  }
  .portada__fam {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    min-height: var(--dock, 78px); padding: 14px 22px 14px;
    color: rgba(255, 255, 255, .58); text-decoration: none;
    border-left: 1px solid rgba(255, 255, 255, .07);
    transition: color var(--mov-medio, 200ms) var(--curva, ease), background-color var(--mov-medio, 200ms) var(--curva, ease);
  }
  .portada__fam:first-child { border-left: 0; }
  .portada__fam b { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .38); transition: color var(--mov-medio, 200ms) var(--curva, ease); }
  .portada__fam span { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
  .portada__fam:hover { background: var(--p-800); color: #fff; }
  .portada__fam.on { color: #fff; }
  .portada__fam.on b, .portada__fam:hover b { color: var(--p-teal-bright); }
  .portada__fam i {
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--p-teal-bright); transform: scaleX(0); transform-origin: 0 50%;
  }
  .portada__fam.on i { animation: portada-llena var(--dur, 5s) linear both; }
  .portada.en-pausa .portada__fam.on i { animation-play-state: paused; }
}
/* Laptops de 768 px de alto: entre la barra de arriba, el encabezado y el
   menú se van 191 px y a la portada le quedan 577. Todo se aprieta un paso
   para que la banda de familias quede entera en la primera pantalla. */
@media (min-width: 1280px) { .portada__texto { max-width: 1000px; } .portada__desc, .portada__ctas, .portada__cifras { max-width: 640px; } }

@media (min-width: 960px) and (max-height: 820px) {
  .portada { --dock: 64px; }
  .portada__caja { padding-top: 18px; padding-bottom: 22px; }
  .portada__ojo { margin-bottom: 8px; }
  .portada__titulo { font-size: clamp(38px, 3.8vw, 56px); }
  .portada__desc { margin-top: 12px; font-size: 16.5px; }
  .portada__ctas { margin-top: 20px; }
  .portada__cta { min-height: 50px; }
  .portada__cifras { margin-top: 20px; }
  .portada__cifras b { font-size: 28px; }
  .portada__fam { padding-block: 10px; }
}

/* Entrada de la portada al cargar: el titular sube por palabra (movimiento.js
   lo parte) y el resto llega detrás, escalonado. */
.mov .portada__ojo, .mov .portada__desc, .mov .portada__ctas, .mov .portada__cifras, .mov .portada__ficha {
  animation: portada-sube 1s var(--p-entra) both;
}
.mov .portada__ojo { animation-delay: 80ms; }
.mov .portada__desc { animation-delay: 420ms; }
.mov .portada__ctas { animation-delay: 540ms; }
.mov .portada__cifras { animation-delay: 660ms; }
.mov .portada__ficha { animation-delay: 900ms; }
@keyframes portada-sube { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
.portada__titulo .mov-wi { --d: 120ms; }
.mov-espera .portada__titulo { visibility: hidden; }


/* ══ 2 · PASARELA DE EQUIPOS ══════════════════════════════════════════════
   El argumento número uno de NORLAB (PRODUCT.md: el financiamiento propio)
   tenía una foto fija. Ahora es la pasarela de María Prohibida: el cuadro se
   queda fijo y, al bajar, sale un equipo tras otro con su nombre enorme, sus
   datos y su botón. Las cuatro condiciones de financiamiento se quedan
   abajo, quietas: valen para los tres. */

/* overflow:hidden convertía a la sección en contenedor de scroll y el
   cuadro fijo nunca se pegaba. clip recorta igual sin ese efecto. */
#financiamiento.financing-banner { overflow: clip; }
.eq-cab { position: relative; z-index: 1; max-width: 760px; color: #fff; }
.eq-cab .financing-title { color: #fff; }
.eq-cab .financing-desc { color: #B9D0DD; }
.eq-cab .financing-desc { max-width: 40em; }

.eq {
  position: relative; z-index: 1;
  height: calc(100svh + (var(--n, 3) - 1) * 72svh);
  margin-top: var(--ritmo-junto, 28px);
}
.eq__fijo {
  position: sticky; top: var(--cab, 78px);
  height: calc(100svh - var(--cab, 78px));
  max-height: 900px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: center;
  gap: 14px;
  padding-block: 16px;
}
.eq__cuenta {
  display: flex; align-items: center; gap: 12px;
  font: 700 12px/1 var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
  letter-spacing: .12em; color: rgba(255, 255, 255, .62);
}
.eq__cuenta b { color: #fff; font-weight: 800; min-width: 1.4em; }
.eq__barra { flex: 1; max-width: 160px; height: 2px; background: rgba(255, 255, 255, .16); border-radius: 2px; overflow: hidden; }
.eq__barra i { display: block; height: 100%; background: var(--p-teal-bright); transform: scaleX(var(--p, .333)); transform-origin: 0 50%; transition: transform .5s var(--p-entra); }
.eq__saltos { display: flex; gap: 6px; margin-left: auto; }
.eq__salto {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .7);
  font: 700 11px/1 var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
  cursor: pointer;
  transition: background-color var(--mov-medio, 200ms) var(--curva, ease), color var(--mov-medio, 200ms) var(--curva, ease), border-color var(--mov-medio, 200ms) var(--curva, ease);
}
.eq__salto:hover { border-color: #fff; color: #fff; }
.eq__salto[aria-current="true"] { background: var(--p-teal); border-color: var(--p-teal); color: var(--p-900); }

/* El escenario del equipo. Todo va en posición absoluta dentro de la celda:
   la celda mide lo que sobra del cuadro fijo y la foto se ajusta a ella. Con
   la foto en el flujo, en un teléfono de 664 px de alto se encimaba sobre el
   nombre del equipo. */
.eq__visual { position: relative; min-height: 130px; }
.eq__halo {
  position: absolute; left: 50%; top: 50%;
  width: min(92%, 560px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 234, 212, .32) 0%, rgba(74, 184, 200, .12) 38%, rgba(74, 184, 200, 0) 68%);
  transform: translate(-50%, calc(-50% + var(--sp, .5) * -18px));
}
/* El número de la escena, gigante y en contorno, detrás del equipo: la
   tipografía como escenografía, igual que los nombres de María Prohibida. */
.eq__fondo-n {
  position: absolute; left: 50%; top: 50%;
  font-size: clamp(150px, 46vw, 300px); font-weight: 800; line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .13);
  user-select: none; pointer-events: none;
  transform: translate(calc(-50% + (var(--sp, .5) - .5) * -60px), -50%);
  transition: opacity .4s ease;
}
.eq__fondo-n.cambia { opacity: 0; }
.eq__foto {
  position: absolute; left: 0; right: 0; top: 4%; bottom: 8%; z-index: 1;
  width: 100%; height: 88%;
  object-fit: contain;
  opacity: 0; visibility: hidden;
  transform: translate3d(9%, 0, 0) scale(.94); filter: blur(8px);
  transition: opacity .55s ease, transform .9s var(--p-entra), filter .7s var(--p-entra), visibility 0s linear .9s;
}
.eq__foto.on {
  opacity: 1; visibility: visible; filter: none;
  transform: translate3d(0, calc((.5 - var(--sp, .5)) * 26px), 0) scale(1);
  transition: opacity .6s ease .12s, transform .9s var(--p-entra) .12s, filter .7s var(--p-entra) .12s, visibility 0s;
}
.eq__foto.sale { transform: translate3d(-9%, 0, 0) scale(.94); }
.eq__piso {
  position: absolute; left: 50%; bottom: 3%; z-index: 0;
  width: min(70%, 420px); height: 26px;
  transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(ellipse, rgba(3, 14, 24, .55), rgba(3, 14, 24, 0) 70%);
}

/* El texto de cada equipo. Los tres viven apilados en la misma celda: la
   celda mide lo del más alto y nada brinca al cambiar. */
.eq__infos { display: grid; }
.eq__info { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear .45s; }
.eq__info.on { visibility: visible; transition: none; }
.eq__marca {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--p-teal-bright);
}
.eq__nombre {
  margin: 4px 0 0;
  font-size: clamp(34px, 9vw, 76px); font-weight: 800; line-height: .98; letter-spacing: -.035em;
  color: #fff;
}
.eq__tipo { margin: 8px 0 0; font-size: 15px; color: #B9D0DD; }
.eq__marca, .eq__tipo, .eq__chips, .eq__acc {
  opacity: 0; translate: 0 12px;
  transition: opacity .35s ease, translate .35s ease;
}
.eq__info.on .eq__marca, .eq__info.on .eq__tipo, .eq__info.on .eq__chips, .eq__info.on .eq__acc {
  opacity: 1; translate: none;
  transition: opacity .7s var(--p-entra), translate .9s var(--p-entra);
}
.eq__info.on .eq__marca { transition-delay: .1s; }
.eq__info.on .eq__tipo { transition-delay: .32s; }
.eq__info.on .eq__chips { transition-delay: .42s; }
.eq__info.on .eq__acc { transition-delay: .52s; }
/* El nombre sube palabra por palabra al entrar, y baja al salir. */
.eq__nombre .mov-wi { transform: translateY(112%); transition: transform .45s cubic-bezier(.55, 0, .7, .2); }
.eq__info.on .eq__nombre .mov-wi { transform: none; transition: transform 1s cubic-bezier(.19, 1, .22, 1) calc(.16s + var(--i, 0) * 60ms); }
.mov-quieto .eq__nombre .mov-wi { transform: none !important; }

.eq__chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.eq__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; color: #E3EFF5;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.eq__chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--p-teal-bright); flex: none; }
.eq__chip--vivo { color: var(--p-900); background: var(--p-teal-bright); border-color: transparent; }
.eq__chip--vivo::before { background: var(--p-900); }
.eq__chip[hidden] { display: none; }
.eq__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.eq__cotiza {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border-radius: 10px;
  background: var(--p-teal); color: var(--p-900);
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background-color var(--mov-medio, 200ms) var(--curva, ease), box-shadow var(--mov-medio, 200ms) var(--curva, ease), transform var(--mov-rapido, 120ms) var(--curva, ease);
}
.eq__cotiza svg { width: 18px; height: 18px; }
.eq__cotiza:hover { background: var(--p-teal-bright); box-shadow: 0 10px 26px rgba(94, 234, 212, .28); }
.eq__cotiza:active { transform: scale(.97); }
.eq__ver {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.eq__ver svg { width: 15px; height: 15px; transition: transform .4s cubic-bezier(.23, 1, .32, 1); }
.eq__ver:hover svg { transform: translateX(4px); }

/* Las cuatro condiciones, iguales para los tres equipos */
.eq__datos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.eq__dato {
  padding: 10px 10px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.eq__dato b {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; white-space: nowrap;
}
.eq__dato b > i { font-style: normal; font-size: .52em; font-weight: 700; color: var(--p-teal-bright); letter-spacing: 0; }
.eq__dato b > u { text-decoration: none; font-size: .7em; color: var(--p-teal-bright); }
.eq__dato-t { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; line-height: 1.25; color: #A9C8D8; }
.eq__dato small { display: none; }

@media (max-width: 959px) {
  /* En el teléfono el valor de $500,000 no cabe en un cuarto de pantalla. */
  .eq__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq__fijo { gap: 10px; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  /* Primero el equipo y luego su nombre, como la pasarela de María
     Prohibida en el teléfono: la foto arriba, el texto abajo. */
  .eq__visual { order: 1; }
  .eq__infos { order: 2; }
  .eq__datos { order: 3; }
  /* «Cotizar» y «Ver el equipo» en un solo renglón a 358 px. */
  .eq__acc { gap: 8px 14px; margin-top: 14px; }
  .eq__cotiza { min-height: 46px; padding: 0 16px; font-size: 14.5px; }
  .eq__ver { font-size: 14px; }
}
@media (max-width: 959px) and (max-height: 700px) {
  .eq__chips { display: none; }
  .eq__dato-t { display: none; }
}

@media (min-width: 960px) {
  .eq { height: calc(100svh + (var(--n, 3) - 1) * 80svh); }
  .eq__fijo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 48px; row-gap: 22px;
    padding-block: 28px 30px;
  }
  .eq__cuenta { grid-column: 1 / -1; }
  .eq__infos { grid-column: 1; grid-row: 2; align-self: center; }
  .eq__visual { grid-column: 2; grid-row: 2; }
  .eq__datos { grid-column: 1 / -1; grid-row: 3; gap: 12px; }
  .eq__foto { top: 6%; bottom: 10%; height: 84%; }
  .eq__fondo-n { font-size: clamp(220px, 26vw, 420px); }
  .eq__dato { padding: 16px 18px; border-radius: 16px; }
  .eq__dato b { font-size: 28px; }
  .eq__dato-t { font-size: 13px; color: #fff; }
  .eq__dato small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: #93B2C4; }
  .eq__tipo { font-size: 17px; }
  .eq__chip { font-size: 13px; padding: 8px 14px; }
  .eq__acc { margin-top: 26px; }
}
@media (min-width: 960px) and (max-height: 780px) {
  .eq__dato { padding: 12px 16px; }
  .eq__dato small { display: none; }
  .eq__nombre { font-size: clamp(34px, 5vw, 60px); }
}


/* ══ 3 · PROMOCIONES EN CARRUSEL ══════════════════════════════════════════
   Seis piezas 4:5 apiladas medían cinco pantallas en el teléfono. En fila,
   una pantalla: se arrastran con el dedo o con el mouse, con flechas y una
   barra que dice cuánto falta. promos-web.js reescribe el className del
   grid al pintar desde el OS, así que todo cuelga de la SECCIÓN, no del grid. */
#promos-section .promos-cab {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  max-width: 1180px; margin: 0 auto 26px;
}
#promos-section .promos-cab__ojo {
  display: inline-block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p-teal-bright);
}
#promos-section .promos-cab h2 { margin: 0; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: #fff; }
#promos-section .promos-cab p { margin: 8px 0 0; font-size: 15px; color: #A9C8D8; }
.promos-ctl { display: none; align-items: center; gap: 8px; flex: none; }
.carrusel-listo .promos-ctl { display: flex; }
.promos-flecha {
  width: 46px; height: 46px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .24); background: transparent; color: #fff; cursor: pointer;
  transition: background-color var(--mov-medio, 200ms) var(--curva, ease), border-color var(--mov-medio, 200ms) var(--curva, ease), opacity var(--mov-medio, 200ms) var(--curva, ease), transform var(--mov-rapido, 120ms) var(--curva, ease);
}
.promos-flecha svg { width: 18px; height: 18px; }
.promos-flecha:hover:not(:disabled) { background: #fff; color: var(--p-900); border-color: #fff; }
.promos-flecha:active:not(:disabled) { transform: scale(.94); }
.promos-flecha:disabled { opacity: .3; cursor: default; }

#promos-section.carrusel-listo #promos-grid.promos-mosaico {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  max-width: none !important;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Sale del contenedor hasta la orilla de la pantalla, pero la primera
     pieza queda alineada con el texto de arriba. --orilla la mide
     portada.js: en scroll-padding el % se toma del propio carrusel, no del
     contenedor, y con calc(50vw - 50%) el imán dejaba la primera pieza
     pegada a la orilla. */
  margin-inline: calc(-1 * var(--orilla, 16px)) !important;
  padding: 4px var(--orilla, 16px) 18px !important;
  scroll-padding-inline: var(--orilla, 16px);
}
#promos-section.carrusel-listo #promos-grid::-webkit-scrollbar { display: none; }
#promos-section.carrusel-listo .promo-pieza { flex: 0 0 min(84vw, 360px); scroll-snap-align: start; }
#promos-section.carrusel-listo #promos-grid.arrastra { scroll-snap-type: none; cursor: grabbing; }
#promos-section.carrusel-listo #promos-grid.arrastra .promo-pieza { pointer-events: none; }
#promos-section { overflow-x: clip; }
.promos-avance { max-width: 1180px; margin: 6px auto 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; display: none; }
.carrusel-listo .promos-avance { display: block; }
.promos-avance i { display: block; height: 100%; width: 30%; background: var(--p-teal-bright); border-radius: 2px; transition: transform .2s linear, width .2s linear; }
@media (min-width: 1024px) {
  #promos-section.carrusel-listo .promo-pieza { flex-basis: calc((min(1180px, 100vw - 48px) - 32px) / 3); }
  #promos-section.carrusel-listo #promos-grid.promos-mosaico { gap: 16px !important; }
}
@media (max-width: 639px) {
  #promos-section .promos-cab { align-items: flex-start; }
  .promos-flecha { display: none; }
}

/* Las dos salidas de siempre (solicitud en línea y asesor), debajo de la
   pasarela: ya viste los equipos, ahora el trámite. */
.eq-otras {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: var(--ritmo-junto, 28px) 0 var(--ritmo, 48px);
}
/* Clases propias: las de antes (.financing-cta-float) traen 19 px, 48 px de
   relleno y width:100% en el teléfono, pensadas para otra columna. */
.eq-otras__pri, .eq-otras__sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 24px; border-radius: 10px;
  font-size: 15.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color var(--mov-medio, 200ms) var(--curva, ease), border-color var(--mov-medio, 200ms) var(--curva, ease), box-shadow var(--mov-medio, 200ms) var(--curva, ease), transform var(--mov-rapido, 120ms) var(--curva, ease);
}
.eq-otras__pri svg { width: 18px; height: 18px; }
.eq-otras__pri { background: #fff; color: var(--p-900); }
.eq-otras__pri:hover { background: var(--p-teal-bright); box-shadow: 0 12px 30px rgba(94, 234, 212, .25); }
.eq-otras__sec { color: #fff; border: 1.5px solid rgba(255, 255, 255, .32); }
.eq-otras__sec:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.eq-otras__pri:active, .eq-otras__sec:active { transform: scale(.97); }
@media (max-width: 479px) { .eq-otras__pri, .eq-otras__sec { flex: 1 1 100%; } }

/* Menos movimiento: la pasarela cambia de equipo sin transiciones. */
.mov-quieto .eq__foto, .mov-quieto .eq__info, .mov-quieto .eq__info *, .mov-quieto .eq__fondo-n,
.mov-quieto .portada__ficha-fam, .mov-quieto .portada__ficha-marcas { transition: none !important; filter: none !important; }
.mov-quieto .portada__ojo, .mov-quieto .portada__desc, .mov-quieto .portada__ctas,
.mov-quieto .portada__cifras, .mov-quieto .portada__ficha { animation: none !important; }

/* Sin JavaScript la pasarela no se pega: se ve el primer equipo y ya. */
.eq:not(.vivo) { height: auto; }
.eq:not(.vivo) .eq__fijo { position: relative; top: 0; height: auto; }