/* ═══════════════════════════════════════════════════════════════════════════
 * 99-replica.css — LO ÚNICO QUE NO VIENE DE LA MAQUETA en /tecnologia
 * ═══════════════════════════════════════════════════════════════════════════
 * Se carga al final, después de los 9 bundles originales, y solo cubre las tres
 * cosas que la réplica no puede copiar tal cual:
 *
 *   1. El wordmark. Única divergencia de marca permitida: donde el original
 *      pinta su wordmark en SVG va el texto "acc7". El copy de la página ya
 *      es propio y en español: no queda ninguna marca ajena en el HTML.
 *   2. Los dos videos de Vimeo y el formulario embebido de forms.default.com:
 *      la página no puede hacer NINGUNA petición externa, así que los iframes
 *      se reemplazaron por un bloque local con el mismo tamaño y radio.
 *   3. El spinner del loader de Vimeo, que sin iframe giraría para siempre.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Wordmark ─────────────────────────────────────────────────────────── */
.header-logo-text.replica-wordmark {
  font-family: var(--main-font);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 30px;
  color: currentColor;
  display: inline-block;
  padding-left: 6px;
}

/* ── 2. Placeholders de lo que era externo ───────────────────────────────── */
.replica-video-placeholder {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(245, 246, 249, 0.14);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0, 255, 190, 0.08) 0%, transparent 60%),
    #0f1116;
  color: rgba(245, 246, 249, 0.55);
  font-family: var(--main-font);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 24px;
}

.replica-video-placeholder__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 190, 0.45);
  position: relative;
  flex: none;
}

.replica-video-placeholder__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #00ffbe;
}

/* El modal de newsletter no es 16/9: ahí manda la altura del contenedor. */
.newsletter-modal-iframe.replica-video-placeholder {
  aspect-ratio: auto;
  min-height: 320px;
  height: 100%;
}

/* ── 3. Loader huérfano ──────────────────────────────────────────────────── */
.vimeo-iframe-wrapper .rep-loader {
  display: none;
}

/* ── 4. El hueco que deja Spline ─────────────────────────────────────────────
 * `.hero-animation-container` es flex y su único hijo con contenido era el
 * <spline-viewer>. Al sacarlo, el flex item colapsa a 0 de ancho y el hero
 * queda negro: el `agl-bg-fallback.webp` está ahí, pero dentro de una caja de
 * 0x0. Se le devuelve el ancho para que el fallback (que es la imagen que el
 * la propia maqueta usa cuando Spline no carga) ocupe el lugar de la escena 3D. */
.hero-animation-container > .container {
  width: 100%;
}

.hero-animation-container .spline-container {
  min-height: 60vh;
}

/* ── 5. El video que en desktop solo aparecía en el scroll takeover ──────────
 * En el original hay DOS montajes del mismo video de Vimeo: `.hero-vimeo-video`
 * (desktop, oculto en opacity 0 hasta que GSAP lo revela al final del pin de
 * 1500px) y `.vimeo-video-container` (móvil, en flujo normal y con
 * `display:none` arriba de 768px). Sin el pin, en desktop no se vería ninguno,
 * así que se muestra el de flujo normal — es el mismo video en el mismo lugar
 * al que el takeover llega. El overlay del hero se queda en su estado inicial. */
/* La regla original es `.vimeo-video-container[data-astro-cid-amqqdaqc]`, así
 * que hay que igualarle la especificidad (clase + atributo) para ganarle. */
@media (width >= 768px) {
  .vimeo-video-container[data-astro-cid-amqqdaqc] {
    display: block;
  }
}