/* ==========================================================================
   vitaralink.com — v7 (prototipo en index-v7.html, octubre 2026)
   Componentes nuevos de la propuesta PROPUESTA-UX-V4.md: franja índice del
   hero, capítulos 01/02/03 (uno por servicio), cuadrícula de pantallas y
   "Hoy / después" en tres filas. Se carga DESPUÉS de styles.css y de
   hero-mar-claro.css. Solo usa los tokens de styles.css (:root). Sin
   !important, sin estilos inline, sin degradados de fondo.
   ========================================================================== */

/* Franja índice (hero) ----------------------------------------------------- */
/* Tres piezas numeradas bajo el hero: 01 Páginas web · 02 Aplicaciones ·
   03 Tiendas Shopify. Cada una es un enlace que baja a su capítulo. En móvil
   y tablet va después de la escena 3D (order 3, hero en columna); en
   escritorio (≥ 1024 px) queda en la columna izquierda, bajo el texto. */
.hero-mar__indice {
  position: relative;
  z-index: 2;
  order: 3;
  margin-top: var(--space-3);
  padding-bottom: var(--space-5);
}

.indice {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border-light);
  /* Es navegación: entra rápido y sin desenfoque (solo opacidad y 8 px),
     justo después del botón principal. */
  animation: v7-indice-entra 0.45s var(--ease-out) 0.5s both;
}

@keyframes v7-indice-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Fila: número · nombre + resultado · flecha. min-height ≥ 44 px (objetivo
   táctil); la fila crece si el texto parte en dos líneas. */
.indice__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-dark);
  text-decoration: none;
  text-align: left;
  transition: transform 160ms var(--ease-out);
}

.indice__item:active {
  transform: scale(0.985);
}

.indice__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Número con el estilo de .tag; se quita el margen de abajo de la etiqueta y
   se fija un ancho para que los tres nombres queden alineados. */
.indice__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.indice__nombre {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text-dark);
  transition: color 160ms var(--ease-out);
}

.indice__resultado {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-body);
}

.indice__item .ico--arrow {
  flex-shrink: 0;
  color: var(--color-primary-ink);
}

/* Hover decorativo solo con puntero fino: en táctil el tap no deja la fila
   "encendida". El movimiento de la flecha lo da a:hover .ico--arrow. */
@media (hover: hover) and (pointer: fine) {
  .indice__item:hover .indice__nombre {
    color: var(--color-primary-ink);
  }
}

/* Las dos tiendas reales, enlazadas desde el lead: se ven como enlace. */
@media (min-width: 1024px) {
  /* Misma columna que el texto: alineada a la izquierda, bajo el intro. */
  .hero-mar__indice {
    margin-top: var(--space-3);
    padding-bottom: 0;
  }

  .indice {
    margin-left: 0;
  }

  /* Fila compacta: nombre y resultado en la misma línea (parte en dos si
     no caben). Tres filas = ~135 px. */
  .indice__item {
    padding: 10px 4px;
  }

  .indice__texto {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
  }

  /* Para que título, lead, botón, nota, WhatsApp y las tres filas quepan a
     1440×900 sin empujar la franja fuera del hero: menos aire entre bloques
     (nunca el título más chico). */
  .hero-mar {
    padding-top: calc(var(--nav-offset) + 16px);
    padding-bottom: var(--space-5);
  }

  .hero-mar__titulo {
    margin-top: var(--space-2);
  }

  .hero-mar .btn-row {
    margin-top: var(--space-3);
    margin-bottom: 12px; /* la nota, ahora en línea, no lleva margen propio */
  }

  /* Nota y WhatsApp, cada uno en su línea. */
  .hero-mar__nota {
    margin: 0;
  }

  .hero-mar .alt-contact {
    margin-top: 4px;
  }

  /* El enlace conserva 45 px de alto pulsable (padding) sin agrandar la línea
     de texto (el margen negativo lo compensa). */
  .hero-mar .alt-contact a {
    min-height: 0;
    padding: 12px 0;
    margin: -12px 0;
    vertical-align: baseline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .indice {
    animation: none;
  }

  .indice__item,
  .indice__nombre {
    transition: none;
  }

  /* El pulsado se expresa con opacidad, como en css/v7-pulido.css §9. */
  .indice__item:active {
    transform: none;
    opacity: 0.72;
  }
}

/* Capítulos (01 Páginas web · 02 Aplicaciones · 03 Tiendas Shopify) -------- */
/* PROPUESTA-UX-V4.md §4 y §7. Un capítulo por servicio, mismo esqueleto:
   número + palabra gigante (izquierda), frase fuerte/atenuada + tres
   incluidos (derecha en ≥ 1024 px, abajo alineados con la palabra), la
   prueba a todo el ancho y un botón ancho con borde al cierre. Texto a la
   izquierda, nunca centrado. 02 va en oscuro (.is-dark) con la rejilla. */
.cap__cabecera {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  text-align: left;
}

/* Más grande que el H1 del hero: es el único lugar donde pasa. En em el
   tracking escala con el tamaño. El relleno de abajo deja sitio al
   descendente de "página" (line-height 0.98) para que el clip de la
   aparición no lo corte. */
.cap__palabra {
  margin: 0;
  padding-bottom: 0.08em;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--color-text-dark);
}

