:root {
  --vh: 1svh;
  /* Regla geométrica: líneas, bordes y detalles de 1–2px usan px fijos para evitar antialiasing desigual. */
  --u: calc(100vw / 375);
  --cta-border-width: calc(5 * var(--u));
  --cta-shadow-depth: calc(3 * var(--u));
  --cta-radius: calc(40.34 * var(--u));
  --frame-w: calc(375 * var(--u));
  --frame-h: calc(667 * var(--u));
  --escena-ar: 375 / 667;
  --salida-x: calc(-1.0667 * var(--frame-w));
  --salida-y: calc(-1.0495 * var(--frame-h));
  --entrada-y: calc(-0.3598 * var(--frame-h));

  --color-sky: #00a0dd;
  --color-brown-dark: #3a2a24;
  --color-sand: #f7d8aa;
  --color-gold: #f5b223;
  --color-gold-mid: #C38809;
  --color-gold-dark: #926607;
  --color-white-warm: #fffaf3;
  --color-white: #FFFFFF;         /* blanco puro del diseño (no el cálido) */
  --color-orange: #e77408;
  --color-orange-hex: #F17F36; /* naranja del hexágono de descuento */
  --color-wall: #AD5207; /* Valor aproximado del muro, pendiente de confirmar contra Figma. */
  --color-field: #392822; /* Marrón de los campos, distinto de brown-dark. */
  --color-field-focus: #6b4f45; /* Campo enfocado. Valor a ojo de la referencia; confirmar contra Figma. */
  --color-link: #1A56B8; /* 5:1 sobre --color-sand; va subrayado: contra el texto marrón queda 2:1 */
  --color-orange-alt: #f58723;
  --color-brown-mid: #b76123;
  --color-navy: #1b1e3c;
  --color-dark-bg: #2A1A0E;       /* fondo oscuro de escenas y sala */
  --color-brown-terracota: #B0723D; /* fondo sala en breakpoint medio */
  --color-asset-warm: #EAAD6D;    /* ámbar muestreado de escena-desktop.svg */
  --color-error: #B01E1E;         /* estados de error en formularios; 5:1 sobre --color-sand */
  --color-error-on-dark: #FFC2A8; /* texto de error sobre fondo oscuro */
  --color-disabled: #b2b2b2;      /* controles deshabilitados */

  --font-display: "degular-display", sans-serif;
  --font-alt: "roca", sans-serif;
  /* El recorrido efectivo de intro es el alto completo del riel. */
  --intro-rail-height: calc(var(--vh) * 2.5);
  --intro-track: calc(var(--vh) * 3);
  --puerta-track: calc(var(--vh) * 3);
  --puerta-zoom-factor: 1.8;

  --fs-display-1: calc(56 * var(--u));
  --fs-h1: calc(48 * var(--u));
  --fs-acertijo: calc(36 * var(--u));
  --fs-h2: calc(34 * var(--u));
  --fs-h4: calc(26 * var(--u));
  --fs-h5: calc(22 * var(--u));
  --fs-p: calc(18 * var(--u));
  --fs-small: calc(16 * var(--u));
}

@media (min-width: 480px) {
  :root {
    --u: calc(480px / 375);
  }
}

@media (min-width: 900px) {
  :root {
    /* Escalar tipo "contain": elige el eje que aprieta.
       Con relación 1,6 el término de altura gana casi siempre;
       el de ancho queda como guarda para ventanas angostas. */
    /* Límite de diseño inferior (0.65px): prioriza legibilidad aunque desborde en alto. */
    /* Límite de diseño superior (1.60px): evita inflar el stage en pantallas 4K.
       Estaba en 1.30 y actuaba demasiado pronto: en un monitor de 27" el
       escenario se congelaba por debajo del alto de la ventana y dejaba
       franjas sin pintar arriba y abajo. */
    --ud: clamp(0.65px, min(100vw / 1440, 100svh / 900), 1.60px);

    --stage-w: calc(1440 * var(--ud));
    --stage-h: calc(900  * var(--ud));
    /* Bordes del viewport expresados en coordenadas del escenario, que esta
       centrado y mide --stage-w. Con la ventana mas angosta que el escenario
       dan valores invertidos, por eso cada pieza los combina con min()/max()
       y nunca encoge por debajo de su ancho de diseno. */
    --vp-izq: calc((var(--stage-w) - 100vw) / 2);
    --vp-der: calc((var(--stage-w) + 100vw) / 2);
    /* Bordes verticales del viewport respecto del escenario centrado. */
    --vp-arriba: calc((var(--stage-h) - 100svh) / 2);
    --vp-abajo: calc((var(--stage-h) + 100svh) / 2);
    /* cenefa.webp trae 5px transparentes por lado sobre 2114 (0.24%), asi
       que la caja llega al borde pero el dibujo no. Estas dos se pasan 8
       unidades de cada lado para que el trazo opaco si llegue. */
    --vp-izq-x: calc(var(--vp-izq) - 8 * var(--ud));
    --vp-der-x: calc(var(--vp-der) + 8 * var(--ud));
    --frame-w: calc(1440 * var(--ud));
    --frame-h: calc(900 * var(--ud));

    /* Los tres estan en --u (:4-6), que en escritorio queda congelado en
       calc(480px / 375) = 1.28px y no escala con la ventana: la caja del boton
       crecia con --ud y el borde se quedaba quieto. Factor 76/55 = 1.3818, el
       alto del CTA de escritorio contra el del movil. El 56.54 del radio
       coincide con el valor medido en Figma del boton de 482x76. */
    --cta-border-width: calc(6.91 * var(--ud));
    --cta-shadow-depth: calc(4.15 * var(--ud));
    --cta-radius: calc(56.54 * var(--ud));

    --escena-ar: 1440 / 900;

    /* Default de lienzo para las secciones de papiro. */
    --lienzo-fondo: var(--color-sand);
  }
}