/* ===================================================================
   FAUNOVA — Design tokens (identidad de lujo: negro / azul marino / dorado)
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#05070B;
  --navy:#0A101C;
  --navy-2:#0E1626;
  --panel:#0F1826;
  --panel-2:#141F32;
  --line:rgba(201,162,39,.22);
  --line-soft:rgba(255,255,255,.08);
  --gold:#C9A227;
  --gold-light:#E9CE7C;
  --gold-deep:#8C6B1E;
  --cream:#F1E6C3;
  --text:#F3EFE4;
  --text-muted:#AEB6C4;
  --text-faint:#7C8598;
  --danger:#B4553F;

  --font-display:'Cormorant Garamond', serif;
  --font-body:'Public Sans', sans-serif;

  --radius-s:6px;
  --radius-m:14px;
  --radius-l:24px;
  --container:1240px;
  --ease:cubic-bezier(.16,.8,.24,1);
  --nav-h:76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--cream); font-weight:600; }
p{ margin:0; }
input,select{ font-family:inherit; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }

.gold-text{
  background:linear-gradient(120deg, var(--gold-deep), var(--gold-light) 45%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; letter-spacing:.14em; color:var(--gold-light); font-weight:600;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--gold); display:inline-block; }

/* ===================================================================
   VIEWS / TRANSITIONS
=================================================================== */
.view{ display:none; }
.view.is-active{ display:block; animation:viewIn .5s var(--ease); }
@keyframes viewIn{ from{ opacity:0; filter:blur(6px); transform:translateY(10px);} to{ opacity:1; filter:blur(0); transform:none;} }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ===================================================================
   NAVBAR
=================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(5,7,11,.82);
  backdrop-filter:blur(14px);
  border-color:var(--line);
}
.site-header.is-hidden{ transform:translateY(-100%); }

