/* ==========================================================================
   PIEL · venderpisoconinquilinos.es · v1 · 04/11/2026
   «Llavero»: verde de tablero de llaves y cartón de etiqueta. Aprobada por
   el titular el 04/11/2026. Solo tokens de :root y fuentes.
   Contraste comprobado (WCAG 2.2 AA): texto 17,5:1 · texto suave 8,2:1 ·
   marca sobre blanco 10,2:1 · borde de campo 4,6:1 · foco 5,5:1 ·
   texto sobre cartón 8,6:1 · estados sobre su tenue ≥ 5,7:1.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fuentes/archivo-texto.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Estrecha";
  src: url("../fuentes/archivo-estrecha.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color · superficies */
  --color-fondo: #f1f5f2;
  --color-superficie: #ffffff;
  --color-superficie-alt: #e4ebe6;
  --color-seccion-alt: var(--color-superficie-alt);
  --color-texto: #0f1c17;
  --color-texto-suave: #42534a;
  --color-linea: #d0dbd4;
  --color-linea-campo: #687a71;

  /* Color · marca (verde de tablero) */
  --color-marca: #0e4a36;
  --color-marca-intensa: #093425;
  --color-sobre-marca: #ffffff;
  --color-marca-tenue: #e1ede6;
  --color-foco: #a8500e;

  /* Color · banda oscura */
  --color-banda: #0a2b20;
  --color-sobre-banda: #edf5f0;
  --color-sobre-banda-suave: #a9c1b5;

  /* Color · estados */
  --color-ok: #1d6a3a;
  --color-ok-tenue: #e5f2e9;
  --color-aviso: #8a4b00;
  --color-aviso-tenue: #fcf0dd;
  --color-error: #b42318;
  --color-error-tenue: #fdecea;

  /* Color · cartón de la etiqueta (.carton y .tablero) */
  --color-carton: #d8b077;
  --color-carton-oscuro: #b98d52;
  --color-sobre-carton: #24180b;

  /* Tipografía */
  --fuente-titulos: "Archivo Estrecha", "Archivo", system-ui, sans-serif;
  --fuente-texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-fuerte: 600;
  --peso-titulos: 720;
  --tracking-titulos: -0.004em;
  --interlineado: 1.62;

  /* Forma */
  --radio-s: 3px;
  --radio-m: 6px;
  --radio-l: 10px;
  --radio-boton: 6px;
  --radio-campo: 4px;
  --sombra-1: 0 1px 2px rgb(10 43 32 / 0.07), 0 1px 3px rgb(10 43 32 / 0.06);
  --sombra-2: 0 18px 40px -18px rgb(6 30 22 / 0.45), 0 4px 10px -4px rgb(6 30 22 / 0.18);

  --ancho-pagina: 72rem;
}

/* Ajuste de esta web (05/11/2026): con 6 elementos en el menú, entre 56rem y
   66rem los huecos de la cabecera se estrechan para que quepa en una fila. */
@media (min-width: 56rem) and (max-width: 66rem) {
  .cabecera__interior { gap: var(--esp-2); }
  .cabecera__nav ul { column-gap: var(--esp-3); }
  .cabecera__nav li > a { font-size: 0.875rem; }
}

/* Opiniones de propietarios (05/11/2026): tarjetas blancas sobre la banda
   alterna, con las estrellas en ámbar oscuro para que pasen el contraste. */
.opinion {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-5);
  background: var(--color-superficie);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
}

.opinion__estrellas {
  margin: 0;
  color: var(--color-aviso);
  font-size: var(--texto-l);
  letter-spacing: 0.12em;
  line-height: 1;
}

.opinion blockquote {
  margin: 0;
  padding: 0;
  background: none;
  font-size: var(--texto-m);
}

.opinion blockquote p {
  margin: 0;
}

.opinion figcaption {
  margin-top: auto;
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}