/* ==========================================================================
   VEGAS DEL VERDE — styles/sections/catalogo-plantas.css  ·  v1 «el camellón»
   Estiliza SÓLO catalogo-plantas.html (#catalogo). Se enlaza únicamente ahí.
   Depende de tokens.css, base.css y shell.css; pie.css pinta el pie.

   QUÉ ES ESTA PÁGINA
   Las 85 plantas que produce el vivero, con foto, nombre común y nombre
   científico. Es literalmente un catálogo, y la metáfora que lo ordena es
   la del propio vivero: EL CAMELLÓN, la hilera de siembra. Las plantas van
   en orden alfabético y cada inicial ocupa UNA CELDA de la misma rejilla
   —una estaca clavada al comienzo de su tramo— en vez de partir la página
   con separadores a todo lo ancho. Así el índice respira cada pocas fichas
   sin dejar filas medio vacías cuando una letra tiene una sola planta
   (la D, la J, la Y…).

   LAS REGLAS DE LA CASA QUE AQUÍ SE CUMPLEN
   · Ni un valor literal de color, tamaño, radio, sombra o duración: todo
     sale de tokens.css.
   · LA FOTO ES LA FOTO (validar.js, regla h): ninguna placa, velo ni texto
     encima de la imagen. El nombre va en una .placa OPACA debajo del marco,
     hermana y nunca superpuesta (base.css §4b).
   · Fotos de origen desiguales (apaisadas, verticales, cuadradas, 230-530
     px de celular) → un solo marco 1:1 con object-fit: cover. El cuadrado
     es la proporción que menos recorta con orientaciones mezcladas: pierde
     un tercio en el peor caso de cada lado, en vez de casi la mitad que
     perdería un 4:5 sobre una apaisada. Las derivadas ya vienen cuadradas
     (640 y 400 px, ampliadas por GPU desde el original), así que el
     recorte en pantalla es cero y el `cover` sólo compensa redondeos.
   · Sólo transform y opacity se animan. Los reveals son los de base.css §6
     (.reveal + IntersectionObserver de js/app.js): cero motor nuevo.
   · Reduced motion: las duraciones bajan a ~0 desde tokens.css; aquí no
     se escribe ninguna animación que dependa de otra cosa.

   CONTRASTE (medido contra la superficie real donde va cada texto)
     --color-texto        sobre --color-superficie-solida (placa)  14,2:1
     --color-texto-suave  sobre la placa (nombre científico)        6,2:1
     --verde-bosque       sobre --color-fondo-alt (glifo de letra)   9,3:1
     --color-texto-suave  sobre --color-fondo-alt (rótulo letra)     5,4:1
     --verde-bosque       sobre el vidrio del abecedario            10,0:1
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS LOCALES
   -------------------------------------------------------------------------- */
.cat {
  /* La hoja de las fichas: el radio menor, porque la ficha es pequeña y la
     curva grande se comería la esquina de la foto (mismo criterio que
     --viv-hoja en vivero.css). */
  --cat-hoja: var(--radio-hoja-menor);
  /* Alto de la barra de herramientas pegajosa, para el scroll-margin de las
     letras: sin él, al saltar desde el abecedario la letra quedaría tapada
     por la propia barra. */
  --cat-alto-barra: 3.75rem;
}

/* La salida de la cabecera compacta. En una línea siempre; por debajo de
   30em «Volver al» sobra —a 375 px el botón de dos renglones empujaba el
   nombre de la marca fuera de la barra— y queda «Vivero», que con la
   flecha ya dice adónde va. El aria-label conserva la frase entera. */
.cat-volver {
  white-space: nowrap;
}

