/* Base de diseño compartida por la landing y por la app.
   Vive acá y no en landing.css para que las dos usen los MISMOS tokens: si el
   color o la tipografía se definieran dos veces, se separarían al primer
   cambio. landing.css y sitio.css cargan este archivo antes que el propio.

   Los tokens y su contraste están documentados abajo, junto a :root. */

/* ── Fuentes vendorizadas ───────────────────────────────────────────────────
   Archivo (variable 400-800) y Spline Sans Mono (variable 300-700), las dos
   SIL OFL 1.1 — redistribuibles en producto comercial. Subsets latin y
   latin-ext: U+0000-00FF cubre ñ á é í ó ú ü ¿ ¡, verificado leyendo el cmap
   de cada archivo. Ver static/fonts/LEEME.txt

   Spline Sans Mono reemplazó a IBM Plex Mono. Se eligió midiendo el avance
   por em en el propio archivo, porque las celdas de la planilla y los nombres
   de archivo están ajustados al ancho: Plex 0.600, Spline 0.600 (idéntico),
   Sometype 0.580, Reddit 0.5625, Martian 0.700 (+17%, habría desbordado).
   Al ser variable, un archivo cubre los pesos 400/500/600 que antes eran
   tres. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/archivo-400_800-latin.2f7ea45bad3a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/archivo-400_800-latin-ext.cde95d2797df.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Spline Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/spline-sans-mono-300_700-latin.4ebf124f4aa2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spline Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/spline-sans-mono-300_700-latin-ext.b7a3170e5df9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────
   Los neutros llevan un toque del verde de marca (croma 0.003-0.014 en OKLCH):
   un gris perfectamente neutro al lado de un verde saturado se lee apagado.
   Están escritos en hex, no en oklch(), porque el valor se convirtió una vez y
   así no depende del soporte del navegador.

     token     OKLCH                    hex      contraste sobre blanco/lienzo
     blanco    oklch(99.5% 0.003 165)   #FCFEFD  —
     lienzo    oklch(97.2% 0.007 165)   #F2F7F4  —
     raya      oklch(91.2% 0.008 165)   #DDE4E0  —
     tinta     oklch(21.5% 0.014 165)   #131C18  17.18 / 16.06
     cuerpo    oklch(44.5% 0.012 165)   #4E5652   7.47 /  6.98
     apagado   oklch(53.5% 0.013 165)   #67706B   5.05 /  4.72

   Todos calculados, no tanteados. --apagado es el que vive al filo: en 56.5%
   daba 4.20 sobre lienzo y NO pasaba AA; por eso está en 53.5%. Cualquier
   intento de aclararlo tiene que recalcularse. */

:root {
  --blanco:   #FCFEFD;
  --lienzo:   #F2F7F4;
  --tinta:    #131C18;
  --cuerpo:   #4E5652;
  --apagado:  #67706B;
  --raya:     #DDE4E0;
  --verde:    #0F7A52;
  --verde-tenue: #E8F3ED;

  /* Familias de documento. Cada par (fuerte, tinte) está calculado contra AA:
     el fuerte da ≥4.5 sobre su tinte Y sobre blanco, y blanco sobre el fuerte
     también pasa. No se eligió ninguno a ojo. */
  --cobro:        #0F7A52;  --cobro-tenue:        #E6F2EC;
  --operaciones:  #1D5FA8;  --operaciones-tenue:  #E7EFF9;
  --legales:      #7A3E9D;  --legales-tenue:      #F1E9F7;
  --comunicacion: #B0501A;  --comunicacion-tenue: #FBEDE3;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* La mono se usa SÓLO donde el contenido es dato: nombres de archivo, celdas
     de la planilla, la llamada a la API, las siglas de formato. Como rótulo
     decorativo es disfraz, no información. */
  --mono: "Spline Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sombras en capas: una corta para el contacto, una larga y muy suave para
     la elevación. Reemplazan a los bordes de 1px. */
  --sombra-baja:
    0 1px 2px rgba(19, 28, 24, .05),
    0 2px 8px rgba(19, 28, 24, .04);
  --sombra-media:
    0 1px 2px rgba(19, 28, 24, .06),
    0 6px 16px rgba(19, 28, 24, .06),
    0 14px 40px rgba(19, 28, 24, .05);
  --sombra-alta:
    0 2px 4px rgba(19, 28, 24, .06),
    0 12px 28px rgba(19, 28, 24, .08),
    0 32px 68px rgba(19, 28, 24, .07);

  --ancho: 68rem;
  --canal: clamp(1.25rem, 5vw, 2.5rem);
  --radio: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--verde-tenue); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

