/* ==========================================================================
   vitaralink.com — v8 · Secciones de v7 con el sistema de diseño Vitaralink
   styles.css + v7.css dan la estructura (grillas, animaciones de los teléfonos,
   escenas 3D, Cal.com); aquí van colores, tipografía, botones, tarjetas e iconos
   del sistema. Todo sale de los tokens, así que funciona en los dos temas.
   ========================================================================== */

/* Variables de v7 → tokens del sistema. Se repiten en cada [data-theme] para que
   se recalculen dentro de una sección con otro tema. */
:root,
[data-theme] {
  --color-primary: var(--text);
  --color-primary-ink: var(--text);
  --color-primary-light: var(--text);
  --color-text-dark: var(--text);
  --color-text-body: var(--text-muted);
  --color-text-muted: var(--text-muted);
  --color-text-muted-strong: var(--text);
  --color-border-light: var(--border);
  --color-border-dark: var(--border);
  --font-serif: var(--font-pixel-serif);
  --radius-lg: var(--radius-md);
  --radius-xl: var(--radius-md);
  --radius-card: var(--radius-md);
  --radius-pill: var(--radius-md);
  --shadow-soft: none;
  --shadow-light: none;
  --shadow-dark: none;
}

/* ---------- Secciones: 240px entre secciones en desktop ---------- */
.section {
  padding: 120px 0;
}

@media (max-width: 1280px) {
  .section {
    padding: 96px 0;
  }
}

@media (max-width: 799px) {
  .section {
    padding: 64px 0;
  }
}

.section__head {
  max-width: none;
  margin-bottom: 64px;
}

.section__head--center .titular .ln {
  justify-content: center;
}

/* body-l: bajadas e intros */
.lead,
.section__head .lead {
  max-width: 560px;
  margin-top: 24px;
  color: var(--text-muted);
  font: 400 20px/28px var(--font-display);
  letter-spacing: -0.25px;
}

/* Frase de marca dentro de un texto: Mondwest 1.25× en text */
.accent {
  color: var(--text);
  font-family: var(--font-pixel-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 1.25em;
  letter-spacing: 0;
  line-height: 1;
}

/* ---------- Capítulos ---------- */
.cap__cabecera {
  gap: 24px;
  margin-bottom: 48px;
}

.cap__frase {
  max-width: 34em;
  color: var(--text-muted);
  font: 400 24px/32px var(--font-display);
  letter-spacing: -0.5px;
}

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

.cap__atenuado {
  color: var(--text-muted);
}

@media (max-width: 799px) {
  .cap__frase {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.25px;
  }
}

.cap__prueba {
  margin-bottom: 32px;
}

/* Panel del render (01): superficie plana, borde de 1px */
.cap__tarjeta {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  background-image: none;
}

/* "Ver qué incluye": botón secundario lg a todo el ancho */
.cap__cta {
  min-height: 56px;
  border: 1px solid var(--button-outline);
  border-radius: var(--radius-md);
  color: var(--text);
  font: 600 18px/24px var(--font-sans);
  letter-spacing: 0;
  transition: background-color var(--duration-slow) var(--ease-standard);
}

.cap__cta .px-i {
  color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  .cap__cta:hover,
  .cap.is-dark .cap__cta:hover {
    background-color: var(--ghost-hover);
  }
}

/* 02: ejemplos del sistema en tarjetas surface */
.cap__pantalla {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cap__pantalla-nombre {
  gap: 10px;
  color: var(--text);
  font: 600 16px/24px var(--font-sans);
  letter-spacing: 0;
}

.cap__pantalla-nombre .px-i {
  width: var(--px-icono-md);
  height: var(--px-icono-md);
}

/* 03: tiendas reales */
.real {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  transition: border-color var(--duration-slow) var(--ease-standard);
}

.real:hover,
.js .real.reveal.is-visible:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--border-strong);
}

.real__media {
  border-radius: var(--radius-none);
  background-color: var(--surface-raised);
  background-image: none;
}

.real__title {
  color: var(--text);
  font: 600 20px/24px var(--font-display);
  letter-spacing: -0.25px;
}

.real__prod {
  color: var(--text-muted);
  font: 400 16px/24px var(--font-sans);
}

/* Link externo: texto en text, flecha-externa cyan de 10px */
.text-link {
  gap: 8px;
  color: var(--text);
  font: 500 16px/24px var(--font-sans);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration-base) ease-out, transform 120ms var(--ease-standard);
}

