/*
  VALDEZZI — vitrina editorial.

  La página es monocroma. El único color de todo el sitio sale de adentro de las
  piezas de producto: el near-black del software y su verde. Esa es la regla que
  ordena este archivo, y por eso las variables están en dos bloques separados.

  La escala tipográfica es deliberadamente chata: ningún texto pasa de 24px salvo
  el logotipo. La jerarquía la cargan las piezas, que ocupan la pantalla entera.
  Un titular de 100px arruinaría exactamente lo que hace cara a esta página.
*/

/* ───────────────────────────────────────────────────────────── el papel */

:root {
  --papel: #ffffff;
  --papel-2: #f4f4f3;
  --tinta: #111111;
  --tinta-2: #55554f;
  --tinta-3: #7d7d76;
  --linea: rgba(17, 17, 17, 0.14);
  --linea-fuerte: rgba(17, 17, 17, 0.3);
  --blanco: #ffffff;
  --blanco-2: rgba(255, 255, 255, 0.72);
  --linea-blanca: rgba(255, 255, 255, 0.34);

  /* Tipografía: Montserrat es la suplente que el propio Armani declara para su
     face EA. Para "la misma tipografía", es la elección más fiel posible. */
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --t-logo: clamp(26px, 4.2vw, 62px);
  --t-titulo: clamp(19px, 1.9vw, 24px);
  --t-enlace: 16px;
  --t-cuerpo: 16px;
  --t-nav: 13px;
  --t-micro: 11px;

  --tr-titulo: 0.4px;
  --tr-micro: 1.1px;
  --tr-logo: 0.34em;

  --margen: clamp(20px, 3.4vw, 48px);
  --alto-casa: 46px;
  --alto-barra: 54px;

  /* Una curva, no varias: todo lo que se mueve acá sale igual de frenado. */
  --salida: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ─────────────────────────────────────────── el color, solo adentro del producto */

.pieza {
  --p-fondo: #121212;
  --p-sup: #181818;
  --p-sup-2: #1e1e1e;
  --p-sup-3: #262626;
  --p-linea: #2a2a2a;
  --p-linea-2: #363636;
  --p-tinta: #ededed;
  --p-tinta-2: #9d9d97;
  --p-tinta-3: #6e6e68;
  --p-verde: #30d98a;
  --p-ambar: #f0a92c;
  --p-rojo: #f26d6d;
  --p-azul: #5b94f0;
  --p-violeta: #9b7be0;
  --p-mono: ui-monospace, 'SF Mono', 'Segoe UI Mono', Consolas, monospace;
}

/* ───────────────────────────────────────────────────────────── base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tr-titulo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Mi regla de arriba le gana al navegador, asi que `hidden` hay que decirlo
   de nuevo: si no, el sprite de iconos se dibuja y empuja toda la pagina. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p,
figure,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Lo que no dibujé también lleva el diseño. */
::selection {
  background: var(--tinta);
  color: var(--papel);
}

:focus-visible {
  outline: 1px solid var(--tinta);
  outline-offset: 4px;
}

.en-oscuro :focus-visible,
.cierre :focus-visible {
  outline-color: var(--blanco);
}

@supports (scrollbar-width: thin) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--linea-fuerte) var(--papel);
  }
}

/* Con la cabecera fija, un ancla sin margen cae debajo de ella y la primera
   linea de la seccion queda tapada. */
main [id] {
  scroll-margin-top: var(--alto-barra);
}

.salto {
  position: absolute;
  left: -9999px;
  top: 0;
}

.salto:focus {
  left: var(--margen);
  top: 10px;
  z-index: 200;
  background: var(--tinta);
  color: var(--papel);
  padding: 10px 16px;
  font-size: var(--t-nav);
}

/* ───────────────────────────────────────────────────── piezas de tipografía */

.titulo {
  font-size: var(--t-titulo);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: var(--tr-titulo);
  text-transform: uppercase;
  text-wrap: balance;
}

.enlace {
  display: inline-block;
  font-size: var(--t-enlace);
  font-weight: 400;
  letter-spacing: var(--tr-titulo);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 420ms var(--salida);
}

.enlace:hover,
.enlace:focus-visible {
  background-size: 0 1px;
  background-position: 100% 100%;
}

