/* Web pública de ConcurrIA.
 *
 * Los mismos tokens que la aplicación (`frontend/src/estilos.css`) y la misma tipografía:
 * quien llega desde aquí y entra en la aplicación tiene que reconocer que es el mismo
 * producto.
 *
 * Se duplican a propósito en vez de compartir un fichero. Son dos cosas que se despliegan
 * por separado y evolucionan a ritmos distintos; acoplarlas para ahorrar treinta líneas
 * haría que un retoque en la web pudiera romper la aplicación.
 *
 * Sin build: HTML, CSS y dos ficheros de tipografía. Sin peticiones a terceros — y aquí
 * importa más que en la aplicación, porque esta página la visita gente que no nos conoce.
 */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/source-serif-4-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/source-serif-4-italic.woff2") format("woff2");
}

:root {
  --papel: #f3f2f2;
  --superficie: #eae9e9;
  --tinta: #201f1d;
  --tinta-media: #444141;
  --tinta-tenue: #605d5d;
  --filete: rgba(32, 31, 29, 0.16);
  --cian: #0088b0;
  --cian-profundo: #006786;
  --cian-hondo: #004961;
  --cian-tenue: #e9f8ff;
  --magenta: #d6006c;
  --magenta-profundo: #aa0b56;

  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Source Serif 4", ui-serif, Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Una sola medida para todo el ancho: la página se lee en columna y no hay nada que
   justifique dos rejillas distintas. */
.franja,
main > section,
footer > div {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.cifra {
  font-variant-numeric: tabular-nums;
}

/* La cursiva es voz aparte: lo que el producto dice de sí mismo frente a lo que afirma
   del mundo. */
.aparte {
  font-style: italic;
  color: var(--tinta-tenue);
}

.rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* ---------------------------------------------------------------- cabecera */

.franja {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marca .ia {
  color: var(--cian-profundo);
}

.boton {
  margin-left: auto;
  border: 1px solid var(--cian);
  border-radius: 0.25rem;
  padding: 0.4375rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--cian-profundo);
  text-decoration: none;
}

.boton:hover {
  border-color: var(--cian-profundo);
  color: var(--cian-hondo);
}

/* ---------------------------------------------------------------- portada */

.portada {
  padding-block: 4rem 3rem;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.75rem, 7vw, 5.375rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.entradilla {
  margin: 0;
  max-width: 36rem;
  font-size: clamp(1.125rem, 2.2vw, 1.4375rem);
  color: var(--tinta-media);
}

/* Franja de datos entre filete grueso y fino: es el gesto que dice «esto es un registro»,
   y las cifras son las de verdad. */
.datos {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  border-top: 3px solid var(--tinta);
  border-bottom: 1px solid var(--filete);
  padding-block: 1.25rem;
  margin-block: 1rem 3rem;
}

.datos div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.datos strong {
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ------------------------------------------------------------ tres líneas */

.lineas {
  display: grid;
  gap: 2.5rem;
  padding-block: 1rem 3.5rem;
}

.lineas article {
  border-top: 1px solid var(--filete);
  padding-top: 1rem;
}

/* El número dice que son tres partes de una misma frase —las encuentra, las lee, te
   acompaña—, no tres productos sueltos. */
.lineas .numero {
  display: block;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--cian-profundo);
}

h2 {
  margin: 0 0 0.625rem;
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lineas h2 {
  font-size: 1.3125rem;
}

.lineas p,
.honestidad p,
.contacto p {
  margin: 0;
  color: var(--tinta-media);
}

/* ------------------------------------------------------- honestidad y contacto */

/* El único filete magenta de la página. Va aquí porque decir lo que el producto no es,
   antes de vender, es más barato que explicarlo después de un malentendido. */
.honestidad {
  border-top: 3px solid var(--magenta);
  padding-block: 2rem;
}

.contacto {
  border-top: 1px solid var(--filete);
  padding-block: 2.5rem 4rem;
}

.contacto p + p {
  margin-top: 1.5rem;
}

.correo a {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--cian-profundo);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.correo a:hover {
  color: var(--cian-hondo);
}

/* ---------------------------------------------------------------- pie */

footer {
  border-top: 1px solid var(--filete);
  padding-block: 1.5rem 2.5rem;
}

footer p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tinta-tenue);
}

:where(a):focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 56rem) {
  .lineas {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .portada {
    padding-block: 6rem 3rem;
  }
}