.nav{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:0 32px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark{
  width:42px; height:42px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 1px var(--line), 0 4px 18px rgba(201,162,39,.18);
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-name{ font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:.06em; color:var(--cream); }

.nav-links{ display:flex; gap:2px; align-items:center; flex:1; justify-content:center; }
.nav-links a{
  padding:10px 14px; border-radius:var(--radius-s);
  font-size:14px; font-weight:500; color:var(--text-muted);
  transition:color .2s var(--ease), background .2s var(--ease);
  position:relative;
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a.is-current{ color:var(--gold-light); }
.nav-links a.is-current::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:1px; background:var(--gold);
}

.nav-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:17px; position:relative;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover{ background:var(--panel-2); color:var(--gold-light); }
.icon-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px;
  background:var(--gold); color:#1A1400; font-size:10px; font-weight:700;
  border-radius:8px; display:flex; align-items:center; justify-content:center;
}

.nav-toggle{ display:none; width:40px; height:40px; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span{ width:21px; height:1.5px; background:var(--cream); display:block; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ===================================================================
   OVERLAYS: buscador + menú móvil + modal cuenta
=================================================================== */
.overlay{
  position:fixed; inset:0; z-index:300; display:flex;
  background:rgba(5,7,11,.72); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.overlay.is-open{ opacity:1; pointer-events:auto; }

.search-overlay{ align-items:flex-start; justify-content:center; padding-top:min(14vh,140px); }
.search-panel{
  width:min(640px, 92vw); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:10px; transform:translateY(-16px); transition:transform .35s var(--ease);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.overlay.is-open .search-panel{ transform:translateY(0); }
.search-input-row{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.search-input-row span{ color:var(--gold); font-size:18px; }
.search-input-row input{
  flex:1; background:none; border:none; color:var(--text); font-size:17px; padding:8px 0;
}
.search-input-row input::placeholder{ color:var(--text-faint); }
.search-close{ color:var(--text-faint); font-size:20px; padding:4px; }
.search-results{ max-height:52vh; overflow-y:auto; padding:6px; }
.search-result-item{
  display:flex; gap:14px; align-items:center; padding:10px; border-radius:var(--radius-s);
  transition:background .15s var(--ease);
}
.search-result-item:hover, .search-result-item.is-active{ background:var(--panel-2); }
.search-result-item img{ width:52px; height:52px; object-fit:cover; border-radius:8px; }
.search-result-item .name{ font-weight:600; color:var(--cream); font-size:15px; }
.search-result-item .meta{ font-size:12.5px; color:var(--text-faint); }
.search-hint{ padding:22px 16px; text-align:center; color:var(--text-faint); font-size:14px; }

.modal-overlay{ align-items:center; justify-content:center; }
.modal-panel{
  width:min(420px, 90vw); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:30px; text-align:center; transform:scale(.94); transition:transform .3s var(--ease);
}
.overlay.is-open .modal-panel{ transform:scale(1); }
.modal-panel h3{ font-size:22px; margin-bottom:12px; }
.modal-panel p{ color:var(--text-muted); font-size:14.5px; margin-bottom:20px; }

.mobile-menu{
  flex-direction:column; justify-content:flex-start; padding-top:calc(var(--nav-h) + 20px);
}
.mobile-menu .mobile-panel{
  width:100%; background:var(--navy); height:100%; padding:10px 28px 40px;
  transform:translateY(-14px); transition:transform .35s var(--ease);
}
.overlay.is-open .mobile-panel{ transform:translateY(0); }
.mobile-menu a{
  display:block; padding:16px 4px; font-size:19px; color:var(--text-muted);
  border-bottom:1px solid var(--line-soft); font-family:var(--font-display); font-weight:600;
}
.mobile-menu a.is-current{ color:var(--gold-light); }

/* ===================================================================
   BUTTONS
=================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:14px 28px; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.02em;
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:linear-gradient(135deg, var(--gold-deep), var(--gold) 55%, var(--gold-light)); color:#1A1400; }
.btn-gold:hover{ box-shadow:0 12px 28px -8px rgba(201,162,39,.55); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--cream); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-light); background:rgba(201,162,39,.06); }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ===================================================================
   HERO
=================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:var(--nav-h); overflow:hidden;
  background:#05070B;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(10,16,28,.15), rgba(5,7,11,.85) 70%),
    linear-gradient(180deg, rgba(5,7,11,.35) 0%, rgba(5,7,11,.55) 55%, #05070B 100%);
}
.hero-content{ position:relative; z-index:1; padding:70px 0 90px; }
.hero-content .eyebrow{ opacity:0; animation:heroFade .8s var(--ease) forwards; animation-delay:.1s; }
.hero-content h1{
  margin-top:22px; font-size:clamp(42px, 6.4vw, 84px); line-height:1.03; font-weight:600; max-width:16ch;
  opacity:0; animation:heroFade .8s var(--ease) forwards; animation-delay:.22s;
}
.hero-content .sub{
  margin-top:26px; font-size:19px; color:var(--text-muted); max-width:48ch;
  opacity:0; animation:heroFade .8s var(--ease) forwards; animation-delay:.36s;
}
.hero-actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; animation:heroFade .8s var(--ease) forwards; animation-delay:.48s;
}
@keyframes heroFade{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.hero-floats{
  position:absolute; z-index:1; display:flex; gap:16px;
  bottom:56px; right:32px; opacity:0; animation:heroFade 1s var(--ease) forwards; animation-delay:.65s;
}
.float-card{
  background:rgba(15,24,38,.55); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--radius-m);
  padding:16px 20px; min-width:140px;
}
.float-card .v{ font-family:var(--font-display); font-size:26px; color:var(--gold-light); }
.float-card .k{ font-size:12px; color:var(--text-muted); margin-top:2px; }

.scroll-cue{
  position:absolute; bottom:26px; left:32px; z-index:1; display:flex; align-items:center; gap:10px;
  color:var(--text-faint); font-size:12px; letter-spacing:.1em;
  opacity:0; animation:heroFade 1s var(--ease) forwards; animation-delay:.8s;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:cueMove 1.8s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{ transform:translateY(0); opacity:1;} 50%{ transform:translateY(6px); opacity:.4;} }

/* ===================================================================
   SECTIONS (general dark)
=================================================================== */
section{ padding:110px 0; position:relative; }
.section-head{ margin-bottom:48px; max-width:640px; }
.section-head h2{ font-size:clamp(30px,3.6vw,44px); margin-top:14px; }
.section-head p{ color:var(--text-muted); margin-top:14px; font-size:16px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.section-line{ height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); }

/* Species / explore grid */
.species-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; }
.species-tile{
  position:relative; padding:30px 22px; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--radius-m); transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  overflow:hidden;
}
.species-tile::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s var(--ease);
  background:radial-gradient(120% 100% at 0% 0%, rgba(201,162,39,.14), transparent 60%);
}
.species-tile:hover{ border-color:var(--gold); transform:translateY(-4px); background:var(--panel-2); }
.species-tile:hover::before{ opacity:1; }
.species-tile .emoji{ font-size:32px; }
.species-tile h3{ font-size:18px; margin-top:14px; color:var(--cream); font-weight:600; }
.species-tile .count{ margin-top:6px; font-size:12.5px; color:var(--text-faint); }
.species-tile .tag-soon{ position:absolute; top:14px; right:14px; font-size:10.5px; letter-spacing:.06em; color:var(--gold-light); border:1px solid var(--line); padding:3px 9px; border-radius:20px; }

/* Featured strip / carousel */
.strip-wrap{ position:relative; }
.strip{ display:flex; gap:22px; overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x proximity; scrollbar-width:none; }
.strip::-webkit-scrollbar{ display:none; }
.strip .breed-card{ min-width:290px; scroll-snap-align:start; }
.strip-nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:-10px; margin-bottom:26px; }
.strip-nav button{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); color:var(--cream);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s;
}
.strip-nav button:hover{ border-color:var(--gold); background:var(--panel-2); }

/* CTA compare band */
.split-band{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
.feature-card{
  background:linear-gradient(160deg, var(--panel), var(--navy-2));
  border:1px solid var(--line); border-radius:var(--radius-l); padding:44px;
  display:flex; flex-direction:column; justify-content:space-between; min-height:280px;
  position:relative; overflow:hidden;
}
.feature-card::after{
  content:''; position:absolute; right:-60px; bottom:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,.18), transparent 70%);
}
.feature-card h3{ font-size:26px; }
.feature-card p{ color:var(--text-muted); margin-top:12px; font-size:15px; max-width:38ch; }
.feature-card .btn{ margin-top:26px; align-self:flex-start; }

