/* Pasaje Empresalia · sitio y presentación comercial
   Diseño y desarrollo: Lazarillo Studio (lazarillo.studio)
   ¿Necesitas ajustar algo? Con gusto te ayudamos: WhatsApp +52 1 722 322 2354.
   Las modificaciones realizadas fuera del estudio quedan fuera del alcance de nuestro soporte; si algo deja de
   funcionar después de un cambio externo, podemos revisarlo como un trabajo aparte. */
/* ==========================================================================
   Pasaje Empresalia · Design tokens (fuente de verdad)
   Tres capas: primitivos (valores crudos) → semánticos (para qué sirve) →
   componente (donde hace falta). Las hojas de estilo consumen SOLO semánticos.
   Para cambiar la marca: toca los primitivos. Para cambiar un uso: el semántico.
   Paleta derivada de #123e32 en OKLCH (misma luminosidad perceptual entre pasos),
   neutros teñidos al mismo tono para que nada se vea "gris de sistema".
   ========================================================================== */
:root{
  /* ---------- 1. PRIMITIVOS ---------- */
  /* Verde bosque (superficie de marca). El 800 es el verde aprobado. */
  --green-950:#001c14; --green-900:#042b21; --green-800:#123e32; --green-700:#2a5044;
  --green-600:#43665b; --green-500:#5d7c72; --green-400:#7e9990; --green-300:#a0b7af;
  --green-200:#c3d6cf; --green-100:#dbece6; --green-50:#e9faf3;
  /* Neutros cálidos teñidos (H≈172°, croma mínimo) */
  --stone-0:#0f1513; --stone-900:#232b28; --stone-700:#4f5854; --stone-500:#757c79;
  --stone-300:#b3b9b7; --stone-200:#d0d6d3; --stone-100:#e7eceb; --stone-50:#f4f8f6;
  /* Papel: el blanco de la marca, nunca #fff puro en superficies grandes */
  --paper:#f7f8f4; --paper-2:#eef2ec; --white:#ffffff;
  --paper-3:#f0f1ec;                    /* papel un paso más oscuro, mismo tono (fondo del mapa) */
  /* Lima: acento único, dosis mínima (progreso, foco, un highlight) */
  --lime-300:#b8d074; --lime-400:#d4ed90; --lime-500:#dff89b;
  /* Tinta: texto sobre claro */
  --ink:#162d26;

  /* ---------- 2. SEMÁNTICOS: color ---------- */
  --bg:var(--paper);                 /* fondo de página */
  --bg-2:var(--paper-2);             /* franjas suaves, escenas "claras" alternas */
  --map-bg:var(--paper-3);           /* fondo del mapa vectorial: mismo tono que la página, apenas más oscuro para distinguirlo */
  --surface:var(--white);            /* tarjetas, menú, controles sobre claro */
  --surface-dark:var(--green-800);   /* escenas verdes, deck controls, pies */
  --surface-dark-2:var(--green-900); /* pantalla de panorámica, contraste dentro del verde */
  --brand:var(--green-800);          /* color de marca para CTA, dots activos */
  --brand-hover:var(--green-700);
  --accent:var(--lime-400);          /* foco, progreso, dot activo del deck */
  --accent-strong:var(--lime-300);

  --text:var(--ink);
  --text-soft:var(--green-600);      /* cuerpo secundario sobre claro */
  --text-mute:var(--green-500);      /* notas, índices, pies de foto */
  --on-dark:var(--paper);            /* texto principal sobre verde */
  --on-dark-soft:rgb(255 255 255 / .80);
  --on-dark-mute:rgb(255 255 255 / .57);

  --line:var(--green-200);           /* divisores sobre claro */
  --line-strong:var(--green-300);
  --line-on-dark:rgb(255 255 255 / .33);
  --line-on-dark-soft:rgb(255 255 255 / .20);

  /* Scrims sobre fotografía (de más a menos denso) */
  --shade:14 27 23;                  /* tinta con un punto de verde para sombras sobre video/foto: rgb(var(--shade) / a). Joaquín rechazó el verde 900 ("muy verdoso") y el negro puro */
  --scrim-100:rgb(7 30 23 / .85);
  --scrim-70:rgb(7 30 23 / .70);
  --scrim-50:rgb(7 30 23 / .53);
  --scrim-30:rgb(7 30 23 / .33);
  --scrim-10:rgb(7 30 23 / .08);
  --glass:rgb(15 21 19 / .05);       /* menú, botón de vista y panel: el papel apenas un punto más oscuro (decisión Joaquín 2026-09-11) */
  --glass-blur:blur(8px) saturate(1.05);
  --glass-blur-panel:blur(24px) saturate(1.05); /* el panel abierto necesita más desenfoque para leerse sobre foto */
  --glass-edge:none;
  --glass-edge-on-dark:inset 0 0 0 1px rgb(255 255 255 / .1);
  --glass-dark:rgb(22 61 48 / .93);
  --bg-deck:var(--stone-0);           /* escenario del deck: negro teñido */
  --glass-on-black:rgb(255 255 255 / .08);
  --glass-panel-on-black:rgb(15 21 19 / .85); /* panel del menú en deck: debe leerse también sobre la tarjeta blanca */

  --focus:var(--accent-strong);

  /* ---------- 2. SEMÁNTICOS: tipografía ---------- */
  --font:Poppins,"Helvetica Neue",Arial,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  /* Escala fluida. Display para títulos editoriales, text para lectura. */
  /* Escala (decisión 2026-09-11): mínimo 12 px en pantalla, párrafo 18 px, títulos 20 · 24 · 32 · 40 · 60 · 80 (tope 80) */
  --display-xl:clamp(44px,6vw,72px);      /* mensaje sobre foto, cierre · tope 80 */
  --display-1:clamp(38px,4.6vw,68px);     /* h1 de escena · tope 80 */
  --display-2:clamp(32px,3.6vw,52px);     /* h2 de escena · tope 60 */
  --display-3:clamp(26px,2.6vw,36px);       /* h3 editorial, cifras grandes · tope 40 */
  --display-4:clamp(24px,2.4vw,32px);     /* subtítulos, texto editorial grande · tope 32 */
  --text-lead:clamp(18px,1.4vw,20px);     /* entradas */
  --text-xl:24px; --text-lg:20px; --text-md:18px; --text-base:16px;
  --text-sm:14px; --text-xs:12px; --text-2xs:12px; /* 2xs = 12: nada por debajo de 12 px */
  --text-kicker:14px; /* cejas/eyebrows (2026-09-17: +2px sobre --text-xs, a petición de Joaquín); separado de --text-xs para no mover notas ni pies de foto */
  --lh-tight:1.05; --lh-snug:1.15; --lh-normal:1.45; --lh-relaxed:1.6;
  --track-tight:-.035em; --track-snug:-.02em; --track-normal:0;
  --track-wide:.12em; --track-wider:.28em;   /* kickers y marca, siempre en mayúsculas */

  /* ---------- 2. SEMÁNTICOS: espacio y forma ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --gutter:5vw;                       /* margen lateral de escena */
  --grid-cols:12; --grid-gap:clamp(12px,1.5vw,24px); --grid-col:7.5vw; /* grid editorial de 12 columnas: columna 7.5vw + gap → ≈106vw por escena */
  --content-max:1600px;               /* ancho máximo del contenido */
  --measure:60ch;                     /* ancho de lectura de párrafo */
  --topbar-h:80px; --control-h:52px; /* alto de menú, botón de vista, PDF y CTA; se centran en la barra */ --control-top:calc((var(--topbar-h) - var(--control-h)) / 2);

  --radius-0:0; --radius-1:2px; --radius-2:8px; --radius-3:12px; --radius-4:24px; --radius-pill:999px;
  --shadow-1:0 2px 12px rgb(15 21 19 / .08);
  --shadow-2:0 12px 40px rgb(15 21 19 / .18);

  /* ---------- 2. SEMÁNTICOS: movimiento ---------- */
  --ease:cubic-bezier(.22,.68,0,1);
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1); /* microinteracciones (ref. flabbergast) */
  --ease-roll:cubic-bezier(.65,.05,0,1);
  --ease-shift:cubic-bezier(.2,1,.25,1);          /* flecha que se desplaza en el CTA (ref. details.so button-05) */
  --ease-out-quint:cubic-bezier(.22,1,.36,1);     /* stack del deck: entrada larga y asentada */
  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);  /* transición landing ↔ deck (ref. details.so) */           /* rodar texto en botones */
  --dur-fast:150ms; --dur-base:300ms; --dur-slow:600ms;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}
/* añadidos por el refactor */
:root{--line-mid:var(--green-500);--shadow-tint:rgb(15 21 19 / .08)}

/* ---- Escala tipográfica en pasos (2026-09-28, Joaquín): nada de tamaños fluidos con decimales o nones. Los títulos saltan por
   tramos de ancho y siempre caen en múltiplos de 4 (el texto, en 14/16/18/20). ---- */
:root{--display-xl:44px;--display-1:40px;--display-2:32px;--display-3:28px;--display-4:24px;--text-lead:18px;--stat-fs:24px}
@media(min-width:1024px){:root{--display-xl:60px;--display-1:48px;--display-2:36px;--display-3:28px;--display-4:24px;--text-lead:18px;--stat-fs:24px}}
@media(min-width:1280px){:root{--display-xl:72px;--display-1:60px;--display-2:44px;--display-3:32px;--display-4:32px;--text-lead:18px;--stat-fs:28px}}
@media(min-width:1536px){:root{--display-xl:72px;--display-1:68px;--display-2:52px;--display-3:36px;--display-4:32px;--text-lead:20px;--stat-fs:32px}}
@media(min-width:1728px){:root{--stat-fs:36px}}