/* CAO & PARTNERS. Página de transición mientras se rediseña la web.
   Identidad de la interfaz nueva: fondo #F0EEEB, textos #191919 / #292929, teja #9E3100 al pasar o tocar.
   Tipografías: Gill Sans Light con un trazo fino (marca, igual de fina y espaciada que la maqueta),
   Gill Sans Book (MADRID | ISLAS CANARIAS), Gill Sans Light (correo), Helvetica Neue Thin y Book (línea de tiempo).
   Ordenador: la maqueta mide 1920 x 1080 y "k" vale 1 px de la maqueta. Móvil: "m" vale 1 px a 390 de ancho. */

/* Las métricas se fijan igual en los dos pesos de Helvetica para que todos los nombres queden a la misma altura
   (la Book y la Thin del sistema no traen la misma altura de ascendentes). */
@font-face { font-family: "HN"; font-weight: 200; font-display: swap; ascent-override: 95%; descent-override: 21.3%; line-gap-override: 0%;
  src: local("Helvetica Neue Thin"), local("HelveticaNeue-Thin"), url("fonts/helveticaneue-200.woff") format("woff"); }
@font-face { font-family: "HN"; font-weight: 400; font-display: swap; ascent-override: 95%; descent-override: 21.3%; line-gap-override: 0%;
  src: local("Helvetica Neue"), local("HelveticaNeue"), url("fonts/helveticaneue-400.woff") format("woff"); }
@font-face { font-family: "GS"; font-weight: 300; font-display: swap;
  src: local("Gill Sans Light"), local("GillSans-Light"), url("fonts/gillsans-300.woff") format("woff"); }
@font-face { font-family: "GS"; font-weight: 400; font-display: swap;
  src: local("Gill Sans"), local("GillSans"), url("fonts/gillsans-400.woff") format("woff"); }

:root {
  --bg: #F0EEEB;
  --tx: #191919;
  --tx2: #292929;
  --linea: #3a3a3a;
  --teja: #9E3100;
  --hn: "HN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gs: "GS", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --k: 1px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  color: var(--tx); overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  font-family: var(--hn); font-weight: 200; line-height: 1.15;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; text-decoration: none; transition: color .3s ease; }
a:hover, a:active, a.toc { color: var(--teja); }
:focus-visible { outline: 1px solid var(--teja); outline-offset: 3px; }

/* Lienzo con las proporciones de la maqueta, centrado en la ventana */
.lienzo { position: absolute; left: 50%; top: 50%; width: calc(1920 * var(--k)); height: calc(1080 * var(--k)); transform: translate(-50%, -50%); }

/* ---------- Plano de fondo (Calle Francia, planta base limpia) ----------
   Se dibuja en gris oscuro, como en el área de clientes, y después se retira hasta quedar de fondo. */
.fondo { position: absolute; pointer-events: none; opacity: .042; }
.fondo.prep { opacity: .6; }
.fondo.retira { transition: opacity 2.4s cubic-bezier(.4, 0, .2, 1); }
.fondo svg { display: block; width: 100%; height: 100%; overflow: visible; --pl-bg: var(--bg); }
.fondo.prep path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fondo.prep path.f { fill-opacity: 0; }
.fondo.prep.dibuja path { stroke-dashoffset: 0; }
.fondo.prep.dibuja path.f { fill-opacity: 1; }

/* ---------- Marca ---------- */
.marca { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--gs); font-weight: 300; color: var(--tx); white-space: nowrap;
  -webkit-text-stroke: calc(.55 * var(--k)) var(--tx); }
.marca span { display: inline-block; }

/* ---------- Línea de tiempo (la misma de Calle Francia) ---------- */
.tiempo { position: absolute; }
.linea { display: block; width: 100%; overflow: visible; }
.linea .fina { fill: var(--linea); opacity: 0; transition: opacity 1.2s ease; }
.linea .gruesa { fill: var(--tx2); }
.linea .tic { fill: var(--linea); transform-box: fill-box; transform-origin: center; transform: scaleY(0); transition: transform .7s var(--ease); }
.linea .tic.g { fill: var(--tx2); }
.linea .tic.on { transform: scaleY(1); }
.tiempo.lista .fina { opacity: 1; }
.fases { position: absolute; left: 0; right: 0; }
.fase { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translate(-50%, 6px); white-space: nowrap;
  opacity: 0; transition: opacity 1s ease, transform 1.2s var(--ease); }
