/* ==========================================================================
   RASEM — "Nueva web pronto" (Figma "rasem-web" › Home 446:2)
   Página provisional mientras se termina la web nueva.
   Ordenador: 1 unidad = 1 px del Figma (1919 de ancho) → calc(N * var(--u))
   Móvil (≤ 767 px): 1 unidad = 1 px de un móvil de 390 → calc(N * var(--m))
   ========================================================================== */

/* ---------- Fuentes (incluidas en /fonts) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geist-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --u: calc(100vw / 1919);
  --ink: #0e0e0e;
  --white: #ededed;
  --btn-text: #161616;
  --grain-op: .09;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; background: var(--ink); }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  margin: 0; background: var(--ink); color: var(--white);
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
  font-variation-settings: 'opsz' 28;            /* "Inter 28pt" del Figma */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
p, h1, figure { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
svg { display: block; fill: currentColor; }

/* Texto pequeño (Geist Mono) */
.mono {
  font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 400; font-variation-settings: normal;
  font-size: calc(14 * var(--u)); line-height: 1.19; letter-spacing: calc(.7 * var(--u)); text-transform: uppercase;
}
/* bloque de 3 líneas justificado (también la última, como en el Figma) */
.mono.block { width: calc(217 * var(--u)); line-height: 1.08; text-align: justify; text-align-last: justify; }
/* textos que se "desencriptan" al empezar */
html.js [data-scramble]:not(.is-on) { visibility: hidden; }

/* ==========================================================================
   PÁGINA
   Lo de arriba (contacto) va pegado arriba y lo de abajo (titular, logo,
   texto y flecha) pegado abajo, así cabe en cualquier pantalla.
   ========================================================================== */
.pr { position: relative; height: max(100svh, calc(700 * var(--u))); overflow: hidden; background: var(--ink); }
.pr > * { position: absolute; }

/* Foto del estudio (misma posición y tamaño que en el Figma) */
.pr-photo { left: calc(-89 * var(--u)); top: calc(-129 * var(--u)); width: calc(1988 * var(--u)); height: max(calc(1492 * var(--u)), calc(100% + 129 * var(--u))); overflow: hidden; }
.pr-photo img { position: absolute; left: 0; top: calc(-103.5 * var(--u)); width: 100%; height: auto; }

/* Grano de película moviéndose por toda la página, por encima de la foto y
   por debajo de los textos (lo mueve la tarjeta gráfica) */
.pr > .grain {
  position: absolute; z-index: 2; pointer-events: none;
  top: calc(-1 * var(--grain-size, 256px)); left: calc(-1 * var(--grain-size, 256px)); right: 0; bottom: 0;
  background-image: var(--grain); background-size: var(--grain-size, 256px) var(--grain-size, 256px);
  opacity: var(--grain-op); image-rendering: pixelated; will-change: transform;
}

/* Contacto */
.pr-contact { left: calc(1444.75 * var(--u)); top: calc(34 * var(--u)); }
.pr-label { margin-left: calc(.25 * var(--u)); }
.pr-mail {
  display: inline-block; margin-top: calc(9 * var(--u));
  font-size: calc(60 * var(--u)); line-height: .94; letter-spacing: calc(-1.8 * var(--u)); white-space: nowrap;
}
.pr-btns { display: flex; gap: calc(18 * var(--u)); margin-top: calc(31 * var(--u)); margin-left: calc(.25 * var(--u)); }

/* Botones claros (como el del Figma) */
.btn {
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  width: calc(142 * var(--u)); height: calc(41 * var(--u));
  background: var(--white); color: var(--btn-text);
  font-size: calc(20 * var(--u)); line-height: .94; letter-spacing: calc(-.4 * var(--u)); white-space: nowrap;
  overflow: hidden;
}
.ico { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* Abajo */
.pr-studio { display: none; }   /* solo en el móvil */
.pr-status {
  left: calc(20 * var(--u)); top: calc(100% - 487 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u)); line-height: 1.08; white-space: nowrap;
}
.pr-status i { flex: none; width: calc(4 * var(--u)); height: calc(4 * var(--u)); background: #d9d9d9; }
/* el cuadrito hace de radar: unas ondas cuadradas salen de él y se desvanecen */
.pr-status i { position: relative; --rr: calc(9 * var(--u)); }
.pr-status i::before, .pr-status i::after {
  content: ""; position: absolute; inset: 0; border: 1px solid #d9d9d9;
  animation: pr-radar 2.2s cubic-bezier(.2, .6, .35, 1) infinite;
}
.pr-status i::after { animation-delay: 1.1s; }
@keyframes pr-radar { 0% { inset: 0; opacity: .9; } 100% { inset: calc(-1 * var(--rr)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pr-status i::before, .pr-status i::after { animation: none; opacity: 0; } }
.pr-soon {
  left: calc(20 * var(--u)); top: calc(100% - 462 * var(--u));
  font-size: calc(60 * var(--u)); font-weight: 600; line-height: .94; letter-spacing: calc(-1.8 * var(--u));
}
.pr-logo { left: calc(20 * var(--u)); top: calc(100% - 307 * var(--u)); width: calc(1404 * var(--u)); line-height: 0; }
.pr-logo svg { width: 100%; height: auto; }
.pr-txt { left: calc(1682 * var(--u)); top: calc(100% - 300 * var(--u)); }
.pr-arrow { left: calc(1839 * var(--u)); top: calc(100% - 96 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u)); transform: rotate(180deg); }

/* ==========================================================================
   Al pasar el ratón: cada letra sube y sale por arriba mientras su copia
   entra por abajo, una detrás de otra (igual que en la web).
   ========================================================================== */
.rl-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .02em .22em; margin: -.16em -.02em -.22em; }
.rl-sp { min-width: .28em; }
.rl { display: inline-block; white-space: pre; text-shadow: 0 var(--rd, 1.4em) currentColor; transition: transform .55s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.is-roll:hover .rl, .is-roll:focus-visible .rl { transform: translateY(calc(-1 * var(--rd, 1.4em))); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }

/* ==========================================================================
   CUBO
   ========================================================================== */
#cubo {
  position: fixed; z-index: 40;
  left: calc(-228 * var(--u)); top: calc(-100 * var(--u));
  width: calc(540 * var(--u)); height: calc(440 * var(--u));
  pointer-events: none;
}
html.cubo-hover, html.cubo-hover * { cursor: grab !important; }
html.cubo-drag, html.cubo-drag * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* ==========================================================================
   PANTALLA DE INICIO
   ========================================================================== */
.loader { display: none; }
html.is-loading, html.is-loading body { overflow: hidden; }
html.js .loader {
  display: block; position: fixed; inset: 0; z-index: 200;
  background: var(--ink); color: #d0d0d0;
  clip-path: inset(0 0 0 0); will-change: clip-path;
}
html.js .loader.is-out { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1); }
html.js .loader.is-gone { display: none; }
html.js .loader:not(.is-gone) ~ #cubo { z-index: 210; }
.loader > * { position: absolute; }
.ld-t { line-height: calc(29 * var(--u)); top: calc(50% - 124 * var(--u)); }
.ld-a { left: calc(19 * var(--u)); }
.ld-b { left: calc(970 * var(--u)); }
.ld-c { left: calc(1203 * var(--u)); }
.ld-d { left: calc(1680 * var(--u)); }
.ld-logo { left: calc(20 * var(--u)); bottom: calc(40 * var(--u)); width: calc(1404 * var(--u)); color: var(--white); line-height: 0; }
.ld-logo svg { width: 100%; height: auto; }
html.js .ld-t { visibility: hidden; }
html.js .ld-t.is-on { visibility: visible; }
/* el logo de la pantalla de inicio sube letra a letra desde abajo, cortado en seco */
html.js .ld-logo path { transform: translateY(190px); }
html.js .ld-logo.go path { transform: none; transition: transform .95s cubic-bezier(.77, 0, .18, 1) calc(var(--i) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  html.js .ld-logo path { transform: none; }
  .rl { transition: none; }
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media (max-width: 767px) {
  :root { --m: calc(100vw / 390); }
  .mono { font-size: calc(11 * var(--m)); letter-spacing: calc(.55 * var(--m)); }
  .mono.block { width: calc(190 * var(--m)); text-align: left; text-align-last: auto; }

  /* ---------- Figma "Móvil · Home" (453:61), 390 × 793 ----------
     La foto va arriba; lo demás se mide desde abajo para que quepa en
     cualquier móvil. */
  html, body, .pr { background: #100f08; }
  .pr { height: max(100svh, calc(600 * var(--m))); }

  .pr-photo { left: calc(-16 * var(--m)); top: calc(-25 * var(--m)); width: calc(422 * var(--m)); height: calc(670 * var(--m)); }
  .pr-photo img { top: 0; height: 100%; object-fit: cover; object-position: 50% 50%; }
  /* fundido a oscuro */
  .pr-photo::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(445 * var(--m)); bottom: 0;
    background: linear-gradient(rgba(16, 15, 8, 0) 0, #100f08 calc(200 * var(--m)));
  }

  .pr-status { left: calc(10 * var(--m)); top: calc(100% - 386 * var(--m)); gap: calc(10 * var(--m)); font-size: calc(7 * var(--m)); letter-spacing: calc(.35 * var(--m)); }
  .pr-status i { width: calc(4 * var(--m)); height: calc(4 * var(--m)); --rr: calc(7 * var(--m)); }
  .pr-soon { left: calc(10 * var(--m)); top: calc(100% - 372 * var(--m)); bottom: auto; font-size: calc(25 * var(--m)); letter-spacing: calc(-.75 * var(--m)); }

  .pr-contact { left: calc(12 * var(--m)); top: calc(100% - 278 * var(--m)); }
  .pr-label { margin-left: calc(1 * var(--m)); font-size: calc(7 * var(--m)); letter-spacing: calc(.35 * var(--m)); line-height: 1.08; }
  .pr-mail { margin-top: calc(12.4 * var(--m)); font-size: calc(25 * var(--m)); letter-spacing: calc(-.75 * var(--m)); }
  .pr-btns { gap: calc(7 * var(--m)); margin-top: calc(10.5 * var(--m)); margin-left: 0; }
  .btn { width: calc(114 * var(--m)); height: calc(31 * var(--m)); gap: calc(10 * var(--m)); padding: 0; font-size: calc(15 * var(--m)); letter-spacing: calc(-.3 * var(--m)); }
  .btn--ghost { background: transparent; color: var(--white); border: 1px solid var(--white); }
  .ico { width: calc(11 * var(--m)); height: calc(11 * var(--m)); }

  .pr-txt, .pr-arrow { display: none; }
  .pr-studio { display: block; left: calc(12 * var(--m)); top: calc(100% - 125 * var(--m)); font-size: calc(25 * var(--m)); line-height: .94; letter-spacing: calc(-.75 * var(--m)); }
  .pr-logo { left: calc(12 * var(--m)); top: calc(100% - 90 * var(--m)); width: calc(367 * var(--m)); }

  #cubo { left: calc(-100 * var(--m)); top: calc(-46 * var(--m)); width: calc(250 * var(--m)); height: calc(204 * var(--m)); }

  .ld-t { top: calc(50% - 66 * var(--m)); line-height: 1.08; }
  .ld-a { left: calc(16 * var(--m)); }
  .ld-d { left: auto; right: calc(16 * var(--m)); }
  .ld-b, .ld-c { top: calc(50% - 30 * var(--m)); line-height: 1.6; }
  .ld-b { left: calc(16 * var(--m)); }
  .ld-c { left: calc(200 * var(--m)); }
  .ld-logo { left: calc(12 * var(--m)); bottom: calc(21 * var(--m)); width: calc(367 * var(--m)); }
}