/* ===========================================================================
   asistencia-hero.css — Tarjeta de asistencia remota en el hero de la landing.

   Ocupa el espacio vacío que quedaba a la izquierda del titular. Aparece unos
   segundos después de cargar la página, para que el visitante alcance a leer
   el mensaje principal antes de que algo se mueva: si entra de golpe, compite
   con el titular en vez de acompañarlo.

   No es un modal. No tapa nada, no bloquea la lectura y se puede cerrar.
   Un popup que interrumpe en la primera pantalla espanta más de lo que capta.

   Usa las variables que ya define modern-rediseno.css (--accent-green,
   --primary-blue, --primary-dark), con respaldos por si esta hoja se carga
   antes que aquélla.
   =========================================================================== */

.ah-tarjeta {
  /* El bloque del hero mide 660px y va centrado, así que la banda libre a su
     izquierda es (ventana - 660) / 2. La tarjeta se cuelga de ahí con un
     desplazamiento negativo: 300 de ancho + 32 de aire = 332. Sólo flota
     cuando esa banda da el ancho; el corte está en la consulta de más abajo. */
  box-sizing: border-box;   /* el ancho incluye el relleno: 300 son 300 */
  position: absolute;
  left: -332px;
  top: 50%;
  transform: translateY(-50%) translateX(-18px);
  z-index: 3;
  width: 300px;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: rgba(11, 22, 45, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 50px rgba(3, 10, 28, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1), visibility .55s;
}

.ah-tarjeta.ah-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ── Cabecera: el punto que late dice «hay alguien ahora» ───────────────── */
.ah-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.ah-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green, #10B981);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .75);
  animation: ah-latido 2.4s ease-out infinite;
  flex-shrink: 0;
}

@keyframes ah-latido {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .7); }
  70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ah-rotulo {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-green, #10B981);
}

.ah-cerrar {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.ah-cerrar:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ── Ilustración ───────────────────────────────────────────────────────── */
.ah-escena {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}

/* ── Lupa ──────────────────────────────────────────────────────────────────
   Dentro de una tarjeta de 300px la escena queda chica y las etiquetas cuestan
   de leer al pasar. Al poner el mouse encima crece y flota por sobre la
   tarjeta, sin empujar nada: el resto del contenido no se mueve ni un píxel.

   Crece hacia la IZQUIERDA y hacia ARRIBA (origen abajo a la derecha): a esos
   dos lados hay hero vacío, mientras que a la derecha está el titular y abajo
   está el propio texto de la tarjeta, que debe seguir leyéndose. Y gana fondo
   opaco y sombra al ampliarse: sobre el degradado azul, un dibujo
   semitransparente a ese tamaño se leería sucio.

   Sólo donde hay mouse de verdad: en una pantalla táctil no existe el estado
   «encima», y un zoom que se dispara con el dedo estorba más que ayuda. */
@media (hover: hover) and (pointer: fine) {
  .ah-escena {
    cursor: zoom-in;
    transform-origin: 85% 100%;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                box-shadow .4s ease, background-color .4s ease;
    will-change: transform;
  }

  .ah-escena:hover {
    position: relative;
    z-index: 6;
    transform: scale(1.75);
    background-color: #0d1b3a;
    box-shadow: 0 22px 60px rgba(3, 10, 28, .55);
    outline: 1px solid rgba(255, 255, 255, .16);
  }

  /* Con la tarjeta ya centrada en pantallas medianas no hay un lado libre:
     crece desde el centro y un poco menos, para no salirse de la ventana. */
  @media (max-width: 1399px) {
    .ah-escena          { transform-origin: 50% 100%; }
    .ah-escena:hover    { transform: scale(1.35); }
  }
}

/* ── Texto ─────────────────────────────────────────────────────────────── */
.ah-titulo {
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 6px;
  text-wrap: balance;
}

.ah-texto {
  font-size: .87rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
  margin: 0 0 16px;
}

/* ── Botón ─────────────────────────────────────────────────────────────── */
.ah-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--accent-green, #10B981);
  color: #062418 !important;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}

.ah-boton:hover {
  background: #0ea271;
  color: #062418 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16, 185, 129, .34);
}

.ah-boton:focus-visible,
.ah-cerrar:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.ah-pie {
  display: block;
  margin-top: 11px;
  font-size: .74rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}

/* ── Pantallas medianas y chicas ───────────────────────────────────────────
   Bajo 1400px la banda libre ya no da los 332px que necesita la tarjeta: deja
   de flotar y pasa a ser un bloque más, centrado bajo los botones del hero. */
@media (max-width: 1399px) {
  .ah-tarjeta {
    position: static;
    transform: translateY(14px);
    width: min(100%, 380px);
    margin: 34px auto 8px;
  }
  .ah-tarjeta.ah-visible { transform: translateY(0); }
}

@media (max-width: 575px) {
  .ah-tarjeta { padding: 18px 16px 20px; border-radius: 16px; margin-bottom: 18px; }
  .ah-titulo  { font-size: 1rem; }
}

/* Quien pidió menos movimiento no ve ni la entrada ni el latido: la tarjeta
   simplemente está ahí. La lupa se conserva —es una ayuda para leer, no un
   adorno— pero pasa a ser instantánea, sin animación de por medio. */
@media (prefers-reduced-motion: reduce) {
  .ah-tarjeta { transition: none; }
  .ah-punto   { animation: none; }
  .ah-escena  { transition: none; }
}