/* =========================================================
   PERROPEDIA · Hoja de estilos
   ========================================================= */

:root{
  --bg:#f6f4ef;
  --bg-2:#fffdf9;
  --surface:#ffffff;
  --surface-2:#f1ede4;
  --txt:#1d1a16;
  --txt-2:#6b6358;
  --line:rgba(29,26,22,.10);
  --brand:#e8722b;
  --brand-2:#f0a03c;
  --brand-soft:rgba(232,114,43,.12);
  --accent:#2f7d76;
  --accent-soft:rgba(47,125,118,.12);
  --danger:#c94f3d;
  --shadow-s:0 2px 8px rgba(40,30,15,.06);
  --shadow-m:0 10px 30px rgba(40,30,15,.10);
  --shadow-l:0 30px 70px rgba(40,30,15,.18);
  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:38px;
  --head:"Fraunces","Georgia",serif;
  --body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --nav-h:68px;
  --ease:cubic-bezier(.22,1,.36,1);
}html[data-theme="dark"]{
  --bg:#12100e;
  --bg-2:#1a1714;
  --surface:#1e1a17;
  --surface-2:#26211d;
  --txt:#f4efe7;
  --txt-2:#a79c8e;
  --line:rgba(244,239,231,.12);
  --brand:#ff8b42;
  --brand-2:#ffb463;
  --brand-soft:rgba(255,139,66,.16);
  --accent:#4fb3a8;
  --accent-soft:rgba(79,179,168,.16);
  --shadow-s:0 2px 8px rgba(0,0,0,.4);
  --shadow-m:0 10px 30px rgba(0,0,0,.45);
  --shadow-l:0 30px 70px rgba(0,0,0,.6);
}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}body.no-scroll{overflow:hidden}img{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit}h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.14;margin:0;letter-spacing:-.02em}::selection{background:var(--brand);color:#fff}/* ---------- utilidades ---------- */
.wrap{width:min(1280px,92vw);margin-inline:auto}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip{position:fixed;left:12px;top:-100px;z-index:999;background:var(--brand);color:#fff;
  padding:10px 18px;border-radius:0 0 12px 12px;transition:top .25s}.skip:focus{top:0}:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}/* ---------- barra de progreso ---------- */
#progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent));
  box-shadow:0 0 14px var(--brand)}/* ---------- navegación ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 95%,transparent);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s;
}.nav.solid{border-bottom-color:var(--line);box-shadow:var(--shadow-s)}.nav .wrap{display:flex;align-items:center;gap:14px;width:min(1400px,94vw)}.logo{display:flex;align-items:center;gap:10px;font-family:var(--head);font-size:1.25rem;font-weight:800;letter-spacing:-.03em}.logo .paw{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow-s);
  animation:wag 4s var(--ease) infinite}@keyframes wag{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-12deg)}96%{transform:rotate(12deg)}}.logo span b{color:var(--brand)}.nav-links{display:flex;gap:4px;margin-left:auto}.nav-links a{padding:9px 14px;border-radius:99px;font-size:.92rem;font-weight:600;color:var(--txt-2);
  text-decoration:none;transition:.25s var(--ease)}.nav-links a:hover{background:var(--brand-soft);color:var(--brand)}.icon-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;
  background:var(--surface-2);color:var(--txt);transition:.25s var(--ease);position:relative}.icon-btn:hover{background:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-m)}.icon-btn .dot{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--brand);color:#fff;font-size:.68rem;font-weight:800;display:none;place-items:center;
  border:2px solid var(--bg)}.icon-btn .dot.on{display:grid;animation:pop .35s var(--ease)}@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.35)}100%{transform:scale(1)}}.burger{display:none}/* ---------- mega menú de razas (solo PC) ---------- */
.mega-wrap{position:relative}.nav-links .mega-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:99px;
  font-size:.92rem;font-weight:600;color:var(--txt-2);transition:.25s var(--ease)}.nav-links .mega-btn:hover,.nav-links .mega-btn[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand)}.mega-btn svg{transition:rotate .3s var(--ease)}.mega-btn[aria-expanded="true"] svg{rotate:180deg}.mega.on{display:block;animation:megaIn .26s var(--ease)}@keyframes megaIn{from{opacity:0;translate:0 -12px}}@media(max-width:1500px){.mega-cols{columns:4}}@media(max-width:1180px){.mega-cols{columns:3}}.mega-grp > b i{font-style:normal;font-size:.68rem;color:var(--txt-2);letter-spacing:0;font-weight:600}.mega-item:hover,.mega-item:focus-visible{background:var(--brand-soft);color:var(--brand);translate:3px 0}.mega-item img.loaded{opacity:1}.mega-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mega-empty{padding:26px;text-align:center;color:var(--txt-2);font-size:.9rem}.nav-links .solo-movil{display:none}@media(max-width:1000px){
  .mega,.nav-links .mega-btn{display:none!important}
  .nav-links .solo-movil{display:block}
}/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:calc(var(--nav-h) + 40px) 0 70px;overflow:hidden;color:#fff;background:#14110e}/* ---- carrusel de fotos de fondo ---- */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}.hero-slides .sl{position:absolute;inset:0;opacity:0;
  transition:opacity 1.5s var(--ease);will-change:opacity}.hero-slides .sl.on{opacity:1}.hero-slides .sl img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  /* nitidez: nada de blur ni de escalado borroso */
  image-rendering:auto;transform:scale(1.03)}.hero-slides .sl.on img{animation:kb 11s linear forwards}@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.11)}}/* velo: suficiente para leer, ligero en el centro para que la foto se vea nítida */
/* Dos capas: un degradado general y un foco más oscuro justo detrás del texto,
   para que se lea también sobre fotos muy claras (nieve, playa, cielo). */
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(52% 40% at 50% 44%,rgba(10,7,4,.74),rgba(10,7,4,.34) 62%,transparent 80%),
    linear-gradient(to bottom,rgba(10,7,4,.78) 0%,rgba(10,7,4,.44) 24%,rgba(10,7,4,.40) 56%,rgba(10,7,4,.86) 100%)}.hero-bg{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;opacity:.18;
  background:
    radial-gradient(60% 55% at 15% 12%,var(--brand),transparent 62%),
    radial-gradient(55% 50% at 85% 20%,var(--accent),transparent 60%);
  animation:drift 22s ease-in-out infinite alternate}@keyframes drift{to{transform:scale(1.18) translateY(-3%)}}#paws{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5}.hero .wrap{position:relative;z-index:4}.hero-cred a{color:inherit;text-decoration:underline;text-underline-offset:2px}.hero-cred a:hover{color:#fff}.hero-dots{position:absolute;left:50%;translate:-50% 0;bottom:64px;z-index:5;display:flex;gap:7px}.hero-dots button{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.35);
  transition:.3s var(--ease)}.hero-dots button.on{background:#fff;width:24px}.hero-dots button:hover{background:rgba(255,255,255,.75)}.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  font-size:.85rem;font-weight:700;letter-spacing:.02em;margin-bottom:26px}.pill i{width:8px;height:8px;border-radius:99px;background:#3ec16a;box-shadow:0 0 0 0 rgba(62,193,106,.7);
  animation:ping 2s infinite}@keyframes ping{70%{box-shadow:0 0 0 10px rgba(62,193,106,0)}100%{box-shadow:0 0 0 0 rgba(62,193,106,0)}}.hero .chips-quick button:hover{background:var(--brand);border-color:var(--brand)}.hero .rot{color:var(--brand-2)}.hero .rot::after{background:var(--brand-2)}@keyframes flow{to{background-position:220% center}}.rot{display:inline-block;position:relative;color:var(--brand);font-weight:800}.rot::after{content:"";position:absolute;right:-4px;top:8%;height:84%;width:2px;background:var(--brand);
  animation:caret .9s steps(1) infinite}@keyframes caret{50%{opacity:0}}/* buscador */
.search-box{position:relative;max-width:660px;margin:0 auto 22px}.search-box .field{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:8px 8px 8px 22px;box-shadow:var(--shadow-m);
  transition:.3s var(--ease)}.search-box .field:focus-within{box-shadow:var(--shadow-l),0 0 0 4px var(--brand-soft);transform:translateY(-2px)}.search-box input{flex:1;border:0;background:none;font-size:1.02rem;padding:12px 0;color:var(--txt);outline:none;min-width:0}.search-box input::placeholder{color:var(--txt-2)}.btn-go{width:46px;height:46px;border-radius:99px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;transition:.25s var(--ease)}.btn-go:hover{transform:scale(1.08) rotate(-6deg)}.suggest{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);overflow:hidden;
  z-index:40;display:none;text-align:left;max-height:56vh;overflow-y:auto}.suggest.on{display:block;animation:fadeUp .22s var(--ease)}.suggest button{display:flex;gap:13px;align-items:center;width:100%;padding:10px 16px;text-align:left;
  transition:background .18s}.suggest button:hover,.suggest button.sel{background:var(--brand-soft)}.suggest img{width:44px;height:44px;border-radius:12px;object-fit:contain;flex:none;background:var(--surface-2)}.suggest .sn{font-weight:700;font-size:.95rem}.suggest .sm{font-size:.78rem;color:var(--txt-2)}.chips-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:34px}.chips-quick button:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-2px)}.stats{display:flex;gap:clamp(20px,5vw,64px);justify-content:center;flex-wrap:wrap}.stat b{display:block;font-family:var(--head);font-size:clamp(1.8rem,4.5vw,2.7rem);color:var(--brand);line-height:1}.stat span{font-size:.8rem;color:var(--txt-2);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.scroll-hint{position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:2;color:var(--txt-2);
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(9px)}}/* ---------- secciones ---------- */
section{padding:clamp(56px,8vw,104px) 0;position:relative}.sec-head{text-align:center;max-width:680px;margin:0 auto clamp(30px,5vw,54px)}.sec-head .kicker{font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);
  display:block;margin-bottom:10px}.sec-head h2{font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:12px}.sec-head p{color:var(--txt-2);margin:0}/* ---------- filtros ---------- */
.toolbar{position:sticky;top:var(--nav-h);z-index:60;padding:12px 0;margin-bottom:26px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}.toolbar.stuck{border-bottom-color:var(--line)}.toolbar-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mini-search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:8px 16px}.mini-search input{flex:1;border:0;background:none;outline:none;color:var(--txt);font-size:.94rem;min-width:0}.sel{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:10px 16px;
  font-size:.88rem;font-weight:600;color:var(--txt);cursor:pointer;transition:.25s}.sel:hover{border-color:var(--brand)}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;font-size:.88rem;
  font-weight:700;transition:.25s var(--ease);white-space:nowrap}.btn-primary{background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow-s)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--txt)}.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}.btn-ghost.on{background:var(--brand);color:#fff;border-color:var(--brand)}.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:20px;
  margin-top:12px;box-shadow:var(--shadow-s);overflow:hidden;
  max-height:0;padding-block:0;border-width:0;margin-top:0;opacity:0;
  transition:max-height .45s var(--ease),opacity .3s,padding .35s,margin .35s}.filters.open{max-height:760px;padding-block:20px;border-width:1px;margin-top:12px;opacity:1}.fgroup > b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);margin-bottom:9px}.chips{display:flex;flex-wrap:wrap;gap:7px}.chip{padding:6px 13px;border-radius:99px;border:1px solid var(--line);background:var(--bg-2);
  font-size:.81rem;font-weight:600;color:var(--txt-2);transition:.22s var(--ease)}.chip:hover{border-color:var(--brand);color:var(--brand)}.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px var(--brand-soft)}.range-row{display:flex;align-items:center;gap:10px}input[type=range]{flex:1;accent-color:var(--brand)}.range-row output{font-size:.8rem;font-weight:700;color:var(--brand);min-width:18px}.count-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:18px 0 14px;font-size:.88rem;color:var(--txt-2)}.count-bar b{color:var(--txt)}.active-tags{display:flex;gap:6px;flex-wrap:wrap}.active-tags span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  background:var(--brand-soft);color:var(--brand);font-size:.76rem;font-weight:700;cursor:pointer}/* ---------- grid de razas ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:22px}.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-s);cursor:pointer;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
  transform-style:preserve-3d;will-change:transform;
  opacity:0;translate:0 26px;animation:in .5s var(--ease) forwards}@keyframes in{to{opacity:1;translate:0 0}}.card:hover{box-shadow:var(--shadow-l);border-color:transparent}.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}.card-img::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  translate:-100% 0;animation:shine 1.6s infinite}.card-img.loaded::before{display:none}@keyframes shine{to{translate:100% 0}}/* Relleno desenfocado detrás: la foto nunca se recorta, el perro sale completo
   y aun así la tarjeta queda llena, sin franjas vacías. */
.card-img .fill{position:absolute;inset:-10%;z-index:0;background-position:center;
  background-size:cover;filter:blur(16px) saturate(1.35) brightness(.92);opacity:0;
  transition:opacity .6s var(--ease)}.card-img .fill.loaded{opacity:.9}.card-img img{position:relative;z-index:1;width:100%;height:100%;
  object-fit:contain;object-position:center;
  transition:transform .8s var(--ease);opacity:0}.card-img img.loaded{opacity:1;transition:opacity .5s,transform .8s var(--ease)}.card:hover .card-img img{transform:scale(1.06)}.card-img .shade{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(10,8,5,.78) 0%,rgba(10,8,5,.18) 42%,transparent 70%)}.card-top{position:absolute;top:12px;left:12px;right:12px;z-index:4;display:flex;justify-content:space-between;gap:8px}.badge{padding:5px 11px;border-radius:99px;font-size:.7rem;font-weight:800;letter-spacing:.04em;
  background:rgba(255,255,255,.92);color:#1d1a16;backdrop-filter:blur(6px);box-shadow:var(--shadow-s)}.card-acts{display:flex;gap:6px;opacity:0;translate:0 -8px;transition:.3s var(--ease)}.card:hover .card-acts,.card:focus-within .card-acts{opacity:1;translate:0 0}.mini{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.92);
  color:#1d1a16;transition:.22s;backdrop-filter:blur(6px)}.mini:hover{background:var(--brand);color:#fff;transform:scale(1.12)}.mini.on{background:var(--brand);color:#fff}.mini.fav.on{background:var(--danger);color:#fff}.card-body{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:16px 18px;color:#fff}.card-body h3{font-size:1.15rem;margin-bottom:3px;text-shadow:0 2px 10px rgba(0,0,0,.4)}.card-body .sub{font-size:.78rem;opacity:.86;display:flex;gap:7px;flex-wrap:wrap}.card-foot{padding:13px 18px 16px;display:flex;gap:7px;flex-wrap:wrap}.tag{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--surface-2);color:var(--txt-2)}.card .peek{position:absolute;inset:auto 0 0 0;z-index:5;background:var(--surface);padding:14px 18px;
  translate:0 100%;transition:translate .4s var(--ease);border-top:1px solid var(--line)}.card:hover .peek{translate:0 0}.peek .mini-bars{display:grid;gap:6px}.mini-bar{display:grid;grid-template-columns:78px 1fr;gap:9px;align-items:center;font-size:.72rem;color:var(--txt-2)}.mini-bar i{height:5px;border-radius:99px;background:var(--surface-2);display:block;position:relative;overflow:hidden}.mini-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))}.empty{text-align:center;padding:70px 20px;color:var(--txt-2)}.empty .em{font-size:3.4rem;display:block;margin-bottom:10px;animation:bob 2.4s ease-in-out infinite}.more-wrap{text-align:center;margin-top:36px}/* ---------- modal ficha ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none}.modal.on{display:block}.modal .veil{position:absolute;inset:0;background:rgba(15,11,7,.62);backdrop-filter:blur(7px);
  animation:fade .3s var(--ease)}@keyframes fade{from{opacity:0}}@keyframes fadeUp{from{opacity:0;translate:0 10px}}/* Ficha a pantalla completa: ocupa el hueco exacto de la ventana y
   NUNCA hace scroll de página. Lo que se mueve es, como mucho, el panel
   de texto de la pestaña activa. */
.sheet{position:absolute;inset:0;width:100%;height:100dvh;background:var(--bg);
  border-radius:0;overflow:hidden;overscroll-behavior:contain;
  box-shadow:none;animation:up .35s var(--ease);
  display:grid;grid-template-rows:1fr}@keyframes up{from{opacity:0;scale:.99}}.sheet-close{position:sticky;top:0;z-index:12;display:flex;justify-content:flex-end;padding:12px;
  margin-bottom:-58px;pointer-events:none}.sheet-close button{pointer-events:auto;width:40px;height:40px;border-radius:99px;background:rgba(255,255,255,.94);
  color:#1d1a16;display:grid;place-items:center;box-shadow:var(--shadow-m);transition:.22s}.sheet-close button:hover{transform:rotate(90deg) scale(1.08);background:var(--danger);color:#fff}.hero-shot{position:relative;height:clamp(230px,36vh,380px);overflow:hidden;background:var(--surface-2)}.hero-shot .fill{position:absolute;inset:-10%;background-position:center;background-size:cover;
  filter:blur(22px) saturate(1.3) brightness(.9)}.hero-shot img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}.hero-shot .title h2{font-size:clamp(1.7rem,4.6vw,2.7rem);text-shadow:0 3px 16px rgba(0,0,0,.5)}.gal{display:flex;gap:9px;padding:14px clamp(18px,4vw,38px) 0;overflow-x:auto;scrollbar-width:thin}.gal img{width:92px;height:68px;object-fit:contain;background:var(--surface-2);
  border-radius:12px;flex:none;cursor:pointer;
  border:2px solid transparent;transition:.25s var(--ease);opacity:.62}.gal img:hover,.gal img.on{opacity:1;border-color:var(--brand);transform:translateY(-3px)}.sheet-body{padding:20px clamp(18px,4vw,38px) 48px}.quickbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}.tabs button{padding:11px 16px;font-size:.9rem;font-weight:700;color:var(--txt-2);position:relative;
  white-space:nowrap;transition:color .25s}.tabs button.on{color:var(--brand)}.tabs button::after{content:"";position:absolute;inset:auto 12px -1px 12px;height:3px;border-radius:9px;
  background:var(--brand);scale:0 1;transition:scale .3s var(--ease)}.tabs button.on::after{scale:1 1}.pane{display:none;animation:fadeUp .3s var(--ease)}.pane.on{display:block}.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px}.fact b{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);margin-bottom:4px}.fact span{font-weight:700;font-size:.97rem}.prose{max-width:74ch;color:var(--txt-2);margin-bottom:26px}.prose h4{color:var(--txt);font-size:1.12rem;margin:22px 0 8px}.bars{display:grid;gap:13px;margin-bottom:8px}.bar b{font-size:.84rem;font-weight:700;display:flex;justify-content:space-between;margin-bottom:5px}.bar b em{font-style:normal;color:var(--brand);font-size:.78rem}.bar .track{height:9px;border-radius:99px;background:var(--surface-2);overflow:hidden}.dots{display:flex;gap:4px}.dots i{width:9px;height:9px;border-radius:99px;background:var(--surface-2)}.dots i.on{background:var(--brand)}.care-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:24px}.care{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;
  transition:.3s var(--ease)}.care:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--brand)}.care .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;margin-bottom:10px;
  background:var(--brand-soft);color:var(--brand);font-size:1.2rem}.care h4{font-size:1rem;margin-bottom:5px}.care p{margin:0;font-size:.88rem;color:var(--txt-2)}.curios{display:grid;gap:11px;counter-reset:c}.curio{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:15px 18px;transition:.3s var(--ease)}.curio:hover{transform:translateX(6px);border-color:var(--brand)}.curio::before{counter-increment:c;content:counter(c);flex:none;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;font-family:var(--head);font-weight:800;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;font-size:.88rem}.curio p{margin:0;font-size:.92rem}.warn{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--r-m);padding:15px 18px;font-size:.88rem;color:var(--txt-2)}.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:10px}.rel{border-radius:var(--r-m);overflow:hidden;background:var(--surface);border:1px solid var(--line);
  cursor:pointer;transition:.3s var(--ease)}.rel:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}.rel img{aspect-ratio:1;object-fit:contain;background:var(--surface-2);width:100%}.rel span{display:block;padding:9px 11px;font-size:.82rem;font-weight:700}/* ---------- comparador ---------- */
