/* ============================================================================
   Línea de referencia bajo el CTA principal (ENCARGO-LIBRO-UX.md, regla 2)

   Debajo del botón principal vive una línea corta y verdadera que dice qué gana
   el cliente al apretarlo. No agranda el botón: es texto secundario de al menos
   14 px, con el tono apagado propio de cada superficie.

   El elemento se declara como <span class="cta-ref">…</span> hermano del CTA.
   Como mide el 100% del ancho, en una fila flexible con `flex-wrap: wrap` salta
   sola al renglón siguiente; no necesita trucos.
   ========================================================================== */

.cta-ref {
  display: block;
  width: 100%;
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  color: #555961;
}

/* ---------- Ensutex · home ---------- */

#hero-section .cta-ref {
  /* Blanco neutro: era rgba(228,240,244) — un blanco teñido de cian, o sea
     azul cielo en el chrome del hero. */
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}

#proceso .cta-ref {
  color: rgba(228, 234, 240, .78);
}

#cierre-equipo .cta-ref {
  color: #555961;
  text-align: left;
}

.ens-doors .cta-ref {
  color: rgba(255, 255, 255, .72);
  text-align: left;
  /* Las dos puertas llevan líneas de largo distinto: reservar dos renglones
     en ambas deja los botones parejos al pie de cada puerta. */
  min-height: calc(1.4em * 2);
}

/* ---------- Marcas (ModoFan y REBXN) ---------- */

.b-actions .cta-ref,
.b-builder__nav .cta-ref,
.mf-cta__content .cta-ref,
.rx-join__inner .cta-ref {
  color: var(--b-muted, rgba(245, 245, 245, .74));
  font-size: .875rem;
}

/* La frase del cierre del camino vivo NO vive dentro de .b-actions: es hija
   directa de .cv-estacion__cuerpo (ver «[data-cv] .cv-estacion--cierre > .cta-ref»
   más abajo). Por eso no le llegaba ninguno de los tonos de arriba y caía en el
   color base de la regla .cta-ref —#555961, un gris pensado para tarjeta CLARA—.
   Sobre la tarjeta oscura del camino de ModoFan eso medía 2,62:1, y el control de
   Carlitos lo marcaba como texto que no se lee. Se le da el tono apagado propio de
   la marca, el mismo que ya usan sus hermanas dentro de .b-actions.
   Solo ModoFan: REBXN tiene su propio bloque y no se toca. */
[data-cv-marca="modofan"] .cv-estacion__cuerpo > .cta-ref {
  color: var(--mf-muted, rgba(245, 242, 255, .74));
  -webkit-text-fill-color: var(--mf-muted, rgba(245, 242, 255, .74));
}

/* ---------- Catálogo ---------- */

.cta-flow .cta-ref {
  color: #d4d4d8;
  text-align: left;
}

.catalog-page-hero__copy .cta-ref {
  color: rgba(228, 240, 244, .84);
}

/* ---------- Guías y preguntas ---------- */

.guide-actions .cta-ref {
  color: #cbd1d8;
}

.guide-cta .cta-ref {
  grid-column: 2;
  justify-self: end;
  width: auto;
  max-width: 22rem;
  margin-top: .6rem;
  color: #bdc4cd;
  text-align: right;
}

/* El pie de la guía ya trae su propio aire: la línea no suma otro renglón
   grande. */
.guide-cta {
  row-gap: .4rem;
}

/* ---------------------------------------------------------------------------
   Cierre del camino: la línea vive fuera del contenedor flex del CTA, así no
   altera la geometría del trazo ni la posición de Asu; se recorta el aire que
   separa el botón del contenido siguiente.
   ------------------------------------------------------------------------- */
[data-cv] .cv-estacion--cierre > .cta-ref {
  margin-top: 0;
}

/* Hero del home · celular: la pila de acciones es `column-reverse`; la línea
   entra con orden 0 para quedar justo debajo del CTA (pegado al borde). */
@media (max-width: 767px) {
  #hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
    padding-bottom: calc(.4rem + env(safe-area-inset-bottom)) !important;
  }

  #hero-section.ens-motion-hero--video .ens-motion-actions .cta-ref {
    order: 0 !important;
    margin: .45rem 0 0 !important;
    font-size: .875rem !important;
    text-align: center !important;
    /* Blanco neutro: era rgba(232,244,248) — blanco teñido de cian. */
    color: rgba(255, 255, 255, .88) !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .78) !important;
  }

  .guide-cta .cta-ref {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
}

/* Escritorio · home: la línea ocupa el renglón completo bajo los dos botones. */
@media (min-width: 1024px) {
  #hero-section.ens-motion-hero--video .ens-motion-actions .cta-ref {
    grid-column: 1 / -1;
    order: 3;
    margin-top: .1rem;
    text-align: right;
  }
}