/* Hallmark · shape: Index (catálogo) y Long Document corto (ficha) · genre: editorial · theme: brand · redesign: full
 * paper: oklch(97.3% 0.006 100) · accent: oklch(51.2% 0.079 131) · display: Barlow 900 · body: Barlow 400/600 · hero: Banner (/plantas/ y cada /plantas/<especie>/: páginas de consulta) · nav: search-led bar · footer: letter close · signature: las dos cifras de riego, verano e invierno, a tamaño de titular
 * axes: light/display-heavy/chromatic-green · posture: Committed (salvia en la banda de descarga) · contrast: pass · fold: pass · job: try · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V3 · weakest: V, 185 fichas comparten plantilla por naturaleza; varía la foto o el tono del placeholder y la categoría */
/* Hallmark · dismissed 40 · .ph--arena y .ph--arcilla pintan iconos de 46% del ancho de la tarjeta (umbral 3:1), no texto */
/* Hallmark · dismissed 23 · las letras del índice A-Z van en el verde de la app como marcadores de sección, no como énfasis */
/* Hallmark · dismissed 77 · /plantas/ es un índice de consulta: buscador, filtros y la lista entera de especies */
/* Hallmark · dismissed 58 · /plantas/ lista 184 especies; ese texto es el catálogo, no copy de marketing */
/* Hallmark · answered F20 · cada letra del catálogo tiene las especies que tiene; la última fila de una letra puede quedar corta */
/* Hallmark · answered F4 · la banda de descarga usa las insignias de las tiendas; el único botón lleno es «Descargar» de la cabecera */
/* Hallmark · dropped la frase «X se riega de forma orientativa cada A días…» de la ficha · sus dos cifras están justo debajo, a tamaño de titular */
/* Hallmark · dropped la etiqueta de categoría sobre el h1 de la ficha (eyebrow, 54) · pasa a la fila «Tipo» de los cuidados */
/* Generadas con scripts/generar-especies.mjs. Requiere css/base.css (y sus tokens). */

.sec { padding-block: var(--section-gap-s); }
.sec h2 { margin-bottom: var(--space-xl); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); color: var(--color-ink-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); }
.crumbs a:hover { color: var(--color-accent); }

/* Foto o placeholder de la app (icono duotono sobre tono tierra) */
.ph { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; }
.ph svg { width: 46%; height: auto; }
.ph--salvia { background: var(--color-salvia-2); color: var(--color-accent); }
.ph--arena { background: var(--color-paper-3); color: var(--color-arena-ink); }
.ph--arcilla { background: var(--color-arcilla); color: var(--color-arcilla-ink); }
.ph--niebla { background: var(--color-niebla); color: var(--color-niebla-ink); }

/* ── Tarjetas de planta (índice y «Otras plantas») ── */
.pcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.pcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-xl); }
.pcard a { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); text-decoration: none; overflow: clip; transition: transform var(--dur-short) var(--ease-out); }
.pcard a:hover { transform: translateY(-4px); }
.pcard a:active { transform: translateY(-1px); }
.pcard-img { display: block; background: var(--color-paper-2); }
.pcard-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* En el índice, cuadradas: 184 tarjetas pesan mucho en scroll */
.grupo .pcard-img img, .grupo .ph { aspect-ratio: 1; }
.pcard-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md) var(--space-md); }
.pcard-name { font-size: var(--text-lg); font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; }
.pcard-water { margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.pcard .tox { margin-top: auto; min-height: 28px; padding: 0 var(--space-xs); font-size: var(--text-xs); }
.pcard .tox svg { width: 14px; height: 14px; }
.pcard .tox, .sp-copy .tox { white-space: normal; padding-block: var(--space-2xs); }
@media (max-width: 75rem) { .pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .pcards, .pcards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pcards, .pcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Índice ── */
.cat-hero { padding-block: var(--space-xl) var(--space-2xl); }
.cat-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.cat-hero h1 { max-width: 12ch; font-size: var(--text-display); line-height: 0.96; }
.cat-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); min-width: 0; }
.buscador { display: flex; align-items: center; gap: var(--space-sm); min-height: 64px; padding: var(--space-xs) var(--space-lg); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: 6px 6px 0 var(--color-salvia); transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.buscador svg { width: 24px; height: 24px; flex: none; color: var(--color-accent); }
.buscador input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: none; background: transparent; color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; }
.buscador input::placeholder { color: var(--color-ink-2); font-weight: 400; opacity: 1; }
.buscador:focus-within { box-shadow: 3px 3px 0 var(--color-salvia); transform: translate(3px, 3px); }
.buscador:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .buscador:focus-within { transform: none; } }

