/* Catálogo de flora y fauna (flora-fauna.html) · 8/10/2026, ADR-028. Un índice tipo wiki, no una página para bajar: menú por
   categoría con la cantidad de especies, buscador, vista en fichas o en lista, y cada especie enlazada a su página propia
   (especies/<slug>.html, con el molde de la ficha del tala). Misma paleta que las fichas (verde bosque, dorado, Playfair en el
   título, Cormorant en los nombres). Las fichas del catálogo las escribe herramientas/especies.py entre los comentarios
   <!--especies:inicio--> y <!--especies:fin-->; el menú, el buscador y la vista los maneja assets/js/flora-fauna.js.
   Sin JavaScript no hay barra: se ven todas las categorías, una debajo de la otra. */

body.cat-page{background:#0b2214}
.cat{
  --bg:#0b2214;--line:rgba(206,182,104,.26);--line-2:rgba(206,182,104,.42);--gold:#f5c542;--gold-hi:#ffd568;--gold-text:#f1c04c;--cream:#f4efe2;
  --text:#e2e3d5;--muted:#a3ae9a;--ink:#122410;--nativa:#5fb26a;--introducida:#e39a45;--domestica:#c9b27a;
  --f-display:"Playfair Display","Bodoni 72",Didot,Georgia,serif;--f-serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;--f-ui:"Outfit",system-ui,sans-serif;
  --ease:cubic-bezier(.16,.84,.3,1);
  position:relative;isolation:isolate;overflow:clip;color:var(--text);font-family:var(--f-ui);
  background:radial-gradient(50% 40% at 85% 6%,rgba(30,74,42,.55),transparent 72%),radial-gradient(45% 40% at 0% 40%,rgba(18,52,30,.4),transparent 70%),var(--bg)}
.cat .container{width:min(1240px,calc(100% - 2 * clamp(16px,3.5vw,52px)));max-width:none;margin-inline:auto;padding:0}
.cat h1,.cat h2,.cat h3{background:none;-webkit-text-fill-color:currentColor;margin:0}
.cat a{color:inherit;text-decoration:none}
.cat ul{list-style:none;margin:0;padding:0}
.cat :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.cat ::selection{background:var(--gold);color:var(--ink)}

/* ---------- Cabecera del catálogo ---------- */
.cat-cab{padding:140px 0 34px}
.cat-cab__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 40px}
.cat-migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;padding:0;list-style:none;font:400 12.5px/1.2 var(--f-ui);color:var(--text)}
.cat-migas li{display:flex;align-items:center;gap:14px}
.cat-migas li+li::before{content:"";width:5px;height:5px;border-top:1.3px solid currentColor;border-right:1.3px solid currentColor;transform:rotate(45deg);opacity:.75}
.cat-migas a{display:inline-flex;align-items:center;min-height:32px;transition:color .25s}
.cat-migas [aria-current]{color:var(--gold-text)}
.cat-ornamento{margin:18px 0 0;line-height:0;color:var(--gold)}
.cat-ornamento span{display:inline-block;vertical-align:middle;width:70px;height:1.3px;background:currentColor;opacity:.85}
.cat-ornamento svg{display:inline-block;vertical-align:middle;width:24px;height:24px;margin-inline:22px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.cat .cat-titulo{margin-top:10px;font:800 clamp(52px,7.4vw,104px)/.9 var(--f-display);letter-spacing:-.01em;color:var(--cream);text-wrap:balance}
.cat-titulo em{font-style:normal;color:var(--gold-text)}
.cat-lead{max-width:46ch;margin:16px 0 0;font-size:1.08rem;line-height:1.6;color:var(--text)}
.cat-cuentas{display:flex;gap:0;margin:0;padding:0}
.cat-cuentas div{display:grid;gap:4px;padding:2px 22px}
.cat-cuentas div+div{border-left:1px solid var(--line)}
.cat-cuentas dt{font-size:.8rem;color:var(--muted)}
.cat-cuentas dd{margin:0;font:600 2.1rem/1 var(--f-serif);color:var(--cream);font-variant-numeric:lining-nums}

/* ---------- Barra: categorías, buscador y vista (pegada debajo de la cabecera) ---------- */
.cat-barra{position:sticky;top:96px;z-index:20;padding:12px 0;background:rgba(9,29,17,.86);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);
  border-block:1px solid var(--line)}