@media (max-width: 30em) {
  .cat-volver__largo {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   1. PORTADA DE LA PÁGINA — sin fotografía, a propósito (misma decisión que
      .pagina-encabezado en home.css: ninguna imagen que un texto pueda tapar).
      El respiro superior es el de la cabecera fija (.pagina-interior).
   -------------------------------------------------------------------------- */
.cat-portada {
  padding-block: calc(var(--alto-header) + var(--esp-xl)) var(--esp-lg);
}

.cat-portada__interior {
  display: flex;
  flex-direction: column;
  gap: var(--esp-xs);
  max-width: var(--medida);
}

.cat-portada__titulo {
  font-family: var(--fuente-display);
  font-size: var(--fs-h1);
  font-weight: var(--peso-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--alto-linea-titulo);
  text-wrap: balance;
  margin: 0;
}

/* La cifra del catálogo va dentro del titular, no aparte: es el dato y el
   titular a la vez («85 plantas»), y en el peso de las cifras del sistema. */
.cat-portada__cifra {
  font-weight: var(--peso-fuerte);
  color: var(--color-acento-texto);
}

/* --------------------------------------------------------------------------
   2. LA BARRA DE HERRAMIENTAS — buscador + abecedario
      Pegajosa bajo la cabecera fija: en un índice de 85 fichas la forma de
      moverse tiene que viajar con quien se mueve. Fondo OPACO de papel
      (--color-fondo) y filete: debajo pasan fotos, y sobre una foto no cabe
      ni vidrio ni velo (regla h). z-index de la capa pegajosa del sistema.
   -------------------------------------------------------------------------- */
.cat-herramientas {
  position: sticky;
  top: var(--alto-header);
  z-index: var(--z-pegajoso);
  background-color: var(--color-fondo);
  border-block: 1px solid var(--color-borde-suave);
}

.cat-herramientas__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-xs) var(--esp-md);
  min-height: var(--cat-alto-barra);
  padding-block: var(--esp-2xs);
}

/* Buscador: un campo con la lupa de trazo a la izquierda. El campo es un
   control real (<input type="search">), no un div: teclado, lector de
   pantalla y autocompletado del navegador vienen gratis.
   Sin JS no hay filtro, así que el campo NO se muestra (.no-js): un
   buscador que no busca es peor que ninguno. */
.cat-buscar {
  position: relative;
  flex: 1 1 14rem;
  max-width: 26rem;
}

.no-js .cat-buscar {
  display: none;
}

.cat-buscar__lupa {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  transform: translateY(-50%);
  color: var(--color-texto-suave);
  pointer-events: none;
}

.cat-buscar__campo {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem 0.55rem 2.6rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-control);
  background-color: var(--blanco); /* affordance de «aquí se escribe» (tokens.css, --luz) */
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  /* 16 px literales de suelo: por debajo iOS hace zoom al enfocar el campo. */
  font-size: max(16px, var(--fs-cuerpo));
  line-height: 1.3;
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.cat-buscar__campo::placeholder {
  color: var(--color-texto-suave);
  opacity: 1;
}

.cat-buscar__campo:focus-visible {
  outline: none;
  border-color: var(--verde-bosque);
  box-shadow: var(--anillo-foco);
}

/* El «×» nativo de type=search es distinto en cada navegador; se quita y
   el vaciado lo da el propio estado vacío (§5) y la tecla Escape. */
.cat-buscar__campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Cuántas se están viendo. aria-live para que el lector de pantalla oiga
   el recuento cambiar mientras se escribe. */
.cat-cuenta {
  flex: none;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  color: var(--color-texto-suave);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Abecedario: sólo las letras que existen en el catálogo. En móvil es una
   tira que se desplaza en horizontal (contenedor de scroll propio, NO el
   body); desde 62em cabe entera al lado del buscador. */
/* El hijo flex de la barra es el <nav>, no el <ul>: las medidas de reparto
   van en él. OBLIGATORIO el `min-width: 0`: la tira sin wrap tiene un
   min-content igual a la suma de sus letras (908 px medidos) y un hijo flex
   trae `min-width: auto`, así que sin esta línea no encoge, se sale del
   viewport y el body entero pasa a medir 927 px en un móvil de 375. Con 0,
   el ancho lo pone la barra y el sobrante se desplaza DENTRO de la tira. */
.cat-abc-nav {
  flex: 1 1 100%;
  min-width: 0;
}

.cat-abc {
  display: flex;
  gap: var(--esp-3xs);
  margin: 0;
  padding: 0 0 var(--esp-3xs);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Sin esto el navegador no sabe que el gesto es solo horizontal: un swipe
     con la mínima componente vertical se lo queda la página entera (rebote/
     scroll vertical de golpe) en vez de quedarse dentro de la tira. */
  touch-action: pan-x;
}

.cat-abc__letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding-inline: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font-family: var(--fuente-display);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-display-menor);
  letter-spacing: var(--tracking-display);
  color: var(--verde-bosque);
  text-decoration: none;
  transition:
    background-color var(--transicion-rapida),
    border-color var(--transicion-rapida),
    color var(--transicion-rapida);
}