.cmp-tray{position:fixed;inset:auto 0 0 0;z-index:90;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -12px 34px rgba(40,30,15,.14);padding:12px 0;translate:0 130%;transition:translate .45s var(--ease)}.cmp-tray.on{translate:0 0}.cmp-tray .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cmp-slots{display:flex;gap:9px;flex:1;flex-wrap:wrap}.slot{display:flex;align-items:center;gap:9px;background:var(--bg-2);border:1px dashed var(--line);
  border-radius:var(--r-m);padding:6px 12px 6px 6px;font-size:.85rem;font-weight:700}.slot img{width:36px;height:36px;border-radius:10px;object-fit:contain;background:var(--surface-2)}.slot button{color:var(--txt-2);display:grid;place-items:center}.slot button:hover{color:var(--danger)}.slot.empty{color:var(--txt-2);font-weight:600;padding:14px 18px;font-size:.8rem}.cmp-table{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-s)}table.cmp{border-collapse:collapse;width:100%;min-width:640px}table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}table.cmp thead th{position:sticky;top:0;background:var(--surface);z-index:2}table.cmp th.rowh{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);font-weight:700;width:170px}table.cmp .thumb{width:100%;max-width:140px;aspect-ratio:4/3;object-fit:contain;background:var(--surface-2);border-radius:14px;margin-bottom:8px}table.cmp tr:hover td{background:var(--brand-soft)}.best{color:var(--brand);font-weight:800}.radar-wrap{display:grid;place-items:center;padding:22px}/* ---------- quiz ---------- */
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-m);padding:clamp(22px,4vw,44px);max-width:820px;margin-inline:auto;position:relative;
  overflow:hidden}.quiz::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent))}.q-prog{height:6px;border-radius:99px;background:var(--surface-2);margin-bottom:26px;overflow:hidden}.q-prog i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .5s var(--ease)}.q-step{display:none}.q-step.on{display:block;animation:fadeUp .35s var(--ease)}.q-step h3{font-size:clamp(1.3rem,3.2vw,1.8rem);margin-bottom:6px}.q-step > p{color:var(--txt-2);margin:0 0 22px}.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.opt{background:var(--bg-2);border:2px solid var(--line);border-radius:var(--r-m);padding:18px 16px;
  text-align:left;transition:.25s var(--ease)}.opt:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-m)}.opt.on{border-color:var(--brand);background:var(--brand-soft)}.opt .oe{font-size:1.5rem;display:block;margin-bottom:6px}.opt b{display:block;font-size:.95rem}.opt span{font-size:.79rem;color:var(--txt-2)}.q-nav{display:flex;justify-content:space-between;gap:10px;margin-top:26px}.q-res{display:none}.q-res.on{display:block;animation:fadeUp .4s var(--ease)}.podium{display:grid;gap:14px;margin:22px 0}.pod{display:flex;gap:16px;align-items:center;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:13px;cursor:pointer;transition:.3s var(--ease)}.pod:hover{transform:translateX(6px);border-color:var(--brand);box-shadow:var(--shadow-m)}.pod img{width:82px;height:82px;border-radius:16px;object-fit:contain;background:var(--surface-2);flex:none}.pod .rank{font-family:var(--head);font-size:1.5rem;color:var(--brand);font-weight:800;width:32px;flex:none;text-align:center}.pod h4{font-size:1.08rem;margin-bottom:2px}.pod .match{font-size:.8rem;color:var(--txt-2)}.pod .mb{height:6px;border-radius:99px;background:var(--surface-2);margin-top:6px;overflow:hidden;max-width:230px}.pod .mb i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:99px;
  transition:width .9s var(--ease)}/* ---------- guía / bloques informativos ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.info{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;
  transition:.4s var(--ease);position:relative;overflow:hidden}.info::after{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;
  background:var(--brand-soft);transition:.6s var(--ease)}.info:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:transparent}.info:hover::after{transform:scale(1.6)}.info .ic{position:relative;z-index:2;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  font-size:1.4rem;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;margin-bottom:14px}.info h3{position:relative;z-index:2;font-size:1.12rem;margin-bottom:8px}.info p{position:relative;z-index:2;margin:0;color:var(--txt-2);font-size:.92rem}/* revelado al hacer scroll */
.rv{opacity:0;translate:0 28px;transition:opacity .7s var(--ease),translate .7s var(--ease)}.rv.seen{opacity:1;translate:0 0}/* ---------- pie ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);padding:52px 0 28px;margin-top:20px}.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px}.foot-grid h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);margin-bottom:12px}.foot-grid a{display:block;padding:4px 0;font-size:.9rem;color:var(--txt-2);text-decoration:none;transition:.2s}.foot-grid a:hover{color:var(--brand);transform:translateX(4px)}.foot-bot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:.83rem;color:var(--txt-2)}/* ---------- toast + arriba ---------- */
#toast{position:fixed;left:50%;bottom:26px;translate:-50% 130px;z-index:300;background:var(--txt);color:var(--bg);
  padding:12px 22px;border-radius:99px;font-size:.88rem;font-weight:700;box-shadow:var(--shadow-l);
  transition:translate .45s var(--ease);max-width:90vw;text-align:center}#toast.on{translate:-50% 0}#top{position:fixed;right:20px;bottom:20px;z-index:80;width:46px;height:46px;border-radius:99px;
  background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-m);
  opacity:0;pointer-events:none;transition:.35s var(--ease)}#top.on{opacity:1;pointer-events:auto}#top:hover{transform:translateY(-4px) scale(1.08)}/* ---------- responsive ---------- */
@media(max-width:860px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;background:var(--bg);
    padding:14px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-m);
    translate:0 -130%;transition:translate .4s var(--ease);margin-left:0}
  .nav-links.open{translate:0 0}
  .nav-links a{padding:13px 16px}
  .burger{display:grid}
  .nav .wrap{gap:8px}
  .nav .spacer{margin-left:auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .card-body h3{font-size:.98rem}
  .peek{display:none}
  .cmp-tray .wrap{flex-direction:column;align-items:stretch}
}@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}@media print{.nav,.toolbar,.cmp-tray,#top,#toast,.scroll-hint{display:none!important}}/* =========================================================
   BRILLO DEL TEXTO SOBRE LAS FOTOS DE PORTADA
   Va al final a propósito: sobrescribe las reglas base del hero.
   ========================================================= */
/* el hero va siempre sobre foto: texto claro y luminoso en ambos temas.
   La sombra oscura mantiene el contraste; el halo claro da el brillo. */
.hero .stat span,.hero .scroll-hint{color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8)}.hero p.lead{max-width:640px;margin:0 auto 34px;font-size:clamp(1rem,2.2vw,1.22rem);color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.75),0 0 26px rgba(255,244,228,.35)}.hero h1{font-size:clamp(2.9rem,8vw,6.4rem);margin-bottom:18px;text-shadow:0 2px 6px rgba(0,0,0,.6),0 4px 34px rgba(0,0,0,.5),
  0 0 44px rgba(255,238,214,.34)}.hero .stat b{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.75),0 0 30px rgba(255,238,214,.4)}/* el degradado del título, casi blanco: el naranja original no leía sobre nieve o cielo */
/* Los topes, casi blancos: con background-size 220% la ventana visible se desplaza,
   así que cualquier tope apagado se nota como un bajón de brillo.
   text-shadow:none es IMPRESCINDIBLE. Esta línea usa background-clip:text con color
   transparente, y la sombra de texto heredada de .hero h1 se dibujaba con la forma
   de las letras por debajo del degradado, apagándolo a gris. El relieve lo da el
   filtro drop-shadow, que actúa sobre el resultado ya compuesto y no lo ensucia. */
.hero h1 .grad{background:linear-gradient(100deg,var(--brand),var(--brand-2) 40%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% auto;animation:flow 7s linear infinite;background-image:linear-gradient(100deg,#fff4e4,#ffffff 38%,#f2fffc 72%,#fff4e4);text-shadow:none;filter:drop-shadow(0 2px 7px rgba(0,0,0,.72)) drop-shadow(0 0 34px rgba(255,240,220,.6))}.hero .pill{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none;text-shadow:0 1px 4px rgba(0,0,0,.6)}.hero .chips-quick button{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 4px rgba(0,0,0,.55)}.hero-cred{position:absolute;right:14px;bottom:14px;z-index:5;max-width:min(46vw,380px);text-align:right;font-size:.7rem;line-height:1.4;color:rgba(255,255,255,.82);text-shadow:0 1px 5px rgba(0,0,0,.8)}.hero-cred b{display:block;font-weight:700;color:#fff;font-size:.76rem}/* ---------- adopción ---------- */
.adopta{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start}.adopta-txt,.adopta-links{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:26px;box-shadow:var(--shadow-s)}.adopta-txt h3{font-size:1.2rem;margin-bottom:14px}.adopta-txt ol{margin:0;padding-left:20px;display:grid;gap:11px;color:var(--txt-2);font-size:.94rem}.adopta-txt ol b{color:var(--txt)}.adopta-txt .nota{margin:18px 0 0;padding:13px 16px;border-radius:var(--r-m);
  background:var(--accent-soft);color:var(--txt-2);font-size:.88rem}.adopta-links h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:12px}.adopta-links a{display:block;padding:12px 14px;border-radius:var(--r-m);border:1px solid var(--line);
  text-decoration:none;margin-bottom:9px;transition:.25s var(--ease);background:var(--bg-2)}.adopta-links a:hover{border-color:var(--brand);transform:translateX(4px);box-shadow:var(--shadow-m)}.adopta-links a b{display:block;font-size:.95rem;margin-bottom:2px}.adopta-links a span{font-size:.82rem;color:var(--txt-2)}.adopta-links .aviso{margin:14px 0 0;font-size:.76rem;color:var(--txt-2);line-height:1.5}@media(max-width:860px){.adopta{grid-template-columns:1fr}}/* ---------- páginas individuales de raza ---------- */
.pag-raza main h2{font-family:var(--head);font-size:1.4rem}.pag-raza .hero-shot{height:clamp(220px,34vh,360px)}.pag-raza .rel{display:block;text-decoration:none}.pag-raza .logo .paw{font-size:1rem}/* ---------- guía de adopción por comunidades ---------- */
.guia-ad{margin-top:34px}.ga-head{margin-bottom:16px}.ga-head h3{font-size:1.25rem;margin-bottom:4px}.ga-head p{margin:0;color:var(--txt-2);font-size:.92rem}#adoptaCom{margin-bottom:18px}.ga-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px;box-shadow:var(--shadow-s);animation:fadeUp .3s var(--ease)}.ga-col h4{font-size:1rem;margin-bottom:4px}.ga-sub{margin:0 0 12px;color:var(--txt-2);font-size:.86rem}.ga-provs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.ga-provs a{padding:6px 13px;border-radius:99px;background:var(--bg-2);border:1px solid var(--line);
  font-size:.83rem;font-weight:600;text-decoration:none;transition:.22s var(--ease)}.ga-provs a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}.ga-todas{display:inline-block;font-size:.86rem;font-weight:700;color:var(--brand);text-decoration:none}.ga-todas:hover{text-decoration:underline}.ga-aviso{margin:18px 0 0;font-size:.8rem;color:var(--txt-2);text-align:center}.info h3 a{text-decoration:none}.info h3 a:hover{color:var(--brand)}@media(max-width:860px){.ga-panel{grid-template-columns:1fr}}/* =========================================================
   FICHA A PANTALLA COMPLETA (sustituye al panel con scroll)
   Dos columnas en PC: la foto manda a la izquierda, el contenido
   a la derecha. Sin scroll de página: solo el panel activo se
   desplaza, y únicamente si la ventana es muy baja.
   ========================================================= */
.ficha{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  height:100dvh;overflow:hidden}.ficha-foto .fill{position:absolute;inset:-8%;background-position:center;background-size:cover;
  filter:blur(34px) saturate(1.25) brightness(.5);z-index:0}.ficha-tira img:hover,.ficha-tira img.on{opacity:1;border-color:var(--brand);transform:translateY(-3px)}/* --- lado del contenido --- */
.ficha-info{display:grid;grid-template-rows:auto auto 1fr;min-height:0;min-width:0;
  background:var(--bg)}.ficha-acc{display:flex;gap:7px;flex-wrap:wrap;padding:18px 24px 12px;flex:none}.ficha-acc .btn{padding:8px 14px;font-size:.82rem}.ficha-paneles{min-height:0;overflow:hidden;position:relative}.ficha-pane{display:none;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 24px 26px;scrollbar-width:thin}.ficha-pane.on{display:block;animation:fadeUp .25s var(--ease)}.ficha-pane .facts{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-bottom:16px}.ficha-pane .fact{padding:11px 13px}.ficha-pane .fact span{font-size:.9rem}.ficha-pane .prose{margin-bottom:16px}.ficha-cerrar{position:absolute;top:14px;right:14px;z-index:20;width:42px;height:42px;
  border-radius:99px;background:rgba(255,255,255,.94);color:#1d1a16;display:grid;place-items:center;
  box-shadow:var(--shadow-m);transition:.22s}.ficha-cerrar:hover{transform:rotate(90deg) scale(1.08);background:var(--danger);color:#fff}/* En vertical (móvil y tablet) la foto va arriba y ocupa poco más de un tercio */
@media(max-width:900px), (orientation:portrait) and (max-width:1100px){
  .ficha{grid-template-columns:1fr;grid-template-rows:minmax(0,38dvh) minmax(0,1fr)}
  .ficha-titulo{bottom:70px;padding:0 16px}
  .ficha-marco{padding:12px}
  .ficha-tira img{width:58px;height:44px}
  .ficha-acc{padding:12px 16px 8px}
  .ficha-info .tabs{padding:0 16px}
  .ficha-pane{padding:14px 16px 22px}
}/* Ventanas muy bajas: se recorta la foto para dejar sitio al texto */
@media(max-height:560px) and (min-width:901px){
  .ficha-tira{display:none}
  .ficha-titulo{bottom:14px}
}/* Ficha compacta: que el panel entre sin scroll. El texto íntegro
   está en la página propia de cada raza. */
.ficha-pane .recorta{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin:0 0 6px}.ficha-pane .leer-mas{font-size:.85rem;font-weight:700;color:var(--brand);text-decoration:none}.ficha-pane .leer-mas:hover{text-decoration:underline}.ficha-pane .mini-titulo{font-family:var(--head);font-size:.95rem;margin:14px 0 8px}.related.fila{grid-template-columns:repeat(4,1fr);gap:8px}.related.fila .rel span{padding:6px 8px;font-size:.74rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}.ficha-pane .warn{font-size:.83rem;padding:12px 14px}.ficha-pane .curio{padding:11px 14px}.ficha-pane .curio p{font-size:.87rem}.ficha-pane .bars{gap:10px}/* Datos de la ficha en lista a dos columnas: misma información, un tercio de alto */
.ficha-pane .datos{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:0 0 12px}.ficha-pane .datos > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--line);min-width:0}.ficha-pane .datos dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2);font-weight:700;flex:none}.ficha-pane .datos dd{margin:0;font-size:.85rem;font-weight:600;text-align:right;
  overflow:hidden;text-overflow:ellipsis}.ficha-pane .nota-est{font-size:.74rem;color:var(--txt-2);margin:0 0 12px}@media(max-width:1200px){.ficha-pane .datos{grid-template-columns:1fr}}/* Cuidados: tres columnas y tarjetas más bajas, para que entren las seis sin scroll */
.ficha-pane .care-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:12px}.ficha-pane .care{padding:10px 11px}.ficha-pane .care .ic{width:26px;height:26px;font-size:.9rem;margin-bottom:5px;border-radius:8px}.ficha-pane .care h4{font-size:.85rem;margin-bottom:3px}.ficha-pane .care p{font-size:.78rem;line-height:1.45}.ficha-pane .care .dots{margin-top:4px}@media(max-width:1100px){.ficha-pane .care-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}/* El título de la tarjeta es un enlace real (SEO y abrir en pestaña nueva),
   pero visualmente se comporta como texto. */
.card-body h3 .card-link{color:inherit;text-decoration:none}.card-body h3 .card-link:hover{text-decoration:underline;text-underline-offset:3px}a.mega-item{text-decoration:none}.ficha-titulo .apod{font-size:.9rem;opacity:.92;font-style:italic;text-shadow:0 1px 6px rgba(0,0,0,.95);color:rgba(255,255,255,.92)}/* Las pestañas se cortaban por la derecha ("Curiosidades" quedaba a medias). */
.ficha-info .tabs{margin:0;padding:0 24px;flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.ficha-info .tabs::-webkit-scrollbar{display:none}.ficha-info .tabs button{padding:11px 12px;font-size:.86rem;flex:none}@media(max-width:1400px){.ficha-info .tabs button{padding:11px 10px;font-size:.82rem}}/* Galería de la página de raza: ahora es pulsable */
.pag-raza .gal img{cursor:pointer;opacity:.62;border:2px solid transparent;transition:.22s var(--ease)}.pag-raza .gal img:hover,.pag-raza .gal img.on{opacity:1;border-color:var(--brand);transform:translateY(-3px)}/* =========================================================
   CARÁCTER · barras
   El fallo: .fill era un <span> inline, y width/height no se
   aplican a elementos inline, así que la barra salía vacía.
   ========================================================= */
.bar .fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width 1s var(--ease);display:block}/* Rediseño: icono, etiqueta, barra y valor en una rejilla alineada */
.rasgos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 26px}.rasgo{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line)}.rasgo .ico{font-size:1rem;line-height:1;text-align:center;filter:grayscale(.15)}.rasgo .cuerpo{min-width:0}.rasgo .et{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}.rasgo .et b{font-size:.82rem;font-weight:600}.rasgo .et i{font-style:normal;font-size:.7rem;color:var(--txt-2)}.rasgo .pista{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;position:relative}.rasgo .nivel{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .9s var(--ease)}/* Rasgos en los que menos es mejor (ladrido, pelo, peluquería): otro color,
   para que se vea de un vistazo que una barra larga aquí no es buena noticia */
.rasgo.inverso .nivel{background:linear-gradient(90deg,var(--accent),#6fc9c0)}.rasgo .valor{font-family:var(--head);font-weight:800;font-size:.9rem;color:var(--brand);
  min-width:30px;text-align:right}.rasgo.inverso .valor{color:var(--accent)}.rasgos-leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.76rem;color:var(--txt-2)}.rasgos-leyenda span{display:inline-flex;align-items:center;gap:6px}.rasgos-leyenda i{width:16px;height:7px;border-radius:99px;display:inline-block}.rasgos-leyenda i.a{background:linear-gradient(90deg,var(--brand),var(--brand-2))}.rasgos-leyenda i.b{background:linear-gradient(90deg,var(--accent),#6fc9c0)}@media(max-width:1100px){.rasgos{grid-template-columns:1fr}}.ficha-pane .rasgos{gap:2px 20px}.ficha-pane .rasgo .et b{font-size:.78rem}/* La ficha rápida es más estrecha: rasgos aún más apretados para que entren los 12 */
.ficha-pane .rasgo{padding:2px 0}.ficha-pane .rasgo .et{margin-bottom:3px}.ficha-pane .rasgo .pista{height:6px}.ficha-pane .rasgos-leyenda{margin-top:8px;font-size:.72rem}.ficha-pane .quickbar{margin-bottom:10px}.ficha-pane .quickbar .tag{padding:5px 11px!important;font-size:.76rem!important}/* =========================================================
   Columna de la foto, reorganizada
   Antes: título y tira en posición absoluta, pegados al borde y
   encima de la foto. Y la imagen no escalaba (width:auto), así que
   una foto de 500px se quedaba diminuta en un hueco enorme.
   Ahora: tres filas, cada cosa con su sitio y su aire.
   ========================================================= */
.ficha-foto{position:relative;overflow:hidden;background:#15120f;display:grid;grid-template-rows:minmax(0,1fr) auto auto;min-height:0}/* Título y claim: ya no flotan sobre la foto, tienen su propia franja */
.ficha-titulo{position:static;z-index:1;left:0;right:0;bottom:auto;padding:16px 24px 12px;color:#fff;pointer-events:none;background:linear-gradient(to top,rgba(8,6,4,.9),rgba(8,6,4,.45))}.ficha-titulo h2{font-size:clamp(1.5rem,3.2vw,2.5rem);text-shadow:0 2px 10px rgba(0,0,0,.9);color:#fff;margin-bottom:2px}/* La tira ya no toca el borde inferior */
.ficha-tira{position:relative;z-index:1;display:flex;gap:9px;padding:16px 20px 20px;overflow-x:auto;scrollbar-width:thin;flex:none;background:rgba(8,6,4,.9)}.ficha-tira img{width:78px;height:58px;flex:none;object-fit:cover;border-radius:10px;cursor:pointer;opacity:.55;border:2px solid transparent;transition:.22s var(--ease)}@media(max-width:900px), (orientation:portrait) and (max-width:1100px){
  .ficha-marco{padding:12px 12px 4px}
  .ficha-titulo{padding:10px 16px 8px}
  .ficha-tira{padding:8px 16px 14px}
  .ficha-tira img{width:60px;height:46px}
}/* Ventanas muy bajas: la tira estorba más que ayuda */
@media(max-height:560px) and (min-width:901px){
  .ficha-tira{display:none}
}/* Corrección del encuadre de la foto grande.
   Con place-items:center la imagen se dimensionaba por su contenido, así que
   width/height:100% se resolvían contra una caja ya estirada y la foto acababa
   recortada (grave en fotos verticales). Con stretch, la imagen ocupa el hueco
   exacto del marco y object-fit:contain la mete entera, sin recortar ni deformar. */
.ficha-marco{position:relative;z-index:1;min-height:0;display:grid;place-items:stretch;padding:22px 22px 6px;min-width:0}.ficha-marco img{max-width:none;max-height:none;width:100%;height:100%;object-fit:contain;border-radius:var(--r-m);box-shadow:0 18px 60px rgba(0,0,0,.5);animation:fadeUp .4s var(--ease);min-width:0;min-height:0;object-position:center}/* ---------- páginas de adopción ---------- */
.ad-h1{font-size:clamp(1.8rem,4.4vw,2.6rem);margin-bottom:12px}.ad-intro{color:var(--txt-2);max-width:72ch;margin:0 0 26px;font-size:1rem}.ad-h2{font-family:var(--head);font-size:1.25rem;margin:32px 0 4px}.ad-sub{color:var(--txt-2);font-size:.9rem;margin:0 0 14px}.ad-pasos > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:15px 17px;font-size:.9rem;color:var(--txt-2)}.ad-pasos b{color:var(--txt)}.ad-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:11px}.ad-item:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-m)}.ad-item b{display:block;font-size:.97rem;margin-bottom:3px}.ad-item > span{display:block;font-size:.84rem;color:var(--txt-2)}.ad-razas{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}.ad-razas i{font-style:normal;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;
  background:var(--brand-soft);color:var(--brand)}.ad-comunidades{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.ad-comunidades a{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);padding:13px 15px;text-decoration:none;transition:.25s var(--ease)}.ad-comunidades a:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-3px)}.ad-comunidades b{display:block;font-size:.95rem}.ad-comunidades span{font-size:.78rem;color:var(--txt-2)}/* =========================================================
   MEGA MENÚ, versión recogida
   Antes ocupaba todo el ancho de la pantalla y casi tres cuartos
   del alto. Ahora es un panel contenido, centrado y más denso:
   mismas 124 razas, bastante menos superficie.
   ========================================================= */