html:not(.js) .cat-barra{display:none}
.cat-barra__caja{display:flex;align-items:center;gap:14px}
.cat-menu{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.cat-menu::-webkit-scrollbar{display:none}
.cat-menu button{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;padding:6px 10px 6px 8px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--cream);font:500 .98rem/1 var(--f-ui);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .12s var(--ease)}
.cat-menu button svg{width:28px;height:28px;padding:5px;border-radius:50%;background:rgba(245,197,66,.14);color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:background-color .25s,color .25s}
.cat-menu__n{min-width:1.6em;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.07);font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);text-align:center}
.cat-menu button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cat-menu button[aria-pressed="true"] svg{background:rgba(18,36,16,.14);color:var(--ink)}
.cat-menu button[aria-pressed="true"] .cat-menu__n{background:rgba(18,36,16,.14);color:var(--ink)}
.cat-menu button:active{transform:scale(.97)}
.cat-buscar{position:relative;display:flex;align-items:center;flex:0 1 260px;margin:0}
.cat-buscar svg{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.cat-buscar input{width:100%;min-height:44px;padding:8px 14px 8px 40px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--cream);
  font:400 1rem var(--f-ui);caret-color:var(--gold);transition:border-color .25s,background-color .25s}
.cat-buscar input::placeholder{color:var(--muted)}
.cat-buscar input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07)}
.cat-vista{display:flex;flex:none;padding:3px;border:1px solid var(--line);border-radius:999px}
.cat-vista button{display:grid;place-items:center;width:40px;height:38px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .25s,color .25s}
.cat-vista svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cat-vista button[aria-pressed="true"]{background:rgba(245,197,66,.16);color:var(--gold)}
@media(hover:hover) and (pointer:fine){
  .cat-menu button:not([aria-pressed="true"]):hover{border-color:var(--gold);color:var(--gold-hi)}
  .cat-vista button:not([aria-pressed="true"]):hover{color:var(--cream)}
}

/* ---------- Grupos y fichas ---------- */
.cat-cuerpo{padding:46px 0 90px}
.cat-grupo{scroll-margin-top:190px}
.cat-grupo+.cat-grupo{margin-top:54px}
.cat-grupo[hidden],.cat-item[hidden]{display:none}
.cat-grupo__cab{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.cat .cat-grupo__cab h2{font:600 clamp(2rem,3vw,2.6rem)/1 var(--f-serif);color:var(--cream)}
.cat .acento{font-family:"EB Garamond",var(--f-serif);font-weight:500}
.cat-grupo__n{flex:none;font-size:.9rem;color:var(--muted)}
.cat-grupo__cab::after{content:"";flex:1;height:1px;align-self:center;background:linear-gradient(90deg,var(--line-2),transparent)}
.cat-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}

.cat-ficha{position:relative;display:grid;grid-template-rows:auto 1fr auto;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(19,50,29,.65),rgba(7,25,14,.65));transition:transform .5s var(--ease),border-color .35s,box-shadow .5s}
.cat-ficha__img{position:relative;display:block;aspect-ratio:4/4.3;overflow:hidden;background:radial-gradient(70% 60% at 50% 45%,rgba(30,74,42,.9),rgba(7,25,14,1))}
.cat-ficha__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cat-ficha__img--ilustracion img{object-fit:contain;padding:8% 6% 0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.cat-ficha__img svg{max-width:none;position:absolute;left:-20%;top:50%;width:140%;height:auto;color:var(--gold);opacity:.75;transform:translateY(-50%) rotate(-24deg)}
.cat-ficha__rotulo{position:absolute;right:12px;bottom:10px;font:italic 500 1rem/1 var(--f-serif);color:rgba(241,192,76,.85)}
.cat-ficha__txt{display:grid;align-content:start;gap:4px;padding:14px 16px 8px}
.cat .cat-ficha__nombre{font:600 1.55rem/1.05 var(--f-serif);color:var(--cream)}
.cat-ficha__cient{font:italic 500 1.08rem/1.2 var(--f-serif);color:var(--gold-text)}
.cat-ficha__cient--sub{font-style:normal;font-family:var(--f-ui);font-size:.88rem;font-weight:500}
.cat-ficha__resumen{display:none;margin:4px 0 0;font-size:.95rem;line-height:1.45;color:var(--text)}
.cat-ficha__pie{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 16px 16px}
.cat-origen{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:3px 11px 3px 9px;border:1px solid var(--line);border-radius:999px;font-size:.8rem;font-weight:600;line-height:1;color:var(--cream);white-space:nowrap}
.cat-origen::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--nativa)}
.cat-origen--introducida::before{background:var(--introducida)}
.cat-origen--domestica::before{background:var(--domestica)}
.cat-ficha__ir{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-left:auto;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold);transition:background-color .3s,color .3s}
.cat-ficha__ir svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:translate .4s var(--ease)}
.cat-ficha:active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){
  .cat-ficha:hover{transform:translateY(-4px);border-color:rgba(240,197,77,.62);box-shadow:0 22px 44px -26px rgba(0,0,0,.95)}
  .cat-ficha:hover .cat-ficha__img img{transform:scale(1.05)}
  .cat-ficha:hover .cat-ficha__ir{background:var(--gold);color:var(--ink)}
  .cat-ficha:hover .cat-ficha__ir svg{translate:2px 0}
}