/* EL HOVER, SÓLO DONDE HAY PUNTERO. El abecedario es un scroller táctil: al
   arrastrarlo, el dedo aterriza sobre una letra y el navegador le deja el
   estado `:hover` PEGADO hasta el siguiente toque en otro sitio — y como el
   estado pinta fondo y borde, quedaba una letra resaltada que el visitante no
   eligió, justo al lado de la que sí marca `aria-current`. Dos «letras
   activas» a la vez. `@media (hover: hover)` reserva el gesto para el ratón;
   en táctil el único resalte es el real. */
@media (hover: hover) {
  .cat-abc__letra:hover {
    background-color: var(--color-vidrio-hover);
    border-color: var(--color-vidrio-borde);
  }
}

/* La letra que se está viendo: MÁS tinta, nunca más clara (regla A.5). */
.cat-abc__letra[aria-current="true"] {
  background-color: var(--verde-bosque);
  border-color: var(--verde-bosque);
  color: var(--color-texto-inverso);
}

/* Una letra cuyo tramo el buscador ha vaciado se atenúa y deja de saltar. */
.cat-abc__letra[aria-disabled="true"] {
  color: var(--color-texto-suave);
  opacity: 0.45;
  pointer-events: none;
}

@media (min-width: 62em) {
  .cat-abc-nav {
    flex: 1 1 auto;
  }

  .cat-abc {
    padding-bottom: 0;
    overflow-x: visible;
    flex-wrap: wrap;
  }
}

@media (pointer: coarse), (max-width: 63.99em) {
  .cat-abc__letra {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   3. EL CAMELLÓN — la rejilla
      Columnas explícitas y no auto-fill: el atributo `sizes` de cada <img>
      está calculado sobre estos cuatro anchos, y un auto-fill que decidiera
      por su cuenta desmentiría al navegador la medida que le prometimos.
   -------------------------------------------------------------------------- */
.cat-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .cat-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
  }
}

@media (min-width: 62em) {
  .cat-rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* CUATRO COLUMNAS ES EL TECHO, y antes eran cinco. La ficha nueva lleva una
   fila técnica de tres datos con su rótulo escrito: a cinco columnas la
   tarjeta mide ~14 rem y el cuerpo útil ~12, donde los tres datos ya no
   caben en una línea y la fila se partía en 2 + 1. A cuatro la tarjeta mide
   ~17,5 rem, los tres datos entran de una y el nombre deja de romperse en
   cuatro renglones. El catálogo queda una fila más largo; se gana la ficha. */

.cat-seccion {
  padding-block: var(--esp-lg) var(--esp-seccion);
}

/* --------------------------------------------------------------------------
   4. LA FICHA — «la lámina botánica», versión compacta
      El cliente escogió la Propuesta C de la maqueta y pidió dos ajustes
      sobre ella: la foto A SANGRE (sin el passe-partout ni el filete de la
      lámina montada) y el tamaño de tarjeta de la Propuesta B (compacta, la
      misma densidad de rejilla de siempre). Esto es exactamente eso.

      Tres piezas apiladas en tres filas de un grid, nunca superpuestas:
        1. el marco 1:1 con la foto, pegado a los cuatro bordes de la tarjeta;
        2. el cuerpo: número de catálogo, nombre, científico, una frase y la
           fila técnica de tres datos con rótulo escrito;
        3. la barra de marca verde, que es además el enlace de WhatsApp.
      La tarjeta entera es una superficie opaca con `overflow: hidden`: la
      foto llega al borde porque la RECORTA la tarjeta, no porque se le pinte
      nada encima. LA FOTO SIGUE SIENDO LA FOTO (validar.js, regla h): ni
      placa, ni velo, ni texto sobre la imagen.

      Radio uniforme y no la hoja alterna del resto del sitio: aquí la
      tarjeta es una lámina de catálogo y su disciplina es la repetición: 86
      rectángulos idénticos en columna, como un herbario. La firma de hoja
      sigue viva en las estacas de letra (§4b), que son las que marcan el
      ritmo de la página.
   -------------------------------------------------------------------------- */
.cat-ficha {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  background-color: var(--color-superficie-solida);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--cat-hoja);
  box-shadow: var(--sombra-md);
  overflow: hidden;
  /* La barra de marca decide con su propio ancho si cabe la palabra
     «Preguntar» y si cabe el nombre de la marca. Es un container query y no
     un media query a propósito: la misma ficha vive a dos, tres, cuatro y
     cinco columnas, y lo que manda no es el ancho de la ventana sino el
     suyo. */
  container: cat-ficha / inline-size;
}

/* --- 4.1 · el marco: la foto a sangre ----------------------------------- */
.cat-ficha__marco {
  aspect-ratio: 1 / 1;
  background-color: rgb(var(--gris-verde-rgb) / 0.3);
}

