/* Salva Tejero Software Company — hoja única.
   Sin build ni dependencias: lo que se lee aquí es lo que sirve el navegador.

   La página se comporta como la web de una empresa de software seria, porque
   es exactamente lo que la empresa cree que es. El único recurso propio son
   las NOTAS AL PIE con asterisco: cada afirmación grande arrastra una línea
   pequeña que la matiza. Ese contraste es todo el diseño; el resto va callado
   a propósito. */

:root {
  --papel:    #FFFFFF;
  --papel2:   #F4F6F9;
  --tinta:    #0E1726;
  --texto:    #4A5567;
  --tenue:    #7E8899;
  --linea:    #E2E7ED;
  --azul:     #1B4DE4;
  --azul-osc: #123AAE;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cuerpo:  "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho: 68rem;
  --aire:  clamp(3.5rem, 8vw, 6.5rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 400 1.0625rem/1.65 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--tinta); }
a { color: inherit; }

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

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
  left: 1rem; top: 1rem; z-index: 3;
  background: var(--tinta); color: #fff;
  padding: .5rem .75rem; border-radius: 3px;
}

/* --- Tipografías, autoalojadas ----------------------------------------
   Los woff2 salen de Google Fonts pero se sirven desde aquí: así la CSP puede
   quedarse en `font-src 'self'` y nadie que entre en la web hace una petición
   a Google. Son fuentes VARIABLES, de ahí que cada cara declare un RANGO de
   pesos y que haya un solo fichero por familia y subconjunto.
   Para actualizarlas, volver a pedir el css2 de Google y sustituir. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fuentes/archivo-latin.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: "Archivo";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fuentes/archivo-latin-ext.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: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fuentes/inter-latin.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: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fuentes/inter-latin-ext.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fuentes/jetbrains-mono-latin.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fuentes/jetbrains-mono-latin-ext.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;
}

/* --- Logo ------------------------------------------------------------- */
/* Un recuadro, una regla y el nombre en tres líneas. Se hizo en una tarde. */

.logo {
  display: block;
  width: 5.75rem;
  height: auto;
  color: var(--tinta);
}
.logo__nombre {
  font: 700 20px/1 var(--display);
  letter-spacing: .04em;
  fill: currentColor;
}
.logo__linea {
  font: 400 15px/1 var(--mono);
  letter-spacing: .22em;
  fill: currentColor;
}
.logo--pie { width: 6.5rem; }

/* --- Barra ------------------------------------------------------------ */

.barra {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .75rem 2rem;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-size: .9375rem;
}
.barra nav a {
  color: var(--texto);
  text-decoration: none;
}
.barra nav a:hover { color: var(--tinta); }

@media (max-width: 52rem) {
  .barra nav { display: none; }
  .barra { justify-content: space-between; }
  .barra .boton--pequeno { margin-left: auto; }
}

/* --- Piezas de texto -------------------------------------------------- */

