/* ============================================================================
   EL FINAL (Santiago, 27-sep: «el footer está horrible y no se ve el encabezado ni el
   botón»).
   - El aire: la escena del cierre termina cuando su envoltorio sale por arriba, pero la
     página se acaba en el footer. Con el footer de una línea, al llegar al final el
     último tramo («pie») iba en el 11 %: el titular seguía entrando y el botón no había
     salido. Este aire, invisible, le da a la página media pantalla más: al final el
     tramo va en más de la mitad, con todo ya puesto. La escena sigue fija encima
     mientras se recorre (su margen de abajo es de una pantalla).
   - El footer, como el de las landings (Santiago, 30-sep, D-333: «me gustan los otros
     footers, digo que la vitrina puede ir como los demás»): el logo a la izquierda, la
     privacidad a la derecha y el eslogan abajo, a lo ancho, en el marino de la vitrina.
     El logo es el mismo de las landings —«repunte» en Outfit, con su flecha—, y la flecha
     va en el ámbar de la marca. Su alto lo mide variante.js (colocarCierre) para que el
     botón del cierre no quede debajo.
   ========================================================================== */

.pie-aire { display: none; }
.con-movimiento .pie-aire { display: block; height: calc(0.5 * var(--H, 100svh)); pointer-events: none; }

/* La letra del logo de las landings (probador-demo/venta.css), del mismo archivo. */
@font-face { font-family: 'Outfit'; src: url('/probador-demo/outfit.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
.pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 22px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 247, 237, 0.14);
  text-align: left;
}
.pie-logo {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--crema); text-decoration: none;
  font: 800 27px/1 'Outfit', system-ui, sans-serif; letter-spacing: -1.6px;
}
.pie-logo span { color: var(--ambar); }
.pie .pie-enlaces { margin: 0; font-size: 12px; }
.pie .pie-enlaces a { color: var(--crema); opacity: 0.8; text-underline-offset: 3px; }
.pie-firma { width: 100%; margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-style: normal; font-size: 11px; line-height: 1.4; opacity: 0.7; }
/* En la computadora, al ancho de la página de las landings. */
@media (min-width: 900px) { .pie { padding-inline: max(20px, calc((100% - 1080px) / 2)); } }

/* El botón de la oferta (Santiago, 28-sep: «el botón está alargado y azul. Yo lo quiero
   rojo y lo quiero en la esquina inferior derecha de la pantalla de la computadora»):
   rojo de la marca con letra crema, compacto en dos renglones, en la esquina de abajo a la
   derecha del LEEME, que llena la pantalla arriba del dock (a la derecha del dock no
   cabe a un tamaño que se lea). Sale solo en la última vista (variante.js). En la vista
   queda su hueco: la letra de las seis vistas se mide igual y ningún renglón llega a la
   esquina. La laptop no recibe toques; él sí. */
/* El hueco mide lo que medía el botón en la vista (su margen y su renglón). */
.leeme-hueco { height: 2.86em; }
.leeme-accion {
  position: absolute; right: 0.7em; bottom: 0.55em; z-index: 2;
  font-size: var(--letra-leeme, 0.9em);
  visibility: hidden; opacity: 0;
}
.leeme-boton {
  display: inline-flex; align-items: center; gap: 0.4em;
  max-width: 11.5em; padding: 0.45em 0.8em 0.45em 0.9em; border-radius: 0.7em;
  background: #D62828; color: #FFF7ED;
  font-weight: 600; line-height: 1.12; text-decoration: none; text-wrap: balance;
  box-shadow: 0 0.25em 0.8em rgba(15, 29, 61, 0.28);
  pointer-events: auto;
}
.leeme-boton .flecha { flex: none; }
/* Las cajas de la laptop recortan sin desplazarse nunca: con un enlace adentro, el
   navegador podía correr su contenido para enseñarlo (al tocarlo o al enfocarlo) y la
   pantalla se descuadraba de la foto. */
.laptop, .leeme-cuerpo, .ventana-cuerpo { overflow: clip; }