.cap.is-dark .cap__palabra {
  color: var(--color-white);
}

.cap__texto {
  display: grid;
  gap: var(--space-3);
}

/* Frase: primera oración fuerte (#111 / blanco), la segunda atenuada
   (#6b6b6b / 55 % blanco), mismo tamaño, misma línea. */
.cap__frase {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text-body);
}

/* La itálica de marca (dos palabras) nunca se parte entre líneas. */
.cap__frase .accent {
  white-space: nowrap;
}

.cap__frase strong {
  font-weight: 900;
  color: var(--color-text-dark);
}

.cap__atenuado {
  font-weight: 500;
  color: var(--color-text-body);
}

.cap.is-dark .cap__frase,
.cap.is-dark .cap__atenuado {
  color: var(--color-text-muted);
}

.cap.is-dark .cap__frase strong {
  color: var(--color-white);
}

/* Tres incluidos: lista sin viñetas, palomita azul. */
.cap__prueba {
  margin-bottom: var(--space-4);
}

/* Prueba 01: el render (MacBook con Google + iPhone con llamada) en una
   tarjeta con la rejilla de marca, como .real__media. La escena 3D de hover
   (data-escena="tarjeta-web") se monta encima del póster. */
.cap__tarjeta {
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  background-color: #f2f4f7;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  overflow: hidden;
}

.cap__escena {
  display: block;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1000 / 1080;
  border-radius: 0;
  overflow: hidden;
}

/* En tablet y escritorio el render se recorta a 4:3 (el póster tiene aire
   arriba y abajo) para que la tarjeta no sea más alta que ancha. El lienzo 3D
   se agranda en vertical con el mismo recorte (0.75 + 2 × 0.165 = 1.08 de
   alto por ancho), así el hover no salta. */
@media (min-width: 768px) {
  .cap__escena {
    max-width: 960px;
    aspect-ratio: 4 / 3;
  }

  .cap__escena .escena__poster img {
    object-fit: cover;
  }

  .cap__escena .escena3d {
    inset: -22% 0;
  }
}

/* Prueba 02 (oscuro): cuadrícula de pantallas reales con nombre, estilo
   "See in action". Dos columnas en móvil y tablet, cuatro en escritorio.
   El teléfono se recorta por abajo (se ve el 64 % de arriba: encabezado y
   primer bloque de cada pantalla) para que las tarjetas queden bajas. */
.cap__pantallas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap__pantalla {
  display: flex;
  margin: 0;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.cap__pantalla figure {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 16px 14px 0;
}

.cap__pantalla-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.1px;
  color: var(--color-white);
}

.cap__pantalla-nombre .ico {
  width: 18px;
  height: 18px;
  color: var(--color-primary-light);
}

.cap__pantalla-tel {
  display: block;
  width: 100%;
  max-width: 250px;
  /* margin-top auto: si el nombre parte en dos líneas, el teléfono baja al
     fondo igual que el de al lado y la fila queda pareja. */
  margin: auto auto 0;
  aspect-ratio: 1 / 1.3;
  overflow: hidden;
}

.cap__pantalla-tel img {
  display: block;
  width: 100%;
  height: auto;
}

/* Prueba 03: las dos tiendas reales (.reales/.real de styles.css) más
   compactas: sin párrafo largo y con el panel del render más bajo. El póster
   es 4:3 con aire arriba y abajo; cover lo recorta sin deformar. */
.cap .real__media .escena--real {
  aspect-ratio: 16 / 10;
}

.cap .real__media .escena__poster img {
  object-fit: cover;
}

/* Las dos tarjetas miden lo mismo; los enlaces van al fondo en las dos
   aunque una tenga los datos en dos filas y la otra en una. */
