/* caso-la-cananna.css — solo los tokens y los ajustes del caso La Cañaña.
   El layout vive en caso-base.css y caso-layouts.css. Si hay que tocar
   maquetación, se toca allá.

   La paleta sale del propio logotipo, muestreada de los JPG originales de 2021:
     #7d4e24  marrón del logotipo          (7,03:1 sobre blanco)
     #402a15  marrón oscuro, versión 4     (13,46:1)
     #f4eade  crema de fondo, versión 2    (5,92:1 como texto sobre el marrón)
     #ecd5b6  beige de fondo, versión 1
     #439843  verde de la caña

   El verde del logo NO se usa como color de texto: da 3,38:1 sobre blanco y no
   pasa AA. Sigue vivo dentro de las imágenes, que es donde corresponde. */

.caso--lacananna {
  --caso-acento: #7d4e24;          /* marrón del logotipo */
  --caso-acento-texto: #f4eade;    /* crema, 5,92:1 sobre el acento */
  --caso-secundario: #402a15;      /* marrón oscuro */
  --caso-fondo-alt: #f7f1e6;
  --caso-linea: #e6d9c4;
}

/* ── Tema claro, fijo ────────────────────────────────────────────────────
   Sin bloque de modo oscuro a propósito. caso-base.css trae un
   @media (prefers-color-scheme: dark) que se apaga con data-tema="claro",
   y ese atributo va puesto en el <section>. Se usa el interruptor que ya
   existe en la base en vez de escribir un override que la contradiga.

   Las piezas de esta marca son beige, marrón y verde sobre fondo claro; en
   pantalla oscura el papel del feed quedaba flotando y el conjunto perdía. */

/* ── Ritmo vertical ─────────────────────────────────────────────────────
   Más apretado que el de la base. Este caso son tres secciones y un cierre:
   con el aire por defecto pedía cinco o seis scrolls para un proyecto que se
   cuenta en tres. El aire de más no se lee como respiro, se lee como relleno. */
.caso--lacananna { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.caso--lacananna .caso__bloque { margin-block: clamp(1.75rem, 3.2vw, 2.5rem); }

/* ── Ajustes de las piezas ──────────────────────────────────────────────── */

/* Las piezas del feed ya traen fondo beige propio. Sobre el fondo alternativo
   —que es casi el mismo tono— el borde de cada casilla se perdía, así que el
   contraste lo pone la línea. */
.caso--lacananna .caso__tira .caso__lupa,
.caso--lacananna .caso__bento .caso__lupa,
.caso--lacananna .caso__vitrina .caso__lupa {
  border-color: var(--caso-linea);
  background: var(--caso-fondo-alt);
}

/* Levantar una casilla rompe la rejilla: el argumento de la sección es que las
   nueve se leen como un feed, y un feed con una pieza flotando deja de
   parecerlo. El foco se marca con anillo, no con desplazamiento. */
.caso--lacananna .caso__tira .caso__lupa:hover,
.caso--lacananna .caso__tira .caso__lupa:focus-visible {
  transform: none;
  box-shadow: 0 0 0 3px var(--caso-acento);
  position: relative;
  z-index: 1;
}

/* El avatar es la prueba real del logotipo de una marca pequeña, así que se
   muestra al tamaño en que se usa y no ampliado. */
.caso--lacananna .caso__avatares .caso__lupa {
  border-color: var(--caso-linea);
  background: #ecd5b6;             /* el beige del propio archivo */
}