.cat-ficha__marco picture,
.cat-ficha__marco img {
  display: block;
  width: 100%;
  height: 100%;
}

.cat-ficha__marco img {
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-suave);
}

/* La foto se acerca al pasar por encima: acercarse a la planta, como en el
   camellón. Sólo transform. En puntero grueso no hay hover y no pasa nada.
   La tarjeta en sí no se mueve: `.reveal` ya usa su `transform` para entrar
   (base.css §6) y dos dueños para la misma propiedad es un parpadeo. */
@media (hover: hover) {
  .cat-ficha:hover .cat-ficha__marco img {
    transform: scale(var(--escala-hover));
  }
}

/* LAS FICHAS SIN FOTO. Ni hueco roto ni foto inventada: la hoja de trazo del
   sistema sobre salvia, que se dibuja sola al entrar la sección (icono-traza,
   app.js). role="img" + aria-label en el HTML dicen con palabras lo que la
   hoja dice con el dibujo. */
.cat-ficha__sin-foto {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-fondo-alt);
  color: var(--verde-oliva);
}

.cat-ficha__hoja {
  width: 38%;
  height: 38%;
  stroke-width: 0.9;
}

/* --- 4.2 · el cuerpo ---------------------------------------------------- */
.cat-ficha__cuerpo {
  display: flex;
  flex-direction: column;
  padding: var(--esp-xs);
  min-width: 0;
}

/* EL NÚMERO DE CATÁLOGO. Dato real: el campo `n` de _datos.json, el mismo
   con el que el vivero ordena sus 86 plantas. Va en versalitas con la regla
   fina que lo lleva hasta el borde del cuerpo, como el folio de una lámina.
   Cifras tabulares para que la columna de números no baile de ficha a ficha. */
.cat-ficha__numero {
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  margin: 0 0 var(--esp-3xs);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--verde-texto);
}

.cat-ficha__numero::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-borde-suave);
}

/* El nombre común es la pieza: display, tinta plena, interlínea apretada y
   el tracking de display. Se queda en --fs-h4 y no sube a --fs-h3 como en la
   maqueta: la tarjeta compacta que pidió el cliente mide entre 10 y 19 rem
   de ancho y el cuerpo mayor partía los nombres largos en cuatro renglones. */
.cat-ficha__nombre {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--fs-h4);
  font-weight: var(--peso-display-menor);
  letter-spacing: var(--track-display);
  line-height: var(--alto-linea-apretado);
  color: var(--color-texto);
  text-wrap: balance;
  /* `break-word` y NO `anywhere`: en la tarjeta de dos columnas del celular
     el cuerpo mide ~8 rem y `anywhere` partía nombres largos por cualquier
     letra («Acetaminofé / n»). Así sólo se corta la palabra que de verdad no
     cabe sola, y cuando toca cortarla el guion lo pone la separación silábica
     del español (la página declara lang="es"). */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* El científico es la letra pequeña del botánico: cuerpo pequeño, gris
   suave (6,2:1 sobre la placa) y la cursiva REAL del <em> del marcado. */
.cat-ficha__cientifico {
  margin: var(--esp-3xs) 0 0;
  font-size: var(--fs-micro);
  line-height: var(--alto-linea-titulo);
  color: var(--color-texto-suave);
  overflow-wrap: anywhere;
}

.cat-ficha__cientifico em {
  font-style: italic;
}

.cat-ficha__nota {
  font-size: var(--fs-micro);
}

/* «Especie por confirmar»: estado PENDIENTE visible, no rellenado. Va en
   cursiva y suave para que se lea como nota y no como nombre. */
.cat-ficha__cientifico--pendiente {
  font-style: italic;
}

/* LA FRASE. Es el campo `usos` del catálogo del cliente, tal cual, sin
   rótulo: reemplaza a los tres párrafos del formato viejo, que era lo que el
   cliente pidió recortar. Sin line-clamp y sin altura fija: los textos miden
   entre 30 y 90 caracteres y cualquier altura impuesta abre huecos en las
   cortas o corta las largas —el mismo error que costó quitar
   --alto-tarjeta-espacio de home.css—. La fila de la rejilla ya iguala a la
   ficha más alta, y la fila técnica se empuja al fondo con margin-top: auto,
   así que todas las fichas de una fila alinean su barra de marca. */