/* Breed finder (quiz) */
.finder-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:40px; display:grid; grid-template-columns:repeat(3,1fr) auto; gap:20px; align-items:end;
}
.finder-panel .field{ display:flex; flex-direction:column; gap:8px; }
.finder-panel label{ font-size:12.5px; color:var(--text-muted); font-weight:600; letter-spacing:.03em; }
.finder-panel select{
  padding:13px 14px; background:var(--navy); border:1px solid var(--line); border-radius:var(--radius-s);
  color:var(--text); font-size:14px;
}
.finder-results{ margin-top:34px; }
.finder-results .breed-grid{ margin-top:0; }
.finder-empty{ color:var(--text-faint); font-size:14.5px; }

/* About / info */
.about-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-logo{
  background:linear-gradient(160deg, var(--navy-2), var(--navy)); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:44px; text-align:center;
}
.about-logo img{ max-width:220px; margin:0 auto; border-radius:50%; box-shadow:0 20px 60px -20px rgba(201,162,39,.35); }
.about-copy p{ color:var(--text-muted); font-size:16px; margin-top:16px; }
.author-card{
  margin-top:28px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px; display:flex; align-items:center; gap:16px;
}
.author-card .k{ font-size:11.5px; color:var(--gold-light); letter-spacing:.08em; font-weight:700; }
.author-card .name{ font-family:var(--font-display); font-size:20px; margin-top:4px; }

/* ===================================================================
   CATALOG / EXPLORAR
=================================================================== */
.explore-head{ padding:calc(var(--nav-h) + 46px) 0 10px; }
.explore-head h1{ font-size:clamp(34px,4.6vw,52px); }
.explore-head p{ color:var(--text-muted); margin-top:12px; max-width:60ch; }

.category-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:30px 0 4px; }
.cat-tab{
  display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  border:1px solid var(--line-soft); color:var(--text-muted); font-size:13.5px; font-weight:600;
  transition:all .2s var(--ease);
}
.cat-tab .emoji{ font-size:16px; }
.cat-tab:hover{ border-color:var(--gold); color:var(--cream); }
.cat-tab.is-active{ background:var(--gold); border-color:var(--gold); color:#1A1400; }
.cat-tab.is-soon{ opacity:.45; pointer-events:none; }

.filters{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-m);
  padding:24px; margin:26px 0 10px;
}
.field{ display:flex; flex-direction:column; gap:7px; min-width:150px; }
.field label{ font-size:11.5px; font-weight:700; color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase; }
.field input, .field select{
  padding:11px 13px; border:1px solid var(--line-soft); border-radius:var(--radius-s);
  background:var(--navy); font-size:14px; color:var(--text);
}
.field input::placeholder{ color:var(--text-faint); }
.field.search{ flex:1 1 240px; }
.filters .btn-outline{ height:42px; }

.result-count{ font-size:13.5px; color:var(--text-faint); margin:22px 0 20px; }

.breed-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; }

.breed-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-m);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.breed-card:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 26px 50px -24px rgba(0,0,0,.65); }
.breed-card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.breed-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.breed-card:hover .thumb img{ transform:scale(1.08); }
.thumb-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,7,11,.88) 0%, rgba(5,7,11,.1) 55%, transparent 100%);
  display:flex; align-items:flex-end; padding:14px; opacity:0; transition:opacity .35s var(--ease);
}
.breed-card:hover .thumb-overlay{ opacity:1; }
.thumb-overlay .quick-info{ display:flex; gap:8px; flex-wrap:wrap; }
.thumb-overlay .quick-info span{ font-size:11px; color:var(--cream); background:rgba(255,255,255,.08); border:1px solid var(--line); padding:3px 9px; border-radius:20px; }

