/* Base compartida por la portada y los dos mundos.

   Newsreader es SIL OFL y solo se usa en itálica. Helvetica Neue LT se sirve
   autoalojada por indicación expresa del cliente, titular de la licencia. */
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic-v2.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('/fonts/helvetica-neue-300-v2.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('/fonts/helvetica-neue-500-v2.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --sans: 'Helvetica Neue LT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', Georgia, serif;

  --negro: #060505;
  --hueso: #f4f1ec;

  --fondo: var(--negro);
  --tinta: var(--hueso);
  --linea: rgba(244, 241, 236, 0.12);

  --ambar: #d98d3e;
  --ambar-claro: #f0b969;
  --ambar-hondo: #7a3f0e;

  --murano: #2f9fd0;
  --murano-claro: #8fd4ea;
  --murano-hondo: #123a56;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.rotulo {
  font-size: clamp(0.78rem, 0.85vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.serif-italica {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
}

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pórtico de entrada. Sin la clase `js` no existe: un fallo de script deja la
   página legible en vez de una pantalla en negro. */
.cargador { display: none; }
.js .cargador {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
}

/* Los dos actos se superponen en el centro para que el relevo no mueva nada. */
.portico__acto {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.8rem, 4vh, 3.2rem);
}
.portico__marca {
  display: block;
  color: var(--tinta);
}
.portico__marca--organic { height: clamp(150px, 27vh, 250px); width: auto; }
.portico__marca--beu     { height: clamp(40px, 7.1vh, 62px); width: auto; }
.portico__marca--colorgel { width: clamp(290px, 44vw, 580px); height: auto; max-width: 82vw; }

/* Contorno de un píxel real a cualquier tamaño. */
.portico__trazo { stroke-width: 1.2px; }

.portico__barra {
  position: absolute;
  bottom: clamp(2.4rem, 7vh, 4.6rem);
  display: block;
  width: min(200px, 38vw);
  height: 1px;
  background: var(--linea);
  overflow: hidden;
}
.portico__barra i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--acento, var(--tinta));
  transform: scaleX(0);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}