.cat-ficha__desc {
  margin: var(--esp-3xs) 0 0;
  font-size: var(--fs-micro);
  line-height: var(--alto-linea-base);
  color: var(--color-texto-suave);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4a. LA FILA TÉCNICA — luz, sitio y riego
      Reemplaza a los tres bloques «Dónde va / Para qué / Cuidados» del
      formato viejo. Sigue siendo una <dl> real (rótulo → dato), pero ahora
      el rótulo se lee además de oírse: es una ficha técnica, no una fila de
      etiquetas de colores.

      TODO SALE DE _datos.json Y NADA SE INVENTA:
        · SITIO y LUZ se leen del campo `ubicacion` con un mapa explícito de
          sus 26 cadenas distintas (no una heurística).
        · RIEGO se resume del campo `cuidados` SÓLO cuando ese texto habla de
          agua de verdad.
      Cuando el dato no está, la columna no se dibuja: 25 fichas muestran dos
      columnas y 7 (las que el catálogo trae sin ficha de cultivo) no muestran
      ninguna. Preferimos una fila corta a un dato inventado.

      Por eso la rejilla es `auto-fit` con mínimo en rem y no tres columnas
      fijas: se reparte sola entre uno, dos y tres datos, y baja a dos filas
      en la tarjeta angosta del celular sin que nada se corte.

      SIN NINGUNA ALTURA FIJA, igual que la frase de arriba: la fila de la
      rejilla ya iguala a la ficha más alta y la barra de marca queda pegada
      al fondo sola, porque el cuerpo es la fila `1fr` del grid de la ficha.
   -------------------------------------------------------------------------- */
.cat-ficha__tabla {
  display: grid;
  /* 4,25 rem de mínimo por columna, medido y no elegido: es el ancho al que
     cabe entero el valor más largo de una sola palabra («Constante»,
     «Moderado»). Con un mínimo menor la tarjeta de dos columnas del celular
     metía dos datos por fila y partía la palabra («Moderad / o»). Con este,
     `auto-fit` reparte tres columnas en la tarjeta de escritorio (~15,5 rem
     de cuerpo), dos en la tableta y una en el celular, sin cortar nada. */
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
  gap: var(--esp-3xs) var(--esp-xs);
  margin: var(--esp-xs) 0 0;
  padding-top: var(--esp-3xs);
  border-top: 1px solid var(--color-borde-suave);
}

.cat-ficha__tabla > div {
  min-width: 0;
}

.cat-ficha__rotulo {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin: 0 0 var(--esp-3xs);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--verde-texto);
}

.cat-ficha__rotulo svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.cat-ficha__valor {
  margin: 0;
  font-size: var(--fs-micro);
  line-height: var(--alto-linea-titulo);
  color: var(--color-texto);
  text-wrap: pretty;
  /* Igual que el nombre: `break-word` y no `anywhere`, que partía valores de
     una sola palabra («Moderad / o») en la columna angosta del celular. */
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   4b. LA BARRA DE MARCA — el pie de la ficha y el botón de WhatsApp
      El cliente pidió «que esto tenga logos». El logo NO va quemado sobre la
      foto (regla h): va en una franja OPACA al pie de la tarjeta, que es lo
      que hacía también la referencia que trajo. Mismo lockup símbolo +
      nombre en dos líneas que .marca de shell.css, para que el pie de la
      ficha y la cabecera del sitio sean la misma marca y no dos versiones.

      La franja ENTERA es el enlace de WhatsApp: 2,75 rem de alto, muy por
      encima del objetivo táctil mínimo. El canal espinal del sitio, una vez
      por ficha y en voz baja.
      Contraste: crema sobre verde bosque, 10,0:1 (tokens.css).
   -------------------------------------------------------------------------- */
.cat-ficha__marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2xs);
  min-height: 2.75rem;
  padding: var(--esp-3xs) var(--esp-3xs) var(--esp-3xs) var(--esp-sm);
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
  text-decoration: none;
  transition: background-color var(--transicion-rapida);
}

.cat-ficha__marca:hover,
.cat-ficha__marca:focus-visible {
  background-color: var(--verde-bosque-hondo);
}

.cat-ficha__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
}

.cat-ficha__simbolo {
  width: auto;
  height: 1.25rem;
  flex: none;
}

.cat-ficha__lockup-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.cat-ficha__lockup-linea {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
}

.cat-ficha__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex: none;
  min-height: 2.25rem;
  padding-inline: var(--esp-xs);
  border-radius: var(--radio-control);
  background-color: rgb(var(--crema-rgb) / 0.14);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-boton);
  transition: background-color var(--transicion-rapida);
}