.mega{position:fixed;inset:calc(var(--nav-h) - 6px) 0 auto 0;z-index:99;display:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:none;pointer-events:none}.mega-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:inherit;z-index:3}.mega-head h3{font-size:.95rem}.mega-head .sub{font-size:.75rem;color:var(--txt-2)}.mega-find{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 12px;min-width:200px}.mega-find input{flex:1;border:0;background:none;outline:none;color:var(--txt);font-size:.82rem;min-width:0}@media(max-width:1100px){.mega-cols{columns:3}}.mega-grp{break-inside:avoid;margin-bottom:12px}.mega-grp > b{display:flex;align-items:center;gap:7px;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:4px;font-weight:800}.mega-item{display:flex;align-items:center;gap:6px;width:100%;padding:2px 6px 2px 3px;border-radius:7px;text-align:left;font-size:.78rem;font-weight:600;color:var(--txt);line-height:1.25;transition:background .18s,color .18s,translate .18s var(--ease)}.mega-item img{width:20px;height:20px;border-radius:5px;flex:none;object-fit:contain;background:var(--surface-2);opacity:0;transition:opacity .35s}@media(max-width:1000px){.mega-grupos{grid-template-columns:repeat(3,minmax(0,1fr))}}.mega-grupo:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px)}.mega-grupo .ge{grid-row:1/3;font-size:1.25rem;line-height:1}.mega-grupo .gp{grid-column:2;font-size:.72rem;color:var(--txt-2);line-height:1.25}.mega-grupo .gn{grid-row:1/3;grid-column:3;font-family:var(--head);font-weight:800;
  font-size:.95rem;color:var(--brand)}.mega-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 14px}@media(max-width:1000px){.mega-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}.mega-todas{display:inline-block;margin-top:12px;font-size:.82rem;font-weight:700;
  color:var(--brand);text-decoration:none}.mega-todas:hover{text-decoration:underline}/* ---------- banda de accesos de la home ---------- */
.accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.acceso{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;text-decoration:none;transition:.3s var(--ease)}.acceso:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);border-color:var(--brand)}.acceso .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;
  font-size:1.25rem;margin-bottom:12px}.acceso b{display:block;font-family:var(--head);font-size:1.05rem;margin-bottom:5px}.acceso > span:last-child{font-size:.88rem;color:var(--txt-2)}/* ---------- llamada a adopción en la home ---------- */
.ad-llamada{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,4vw,36px);box-shadow:var(--shadow-s)}.ad-llamada h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:6px 0 10px}.ad-llamada p{color:var(--txt-2);margin:0 0 12px;font-size:.95rem}.ad-llamada-com b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:9px}.ad-llamada-com #adoptaCom{display:flex;flex-wrap:wrap;gap:6px}.ad-llamada-com a{padding:5px 11px;border-radius:99px;background:var(--bg-2);
  border:1px solid var(--line);font-size:.78rem;font-weight:600;text-decoration:none;
  transition:.2s var(--ease)}.ad-llamada-com a:hover{background:var(--brand);border-color:var(--brand);color:#fff}@media(max-width:860px){.ad-llamada{grid-template-columns:1fr}}/* ---------- índice de comunidades en la página de adopción ---------- */
.ad-com-indice{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.ad-com-indice a{padding:5px 12px;border-radius:99px;background:var(--bg-2);
  border:1px solid var(--line);font-size:.8rem;font-weight:600;text-decoration:none;transition:.2s}.ad-com-indice a:hover{background:var(--brand);border-color:var(--brand);color:#fff}.ad-guia{display:grid;gap:14px}.ad-com{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;
  scroll-margin-top:calc(var(--nav-h) + 16px)}.ad-com-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}.ad-com-cab h3{font-size:1.05rem}.ad-com-ir{font-size:.8rem;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap}.ad-com-ir:hover{text-decoration:underline}.ga-provs .ad-dir{background:var(--brand-soft);border-color:transparent;color:var(--brand)}.ad-com-prot{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-top:10px}.ad-com-prot a:hover{border-color:var(--brand)}.ad-com-prot b{display:block;margin-bottom:2px}.ad-com-prot span{color:var(--txt-2);font-size:.79rem}/* ---------- buscador del comparador ---------- */
.cmp-sugerencias{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.cmp-sugerencias button{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;
  border-radius:99px;background:var(--surface);border:1px solid var(--line);
  font-size:.83rem;font-weight:600;transition:.2s}.cmp-sugerencias button:hover{border-color:var(--brand);color:var(--brand)}.cmp-sugerencias img{width:26px;height:26px;border-radius:99px;object-fit:cover}/* El contenedor seguía siendo multicolumna (columns:4) y rompía la rejilla
   de grupos que va dentro. Con el menú resumido ya no hace falta. */
.mega-cols{columns:4;column-gap:0;columns:auto!important}.mega-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:9px}.mega-grupo{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:2px 9px;align-items:center;padding:11px 13px;border-radius:var(--r-m);background:var(--bg-2);border:1px solid var(--line);text-decoration:none;transition:.22s var(--ease)}.mega-grupo b{font-size:.88rem;line-height:1.2}.mega .wrap{width:min(1080px,94vw);padding:16px 20px 18px;max-height:min(54vh,470px);overflow-y:auto;scrollbar-width:thin;background:color-mix(in srgb,var(--bg) 98%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-l);pointer-events:auto}/* ---------- logos de las entidades ---------- */
.ad-item{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;text-decoration:none;transition:.25s var(--ease);gap:12px;align-items:flex-start}.ad-logo{width:34px;height:34px;flex:none;border-radius:9px;object-fit:contain;
  background:var(--bg-2);border:1px solid var(--line);padding:3px}.ad-logo-ini{display:grid;place-items:center;font-family:var(--head);font-weight:800;
  font-size:1rem;color:#fff;border:0;padding:0;
  background:linear-gradient(140deg,var(--brand),var(--brand-2))}.ad-txt{min-width:0;display:block}.ad-com-prot a{display:flex;padding:9px 12px;border-radius:var(--r-s);background:var(--bg-2);border:1px solid var(--line);text-decoration:none;font-size:.84rem;transition:.2s;gap:10px;align-items:flex-start}.ad-com-prot .ad-logo{width:28px;height:28px;border-radius:8px}.mp-cab h3{font-size:1.15rem;margin-bottom:4px}.mp-cab p{margin:0;color:var(--txt-2);font-size:.88rem;max-width:56ch}.mp-leyenda{display:grid;gap:5px;align-content:start;font-size:.76rem;color:var(--txt-2)}.mp-leyenda span{display:flex;align-items:center;gap:7px;white-space:nowrap}.mp-leyenda i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid var(--line)}.mp-leyenda .mp-c1{background:var(--brand)}.mp-leyenda .mp-c0{background:var(--surface-2)}.mp-prov{cursor:pointer;outline:none}.mp-prov.mp-lleno path{fill:color-mix(in srgb,var(--brand) 55%,var(--surface-2))}.mp-prov:focus-visible path{stroke:var(--accent);stroke-width:2}/* aviso emergente */
.mp-pop{position:absolute;z-index:10;width:min(280px,86vw);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);
  padding:14px 15px;animation:fadeUp .18s var(--ease)}.mp-x{position:absolute;top:6px;right:8px;width:24px;height:24px;border-radius:99px;
  display:grid;place-items:center;font-size:1.1rem;color:var(--txt-2);line-height:1}.mp-x:hover{background:var(--surface-2);color:var(--danger)}.mp-prov-n{display:block;font-family:var(--head);font-size:1.05rem;padding-right:20px}.mp-com{display:block;font-size:.76rem;color:var(--txt-2);margin-bottom:9px}.mp-faada{display:block;font-size:.82rem;font-weight:700;color:var(--brand);
  text-decoration:none;margin-bottom:10px}.mp-faada:hover{text-decoration:underline}.mp-prot > b{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:6px}.mp-prot a{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:8px;
  text-decoration:none;font-size:.82rem;font-weight:600;transition:background .18s}.mp-prot a:hover{background:var(--brand-soft);color:var(--brand)}.mp-prot img,.mp-ini{width:22px;height:22px;flex:none;border-radius:6px;object-fit:contain;
  background:var(--bg-2);border:1px solid var(--line)}.mp-ini{display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:.72rem;
  color:#fff;border:0;background:linear-gradient(140deg,var(--brand),var(--brand-2))}.mp-vacio{margin:0 0 10px;font-size:.8rem;color:var(--txt-2)}.mp-ir{display:inline-block;margin-top:8px;font-size:.82rem;font-weight:700;color:var(--brand);
  text-decoration:none}.mp-ir:hover{text-decoration:underline}.mp-credito{margin:12px 0 0;font-size:.72rem;color:var(--txt-2);text-align:right}@media(max-width:700px){.mp-cab{flex-direction:column}.mp-leyenda{flex-direction:row;display:flex;gap:14px}}/* =========================================================
   BUSCADOR DE LA BARRA (en todas las páginas)
   ========================================================= */
.nav-buscar{position:relative;display:flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:6px 14px;width:190px;transition:width .25s var(--ease),box-shadow .25s}.nav-buscar:focus-within{width:260px;box-shadow:0 0 0 3px var(--brand-soft)}.nav-buscar input{flex:1;border:0;background:none;outline:none;font-size:.85rem;
  color:var(--txt);min-width:0}.nav-sug{position:absolute;top:calc(100% + 8px);right:0;width:290px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);
  overflow:hidden;display:none;z-index:120}.nav-sug.on{display:block;animation:fadeUp .18s var(--ease)}.nav-sug a{display:flex;align-items:center;gap:10px;padding:8px 13px;text-decoration:none;
  font-size:.88rem;font-weight:600;transition:background .15s}.nav-sug a:hover,.nav-sug a.sel{background:var(--brand-soft);color:var(--brand)}.nav-sug img{width:30px;height:30px;border-radius:8px;object-fit:contain;
  background:var(--surface-2);flex:none}.nav-sug-vacio{display:block;padding:14px;font-size:.85rem;color:var(--txt-2)}@media(max-width:1020px){.nav-buscar{display:none}}.lst-img{display:block;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}.lst-img img{width:100%;height:100%;object-fit:contain}.lst-sub{display:block;font-size:.76rem;color:var(--txt-2);margin-bottom:5px}.lst-apod{display:block;font-size:.8rem;color:var(--txt-2);font-style:italic}/* =========================================================
   COMPARATIVAS CARA A CARA
   ========================================================= */
.cmp-duelo{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  margin:18px 0 6px}.cmp-cab{text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:16px;box-shadow:var(--shadow-s)}.cmp-cab img{width:100%;max-width:220px;aspect-ratio:4/3;object-fit:contain;
  background:var(--surface-2);border-radius:var(--r-m);margin:0 auto 10px}.cmp-cab b{display:block;font-family:var(--head);font-size:1.15rem}.cmp-cab > span{display:block;font-size:.82rem;color:var(--txt-2);font-style:italic;margin-bottom:8px}.cmp-cab a{font-size:.82rem;font-weight:700;color:var(--brand);text-decoration:none}.cmp-cab a:hover{text-decoration:underline}.cmp-vs{font-family:var(--head);font-weight:800;font-size:1.3rem;color:var(--brand)}.cmp-veredicto{margin:0 0 8px;padding-left:20px;display:grid;gap:8px;color:var(--txt-2);font-size:.94rem}.cmp-veredicto b{color:var(--txt)}.cmp-tabla{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-s)}.cmp-tabla table{border-collapse:collapse;width:100%;min-width:560px}.cmp-tabla th,.cmp-tabla td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line);
  font-size:.88rem}.cmp-tabla thead th{background:var(--surface);position:sticky;top:0;font-family:var(--head);font-size:1rem}.cmp-tabla tbody th{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2);font-weight:700;width:180px}.cmp-tabla tr:hover td{background:var(--brand-soft)}.cmp-gana{font-weight:700}.cmp-gana::after{content:" ✓";color:var(--brand)}.cmp-barra{display:inline-block;width:78px;height:6px;border-radius:99px;
  background:var(--surface-2);overflow:hidden;vertical-align:middle;margin-right:6px}.cmp-barra i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))}.cmp-barra.inv i{background:linear-gradient(90deg,var(--accent),#6fc9c0)}.cmp-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cmp-dos > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}.cmp-dos b{display:block;font-family:var(--head);font-size:1rem;margin-bottom:6px}.cmp-dos p{margin:0;font-size:.89rem;color:var(--txt-2)}.cmp-indice{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}.cmp-indice a{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:9px 12px;
  text-decoration:none;font-size:.86rem;font-weight:600;transition:.22s var(--ease)}.cmp-indice a:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-m)}.cmp-indice img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:none}.cmp-indice i{font-style:normal;color:var(--txt-2);font-weight:500}@media(max-width:760px){
  .cmp-duelo{grid-template-columns:1fr;gap:8px}
  .cmp-vs{margin:0 auto}
  .cmp-dos{grid-template-columns:1fr}
}/* =========================================================
   MENÚ LATERAL FIJO (guía de adopción)
   ========================================================= */
.lat{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:start;margin-top:26px}.lat-nav{position:sticky;top:calc(var(--nav-h) + 16px);max-height:calc(100dvh - var(--nav-h) - 32px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 12px;box-shadow:var(--shadow-s)}.lat-t{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-2);margin:0 6px 8px}.lat-nav > a{display:block;padding:7px 10px;border-radius:9px;font-size:.87rem;font-weight:600;
  text-decoration:none;color:var(--txt);transition:.18s var(--ease)}.lat-nav > a:hover{background:var(--brand-soft);color:var(--brand)}.lat-nav > a.act{background:var(--brand);color:#fff}.lat-sub{display:grid;margin:2px 0 6px 10px;padding-left:9px;border-left:2px solid var(--line)}.lat-sub a{padding:4px 8px;border-radius:7px;font-size:.79rem;color:var(--txt-2);
  text-decoration:none;transition:.18s}.lat-sub a:hover{background:var(--brand-soft);color:var(--brand)}.lat-sub a.act{color:var(--brand);font-weight:700}.lat-main{min-width:0}@media(max-width:980px){
  .lat{grid-template-columns:1fr;gap:16px}
  .lat-nav{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;
    padding:10px;align-items:center}
  .lat-t{display:none}
  .lat-nav > a{white-space:nowrap;flex:none}
  .lat-sub{display:none}
}/* ---------- mapa: más compacto y con resumen al pasar ---------- */
.mp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;box-shadow:var(--shadow-s);margin:18px 0 8px;max-width:820px;margin-inline:auto}.mp-prov:hover path{fill:var(--brand-2);filter:brightness(1.05)}/* globo de resumen */
.mp-tip{position:absolute;z-index:12;pointer-events:none;width:232px;
  background:var(--txt);color:var(--bg);border-radius:var(--r-m);padding:11px 13px;
  box-shadow:var(--shadow-l);font-size:.82rem;line-height:1.45;
  animation:fadeUp .12s var(--ease)}.mp-tip b{display:block;font-family:var(--head);font-size:1rem;margin-bottom:1px}.mp-tip-com{display:block;font-size:.74rem;opacity:.7;margin-bottom:7px}.mp-tip-dato{display:flex;gap:7px;align-items:flex-start;margin-bottom:4px;font-size:.79rem;opacity:.92}.mp-tip-dato i{font-style:normal;flex:none}.mp-tip-lista{display:block;font-size:.74rem;opacity:.65;margin:4px 0 2px;padding-left:20px}.mp-tip-pie{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.18);
  font-size:.72rem;opacity:.6}/* ---------- mapa: un tono por comunidad y hover estable ---------- */
.mp-prov path{fill:var(--surface-2);stroke:var(--bg);stroke-width:.7;transition:fill .15s ease}.mp-prov.c0 path{fill:#e9b78c}.mp-prov.c1 path{fill:#d9cfa6}.mp-prov.c2 path{fill:#a8c9bd}.mp-prov.c3 path{fill:#e7c4a0}.mp-prov.c4 path{fill:#c5d3c0}.mp-prov.c5 path{fill:#dcc0b4}.mp-prov.c6 path{fill:#bfcbd8}.mp-prov.c7 path{fill:#e3d3b0}html[data-theme="dark"] .mp-prov.c0 path{fill:#7a5637}html[data-theme="dark"] .mp-prov.c1 path{fill:#6d6743}html[data-theme="dark"] .mp-prov.c2 path{fill:#3f6459}html[data-theme="dark"] .mp-prov.c3 path{fill:#7a5f42}html[data-theme="dark"] .mp-prov.c4 path{fill:#4f6350}html[data-theme="dark"] .mp-prov.c5 path{fill:#6f5349}html[data-theme="dark"] .mp-prov.c6 path{fill:#4c5866}html[data-theme="dark"] .mp-prov.c7 path{fill:#6d6148}/* toda la comunidad se aclara al señalar una de sus provincias */
.mp-prov.hover path{fill:var(--brand-2)}.mp-prov.foco path{fill:var(--brand);stroke:var(--surface);stroke-width:1.1}.mp-prov.on path{fill:var(--brand);stroke:var(--surface);stroke-width:1.4}/* El indicador vivía en la cabecera, en un flex: al cambiar de texto («Pasa el
   ratón» → «Santa Cruz de Tenerife · Canarias») la cabecera se recolocaba y
   empujaba el mapa hacia abajo. Ahora flota sobre el lienzo, fuera del flujo,
   así que cambiar su texto no mueve absolutamente nada. */
.mp-cab{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:14px;align-items:flex-start}.mp-lienzo{position:relative;min-height:0}.mp-pista{font-size:.8rem;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:6px 14px;border-radius:99px;white-space:nowrap;position:absolute;top:0;right:0;z-index:5;pointer-events:none;max-width:60%;overflow:hidden;text-overflow:ellipsis}/* la altura del mapa queda fija: ni el globo ni el indicador la alteran */
.mp-svg{width:100%;height:auto;display:block;overflow:visible;max-height:min(62vh,520px);margin-inline:auto;filter:drop-shadow(0 4px 14px rgba(40,30,15,.12));aspect-ratio:569/392}/* ============ HOME · Razas populares ============ */
.grid--dest{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1000px){.grid--dest{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.grid--dest{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:460px){.grid--dest{grid-template-columns:1fr}}/* ============ HOME · Encuentra por intención ============ */
.int-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}@media(max-width:860px){.int-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:460px){.int-grid{grid-template-columns:1fr}}.int-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:200px;border:0;border-radius:var(--r-l);overflow:hidden;cursor:pointer;
  padding:22px;color:#fff;text-align:left;box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}.int-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.int-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,10,.04) 30%,rgba(20,15,10,.74))}.int-card>span:not(.int-ov){position:relative;z-index:1}.int-t{font-family:var(--head);font-weight:700;font-size:1.42rem;line-height:1.08;text-shadow:0 2px 16px rgba(0,0,0,.45)}.int-go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.86rem;font-weight:700;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}.int-card:hover,.int-card:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-m);outline:none}.int-card:hover img,.int-card:focus-visible img{transform:scale(1.07)}.int-card:hover .int-go,.int-card:focus-visible .int-go{opacity:.95;transform:none}.int-card:focus-visible{box-shadow:0 0 0 3px var(--brand),var(--shadow-m)}@media(max-width:760px){.int-go{opacity:.95;transform:none}}/* ---------- lluvia de corazones del test ---------- */
#corazones{position:fixed;inset:0;z-index:250;pointer-events:none}/* Iconos SVG en chips rápidos del hero (sustituyen a los emojis) */
.chips-quick button{padding:7px 15px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:.83rem;font-weight:600;color:var(--txt-2);transition:.25s var(--ease);display:inline-flex;align-items:center;gap:7px}.chips-quick .qc-i{flex:none;opacity:.9}/* =========================================================
   GUÍA DESARROLLADA POR APARTADOS
   ========================================================= */
.gu-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.gu-card{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:18px;text-decoration:none;transition:.3s var(--ease)}.gu-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);border-color:var(--brand)}.gu-card-ic{font-size:1.6rem;line-height:1;flex:none}.gu-card-txt{min-width:0}.gu-card-txt i{display:block;font-style:normal;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);font-weight:800;margin-bottom:3px}.gu-card-txt b{display:block;font-family:var(--head);font-size:1.02rem;margin-bottom:5px;line-height:1.2}.gu-card-txt > span{font-size:.85rem;color:var(--txt-2);line-height:1.5}.gu-cab{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px}.gu-ic{font-size:2.4rem;line-height:1;flex:none}.gu-n{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);font-weight:800}.gu-bloque{margin-bottom:22px}.gu-bloque h2{font-family:var(--head);font-size:1.18rem;margin-bottom:7px}.gu-bloque p{margin:0;color:var(--txt-2);font-size:1rem;line-height:1.72;max-width:74ch}.gu-clave{background:var(--brand-soft);border-left:4px solid var(--brand);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:16px 20px;margin:26px 0}.gu-clave b{display:block;font-family:var(--head);font-size:.95rem;color:var(--brand);margin-bottom:5px}.gu-clave p{margin:0;font-size:.95rem;color:var(--txt-2);line-height:1.65}/* botón de descarga */
.gu-pdf{display:inline-flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:13px 18px;margin-bottom:26px;
  text-decoration:none;transition:.25s var(--ease)}.gu-pdf:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-m)}.gu-pdf-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;flex:none;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;
  font-family:var(--head);font-weight:800;font-size:.8rem;letter-spacing:.04em}.gu-pdf b{display:block;font-size:.95rem}.gu-pdf i{display:block;font-style:normal;font-size:.8rem;color:var(--txt-2)}.gu-pdf-todo{background:var(--brand-soft);border-color:transparent}.gu-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.gu-nav a{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);padding:13px 16px;text-decoration:none;transition:.25s var(--ease)}.gu-nav a:hover{border-color:var(--brand)}.gu-nav a.der{text-align:right}.gu-nav i{display:block;font-style:normal;font-size:.74rem;color:var(--brand);font-weight:700;margin-bottom:2px}.gu-nav b{font-size:.92rem;font-weight:600}@media(max-width:700px){.gu-cab{gap:12px}.gu-ic{font-size:1.8rem}}/* ===== Variedades de una misma raza (tallas, mantos) ===== */