/* Vista en lista: una fila por especie, con miniatura y resumen */
.cat-cuerpo[data-vista="lista"] .cat-grilla{grid-template-columns:1fr;gap:8px}
.cat-cuerpo[data-vista="lista"] .cat-ficha{grid-template-columns:88px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;column-gap:18px;padding:8px 16px 8px 8px}
.cat-cuerpo[data-vista="lista"] .cat-ficha__img{aspect-ratio:1;border-radius:10px}
.cat-cuerpo[data-vista="lista"] .cat-ficha__img svg{width:220%;left:-60%}
.cat-cuerpo[data-vista="lista"] .cat-ficha__rotulo{display:none}
.cat-cuerpo[data-vista="lista"] .cat-ficha__txt{grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px;padding:4px 0}
.cat-cuerpo[data-vista="lista"] .cat-ficha__resumen{display:block;grid-column:1/-1}
.cat-cuerpo[data-vista="lista"] .cat-ficha__pie{padding:0;gap:16px}
@media(hover:hover) and (pointer:fine){.cat-cuerpo[data-vista="lista"] .cat-ficha:hover{transform:translateX(4px)}}

.cat-vacio{margin:10px 0 0;padding:40px 24px;border:1px dashed var(--line-2);border-radius:14px;text-align:center;font-size:1.05rem;color:var(--text)}
.cat-vacio[hidden]{display:none}
.cat-vacio button{margin-left:6px;padding:0;border:0;background:none;color:var(--gold-text);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Cierre: Exploradores ---------- */
.cat-cierre{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 28px;margin-top:70px;padding:26px 28px;border:1px solid rgba(240,197,77,.45);border-radius:14px;
  background:linear-gradient(90deg,rgba(6,22,12,.25),rgba(8,27,15,.8) 55%)}
.cat-cierre__foto{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--gold)}
.cat .cat-cierre h2{font:500 clamp(1.7rem,2.4vw,2.1rem)/1.05 var(--f-serif);color:var(--cream)}
.cat-cierre p{margin:6px 0 0;font-size:1rem;line-height:1.55;color:var(--text);max-width:52ch}
.cat-cierre__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.cat-cierre__acciones .btn{white-space:nowrap}
.cat-cierre__link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-text)!important;font-weight:600;text-decoration:underline!important;text-underline-offset:4px}

/* ---------- Movimiento ---------- */
@media(prefers-reduced-motion:no-preference){
  .cat-cab .container>*{animation:catSube .8s var(--ease) both}
  .cat-cab .container>*:nth-child(2){animation-delay:.08s}
  .cat-entra{animation:catSube .5s var(--ease) calc(var(--i,0) * 35ms) backwards}
}
@keyframes catSube{from{opacity:0;translate:0 18px}}

