/* ==========================================================================
   flots · base.css
   Tokens de diseño (docs/ARQUITECTURA.md §4), reset, tipografía, utilidades,
   keyframes del diseño y la regla global de movimiento reducido.
   ========================================================================== */

/* ---------- Tokens (contrato §4, no cambiar nombres ni valores) ---------- */
:root{
  --bg:#F4F4F2; --surface:#FFFFFF; --surface-2:#FAFAF8; --paper-alt:#F3F3F0; --placeholder:#E4E3DF;
  --ink:#1D1D1B; --ink-2:#2B2B29; --ink-3:#5A5A56; --track-dark:#4A4A46; --text-body:#3E3E3A;
  --muted:#62625D; --faint:#8C8B86; --disabled:#B4B3AD;
  --line-input:#D9D8D3; --line:#E6E5E1; --line-soft:#EDEDEA; --line-list:#DCDBD6; --track:#E2E1DC;
  --dashed:#A3A29C; --hour-line:#F0F0ED;
  --accent:#2E45C9; --accent-deep:#1B2A8A; --accent-tint:color-mix(in srgb, var(--accent) 6%, white);
  --danger:#C8452C; --call-green:#34C759;
  --font:'Hanken Grotesk', Helvetica, sans-serif;
  --gutter:clamp(20px, 6.7vw, 96px);
  --fs-display-xl:clamp(52px, 7.78vw, 112px);   /* Agenda */
  --fs-display:clamp(48px, 7.2vw, 104px);      /* Pedido, Enviado, Cierre, Bienvenida, Ingreso */
  --fs-display-home:clamp(52px, 6.7vw, 96px);  /* Home */
  --fs-display-md:clamp(46px, 6.1vw, 88px);    /* Proyectos, Documentos */
  --fs-display-sm:clamp(44px, 5.6vw, 80px);    /* Panel, Avances, Estudio */
  --fs-display-xs:clamp(40px, 5vw, 72px);      /* Brief, Armar propuesta */
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ---------- Tokens extra (derivados del diseño; no forman parte del contrato) ---------- */
:root{
  --alto-banner:0px;                 /* alto de la franja "Modo demo" (se activa con html.modo-demo) */
  --alto-barra-inferior:76px;        /* barra inferior de pestañas en celular */
  --sombra-ventana:0 1px 0 rgba(29,29,27,.06), 0 18px 48px rgba(29,29,27,.08);
  --sombra-ventana-celu:0 12px 32px rgba(29,29,27,.07);
  --sombra-papel:0 1px 3px rgba(0,0,0,.25);
  --sombra-hoja:0 2px 10px rgba(0,0,0,.25);
  --sombra-pin:0 3px 10px rgba(0,0,0,.25);
  --sombra-perilla:0 4px 14px rgba(29,29,27,.18);
  --sombra-portada:0 20px 50px rgba(29,29,27,.18);
  --barra-fija-bg:rgba(244,244,242,.94);
  --pastilla-oscura:rgba(255,255,255,.14);
  --punto-rojo:#FF5F57; --punto-amarillo:#FEBC2E; --punto-verde:#28C840;
  /* Distancias de las animaciones (desktop; en celular se achican más abajo) */
  --in-desde:16px;
  --paper-desde:-70px;
  --rise-desde:40px;
  --shine-desde:-200px;
  --shine-hasta:360px;
}
html.modo-demo{ --alto-banner:32px; }

@media (max-width: 767px){
  :root{
    --paper-desde:-50px;
    --rise-desde:30px;
    --shine-desde:-160px;
    --shine-hasta:300px;
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  line-height:1.45;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd{ margin:0; }

h1, h2, h3, h4, h5, h6{ font-weight:500; line-height:1.15; }

ul[class], ol[class]{ margin:0; padding:0; list-style:none; }

img, video, canvas{ display:block; max-width:100%; }
svg{ flex-shrink:0; }

input, button, textarea, select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; }
fieldset{ margin:0; padding:0; border:0; min-width:0; }
legend{ padding:0; }

a{ color:var(--ink); }
a:hover{ color:var(--muted); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
[tabindex="-1"]:focus{ outline:none; }

::selection{ background:color-mix(in srgb, var(--accent) 22%, white); color:var(--ink); }

[hidden]{ display:none !important; }

#app{ min-height:100vh; }

/* ---------- Tipografía ---------- */
.display{
  margin:0;
  font-size:var(--fs-display);
  font-weight:300;
  line-height:.92;
  letter-spacing:-0.045em;
  white-space:pre-line;
  overflow-wrap:break-word;
}
.display-xl{   font-size:var(--fs-display-xl);   line-height:.9;  letter-spacing:-0.05em; }
.display-home{ font-size:var(--fs-display-home); line-height:.9;  letter-spacing:-0.05em; }
.display-md{   font-size:var(--fs-display-md);   line-height:.92; letter-spacing:-0.05em; }
.display-sm{   font-size:var(--fs-display-sm);   line-height:.95; letter-spacing:-0.045em; }
.display-xs{   font-size:var(--fs-display-xs);   line-height:.95; letter-spacing:-0.045em; }

.titulo-seccion{ margin:0; font-size:22px; font-weight:500; line-height:1.2; }
.titulo-tarjeta{ margin:0; font-size:20px; font-weight:500; line-height:1.25; }

.lead{ margin:0; font-size:18px; line-height:1.55; color:var(--muted); }
.texto-cuerpo{ font-size:17px; line-height:1.55; color:var(--text-body); }
.texto-muted{ color:var(--muted); }
.texto-chico{ font-size:14px; }
.texto-meta{ font-size:13px; color:var(--muted); }
.texto-acento{ color:var(--accent); }
.texto-peligro{ color:var(--danger); }

.link{
  color:var(--ink);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
}
.link:hover{ color:var(--muted); }

/* Etiqueta vertical (servicio en Proyectos) */
.etiqueta-vertical{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- Utilidades ---------- */
.contenedor{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (min-width: 768px){
  .solo-celu{ display:none !important; }
}
@media (max-width: 767px){
  .solo-escritorio{ display:none !important; }
}

/* ---------- Keyframes del diseño ---------- */
@keyframes flotsShine{
  from{ background-position:var(--shine-desde) 0; }
  to{ background-position:var(--shine-hasta) 0; }
}
@keyframes flotsRing{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
@keyframes flotsPulse{
  0%{ box-shadow:0 0 0 0 rgba(29,29,27,.18); }
  100%{ box-shadow:0 0 0 28px rgba(29,29,27,0); }
}
@keyframes flotsPaper{
  from{ opacity:0; transform:translateY(var(--paper-desde)) rotate(-6deg); }
  to{ opacity:1; }
}
@keyframes flotsRise{
  from{ opacity:0; transform:translateY(var(--rise-desde)); }
  to{ opacity:1; }
}
@keyframes flotsIn{
  from{ opacity:0; transform:translateY(var(--in-desde)); }
  to{ opacity:1; transform:none; }
}
@keyframes flotsFade{
  from{ opacity:0; }
  to{ opacity:1; }
}
/* extra: indicador de carga */
@keyframes flotsGiro{
  to{ transform:rotate(360deg); }
}

/* ---------- Movimiento reducido (global, cubre todo el sitio) ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Impresión ---------- */
@media print{
  body{ background:#fff; }
  .banner-demo, .toasts, .barra-inferior, .barra-fija{ display:none !important; }
}