/* Ajustes de UI pedidos por Goncalo — NML, 26-ago-2026
 *
 *  1. // proceso        : los numeros de paso, en blanco (estaban al 35%).
 *  2. // portal { NML } : la captura del panel, con el mismo material
 *                        translucido que las pastillas de // resultados
 *                        (.liquid-glass).
 *  3. footer            : el logo pasa al final del todo, al tamano exacto
 *                        del de la nav bar (24 px de alto), y desaparece la
 *                        linea de mensajes variables que iba debajo.
 *
 *  Nada de esto toca el markup: son selectores sobre el DOM que ya existe,
 *  asi que aguanta la hidratacion de React sin observadores.
 */

/* ------------------------------------------------------------------ 1 */
/* .step-number llevaba opacity:.35 -> los 01..04 de la linea de tiempo y
   los 01..05 de la metodologia salian grises sobre #151A21. */
.step-number { opacity: 1 !important; }

/* ------------------------------------------------------------------ 2 */
/* Mismo material que .liquid-glass, aplicado al marco de la captura:
   difuminado del fondo, degradado blanco 10% -> 3%, borde blanco al 18% y
   la linea de luz interior arriba. La captura se queda dentro, con aire,
   para que el cristal se lea alrededor. */
#portal div.relative.rounded-2xl.overflow-hidden.shadow-2xl {
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22),
              inset 0 -1px rgba(255, 255, 255, .05),
              0 8px 32px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}
#portal div.relative.rounded-2xl.overflow-hidden.shadow-2xl > img {
  border-radius: 12px;
  display: block;
}
/* velo de cristal por encima de la captura: es lo que hace que se lea
   translucida y no como una foto pegada sobre un marco */
#portal div.relative.rounded-2xl.overflow-hidden.shadow-2xl::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px rgba(255, 255, 255, .22),
              inset 0 -1px rgba(255, 255, 255, .05);
}

/* variante mas translucida (la captura tambien deja pasar el fondo) */
html[data-nml-glass="b"] #portal div.relative.rounded-2xl.overflow-hidden.shadow-2xl > img {
  opacity: .82;
}

/* ------------------------------------------------------------------ 3 */
/* 27-ago, Enrique: el logo del footer vuelve a como esta en produccion, o sea el
   lockup vertical (simbolo arriba, "Nash Marketing Labs" debajo), y es el que ocupa
   ese espacio. Se cae por tanto lo que se hizo el 26-ago (esconder el bloque y
   repetir el logotipo a 24 px al final del todo).
   Lo unico que se mantiene de la peticion de Goncalo: fuera la linea de mensajes
   variables que iba debajo del logo (// CONTROL_Y_RENTABILIDAD y companeras). */
footer div.space-y-6 > div:first-child > p.font-mono { display: none; }

/* ------------------------------------------------------------------ 4 */
/* 27-ago, Enrique + Dani: CTA persistente en movil y tablet (< 1024 px).
   Lo pinta /nml-mobile-cta.js al salir del hero y lo esconde al llegar a
   la seccion de contacto. Fuera de esos 1024 px no existe. */
#nml-mobile-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 14px;
  background: #46F7DD;
  color: #0B1F1A;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(70, 247, 221, .55), 0 2px 10px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

#nml-mobile-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#nml-mobile-cta:active {
  background: #2FD9BF;
}

@media (min-width: 1024px) {
  #nml-mobile-cta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #nml-mobile-cta { transition: opacity .01s linear; transform: none; }
  #nml-mobile-cta:not(.is-visible) { transform: none; }
}