.filtros { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; border: 0; }
.filtros input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.filtros label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); font-weight: 600; cursor: pointer; user-select: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.filtros label span { color: var(--color-ink-2); font-weight: 400; }
.filtros label:hover { border-color: var(--color-ink-2); }
.filtros label:active { background: var(--color-paper-2); }
.filtros input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.filtros input:checked + label span { color: var(--color-on-dark-2); }
.filtros input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.cat-list { padding-bottom: var(--section-gap-s); background: var(--color-paper-2); }
.cat-bar { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); }
.cat-bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg); min-height: 64px; }
.cuenta { font-weight: 600; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.az { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.az a { display: grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: var(--radius-sm); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.az a:hover { background: var(--color-surface); color: var(--color-accent); }
.az a:active { background: var(--color-paper-3); }
.vacio { max-width: 52ch; margin: var(--space-xl) 0 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink-2); }
.grupo { padding-top: var(--space-2xl); scroll-margin-top: calc(var(--nav-h) + 72px); }
.grupo-l { margin-bottom: var(--space-lg); font-size: var(--text-section); line-height: 1; color: var(--color-accent); }
@media (max-width: 60rem) {
  .cat-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-bar { position: static; }
}
@media (max-width: 40rem) {
  /* En móvil, filas como la lista de la app: miniatura y texto */
  .grupo .pcards { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .grupo .pcard a { flex-direction: row; align-items: center; gap: var(--space-sm); padding: var(--space-xs); border-radius: 18px; }
  .grupo .pcard-img { flex: none; width: 76px; border-radius: var(--radius-sm); overflow: clip; }
  .grupo .pcard-body { padding: 0; }
  .grupo .pcard-water { margin-bottom: var(--space-2xs); }
  .grupo .pcard .tox { margin-top: 0; }
}

/* Filtros sin JS (radios + :has); con JS el buscador añade .fuera */
body:has(#f-mascotas:checked) .pcard:not([data-mascotas]),
body:has(#f-poco:checked) .pcard:not([data-poco]),
body:has(#f-exterior:checked) .pcard:not([data-exterior]),
body:has(#f-flor:checked) .pcard:not([data-flor]),
body:has(#f-aromatica:checked) .pcard:not([data-aromatica]),
body:has(#f-mascotas:checked) .grupo:not(:has([data-mascotas])),
body:has(#f-poco:checked) .grupo:not(:has([data-poco])),
body:has(#f-exterior:checked) .grupo:not(:has([data-exterior])),
body:has(#f-flor:checked) .grupo:not(:has([data-flor])),
body:has(#f-aromatica:checked) .grupo:not(:has([data-aromatica])),
.fuera { display: none; }

/* ── Ficha de especie (Banner: el texto y las cifras a la izquierda, la foto a la derecha) ── */
.sp-hero { padding-block: var(--space-lg) var(--space-2xl); }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); align-items: center; }
.sp-copy { display: grid; justify-items: start; }
.sp-hero h1 { max-width: 12ch; font-size: var(--text-display); line-height: 0.96; }
.sci { margin-top: var(--space-md); color: var(--color-ink-2); }
.sp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 40rem; margin: var(--space-xl) 0 var(--space-lg); border-top: 1px solid var(--color-rule); }
.sp-stat { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md) var(--space-lg) 0 0; }
.sp-stat + .sp-stat { padding: var(--space-md) 0 0 var(--space-lg); border-left: 1px solid var(--color-rule); }
.sp-stat dt { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.sp-stat dt svg { width: 20px; height: 20px; color: var(--color-arena-ink); }
.sp-stat--invierno dt svg { color: var(--color-niebla-ink); }
.sp-stat dd { margin: 0; font-size: var(--text-lg); color: var(--color-ink-2); }
.sp-stat .num { margin-right: var(--space-2xs); font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 4vw + 1rem, 5.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--color-ink); }
.sp-stat--invierno .num { color: var(--color-niebla-ink); }
.sp-photo { justify-self: stretch; width: 100%; margin: 0; border-radius: var(--radius-card); overflow: clip; background: var(--color-paper-2); }
.sp-photo img, .sp-photo .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 60rem) {
  .sp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-photo { justify-self: start; max-width: 22rem; }
}

.sp-care { padding-top: var(--space-2xl); }
.sp-care-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.sp-care h2 { margin-bottom: var(--space-lg); }
.rule { max-width: 30ch; font-size: var(--text-2xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.note { max-width: 60ch; margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.note a { color: var(--color-accent); }
.sp-facts { margin: 0; border-top: 1px solid var(--color-rule); }
.fact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); align-items: baseline; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.fact dt { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); }
.fact dt svg { width: 20px; height: 20px; flex: none; color: var(--color-accent); align-self: center; }
.fact dd { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
@media (max-width: 60rem) { .sp-care-grid { grid-template-columns: minmax(0, 1fr); } }

.sp-related { background: var(--color-paper-2); }

/* ── Banda de descarga (salvia, como el cierre de la portada) ── */
.band-cta :focus-visible { outline-color: var(--color-ink); }
.band-cta { padding-block: var(--section-gap-s); background: var(--color-salvia); color: var(--color-ink); overflow: clip; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.cta-copy { display: grid; gap: var(--space-lg); justify-items: start; }
.band-cta h2 { max-width: 12ch; font-size: var(--text-display-s); }
.band-cta .lead { color: var(--color-ink); }
.noti { justify-self: center; width: min(340px, 100%); padding: var(--space-md); border-radius: 20px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.noti-head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.noti-icon { width: 20px; height: 20px; border-radius: 6px; }
.noti-title { font-weight: 600; }
.noti-body { color: var(--color-ink-2); }
.noti-btn { margin-top: var(--space-sm); color: var(--color-accent); font-weight: 600; }
@media (max-width: 60rem) { .cta-grid { grid-template-columns: minmax(0, 1fr); } .noti { justify-self: start; } }