.cap .real__body {
  flex: 1 1 auto;
  padding-bottom: 22px;
}

.cap .real__links {
  align-self: end;
}

/* Botón ancho con borde al cierre: a todo el ancho del container. Hover
   solo con puntero fino (fondo), pulsación con scale. La flecha se mueve
   con la regla a:hover .ico--arrow de styles.css. */
.cap__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 14px 20px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-primary-ink);
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.cap__cta .ico--arrow {
  width: 22px;
  height: 22px;
}

.cap.is-dark .cap__cta {
  border-color: var(--color-border-dark);
  color: var(--color-primary-light);
}

.cap__cta:active {
  transform: scale(0.985);
}

.cap__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .cap__cta:hover {
    background-color: #f5f6f8;
  }

  .cap.is-dark .cap__cta:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }
}

/* Enlace de texto bajo el botón (02: "Probar el ejemplo"). */
/* Aparición de la palabra gigante: una sola vez al entrar en vista
   (js/v7.js añade .is-visible). Solo con JS; con movimiento reducido se ve
   desde el inicio. El margen negativo del inset deja fuera del recorte los
   trazos que sobresalen de la caja (descendentes, tracking negativo). */
/* La clase .v7-palabras la pone js/v7.js al arrancar: si ese archivo no
   carga, la palabra se ve normal (nunca queda recortada). */
.v7-palabras .cap__palabra {
  clip-path: inset(-0.2em -0.2em 100% -0.2em);
  transition: clip-path 400ms var(--ease-out);
}

.v7-palabras .cap__palabra.is-visible {
  clip-path: inset(-0.2em -0.2em -0.2em -0.2em);
}

@media (min-width: 768px) {
  .cap__cabecera {
    margin-bottom: var(--space-6);
  }

  .cap__pantallas {
    gap: var(--space-3);
  }

  .cap__pantalla figure {
    padding: 20px 20px 0;
  }

  .cap__pantalla-nombre {
    font-size: 15px;
  }

  .cap__prueba {
    margin-bottom: var(--space-5);
  }

  .cap__tarjeta {
    padding: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .cap__pantallas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .v7-palabras .cap__palabra {
    clip-path: none;
    transition: none;
  }

  .cap__cta {
    transition: none;
  }

  .cap__cta:active {
    transform: none;
    opacity: 0.72;
  }
}

/* Hoy y después ------------------------------------------------------------ */
/* PROPUESTA-UX-V4.md §8. Sección oscura (#caminos) con tres filas, una por
   servicio: número + nombre | celda "Hoy" (x atenuada) | celda "Con
   vitaralink.com" (palomita azul). En móvil cada fila se apila y cada celda
   muestra su etiqueta; en ≥ 900 px las etiquetas de las celdas quedan solo
   para el lector de pantalla y aparece una fila de cabecera (aria-hidden)
   con los dos encabezados de columna. Nada es interactivo: sin hover. */
.hoy {
  --hoy-columnas: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 920px;
  margin: 0 auto;
}

.hoy__cabecera {
  display: none;
}

.hoy__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-dark);
}

.hoy__fila {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-dark);
}

/* El número hereda .tag (.is-dark .tag → azul claro); sin el margen de abajo
   de la etiqueta, alineado a la línea del nombre. */
/* Celda: etiqueta (fila completa) y debajo icono + texto. */
.hoy__celda {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: start;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.hoy__etiqueta {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--color-text-muted);
}

.hoy__ico {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  stroke-width: 2.5;
}

.hoy__celda--hoy .hoy__ico {
  color: rgba(255, 255, 255, 0.35);
}

.hoy__celda--hoy .hoy__texto {
  color: var(--color-text-muted-strong);
}

.hoy__celda--despues .hoy__ico {
  color: var(--color-primary-light);
}

.hoy__celda--despues .hoy__texto {
  color: var(--color-white);
}

/* Nombre de marca: TTArtNik, con OpenSauceOne detrás mientras el archivo de
   la fuente no esté en assets/fonts/ (hoy no hay @font-face para TTArtNik). */
.marca {
  /* CLAUDE.md pide TTArtNik, pero el archivo no está en assets/fonts/: no
     se declara una familia que no existe. Cuando llegue el .woff2, añadir
     su @font-face y la font-family aquí. */
  white-space: nowrap;
  letter-spacing: 0.3px;
}