.cat-ficha__wa svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.cat-ficha__marca:hover .cat-ficha__wa,
.cat-ficha__marca:focus-visible .cat-ficha__wa {
  background-color: rgb(var(--crema-rgb) / 0.22);
}

/* CUANDO LA TARJETA SE ESTRECHA, LA BARRA SUELTA PALABRAS EN ESTE ORDEN.
   Medido: a cinco y a cuatro columnas la ficha mide ~15 rem y el lockup más
   la palabra «Preguntar» no caben — lo que pasaba en la maqueta era que las
   dos se cortaban a la vez («VEGAS DE…» + «PREGUNTA…»). Primero se va la
   palabra del botón (el glifo de WhatsApp se reconoce solo), y sólo en la
   tarjeta de dos columnas del celular se va también el nombre de la marca y
   queda el símbolo. Ninguna de las dos frases se pierde para quien no ve:
   siguen enteras en el aria-label del enlace. */
@container cat-ficha (max-width: 17.5rem) {
  .cat-ficha__wa span {
    display: none;
  }

  .cat-ficha__wa {
    width: 2.25rem;
    padding-inline: 0;
  }
}

@container cat-ficha (max-width: 12.5rem) {
  .cat-ficha__lockup-texto {
    display: none;
  }

  .cat-ficha__marca {
    padding-left: var(--esp-2xs);
  }
}

/* --------------------------------------------------------------------------
   4c. LA ESTACA — la celda de inicial
      Misma celda que una ficha, sobre salvia plena, con la inicial en display
      grande. El <h2> «Plantas con A» es la estructura real (jerarquía h1 →
      h2 → h3 de ficha) y se muestra como rótulo en la base de la celda; el
      glifo grande es decoración (aria-hidden) de esa misma letra.
      Alineación: `align-self: stretch` la hace tan alta como la fila; en
      una fila corta (móvil, dos columnas) sigue cuadrando con la ficha de
      al lado porque la ficha manda la altura.
   -------------------------------------------------------------------------- */
.cat-letra {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: var(--esp-sm);
  background-color: var(--color-fondo-alt);
  border-radius: 0 var(--radio-hoja) 0 var(--radio-hoja);
  /* Al saltar desde el abecedario, la letra aterriza bajo la barra pegajosa
     y la cabecera fija, no detrás de ellas. */
  scroll-margin-top: calc(var(--alto-header) + var(--cat-alto-barra) + var(--esp-sm));
}

.cat-letra__glifo {
  font-family: var(--fuente-display);
  font-size: var(--fs-hero);
  font-weight: var(--peso-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--verde-bosque);
}

.cat-letra__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--color-texto-suave);
}

/* --------------------------------------------------------------------------
   5. ESTADO VACÍO — ningún error sin salida
      Aparece sólo cuando el buscador deja cero fichas. Dice qué pasó, con
      qué se buscó, y ofrece las dos salidas: limpiar, o preguntar por
      WhatsApp (puede que la planta exista y no esté en la lista).
   -------------------------------------------------------------------------- */
.cat-vacio {
  display: none;
  max-width: var(--medida-corta);
  margin-block: var(--esp-lg);
}

.cat-vacio[data-visible="true"] {
  display: block;
}

.cat-vacio__titulo {
  margin: 0 0 var(--esp-2xs);
  font-family: var(--fuente-display);
  font-size: var(--fs-h3);
  font-weight: var(--peso-display-menor);
  letter-spacing: var(--tracking-display);
  line-height: var(--alto-linea-titulo);
}

.cat-vacio__texto {
  margin: 0 0 var(--esp-md);
  color: var(--color-texto-suave);
}

/* La ficha filtrada sale del flujo (no del DOM): al borrar la búsqueda
   vuelve a su sitio sin reordenar nada. `hidden` lo pone el JS. */
.cat-ficha[hidden],
.cat-letra[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   6. CIERRE — la salida al vivero y a WhatsApp, en su propia franja
   -------------------------------------------------------------------------- */
.cat-cierre {
  border-block-start: 1px solid var(--color-borde-suave);
  padding-block: var(--esp-seccion-sm);
}

.cat-cierre__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md);
}

.cat-cierre__texto {
  margin: 0;
  max-width: var(--medida-corta);
  font-size: var(--fs-grande);
  font-weight: var(--peso-ligero);
  line-height: var(--alto-linea-suelto);
  color: var(--color-texto-suave);
  text-wrap: pretty;
}