.vr-lista{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:8px}.vr{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}a.vr:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-s)}.vr b{font-size:.95rem;font-weight:700}.vr i{font-style:normal;color:var(--txt-2);font-size:.82rem;line-height:1.35}.vr em{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);margin-top:3px}.vr-yo{border-color:var(--brand);background:var(--brand-soft)}a.vr::after{content:"→";position:absolute;opacity:0}.foto-cred{font-size:.74rem;color:var(--txt-2);margin:8px 0 0;line-height:1.5}.foto-cred a{color:var(--txt-2);text-decoration:underline;text-underline-offset:2px}.foto-cred a:hover{color:var(--brand)}/* aviso de variedad en la tarjeta y en la ficha rápida */
.vr-chip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}.hero-shot .title{position:absolute;left:0;right:0;bottom:14px;padding:0 clamp(18px,4vw,38px);color:#fff;z-index:3}/* El degradado acababa en var(--bg): en modo oscuro es negro y el título
   blanco se leía, pero en modo claro es crema y el título desaparecía.
   Ahora el pie del degradado es oscuro siempre, que es lo que pide un
   título en blanco encima. */
.hero-shot .shade{position:absolute;inset:0;background:linear-gradient(to top,
  rgba(8,6,4,.82) 0%, rgba(8,6,4,.58) 24%, rgba(8,6,4,.26) 50%, rgba(8,6,4,.06) 78%, transparent 100%);z-index:2}/* la sombra de texto solo estaba puesta para h2, y la ficha usa h1 */
.hero-shot .title h1,
.hero-shot .title h2{text-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 22px rgba(0,0,0,.55)}.hero-shot .title .apod{font-size:.92rem;opacity:1;font-style:italic;color:rgba(255,255,255,.88);text-shadow:0 2px 10px rgba(0,0,0,.6)}/* ===== Comparador: la raza ya elegida cuando todavía falta la segunda ===== */
.cmp-elegida{display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:10px 14px 10px 10px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);text-align:left}.cmp-elegida img{width:54px;height:54px;border-radius:12px;object-fit:cover;flex:none}.cmp-elegida b{display:block;font-size:.98rem}.cmp-elegida i{font-style:normal;font-size:.8rem;color:var(--txt-2)}.cmp-elegida .btn{padding:6px 12px;font-size:.8rem}/* el botón de comparar sube a la parte alta de la ficha, que abajo no se veía */
.pr-acciones-alto{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}/* ===== Los cuatro pasos de adoptar: título grande y entrada escalonada ===== */
.ad-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:8px}.ad-pasos .paso{position:relative;overflow:hidden;padding:24px 22px 22px;
  border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}.ad-pasos .paso:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-m)}/* el número, grande y de fondo */
.ad-pasos .paso-n{position:absolute;top:-16px;right:6px;font-family:var(--head);font-weight:800;
  font-size:5.4rem;line-height:1;color:var(--brand);opacity:.13;pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}.ad-pasos .paso:hover .paso-n{transform:translateY(4px) scale(1.06);opacity:.22}.ad-pasos .paso h3{font-family:var(--head);font-weight:800;line-height:1.12;margin:0 0 8px;
  font-size:clamp(1.28rem,2.3vw,1.62rem);
  background:linear-gradient(100deg,var(--brand) 10%,var(--brand-2) 55%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;background-position:0 0;transition:background-position .55s var(--ease)}.ad-pasos .paso:hover h3{background-position:100% 0}.ad-pasos .paso p{margin:0;color:var(--txt-2);font-size:.94rem;line-height:1.6}/* la entrada se escalona: cada tarjeta llega un poco después que la anterior */
.ad-pasos .paso.rv{transition-delay:calc(var(--paso,0) * .09s)}@media(prefers-reduced-motion:reduce){
  .ad-pasos .paso,.ad-pasos .paso-n,.ad-pasos .paso h3{transition:none}
}/* ===== Guía: los bloques son <section> y se comían el padding global ===== */
/* section{padding:clamp(56px,8vw,104px) 0} está pensado para las franjas de
   la home; dentro de un artículo deja huecos enormes entre párrafos. */
.pag-guia .gu-bloque{padding:0;margin-bottom:26px}.pag-guia .gu-bloque h2{font-size:clamp(1.12rem,2vw,1.3rem);margin:0 0 8px}.pag-guia .gu-bloque p{max-width:74ch}/* ===== Ficha de la raza: cuatro cifras grandes + celdas con icono ===== */
.ficha-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:12px}.ficha-top .fx{position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:var(--r-m);
  border:1px solid var(--line);
  background:linear-gradient(150deg,var(--brand-soft) 0%,var(--surface) 62%);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}.ficha-top .fx:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-m)}.ficha-top .fx-ic{position:absolute;right:10px;top:8px;font-size:1.9rem;color:var(--brand);opacity:.5;
  transition:transform .35s var(--ease),opacity .28s var(--ease)}.ficha-top .fx:hover .fx-ic{transform:scale(1.14) rotate(-6deg);opacity:.82}.ficha-top .fx b{display:block;font-family:var(--head);font-weight:800;line-height:1.15;
  font-size:clamp(1.15rem,2vw,1.42rem);color:var(--txt)}.ficha-top .fx i{display:block;margin-top:4px;font-style:normal;font-size:.72rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--brand)}.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px;margin-bottom:26px;align-items:stretch}.facts .fact{position:relative;display:flex;flex-direction:column;gap:2px;
  padding:14px 14px 13px 44px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface);
  transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease)}.facts .fact:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-s)}.facts .fact-ic{position:absolute;left:14px;top:14px;font-size:1.05rem;opacity:.85;line-height:1}.facts .fact b{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2)}.facts .fact > span:last-child{font-size:.97rem;font-weight:600;color:var(--txt);line-height:1.35}/* las celdas entran escalonadas, de izquierda a derecha */
.ficha-top .rv,.facts .rv{transition-delay:calc(var(--i,0) * .045s)}@media(prefers-reduced-motion:reduce){
  .ficha-top .fx,.ficha-top .fx-ic,.facts .fact{transition:none}
}/* ===== Visor de PDF dentro de la página ===== */
.gu-doc{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  margin:18px 0 26px;overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}.gu-doc.on{border-color:var(--brand);box-shadow:var(--shadow-m)}.gu-doc-todo{background:linear-gradient(140deg,var(--brand-soft) 0%,var(--surface) 58%)}.gu-doc-cab{display:flex;align-items:center;gap:14px;padding:16px 18px;flex-wrap:wrap}.gu-doc-txt{flex:1 1 220px;min-width:0}.gu-doc-txt b{display:block;font-size:1rem}.gu-doc-txt i{font-style:normal;font-size:.84rem;color:var(--txt-2)}.gu-doc-cab .btn{padding:9px 16px;font-size:.86rem;flex:none}.gu-doc-vista{border-top:1px solid var(--line);background:var(--surface-2)}.gu-doc-vista iframe{display:block;width:100%;height:min(78vh,900px);border:0;background:var(--surface-2)}.gu-doc-nota{margin:0;padding:10px 18px;font-size:.8rem;color:var(--txt-2);border-top:1px solid var(--line)}.gu-doc-nota a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}@media(max-width:620px){
  .gu-doc-vista iframe{height:62vh}
  .gu-doc-cab .btn{flex:1 1 auto;text-align:center}
}/* ===== Refugios de una provincia ===== */
.rf-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:12px}.rf{position:relative;padding:18px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);display:flex;flex-direction:column;gap:7px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}.rf:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-s)}.rf h3{font-family:var(--head);font-size:1.04rem;line-height:1.25;margin:0;padding-right:70px}.rf-op,.rf-dir{margin:0;font-size:.85rem;color:var(--txt-2);line-height:1.45}.rf-dir::before{content:"📍 ";opacity:.7}.rf-datos{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}.rf-datos li{display:flex;gap:8px;font-size:.85rem;align-items:baseline}.rf-datos li > span:first-child{flex:none;width:68px;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;color:var(--txt-2)}.rf-datos a{color:var(--brand);text-decoration:none}.rf-datos a:hover{text-decoration:underline}.rf-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}.rf-acc a{font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line);color:var(--txt-2);transition:all .2s var(--ease)}.rf-acc .rf-web{background:var(--brand-soft);border-color:transparent;color:var(--brand)}.rf-acc a:hover{border-color:var(--brand);color:var(--brand)}.rf-esp{position:absolute;top:14px;right:14px;font-size:.66rem;font-weight:700;padding:3px 9px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent);letter-spacing:.03em}.rf-fuente{font-size:.78rem;color:var(--txt-2);line-height:1.6;margin:6px 0 0}.rf-fuente a{color:var(--brand)}/* el contador de refugios que va en cada chip de provincia */
.ga-provs a i{font-style:normal;font-size:.72rem;font-weight:700;margin-left:5px;padding:1px 6px;
  border-radius:999px;background:var(--brand-soft);color:var(--brand)}.ga-grande a{font-size:.95rem;padding:9px 15px}/* ===== Atajos escritos como los diría cualquiera ===== */
.frases-t{margin:26px 0 12px;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-2)}.frases{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}.frase{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--txt);text-decoration:none;
  font-size:.88rem;font-weight:600;
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}.frase:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}.frase span{font-size:1rem;line-height:1}/* la misma idea dentro de las sugerencias del buscador */
.sug-frase{background:var(--brand-soft)}.sug-frase .sug-ic{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;
  border-radius:8px;background:var(--surface);font-size:.95rem;flex:none}.nav-sug .sug-frase span:last-child{font-weight:700;color:var(--brand)}/* ===== Calculadora de coste ===== */
.cc{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:start;margin-top:10px}.cc-form{position:sticky;top:calc(var(--nav-h) + 16px);display:grid;gap:18px;padding:20px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}.cc-campo{display:grid;gap:7px}.cc-campo > label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}.cc-busca{position:relative}.cc-busca input{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2);color:var(--txt);font:inherit;font-size:.9rem}.cc-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;display:grid;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow-m)}.cc-sug:empty{display:none}.cc-sug button{padding:9px 13px;text-align:left;background:none;border:0;font:inherit;font-size:.88rem;
  color:var(--txt);cursor:pointer}.cc-sug button:hover{background:var(--brand-soft);color:var(--brand)}.cc-pista{margin:0;font-size:.8rem;color:var(--txt-2)}.cc-pista b{color:var(--txt)}.cc-x{margin-left:6px;background:none;border:0;font:inherit;font-size:.78rem;color:var(--brand);
  text-decoration:underline;cursor:pointer;padding:0}.cc-tam,.cc-opc{display:flex;flex-wrap:wrap;gap:6px}.cc-tam button,.cc-opc button{padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg-2);font:inherit;font-size:.83rem;font-weight:600;color:var(--txt-2);cursor:pointer;
  transition:all .18s var(--ease)}.cc-tam button.on,.cc-opc button.on{background:var(--brand);border-color:var(--brand);color:#fff}.cc-tam button:disabled{opacity:.45;cursor:not-allowed}.cc-campo input[type=range]{width:100%;accent-color:var(--brand)}.cc-val{font-size:.82rem;font-weight:700;color:var(--brand)}.cc-checks{gap:9px}.cc-checks label{display:flex;align-items:center;gap:9px;font-size:.88rem;cursor:pointer}.cc-checks input{accent-color:var(--brand);width:17px;height:17px}.cc-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}.cc-cifra{padding:18px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface)}.cc-cifra.cc-destacada{background:linear-gradient(145deg,var(--brand-soft),var(--surface) 70%);
  border-color:var(--brand)}.cc-cifra b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.15}.cc-cifra i{display:block;margin-top:4px;font-style:normal;font-size:.78rem;color:var(--txt-2)}.cc-frase{font-size:1rem;margin:0 0 18px;color:var(--txt-2)}.cc-frase b{color:var(--txt)}.cc-bloque{margin-bottom:22px}.cc-bloque h3{font-family:var(--head);font-size:1.05rem;margin:0 0 10px}.cc-tabla{width:100%;border-collapse:collapse;font-size:.9rem}.cc-tabla th,.cc-tabla td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.cc-tabla th[scope=row]{font-weight:600}.cc-tabla th i{display:block;font-style:normal;font-size:.78rem;color:var(--txt-2);font-weight:400;margin-top:2px}.cc-tabla td{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}.cc-tabla tfoot th,.cc-tabla tfoot td{border-bottom:0;border-top:2px solid var(--brand);color:var(--brand);
  font-size:1.02rem;font-weight:800;padding-top:12px}.cc-aviso{font-size:.82rem;color:var(--txt-2);line-height:1.6;padding:14px 16px;border-radius:var(--r-m);
  background:var(--surface-2)}@media(max-width:860px){
  .cc{grid-template-columns:1fr}
  .cc-form{position:static}
}/* aviso del test dentro del comparador */
.cmp-test{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 0;padding:14px 18px;
  border-radius:var(--r-m);background:var(--brand-soft);font-size:.9rem;color:var(--txt-2)}.cmp-test b{color:var(--txt)}.cmp-test .btn{margin-left:auto;padding:7px 14px;font-size:.84rem;background:var(--surface)}.cmp-test-ok{background:var(--accent-soft)}/* botones de adopción en la ficha de la raza */
.rz-adopta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.rz-adopta .btn{font-size:.86rem}/* =========================================================
   Móvil: la bandeja del comparador ocupaba el 42 % de la
   pantalla y el hero pasaba de alto de pantalla, así que
   había que bajar una pantalla entera para ver nada.
   ========================================================= */

/* el contador solo hace falta cuando la bandeja se pliega */
.cmp-toggle{display:none;align-items:center;gap:8px;background:none;border:0;font:inherit;
  font-size:.86rem;font-weight:700;color:var(--txt);cursor:pointer;padding:6px 4px}.cmp-n{display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:.82rem;font-weight:800}.cmp-flecha{transition:rotate .25s var(--ease);color:var(--txt-2)}.cmp-tray.abierta .cmp-flecha{rotate:180deg}@media(max-width:760px){
  .cmp-toggle{display:inline-flex;min-height:44px}
  .cmp-tray{padding:8px 0}
  .cmp-tray .wrap{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
  /* plegada: una sola línea con el contador y el botón de ir */
  .cmp-tray .cmp-slots{display:none;order:3;flex-basis:100%;max-height:34vh;overflow-y:auto}
  .cmp-tray #cmpClear{display:none;order:4}
  .cmp-tray.abierta .cmp-slots{display:flex}
  .cmp-tray.abierta #cmpClear{display:inline-flex;flex-basis:100%}
  .cmp-tray #cmpIr{margin-left:auto;padding:11px 16px;font-size:.86rem;min-height:44px}
  .slot{padding:5px 10px 5px 5px;font-size:.82rem}
  .slot img{width:30px;height:30px}
}/* Hero: en un móvil de 812 px medía 1062 y el claim se cortaba */
@media(max-width:700px){
  .hero{min-height:auto;padding:calc(var(--nav-h) + 26px) 0 40px}
  .hero h1{font-size:clamp(2.1rem,9.5vw,3.1rem);line-height:1.04;margin-bottom:14px}
  .hero p.lead{font-size:.98rem;margin-bottom:22px}
  .hero .pill{font-size:.76rem}
  .hero-cred{max-width:64vw;font-size:.64rem}
}/* Objetivos táctiles: había 126 por debajo de 32 px */
@media(max-width:760px){
  .chip,.frase,.ga-provs a,.mega-item,.cc-tam button,.cc-opc button,
  .rf-acc a,.vr,.int-card,.lat-nav > a,.lat-sub a{min-height:44px}
  .chip,.frase,.ga-provs a,.cc-tam button,.cc-opc button,.rf-acc a{
    display:inline-flex;align-items:center}
  .icon-btn,.slot button,.mp-x,#top{min-width:44px;min-height:44px}
  .nav-sug a,.cc-sug button{min-height:44px;display:flex;align-items:center}
}/* Los puntos del carrusel del hero medían 24×7: imposibles de acertar con
   el dedo. El punto se ve igual, pero la zona sensible pasa a 44 px. */
@media(max-width:760px){
  .hero-dots{gap:2px}
  .hero-dots button{position:relative;min-height:44px;min-width:26px;
    display:grid;place-items:center;background:none;border:0;padding:0}
  .hero-dots button::after{content:"";display:block;width:22px;height:6px;border-radius:999px;
    background:rgba(255,255,255,.45);transition:background .25s var(--ease),width .25s var(--ease)}
  .hero-dots button.on::after{background:#fff;width:30px}
  .hero-dots button > *{display:none}
}/* ===== Coste y compatibilidad en la ficha de la raza ===== */
.rz-calc{margin:12px 0 0;font-size:.9rem}.rz-calc a{color:var(--brand);font-weight:700;text-decoration:none;border-bottom:1.5px solid transparent;
  transition:border-color .2s var(--ease)}.rz-calc a:hover{border-color:var(--brand)}.rz-compat{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 22px;margin:22px 0 4px;
  border-radius:var(--r-l);border:1px solid var(--brand);
  background:linear-gradient(140deg,var(--brand-soft),var(--surface) 62%)}.rz-compat-cifra{text-align:center;flex:none}.rz-compat-cifra b{display:block;font-family:var(--head);font-weight:800;font-size:2.6rem;
  line-height:1;color:var(--brand)}.rz-compat-cifra i{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-2)}.rz-compat-txt{flex:1 1 260px;display:grid;gap:5px}.rz-compat-txt > b{font-size:1.06rem}.rz-compat-txt span{font-size:.88rem;color:var(--txt-2);line-height:1.55}.rz-compat-acc a{color:var(--brand);font-weight:700;text-decoration:none}.rz-compat-acc a:hover{text-decoration:underline}.rz-compat-invita{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 4px;
  padding:16px 20px;border-radius:var(--r-m);background:var(--surface-2);
  font-size:.92rem;color:var(--txt-2);line-height:1.55}.rz-compat-invita b{color:var(--txt)}.rz-compat-invita .btn{margin-left:auto;padding:8px 16px;font-size:.85rem;background:var(--surface)}/* =========================================================
   Ficha modal en móvil. En un iPhone SE (375×667) el contenido
   se quedaba con 263 px de 667: el resto se lo comían la foto,
   el título, la tira, dos filas de botones y las pestañas, que
   además se cortaban por la derecha.
   ========================================================= */
@media(max-width:560px){
  .sheet .ficha-titulo{padding:8px 14px 6px}
  .sheet .ficha-titulo h2{font-size:1.32rem;line-height:1.15}
  .sheet .ficha-titulo .apod{font-size:.8rem}

  .sheet .ficha-tira{padding:7px 14px 10px;gap:7px}
  .sheet .ficha-tira img{width:46px;height:36px}

  /* los cinco botones sumaban 620 px en una pantalla de 375: una sola
     fila que se desliza, en vez de dos filas apiladas */
  .sheet .ficha-acc{flex-wrap:nowrap;overflow-x:auto;padding:10px 14px 8px;gap:6px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent)}
  .sheet .ficha-acc::-webkit-scrollbar{display:none}
  .sheet .ficha-acc .btn{flex:none;padding:9px 12px;font-size:.78rem;min-height:40px}

  /* las cinco pestañas caben justas si se aprietan */
  .sheet .ficha-info .tabs,.sheet .tabs{padding:0 12px;gap:0}
  .sheet .tabs button{padding:10px 6px;font-size:.74rem;min-height:40px}

  .sheet .ficha-marco{padding:8px 8px 2px}
}/* pantallas muy bajas: la foto estorba más de lo que aporta */
@media(max-width:560px) and (max-height:700px){
  .sheet .ficha-marco{max-height:22vh}
}/* ===== Índice de listados: con fotos, que antes era una lista de texto ===== */
.lst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:30px}.lst-card{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;text-decoration:none;transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease);flex-direction:column;color:inherit}.lst-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--brand)}.lst-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--surface-2)}.lst-fotos img{width:100%;height:94px;object-fit:cover;display:block;
  transition:transform .4s var(--ease)}.lst-card:hover .lst-fotos img{transform:scale(1.06)}.lst-txt{display:flex;padding:13px 15px;align-items:baseline;justify-content:space-between;gap:10px}.lst-txt b{display:block;font-family:var(--head);font-size:.98rem;margin-bottom:3px;font-weight:700;line-height:1.25}.lst-txt i{flex:none;font-style:normal;font-size:.74rem;font-weight:700;color:var(--brand);
  background:var(--brand-soft);padding:3px 9px;border-radius:999px}@media(max-width:560px){
  .lst-fotos img{height:74px}
  .lst-grid{grid-template-columns:1fr 1fr;gap:10px}
  .lst-txt{padding:10px 11px;flex-direction:column;gap:4px}
}