.fase.vis { opacity: 1; transform: translate(-50%, 0); }
.fase.actual { font-weight: 400; }

/* ---------- Pie ---------- */
.pie { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--gs); text-transform: uppercase; color: var(--tx); }
.pie p { font-weight: 400; }
.pie a { font-weight: 300; }
.pie > * { display: block; }

/* ---------- Entrada ---------- */
.marca span, .pie > * { opacity: 0; transition: opacity 1.8s ease, transform 1.8s var(--ease), letter-spacing 2.6s var(--ease); }
.pie > * { transform: translateY(8px); }
body.e1 .marca span { opacity: 1; }
body.e3 .pie > * { opacity: 1; transform: none; }
body.e3 .pie > a { transition-delay: .25s; }

/* =================== ORDENADOR =================== */
@media (min-width: 760px) {
  :root { --k: min(calc(100vw / 1920), calc(100vh / 1080)); }
  .fondo { left: calc(68.4 * var(--k)); top: calc(-106.9 * var(--k)); width: calc(1759 * var(--k)); height: calc(1296.6 * var(--k)); }

  .marca { top: calc(492 * var(--k)); font-size: calc(55 * var(--k)); line-height: calc(60 * var(--k)); }
  .marca span { letter-spacing: .04em; margin-right: -.04em; }
  body.e1 .marca span { letter-spacing: .1em; margin-right: -.1em; }

  .tiempo { left: calc(400 * var(--k)); top: calc(611.6 * var(--k)); width: calc(1077 * var(--k)); }
  .linea { height: calc(48 * var(--k)); }
  .fases { top: calc(66 * var(--k)); }
  .fase { font-size: calc(33 * var(--k)); line-height: calc(38 * var(--k)); }
  .fase.actual { margin-left: calc(9 * var(--k)); }

  .pie { top: calc(888 * var(--k)); font-size: calc(23.6 * var(--k)); line-height: calc(27 * var(--k)); letter-spacing: .02em; }
}

/* =================== MÓVIL =================== */
@media (max-width: 759.98px) {
  :root { --m: clamp(.82px, calc(100vw / 390), 1.25px); }
  .lienzo { position: fixed; inset: 0; width: auto; height: auto; transform: none; }
  /* el plano llena la pantalla en vertical y se ve su zona central */
  .fondo { left: 50%; top: 50%; width: calc(100svh * 1.357 * 1.05); height: calc(100svh * 1.05); transform: translate(-50%, -50%); }
  .fondo:not(.prep) { opacity: .05; }

  .marca { top: calc(50% - 96 * var(--m)); font-size: calc(30 * var(--m)); line-height: calc(34 * var(--m)); -webkit-text-stroke-width: calc(.3 * var(--m)); }
  .marca span { letter-spacing: .04em; margin-right: -.04em; }
  body.e1 .marca span { letter-spacing: .1em; margin-right: -.1em; }

  /* Línea más corta y marcas repartidas por igual, con todos los nombres centrados bajo su marca */
  .tiempo { left: calc(50% - 170 * var(--m)); width: calc(340 * var(--m)); top: calc(50% - 20 * var(--m)); }
  .linea { height: calc(18 * var(--m)); }
  .fases { top: calc(27 * var(--m)); }
  .fase { font-size: calc(13.5 * var(--m)); line-height: calc(16 * var(--m)); }

  .pie { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 44 * var(--m)); font-size: calc(13.5 * var(--m)); line-height: calc(17 * var(--m)); letter-spacing: .02em; }
}

@media (prefers-reduced-motion: reduce) {
  .marca span, .pie > *, .fase, .linea .tic, .linea .fina, .fondo { transition: none !important; }
}