.fav-btn{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(5,7,11,.55); backdrop-filter:blur(6px); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-muted);
  transition:transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  z-index:2;
}
.fav-btn:hover{ transform:scale(1.1); border-color:var(--gold); }
.fav-btn.is-fav{ color:var(--gold-light); }
.species-pill{
  position:absolute; top:12px; left:12px; background:rgba(5,7,11,.6); backdrop-filter:blur(6px);
  color:var(--cream); font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:20px;
  border:1px solid var(--line-soft); z-index:2;
}
.breed-card .body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:11px; flex:1; }
.breed-card h3{ font-size:20px; color:var(--cream); }
.breed-card .origin{ font-size:12.5px; color:var(--gold-light); font-weight:600; letter-spacing:.02em; }
.breed-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:11.5px; color:var(--text-muted); }
.breed-meta span{ background:var(--navy); border:1px solid var(--line-soft); padding:4px 10px; border-radius:20px; }
.breed-card .desc{ font-size:13.5px; color:var(--text-muted); flex:1; }
.temperament-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.temperament-tags span{ font-size:11px; color:var(--gold-light); background:rgba(201,162,39,.1); border:1px solid var(--line); padding:3px 10px; border-radius:20px; }
.card-actions{ display:flex; gap:10px; align-items:center; margin-top:4px; }
.view-btn{
  font-size:13px; font-weight:700; color:var(--cream); border-bottom:1px solid var(--gold); padding-bottom:2px;
  transition:opacity .25s var(--ease); opacity:0; transform:translateY(4px);
}
.breed-card:hover .view-btn, .breed-card:focus-within .view-btn{ opacity:1; transform:none; }
.compare-add{
  font-size:12px; font-weight:600; color:var(--text-muted); border:1px solid var(--line-soft); padding:6px 12px; border-radius:20px;
  transition:all .2s var(--ease);
}
.compare-add:hover{ border-color:var(--gold); color:var(--gold-light); }
.compare-add.is-selected{ background:var(--gold); border-color:var(--gold); color:#1A1400; }

.empty-state{ text-align:center; padding:80px 20px; color:var(--text-muted); }
.empty-state h3{ margin-bottom:10px; color:var(--cream); }

.load-more-wrap{ display:flex; justify-content:center; padding:16px 0 70px; }

/* ===================================================================
   DETAIL VIEW
=================================================================== */
.detail-hero{ position:relative; min-height:78vh; display:flex; align-items:flex-end; padding-top:var(--nav-h); }
.detail-hero-bg{ position:absolute; inset:0; z-index:0; }
.detail-hero-bg img{ width:100%; height:100%; object-fit:cover; }
.detail-hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, #05070B 4%, rgba(5,7,11,.55) 45%, rgba(5,7,11,.15) 100%);
}
.detail-hero-content{ position:relative; z-index:1; padding-bottom:56px; width:100%; }
.detail-back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:26px; font-weight:600; color:var(--gold-light); font-size:14px; }
.detail-title-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.detail-hero-content h1{ font-size:clamp(38px,6vw,68px); }
.detail-hero-content .origin{ color:var(--gold-light); font-weight:600; margin-top:10px; display:block; font-size:15px; }
.detail-actions{ display:flex; gap:12px; }
.detail-hero-content .summary{ margin-top:20px; font-size:17px; color:var(--text-muted); max-width:60ch; }

.detail-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line-soft); margin-top:0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.detail-stats .box{ background:var(--navy); padding:22px 16px; text-align:center; }
.detail-stats .box .k{ font-size:11px; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; }
.detail-stats .box .v{ font-family:var(--font-display); font-size:21px; color:var(--cream); margin-top:8px; }
.bar-row{ display:flex; gap:4px; justify-content:center; margin-top:8px; }
.bar-row span{ width:16px; height:6px; border-radius:3px; background:var(--line-soft); }
.bar-row span.on{ background:var(--gold); }

.detail-sections{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; padding:70px 0 90px; }
.detail-block{ margin-bottom:40px; }
.detail-block h2{ font-size:24px; margin-bottom:16px; }
.detail-block p{ color:var(--text-muted); font-size:15.5px; }
.detail-block ul li{ position:relative; padding-left:22px; margin-bottom:11px; color:var(--text-muted); font-size:15px; }
.detail-block ul li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.side-card{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:24px; margin-bottom:22px; }
.side-card h3{ font-size:16px; margin-bottom:14px; color:var(--cream); }
.fact-list li{ font-size:14px; color:var(--text-muted); padding-left:22px; position:relative; margin-bottom:11px; }
.fact-list li::before{ content:'✦'; position:absolute; left:0; color:var(--gold); font-size:12px; top:1px; }