.text-link .px-i {
  color: var(--action-icon);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover {
    text-decoration-color: currentColor;
  }
}

/* ---------- Así cambia tu negocio ---------- */
.hoy__lista {
  border-top-color: var(--border);
}

.hoy__fila {
  border-bottom-color: var(--border);
}

.hoy__col,
.hoy__etiqueta {
  color: var(--text-mono);
  font: 400 12px/16px var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .hoy__col {
    font-size: 14px;
    line-height: 20px;
  }
}

.hoy__celda {
  font-size: 16px;
  line-height: 24px;
}

.hoy__celda .px-i {
  width: var(--px-icono-md);
  height: var(--px-icono-md);
  margin-top: 4px;
}

.hoy__celda--hoy .px-i {
  color: var(--text-subtle);
}

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

.hoy__celda--despues .px-i {
  color: var(--action-icon);
}

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

.caminos__cta {
  margin-top: 48px;
}

.cta-nota {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Proceso: tarjetas surface con icono pixel ---------- */
.steps {
  gap: 24px;
}

.step,
.step:hover,
.is-dark .step:hover {
  min-height: 0;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  transform: none;
}

.step__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text);
  font: 600 20px/24px var(--font-display);
  letter-spacing: -0.25px;
}

.step__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 24px;
}

/* ---------- Preguntas (sistema: FAQ) ---------- */
.faq {
  gap: 32px;
}

/* "Preguntas [?] / frecuentes.": el signo va dentro del titular (.vx-inline--alto).
   El tamaño sale del ancho de su columna (container query): la línea más ancha,
   "frecuentes." en Mondwest 1.25×, mide 6.41em, así que 100cqi / 6.6 siempre cabe. Antes,
   con la ventana entre 960 y 1100 px, el signo bajaba a su propio renglón y se encimaba. */
.faq__head {
  container-type: inline-size;
}

.titular--faq {
  font-size: min(64px, 100cqi / 6.6);
  letter-spacing: -0.025em;
}

@media (min-width: 960px) {
  .faq {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 64px;
    align-items: start;
  }

  .faq__head {
    position: sticky;
    top: 112px;
  }
}

.faq__lista {
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item summary {
  gap: 24px;
  min-height: 0;
  padding: 24px;
  border-radius: var(--radius-md);
  color: var(--text);
  font: 500 20px/28px var(--font-display);
  letter-spacing: -0.25px;
  transition: background-color var(--duration-slow) var(--ease-standard);
}

@media (hover: hover) {
  .faq__item summary:hover {
    color: var(--text);
    background: var(--ghost-hover);
  }
}

.faq__item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.faq__icono {
  display: flex;
  flex: none;
}

.faq__menos,
.faq__item[open] .faq__mas {
  display: none;
}

.faq__item[open] .faq__menos {
  display: block;
}

.faq__item p {
  max-width: 600px;
  margin: 0;
  padding: 0 24px 24px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 26px;
}

/* La respuesta aparece con un fundido corto (solo opacidad y transform) */
.faq__item[open] p {
  animation: faq-abre var(--duration-slow) var(--ease-standard);
}

@keyframes faq-abre {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item[open] p {
    animation: none;
  }
}

@media (max-width: 619px) {
  .faq__item summary {
    padding: 20px 8px;
    font-size: 18px;
    line-height: 26px;
  }

  .faq__item p {
    padding: 0 8px 20px;
  }
}

/* ---------- Agenda ---------- */
.titular--centro .ln {
  justify-content: center;
}

.cal-embed {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: none;
}

.cal-embed [data-cal-lazy] {
  background: var(--bg);
}

/* Sin la marca "Cal.com": el iframe deja sus últimos ~64 px para esa etiqueta, debajo de la
   tarjeta del calendario. Ya cargado se recortan (overflow), sin dejar hueco. Mismo truco
   que css/ejemplo.css, pero recortando en lugar de tapar. */
.cal-embed {
  overflow: hidden;
}

.cal-embed [data-cal-lazy]:has(iframe) {
  margin-bottom: -64px;
}

/* WhatsApp arriba del calendario: muchos prefieren escribir. Botón grande con el icono oficial. */
.agenda-wa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: 28px 0 0;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 26px;
}

.agenda-wa[hidden] {
  display: none;
}

.agenda-wa .wa-i {
  width: 22px;
  height: 22px;
  color: var(--action-icon);
}