/* ===== Página 404 ===== */
.e404{min-height:100svh;display:grid;place-items:center;text-align:center;padding:60px 0;
  background:radial-gradient(70% 60% at 50% 0%,var(--brand-soft),transparent 70%)}
.e404 .wrap{max-width:820px}
.e404-huella{display:block;font-size:3.4rem;line-height:1;margin-bottom:14px;opacity:.5;
  animation:huella404 3.5s var(--ease) infinite}
@keyframes huella404{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(6deg) translateY(-8px)}}
.e404 h1{font-family:var(--head);font-weight:800;font-size:clamp(2rem,6vw,3.4rem);line-height:1.05;
  margin:0 0 12px}
.e404-sub{max-width:52ch;margin:0 auto 26px;color:var(--txt-2);font-size:1.02rem;line-height:1.6}
.e404-busca{position:relative;display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto 30px;
  padding:13px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-m);color:var(--txt-2)}
.e404-busca input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:1rem;color:var(--txt);min-width:0}
.e404-sug{position:absolute;left:14px;right:14px;top:calc(100% + 8px);z-index:5;display:grid;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  box-shadow:var(--shadow-m);text-align:left}
.e404-sug:empty{display:none}
.e404-sug a,.e404-sug span{padding:11px 16px;text-decoration:none;color:var(--txt);font-size:.92rem;font-weight:600}
.e404-sug a:hover{background:var(--brand-soft);color:var(--brand)}
.e404-sug span{color:var(--txt-2);font-weight:400}
.e404-destinos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:30px}
.e404-destinos a{display:grid;gap:3px;padding:16px 18px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line);text-decoration:none;color:inherit;text-align:left;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.e404-destinos a:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-s)}
.e404-destinos span{font-size:1.3rem;line-height:1}
.e404-destinos b{font-size:.98rem}
.e404-destinos i{font-style:normal;font-size:.82rem;color:var(--txt-2);line-height:1.4}
.e404-o{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);
  margin:0 0 12px}
.e404-razas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.e404-razas a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  text-decoration:none;color:var(--txt);font-size:.88rem;font-weight:600;transition:all .2s var(--ease)}
.e404-razas a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:760px){
  .e404-destinos a,.e404-razas a{min-height:44px}
  .e404-busca{margin-bottom:24px}
}

/* enlace a los listados dentro del mega menú */
.mega-listados{display:inline-block;margin-top:6px;font-size:.78rem;font-weight:700;color:var(--brand);
  text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .2s var(--ease)}
.mega-listados:hover{border-color:var(--brand)}

/* ===== Comparativas: bloques propios de cada par ===== */
.cmp-parecidos{list-style:none;padding:0;margin:0 0 8px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.cmp-parecidos li{position:relative;padding:11px 14px 11px 38px;border-radius:var(--r-m);
  background:var(--accent-soft);font-size:.9rem;line-height:1.5}
.cmp-parecidos li::before{content:"=";position:absolute;left:14px;top:10px;font-weight:800;
  color:var(--accent);font-size:1rem}
.cmp-elige{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:8px}
.cmp-elige > div{padding:18px 20px;border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--surface)}
.cmp-elige > div > b{display:block;font-family:var(--head);font-size:1.05rem;margin-bottom:10px;
  color:var(--brand)}
.cmp-elige ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:7px}
.cmp-elige li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.45;color:var(--txt-2)}
.cmp-elige li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}
.cmp-elige a{font-size:.85rem;font-weight:700;color:var(--brand);text-decoration:none}
.cmp-elige a:hover{text-decoration:underline}
.cmp-coste{font-size:.94rem;line-height:1.65;color:var(--txt-2);padding:16px 18px;
  border-radius:var(--r-m);background:var(--surface-2)}
.cmp-coste b{color:var(--txt);display:inline-block;margin-right:10px}
.cmp-coste a{color:var(--brand);font-weight:700;text-decoration:none}
.cmp-coste a:hover{text-decoration:underline}

/* ===== Buscador en móvil =====
   .nav-buscar estaba oculto por debajo de 1020 px, así que en un teléfono
   no había forma de buscar una raza salvo desde la portada. Ahora entra
   dentro del menú desplegable, arriba del todo. */
@media(max-width:1020px){
  .nav-links.on .nav-buscar,
  .nav-buscar.en-menu{display:flex}
  .nav-links.on{padding-top:10px}
  .nav-buscar.en-menu{order:-1;width:100%;margin-bottom:10px;
    background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 15px}
  .nav-buscar.en-menu input{font-size:1rem;min-height:26px}
  .nav-buscar.en-menu .nav-sug{left:0;right:0;top:calc(100% + 6px)}
}

/* =========================================================
   Herramientas nuevas: nombres, alimentos y cachorro
   ========================================================= */

/* ---- Nombres ---- */
.nb-filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
  padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  margin-bottom:22px}
.nb-grupo{display:grid;gap:8px;align-content:start}
.nb-grupo.nb-ancho{grid-column:1/-1}
.nb-grupo > b{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.nb-chips{display:flex;flex-wrap:wrap;gap:6px}
.nb-chips button{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);
  font:inherit;font-size:.83rem;font-weight:600;color:var(--txt-2);cursor:pointer;transition:all .18s var(--ease)}
.nb-chips button:hover{border-color:var(--brand);color:var(--brand)}
.nb-chips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.nb-letras{display:flex;flex-wrap:wrap;gap:4px}
.nb-letras button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg-2);font:inherit;font-size:.8rem;font-weight:700;color:var(--txt-2);cursor:pointer;
  transition:all .18s var(--ease)}
.nb-letras button:hover{border-color:var(--brand);color:var(--brand)}
.nb-letras button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.nb-busca{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--txt-2)}
.nb-busca input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:.92rem;color:var(--txt);min-width:0}
.nb-acc{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nb-cuenta{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--txt-2)}
.nb-azar{display:none;grid-column:1/-1;padding:16px 20px;border-radius:var(--r-m);
  background:linear-gradient(135deg,var(--brand-soft),var(--surface) 70%);border:1px solid var(--brand)}
.nb-azar.on{display:block;animation:nbIn .3s var(--ease)}
@keyframes nbIn{from{opacity:0;translate:0 -6px}}
.nb-azar b{display:block;font-family:var(--head);font-size:1.7rem;color:var(--brand);line-height:1.1}
.nb-azar i{font-style:normal;font-size:.88rem;color:var(--txt-2)}
.nb-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
.nb-card{position:relative;padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface);transition:transform .22s var(--ease),border-color .22s var(--ease)}
.nb-card:hover{transform:translateY(-3px);border-color:var(--brand)}
.nb-card > b{font-family:var(--head);font-size:1.15rem;line-height:1.2}
.nb-sexo{position:absolute;top:13px;right:14px;font-size:.85rem;color:var(--txt-2)}
.nb-card i{display:block;margin-top:3px;font-style:normal;font-size:.82rem;color:var(--txt-2);line-height:1.45}
.nb-origen{display:inline-block;margin-top:8px;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:2px 8px;border-radius:999px}
.nb-nada{padding:30px;text-align:center;color:var(--txt-2)}
.nb-consejos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.nb-consejos > div{padding:15px 17px;border-radius:var(--r-m);background:var(--surface-2)}
.nb-consejos b{display:block;margin-bottom:4px;font-size:.95rem}
.nb-consejos span{font-size:.86rem;color:var(--txt-2);line-height:1.5}

/* ---- Que puede comer ---- */
.cm-busca{display:flex;align-items:center;gap:11px;padding:15px 20px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  color:var(--txt-2);margin-bottom:14px}
.cm-busca input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:1.02rem;color:var(--txt);min-width:0}
.cm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.cm-chips button{padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font:inherit;font-size:.86rem;font-weight:600;color:var(--txt-2);cursor:pointer;transition:all .18s var(--ease)}
.cm-chips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cm-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.cm-tarjeta{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);font:inherit;font-size:.92rem;font-weight:600;
  color:var(--txt);text-align:left;cursor:pointer;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.cm-tarjeta:hover{transform:translateY(-2px)}
.cm-tarjeta span{font-size:1.05rem;flex:none}
.cm-no{border-left:4px solid var(--danger)}
.cm-ojo{border-left:4px solid var(--brand-2)}
.cm-si{border-left:4px solid var(--accent)}
.cm-ficha{padding:24px 26px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface)}
.cm-ficha.cm-no{border-left:6px solid var(--danger);background:linear-gradient(120deg,rgba(201,79,61,.08),var(--surface) 55%)}
.cm-ficha.cm-ojo{border-left:6px solid var(--brand-2);background:linear-gradient(120deg,var(--brand-soft),var(--surface) 55%)}
.cm-ficha.cm-si{border-left:6px solid var(--accent);background:linear-gradient(120deg,var(--accent-soft),var(--surface) 55%)}
.cm-cab{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cm-ic{font-size:2.4rem;line-height:1;flex:none}
.cm-cab h3{font-family:var(--head);font-size:1.5rem;margin:0;line-height:1.15}
.cm-cab b{display:block;font-size:1rem;margin-top:2px}
.cm-cab i{font-style:normal;font-size:.82rem;color:var(--txt-2)}
.cm-ficha p{margin:0 0 11px;font-size:.95rem;line-height:1.65;color:var(--txt-2)}
.cm-ficha p b{color:var(--txt)}
.cm-que{padding:12px 15px;border-radius:var(--r-s);background:var(--surface-2)}
.cm-mas{margin-top:16px}
.cm-nada{padding:26px;border-radius:var(--r-l);background:var(--surface-2);text-align:center}
.cm-nada p{margin:0 0 10px;color:var(--txt-2);line-height:1.6}
.cm-nada a{color:var(--brand);font-weight:700}

/* ---- Calendario del cachorro ---- */
.ca-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;
  padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  margin-bottom:24px}
.ca-campo{display:grid;gap:7px;align-content:start}
.ca-campo > label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.ca-campo input{padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);
  color:var(--txt);font:inherit;font-size:.95rem}
.ca-pista{font-size:.76rem;color:var(--txt-2);line-height:1.4}
.ca-tam{display:flex;flex-wrap:wrap;gap:6px}
.ca-tam button{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);
  font:inherit;font-size:.83rem;font-weight:600;color:var(--txt-2);cursor:pointer;transition:all .18s var(--ease)}
.ca-tam button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ca-edad{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;padding:18px 22px;margin-bottom:24px;
  border-radius:var(--r-l);background:linear-gradient(140deg,var(--brand-soft),var(--surface) 62%);
  border:1px solid var(--brand)}
.ca-edad > b{font-family:var(--head);font-size:1.9rem;line-height:1;color:var(--brand)}
.ca-edad > i{font-style:normal;font-size:.95rem;color:var(--txt)}
.ca-edad > span{margin-left:auto;font-size:.9rem;color:var(--txt-2)}
.ca-h{font-family:var(--head);font-size:1.15rem;margin:26px 0 12px}
.ca-lista{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ca-hito{display:flex;gap:14px;padding:16px 18px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface)}
.ca-hito.hecho{opacity:.6}
.ca-hito.ca-veterinario{border-left:4px solid var(--accent)}
.ca-hito.ca-tu{border-left:4px solid var(--brand)}
.ca-hito.ca-aviso{border-left:4px solid var(--danger);background:linear-gradient(120deg,rgba(201,79,61,.06),var(--surface) 50%)}
.ca-hito.ca-criador{border-left:4px solid var(--line)}
.ca-ic{font-size:1.5rem;line-height:1;flex:none}
.ca-hito b{display:block;font-size:1rem}
.ca-cuando{display:block;font-size:.78rem;font-weight:700;color:var(--brand);margin:2px 0 6px}
.ca-hito p{margin:0;font-size:.9rem;line-height:1.6;color:var(--txt-2)}
.ca-pasados{opacity:.85}
.ca-tabla{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.ca-tabla table{width:100%;border-collapse:collapse;font-size:.92rem}
.ca-tabla th,.ca-tabla td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.ca-tabla thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-2)}
.ca-tabla tr.ca-ya{color:var(--txt-2)}
.ca-tabla tr:last-child td{border-bottom:0}
.ca-aviso{font-size:.82rem;color:var(--txt-2);line-height:1.6;margin-top:14px;padding:14px 16px;
  border-radius:var(--r-m);background:var(--surface-2)}
@media(max-width:760px){
  .nb-chips button,.nb-letras button,.cm-chips button,.ca-tam button{min-height:40px}
  .ca-edad > span{margin-left:0;flex-basis:100%}
}

/* ---- Mapa del sitio en el pie ---- */
.foot-mapa{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px;
  padding:34px 0 26px;border-bottom:1px solid var(--line)}
.foot-mapa > div{display:grid;gap:7px;align-content:start}
.foot-mapa b{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin-bottom:2px}
.foot-mapa a{font-size:.88rem;color:var(--txt-2);text-decoration:none;transition:color .18s var(--ease)}
.foot-mapa a:hover{color:var(--brand)}
@media(max-width:760px){
  .foot-mapa{gap:18px;padding:26px 0 20px}
  .foot-mapa a{min-height:32px;display:flex;align-items:center}
}

/* El atributo hidden gana a cualquier display de clase: si no, un bloque
   vacio a la espera de datos (la compatibilidad del test, el visor del PDF)
   se dibuja igualmente como una caja vacia. */
[hidden]{display:none !important}

/* =========================================================
   Fotos dentro de la guía
   Los apartados eran cuatro bloques de texto seguidos; ahora
   abren con una foto y llevan dos intercaladas.
   ========================================================= */
.gu-portada{margin:0 0 26px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-s)}
.gu-portada img{display:block;width:100%;height:clamp(200px,34vw,340px);object-fit:cover}
.gu-fig{margin:4px 0 30px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:var(--surface)}
.gu-fig img{display:block;width:100%;height:clamp(170px,26vw,260px);object-fit:cover}
.gu-portada figcaption,.gu-fig figcaption{padding:12px 18px 14px;font-size:.88rem;line-height:1.55;
  color:var(--txt-2)}
.gu-fig-cred{display:block;margin-top:5px;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--txt-3,var(--txt-2));opacity:.75}
@media(max-width:600px){
  .gu-portada img{height:200px}
  .gu-fig img{height:170px}
}

/* =========================================================
   Artículos
   ========================================================= */
.ar-main{padding-top:calc(var(--nav-h) + 28px);padding-bottom:60px;max-width:780px}
.ar-main-ancho{max-width:1040px}
.ar-migas{font-size:.84rem;color:var(--txt-2);margin-bottom:16px}
.ar-cab{margin-bottom:22px}
.ar-meta{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.ar-cab h1{font-family:var(--head);font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.08;
  margin:10px 0 12px;letter-spacing:-.02em}
.ar-entradilla{font-size:1.1rem;line-height:1.65;color:var(--txt-2);margin:0}
.ar-portada{margin:0 0 26px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-s)}
.ar-portada img{display:block;width:100%;height:clamp(210px,34vw,350px);object-fit:cover}
.ar-portada figcaption{padding:9px 16px 11px;font-size:.7rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--txt-2);opacity:.75}
.ar-indice{padding:18px 22px;margin:0 0 30px;border-radius:var(--r-l);background:var(--surface-2)}
.ar-indice > b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-2);margin-bottom:9px}
.ar-indice ol{margin:0;padding-left:20px;display:grid;gap:5px}
.ar-indice a{color:var(--txt);text-decoration:none;font-size:.94rem;line-height:1.5}
.ar-indice a:hover{color:var(--brand);text-decoration:underline}
.ar-bloque{padding:0;margin:0 0 28px}
.ar-bloque h2{font-family:var(--head);font-size:clamp(1.3rem,2.6vw,1.65rem);margin:0 0 10px;
  line-height:1.2;scroll-margin-top:calc(var(--nav-h) + 16px)}
.ar-bloque p{margin:0;font-size:1.02rem;line-height:1.78;color:var(--txt-2)}
.ar-clave{padding:20px 24px;margin:34px 0 28px;border-radius:var(--r-l);border:1px solid var(--brand);
  background:linear-gradient(140deg,var(--brand-soft),var(--surface) 64%)}
.ar-clave > b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.ar-clave p{margin:0;font-size:1.02rem;line-height:1.7}
.ar-enlaces{padding:20px 22px;border-radius:var(--r-l);background:var(--surface-2);margin-bottom:22px}
.ar-enlaces > b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-2);margin-bottom:10px}
.ar-enlaces > div{display:grid;gap:7px}
.ar-enlaces a{color:var(--brand);font-weight:700;text-decoration:none;font-size:.96rem}
.ar-enlaces a:hover{text-decoration:underline}
.ar-aviso{font-size:.8rem;color:var(--txt-2);line-height:1.6;margin:0 0 44px}
.ar-otros h2{font-family:var(--head);font-size:1.35rem;margin:0 0 14px}
.ar-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ar-lista-grande{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.ar-card{display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;color:inherit;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.ar-card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-m)}
.ar-card-foto{display:block;overflow:hidden}
.ar-card-foto img{display:block;width:100%;height:150px;object-fit:cover;
  transition:scale .5s var(--ease)}
.ar-card:hover .ar-card-foto img{scale:1.05}
.ar-card-txt{display:block;padding:15px 17px 18px}
.ar-card-txt i{display:block;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.ar-card-txt > b{display:block;font-family:var(--head);font-size:1.12rem;line-height:1.25;
  margin-bottom:6px}
.ar-card-txt > span{display:block;font-size:.87rem;line-height:1.55;color:var(--txt-2)}
.ar-lista-grande .ar-card-foto img{height:180px}
@media(max-width:600px){
  .ar-portada img{height:200px}
  .ar-bloque p{font-size:1rem}
}

/* Aviso de la ficha rápida cuando el texto largo solo está en la página completa */
.ficha-mas{margin:0;padding:18px 20px;border-radius:var(--r-m);background:var(--surface-2);
  font-size:.94rem;line-height:1.6;color:var(--txt-2)}
.ficha-mas a{color:var(--brand);font-weight:700;text-decoration:none}
.ficha-mas a:hover{text-decoration:underline}

/* =========================================================
   Desplegable de herramientas en el menú
   Con ocho entradas sueltas la barra se comía el buscador y
   no se leía nada. Ahora son cinco y las herramientas viven
   aquí dentro.
   ========================================================= */
.nav-des{position:relative;display:flex}
.nav-des-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:99px;
  border:0;background:none;font:inherit;font-size:.92rem;font-weight:600;color:var(--txt-2);
  cursor:pointer;transition:.25s var(--ease)}