.micro {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
}

.prosa {
  font-size: var(--t-cuerpo);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: normal;
  max-width: 62ch;
  color: var(--tinta-2);
}

/* Lo destacado sube medio peso, no uno entero: contra una prosa de 300, la
   negrita del navegador es un grito. */
.prosa strong {
  font-weight: 500;
  color: var(--tinta);
}

.bloque__pie .prosa strong,
.cierre .prosa strong {
  color: var(--blanco);
}

/* ───────────────────────────────────────────────── franja de casa + barra */

/*
  La cabecera tiene dos estados y el DEFECTO es el solido, no el transparente.

  Es a proposito: si el JavaScript no corre, queda la cabecera blanca de
  siempre, legible. Si arrancara transparente, sin JavaScript tendriamos texto
  blanco sobre papel blanco, o sea nada.
*/
.cabecera {
  --cab-tinta: var(--tinta);
  --cab-tinta-2: var(--tinta-2);
  --cab-linea: var(--linea);
  --cab-fondo: var(--papel);
  /* El color del texto cuando el boton se invierte al pasar por encima. */
  --cab-contra: var(--papel);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  color: var(--cab-tinta);
}

/* Sobre la portada no hay fondo: se ve la pantalla del software que hay detras.
   El texto NO es transparente, es blanco y opaco. */
.cabecera--sobre-portada {
  --cab-tinta: var(--blanco);
  --cab-tinta-2: var(--blanco-2);
  --cab-linea: var(--linea-blanca);
  --cab-fondo: transparent;
  --cab-contra: var(--tinta);
}

.casa {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--alto-casa);
  padding: 0 var(--margen);
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  overflow: hidden;
  transition:
    height 320ms var(--salida),
    opacity 240ms var(--salida);
}

/* Al bajar, la franja de casa se repliega y queda solo la barra: exactamente lo
   que se veia antes de que la cabecera flotara. */
.cabecera:not(.cabecera--sobre-portada) .casa {
  height: 0;
  opacity: 0;
  border-bottom-width: 0;
}

.casa__marca {
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinta);
}

.casa__productos {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.casa__producto {
  white-space: nowrap;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--tinta-3);
  transition: color 240ms var(--salida);
}

.casa__producto[aria-current='true'],
.casa__producto:hover {
  color: var(--tinta);
}

.barra {
  display: flex;
  align-items: center;
  gap: 26px;
  height: var(--alto-barra);
  padding: 0 var(--margen);
  background: var(--cab-fondo);
  border-bottom: 1px solid var(--cab-linea);
  transition:
    background 320ms var(--salida),
    border-color 320ms var(--salida);
}

.cabecera--sobre-portada .barra {
  border-bottom-color: transparent;
}

.barra__nav {
  display: flex;
  flex: none;
  gap: 26px;
}

.barra__enlace {
  white-space: nowrap;
  font-size: var(--t-nav);
  font-weight: 400;
  letter-spacing: var(--tr-titulo);
  color: var(--cab-tinta-2);
  transition: color 240ms var(--salida);
}

.barra__enlace:hover {
  color: var(--cab-tinta);
}

.barra__accion {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: var(--tr-titulo);
  border: 1px solid var(--cab-tinta);
  color: var(--cab-tinta);
  padding: 9px 20px;
  transition:
    background 300ms var(--salida),
    border-color 320ms var(--salida),
    color 300ms var(--salida);
}

.barra__accion:hover {
  background: var(--cab-tinta);
  color: var(--cab-contra);
}

/* En la barra entran la marca, el ícono de WhatsApp y el botón. En un teléfono
   los tres juntos no caben con el texto largo, y el que no se puede acortar es
   el número: por eso se acorta el botón. */
.barra__accion-corto {
  display: none;
}

@media (max-width: 409px) {
  .barra {
    gap: 12px;
  }

  .barra__accion {
    padding: 9px 15px;
  }

  .barra__accion-largo {
    display: none;
  }

  .barra__accion-corto {
    display: inline;
  }

}

.barra__marca {
  display: none;
  font-size: var(--t-nav);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cab-tinta);
}