.env {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--canal);
}

section { padding-block: clamp(4rem, 9vw, 7rem); }
.tono { background: var(--lienzo); }

/* Sólo para lectores de pantalla: la cinta de formatos es decorativa. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.encabezado-centro { text-align: center; }
.encabezado-centro .titulo-seccion,
.encabezado-centro .bajada-seccion { margin-inline: auto; }

/* ── Tipografía ─────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; letter-spacing: -.025em; line-height: 1.1; }

/* El rótulo sobre un título de sección. En la landing quedó UNO solo: cuatro
   secciones seguidas con el mismo rótulo en versalitas es una muletilla, no una
   voz. Tampoco va en mono: como la palabra no es un dato, la mono ahí era
   disfraz. Ahora es la misma familia del resto, en verde y con más peso. */
.rotulo {
  margin: 0 0 .7rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--verde);
}

.titulo-seccion {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  font-weight: 700;
  max-width: 20ch;
  text-wrap: balance;
}

.bajada-seccion {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: 1.05rem;
  color: var(--cuerpo);
}

.encabezado { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(252, 254, 253, .8);
  backdrop-filter: saturate(180%) blur(12px);
}
.barra-in { display: flex; align-items: center; gap: .3rem; min-height: 4rem; }

.marca {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 650;
  font-size: 1.03rem;
  letter-spacing: -.02em;
  text-decoration: none;
}
/* El glifo de marca: dos hojas, la de atrás asomando. Es el producto en 18px. */
.glifo { position: relative; width: 1.05rem; height: 1.15rem; flex: none; }
.glifo::before, .glifo::after {
  content: "";
  position: absolute;
  width: .78rem;
  height: 1rem;
  border-radius: 2px;
}
.glifo::before { right: 0; top: 0; background: #C9C9C4; }
.glifo::after  { left: 0; bottom: 0; background: var(--tinta); }

.enlace {
  padding: .5rem .7rem;
  font-size: .9rem;
  color: var(--cuerpo);
  text-decoration: none;
  border-radius: 6px;
  transition: color .15s, background-color .15s;
}
.enlace:hover { color: var(--tinta); background: var(--lienzo); }

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.4rem;
  border: 0;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--blanco);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 550;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra-baja);
  transition: transform .14s cubic-bezier(.3,.7,.4,1),
              box-shadow .14s, background-color .14s;
}
.boton:hover { background: #2A2A30; transform: translateY(-1px); box-shadow: var(--sombra-media); }
.boton:active { transform: translateY(0); }
.boton-chico { padding: .55rem 1rem; font-size: .88rem; border-radius: 7px; }
.boton-liso {
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--raya), var(--sombra-baja);
}
.boton-liso:hover { background: var(--lienzo); }
/* Acciones destructivas: rojo verificado a 6.54 sobre blanco. */
.boton-peligro { background: #B3261E; }
.boton-peligro:hover { background: #8C1D18; }


/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie { border-top: 1px solid var(--raya); padding-block: 2.25rem 2.75rem; }
.pie-in { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pie-nav { margin-left: auto; display: flex; gap: .15rem; flex-wrap: wrap; }
.pie-legal { width: 100%; margin: .9rem 0 0; font-size: .84rem; color: var(--apagado); }