.nav-des-btn:hover,.nav-des-btn[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand)}
.nav-des-btn svg{transition:rotate .3s var(--ease)}
.nav-des-btn[aria-expanded="true"] svg{rotate:180deg}
.nav-des-menu{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;z-index:60;
  min-width:270px;padding:8px;border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-l,0 18px 50px rgba(0,0,0,.16));
  display:none}
.nav-des-menu.on{display:grid;gap:2px;animation:desIn .2s var(--ease)}
@keyframes desIn{from{opacity:0;translate:-50% -8px}}
.nav-des-menu a{display:grid;padding:9px 13px;border-radius:12px;text-decoration:none;
  color:var(--txt);transition:background .2s var(--ease)}
.nav-des-menu a:hover,.nav-des-menu a:focus-visible{background:var(--brand-soft)}
.nav-des-menu b{font-size:.92rem;font-weight:700;line-height:1.3}
.nav-des-menu i{font-style:normal;font-size:.78rem;color:var(--txt-2);line-height:1.4}

/* En el menú del teléfono no hay sitio para un desplegable dentro de otro:
   los enlaces se sueltan y se leen como el resto de la lista. */
@media(max-width:1000px){
  .nav-des{display:contents}
  .nav-des-btn{display:none}
  .nav-des-menu{position:static;translate:none;display:grid !important;gap:0;
    min-width:0;padding:0;border:0;background:none;box-shadow:none;animation:none}
  .nav-des-menu a{padding:13px 16px;border-radius:0}
  .nav-des-menu i{display:none}
  .nav-des-menu b{font-weight:600;font-size:.95rem;color:var(--txt-2)}
}

/* =========================================================
   Fichas de refugio: origen, descripción y correcciones
   ========================================================= */
.rf-mano{border-left:3px solid var(--accent)}
.rf-que{font-size:.88rem;line-height:1.55;color:var(--txt-2);margin:6px 0 10px}
.rf-sin{font-size:.82rem;line-height:1.5;color:var(--txt-2);margin:6px 0 10px;
  padding:9px 12px;border-radius:var(--r-s);background:var(--surface-2)}
.rf-fix{font-size:.78rem;color:var(--txt-2);text-decoration:none;border-bottom:1px dotted var(--line)}
.rf-fix:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* =========================================================
   Texto largo de los listados de razas
   Cada listado era una frase y una rejilla de fotos; ahora
   lleva desarrollo y preguntas frecuentes debajo.
   ========================================================= */
.lst-texto{max-width:760px;margin:38px 0 10px}
.lst-bloque{margin:0 0 24px}
.lst-bloque h3{font-family:var(--head);font-size:clamp(1.15rem,2.2vw,1.4rem);margin:0 0 9px;
  line-height:1.25}
.lst-bloque p{margin:0;font-size:1rem;line-height:1.78;color:var(--txt-2)}
.lst-faq{max-width:760px;display:grid;gap:9px}
.lst-faq details{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  overflow:hidden}
.lst-faq summary{padding:14px 18px;font-weight:700;font-size:.97rem;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:10px;transition:background .2s var(--ease)}
.lst-faq summary::-webkit-details-marker{display:none}
.lst-faq summary::before{content:"+";flex:none;width:20px;height:20px;display:grid;place-items:center;
  border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:.9rem;
  transition:rotate .25s var(--ease)}
.lst-faq details[open] summary::before{content:"−";rotate:180deg}
.lst-faq summary:hover{background:var(--surface-2)}
.lst-faq p{margin:0;padding:0 18px 16px 48px;font-size:.94rem;line-height:1.7;color:var(--txt-2)}
@media(max-width:600px){
  .lst-faq p{padding-left:18px}
}

/* =========================================================
   Contraste del menú
   La barra era translúcida al 78 % y los enlaces usaban el
   gris secundario: sobre la foto del hero la mezcla dejaba
   el texto en un contraste de 2,5:1, ilegible. Ahora la barra
   es casi opaca y los enlaces usan el color de texto normal.
   ========================================================= */
.nav-links a,
.nav-links .mega-btn,
.nav-des-btn{color:var(--txt)}
.nav-links a:hover,
.nav-links .mega-btn:hover,
.nav-des-btn:hover{color:var(--brand)}
.nav-buscar input::placeholder{color:var(--txt-2);opacity:.9}

/* =========================================================
   Calendario del cachorro: fecha y explicaciones
   El campo de fecha nativo no pegaba con nada y la fecha
   aparecía rellena sin que nadie la hubiera puesto, así que
   parecía un dato del perro de quien miraba.
   ========================================================= */
.ca-campo-fecha{grid-column:span 1}
.ca-fecha{display:flex;align-items:center;gap:10px;padding:2px 4px 2px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg-2);transition:border-color .2s var(--ease),box-shadow .2s}
.ca-fecha:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ca-fecha-ic{display:grid;place-items:center;color:var(--brand);flex:none}
.ca-fecha input{flex:1;border:0;background:none;padding:10px 10px 10px 0;font:inherit;font-size:.98rem;
  font-weight:600;color:var(--txt);min-width:0}
.ca-fecha input:focus{outline:none}
.ca-fecha input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;
  transition:opacity .2s var(--ease)}
.ca-fecha input::-webkit-calendar-picker-indicator:hover{opacity:1}
.ca-sem{display:inline-flex;align-items:center;gap:5px;margin-left:3px}
.ca-sem input{width:52px;padding:3px 7px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);font:inherit;font-size:.8rem;font-weight:700;color:var(--txt);
  text-align:center}
.ca-sem input:focus{outline:none;border-color:var(--brand)}
.ca-sem b{font-size:.76rem;font-weight:600;color:var(--txt-2)}
.ca-ejemplo{margin:0 0 22px;padding:14px 18px;border-radius:var(--r-m);font-size:.9rem;line-height:1.6;
  color:var(--txt-2);background:var(--surface-2);border-left:3px solid var(--brand)}
.ca-ejemplo b{color:var(--txt)}
.ca-h-sub{margin:-6px 0 12px;font-size:.87rem;line-height:1.55;color:var(--txt-2);max-width:70ch}


/* =========================================================
   Rótulos en minúscula
   Estaban todos en versalitas con letter-spacing ancho, que a
   tamaño pequeño se lee peor y grita. Se deja la primera en
   mayúscula, como se escribe normalmente, y se afloja el espaciado
   porque en minúscula sobra.
   ========================================================= */
.stat span,
.scroll-hint,
.sec-head .kicker,
.fgroup > b,
.fact b,
table.cmp th.rowh,
.foot-grid h4,
.adopta-links h4,
.ficha-pane .datos dt,
.mega-grp > b,
.ad-llamada-com b,
.mp-prot > b,
.cmp-tabla tbody th,
.lat-t,
.gu-card-txt i,
.gu-n,
.vr em,
.ficha-top .fx i,
.facts .fact b,
.rf-datos li > span:first-child,
.frases-t,
.cc-campo > label,
.rz-compat-cifra i,
.e404-o,
.nb-grupo > b,
.nb-origen,
.ca-campo > label,
.ca-tabla thead th,
.foot-mapa b,
.gu-fig-cred,
.ar-meta,
.ar-portada figcaption,
.ar-indice > b,
.ar-clave > b,
.ar-enlaces > b,
.ar-card-txt i{
  text-transform:none;
  letter-spacing:.01em;
}

/* =========================================================
   Frase rotatoria del hero
   Va en su propia línea y con altura reservada: cuando cambia
   la frase no se mueve ni una palabra de las de arriba.
   ========================================================= */
.rot-caja{display:block;min-height:1.5em;margin-top:2px;overflow:hidden}
.rot{display:inline-block;font-weight:800;
  background:linear-gradient(100deg,var(--brand) 0%,var(--brand-2) 45%,var(--brand) 90%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rotBrillo 5s linear infinite;
  transition:opacity .3s var(--ease),translate .3s var(--ease)}
@keyframes rotBrillo{to{background-position:220% 0}}
.rot.sale{opacity:0;translate:0 -14px}
.rot.entra{animation:rotBrillo 5s linear infinite,rotEntra .42s var(--ease)}
@keyframes rotEntra{from{opacity:0;translate:0 14px}}
@media(prefers-reduced-motion:reduce){
  .rot{animation:none;background:none;color:var(--brand-2)}
  .rot.sale,.rot.entra{opacity:1;translate:0;animation:none}
}

/* =========================================================
   Quiénes somos
   ========================================================= */
.ns-main{padding-top:calc(var(--nav-h) + 28px);padding-bottom:60px;max-width:820px}
.ns-cab{margin-bottom:30px}
.ns-cab h1{font-family:var(--head);font-size:clamp(2rem,5vw,3rem);line-height:1.06;
  margin:10px 0 12px;letter-spacing:-.02em}
.ns-bloque{margin:0 0 38px}
.ns-bloque h2{font-family:var(--head);font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 12px;
  line-height:1.2}
.ns-bloque p{margin:0 0 13px;font-size:1.03rem;line-height:1.8;color:var(--txt-2)}
.ns-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  margin-top:18px}
.ns-fotos figure{margin:0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);transition:transform .25s var(--ease)}
.ns-fotos figure:hover{transform:translateY(-4px)}
.ns-fotos img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.ns-fotos figcaption{padding:10px 13px 12px;font-size:.82rem;line-height:1.45;color:var(--txt-2)}

/* Páginas legales */
.lg-main{padding-top:calc(var(--nav-h) + 28px);padding-bottom:60px;max-width:760px}
.lg-bloque{margin:0 0 26px}
.lg-bloque h2{font-family:var(--head);font-size:clamp(1.2rem,2.4vw,1.5rem);margin:0 0 9px;
  line-height:1.25}
.lg-bloque p{margin:0;font-size:.99rem;line-height:1.78;color:var(--txt-2)}
.lg-fecha{font-size:.85rem;color:var(--txt-2);margin:30px 0 26px;padding-top:18px;
  border-top:1px solid var(--line)}

/* Firma del pie */
.foot-firma{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--txt-2)}
.foot-firma a{color:var(--txt-2);font-weight:700;text-decoration:none;
  border-bottom:1px solid transparent;transition:.2s var(--ease)}
.foot-firma a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.foot-firma .corazon{color:var(--danger,#c94f3d);animation:latido 2.4s var(--ease) infinite}
@keyframes latido{0%,70%,100%{scale:1}80%{scale:1.22}90%{scale:1.1}}
@media(prefers-reduced-motion:reduce){.foot-firma .corazon{animation:none}}
.foot-legal{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px;
  font-size:.82rem}
.foot-legal a{color:var(--txt-2);text-decoration:none}
.foot-legal a:hover{color:var(--brand);text-decoration:underline}

/* =========================================================
   Arreglos varios
   ========================================================= */

/* El test: cinco opciones de tamaño no cabían en una fila y saltaban
   a una segunda, dejando una tarjeta sola debajo. */
.opts{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
@media(max-width:620px){.opts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* Las fotos de la guía salían recortadas por la mitad del perro: el
   object-fit centraba el recuadro y en una foto apaisada se comía la
   cabeza. Con la posición arriba se ve siempre la parte que importa. */
.gu-portada img,.gu-fig img,.ar-portada img{object-position:center 32%}

/* Menú de herramientas: también al pasar por encima, sin tener que pulsar. */
@media(hover:hover) and (pointer:fine){
  .nav-des:hover .nav-des-menu{display:grid;gap:2px;animation:desIn .2s var(--ease)}
  .nav-des::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
}

/* Artículos: índice lateral fijo mientras se lee. */
@media(min-width:1100px){
  .ar-main:has(.ar-indice){max-width:1120px;display:grid;
    grid-template-columns:minmax(0,1fr) 260px;gap:0 42px;align-items:start}
  .ar-main:has(.ar-indice) > .ar-migas{grid-column:1/-1}
  .ar-main:has(.ar-indice) > article{grid-column:1;min-width:0}
  .ar-main:has(.ar-indice) > .ar-otros{grid-column:1/-1}
  .ar-main > .ar-indice{position:sticky;top:calc(var(--nav-h) + 20px);
    grid-column:2;grid-row:2;margin:0;align-self:start;
    max-height:calc(100vh - var(--nav-h) - 48px);overflow:auto}
}

/* Fotos reales en «¿puede comer esto?» */
.cm-foto{width:86px;height:86px;flex:none;border-radius:16px;object-fit:cover;
  border:1px solid var(--line);background:var(--surface-2)}
.cm-mini{width:38px;height:38px;flex:none;border-radius:10px;object-fit:cover;
  background:var(--surface-2)}
.cm-cred{margin:14px 0 0;font-size:.72rem;line-height:1.4;color:var(--txt-2);opacity:.8}
.cm-cred a{color:inherit;text-decoration:underline}


/* Las fotos de «quiénes somos» salían como tiras verticales: el atributo
   height="600" del HTML ganaba al aspect-ratio, así que la caja medía
   194×600 y el recorte se comía al perro. Con height:auto vuelve a mandar
   la proporción, y el encuadre alto deja la cara dentro. */
.ns-fotos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ns-fotos img{height:auto;aspect-ratio:1;object-position:center 28%}

/* Las fotos de «quiénes somos», de dos en dos.
   Con cuatro columnas la última quedaba sola en su fila y dejaba un hueco
   enorme antes del siguiente perro. Si el bloque tiene un número impar, la
   suelta ocupa el ancho entero en vez de quedarse coja. */
.ns-fotos{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.ns-fotos figure:last-child:nth-child(odd){grid-column:1/-1}
.ns-fotos figure:last-child:nth-child(odd) img{aspect-ratio:2.1}
.ns-bloque{margin-bottom:26px}
.ns-bloque + .ns-bloque{padding-top:8px}
@media(max-width:560px){
  .ns-fotos{grid-template-columns:1fr}
  .ns-fotos figure:last-child:nth-child(odd) img{aspect-ratio:1}
}

/* El corazón del pie no latía: es un <span> en línea, y a los elementos
   en línea no se les aplican transformaciones. */
.foot-firma .corazon{display:inline-block}

/* Los bloques de texto son <section>, y la regla global de sección les
   metía hasta 104 px de padding arriba y abajo. En una página de texto
   seguido eso deja agujeros enormes entre párrafo y párrafo. */
.lst-bloque,.lg-bloque,.ns-bloque,.ar-bloque,.gu-bloque{padding:0}

/* =========================================================
   Calculadora de pienso
   ========================================================= */
.pi-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  margin-bottom:24px}
.pi-campo{display:grid;gap:8px;align-content:start}
.pi-campo.pi-ancho{grid-column:1/-1}
.pi-campo > label{font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--txt-2)}
.pi-campo > label span{font-weight:600;opacity:.75}
.pi-campo select{padding:11px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg-2);color:var(--txt);font:inherit;font-size:.95rem}
.pi-input{display:flex;align-items:center;gap:8px;padding:0 13px 0 0;border:1px solid var(--line);
  border-radius:11px;background:var(--bg-2);transition:border-color .2s var(--ease)}
.pi-input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pi-input input{flex:1;min-width:0;border:0;background:none;padding:11px 13px;font:inherit;
  font-size:1rem;font-weight:700;color:var(--txt)}
.pi-input input:focus{outline:none}
.pi-input b{font-size:.8rem;font-weight:600;color:var(--txt-2);flex:none}
.pi-pista{font-size:.76rem;color:var(--txt-2);line-height:1.45}
.pi-chips{display:flex;flex-wrap:wrap;gap:7px}
.pi-chips button{padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg-2);font:inherit;font-size:.84rem;font-weight:600;color:var(--txt-2);
  cursor:pointer;transition:all .18s var(--ease)}
.pi-chips button:hover{border-color:var(--brand);color:var(--brand)}
.pi-chips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pi-chips-aviso button.on{background:var(--brand-2);border-color:var(--brand-2)}
.pi-vacio{padding:30px;text-align:center;color:var(--txt-2);background:var(--surface-2);
  border-radius:var(--r-l);line-height:1.6}
.pi-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  margin-bottom:18px}
.pi-dato{padding:18px 20px;border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line);text-align:center}
.pi-dato-alto{background:linear-gradient(140deg,var(--brand-soft),var(--surface) 62%);
  border-color:var(--brand)}
.pi-dato b{display:block;font-family:var(--head);font-size:2.1rem;line-height:1;color:var(--brand)}
.pi-dato i{display:block;font-style:normal;font-size:.8rem;font-weight:700;color:var(--txt-2);
  margin-top:5px}
.pi-dato span{display:block;font-size:.78rem;color:var(--txt-2);margin-top:7px;line-height:1.4}
.pi-nota-vida{margin:0 0 6px;font-size:.92rem;line-height:1.6;color:var(--txt-2)}
.pi-nota-vida b{color:var(--txt)}
.pi-h{font-family:var(--head);font-size:1.2rem;margin:26px 0 12px}
.pi-etiqueta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin-bottom:12px}
.pi-etiqueta > div{padding:14px 16px;border-radius:var(--r-m);background:var(--surface-2)}
.pi-etiqueta .pi-ancho{grid-column:1/-1}
.pi-etiqueta i{display:block;font-style:normal;font-size:.72rem;font-weight:700;color:var(--txt-2)}
.pi-etiqueta b{display:block;font-size:1.15rem;margin-top:3px}
.pi-etiqueta span{display:block;font-size:.8rem;color:var(--txt-2);margin-top:2px}
.pi-nota{margin:0;font-size:.93rem;line-height:1.7;color:var(--txt-2)}
.pi-avisos{display:grid;gap:10px}
.pi-aviso{padding:15px 18px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--brand-2)}
.pi-aviso b{display:block;font-size:.97rem;margin-bottom:4px}
.pi-aviso p{margin:0;font-size:.89rem;line-height:1.6;color:var(--txt-2)}
.pi-aviso-legal{margin:24px 0 0;padding:14px 17px;border-radius:var(--r-m);background:var(--surface-2);
  font-size:.83rem;line-height:1.6;color:var(--txt-2)}

/* =========================================================
   Herramientas nuevas: condición corporal, edad, crecimiento,
   lista de la compra, vacunas y PPP
   ========================================================= */

/* --- condición corporal --- */
.cb-escala{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;
  margin-bottom:18px}
.cb-escala button{padding:12px 8px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font:inherit;transition:all .18s var(--ease)}
.cb-escala button:hover{border-color:var(--brand);transform:translateY(-2px)}
.cb-escala button b{display:block;font-family:var(--head);font-size:1.5rem;color:var(--txt-2)}
.cb-escala button i{display:block;font-style:normal;font-size:.7rem;color:var(--txt-2);
  margin-top:2px;line-height:1.3}
.cb-escala button.on{background:var(--brand);border-color:var(--brand)}
.cb-escala button.on b,.cb-escala button.on i{color:#fff}
.cb-peso{display:grid;gap:8px;max-width:300px;margin-bottom:22px}
.cb-peso label{font-size:.72rem;font-weight:700;color:var(--txt-2)}
.cb-peso label span{font-weight:600;opacity:.75}
.cb-ficha{padding:22px 24px;border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--surface);margin-bottom:16px}
.cb-ficha.cb-ok{border-left:5px solid var(--accent);
  background:linear-gradient(120deg,var(--accent-soft),var(--surface) 55%)}
.cb-ficha.cb-alto{border-left:5px solid var(--brand-2);
  background:linear-gradient(120deg,var(--brand-soft),var(--surface) 55%)}
.cb-ficha.cb-bajo{border-left:5px solid var(--danger);
  background:linear-gradient(120deg,rgba(201,79,61,.07),var(--surface) 55%)}
.cb-cab{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.cb-cab > b{font-family:var(--head);font-size:2.6rem;line-height:1;color:var(--brand);flex:none}
.cb-cab h3{font-family:var(--head);font-size:1.4rem;margin:0;line-height:1.15}
.cb-cab i{font-style:normal;font-size:.82rem;color:var(--txt-2)}
.cb-ficha p{margin:0 0 9px;font-size:.95rem;line-height:1.65;color:var(--txt-2)}
.cb-ficha p b{color:var(--txt)}
.cb-que{padding:12px 15px;border-radius:var(--r-s);background:var(--surface-2);margin-top:12px!important}
.cb-calculo{padding:18px 22px;border-radius:var(--r-l);background:var(--surface-2)}
.cb-calculo p{margin:0 0 9px;font-size:.96rem;line-height:1.7;color:var(--txt-2)}
.cb-calculo b{color:var(--txt)}
.cb-plazo{font-size:.9rem!important}
.cb-enlace a{color:var(--brand);font-weight:700;text-decoration:none}
.cb-enlace a:hover{text-decoration:underline}

/* --- edad --- */
.ed-cifra{padding:24px;border-radius:var(--r-l);text-align:center;margin-bottom:14px;
  background:linear-gradient(140deg,var(--brand-soft),var(--surface) 62%);border:1px solid var(--brand)}
.ed-cifra b{display:block;font-family:var(--head);font-size:3.4rem;line-height:1;color:var(--brand)}
.ed-cifra i{display:block;font-style:normal;font-size:.86rem;font-weight:700;color:var(--txt-2);
  margin-top:6px}
.ed-cifra span{display:block;font-size:.88rem;color:var(--txt-2);margin-top:8px}
.ed-etapa{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:15px 20px;
  border-radius:var(--r-m);background:var(--surface-2);margin-bottom:16px}
.ed-etapa b{font-family:var(--head);font-size:1.2rem}
.ed-etapa span{font-size:.9rem;color:var(--txt-2)}
.ed-h{font-family:var(--head);font-size:1.2rem;margin:26px 0 10px}
.ed-nota{margin:0 0 12px;font-size:.95rem;line-height:1.7;color:var(--txt-2)}
.ed-nota b{color:var(--txt)}
.ed-aviso{margin:0 0 14px;padding:14px 17px;border-radius:var(--r-m);background:var(--surface-2);
  font-size:.9rem;line-height:1.65;color:var(--txt-2)}
.ed-aviso a{color:var(--brand);font-weight:700;text-decoration:none}
.ed-tabla{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);margin-top:12px}
.ed-tabla table{width:100%;border-collapse:collapse;font-size:.92rem}
.ed-tabla th,.ed-tabla td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.ed-tabla thead th{font-size:.72rem;color:var(--txt-2)}
.ed-tabla tr:last-child td{border-bottom:0}
.ed-tabla tr.ed-ahora{background:var(--brand-soft);font-weight:700}