/* ===================================================================
   COMPARADOR
=================================================================== */
.compare-picker{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:32px 0 40px;
}
.compare-slot{
  width:220px; min-height:64px; border:1px dashed var(--line); border-radius:var(--radius-m);
  display:flex; align-items:center; gap:12px; padding:12px; color:var(--text-faint); font-size:13.5px;
  position:relative;
}
.compare-slot.is-filled{ border-style:solid; border-color:var(--line); background:var(--panel); }
.compare-slot img{ width:44px; height:44px; border-radius:8px; object-fit:cover; }
.compare-slot .name{ color:var(--cream); font-weight:600; font-size:14px; }
.compare-slot .remove{ position:absolute; top:6px; right:8px; color:var(--text-faint); font-size:14px; }
.compare-vs{ font-family:var(--font-display); font-size:22px; color:var(--gold); }
.compare-add-select{
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--panel);
  color:var(--text); font-size:14px; min-width:220px;
}

.compare-table-wrap{ overflow-x:auto; padding-bottom:50px; }
.compare-table{ width:100%; border-collapse:collapse; min-width:640px; }
.compare-table th, .compare-table td{ padding:16px 18px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; }
.compare-table th{ font-family:var(--font-display); font-size:19px; color:var(--cream); font-weight:600; }
.compare-table th img{ width:100%; height:130px; object-fit:cover; border-radius:var(--radius-s); margin-bottom:12px; }
.compare-table td.label-col{ color:var(--gold-light); font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.compare-table td{ color:var(--text-muted); font-size:14.5px; }
.compare-empty{ text-align:center; padding:70px 20px; color:var(--text-muted); }
.compare-empty h3{ color:var(--cream); margin-bottom:10px; }

/* ===================================================================
   FAVORITOS
=================================================================== */
.fav-head{ padding:calc(var(--nav-h) + 46px) 0 10px; }
.fav-head h1{ font-size:clamp(34px,4.6vw,52px); }

/* ===================================================================
   FOOTER
=================================================================== */
.site-footer{ background:var(--navy); border-top:1px solid var(--line-soft); padding:70px 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; }
.footer-brand{ display:flex; flex-direction:column; gap:16px; }
.footer-brand .brand{ }
.footer-brand p{ color:var(--text-faint); font-size:14px; max-width:34ch; }
.footer-col h4{ color:var(--cream); font-size:14.5px; margin-bottom:16px; font-family:var(--font-body); font-weight:700; letter-spacing:.02em; }
.footer-col a{ display:block; padding:6px 0; color:var(--text-faint); font-size:14px; transition:color .2s; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{
  border-top:1px solid var(--line-soft); padding-top:22px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:13px; color:var(--text-faint);
}

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width: 1080px){
  .detail-stats{ grid-template-columns:repeat(3,1fr); }
  .finder-panel{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 920px){
  .about-wrap{ grid-template-columns:1fr; }
  .detail-sections{ grid-template-columns:1fr; }
  .split-band{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .detail-stats{ grid-template-columns:repeat(2,1fr); }
  .finder-panel{ grid-template-columns:1fr; }
  section{ padding:76px 0; }
  .footer-top{ grid-template-columns:1fr; }
  .hero-floats{ display:none; }
}


/* ===================================================================
   FAUNOVA REMASTER — polish, resilience, accessibility and responsive QA
=================================================================== */
:root{--bg:#080b12;--navy:#0b1220;--panel:#101a2a;--line:rgba(216,181,91,.25);--gold:#d6b45d;--gold-light:#f1d994;--container:1280px;--nav-h:78px}
::selection{background:rgba(214,180,93,.35);color:#fff}
body{background:radial-gradient(ellipse at 78% 0%,rgba(29,43,67,.24),transparent 38%),var(--bg)}
button,a,input,select{ -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px}
.skip-link{position:fixed;z-index:9999;top:10px;left:10px;transform:translateY(-160%);padding:12px 18px;background:var(--gold-light);color:#111;border-radius:8px;font-weight:700}
.skip-link:focus{transform:translateY(0)}
.site-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(7,10,16,.9);border-bottom:1px solid rgba(255,255,255,.07)}
.site-header.is-scrolled{box-shadow:0 14px 40px rgba(0,0,0,.25)}
.brand-mark{overflow:hidden;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(214,180,93,.42)}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.btn,.view-btn,.compare-add,.cat-tab,.icon-btn{transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.btn-gold{box-shadow:0 8px 28px rgba(214,180,93,.12)}
.btn-gold:hover{box-shadow:0 12px 34px rgba(214,180,93,.22);transform:translateY(-2px)}
.breed-card,.species-tile,.feature-card,.finder-panel,.compare-picker,.author-card{border-color:rgba(214,180,93,.16)}
.breed-card{overflow:hidden;isolation:isolate;box-shadow:0 10px 34px rgba(0,0,0,.12)}
.breed-card:hover{border-color:rgba(214,180,93,.5);box-shadow:0 22px 54px rgba(0,0,0,.28)}
.breed-card .thumb{background:linear-gradient(135deg,#182337,#0b1019)}
.breed-card .thumb img,.detail-hero-bg img,.compare-table img,.search-result-item img{background:linear-gradient(135deg,#182337,#0b1019)}
.breed-card .thumb img{transition:transform .65s cubic-bezier(.16,.8,.24,1),filter .4s ease}
.breed-card:hover .thumb img{transform:scale(1.045);filter:saturate(1.06)}
.fav-btn{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
input,select{min-height:44px}
.search-panel,.modal-panel,.mobile-panel{box-shadow:0 30px 100px rgba(0,0,0,.45)}
.overlay{overscroll-behavior:contain}
.site-footer{border-top:1px solid rgba(214,180,93,.2)}
.footer-bottom{gap:12px;flex-wrap:wrap}
.empty-state{border:1px solid var(--line-soft);border-radius:var(--radius-l);padding:40px 24px;text-align:center;background:linear-gradient(145deg,rgba(255,255,255,.025),transparent)}
.image-fallback{display:grid;place-items:center;width:100%;height:100%;min-height:180px;background:radial-gradient(circle at 50% 30%,#29364b,#0d1420 72%);color:#e9ce7c;font-size:clamp(2.8rem,6vw,4.5rem)}
@media (max-width:760px){
 :root{--nav-h:68px}
 .container{padding-left:20px;padding-right:20px}
 .hero{min-height:min(780px,92svh)}
 .hero-content{padding-top:calc(var(--nav-h) + 52px);padding-bottom:100px}
 .hero-floats{right:20px;bottom:22px;gap:10px}
 .float-card{padding:12px 14px}
 .float-card .v{font-size:1.35rem}
 .section-head{max-width:100%}
 .breed-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .breed-card .body{padding:15px}
 .breed-card h3{font-size:1.35rem}
 .breed-meta{gap:7px}
 .breed-meta span{font-size:.72rem}
 .card-actions{gap:8px;flex-wrap:wrap}
 .compare-add{font-size:.75rem}
 .species-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-top{gap:30px}
}
@media (max-width:440px){
 .breed-grid{grid-template-columns:1fr}
 .breed-card .thumb{height:230px}
 .hero h1{font-size:clamp(2.8rem,13vw,4.1rem)}
 .hero-floats{left:20px;right:auto}
 .float-card{min-width:0}
 .species-grid{grid-template-columns:1fr 1fr}
 .species-tile{padding:18px 12px}
 .finder-panel{padding:18px}
 .footer-bottom{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){.breed-card .thumb img{transition:none}}


/* Attribution de fotografía (Wikimedia Commons) */
.photo-credit {
  position: absolute; z-index: 8; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 9px; border: 1px solid rgba(214,180,93,.42); border-radius: 999px;
  color: #f7e8ba; background: rgba(8,13,22,.82); backdrop-filter: blur(8px);
  font-size: 10px; line-height: 1; text-decoration: none;
}
.photo-credit:hover, .photo-credit:focus-visible { background: rgba(8,13,22,.96); border-color: #d6b45d; color: #fff5d7; }


/* ===================================================================
   FAUNOVA SIGNATURE MOTION — experiencia premium e interactiva
=================================================================== */
:root{
  --gold-glow:rgba(214,180,93,.22);
  --ease-spring:cubic-bezier(.2,.85,.25,1.15);
}
html{scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  background:
    radial-gradient(ellipse at 8% 14%,rgba(32,54,82,.22),transparent 32%),
    radial-gradient(ellipse at 92% 42%,rgba(117,82,24,.08),transparent 28%),
    radial-gradient(ellipse at 48% 100%,rgba(24,40,63,.16),transparent 40%),
    var(--bg);
}
.scroll-progress{
  position:fixed;left:0;top:0;z-index:1000;height:3px;width:0;
  background:linear-gradient(90deg,#8d6a22,#d6b45d,#fff0b6);
  box-shadow:0 0 14px rgba(214,180,93,.48);
  transform-origin:left center;pointer-events:none;
}
.site-header{transition:transform .38s var(--ease),background .35s ease,box-shadow .35s ease}
.site-header:not(.is-scrolled){background:linear-gradient(180deg,rgba(5,8,14,.83),rgba(5,8,14,.18));border-bottom-color:rgba(255,255,255,.035)}
.brand-mark{transition:transform .45s var(--ease-spring),box-shadow .35s ease}
.brand:hover .brand-mark{transform:rotate(-7deg) scale(1.07);box-shadow:0 0 0 1px var(--gold-light),0 0 28px rgba(214,180,93,.25)}
.brand-name{background:linear-gradient(110deg,#fff1bd 0%,#d6b45d 40%,#fff8de 62%,#c9a247 80%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s ease}
.brand:hover .brand-name{background-position:100% center}
.hero{isolation:isolate;min-height:min(920px,100svh)}
.hero-bg{overflow:hidden}
.hero-bg img{animation:heroKenBurns 22s ease-in-out infinite alternate;will-change:transform;filter:saturate(.82) contrast(1.04)}
.hero-bg::after{
  background:
    radial-gradient(ellipse at 70% 35%,rgba(9,15,25,.05),rgba(5,7,11,.38) 46%,rgba(5,7,11,.8) 80%),
    linear-gradient(90deg,rgba(5,7,11,.93) 0%,rgba(5,7,11,.68) 42%,rgba(5,7,11,.1) 100%),
    linear-gradient(180deg,rgba(5,7,11,.12),rgba(5,7,11,.18) 55%,#080b12 100%);
}
.hero::before{
  content:"";position:absolute;z-index:1;pointer-events:none;width:min(54vw,720px);aspect-ratio:1;
  right:-11%;top:5%;border-radius:50%;border:1px solid rgba(238,207,127,.13);
  box-shadow:inset 0 0 90px rgba(214,180,93,.035),0 0 80px rgba(214,180,93,.035);
  animation:orbitPulse 9s ease-in-out infinite alternate;
}
.hero-content{z-index:2}
.hero-content h1{text-wrap:balance;text-shadow:0 8px 45px rgba(0,0,0,.2)}
.hero-content .sub{max-width:58ch;line-height:1.85;color:#d2d6de}
.hero-content .eyebrow{padding:8px 14px;border:1px solid rgba(214,180,93,.24);border-radius:999px;background:rgba(7,11,18,.38);backdrop-filter:blur(8px)}
.hero-actions .btn{min-height:52px}
.hero-actions .btn-gold::after{content:"↗";font-size:16px;transition:transform .25s ease}
.hero-actions .btn-gold:hover::after{transform:translate(3px,-3px)}
.float-card{
  border:1px solid rgba(235,211,145,.25);background:linear-gradient(145deg,rgba(13,20,32,.84),rgba(9,13,21,.66));
  box-shadow:0 16px 45px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(16px);
  transition:transform .35s var(--ease),border-color .35s ease;
}
.float-card:hover{transform:translateY(-5px);border-color:rgba(241,217,148,.55)}
section .container{position:relative}
.section-head{position:relative}
.section-head h2,.explore-head h1,.fav-head h1{letter-spacing:-.015em;text-wrap:balance}
.section-head h2::after,.explore-head h1::after{
  content:"";display:block;width:54px;height:2px;margin-top:18px;border-radius:4px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:.9;
}
.section-head.center h2::after{margin-left:auto;margin-right:auto}
.species-tile{
  background:linear-gradient(145deg,rgba(18,28,44,.92),rgba(10,15,24,.96));
  box-shadow:0 10px 28px rgba(0,0,0,.12);isolation:isolate;
}
.species-tile::after{
  content:"↗";position:absolute;right:18px;bottom:15px;font-size:17px;color:var(--gold-light);
  opacity:0;transform:translate(-5px,5px);transition:all .3s var(--ease);z-index:1;
}
.species-tile:hover::after{opacity:1;transform:translate(0,0)}
.species-tile .emoji{display:grid;place-items:center;width:62px;height:62px;border-radius:19px;
  background:linear-gradient(145deg,rgba(214,180,93,.14),rgba(214,180,93,.025));border:1px solid rgba(214,180,93,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .4s var(--ease-spring),background .3s ease;
}
.species-tile:hover .emoji{transform:translateY(-3px) rotate(-5deg) scale(1.07);background:rgba(214,180,93,.16)}
.breed-card{
  --mx:50%;--my:50%;background:linear-gradient(150deg,rgba(18,28,44,.97),rgba(10,15,24,.98));
  border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,.16);transform-style:preserve-3d;
  transition:border-color .35s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.breed-card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(214,180,93,.095),transparent 45%);
  transition:opacity .35s ease;
}
.breed-card:hover::after{opacity:1}
.breed-card .thumb{isolation:isolate}
.breed-card .thumb img{transition:transform .85s cubic-bezier(.15,.75,.25,1),filter .5s ease}
.breed-card:hover .thumb img{transform:scale(1.075);filter:saturate(1.13) contrast(1.03)}
.breed-card .body,.breed-card .thumb{z-index:1}
.breed-card .body{gap:12px}
.breed-card h3{transition:color .25s ease}
.breed-card:hover h3{color:#fff2bf}
.breed-card .origin{display:inline-flex;align-items:center;gap:7px}
.breed-card .origin::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(214,180,93,.45)}
.view-btn{opacity:1;transform:none}
.compare-add{background:rgba(255,255,255,.025)}
.compare-add.is-selected{box-shadow:0 6px 18px rgba(214,180,93,.15)}
.fav-btn{box-shadow:0 6px 20px rgba(0,0,0,.2)}
.fav-btn.is-fav{animation:heartPop .38s var(--ease-spring)}
.cat-tab{transition:transform .25s var(--ease),background .25s ease,border-color .25s ease}
.cat-tab:hover{transform:translateY(-2px)}
.filters,.finder-panel{
  background:linear-gradient(145deg,rgba(18,28,44,.76),rgba(9,14,23,.88));
  border:1px solid rgba(214,180,93,.19);box-shadow:0 16px 44px rgba(0,0,0,.13);backdrop-filter:blur(8px);
}
.field input,.field select,.compare-add-select,.finder-panel select{
  border-color:rgba(255,255,255,.12);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.field input:hover,.field select:hover,.compare-add-select:hover,.finder-panel select:hover{border-color:rgba(214,180,93,.32)}
.field input:focus,.field select:focus,.compare-add-select:focus,.finder-panel select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,180,93,.09);outline:none}
.strip .breed-card{min-width:310px}
.strip-nav button{transition:transform .2s var(--ease),background .2s ease,border-color .2s ease}
.strip-nav button:hover{transform:translateY(-2px) scale(1.03)}
.feature-card{position:relative;overflow:hidden;background:linear-gradient(140deg,rgba(19,30,48,.92),rgba(10,15,24,.95));border-radius:24px}
.feature-card::after{content:"✦";position:absolute;right:22px;top:4px;color:rgba(214,180,93,.09);font-size:100px;line-height:1;pointer-events:none;transition:transform .7s var(--ease)}
.feature-card:hover::after{transform:rotate(18deg) scale(1.12)}
.feature-card>*{position:relative;z-index:1}
.about-logo img{box-shadow:0 28px 70px rgba(0,0,0,.25);transition:transform .6s var(--ease),box-shadow .6s ease}
.about-logo:hover img{transform:translateY(-5px) rotate(-1deg);box-shadow:0 34px 80px rgba(0,0,0,.35)}
.site-footer{background:linear-gradient(180deg,rgba(11,18,32,.55),#070a10);}
.footer-col a{transition:color .2s ease,transform .2s ease}
.footer-col a:hover{transform:translateX(4px)}
.reveal{transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.reveal:not(.is-visible){transform:translateY(24px) scale(.99);filter:blur(2px)}
.reveal.is-visible{filter:blur(0);transform:translateY(0) scale(1)}
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:180;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(145deg,#e7ca7b,#b58d37);color:#151007;
  font-size:23px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 0 1px rgba(255,240,180,.24);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .25s ease,visibility .25s ease,transform .25s var(--ease-spring);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 16px 34px rgba(0,0,0,.35),0 0 25px rgba(214,180,93,.16)}
.toast-region{position:fixed;right:24px;bottom:84px;z-index:500;display:grid;gap:10px;pointer-events:none}
.faunova-toast{
  display:flex;align-items:center;gap:10px;max-width:min(360px,calc(100vw - 36px));padding:13px 17px;
  border:1px solid rgba(214,180,93,.28);border-radius:14px;background:rgba(12,19,30,.94);color:var(--cream);
  box-shadow:0 20px 50px rgba(0,0,0,.34);backdrop-filter:blur(16px);font-size:13px;
  animation:toastIn .35s var(--ease-spring) both;
}
.faunova-toast .toast-icon{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:rgba(214,180,93,.15);color:var(--gold-light)}
.faunova-toast.is-leaving{animation:toastOut .25s ease both}
@keyframes heroKenBurns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.2%,.8%,0)}}
@keyframes orbitPulse{from{transform:scale(.96) rotate(-7deg);opacity:.45}to{transform:scale(1.04) rotate(7deg);opacity:.9}}
@keyframes heartPop{0%{transform:scale(.85)}55%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97)}}
@media(max-width:760px){
  .hero::before{width:90vw;right:-40%;top:8%;opacity:.45}
  .hero-bg::after{background:linear-gradient(90deg,rgba(5,7,11,.83),rgba(5,7,11,.39)),linear-gradient(180deg,rgba(5,7,11,.14),rgba(5,7,11,.55) 70%,#080b12)}
  .hero-content .sub{font-size:15px}
  .strip .breed-card{min-width:270px}
  .back-to-top{right:15px;bottom:16px;width:44px;height:44px}
  .toast-region{right:12px;bottom:70px}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg img,.hero::before{animation:none!important}
  .reveal,.breed-card,.species-tile,.back-to-top,.faunova-toast{animation:none!important;transition:none!important}
  .reveal:not(.is-visible){opacity:1;transform:none;filter:none}
}