:root {

  --p-ink:          #111111;

  --p-paper:        #F5F4F0;
  --p-blanco:       #ffffff;

  --p-papel-secciones: #F7F7F4;

  --p-noche:        #0E0E10;
  --p-noche-2:      #16161A;

  --p-oro:          #A98A5C;

  --p-rumor:        #8A8276;
  --p-murmullo:     #3A3A3C;
  --p-oro-claro:    #C9AE86;
  --p-oro-tenue:    color-mix(in oklab, var(--p-oro) 38%, transparent);

  --p-ink-soft:     color-mix(in oklab, var(--p-ink) 82%, var(--p-paper));
  --p-ink-muted:    color-mix(in oklab, var(--p-ink) 52%, var(--p-paper));
  --p-ink-faint:    color-mix(in oklab, var(--p-ink) 30%, var(--p-paper));
  --p-line:         color-mix(in oklab, var(--p-ink) 12%, var(--p-paper));
  --p-line-soft:    color-mix(in oklab, var(--p-ink)  7%, var(--p-paper));
  --p-paper-2:      color-mix(in oklab, var(--p-ink)  3%, var(--p-paper));

  --p-paper-soft:   color-mix(in oklab, var(--p-paper) 78%, var(--p-ink));
  --p-paper-muted:  color-mix(in oklab, var(--p-paper) 52%, var(--p-ink));

  --p-ink-soft:     color-mix(in oklab, var(--p-ink) 78%, var(--p-paper));
  --p-ink-muted:    color-mix(in oklab, var(--p-ink) 52%, var(--p-paper));

  --p-rumor-claro:    #6E6A62;
  --p-murmullo-claro: #AFAFAF;

  --p-oro-tinta:      #6F5A32;

  --p-paper-faint:  color-mix(in oklab, var(--p-paper) 52%, var(--p-ink));

  --p-font-ui:   'Jost', system-ui, sans-serif;
  --p-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --p-peso-fino:   200;
  --p-peso-claro:  300;
  --p-peso-medio:  400;
  --p-peso-fuerte: 500;

  --p-t-hero:       clamp(46px, min(9.5vw, 14vh), 152px);

  --p-t-escena:     clamp(30px, min(11cqw, 12.5vh), 132px);
  --p-t-1:          clamp(34px, 5.6vw,  84px);

  --p-t-ben:        clamp(22px, min(5.6cqw, 4.4vh), 46px);
  --p-t-2:          clamp(26px, 3.6vw,  46px);
  --p-t-3:          clamp(20px, 2.2vw,  27px);
  --p-t-lede:       clamp(17px, 1.4vw,  20px);
  --p-t-body:       16px;
  --p-t-sm:         14px;
  --p-t-label:      12px;

  --p-lh-hero:      0.96;

  --p-lh-escena:    1.06;
  --p-lh-tight:     1.12;
  --p-lh:           1.6;

  --p-track-hero:   -.022em;
  --p-track:        .02em;
  --p-track-wide:   .3em;

  --p-track-mono:   .16em;

  --p-track-label:  .24em;

  --p-rotulo-tinta:  #C8C5BE;
  --p-rotulo-cuerpo: clamp(12px, 0.85vw, 15px);
  --p-rotulo-track:  .30em;
  --p-rotulo-nombre-aire: clamp(12px, 1.8vh, 24px);

  --p-rotulo-desenfoque: 5px;
  --p-rotulo-sombra: 0 0 3px rgba(6, 8, 14, .7), 0 1px 14px rgba(6, 8, 14, .8);

  --p-rotulo-paso-hueco: clamp(4px, 0.5vw, 9px);
  --p-rotulo-paso-tinta: color-mix(in oklab, var(--p-paper) 40%, transparent);
  --p-rotulo-rail: color-mix(in oklab, var(--p-paper) 14%, transparent);

  --p-s-1:  4px;   --p-s-2:  8px;   --p-s-3: 12px;  --p-s-4: 16px;
  --p-s-6: 24px;   --p-s-8: 32px;   --p-s-10: 40px; --p-s-12: 48px;
  --p-s-16: 64px;  --p-s-20: 80px;  --p-s-28: 112px;
  --p-s-seccion:   clamp(90px, 12vh, 180px);

  --p-carril:       1280px;

  --p-z-ancho:      .75;

  --p-ancho-papel:  84%;

  --p-margen:       clamp(24px, 5vw, 72px);

  --p-r:            6px;

  --p-radio-foto:   10px;

  --p-pilar-foto:   520px;

  --p-pilar-texto:  540px;

  --p-pilar-escalon: 72px;

  --p-pilar-entra:    60px;
  --p-pilar-deriva:     4%;
  --p-nav-h:        78px;

  --p-nav-h-posada: 62px;

  --p-pilares-alto:   400svh;

  --p-pilares-ancho:  clamp(16px, 6.7vw, 138px);

  --p-pilares-inicio: 72%;

  --p-pilares-junta:  clamp(2px, 0.24vw, 5px);

  --p-pilares-giro:   -8deg;
  --p-pilares-contra:  8deg;
  --p-pilares-tan:    0.1405;

  --p-pilares-fondo:  radial-gradient(120% 90% at 78% 20%, #17171a 0%, #0c0c0e 45%, #08080a 100%);
  --p-pilares-fondo-plano: #08080a;

  --p-pilares-barra:  linear-gradient(180deg, #26262b, #1c1c21);
  --p-pilares-barra-2: linear-gradient(180deg, #1a1a1e, #141417);
  --p-pilares-barra-3: linear-gradient(180deg, #121215, #0b0b0d);
  --p-pilares-rotulo: #ddd9d3;
  --p-pilares-tinta:  #f2efea;

  --p-pilares-tinta-2: #b8b5b0;
  --p-pilares-hueco:  #131316;

  --p-linea-seccion-clara: #E2E0DA;

  --p-linea-claras: #CFCCC4;

  --p-foto-rotulo: #B3B3AD;
  --p-foto-tinta:  #C4C4CB;

  --p-noche-plena:    #060606;
  --p-linea-seccion:  #161616;

  --p-metodo-caja-a:  #101012;
  --p-metodo-caja-b:  #0b0b0d;
  --p-metodo-borde:   #1f1f22;
  --p-metodo-tinta:   #eeeeee;
  --p-metodo-tinta-2: #979797;
  --p-metodo-tinta-3: #777777;
  --p-metodo-tinta-4: #555555;

  --p-cab-cejo-cuerpo:  12px;
  --p-cab-cejo-hueco:   14px;
  --p-cab-filete:       44px;
  --p-cab-rotulo-aire:  26px;
  --p-cab-titular-gap:  4px;

  --p-cab-linea-1:      clamp(34px, 4vw, 72px);
  --p-cab-linea-2:      clamp(28px, 3.4vw, 62px);
  --p-cab-apagado:      #838383;

  --p-metodo-fondo:       var(--p-papel-secciones);
  --p-metodo-caja-claro:  #E8E8E5;
  --p-metodo-borde-claro: #DEDED9;
  --p-metodo-sombra:      rgba(20, 20, 25, .04);
  --p-metodo-foto-eti:    var(--p-foto-rotulo);
  --p-metodo-foto-tinta:  var(--p-foto-tinta);

  --p-metodo-eti-tinta:   #6E6E6E;

  --p-areas-fondo:    var(--p-papel-secciones);
  --p-areas-titular:  var(--p-ink);
  --p-areas-eti:      #565656;
  --p-areas-eti-2:    #3D3D3D;

  --p-areas-eti-3:    #9A9791;
  --p-areas-tinta:    #4A4A4A;
  --p-areas-tinta-2:  #5E5E5E;
  --p-areas-regla:    #CFCCC4;

  --p-areas-nombre:   var(--p-blanco);
  --p-areas-regla-2:  #C9C6BE;
  --p-areas-bloque:   var(--p-noche-2);

  --p-res-antes-a:    #0c0c0c;
  --p-res-antes-b:    #090909;
  --p-res-antes-borde: #1a1a1a;
  --p-oro-caja-a:     #14120e;
  --p-oro-caja-b:     #0b0a08;
  --p-oro-borde:      #33291c;
  --p-res-antes-tinta: #8a8a8a;
  --p-res-tinta:      #f2f2f2;
  --p-res-cierre:     #999999;

  --p-res-tachado:    rgba(255,255,255,.18);

  --p-pilares-trama-linea:  #23232a;

  --p-pilares-trama-desborde: 8svh;

  --p-pilares-tope-texto: calc(100% - var(--p-pilares-inicio)
                               + var(--p-pilares-video) * var(--p-pilares-tan) * 0.34
                               + var(--p-s-8));

  --p-pilares-trama-tope:   var(--p-pilares-inicio);

  --p-pilares-fuera:  0px;

  --p-pilares-nombre: clamp(13px, 1.5vw, 26px);
  --p-pilares-nombre-track: 0.42em;

  --p-pilares-numeral: clamp(30px, 5.6vw, 96px);

  --p-pilares-numeral-tinta:   #5c5c68;
  --p-pilares-numeral-tinta-2: #4a4a54;
  --p-pilares-numeral-tinta-3: #3a3a42;

  --p-pilares-video:  100svh;

  --p-pilares-sesgo:  calc(var(--p-pilares-video) * var(--p-pilares-tan));

  --p-pilares-suelo:  clamp(46px, 11svh, 120px);
  --p-pilares-aire:   clamp(16px, 3.4svh, 44px);

  --p-pilares-titulo: clamp(30px, 4.2vw, 68px);
  --p-pilares-frase:  clamp(15px, 1.4vw, 20px);

  --p-pilares-entrada-titulo: clamp(24px, 5.95cqw, 66px);
  --p-pilares-entrada-frase:  clamp(14px, 2.42cqw, 27px);

  --p-pilares-dato:      clamp(19px, 3.3cqw, 37px);
  --p-pilares-dato-eti:  clamp(9px, 1.06cqw, 12px);

  --p-pilares-cambio: 420ms;

  --p-rueda-cola: 0.2em;

  --p-m-fast:       .18s;
  --p-m:            .32s;
  --p-m-slow:       .55s;
  --p-m-escena:     .9s;
  --p-m-escena-2:   1.3s;

  --p-ease:         cubic-bezier(.32, .72, .24, 1);
  --p-ease-tela:    cubic-bezier(.16, 1, .3, 1);
  --p-ease-suave:   cubic-bezier(.4, 0, .2, 1);

  --p-z-fondo:      0;
  --p-z-contenido:  10;
  --p-z-nav:        400;
  --p-z-menu:       500;
  --p-z-progreso:   600;

  --p-z-intro:      700;
  --p-z-intro-marca: 710;

  --p-z-intro-acceso: 720;

  --p-z-chat:       450;

  --p-chat-fondo:       var(--p-paper);
  --p-chat-tinta:       var(--p-ink);
  --p-chat-tinta-media: var(--p-ink-soft);
  --p-chat-tinta-baja:  var(--p-ink-muted);
  --p-chat-linea:       color-mix(in oklab, var(--p-ink) 10%, transparent);
  --p-chat-linea-media: color-mix(in oklab, var(--p-ink) 22%, transparent);
  --p-chat-linea-viva:  color-mix(in oklab, var(--p-ink) 50%, transparent);
  --p-chat-relleno:     color-mix(in oklab, var(--p-ink) 5%, transparent);
  --p-chat-relleno-viva: color-mix(in oklab, var(--p-ink) 10%, transparent);
  --p-chat-foco:        var(--p-oro-tinta);
  --p-chat-sombra:      0 18px 60px rgba(17, 17, 17, .16), 0 2px 8px rgba(17, 17, 17, .06);
  --p-chat-bola:        52px;
  --p-chat-bola-fondo:  var(--p-ink);
  --p-chat-bola-borde:  color-mix(in oklab, var(--p-paper) 22%, transparent);
  --p-chat-bola-sombra: 0 4px 20px rgba(0, 0, 0, .22);
  --p-chat-iso-ancho:   30px;
  --p-chat-iso-alto:    24px;
  --p-chat-borde:       clamp(16px, 2vw, 28px);
  --p-chat-t-titular:   26px;
  --p-chat-t-texto:     15px;
  --p-chat-t-rotulo:    11px;
  --p-chat-flecha:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1 5h18M14.5 1 19 5l-4.5 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --p-chat-ancho:       min(420px, calc(100vw - 32px));
  --p-chat-alto:        min(600px, calc(100svh - 110px));
  --p-chat-ancho-grande: min(720px, calc(100vw - 56px));
  --p-chat-alto-grande:  min(780px, calc(100svh - 110px));

  --p-intro-s:      900ms;
  --p-intro-letras: 1600ms;
  --p-intro-viaje:  1100ms;

  --p-intro-paso:   200ms;

  --p-escena-espera: 220ms;

  --p-rueda-paso:   2400ms;
  --p-rueda-cambio:  760ms;

  --p-pf-tiempo:    3400ms;
  --p-pf-bucle:    17000ms;
  --p-pf-viaje:     1400ms;
  --p-pf-paso:         8ms;
  --p-pf-traza:     1800ms;

  --p-marca-centrado: 0.283%;

  --p-canal: clamp(64px, 8vw, 150px);

  --p-marca-trazo: 3.558px;

  --p-marca-s-escala: 0.118611;
}