/* --- lista de la compra --- */
.li-cab{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 24px;
  border-radius:var(--r-l);background:linear-gradient(140deg,var(--brand-soft),var(--surface) 62%);
  border:1px solid var(--brand);margin-bottom:22px}
.li-total b{font-family:var(--head);font-size:2rem;line-height:1;color:var(--brand)}
.li-total i{display:block;font-style:normal;font-size:.82rem;font-weight:700;color:var(--txt-2)}
.li-total span{display:block;font-size:.8rem;color:var(--txt-2);margin-top:3px}
.li-acc{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.li-grupo{margin:0 0 26px;padding:0}
.li-grupo h3{font-family:var(--head);font-size:1.15rem;margin:0 0 10px}
.li-grupo ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.li-grupo li{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  transition:opacity .2s var(--ease)}
.li-grupo li.hecho{opacity:.5}
.li-grupo li.hecho .li-txt b{text-decoration:line-through}
.li-grupo label{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;cursor:pointer}
.li-grupo input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--brand)}
.li-txt{flex:1;min-width:0}
.li-txt b{display:block;font-size:.97rem}
.li-txt i{display:block;font-style:normal;font-size:.84rem;color:var(--txt-2);line-height:1.5;
  margin-top:2px}
.li-precio{flex:none;font-size:.85rem;font-weight:700;color:var(--brand);white-space:nowrap}
@media print{
  .nav,.mega,footer,.li-acc,#top,.cmp-tray,.ad-intro+p{display:none!important}
  .li-cab{background:none;border:0;padding:0}
  .li-grupo li{break-inside:avoid}
}

/* --- PPP --- */
.pp-razas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.pp-razas span{padding:7px 14px;border-radius:999px;background:var(--surface-2);
  font-size:.86rem;font-weight:600}
.pp-razas .pp-extra{background:var(--brand-soft);color:var(--brand)}
.pp-tramites{margin:0 0 14px;padding-left:22px;display:grid;gap:9px}
.pp-tramites li b{display:block;font-size:.97rem}
.pp-tramites li span{font-size:.87rem;color:var(--txt-2);line-height:1.55}

/* =========================================================
   Comparativas: «en qué se parecen» y el aviso final
   ========================================================= */

/* Con tres columnas quedaba una tarjeta sola en la segunda fila.
   De dos en dos siempre cuadra, y se lee mejor. */
.cmp-parecidos{grid-template-columns:repeat(2,1fr)!important}
.cmp-parecidos > li:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:640px){.cmp-parecidos{grid-template-columns:1fr!important}}

/* El aviso final iba pegado a las tarjetas de salud y con el texto
   apelotonado contra el borde. Ahora respira y va centrado. */
.pag-comparativa .warn,
.cmp-tabla + .warn,
main > .warn{margin:26px auto 30px;padding:18px 24px;max-width:70ch;text-align:center;
  font-size:.88rem;line-height:1.65;border-radius:var(--r-l)}

/* El texto de los listados tiene ancho de lectura limitado, pero se quedaba
   pegado a la izquierda dentro de un contenedor mucho más ancho. */
.lst-texto,.lst-faq{margin-left:0;margin-right:auto}

/* =========================================================
   Mega menú de herramientas
   Once herramientas en una lista vertical era un chorizo.
   En tres columnas, agrupadas por para qué sirven, se ve
   todo de un vistazo.
   ========================================================= */
.nav-des-menu{min-width:760px;padding:20px 22px 14px;left:auto;right:-140px;translate:none}
.nav-des-menu.on{animation:ndIn .22s var(--ease)}
@keyframes ndIn{from{opacity:0;translate:0 -10px}}
.nd-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px}
.nd-col{display:grid;gap:2px;align-content:start}
.nd-tit{font-size:.68rem;font-weight:800;letter-spacing:.06em;color:var(--brand);
  padding:0 10px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.nd-col > a{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:11px;
  text-decoration:none;color:inherit;transition:background .18s var(--ease)}
.nd-col > a:hover,.nd-col > a:focus-visible{background:var(--brand-soft)}
.nd-ic{font-size:1.05rem;line-height:1.3;flex:none;width:22px;text-align:center}
.nd-txt{min-width:0}
.nd-txt b{display:block;font-size:.9rem;font-weight:700;line-height:1.3}
.nd-txt i{display:block;font-style:normal;font-size:.76rem;color:var(--txt-2);line-height:1.4;
  margin-top:1px}
.nd-pie{display:block;margin-top:10px;padding:11px 12px;border-radius:11px;text-align:center;
  background:var(--surface-2);color:var(--brand);font-size:.85rem;font-weight:700;
  text-decoration:none;transition:background .18s var(--ease)}
.nd-pie:hover{background:var(--brand-soft)}
@media(max-width:1200px){
  .nav-des-menu{min-width:560px;right:-60px}
  .nd-cols{grid-template-columns:repeat(2,1fr)}
}
/* En el teléfono no hay mega menú: los enlaces se sueltan en la lista. */
@media(max-width:1000px){
  .nav-des-menu{min-width:0;right:auto;padding:0}
  .nd-cols{display:contents}
  .nd-col{display:contents}
  .nd-tit{display:block;padding:14px 16px 4px;border:0;margin:0;font-size:.64rem}
  .nd-col > a{padding:11px 16px;border-radius:0}
  .nd-ic{display:none}
  .nd-txt i{display:none}
  .nd-txt b{font-weight:600;font-size:.95rem;color:var(--txt-2)}
  .nd-pie{margin:6px 16px 10px}
}

/* El mega menú se salía por la derecha al anclarlo al botón. Se ancla a la
   barra entera y se centra en ella: así cabe siempre, esté donde esté el
   botón dentro del menú. */
@media(min-width:1001px){
  .nav .wrap{position:relative}
  .nav-des{position:static}
  .nav-des-menu{left:50%;right:auto;translate:-50% 0;max-width:min(760px,94vw)}
  .nav-des-menu.on{animation:ndIn2 .22s var(--ease)}
  @keyframes ndIn2{from{opacity:0;translate:-50% -10px}}
}

/* Logo del refugio en su ficha. Cuando la entidad no tiene web o su
   logo no se puede recuperar, la inicial en un círculo ocupa el mismo
   hueco, para que la rejilla no baile. */
.rf-cab{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rf-logo{width:44px;height:44px;flex:none;border-radius:11px;object-fit:contain;
  background:#fff;border:1px solid var(--line);padding:3px}
.rf-inicial{width:44px;height:44px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-family:var(--head);font-size:1.3rem;
  font-weight:800}
.rf-cab h3{margin:0;font-size:1.05rem;line-height:1.25}

/* =========================================================
   Secciones nuevas de la ficha de raza
   ========================================================= */
.et-lista{display:grid;gap:10px;margin-bottom:6px}
.et-bloque{padding:16px 20px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--brand)}
.et-bloque b{display:block;font-family:var(--head);font-size:1.02rem;margin-bottom:5px}
.et-bloque p{margin:0;font-size:.93rem;line-height:1.7;color:var(--txt-2)}
.cf-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px}
.cf-item{display:block;padding:15px 18px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform .2s var(--ease),border-color .2s var(--ease)}
.cf-item:hover{transform:translateY(-3px);border-color:var(--brand)}
.cf-item b{display:block;font-family:var(--head);font-size:1.05rem;margin-bottom:4px;
  color:var(--brand)}
.cf-item span{font-size:.87rem;line-height:1.55;color:var(--txt-2)}
.rz-calc-a{color:var(--brand);font-weight:700;text-decoration:none;font-size:.94rem}
.rz-calc-a:hover{text-decoration:underline}

/* El radar salía a 72 px: el contenedor es un grid con place-items:center,
   que encoge al hijo a su contenido, y un SVG sin ancho no reclama nada. */
.radar-wrap{display:block;text-align:center;padding:10px 0 22px}
.rd-svg{display:block;width:min(560px,100%);height:auto;margin:0 auto 4px}

/* Un SVG con viewBox y height:auto puede colapsar a cero. Con la proporción
   del viewBox declarada, el navegador ya sabe cuánto alto reservar. */
.rd-svg{aspect-ratio:480/460;height:auto}

/* =========================================================
   Guía de la escala de peso
   Pedir un número del 1 al 9 obliga a saberse la escala. Con
   tres preguntas de lo que se ve y se toca sale el mismo
   número sin tener que aprenderse nada.
   ========================================================= */
.cb-guia{display:grid;gap:16px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--surface);margin-bottom:16px}
.cb-preg > b{display:block;font-size:1rem;margin-bottom:9px}
.cb-ops{display:flex;flex-wrap:wrap;gap:7px}
.cb-ops button{padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg-2);font:inherit;font-size:.86rem;font-weight:600;color:var(--txt-2);
  cursor:pointer;transition:all .18s var(--ease)}
.cb-ops button:hover{border-color:var(--brand);color:var(--brand)}
.cb-ops button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cb-manual{margin-bottom:18px}
.cb-manual summary{padding:11px 16px;border-radius:var(--r-m);background:var(--surface-2);
  font-size:.88rem;font-weight:600;color:var(--txt-2);cursor:pointer;list-style:none}
.cb-manual summary::-webkit-details-marker{display:none}
.cb-manual summary:hover{color:var(--brand)}
.cb-manual[open] summary{margin-bottom:12px}

/* El tamaño deducido en «cuánto va a crecer», con opción de corregirlo */
.cr-ajuste{margin:0 0 18px;padding:14px 18px;border-radius:var(--r-m);background:var(--surface-2);
  font-size:.9rem;line-height:1.7;color:var(--txt-2)}
.cr-ajuste b{color:var(--txt)}
.pi-chips-linea{display:inline-flex;flex-wrap:wrap;gap:5px;vertical-align:middle;margin-left:4px}
.pi-chips-linea button{padding:5px 11px;font-size:.8rem}

/* =========================================================
   Comparador de coberturas de seguro
   ========================================================= */
.sg-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.sg-tipo{padding:20px 22px;border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--surface)}
.sg-tipo > b{display:block;font-family:var(--head);font-size:1.2rem;margin-bottom:8px}
.sg-tipo p{margin:0 0 9px;font-size:.92rem;line-height:1.65;color:var(--txt-2)}
.sg-tipo p b{color:var(--txt)}
.sg-obl{padding:10px 13px;border-radius:var(--r-s);background:var(--surface-2)}
.sg-ojo{padding:10px 13px;border-radius:var(--r-s);background:var(--brand-soft)}
.sg-veredicto{margin:0 0 6px;padding:16px 20px;border-radius:var(--r-l);
  background:linear-gradient(140deg,var(--brand-soft),var(--surface) 62%);border:1px solid var(--brand);
  font-size:.98rem;line-height:1.7;color:var(--txt-2)}
.sg-veredicto b{color:var(--txt)}
.sg-riesgos{display:grid;gap:10px;margin-bottom:6px}
.sg-riesgo{padding:15px 18px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--danger)}
.sg-riesgo b{display:block;font-size:.98rem;margin-bottom:4px}
.sg-riesgo p{margin:0;font-size:.89rem;line-height:1.6;color:var(--txt-2)}
.sg-cobs{display:grid;gap:8px;margin-bottom:8px}
.sg-cob{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  overflow:hidden}
.sg-cob.sg-clave{border-color:var(--brand)}
.sg-cob summary{display:flex;align-items:center;gap:11px;padding:14px 18px;cursor:pointer;
  font-weight:700;font-size:.97rem;list-style:none}
.sg-cob summary::-webkit-details-marker{display:none}
.sg-cob summary:hover{background:var(--surface-2)}
.sg-n{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);color:var(--txt-2);font-size:.78rem;font-weight:800}
.sg-clave .sg-n{background:var(--brand);color:#fff}
.sg-cob summary i{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:700;
  color:var(--brand);background:var(--brand-soft);padding:3px 9px;border-radius:999px}
.sg-cob p{margin:0;padding:0 18px 12px 53px;font-size:.92rem;line-height:1.65;color:var(--txt-2)}
.sg-mira{padding-bottom:16px!important}
.sg-mira b{color:var(--txt)}
@media(max-width:600px){.sg-cob p{padding-left:18px}}

/* =========================================================
   El plan personalizado
   ========================================================= */
.pl-cab{padding:20px 24px;border-radius:var(--r-l);margin-bottom:18px;
  background:linear-gradient(140deg,var(--brand-soft),var(--surface) 62%);border:1px solid var(--brand)}
.pl-cab > b{display:block;font-family:var(--head);font-size:1.6rem;line-height:1.15;color:var(--brand)}
.pl-cab span{display:block;font-size:.88rem;color:var(--txt-2);margin-top:4px}
.pl-desglose{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;
  margin-bottom:12px}
.pl-desglose > div{padding:14px 17px;border-radius:var(--r-m);background:var(--surface-2)}
.pl-desglose i{display:block;font-style:normal;font-size:.76rem;font-weight:700;color:var(--txt-2)}
.pl-desglose b{display:block;font-family:var(--head);font-size:1.3rem;margin-top:3px}
.pl-avisos{display:grid;gap:10px;margin-bottom:6px}
.pl-aviso{padding:15px 18px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--brand-2)}
.pl-aviso b{display:block;font-size:.97rem;margin-bottom:4px}
.pl-aviso p{margin:0;font-size:.89rem;line-height:1.6;color:var(--txt-2)}
.pl-cal{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:7px}
.pl-cal li{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;
  border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line)}
.pl-cal b{font-size:.94rem}
.pl-cal span{font-size:.86rem;color:var(--brand);font-weight:700}
.pl-etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
  margin-bottom:8px}
.pl-etapas > div{padding:14px 17px;border-radius:var(--r-m);background:var(--surface-2)}
.pl-etapas b{display:block;font-size:.92rem;margin-bottom:3px}
.pl-etapas span{font-size:.83rem;line-height:1.5;color:var(--txt-2)}
.pl-acc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line)}
.pl-nota-pdf{font-size:.82rem;color:var(--txt-2)}
.pl-con-raza .pl-solo-mestizo{display:none}

/* =========================================================
   Analizador de etiqueta de pienso
   ========================================================= */
.et-form{display:grid;gap:16px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--surface);margin-bottom:22px}
.et-campo{display:grid;gap:8px}
.et-campo > label{font-size:.72rem;font-weight:700;color:var(--txt-2)}
.et-campo > label span{font-weight:600;opacity:.75}
.et-campo textarea{padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2);color:var(--txt);font:inherit;font-size:.95rem;line-height:1.6;resize:vertical}
.et-campo textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.et-ej{justify-self:start;padding:6px 13px;border-radius:999px;border:1px dashed var(--line);
  background:none;font:inherit;font-size:.8rem;font-weight:600;color:var(--txt-2);cursor:pointer}
.et-ej:hover{border-color:var(--brand);color:var(--brand)}
.et-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
#etCompleto.on{background:var(--brand);border-color:var(--brand);color:#fff}
.et-verd{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r-l);
  margin-bottom:14px}
.et-verd-ic{font-size:2rem;line-height:1;flex:none}
.et-verd b{display:block;font-family:var(--head);font-size:1.4rem;line-height:1.15}
.et-verd span{font-size:.9rem;color:var(--txt-2)}
.et-verd.et-bien{background:linear-gradient(120deg,var(--accent-soft),var(--surface) 55%);
  border:1px solid var(--accent)}
.et-verd.et-ojo{background:linear-gradient(120deg,var(--brand-soft),var(--surface) 55%);
  border:1px solid var(--brand-2)}
.et-verd.et-mal{background:linear-gradient(120deg,rgba(201,79,61,.09),var(--surface) 55%);
  border:1px solid var(--danger)}
.et-avisos{display:grid;gap:9px;margin-bottom:8px}
.et-aviso{display:flex;gap:12px;padding:14px 17px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line)}
.et-aviso > span{font-size:1.1rem;line-height:1.4;flex:none}
.et-aviso.et-bien{border-left:3px solid var(--accent)}
.et-aviso.et-ojo{border-left:3px solid var(--brand-2)}
.et-aviso.et-mal{border-left:3px solid var(--danger)}
.et-aviso b{display:block;font-size:.96rem;margin-bottom:3px}
.et-aviso p{margin:0;font-size:.88rem;line-height:1.6;color:var(--txt-2)}

/* Presupuesto de urgencias */
.ur-lista{display:grid;gap:8px}
.ur-item{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;font:inherit;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.ur-item:hover{border-color:var(--brand)}
.ur-item.on{border-color:var(--brand);background:var(--brand-soft)}
.ur-check{width:22px;height:22px;flex:none;border-radius:6px;border:1px solid var(--line);
  display:grid;place-items:center;background:var(--surface);color:var(--brand);font-weight:800;
  font-size:.85rem}
.ur-item.on .ur-check{background:var(--brand);border-color:var(--brand);color:#fff}
.ur-txt{flex:1;min-width:0}
.ur-txt b{display:block;font-size:.96rem}
.ur-txt i{display:block;font-style:normal;font-size:.85rem;color:var(--txt-2);line-height:1.5;margin-top:2px}
.ur-precio{flex:none;font-size:.88rem;font-weight:700;color:var(--brand);white-space:nowrap}

/* =========================================================
   ¿Dónde puedo llevar al perro?
   ========================================================= */
.do-busca{display:flex;align-items:center;gap:11px;padding:14px 20px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  margin-bottom:24px}
.do-busca input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:1.02rem;
  color:var(--txt);min-width:0}
.do-grupo{margin-bottom:28px}
.do-grupo h3{font-family:var(--head);font-size:1.3rem;margin:0 0 12px;display:flex;
  align-items:center;gap:9px}
.do-items{display:grid;gap:10px}
.do-item{padding:15px 18px;border-radius:var(--r-m);background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--line)}
.do-item.do-si{border-left-color:var(--accent)}
.do-item.do-ojo{border-left-color:var(--brand-2)}
.do-item.do-depende{border-left-color:var(--brand)}
.do-item.do-no{border-left-color:var(--danger)}
.do-cab{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.do-ic{font-size:1.05rem;flex:none}
.do-cab b{font-size:1rem}
.do-et{margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--txt-2);background:var(--surface-2);padding:3px 10px;border-radius:999px}
.do-item p{margin:0;font-size:.9rem;line-height:1.65;color:var(--txt-2)}

/* =========================================================
   Índice de herramientas
   ========================================================= */
.hi-grupo{margin-bottom:34px;padding:0}
.hi-cab{margin-bottom:14px}
.hi-cab h2{font-family:var(--head);font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 3px}
.hi-cab p{margin:0;font-size:.92rem;color:var(--txt-2)}
.hi-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.hi-card{display:flex;gap:14px;padding:17px 19px;border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.hi-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-m)}
.hi-ic{font-size:1.6rem;line-height:1.2;flex:none}
.hi-txt{min-width:0}
.hi-txt b{display:block;font-size:1.02rem;margin-bottom:3px}
.hi-txt > span{display:block;font-size:.86rem;line-height:1.5;color:var(--txt-2)}

/* =========================================================
   Recuadro de enlaces de afiliado (solo aparece si hay enlaces)
   ========================================================= */
.af-caja{margin:22px 0;padding:18px 22px;border-radius:var(--r-l);background:var(--surface-2);
  border:1px solid var(--line)}