/* ---------- Tablet y celular ---------- */
@media(max-width:1100px){.cat-barra{top:92px}}
@media(max-width:900px){
  .cat-cab__grid{grid-template-columns:1fr}
  .cat-cuentas div:first-child{padding-left:0}
  .cat-barra__caja{flex-wrap:wrap}
  .cat-menu{flex-basis:100%;order:-1}
  .cat-buscar{flex:1 1 0;min-width:0}
  .cat-cierre{grid-template-columns:auto minmax(0,1fr)}
  .cat-cierre__acciones{grid-column:1/-1}
}
@media(max-width:760px){
  .cat-cab{padding:104px 0 24px}
  .cat-lead{font-size:1rem}
  .cat-cuentas dd{font-size:1.7rem}
  .cat-cuentas div{padding:2px 14px}
  .cat-barra{top:78px;padding:10px 0}
  .cat-barra .container{width:100%;padding-inline:12px}
  .cat-menu button{font-size:.92rem}
  .cat-menu{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:28px}
  .cat-grilla{grid-template-columns:1fr 1fr;gap:12px}
  .cat-ficha__txt{padding:10px 12px 6px}
  .cat .cat-ficha__nombre{font-size:1.28rem}
  .cat-ficha__cient{font-size:.98rem}
  .cat-ficha__pie{padding:4px 12px 12px}
  .cat-ficha__ir{width:32px;height:32px}
  .cat-origen{font-size:.74rem;padding-inline:8px 9px}
  .cat-cuerpo[data-vista="lista"] .cat-ficha{grid-template-columns:68px minmax(0,1fr);column-gap:12px}
  .cat-cuerpo[data-vista="lista"] .cat-ficha__txt{grid-template-columns:1fr}
  .cat-cuerpo[data-vista="lista"] .cat-ficha__resumen{font-size:.88rem}
  .cat-cuerpo[data-vista="lista"] .cat-ficha__pie{grid-column:2;padding-bottom:4px}
  .cat-cuerpo[data-vista="lista"] .cat-ficha__ir{display:none}
  .cat-cierre{grid-template-columns:1fr;padding:22px 20px}
  .cat-cierre__foto{width:68px;height:68px}
}

/* Ampliación regional de Luján: controles combinables, con el mismo catálogo. */
.cat-alcance{max-width:67ch;margin:12px 0 0;font-size:.9rem;line-height:1.6;color:var(--muted)}
.cat-alcance strong{font-weight:500;color:var(--gold-text)}
.cat-barra__caja{flex-wrap:wrap;gap:12px}
.cat-menu{flex:1 1 100%;order:-1}
.cat-buscar{flex:1 1 260px}
.cat-selector{display:grid;gap:3px;flex:0 1 240px;min-width:0;color:var(--muted);font-size:12px}
.cat-selector select{width:100%;min-height:44px;padding:8px 30px 8px 12px;border:1px solid var(--line-2);border-radius:10px;background:#102d1b;color:var(--cream);font:400 14px/1.2 var(--f-ui);color-scheme:dark;cursor:pointer}
.cat-selector select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cat-vista button{width:44px;height:44px}
.cat-resultados{margin:0 0 24px;color:var(--muted);font-size:.9rem}
.cat-presencia{margin-top:5px;color:#a9d9ad;font-size:11px;line-height:1.5}
.cat-origen{white-space:normal;line-height:1.3;max-width:100%}
.cat-origen::before{flex:none}
.cat-origen--cultivada::before{background:var(--domestica)}
.cat-ficha__pie{align-items:flex-end}
.cat-ficha__ir{flex:none}
@media(max-width:760px){
  .cat-barra__caja{gap:8px}
  .cat-buscar{flex:1 1 calc(100% - 108px)}
  .cat-vista{order:0}
  .cat-selector{flex:1 1 calc(50% - 8px);order:1}
  .cat-selector select{font-size:16px}
  .cat-alcance{font-size:.86rem}
  .cat-ficha__pie{flex-wrap:wrap;gap:8px}
  .cat-presencia{font-size:10.5px}
  .cat .cat-ficha__nombre{overflow-wrap:anywhere}
}
.cat-ficha__img--recorte{background:radial-gradient(ellipse at 50% 60%,rgba(53,91,48,.3),transparent 75%)}
.cat-ficha__img--recorte img{object-fit:contain;padding:10px}
.cat-ficha__img--alpha img{filter:url(../img/recorte-alpha.svg#limpiar)}