@media (max-width: 860px) {
  .barra__nav {
    display: none;
  }

  .barra__marca {
    display: block;
  }
}

/* En un teléfono el texto no va pegado al vidrio. Antes eran 18px y se leía
   apretado contra el borde; el ancho que se pierde lo compensa de sobra la
   calma que gana la lectura. */
@media (max-width: 619px) {
  :root {
    --margen: 26px;
  }
}

@media (max-width: 420px) {
  :root {
    --margen: 24px;
  }

  .casa {
    gap: 14px;
  }

  .casa__marca,
  .casa__producto {
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .casa__productos {
    gap: 13px;
  }
}

/* ─────────────────────────────────────────────────────────── bloques */

.bloque {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0d0d0d;
}

/* La portada ocupa la pantalla entera y la cabecera flota encima: por eso el
   titulo entra sin bajar el dedo aunque arriba haya cien pixeles de cabecera. */
.bloque--portada {
  height: 100svh;
  min-height: 560px;
  /* El aire que queda debajo de la cabecera y arriba del software. Ahi vive el
     logotipo, centrado en lo que sobra. */
  --zona-logo: calc(var(--t-logo) * 1.2 + 44px);
  --banda: calc(var(--alto-casa) + var(--alto-barra) + var(--zona-logo));
}

/* Mide lo mismo que la banda: mientras se lo vea, la cabecera tiene fondo
   oscuro detras y puede ser transparente. Cuando se va, se vuelve solida. */
.centinela {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--banda);
  pointer-events: none;
}

.bloque--portada .pz-app {
  top: var(--banda);
}

/* El minimo es generoso a proposito: estas piezas son diagramas y necesitan
   alto para respirar, aunque la ventana sea baja. */
.bloque--ancho {
  height: max(92vh, 720px);
}

/* El lienzo es el marco: tiene el fondo del producto y recorta lo que sobra,
   igual que el encuadre de una foto. Es contenedor para que la pieza mida su
   unidad de diseno contra el ancho de verdad que tiene para dibujarse. */
.bloque__lienzo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--fondo-pieza, #121212);
  container-type: inline-size;
}

/* El texto va SOBRE la pieza, como el pie sobre una foto de campaña. */
.bloque__pie {
  position: absolute;
  left: var(--margen);
  bottom: clamp(28px, 4vw, 54px);
  z-index: 3;
  color: var(--blanco);
  max-width: min(620px, calc(100% - var(--margen) * 2));
}

.bloque__pie .titulo {
  margin-bottom: 14px;
}

.bloque__pie .prosa {
  color: var(--blanco-2);
  margin-bottom: 18px;
}

.bloque__pie .prosa:last-child {
  margin-bottom: 0;
}

.bloque__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Un velo muy leve para que el texto blanco tenga piso en cualquier pieza. */
.bloque__velo {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(6, 6, 6, 0.96) 0%,
    rgba(6, 6, 6, 0.92) 32%,
    rgba(6, 6, 6, 0.46) 64%,
    rgba(6, 6, 6, 0) 100%
  );
  pointer-events: none;
}

.logotipo {
  position: absolute;
  top: calc(
    var(--alto-casa) + var(--alto-barra) +
      (var(--zona-logo, 120px) - var(--t-logo) * 1.2) / 2
  );
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: var(--t-logo);
  font-weight: 300;
  letter-spacing: var(--tr-logo);
  text-indent: var(--tr-logo);
  color: var(--blanco);
  white-space: nowrap;
}

/* ── el único momento autorado: la portada se asienta como una cámara ── */
.bloque--portada .bloque__lienzo {
  transform: scale(1.055);
  opacity: 0;
  animation: asentar 2000ms var(--salida) 120ms forwards;
}

.bloque--portada .logotipo,
.bloque--portada .bloque__pie {
  opacity: 0;
  animation: subir 1100ms var(--salida) 620ms forwards;
}

.bloque--portada .bloque__pie {
  animation-delay: 820ms;
}

