/* 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 {
  --alto-barra: 4rem;

  --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);
}
/* El alto de la barra sale de acá y de ningún otro lado: el editor pega su
   propia cabecera JUSTO debajo, y si el número se copia a mano las dos se
   superponen la próxima vez que alguna cambie. */
.barra-in { display: flex; align-items: center; gap: .3rem; min-height: var(--alto-barra); }

/* La barra ocupa TODO el ancho, no la columna de contenido.

   El fondo ya iba de borde a borde, pero lo de adentro heredaba el `max-width`
   de `.env` —68rem— así que en una pantalla ancha la marca arrancaba flotando
   en el medio y el botón terminaba lejos del borde derecho. Se leía como una
   isla, no como una barra.

   Además era el único elemento fijo que hacía eso: `.editor-cabecera` ya va a
   todo el ancho con el truco de los 50vw, así que al editar convivían dos
   barras pegadas una arriba de la otra con anchos distintos.

   Se conserva `padding-inline: var(--canal)` de `.env`: a todo el ancho no
   quiere decir pegado al vidrio. */
.barra .barra-in { max-width: none; position: relative; }

/* ── El menú del teléfono ─────────────────────────────────────────────────
   Sin JavaScript, con una casilla y su etiqueta.

   No es capricho: la landing no carga un solo <script> —toda la animación es
   CSS— y por eso tampoco tiene banner de cookies ni un solo error de consola.
   Meterle JS para abrir un menú tira esa propiedad por un desplegable.

   Se usa la casilla y no <details> porque el navegador esconde el contenido de
   un <details> cerrado por su cuenta, y las versiones nuevas de Chrome lo hacen
   con `content-visibility` sobre un pseudoelemento, que el CSS de la página ya
   no puede revertir para mostrarlo en línea en pantalla ancha. Con la casilla
   el control es del CSS y de nadie más.

   Antes de esto, a menos de 40rem los enlaces simplemente se escondían
   (`.barra .solo-ancho { display: none }`) y no había NINGUNA forma de llegar
   a precios ni a la galería desde el teléfono. */
.menu-check {
  /* Visualmente oculta pero enfocable: es el control real, y esconderla con
     `display:none` la sacaría del tabulador. */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.menu-boton { display: none; }
.menu-enlaces { display: flex; align-items: center; gap: .3rem; }

@media (max-width: 40rem) {
  .menu-boton {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* 44px: el mínimo táctil de iOS. El resto de la barra ya lo respeta. */
    min-height: 44px;
    padding: .5rem .7rem;
    font-size: .9rem;
    color: var(--cuerpo);
    cursor: pointer;
    user-select: none;
    /* El «☰» y la palabra van juntos: sin esto el icono quedaba en un renglón
       y «Menú» en el de abajo, y la barra volvía a crecer de alto. */
    white-space: nowrap;
  }
  /* El foco tiene que verse: la casilla está oculta, así que el anillo lo
     dibuja la etiqueta. */
  .menu-check:focus-visible + .menu-boton {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
    border-radius: .3rem;
  }

  .menu-enlaces {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--canal);
    left: var(--canal);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .35rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  }
  .menu-check:checked ~ .menu-enlaces { display: flex; }
  .menu-enlaces > * { min-height: 44px; display: flex; align-items: center; }
}

.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); }

/* Cambio de idioma. El globo dice «esto es idioma»; la palabra —el idioma
   destino escrito en su propio idioma— dice hacia dónde vas. Nunca banderas:
   una bandera representa un país, y el público es de toda Latinoamérica. */
.enlace-idioma { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.globo { font-size: 1em; line-height: 1; filter: grayscale(1); opacity: .75; }
.enlace-idioma:hover .globo { filter: none; opacity: 1; }

/* ── 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; }
/* La firma de snaplabs. El lockup se dibuja chico (18px de alto) y con el
   ancho que le corresponde por su viewBox 330×100: nunca estirado. Es el
   único lugar del sitio con el índigo de otra marca, así que va apagado en
   reposo y a color completo al pasar por encima — firma, no reclamo. */
.pie-firma {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;   /* centrada en la página, no pegada al margen */
  gap: .6rem;
  margin: 1.75rem 0 0;
  font-size: .88rem;
  color: var(--apagado);
}
.pie-firma a { display: inline-flex; align-items: center; border-radius: 4px; }
.pie-firma img {
  height: 30px;              /* legible: a 18px la palabra no se leía */
  width: auto;
  display: block;
  opacity: .8;
  transition: opacity .15s;
}
.pie-firma a:hover img { opacity: 1; }
.pie-firma a:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }


/* Texto sólo para lectores de pantalla.

   Vive acá y no en sitio.css porque la landing no carga esa hoja. Las tres
   plantillas con <head> propio —base.html, landing.html y el formulario
   público— cargan base.css, así que es el único lugar donde una definición
   sola alcanza para todas. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}