.etiqueta {
  margin: 0 0 1.25rem;
  font: 700 .75rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul);
}
.etiqueta--clara { color: #A9BEFF; }

h1 {
  margin: 0 0 1.5rem;
  font: 700 clamp(2.25rem, 5.4vw, 3.9rem)/1.06 var(--display);
  letter-spacing: -.028em;
  text-wrap: balance;
}

h2 {
  margin: 0 0 1.25rem;
  font: 700 clamp(1.65rem, 3.2vw, 2.4rem)/1.15 var(--display);
  letter-spacing: -.022em;
  text-wrap: balance;
}

h3 {
  margin: 0 0 .625rem;
  font: 600 1.1875rem/1.3 var(--display);
  letter-spacing: -.01em;
}

.entrada {
  max-width: 40rem;
  margin: 0 0 2rem;
  font-size: 1.1875rem;
  text-wrap: pretty;
}

/* La nota al pie: donde la empresa se delata. Va pequeña y en mono, como la
   letra de un contrato, porque el chiste es que nadie la lee. */
.nota {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  font: 400 .8125rem/1.55 var(--mono);
  color: var(--tenue);
}
.nota--clara { color: #8FA2C8; }

.ast {
  color: var(--azul);
  text-decoration: none;
  font-weight: 500;
  padding: 0 .1em;
}
.ast:hover { text-decoration: underline; }

/* El ancho se limita con el PADDING de la sección, no con un max-width en los
   hijos: así el fondo alterno sigue llegando de borde a borde y ningún hijo
   necesita `margin-inline: auto` que luego pisen sus propios márgenes. */
.hero, .seccion {
  padding: var(--aire) max(2rem, calc((100% - var(--ancho)) / 2));
}
.seccion--alterna {
  background: var(--papel2);
  border-block: 1px solid var(--linea);
}

/* --- Botones ---------------------------------------------------------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}

.boton {
  display: inline-block;
  padding: .8rem 1.5rem;
  background: var(--azul);
  color: #fff;
  border-radius: 4px;
  font: 500 .9375rem/1 var(--cuerpo);
  text-decoration: none;
  transition: background .15s ease;
}
.boton:hover { background: var(--azul-osc); }
.boton--pequeno { padding: .55rem 1rem; font-size: .875rem; }
/* El correo son 34 caracteres y va dentro del botón: en pantallas estrechas
   tiene que poder partirse en vez de desbordar la sección. */
.boton { overflow-wrap: anywhere; }

.enlace {
  font-size: .9375rem;
  color: var(--tinta);
  text-decoration-color: var(--linea);
  text-underline-offset: 4px;
}
.enlace:hover { text-decoration-color: currentColor; }

/* --- Hero y cifras ---------------------------------------------------- */

.hero { padding-top: clamp(3rem, 7vw, 5.5rem); }

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.75rem;
  margin: 3.25rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
.cifras div { margin: 0; }
.cifras dt {
  font: 400 .75rem/1.35 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cifras dd {
  margin: .4rem 0 0;
  font: 700 1.75rem/1 var(--display);
  letter-spacing: -.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.cifras dd .ast { font-size: 1rem; vertical-align: super; }

/* --- Equipo ----------------------------------------------------------- */

.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2rem 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.persona {
  margin: 0;
  font: 600 1.0625rem/1.3 var(--display);
  color: var(--tinta);
}
.rol {
  margin: .15rem 0 .75rem;
  font: 400 .75rem/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.equipo blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--azul);
  font-size: .9375rem;
}

/* --- Fichas de aplicación -------------------------------------------------------- */

.apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.app {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 6px;
}
.app__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.app__cab h3 { margin: 0; }

.app__estado {
  margin: 0;
  font: 400 .75rem/1 var(--mono);
  color: var(--tenue);
}

/* El punto de estado: verde si está en la calle, ámbar si todavía no. */
.punto {
  display: inline-block;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: #2F7D4F;
  vertical-align: middle;
  translate: 0 -1px;
}
.punto--wait { background: #C98A12; }

.app__texto { margin: 0 0 1.5rem; font-size: .9375rem; }

.app__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.pendiente {
  font: 400 .75rem/1 var(--mono);
  color: var(--tenue);
}

.pila {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.pila li {
  padding: .2rem .5rem;
  border: 1px solid var(--linea);
  border-radius: 3px;
  font: 400 .75rem/1.4 var(--mono);
  color: var(--tenue);
}

/* Las cifras de la ficha van pegadas al texto, no al fondo de la tarjeta:
   son dos y no merecen una franja propia. */
.cifras--app {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0;
  padding-top: 1.25rem;
}
.cifras--app dd { font-size: 1.125rem; }

.app .pila { margin: 1.25rem 0 0; }

/* --- Producto interno (el 87 %) --------------------------------------- */

.interno {
  margin-top: 1.25rem;
  padding: 2rem;
  background: var(--tinta);
  border-radius: 6px;
  color: #C7D0DE;
}
.interno h3 { color: #fff; }
.interno p { margin: 0; font-size: .9375rem; max-width: 34rem; }

.interno__fila {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 44rem) {
  .interno__fila { grid-template-columns: 1fr 14rem; }
}

.interno .progreso__cifra {
  margin: 0 0 .5rem;
  font: 700 3rem/1 var(--display);
  letter-spacing: -.03em;
  color: #fff;
}
.interno .progreso__cifra span { font-size: 1.5rem; color: #8FA2C8; }

.barra-progreso {
  height: 5px;
  background: #263349;
  border-radius: 3px;
  overflow: hidden;
}
/* El 87 % va aquí y no en un atributo `style`: sin estilos en línea, la CSP
   del site puede prescindir de 'unsafe-inline'. */
.barra-progreso span {
  display: block;
  width: 87%;
  height: 100%;
  background: #4F7BFF;
}

/* --- Cierre y pie ----------------------------------------------------- */

.pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2.5rem 2rem 3.5rem;
  font: 400 .8125rem/1.6 var(--mono);
  color: var(--tenue);
}
.pie p { margin: 0; }
.pie .logo { color: var(--tenue); }

/* --- Página legal ------------------------------------------------------
   Solo la usa /privacidad. Va aparte porque es lo contrario del resto del
   sitio: en vez de tres frases con mucho aire, un texto largo que hay que
   poder leer entero. Se limita la MEDIDA de línea (65 caracteres), no el ancho
   de la sección, para no romper el padding que fija el ancho en todas partes. */

.legal p, .legal li { max-width: 65ch; }
.legal h2 {
  margin-top: 3rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.legal h3 {
  margin-top: 2rem;
  color: var(--texto);
}
.legal strong { color: var(--tinta); font-weight: 600; }

.actualizado {
  margin: -1rem 0 2.5rem;
  font: 400 .8125rem/1.55 var(--mono);
  color: var(--tenue);
}

/* El índice: una tarjeta, para que se distinga del cuerpo sin adornos. */
.indice {
  margin: 0 0 1rem;
  padding: 1.5rem 1.75rem;
  background: var(--papel2);
  border: 1px solid var(--linea);
  border-radius: 4px;
}
.indice h2 {
  margin: 0 0 .75rem;
  font: 700 .75rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul);
}
.indice ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  font-size: .9375rem;
}
.indice a { color: var(--azul); text-decoration: none; }
.indice a:hover { text-decoration: underline; }

.lista { padding-left: 1.25rem; }
.lista li { margin-bottom: .5rem; }

/* Lo que no puede pasar desapercibido, con la regla azul del logo al lado. */
.importante {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--azul);
}

/* La tabla de cookies se sale en el móvil por mucho que se apriete: en vez de
   partir las palabras, se deja rodar dentro de su propio contenedor. */
.tabla {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: .9375rem;
}
.tabla caption {
  margin-bottom: .75rem;
  font: 700 .75rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul);
  text-align: left;
}
.tabla th, .tabla td {
  padding: .75rem 1rem .75rem 0;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.tabla th {
  color: var(--tinta);
  font: 600 .8125rem/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tabla code {
  font: 400 .875rem var(--mono);
  color: var(--tinta);
}

.pie__texto a { color: inherit; }
.pie__texto a:hover { color: var(--tinta); }

/* --- Banda de cookies -------------------------------------------------
   La pinta consentimiento.js y solo la ve quien no ha respondido todavía. Es
   lo único de la página que se superpone al contenido, así que va sobria: la
   misma caja blanca del sitio, una línea arriba y nada más.

   Los dos botones pesan lo mismo a propósito. La AEPD pide que rechazar cueste
   lo mismo que aceptar, y un «rechazar» en gris pequeño detrás de un enlace no
   lo cumple; aquí solo cambia el relleno, no el tamaño ni el sitio. */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem max(2rem, calc((100% - var(--ancho)) / 2));
  background: var(--papel);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 24px rgb(14 23 38 / .07);
}
.cookies p {
  margin: 0;
  max-width: 52ch;
  font-size: .9375rem;
}
.cookies a { color: var(--azul); }
.cookies__acciones {
  display: flex;
  gap: .75rem;
}
/* `font: inherit` porque un <button> no hereda la tipografía del documento y
   saldría con la del sistema junto a botones que sí llevan la del sitio. */
.cookies .boton {
  font: 500 .9375rem/1 var(--cuerpo);
  border: 1px solid var(--azul);
  cursor: pointer;
}
.boton--secundario {
  background: transparent;
  color: var(--azul);
}
.boton--secundario:hover {
  background: var(--papel2);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* El 404 no tiene navegación: su botón se empuja solo al otro extremo. */
.barra .boton--solo { margin-left: auto; }