@keyframes asentar {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes subir {
  from {
    transform: translateY(14px);
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.logotipo {
  transform: translateX(-50%);
}

@keyframes subir-centrado {
  from {
    transform: translateX(-50%) translateY(14px);
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.bloque--portada .logotipo {
  animation-name: subir-centrado;
}

/* El fondo de cada bloque iguala al de su pieza, asi el recorte no se nota. */
#territorio .bloque__lienzo {
  --fondo-pieza: #101010;
}

#red .bloque__lienzo {
  background:
    radial-gradient(120% 86% at 50% 44%, #181818 0%, #101010 62%, #0d0d0d 100%);
}

/* ──────────────────────────────────────────────────── la portada filmada */

.portada__escena {
  background: #14120f;
}

.portada__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Encuadre de la primera escena, para cuando no corre el JavaScript. Las
     siguientes lo reciben al cargarse: cada clip tiene el suyo. */
  object-position: 80% 50%;
  display: block;
  opacity: 0;
  transition: opacity 1200ms var(--salida);
  /* Un punto por debajo de saturado: el video queda al tono del resto de la
     pagina y no compite con el texto que lleva encima. */
  filter: saturate(0.92) contrast(1.04);
}

/* La escena que se esta viendo. La otra espera abajo con el proximo clip ya
   cargado, y cuando entra las dos se cruzan en un fundido. */
.portada__video--presente {
  opacity: 1;
}

/*
  El fondo autorado que hay DETRAS del video.

  No finge ser una fotografia: es luz de ventana entrando a una habitacion,
  fuera de foco. Esta para que la portada nunca quede negra ni rota mientras el
  video no este, y para que si un navegador no puede reproducirlo igual haya
  algo calido debajo del titulo.
*/
.portada__fondo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      72% 58% at 78% 18%,
      rgba(255, 238, 212, 0.26) 0%,
      rgba(255, 238, 212, 0.07) 42%,
      rgba(255, 238, 212, 0) 72%
    ),
    radial-gradient(
      58% 50% at 18% 76%,
      rgba(214, 198, 176, 0.14) 0%,
      rgba(214, 198, 176, 0) 68%
    ),
    linear-gradient(168deg, #39342d 0%, #241f1a 46%, #14120f 100%);
}

/* El menu flota sobre el video sin fondo propio, asi que necesita una sombra
   arriba: un cuadro claro de la filmacion lo dejaria ilegible. */
.portada__sombra {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(185px, 27vh, 275px);
  z-index: 2;
  /* Tiene que sostener el menú Y el logotipo contra cualquier cuadro de la
     filmación, incluido uno con una ventana al fondo. */
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 8, 0.72) 0%,
    rgba(8, 8, 8, 0.52) 42%,
    rgba(8, 8, 8, 0.2) 72%,
    rgba(8, 8, 8, 0) 100%
  );
  pointer-events: none;
}

/* Sobre la escena filmada el centinela cubre la portada entera: el menu puede
   quedarse transparente mientras haya video detras. */
.bloque--portada .centinela {
  height: 100%;
}

/* ─────────────────────────────────────────────── apariciones al desplazar

   Tres comportamientos, no uno repetido: los textos suben, las piezas de
   producto se asientan como una camara que termina de enfocar, y las celdas de
   una rejilla entran en cascada. Cada uno esta atado a QUE ES el elemento, no
   al capricho de animar todo igual.
*/

@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    transition:
      opacity 820ms var(--salida),
      transform 980ms var(--salida);
    transition-delay: var(--demora, 0ms);
    will-change: opacity, transform;
  }

  .revelar[data-revelar='subir'] {
    transform: translateY(24px);
  }

  .revelar[data-revelar='acercar'] {
    transform: scale(1.04);
  }

  .revelar--visto {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}


/* ─────────────────────────────────────────────────────────── díptico */

.diptico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea);
}

.diptico__panel {
  position: relative;
  height: max(99vh, 660px);
  overflow: hidden;
  background: #0d0d0d;
}

@media (max-width: 860px) {
  .diptico {
    grid-template-columns: 1fr;
  }

  .diptico__panel {
    height: max(76vh, 640px);
  }
}

/* ────────────────────────────────────────────────── tramos sobre papel */

.tramo {
  padding: clamp(68px, 9vw, 132px) var(--margen);
}

.tramo--centro {
  display: grid;
  justify-items: center;
  text-align: center;
}

.tramo__intro {
  display: grid;
  gap: 20px;
  max-width: 620px;
}