.af-cab{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.72rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.af-cab b{color:var(--txt-2)}
.af-links{display:grid;gap:8px;margin-bottom:12px}
.af-links a{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;padding:13px 16px;
  border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.af-links a:hover{border-color:var(--brand);transform:translateY(-2px)}
.af-links a > b{font-size:.98rem;font-weight:700}
.af-links a > span{font-size:.86rem;color:var(--txt-2)}
.af-flecha{margin-left:auto;color:var(--brand);font-weight:700}
.af-aviso{margin:0;font-size:.78rem;line-height:1.6;color:var(--txt-2);opacity:.9}
.af-aviso a{color:inherit;text-decoration:underline}

/* =========================================================
   Marcas de pienso: cómo situarlas
   ========================================================= */
.mp-escuelas{margin:0 0 8px;padding:0}
.mp-escuela{padding:16px 20px;border-radius:var(--r-m);background:var(--surface-2);margin-bottom:10px}
.mp-escuela b{display:block;font-family:var(--head);font-size:1.08rem;margin-bottom:5px}
.mp-escuela p{margin:0;font-size:.94rem;line-height:1.7;color:var(--txt-2)}
.mp-intro{font-size:.95rem;line-height:1.7;color:var(--txt-2);margin:0 0 18px}
.mp-intro b{color:var(--txt)}
.mp-segmentos{display:grid;gap:12px}
.mp-seg{padding:20px 22px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.mp-seg-cab{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.mp-seg-n{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);font-family:var(--head);font-weight:800;font-size:1.1rem}
.mp-seg-cab h3{font-family:var(--head);font-size:1.2rem;margin:0;line-height:1.15}
.mp-precio{font-size:.82rem;font-weight:700;color:var(--brand)}
.mp-seg p{margin:0 0 9px;font-size:.93rem;line-height:1.68;color:var(--txt-2)}
.mp-seg p b{color:var(--txt)}
.mp-reconoces{padding:11px 14px;border-radius:var(--r-s);background:var(--surface-2)}
.mp-ejemplos{font-size:.9rem;line-height:1.6;color:var(--txt-2)}
.mp-ejemplos b{color:var(--txt)}

/* Logos de las marcas en la guía de pienso */
.mp-ejemplos{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.mp-marca{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 12px;
  border-radius:var(--r-m);background:var(--surface-2);min-width:78px;max-width:100px}
.mp-marca img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:#fff;padding:3px}
.mp-marca i{font-style:normal;font-size:.72rem;line-height:1.25;text-align:center;color:var(--txt-2)}
.mp-marca-txt{justify-content:center;font-size:.82rem;font-weight:600;color:var(--txt-2);
  text-align:center;padding:14px 14px}

/* =========================================================
   Artículos destacados en la portada
   ========================================================= */
#portada-articulos{padding:clamp(48px,7vw,88px) 0}
.sec-head p{margin:8px 0 0;font-size:1rem;color:var(--txt-2)}
.sec-head p a{color:var(--brand);font-weight:700;text-decoration:none}
.sec-head p a:hover{text-decoration:underline}
.pa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
  margin-top:26px}
.pa-card{display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;color:inherit;
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.pa-card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-m)}
.pa-foto{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--surface-2)}
.pa-foto img{width:100%;height:100%;object-fit:cover;transition:scale .5s var(--ease)}
.pa-card:hover .pa-foto img{scale:1.05}
.pa-txt{display:block;padding:16px 18px 18px}
.pa-txt i{display:block;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.pa-txt > b{display:block;font-family:var(--head);font-size:1.12rem;line-height:1.25;margin-bottom:6px}
.pa-txt > span{display:block;font-size:.87rem;line-height:1.55;color:var(--txt-2)}

/* =========================================================
   Vídeo de la home y del pie, y destello del título
   ========================================================= */
#video-perros{padding:clamp(38px,6vw,70px) 0}
.vd-caja{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(20px,3vw,44px);align-items:center}
.vd-media{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l);
  aspect-ratio:16/9;background:var(--surface-2)}
.vd-video{width:100%;height:100%;object-fit:cover;display:block}
.vd-txt .kicker{font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.vd-txt h2{font-family:var(--head);font-size:clamp(1.6rem,3vw,2.3rem);margin:8px 0 12px;line-height:1.1}
.vd-txt p{color:var(--txt-2);line-height:1.72;margin:0 0 18px;max-width:50ch}
@media(max-width:820px){.vd-caja{grid-template-columns:1fr}}

/* Pie con el vídeo de fondo, muy difuminado, para que el texto no se pierda */
.foot-media{position:relative;overflow:hidden;isolation:isolate}
.foot-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:blur(9px) saturate(1.08);transform:scale(1.12);pointer-events:none;opacity:.85}
.foot-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface) 88%,transparent),
    color-mix(in srgb,var(--surface) 80%,transparent))}
.foot-media > :not(.foot-bg):not(.foot-veil){position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.foot-bg,.vd-video{display:none}}

/* Destello que barre SOLO las letras del título del héroe (recortado al texto) */
.hero h1,.hero h1 .grad{
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  background-image:
    linear-gradient(110deg,transparent 38%,rgba(255,255,255,.75) 46%,#fff 50%,rgba(255,255,255,.75) 54%,transparent 62%),
    linear-gradient(100deg,#fff4e4,#ffffff 45%,#f2fffc 72%,#fff4e4);
  background-size:250% 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:220% 0,0 0;
  animation:destello 4s ease-in-out infinite;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.72)) drop-shadow(0 0 32px rgba(255,240,220,.6))}
@keyframes destello{
  0%{background-position:220% 0,0 0}
  32%{background-position:-150% 0,0 0}
  100%{background-position:-150% 0,0 0}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero h1 .grad{animation:none;background-position:0 0,0 0}}

/* Clips de vídeo intercalados en el carrusel del héroe */
.hero-slides .sl video{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hero-dots .dot-vid{position:relative}
.hero-dots .dot-vid::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:4px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent;
  opacity:.9}

/* =========================================================
   Ficha de raza: menú lateral sticky con las secciones
   ========================================================= */
.rz-cols{display:grid;grid-template-columns:212px minmax(0,1fr);gap:36px;align-items:start}
.rz-cont{min-width:0}
.rz-cont [id^="s-"]{scroll-margin-top:calc(var(--nav-h) + 18px)}
.rz-nav{position:sticky;top:calc(var(--nav-h) + 18px);align-self:start;max-height:calc(100svh - var(--nav-h) - 34px);overflow:auto;scrollbar-width:thin}
.rz-nav-in{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:15px 13px;box-shadow:var(--shadow-s)}
.rz-nav-in > b{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-2);margin:0 0 9px;padding-left:11px}
.rz-nav nav{display:grid;gap:2px}
.rz-nav a{display:block;padding:7px 11px;border-radius:9px;font-size:.89rem;font-weight:600;
  color:var(--txt-2);text-decoration:none;border-left:2px solid transparent;line-height:1.3;
  transition:background .18s var(--ease),color .18s var(--ease)}
.rz-nav a:hover{background:var(--brand-soft);color:var(--brand)}
.rz-nav a.on{background:var(--brand-soft);color:var(--brand);border-left-color:var(--brand)}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:900px){.rz-cols{grid-template-columns:1fr;gap:0}.rz-nav{display:none}}

/* Iconos de línea de los destacados de la ficha (báscula, regla, corazón, cronómetro) */
.ficha-top .fx-ic svg{width:30px;height:30px;display:block}

/* Logo dentro de los botones de portal de adopción */
.btn-logo{display:inline-flex;align-items:center;gap:8px}
.btn-logo img{width:20px;height:20px;border-radius:5px;object-fit:contain;background:#fff;padding:1px;flex:none}

/* Encuadre alto en las miniaturas que recortan, para no cortar la cabeza del perro */
.ar-card-foto img,.pa-foto img,.lst-fotos img{object-position:center 30%}

/* Scroll-margin para las secciones del hub de herramientas (menú lateral) */
.rz-cont [id^="hg-"]{scroll-margin-top:calc(var(--nav-h) + 18px)}

/* =========================================================
   Slider «Más herramientas» al pie de cada herramienta
   ========================================================= */
.mh{margin-top:48px;border-top:1px solid var(--line);padding-top:26px}
.mh-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.mh-cab h2{font-family:var(--head);font-size:1.3rem;margin:0}
.mh-flechas{display:flex;gap:6px}
.mh-nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--txt);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease)}
.mh-nav:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.mh-track{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.mh-track::-webkit-scrollbar{display:none}
.mh-card{flex:0 0 auto;width:152px;scroll-snap-align:start;display:flex;flex-direction:column;gap:9px;
  padding:16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  text-decoration:none;color:inherit;transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease)}
.mh-card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-m)}
.mh-ic{font-size:1.7rem;line-height:1}
.mh-card b{font-size:.92rem;line-height:1.28;font-weight:700}

/* Cajas de interés en la barra lateral de artículos */
.rz-nav-cta{margin-top:14px}
.rz-nav-cta > b{display:block;font-family:var(--head);font-size:1rem;letter-spacing:0;text-transform:none;
  color:var(--txt);margin-bottom:7px;padding-left:0}
.rz-nav-cta p{margin:0 0 12px;font-size:.85rem;line-height:1.55;color:var(--txt-2)}
.rz-nav-cta .btn{width:100%;justify-content:center}

/* Home: botón grande «Ver todos los artículos» */
.pa-mas{text-align:center;margin-top:30px}
.pa-btn{font-size:1.05rem;padding:15px 34px}

/* Pie: iconos en los títulos, viñetas en los enlaces y algo más recogido */
.foot-mapa b .fm-ic{margin-right:7px;font-size:.95em}
.foot-mapa > div{gap:5px}
.foot-mapa > div > a{position:relative;padding-left:14px}
.foot-mapa > div > a::before{content:"›";position:absolute;left:0;color:var(--brand);
  font-weight:700;opacity:.65;transition:transform .18s var(--ease)}
.foot-mapa > div > a:hover::before{transform:translateX(2px);opacity:1}

/* Pie de la home (foot-grid): iconos en títulos, viñetas y más recogido */
.foot-grid h4 .fm-ic{margin-right:7px;font-size:.95em}
.foot-grid a{padding:3px 0}
.foot-grid a:not(.logo){position:relative;padding-left:14px}
.foot-grid a:not(.logo)::before{content:"›";position:absolute;left:0;color:var(--brand);
  font-weight:700;opacity:.65;transition:transform .18s var(--ease)}
.foot-grid a:not(.logo):hover::before{transform:translateX(2px);opacity:1}

/* Logo de marca (icono aro+huella) en la cabecera y el pie */
.logo .logo-marca{width:38px;height:38px;border-radius:12px;object-fit:contain;background:#fff;
  box-shadow:var(--shadow-s);animation:wag 4s var(--ease) infinite;flex:none}
@media(prefers-reduced-motion:reduce){.logo .logo-marca{animation:none}}

/* =========================================================
   AJUSTES DE MÓVIL (cabecera, menú, héroe, ficha)
   ========================================================= */
@media(max-width:860px){
  /* Menú móvil: tarjeta flotante compacta anclada arriba a la derecha */
  .nav-links{inset:calc(var(--nav-h) + 8px) 10px auto auto;left:auto;width:min(272px,82vw);
    border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-l);padding:8px;
    text-align:left;max-height:calc(100svh - var(--nav-h) - 24px);overflow:auto}
  .nav-links > a{padding:11px 14px;border-radius:11px;font-size:.96rem;font-weight:600}
  .nav-links > a:hover{background:var(--brand-soft);color:var(--brand)}
  /* colapsar la lista larga de herramientas: solo los enlaces resumen */
  .nav-des-menu{gap:2px!important}
  .nav-des-menu .nd-tit,.nav-des-menu .nd-col{display:none!important}
  .nav-des-menu .nd-pie{display:block!important;padding:11px 14px;border-radius:11px;
    font-size:.96rem;font-weight:600;color:var(--txt)}
  .nav-des-menu .nd-pie:hover{background:var(--brand-soft);color:var(--brand)}
}
@media(max-width:560px){
  /* Logo en una línea y pequeño */
  .logo{font-size:1rem;gap:7px}
  .logo span{white-space:nowrap}
  .logo .logo-marca{width:30px;height:30px;border-radius:9px}
  .nav .wrap{gap:6px}
  .icon-btn{width:38px;height:38px}

  /* Stats: las 4 en la misma línea, pequeñas */
  .stats{gap:8px;flex-wrap:nowrap}
  .stat{flex:1 1 0;min-width:0}
  .stat b{font-size:1.45rem}
  .stat span{display:block;font-size:.63rem;line-height:1.2}

  /* Chips rápidos más pequeños */
  .chips-quick{gap:6px;margin-bottom:22px}
  .chips-quick button{padding:5px 11px;font-size:.74rem}

  /* Texto de intro más corto */
  .hero p.lead{font-size:.9rem;margin-bottom:16px;line-height:1.5}

  /* Tags de carácter de la ficha: compactos, caben ~3 por línea */
  .quickbar{gap:6px}
  .quickbar .tag{padding:5px 10px!important;font-size:.72rem!important}

  /* Foto de la ficha más grande en móvil */
  .pag-raza .hero-shot{height:clamp(250px,54vw,370px)}
}

/* Afinado movil del hero */
@media(max-width:560px){
  .hero .chips-quick button{padding:4px 10px;font-size:.7rem}
  .hero .chips-quick button svg{width:12px;height:12px}
  .chips-quick{margin-bottom:16px}
  .hero{padding-bottom:76px}
  .hero-cred{font-size:.58rem;max-width:56vw;bottom:8px;right:10px}
  .hero-cred b{font-size:.62rem}
  .scroll-hint{display:none}
  .stats{margin-bottom:6px}
}

/* Héroe móvil definitivo: sin puntos de slider encima, stats centradas, compacto */
@media(max-width:560px){
  .hero-dots{display:none!important}
  .hero h1{font-size:clamp(1.85rem,7.4vw,2.5rem);line-height:1.06;margin-bottom:10px}
  .hero .pill{margin-bottom:12px;font-size:.72rem}
  .hero p.lead{margin-bottom:14px}
  .hero{padding-bottom:46px}
  .hero-cred{bottom:8px;right:10px;max-width:58vw;font-size:.58rem;text-align:right}
  .stats{gap:6px;margin-bottom:0}
  .stat{flex:1 1 0;min-width:0;text-align:center}
  .stat b{font-size:1.4rem}
  .stat span{display:block;font-size:.6rem;line-height:1.15}
}

/* Móvil: filtro del catálogo (home) compacto + tags de carácter más pequeños */
@media(max-width:560px){
  #razas .sec-head{margin-bottom:18px}
  #razas .sec-head h2{font-size:1.6rem;line-height:1.1;margin-bottom:6px}
  #razas .sec-head p{font-size:.86rem;line-height:1.45}
  .toolbar-row{gap:7px}
  .toolbar .mini-search{padding:8px 13px!important}
  .toolbar .mini-search input{font-size:.86rem}
  .toolbar .mini-search svg{width:15px;height:15px}
  .toolbar .sel{padding:8px 13px!important;font-size:.84rem!important}
  .toolbar .btn{padding:7px 12px!important;font-size:.78rem!important}
  .toolbar .btn svg{width:14px;height:14px}
  .quickbar .tag{padding:4px 9px!important;font-size:.66rem!important}
}

/* Móvil: tags de rasgos en las tarjetas del catálogo, más pequeños */
@media(max-width:560px){
  .card-foot{gap:5px}
  .card-foot .tag{padding:4px 9px;font-size:.66rem}
}

/* =========================================================
   Móvil v131: comparación deslizable, filtro no-sticky, menú pulido
   ========================================================= */
/* Comparación: contenedor deslizable + pista de swipe */
.cmp-table{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.cmp-hint{display:none}
@media(max-width:760px){
  .cmp-hint{display:block;text-align:center;font-size:.82rem;font-weight:700;color:var(--brand);
    background:var(--brand-soft);border-radius:99px;padding:8px 14px;margin:0 0 12px}
  .cmp-hint span{display:inline-block;animation:cmpNudge 1.6s ease-in-out infinite}
}
@keyframes cmpNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* Filtro del catálogo: que NO se quede sticky enorme en móvil */
@media(max-width:560px){
  .toolbar{position:static!important}
}

/* Menú móvil más pulido (menos "cutre"): filas limpias, sin cajas beige */
@media(max-width:860px){
  .nav-links{inset:calc(var(--nav-h) + 8px) 8px auto auto;left:auto;width:min(284px,88vw);
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 20px 54px rgba(0,0,0,.24);padding:10px;gap:1px;
    max-height:calc(100svh - var(--nav-h) - 24px);overflow:auto}
  .nav-links > a,.nav-des-menu .nd-pie{display:flex;align-items:center;gap:9px;
    padding:12px 14px;border-radius:12px;font-size:.98rem;font-weight:600;color:var(--txt);
    background:none!important;border:0!important;box-shadow:none!important;text-align:left;
    justify-content:flex-start;letter-spacing:0}
  .nav-links > a:hover,.nav-links > a:focus-visible,
  .nav-des-menu .nd-pie:hover,.nav-des-menu .nd-pie:focus-visible{background:var(--brand-soft);color:var(--brand)}
  .nav-des-menu .nd-tit,.nav-des-menu .nd-col{display:none!important}
  .nav-des-menu{gap:1px!important}
}
@media(max-width:860px){.nav-des-menu{padding:0!important;margin:0!important}}

/* Tooltip del radar de comparación (nombre + foto al pasar por encima) */
.rd-area{transition:opacity .2s var(--ease)}
.rd-tip{position:fixed;z-index:200;pointer-events:none;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:7px 15px 7px 7px;
  box-shadow:var(--shadow-l);font-weight:700;font-size:.95rem;color:var(--txt)}
.rd-tip img{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--surface-2);flex:none}

/* Leyenda del radar: nombres con el color de su raza, clicables a la ficha */
.rd-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-top:8px}
.rd-leg{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.96rem;
  text-decoration:none;padding:5px 12px;border-radius:99px;transition:background .18s var(--ease),opacity .2s var(--ease)}
.rd-leg i{width:12px;height:12px;border-radius:4px;display:inline-block;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.rd-leg:hover,.rd-leg:focus-visible{background:var(--brand-soft);text-decoration:underline;text-underline-offset:3px}
.rd-pista{text-align:center;font-size:.82rem;color:var(--txt-2);margin:8px 0 0}
.rd-aislando .rd-area.rd-off{opacity:.12}
.rd-aislando .rd-leg.rd-off{opacity:.35}

/* Comparador: enlaces a la ficha en la cabecera de la tabla */
.cmp-th-link{text-decoration:none;color:inherit;display:block}
.cmp-th-link:hover .thumb{border-color:var(--brand)}
.cmp-th-link:hover div{color:var(--brand)}
.cmp-ficha{display:inline-block;margin-top:6px;font-size:.78rem;font-weight:700;color:var(--brand);
  text-decoration:none;white-space:nowrap}
.cmp-ficha:hover{text-decoration:underline;text-underline-offset:2px}

/* Página de contacto */
.ct-form{display:grid;gap:16px;margin:24px 0 34px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-form label{display:grid;gap:6px;font-size:.84rem;font-weight:700;color:var(--txt-2)}
.ct-form input,.ct-form textarea{font:inherit;font-size:1rem;font-weight:500;color:var(--txt);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.ct-form input:focus,.ct-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ct-form textarea{resize:vertical;min-height:120px}
.ct-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.ct-enviar{justify-self:start;font-size:1rem;padding:13px 26px}
.ct-nota{font-size:.86rem;color:var(--txt-2);margin:2px 0 0}
.ct-otros{border-top:1px solid var(--line);padding-top:20px;margin-top:6px}
.ct-otros h2{font-size:1.15rem;margin-bottom:8px}
.ct-otros p{color:var(--txt-2);line-height:1.7;font-size:.95rem}
@media(max-width:560px){.ct-row{grid-template-columns:1fr}}

/* Aviso de cookies. Solo sale la primera visita; la respuesta
   queda en «pp:cookies» y se puede cambiar desde /cookies. */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;margin:0 auto;max-width:560px;
  display:grid;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--shadow-l);
  opacity:0;transform:translateY(14px);transition:opacity .26s var(--ease),transform .26s var(--ease)}
.ck-on{opacity:1;transform:none}
.ck p{margin:0;font-size:.9rem;line-height:1.6;color:var(--txt-2)}
.ck p b{color:var(--txt)}
.ck p a{color:var(--brand);font-weight:700}
.ck-bot{display:flex;gap:10px;justify-content:flex-end}
.ck-bot button{font:inherit;font-size:.88rem;font-weight:700;padding:10px 20px;border-radius:999px;
  cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--txt-2);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.ck-bot button:hover{border-color:var(--txt-2);color:var(--txt)}
.ck-si{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.ck-si:hover{filter:brightness(1.06)}
@media(max-width:560px){
  .ck{left:10px;right:10px;bottom:10px;padding:16px;gap:12px}
  .ck p{font-size:.84rem}
  .ck-bot button{flex:1;padding:11px 12px}
}
@media(prefers-reduced-motion:reduce){.ck{transition:none;opacity:1;transform:none}}

/* Página de cookies: panel para cambiar la decisión */
.ck-panel{margin:18px 0 4px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface-2);display:grid;gap:14px}
.ck-estado{margin:0!important;font-weight:700;color:var(--txt)!important}
.ck-panel .ck-bot{justify-content:flex-start}
.ck-panel button[disabled]{opacity:.5;cursor:default}
@media(max-width:560px){.ck-panel .ck-bot{flex-wrap:wrap}}