/* =====================================================
   Daia · La carta de presentación

   QUÉ ES ESTA HOJA
   El estilo de arcilla (claymorphism) de la familia Daia, sobre una página
   BLANCA Y GRIS. El color no lo pone la página: lo ponen las seis familias,
   cada una en su ficha. Es lo que convierte veinte herramientas sueltas en una
   sola empresa que se reconoce.

   POR QUÉ LA PÁGINA ES GRIS Y LAS FICHAS BLANCAS
   Al revés no funciona. Sobre página blanca, una tarjeta blanca solo se
   distingue por su sombra, y la sombra de arcilla es suave a propósito: las
   fichas se desdibujan. El gris del fondo es lo que le da canto a lo blanco.

   LA REGLA DE LA ARCILLA, EN TRES CAPAS
   Cada pieza lleva tres sombras y no una:
     1. Una de CONTACTO, de 1-2 px. Es la que dibuja el canto.
     2. Una ANCHA y desplazada, que la despega del papel.
     3. Una INTERNA oscura abajo, que le da grosor a la pieza.
   Ninguna lleva luz interna blanca: sobre superficie clara no aporta volumen y
   deja un velo lechoso encima del texto.

   Y LAS SOMBRAS AHORA SON GRISES, NO VIOLETAS
   Las de antes iban teñidas del violeta de marca. Con seis familias, teñir la
   sombra de un color sería ponerle a las seis fichas el color de una.

   EL COLOR DE FAMILIA VIENE DEL HTML, NO DE AQUÍ
   Cada ficha trae `--f`, `--f-tinta`, `--f-suave` y `--f-velo` inyectadas desde
   `datos/proyectos.json`. Así hay UNA regla para las seis familias, y una
   familia nueva no obliga a escribir CSS. Los seis colores aparecen escritos
   una sola vez en esta hoja: en el subrayado del titular.

   PALETA: para cambiarla, edita solo las variables de :root
   ===================================================== */

:root {
  /* — Superficies. La página es gris; lo que flota es blanco — */
  --papel:       #F4F5F7;
  --papel-hondo: #ECEEF2;
  --papel-alto:  #FFFFFF;
  --papel-tinta: #F1F2F5;   /* lo que va hundido: pastillas, huecos */

  /* — Tinta — */
  --tinta:       #16181D;
  --tinta-media: #5A6070;
  --tinta-suave: #8A90A0;
  --borde:       #E6E8EC;

  /* — Tipografía — */
  --letra-titulo: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-texto:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Medidas — */
  --radio:       26px;
  --radio-gordo: 34px;
  --radio-chico: 16px;
  --ancho:       72rem;
  --ancho-texto: 46rem;

  /* — Las tres capas de la arcilla, ya en gris — */
  --sombra:      0 1px 2px rgba(22, 24, 29, 0.06),
                 0 14px 30px -16px rgba(22, 24, 29, 0.22),
                 inset 0 -8px 16px rgba(22, 24, 29, 0.035);
  --sombra-alta: 0 2px 4px rgba(22, 24, 29, 0.08),
                 0 26px 52px -20px rgba(22, 24, 29, 0.30),
                 inset 0 -10px 20px rgba(22, 24, 29, 0.05);
  --sombra-hundida: 0 1px 2px rgba(22, 24, 29, 0.07),
                 inset 0 5px 12px rgba(22, 24, 29, 0.12),
                 inset 0 -2px 6px rgba(22, 24, 29, 0.05);

  /* Una sola curva de movimiento en todo el sitio. */
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #0E0F13;
    --papel-hondo: #08090C;
    --papel-alto:  #16181D;
    --papel-tinta: #1D2027;
    --tinta:       #F2F3F6;
    --tinta-media: #A3A9B8;
    --tinta-suave: #767C8C;
    --borde:       #24262E;
    --sombra:      0 1px 2px rgba(0, 0, 0, 0.5),
                   0 14px 30px -16px rgba(0, 0, 0, 0.7),
                   inset 0 -8px 16px rgba(0, 0, 0, 0.3),
                   inset 0 8px 16px rgba(255, 255, 255, 0.035);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.55),
                   0 26px 52px -20px rgba(0, 0, 0, 0.75),
                   inset 0 -10px 20px rgba(0, 0, 0, 0.35),
                   inset 0 10px 20px rgba(255, 255, 255, 0.045);
    --sombra-hundida: 0 1px 2px rgba(0, 0, 0, 0.5),
                   inset 0 5px 12px rgba(0, 0, 0, 0.45),
                   inset 0 -2px 6px rgba(255, 255, 255, 0.05);
  }
}