.tramo--centro .prosa {
  margin-inline: auto;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(40px, 5vw, 70px);
  background: var(--linea);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  width: 100%;
}

.rejilla__celda {
  background: var(--papel);
  padding: clamp(22px, 2.4vw, 34px);
  min-height: 172px;
  display: grid;
  align-content: start;
  gap: 12px;
  text-align: left;
}

.rejilla__celda h3 {
  font-size: var(--t-enlace);
  font-weight: 500;
  letter-spacing: var(--tr-titulo);
  text-transform: uppercase;
}

.rejilla__celda p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: normal;
  color: var(--tinta-2);
}

@media (max-width: 900px) {
  .rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .rejilla {
    grid-template-columns: 1fr;
  }

  /* Una sola columna: la celda ya no necesita relleno propio a los lados, lo
     pone el margen de la página. Si no, el texto queda con sangría doble. */
  .rejilla__celda {
    padding-left: 0;
    padding-right: 0;
    min-height: 0;
  }
}

/* ─────────────────────────────────────────────────────────── cierre */

.cierre {
  background: var(--tinta);
  color: var(--blanco);
  padding: clamp(78px, 11vw, 168px) var(--margen);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 26px;
}

.cierre .prosa {
  color: var(--blanco-2);
  margin-inline: auto;
}

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: var(--tr-titulo);
  padding: 15px 30px;
  border: 1px solid var(--blanco);
  transition:
    background 300ms var(--salida),
    color 300ms var(--salida);
}

.boton:hover {
  background: var(--blanco);
  color: var(--tinta);
}

.boton svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.boton--lleno {
  background: var(--blanco);
  color: var(--tinta);
}

.boton--lleno:hover {
  background: transparent;
  color: var(--blanco);
}

.pie {
  padding: 40px var(--margen) 54px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  align-items: baseline;
}

.pie__marca {
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.pie__nota {
  font-size: var(--t-nav);
  font-weight: 300;
  letter-spacing: normal;
  color: var(--tinta-3);
}

.pie__enlaces {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.pie__enlaces a {
  font-size: var(--t-nav);
  font-weight: 300;
  color: var(--tinta-2);
  /* Son etiquetas cortas y un número de teléfono: ninguno se parte al medio. */
  white-space: nowrap;
}

.pie__enlaces a:hover {
  color: var(--tinta);
}

/* En el telefono los bloques oscuros ocupan la pantalla entera: es lo que hace
   una imagen a sangre, y ademas el titulo necesita mas alto porque ocupa el
   doble de renglones que en una computadora. */
@media (max-width: 619px) {
  .bloque--ancho {
    height: max(104vh, 845px);
  }

  .diptico__panel {
    height: max(82vh, 680px);
  }
}

/* ──────────────────────────────────────────── el WhatsApp que acompaña

   Chico y redondo, abajo a la derecha, fijo a la pantalla.

   No está siempre: sobre la portada no aparece —ahí ya está el ícono de la
   barra y el título tiene que respirar— y se esconde otra vez cuando llega el
   cierre, que tiene su propio botón grande. Dos botones de WhatsApp a la vez en
   la misma pantalla es ruido, no insistencia.
*/
.flotante {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  /* El `env()` es por el iPhone: sin eso queda debajo de la barra del sistema. */
  bottom: calc(clamp(16px, 3vw, 30px) + env(safe-area-inset-bottom, 0px));
  z-index: 70;

  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);

  /* `visibility` y no sólo `opacity`: escondido tiene que salir del recorrido
     del tabulador, no quedar como una trampa invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition:
    opacity 320ms var(--salida),
    transform 440ms var(--salida),
    background 240ms var(--salida),
    visibility 0s linear 340ms;
}

.flotante svg {
  width: 21px;
  height: 21px;
}

.flotante--presente {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.flotante:hover,
.flotante:focus-visible {
  background: #000000;
}

.flotante:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bloque--portada .bloque__lienzo,
  .bloque--portada .logotipo,
  .bloque--portada .bloque__pie {
    opacity: 1;
    transform: none;
  }

  .bloque--portada .logotipo {
    transform: translateX(-50%);
  }
}