@media (min-width: 900px) {
  /* Fila de cabecera: mismas columnas que las filas. */
  .hoy__cabecera {
    display: grid;
    grid-template-columns: var(--hoy-columnas);
    gap: var(--space-4);
    padding-bottom: 14px;
  }

  /* Los encabezados arrancan donde arranca el texto de las celdas (icono
     de 22 px + 12 px de hueco), no donde el icono. */
  .hoy__col {
    padding-left: 34px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: var(--color-text-muted);
  }

  .hoy__col--despues {
    color: var(--color-white);
  }

  .hoy__fila {
    grid-template-columns: var(--hoy-columnas);
    gap: var(--space-4);
    align-items: start;
    padding: 28px 0;
  }

  /* El nombre comparte la primera línea con el texto de las celdas. */
  .hoy__celda {
    position: relative;
    font-size: 17px;
  }

  /* La etiqueta de cada celda queda solo para lectores de pantalla: la
     cabecera de arriba ya la muestra. Mismo patrón que .sr-only. */
  .hoy__etiqueta {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .hoy__ico {
    margin-top: 2px;
  }
}

/* Ejemplos vivos (capítulo 02) ---------------------------------------------- */
/* Cada teléfono cuenta lo que hace, una sola vez, cuando su tarjeta entra en
   vista (js/v7.js añade .is-vivo a la tarjeta). Propósito: explicación.
   - Órdenes: un dedo toca la última tarea y queda marcada.
   - Reportes: las barras de la semana crecen.
   - Cotizador: los conceptos aparecen uno por uno hasta el total.
   - Agenda: el dedo elige el día 17 y luego las 10:30.
   Las capas van encima de la captura (assets/img/pant-*.webp, 600 × 1212):
   todas las posiciones son % de ese lienzo. Las "tapas" son del color del
   fondo de la pantalla (#fcfbfc, medido en la captura) y se retiran para
   descubrir lo que hay debajo. Sin JS, sin IntersectionObserver o con
   movimiento reducido no hay capas: se ve la captura tal cual.
   Orden: las cuatro historias arrancan escalonadas (--t0), para que el ojo
   las siga de izquierda a derecha. */
:root {
  /* Curva fuerte de entrada-salida para lo que se mueve en pantalla
     (skill emil-design-eng). styles.css solo trae --ease-out. */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.cap__pantalla:nth-child(1) { --t0: 0.35s; }
.cap__pantalla:nth-child(2) { --t0: 0.55s; }
.cap__pantalla:nth-child(3) { --t0: 0.75s; }
.cap__pantalla:nth-child(4) { --t0: 0.95s; }

.pant-vivo__tel {
  position: relative;
  display: block;
}

.pant-vivo {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v7-vivo .pant-vivo {
  display: block;
}

/* El teléfono sube desde el borde de su tarjeta, escalonado 60 ms. */
.v7-vivo .pant-vivo__tel {
  transform: translateY(10%);
}

.v7-vivo .is-vivo .pant-vivo__tel {
  transform: none;
  transition: transform 700ms var(--ease-out);
}

.v7-vivo .cap__pantalla:nth-child(2).is-vivo .pant-vivo__tel { transition-delay: 60ms; }
.v7-vivo .cap__pantalla:nth-child(3).is-vivo .pant-vivo__tel { transition-delay: 120ms; }
.v7-vivo .cap__pantalla:nth-child(4).is-vivo .pant-vivo__tel { transition-delay: 180ms; }

/* Tapa: rectángulo del color del fondo de la pantalla. */
.pant-vivo__tapa {
  position: absolute;
  background-color: #fcfbfc;
}

/* Dedo: indicador de toque como el de las grabaciones de iOS. 48 px del
   lienzo (8 % de ancho); se coloca por su esquina y se centra en el blanco. */
.pant-vivo__dedo,
.pant-vivo__onda {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
}

.pant-vivo__dedo {
  background-color: rgba(17, 17, 17, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Onda del toque: un aro azul que se abre y se apaga. Va con fill
   forwards (no both): mientras espera su turno se queda en opacity 0. */
.pant-vivo__onda {
  border: 2px solid var(--color-primary);
}

@keyframes pv-onda {
  from {
    opacity: 0.6;
    transform: scale(0.9);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* Órdenes: casilla "Prueba de arranque" (106, 582; 34 px) y su toque
   (centro 123, 599). */
.pant-vivo--ordenes .pant-vivo__dedo,
.pant-vivo--ordenes .pant-vivo__onda {
  left: 16.5%;
  top: 47.44%;
}

.pant-vivo__check {
  position: absolute;
  left: 17.67%;
  top: 48.02%;
  width: 5.67%;
  aspect-ratio: 1;
  border-radius: 22%;
  background-color: #1a7fe5;
  opacity: 0;
  transform: scale(0.9);
}

.pant-vivo__check svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

@keyframes pv-toque {
  0% { opacity: 0; transform: scale(1.15); }
  20% { opacity: 1; transform: scale(1); }
  40% { transform: scale(1); }
  48% { transform: scale(0.86); }
  58% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes pv-aparece {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pv-traza {
  to {
    stroke-dashoffset: 0;
  }
}

/* El toque cae al 48 % de 1.2 s (0.58 s): ahí se marca la casilla. */
.is-vivo .pant-vivo--ordenes .pant-vivo__dedo {
  animation: pv-toque 1.2s var(--ease-out) var(--t0) both;
}

.is-vivo .pant-vivo--ordenes .pant-vivo__onda {
  animation: pv-onda 500ms var(--ease-out) calc(var(--t0) + 0.58s) forwards;
}

.is-vivo .pant-vivo__check {
  animation: pv-aparece 160ms var(--ease-out) calc(var(--t0) + 0.58s) both;
}

.is-vivo .pant-vivo__check svg {
  animation: pv-traza 260ms var(--ease-out) calc(var(--t0) + 0.64s) both;
}

/* Reportes: una tapa por barra (de 385 a 638 px de alto, 56 px de ancho).
   Se encoge hacia arriba y la barra queda al descubierto desde la base:
   crece. 60 ms entre barras, de lunes a domingo. */
.pant-vivo--reportes .pant-vivo__tapa {
  top: 31.77%;
  width: 9.33%;
  height: 20.87%;
  transform-origin: top;
}

.pant-vivo__tapa--b1 { left: 13.17%; }
.pant-vivo__tapa--b2 { left: 23.83%; }
.pant-vivo__tapa--b3 { left: 34.17%; }
.pant-vivo__tapa--b4 { left: 44.67%; }
.pant-vivo__tapa--b5 { left: 55.17%; }
.pant-vivo__tapa--b6 { left: 65.83%; }
.pant-vivo__tapa--b7 { left: 76.33%; }

@keyframes pv-barra {
  to {
    transform: scaleY(0);
  }
}

.is-vivo .pant-vivo--reportes .pant-vivo__tapa {
  animation: pv-barra 700ms var(--ease-out) var(--t0) both;
}

.is-vivo .pant-vivo--reportes .pant-vivo__tapa--b2 { animation-delay: calc(var(--t0) + 60ms); }
.is-vivo .pant-vivo--reportes .pant-vivo__tapa--b3 { animation-delay: calc(var(--t0) + 120ms); }
.is-vivo .pant-vivo--reportes .pant-vivo__tapa--b4 { animation-delay: calc(var(--t0) + 180ms); }
.is-vivo .pant-vivo--reportes .pant-vivo__tapa--b5 { animation-delay: calc(var(--t0) + 240ms); }
.is-vivo .pant-vivo--reportes .pant-vivo__tapa--b6 { animation-delay: calc(var(--t0) + 300ms); }
.is-vivo .pant-vivo--reportes .pant-vivo__tapa--b7 { animation-delay: calc(var(--t0) + 360ms); }

/* Cotizador: tapas sobre cada concepto, el subtotal y el total; las líneas
   divisorias quedan a la vista como guía. Se retiran de arriba abajo, 170 ms
   entre una y otra: la cotización se arma sola. */
.pant-vivo--cotizador .pant-vivo__tapa {
  left: 12.67%;
  width: 74%;
}

.pant-vivo__tapa--f1 { top: 32.01%; height: 4.87%; }
.pant-vivo__tapa--f2 { top: 39.19%; height: 4.7%; }
.pant-vivo__tapa--f3 { top: 46.37%; height: 4.54%; }
.pant-vivo__tapa--f4 { top: 52.97%; height: 5.45%; }
.pant-vivo__tapa--f5 { top: 59.57%; height: 4.62%; }

@keyframes pv-retira {
  to {
    opacity: 0;
  }
}

.is-vivo .pant-vivo--cotizador .pant-vivo__tapa {
  animation: pv-retira 280ms var(--ease-out) var(--t0) both;
}

.is-vivo .pant-vivo--cotizador .pant-vivo__tapa--f2 { animation-delay: calc(var(--t0) + 170ms); }
.is-vivo .pant-vivo--cotizador .pant-vivo__tapa--f3 { animation-delay: calc(var(--t0) + 340ms); }
.is-vivo .pant-vivo--cotizador .pant-vivo__tapa--f4 { animation-delay: calc(var(--t0) + 510ms); }
.is-vivo .pant-vivo--cotizador .pant-vivo__tapa--f5 { animation-delay: calc(var(--t0) + 680ms); }

/* Agenda: el dedo toca el 17 (centro 420, 562), viaja a las 10:30 (centro
   293, 718) y toca otra vez. El viaje va en % de su propio tamaño (48 px):
   -127 px = -264.58 %, +156 px = 325 %. Toques al 25 % y al 73 % de 1.9 s. */
.pant-vivo--agenda .pant-vivo__dedo,
.pant-vivo--agenda .pant-vivo__onda {
  left: 66%;
  top: 44.39%;
}

.pant-vivo--agenda .pant-vivo__onda--hora {
  left: 44.83%;
  top: 57.26%;
}

@keyframes pv-agenda {
  0% { opacity: 0; transform: translate(0, 0) scale(1.15); }
  10% { opacity: 1; transform: translate(0, 0) scale(1); }
  20% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(0, 0) scale(0.86); }
  31% { transform: translate(0, 0) scale(1); }
  36% { transform: translate(0, 0) scale(1); animation-timing-function: var(--ease-in-out); }
  62% { transform: translate(-264.58%, 325%) scale(1); }
  68% { transform: translate(-264.58%, 325%) scale(1); }
  73% { transform: translate(-264.58%, 325%) scale(0.86); }
  79% { transform: translate(-264.58%, 325%) scale(1); }
  90% { opacity: 1; transform: translate(-264.58%, 325%) scale(1); }
  100% { opacity: 0; transform: translate(-264.58%, 325%) scale(1); }
}

.is-vivo .pant-vivo--agenda .pant-vivo__dedo {
  animation: pv-agenda 1.9s var(--ease-out) var(--t0) both;
}

.is-vivo .pant-vivo--agenda .pant-vivo__onda {
  animation: pv-onda 500ms var(--ease-out) calc(var(--t0) + 0.475s) forwards;
}

.is-vivo .pant-vivo--agenda .pant-vivo__onda--hora {
  animation-delay: calc(var(--t0) + 1.39s);
}

/* Movimiento reducido: js/v7.js no activa nada; esto es la red de
   seguridad por si la preferencia cambia con la página abierta. */
@media (prefers-reduced-motion: reduce) {
  .v7-vivo .pant-vivo {
    display: none;
  }

  .v7-vivo .pant-vivo__tel {
    transform: none;
    transition: none;
  }
}

/* Flotar (capítulo 02) -------------------------------------------------------
   Cada teléfono flota apenas (4 px), cada uno a su ritmo, como los del hero.
   Va en la propiedad `translate` y no en `transform`: así se suma a la
   subida de entrada (que usa transform) sin pisarla. Periodos distintos y
   arranques desfasados (retraso negativo) para que nunca vayan juntos.
   Mismo patrón de curva que el float de styles.css (ease-in-out, alterno). */
@keyframes pv-flotar {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -4px;
  }
}

.pant-vivo__tel {
  animation: pv-flotar 3.1s ease-in-out -0.4s infinite alternate;
}

.cap__pantalla:nth-child(2) .pant-vivo__tel {
  animation-duration: 3.7s;
  animation-delay: -2.1s;
}

.cap__pantalla:nth-child(3) .pant-vivo__tel {
  animation-duration: 3.4s;
  animation-delay: -1.3s;
}

.cap__pantalla:nth-child(4) .pant-vivo__tel {
  animation-duration: 4.1s;
  animation-delay: -3s;
}

@media (prefers-reduced-motion: reduce) {
  .pant-vivo__tel,
  .cap__pantalla:nth-child(n) .pant-vivo__tel {
    animation: none;
  }
}

/* Así trabajamos (#proceso) -------------------------------------------------
   Sin números ni tarjetas: cuatro columnas con una línea arriba, título y
   una frase. El orden se lee solo, de izquierda a derecha. */
#proceso .step {
  min-height: 0;
  gap: 8px;
  padding: 20px 0 0;
  border: 0;
  border-top: 2px solid var(--color-border-light);
  border-radius: 0;
  background: none;
}

#proceso .step:first-child {
  border-top-color: var(--color-primary);
}

#proceso .step__title {
  margin-top: 0;
}