@media (max-width: 799px) {
  .agenda-wa {
    flex-direction: column;
  }

  .agenda-wa .boton {
    width: 100%;
  }
}

.cal-embed__fallback-title {
  color: var(--text);
  font: 600 20px/24px var(--font-display);
}

.cal-fallback {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 22px;
}

.cal-fallback a {
  color: var(--text);
  font-weight: 500;
  text-underline-offset: 3px;
}

/* ---------- Footer (sistema: Footer) ---------- */
.site-footer.pie {
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.pie {
  padding: 64px 0 32px;
}

.pie__arriba {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.pie__logo {
  width: auto;
  height: 30px;
}

.pie__marca p {
  max-width: 280px;
  margin: 16px 0 20px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 22px;
}

.pie__titulo {
  margin: 4px 0 20px;
  color: var(--text-mono);
  font: 400 12px/16px var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pie__col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie__col .enlace {
  min-height: 24px;
  color: var(--text);
  font: 500 15px/22px var(--font-sans);
}

/* Servicios por resultado (Owner): debajo del nombre, para qué sirve, alineado con el texto */
.pie__resultado {
  display: block;
  padding-left: calc(var(--px-icono-sm) + 8px);
  color: var(--text-muted);
  font: 400 14px/20px var(--font-sans);
}

.pie__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.pie__mono {
  margin: 0;
  color: var(--text-mono);
  font: 400 11px/16px var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

a.pie__mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  a.pie__mono:hover {
    color: var(--text);
  }
}

@media (max-width: 959px) {
  .pie__arriba {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pie__marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 619px) {
  .pie__arriba {
    grid-template-columns: 1fr;
  }

  .pie__barra {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- WhatsApp flotante: botón de acción cuadrado, icono pixel ---------- */
.wa-fab {
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
  box-shadow: var(--shadow-md);
}

.wa-fab .px-i {
  width: var(--px-icon-lg);
  height: var(--px-icon-lg);
  color: var(--on-action);
}

/* Botón flotante con el icono oficial de WhatsApp, en cyan como la flecha del CTA */
.wa-fab .wa-i {
  width: 26px;
  height: 26px;
  color: var(--action-icon);
}

/* ==========================================================================
   Subpáginas (web-v8, apps-v8, shopify-v8)
   ========================================================================== */

/* Titulares largos: el texto corre en línea y la keyword sigue a la última palabra */
.titular--sub .ln,
.titular--h1 .ln {
  display: block;
}

/* H1 del subhero: entre display-l y h1, porque el texto de v7 es más largo que un titular de Dovetail */
.titular--sub {
  font-size: 80px;
  letter-spacing: -0.025em;
}

/* h1 del sistema (64/68): titulares de sección largos */
.titular--h1 {
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

@media (max-width: 1280px) {
  .titular--sub {
    font-size: 64px;
  }

  .titular--h1 {
    font-size: 56px;
  }
}

@media (max-width: 799px) {
  .titular--sub {
    font-size: 40px;
    letter-spacing: -0.02em;
  }

  .titular--h1 {
    font-size: 36px;
    letter-spacing: -0.02em;
  }
}

/* h3 del sistema: título de tarjeta */
.h3,
.case-slot__title {
  color: var(--text);
  font: 600 20px/24px var(--font-display);
  letter-spacing: -0.25px;
}

/* ---------- Subhero ---------- */
.subhero {
  padding-top: calc(var(--nav-float-height) + var(--nav-float-offset) + 80px);
}

.subhero__intro {
  max-width: 920px;
  container-type: inline-size;
}

/* H1 con el visual de su servicio dentro, como "Agenda [teléfono] tu / llamada gratis.".
   Dos renglones fijos que no se parten: el tamaño sale del ancho de la columna (el renglón
   más ancho de las tres páginas mide 13.6em). En móvil los renglones sí se parten, pero el
   visual sigue pegado a su palabra (.vx-par). El lienzo va en línea y sus márgenes negativos
   (de .vx-inline) dejan el renglón a 1em, como en los titulares flex. */
.titular--visual {
  font-size: min(80px, 100cqi / 13.6);
}

.titular--visual .ln {
  white-space: nowrap;
}

.titular--visual .vx-inline {
  display: inline-block;
  vertical-align: -0.14em;
}

.vx-par {
  white-space: nowrap;
}

@media (max-width: 799px) {
  .titular--visual {
    font-size: 40px;
  }

  .titular--visual .ln {
    white-space: normal;
  }
}

.subhero__intro .lead {
  margin-left: auto;
  margin-right: auto;
}

.subhero .btn-row {
  margin-top: 32px;
}

.alt-contact {
  color: var(--text-muted);
}

.alt-contact a {
  color: var(--text);
}

.alt-contact .px-i {
  color: var(--action-icon);
}

/* "¿Prefieres WhatsApp? Escríbenos" debajo de cada CTA que lleva a la agenda. El enlace
   directo (wa.me) lo pone js/main.js; sin número configurado la línea se quita. */
.cta-whatsapp {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 24px;
}

.cta-whatsapp .enlace,
.cal-fallback .enlace {
  color: var(--text);
}

/* styles.css pone `.cal-fallback a { display: inline-block }` (área de toque de 44 px) y
   apilaba el icono sobre la palabra: aquí va en fila, conservando ese relleno */
.cal-fallback a.enlace {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
}

.caminos__cta .cta-whatsapp {
  margin-top: 8px;
}

.pie__marca .cta-whatsapp {
  max-width: none;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 22px;
}

/* Render del hero: transparente, sin tarjeta ni rejilla */
.showcase-card,
.showcase-card--mac {
  border: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.btn-row {
  gap: 16px;
}

/* ---------- Caja de icono (tile de v7 → pixel de marca en caja surface) ----------
   .includes .tile--sm de styles.css la rellenaba con el color primario (en v8 = text). */
.tile,
.tile--sm,
.tile--fill,
.tile--dark,
.includes .tile--sm {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: none;
  color: var(--action-icon);
}

.tile .px-i {
  width: var(--px-icono-md);
  height: var(--px-icono-md);
}

/* ---------- Ejemplos (case-slot) ---------- */
.case-slot__media {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  background-image: none;
}

.case-slot__kicker {
  color: var(--text-mono);
  font: 400 12px/16px var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.case-slot__desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Lo que incluye ---------- */
.includes li {
  color: var(--text);
  font: 500 16px/24px var(--font-sans);
}

.incluye__labels {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Hoy / después y "Para quién sí y para quién no" (fit) ---------- */
.fit {
  gap: 24px;
}

.fit__col,
.fit--claro .fit__col {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.fit__col .h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fit__list li {
  border-top-color: var(--border);
  color: var(--text-muted);
  font-size: 16px;
  line-height: 24px;
}

.fit__list li .px-i {
  width: var(--px-icono-md);
  height: var(--px-icono-md);
  margin-top: 4px;
}

.fit__list a {
  color: var(--text);
}

.ico--yes {
  color: var(--action-icon);
}

.ico--no {
  color: var(--text-subtle);
}

/* ---------- Shopify: celulares y capturas ---------- */
.fono__nombre {
  color: var(--text);
  font: 600 18px/24px var(--font-display);
}

.fono__nombre small,
.capturas__titulo small {
  color: var(--text-muted);
  font: 400 14px/20px var(--font-sans);
}

.fono__pista {
  color: var(--text-muted);
}

.fono__pista .px-i {
  color: var(--action-icon);
}

.capturas__btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  transition: background-color var(--duration-slow) var(--ease-standard);
}

.capturas__btn .px-i {
  width: var(--px-icon-md);
  height: var(--px-icon-md);
  color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  .capturas__btn:hover {
    border-color: var(--border-strong);
    background: var(--ghost-hover);
  }
}

/* ==========================================================================
   Aviso de privacidad (privacidad-v8): texto de lectura, máx. 680px
   ========================================================================== */
.prosa-v8 {
  padding-top: calc(var(--nav-float-height) + var(--nav-float-offset) + 80px);
}

.prose {
  max-width: var(--text-max);
}

.prose__etiqueta {
  margin: 0 0 16px;
  color: var(--text-mono);
  font: 400 12px/16px var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.prose .titular {
  margin-bottom: 16px;
}

.prose__meta {
  margin-bottom: 48px;
  color: var(--text-mono);
  font: 400 12px/16px var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.prose .h3 {
  margin: 48px 0 12px;
}

.prose p,
.prose li {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 26px;
}

.prose a {
  color: var(--text);
  font-weight: 500;
}

.prose__back {
  margin-top: 48px;
}

.prose__back .enlace {
  text-decoration: none;
}

.prose__back .px-i {
  color: var(--action-icon);
}

/* ==========================================================================
   Móvil
   ========================================================================== */
/* Enlaces dentro de texto de una lista: en línea, para que partan con el texto
   (styles.css los vuelve inline-block para el área táctil y se salían de la tarjeta). */
.fit__list a {
  display: inline;
  padding: 0;
  margin: 0;
  text-underline-offset: 3px;
}

/* Botones grandes a todo el ancho (sistema: "Ancho completo: formularios y móvil") */
@media (max-width: 799px) {
  .boton--lg {
    width: 100%;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .portada__acciones {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   Cuadrícula difuminada detrás de los mockups (fondo-grid--esquina del sistema, la de la
   StatCard): celdas de 24 px que salen de una esquina y se desvanecen en círculo. Los renders
   tienen fondo transparente, así que la cuadrícula se ve detrás del dispositivo. Tarjetas
   vecinas arrancan en esquinas contrarias para no verse clonadas.
   ========================================================================== */
.cap__tarjeta,
.cap__pantalla,
.real__media,
.case-slot__media {
  --grid-origen: 100% 0;
  position: relative;
  isolation: isolate;
}

.cap__pantalla:nth-child(even),
.real:nth-child(even) .real__media,
.case-slot:nth-child(even) .case-slot__media {
  --grid-origen: 0 100%;
}

.cap__tarjeta::before,
.cap__pantalla::before,
.real__media::before,
.case-slot__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell-card, 24px) var(--grid-cell-card, 24px);
  background-position: var(--grid-origen);
  -webkit-mask-image: radial-gradient(circle at var(--grid-origen), #000 0, rgba(0, 0, 0, 0.6) calc(var(--grid-alcance, 75%) * 0.45), transparent var(--grid-alcance, 75%));
  mask-image: radial-gradient(circle at var(--grid-origen), #000 0, rgba(0, 0, 0, 0.6) calc(var(--grid-alcance, 75%) * 0.45), transparent var(--grid-alcance, 75%));
}

/* ==========================================================================
   Encabezado anclado de los capítulos (js/v8-capitulos.js)
   Ligado al scroll, como los títulos grandes de iOS: el titular se detiene bajo el nav y se
   encoge mientras bajas; el fondo de la banda y la flecha aparecen al mismo ritmo. Aquí solo
   va la estructura; escala, opacidades y posición de la flecha las pone el script cuadro a
   cuadro (solo transform y opacity).
   ========================================================================== */
.cap__ancla {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;                          /* debajo del nav (60) */
  padding: calc(var(--nav-float-offset) + var(--nav-float-height) + 14px) 0 26px;
  pointer-events: none;
  visibility: hidden;
}

.cap__ancla.is-visible {
  visibility: visible;
}

/* Fondo del color de la sección; el borde de abajo se difumina */
.cap__ancla-fondo {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

.cap__ancla-fila {
  position: relative;
}

/* Mismo ancho que el titular (lo pone el script): se parte en los mismos renglones */
.cap__ancla-titulo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transform-origin: 0 0;
}

@media (max-width: 799px) {
  .cap__ancla {
    padding-bottom: 20px;
  }
}

/* ==========================================================================
   Botón de flecha de los capítulos (js/v8-capitulos.js)
   Va junto al titular grande desde el inicio y su copia queda en el encabezado anclado.
   - Entrada: el botón se arma con 4 × 4 bloques pixel en orden aleatorio (PixelDissolve
     del sistema) y la flecha entra desde la izquierda a saltos de pixel (ease-pixel).
   - Reposo: cada 3.6 s la flecha sale por la derecha y otra entra por la izquierda, como una
     banda transportadora. La pista mide dos botones; al terminar vuelve al inicio y, como las
     dos flechas son iguales, el salto no se ve.
   - Hover: el fondo cambia a action-hover y la flecha se adelanta 3 px.
   Fondo action con flecha cyan, como el CTA primario. Solo transform y opacity.
   ========================================================================== */
.cap__izq {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cap__izq .cap__palabra {
  min-width: 0;
}

/* Visual del servicio dentro del titular ("Páginas [sitio web] web."). Aquí sí se parte el
   renglón: en móvil la keyword baja y el visual se queda junto a la primera palabra (nunca
   solo). Un poco más pegado que en otros titulares: el titular es corto y a 112 px el aire
   transparente del lienzo separaba de más las palabras. La copia anclada lleva su propio
   lienzo (js/v8-capitulos.js). */
.cap__palabra .ln:has(> .vx-inline),
.cap__ancla-titulo:not(.es-un-renglon) .ln:has(> .vx-inline) {
  flex-wrap: wrap;
}

.cap__palabra .vx-inline,
.cap__ancla-titulo .vx-inline {
  --vx-mx: -0.44em;
}

.cap__ir {
  --tam: 64px;
  --ir-fondo: var(--action);
  position: relative;
  display: block;
  flex: none;
  width: var(--tam);
  height: var(--tam);
  overflow: hidden;
  border-radius: var(--radius-md);
  isolation: isolate;
}

/* Fondo del botón: se enciende cuando terminan de aparecer los bloques */
.cap__ir::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ir-fondo);
  opacity: 0;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.cap__ir-px {
  position: absolute;
  top: calc(var(--y) * 25%);
  left: calc(var(--x) * 25%);
  width: 25%;
  height: 25%;
  background: var(--ir-fondo);
  opacity: 0;
}

.cap__ir-pista {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  z-index: 1;
  display: flex;
  width: 200%;
}

.cap__ir-pista > span {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
}

.cap__ir-pista .px-i {
  width: 31.25%;
  height: 31.25%;
  color: var(--action-icon);
  transition: transform var(--duration-base) var(--ease-standard);
}

/* La flecha de la derecha es la que se ve en reposo; aparece cuando termina la entrada */
.cap__ir-pista > span:last-child {
  opacity: 0;
}

.cap__ir.is-listo::before {
  animation: ir-enciende 1ms linear 400ms forwards;
}

.cap__ir.is-listo .cap__ir-px {
  animation: ir-enciende 1ms linear var(--d) forwards, ir-apaga 1ms linear 420ms forwards;
}

.cap__ir.is-listo .cap__ir-pista {
  animation:
    ir-entra 360ms var(--ease-pixel) 440ms both,
    ir-cinta 3.6s steps(6, end) 1.6s infinite;
}

.cap__ir.is-listo .cap__ir-pista > span:last-child {
  animation: ir-enciende 1ms linear 800ms forwards;
}

@keyframes ir-enciende {
  to {
    opacity: 1;
  }
}

@keyframes ir-apaga {
  to {
    opacity: 0;
  }
}

@keyframes ir-entra {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50%);
  }
}

@keyframes ir-cinta {
  0%,
  74% {
    transform: translateX(0);
  }

  86%,
  100% {
    transform: translateX(50%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cap__ir:hover {
    --ir-fondo: var(--action-hover);
  }

  .cap__ir:hover .cap__ir-pista .px-i {
    transform: translateX(3px);
  }
}

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

/* Copia del encabezado anclado: el script la mueve y la escala desde el botón grande */
.cap__ir--ancla {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

@media (max-width: 1280px) {
  .cap__izq {
    gap: 20px;
  }

  .cap__ir {
    --tam: 52px;
  }
}

@media (max-width: 799px) {
  .cap__izq {
    gap: 14px;
  }

  .cap__ir {
    --tam: 44px;
  }

  /* "Desarrollo de / aplicaciones.": "aplicaciones." en Mondwest 1.25× mide 7.36em y no se
     parte. A 44 px, con el botón al lado (44 px + 14 px de hueco), se salía de la pantalla
     en 375 px. El tamaño sale del ancho de la cabecera (container query), como el del FAQ. */
  .cap__cabecera {
    container-type: inline-size;
  }

  .cap__palabra--larga {
    font-size: min(44px, (100cqi - 58px) / 7.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap__ir-px {
    display: none;
  }

  .cap__ir::before,
  .cap__ir-pista > span:last-child {
    opacity: 1;
  }

  .cap__ir.is-listo::before,
  .cap__ir.is-listo .cap__ir-pista,
  .cap__ir.is-listo .cap__ir-pista > span:last-child {
    animation: none;
  }
}

/* Marcador de línea base de cada renglón de la copia anclada (js/v8-capitulos.js). El margen
   negativo anula el column-gap de la fila, así la copia sigue cayendo exacta sobre el titular. */
.cap__base {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: -0.2em;
}

/* El segundo renglón de la copia se desliza junto al primero (transform desde el script) */
.cap__ancla-titulo .ln {
  will-change: transform;
}

/* Copia anclada de un titular de un solo renglón: nunca se parte */
.cap__ancla-titulo.es-un-renglon {
  white-space: nowrap;
}

.cap__ancla-titulo.es-un-renglon .ln {
  flex-wrap: nowrap;
}