/* ---------- Tipografías, servidas desde el propio sitio ----------
   No van desde Google Fonts: una petición menos a un tercero que ve la IP de
   cada visitante, y una conexión menos antes de poder pintar la primera letra.
   Son las mismas dos en las veinte herramientas: Outfit titula, Inter lee. */
@font-face {
  font-family: "Outfit";
  src: url("/tipografias/outfit.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/tipografias/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--letra-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--letra-titulo);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.025em; }
p  { margin: 0 0 1rem; }

a { color: var(--tinta); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

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

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.15rem; }

/* Salta al contenido: lo primero del documento, invisible hasta que se enfoca. */
.saltar {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel-alto);
  padding: 0.8rem 1.2rem; border-radius: var(--radio-chico); z-index: 100;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__caja { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.marca {
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
  color: var(--tinta); font-weight: 800; font-family: var(--letra-titulo);
  font-size: 1.32rem; letter-spacing: -0.04em;
}
/* El mono va dentro de un cuadrado claro y no suelto: es tinta oscura sobre
   transparente, y en modo oscuro suelto desaparece — quedan flotando los ojos
   y la sonrisa. Dentro del cuadrado se lee igual en los dos modos. */
.marca__mono {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: #F2F3F5;
  box-shadow: inset 0 -3px 8px rgba(22, 24, 29, 0.07);
  overflow: hidden;
}
.marca__mono img { width: 30px; height: auto; margin-top: 3px; }

.cabecera__enlaces { margin-left: auto; display: flex; gap: 0.2rem; }
.cabecera__enlaces a {
  padding: 0.5rem 0.9rem; border-radius: 999px; text-decoration: none;
  color: var(--tinta-media); font-weight: 600; font-size: 0.92rem;
  transition: background 0.16s var(--curva), color 0.16s var(--curva);
}
.cabecera__enlaces a:hover { background: var(--papel-tinta); color: var(--tinta); }
@media (max-width: 46rem) { .cabecera__enlaces { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.6rem, 8vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); text-align: center; }
.hero__marquita {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1rem; border-radius: 999px; margin-bottom: 1.6rem;
  background: var(--papel-alto); box-shadow: var(--sombra);
  font-size: 0.83rem; font-weight: 700; color: var(--tinta-media);
  letter-spacing: 0.02em;
}
.hero__marquita span { width: 7px; height: 7px; border-radius: 999px; background: #35A96B; }
.hero h1 { max-width: 19ch; margin-inline: auto; }

/* El único sitio de la página donde los seis colores salen juntos: un subrayado
   de seis tramos bajo la frase que remata el titular. Es la firma de la casa —
   seis familias, una sola empresa — y por eso no se repite en ningún otro sitio.
   `box-decoration-break: clone` es lo que hace que, si la frase parte en dos
   líneas, el subrayado se dibuje entero en cada una y no medio en cada una. */
.hero h1 em {
  font-style: normal;
  padding-bottom: 0.06em;
  background-image: linear-gradient(90deg,
    #6C5CE7 0 16.67%, #E5484D 0 33.34%, #35A96B 0 50%,
    #4A78D1 0 66.67%, #E89435 0 83.34%, #36A6A6 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.14em;
  background-position: 0 92%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__resumen {
  max-width: 48ch; margin: 1.2rem auto 0;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: var(--tinta-media);
}

/* El mono de la empresa. Flota, así que la sombra va con drop-shadow: sigue el
   contorno del dibujo. Un box-shadow le dibujaría un rectángulo alrededor del
   aire transparente. */
.hero__mono { display: flex; justify-content: center; margin: 2.6rem 0 0; }
.hero__mono img {
  width: clamp(170px, 34vw, 260px); height: auto;
  filter: drop-shadow(0 20px 26px rgba(22, 24, 29, 0.18));
  animation: flotar 6s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero__cifras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem;
  max-width: 40rem; margin: 2.4rem auto 0;
}
.cifra {
  background: var(--papel-alto); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.15rem 0.8rem;
}
.cifra__numero {
  display: block; font-family: var(--letra-titulo); font-size: 1.85rem;
  font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--tinta);
}
.cifra__etiqueta {
  display: block; margin-top: 0.4rem; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave);
}

/* ---------- Secciones ---------- */
.seccion { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.seccion__cabeza { max-width: var(--ancho-texto); margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.seccion__cabeza p { color: var(--tinta-media); font-size: 1.05rem; margin: 0; }
.antetitulo {
  display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.7rem;
}

/* ---------- Los atajos a cada familia ----------
   `--f-texto` es el color de la familia PARA TEXTO, y cambia con el modo. Los dos
   tonos vienen del JSON: el de fondo claro esta oscurecido para pasar 4.5:1 sobre
   blanco, y sobre la ficha oscura ese mismo tono se queda en 3.7:1 — se ve, pero
   se lee mal. El de modo oscuro es el aclarado. Por eso el color NO puede ir
   escrito en el atributo style del elemento: ahi ninguna media query lo alcanza. */
.atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: -0.6rem 0 2.2rem; }
.atajo {
  --f-texto: var(--f-tinta);
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.85rem; border-radius: 999px; text-decoration: none;
  background: var(--papel-alto); box-shadow: var(--sombra);
  font-size: 0.84rem; font-weight: 700; color: var(--tinta-media);
  transition: transform 0.16s var(--curva), color 0.16s var(--curva);
}
.atajo__punto { width: 9px; height: 9px; border-radius: 999px; background: var(--f); }
.atajo:hover { transform: translateY(-2px); color: var(--f-texto); }

/* ---------- Las fichas de familia ----------
   Cada ficha lleva su color en dos piezas y nada más: la mancha donde vive el
   monito, y el nombre de la familia.

   VAN EN COLUMNAS DE TEXTO Y NO EN REJILLA, Y ESO SE PROBÓ
   Las seis familias tienen 4, 1, 4, 4, 5 y 2 herramientas. En una rejilla, las
   fichas de una misma fila se estiran a la altura de la más alta: la de Fitness,
   que tiene una sola herramienta, quedaba con media ficha de blanco debajo — se
   vio en la captura. Con columnas, cada ficha mide lo que mide y el navegador
   reparte para que las dos columnas queden parejas.
   `break-inside: avoid` es lo que impide que una ficha se parta por la mitad
   entre el pie de una columna y la cabeza de la otra. */
.familias {
  columns: 2 30rem;
  column-gap: 1.15rem;
  list-style: none; margin: 0; padding: 0;
}

.familia {
  --f-texto: var(--f-tinta);
  break-inside: avoid; margin-bottom: 1.15rem;
  background: var(--papel-alto); border-radius: var(--radio-gordo);
  box-shadow: var(--sombra); padding: 1.6rem 1.5rem 1.4rem;
  transition: transform 0.2s var(--curva), box-shadow 0.2s var(--curva);
  scroll-margin-top: 90px;
}
.familia:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

.familia__cabeza { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 30rem) {
  .familia__cabeza { grid-template-columns: 1fr; }
}

/* La mancha del monito: el hueco de color de la familia. El monito se sale por
   arriba a propósito — es lo que le da vida a una rejilla de seis fichas
   iguales. `overflow: visible` con el dibujo desbordando pediría recortes; en
   vez de eso la mancha es más baja que la imagen y el monito la pisa. */
.familia__mancha {
  position: relative;
  width: 142px; height: 112px; border-radius: 24px;
  background: var(--f-suave);
  box-shadow: inset 0 -5px 12px rgba(22, 24, 29, 0.05);
  display: flex; align-items: flex-end; justify-content: center;
}
.familia__mancha img {
  width: 138px; height: auto; margin-bottom: -2px;
  filter: drop-shadow(0 8px 10px rgba(22, 24, 29, 0.14));
}

.familia__titulos { min-width: 0; }
.familia__promesa {
  display: block; font-family: var(--letra-titulo); font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.01em; color: var(--f-texto);
  margin-bottom: 0.25rem;
}
.familia__nombre { margin: 0 0 0.4rem; font-size: 1.32rem; }
.familia__texto { color: var(--tinta-media); font-size: 0.93rem; margin: 0; }

@media (prefers-color-scheme: dark) {
  .atajo, .familia { --f-texto: var(--f-claro); }
}

/* ---------- Las herramientas dentro de la ficha ---------- */
.herramientas {
  list-style: none; margin: 1.3rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.herramienta {
  background: var(--papel); border-radius: var(--radio-chico);
  padding: 0.85rem 1rem 0.8rem;
}
.herramienta__nombre {
  margin: 0; font-family: var(--letra-titulo); font-weight: 700;
  font-size: 1rem; letter-spacing: -0.02em; color: var(--tinta);
}
.herramienta__texto { margin: 0.15rem 0 0; color: var(--tinta-media); font-size: 0.88rem; line-height: 1.5; }
.herramienta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.herramienta__abrir {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 700; font-size: 0.86rem; text-decoration: none;
  color: var(--f-texto);
}
.herramienta__abrir:hover { text-decoration: underline; }

/* "Pronto" — el estado de lo que está hecho pero todavía no tiene dominio.
   Es una pastilla y no un botón desactivado a propósito: un botón gris que no
   hace nada se toca igual y frustra; esto se lee como información.
   Va en gris y NO en el color de la familia: veinte pastillas de colores serían
   el color más repetido de la página, y el color es de la familia, no del
   estado. */
.pronto {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 700; color: var(--tinta-media);
  background: var(--papel-tinta); padding: 0.32rem 0.7rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--borde);
}
.herramienta__estado { font-size: 0.78rem; color: var(--tinta-suave); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--letra-texto); font-weight: 700; font-size: 0.98rem;
  padding: 0.8rem 1.6rem; min-height: 52px;
  border: none; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: var(--tinta); color: var(--papel-alto);
  box-shadow: 0 10px 26px -10px rgba(22, 24, 29, 0.55);
  transition: transform 0.16s var(--curva), box-shadow 0.16s var(--curva);
}
.boton:hover { color: var(--papel-alto); transform: translateY(-2px); }
.boton:active { transform: translateY(2px) scale(0.98); box-shadow: var(--sombra-hundida); }

/* El de Daia ID en la portada. Es el único botón de la página, así que puede
   permitirse ser grande sin competir con nada. */
.boton--grande {
  font-size: 1.05rem; padding: 1rem 2rem; min-height: 60px;
  margin: 2.2rem auto 0; display: flex; width: fit-content;
}
@media (prefers-color-scheme: dark) {
  .boton { background: var(--papel-alto); color: var(--tinta); }
  .boton:hover { color: var(--tinta); }
}

/* ---------- Principios ---------- */
.principios { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.principio {
  background: var(--papel-alto); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.6rem 1.5rem;
}
.principio__numero {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px;
  font-family: var(--letra-titulo); font-weight: 800; font-size: 1.05rem;
  color: var(--papel-alto); background: var(--tinta); margin-bottom: 1rem;
}
.principio h3 { margin-bottom: 0.4rem; }
.principio p { color: var(--tinta-media); font-size: 0.94rem; margin: 0; }

/* ---------- Bloque de cierre ----------
   Va en tinta oscura y no en un color: es la única pieza a sangre de la página,
   y pintarla del color de una familia sería coronar a una de las seis. */
.bloque {
  position: relative; overflow: hidden;
  border-radius: var(--radio-gordo); padding: clamp(2.4rem, 6vw, 3.6rem);
  background: var(--tinta); color: var(--papel-alto); text-align: center;
  box-shadow: 0 2px 4px rgba(22, 24, 29, 0.1), 0 30px 60px -24px rgba(22, 24, 29, 0.5);
}
/* Un círculo enorme y casi transparente: sin él, el bloque se ve como un
   rectángulo de plantilla. */
.bloque::after {
  content: ""; position: absolute; right: -110px; top: -150px;
  width: 360px; height: 360px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); pointer-events: none;
}
.bloque > * { position: relative; }
.bloque h2 { color: var(--papel-alto); }
.bloque p { color: rgba(255, 255, 255, 0.82); max-width: 48ch; margin-inline: auto; }
@media (prefers-color-scheme: dark) {
  .bloque { background: var(--papel-alto); box-shadow: var(--sombra-alta); }
  .bloque h2, .bloque p { color: var(--tinta); }
  .bloque p { color: var(--tinta-media); }
  .bloque::after { background: rgba(255, 255, 255, 0.03); }
}

/* ---------- Daia ID ----------
   La única pieza de la portada que se sale del blanco y gris, y por eso va en
   tinta y no en un color: Daia ID es de la empresa, no de una familia. Pintarla
   del morado de Educación o del verde de Servicios coronaría a una de las seis,
   que es justo lo que la portada evita. */
.cuenta {
  background: var(--papel-alto); border-radius: var(--radio-gordo);
  box-shadow: var(--sombra); padding: clamp(1.8rem, 4vw, 2.8rem);
}
.cuenta__cabeza { text-align: center; max-width: 52ch; margin: 0 auto 2rem; }
.cuenta__entradilla { color: var(--tinta-media); margin: 0; }

.cuenta__puntos {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
/* Hundidos y no levantados: van DENTRO de la tarjeta de la cuenta, y dos
   sombras hacia fuera, una encima de otra, se leen como dos capas sueltas. */
.cuenta__punto {
  background: var(--papel-tinta); border-radius: var(--radio-chico);
  padding: 1.3rem 1.2rem; box-shadow: var(--sombra-hundida);
}
.cuenta__punto h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.cuenta__punto p { color: var(--tinta-media); font-size: 0.92rem; margin: 0; }

/* El aviso de que todavía no está. Mismo tratamiento que el aviso del pie:
   plano y con regla a la izquierda, sin competir con lo que sí se puede tocar. */
.cuenta__aviso {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 1.6rem 0 0; padding: 0.9rem 1.1rem;
  background: var(--papel-tinta); border-left: 4px solid var(--tinta-suave);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  font-size: 0.9rem; color: var(--tinta-media);
}

/* ---------- Nota de fuentes ---------- */
.nota {
  max-width: var(--ancho-texto); margin: 0 auto;
  background: var(--papel-alto); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.7rem 1.6rem;
}
.nota p:last-child { margin-bottom: 0; }
.nota strong { color: var(--tinta); }

/* ---------- Pie ---------- */
.pie { padding: 3rem 0 4rem; border-top: 1px solid var(--borde); margin-top: 2rem; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.pie__enlaces a { color: var(--tinta-media); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.pie__enlaces a:hover { color: var(--tinta); text-decoration: underline; }
/* El contacto va antes de la letra chica y un punto mas grande: es lo unico del
   pie que la gente busca de verdad para escribir. */
.pie__contacto {
  margin: 0 0 0.6rem;
  font-size: 0.94rem;
  color: var(--tinta-media);
}
.pie__contacto a { color: var(--tinta); font-weight: 600; }

.pie__letra { color: var(--tinta-suave); font-size: 0.84rem; max-width: 60ch; }

/* El aviso de que Daia no es el Estado. Va plano, sin arcilla: los avisos no
   compiten en volumen con lo que sí se puede tocar. Misma regla que en
   PapeleosRD y Boticard. */
.pie__aviso {
  background: var(--papel-tinta);
  border-left: 4px solid var(--tinta-suave);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  padding: 1rem 1.2rem; margin: 0 0 1.6rem;
  font-size: 0.9rem; color: var(--tinta-media);
}
.pie__aviso strong { color: var(--tinta); }