/* ============================================
   Associação Pelas Patas Felizes — style.css
   Cheerful rescue palette: coral · sunshine · mint
   ============================================ */

:root {
  /* Coral / watermelon — primary action, brighter + friendlier */
  --coral:      #FF7A5C;
  --coral-50:   #FFF2EE;
  --coral-100:  #FFD9CC;
  --coral-400:  #FF7A5C;
  --coral-600:  #F15A3C;
  --coral-800:  #B94A2E;

  /* Sunshine — accent / joy, lighter + happier */
  --sun:        #FFC94D;
  --sun-50:     #FFF9E8;
  --sun-100:    #FFE9A3;
  --sun-400:    #FFC94D;
  --sun-600:    #E8A400;

  /* Mint — secondary / trust, fresh and light */
  --mint:       #3ECFA0;
  --mint-50:    #E9FBF4;
  --mint-400:   #3ECFA0;
  --mint-600:   #1FA97C;
  --mint-800:   #0F6B4E;

  /* Sky — extra pop of friendly colour */
  --sky:        #4FC3E8;
  --sky-50:     #EAF8FD;
  --sky-600:    #1E9FD1;

  /* Surfaces — bright, warm, welcoming */
  --warm-white: #FFFDF8;
  --peach:      #FFF4EA;
  --sand:       #FDECD9;

  /* Typography — softened, no near-black */
  --ink:        #3A2C1E;
  --muted:      #8A7660;
  --line:       #F3E2D0;
  --white:      #fff;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Nunito', system-ui, sans-serif;

  --radius:       18px;
  --radius-lg:    28px;
  --radius-pill:  999px;
  --shadow:       0 8px 32px rgba(44,26,14,.09);
  --shadow-lg:    0 24px 64px rgba(44,26,14,.18);
  --shadow-coral: 0 10px 28px rgba(255,107,74,.30);
  --shadow-mint:  0 10px 28px rgba(61,184,139,.28);
  --shadow-sun:   0 10px 28px rgba(255,184,48,.30);
  --nav-h:        72px;
  --max-w:        1180px;
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-slow:    cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  font-size:17px; line-height:1.7; color:var(--ink);
  background:var(--warm-white);
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; line-height:1.1; color:var(--ink); letter-spacing:-.01em; }
h2 { font-size:clamp(1.9rem,4vw,3.1rem); }
h3 { font-size:1.3rem; }
p { color:var(--muted); }

.container { max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; }
.section { padding:6rem 0; }
.section--cream { background:var(--peach); }
.center { text-align:center; }
.sub { max-width:620px; margin:.8rem auto 0; }

.eyebrow {
  display:inline-block; font-family:var(--sans); font-weight:800;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--coral); margin-bottom:.6rem;
}
.eyebrow--light { color:rgba(255,240,230,.95); }
.center.eyebrow { display:block; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--sans); font-weight:800; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:var(--radius-pill);
  border:2px solid transparent; cursor:pointer;
  transition:transform .4s var(--ease-slow), box-shadow .4s var(--ease-slow), background .4s;
}
.btn:hover { transform:translateY(-3px); }
.btn--sm { padding:.6rem 1.15rem; font-size:.85rem; }
.btn--lg { padding:1rem 2rem; font-size:1.05rem; }
.btn--amber { background:var(--coral); color:#fff; box-shadow:var(--shadow-coral); }
.btn--amber:hover { background:var(--coral-600); box-shadow:0 14px 36px rgba(255,107,74,.42); }
.btn--teal { background:var(--mint); color:#fff; box-shadow:var(--shadow-mint); }
.btn--teal:hover { background:var(--mint-600); box-shadow:0 14px 36px rgba(61,184,139,.42); }
.btn--ghost { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px); }
.btn--ghost:hover { background:rgba(255,255,255,.22); }

/* ============================================
   CINEMATIC LOGO REVEAL — warm dawn palette
   ============================================ */
#intro {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(125% 105% at 50% 32%, #FFF9E9 0%, #FFE9A8 38%, #FFC94D 70%, #FF9A63 100%);
  overflow:hidden;
  transition:opacity .7s ease, visibility .7s ease;
}
#intro.done { opacity:0; visibility:hidden; }
.intro__moon {
  position:absolute; top:50%; left:50%; width:min(78vmin,560px); aspect-ratio:1;
  transform:translate(-50%,-56%) scale(.55);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), rgba(255,201,77,.35) 44%, rgba(255,201,77,0) 70%);
  filter:blur(2px);
  opacity:0; animation:moonRise 1.6s var(--ease) .15s forwards;
}
@keyframes moonRise { to { opacity:1; transform:translate(-50%,-56%) scale(1); } }
.intro__stars {
  position:absolute; inset:0; opacity:0; animation:fade 1.6s ease .5s forwards;
  background-image:
    radial-gradient(2px 2px at 18% 26%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 64% 60%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 33% 74%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 90% 68%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 50% 40%, rgba(255,255,255,.6), transparent);
}
.intro__logo-wrap { position:relative; z-index:2; text-align:center; }
.intro__logo {
  width:min(58vmin,340px); margin:0 auto;
  opacity:0; transform:scale(.72) translateY(18px);
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.55));
  animation:logoPop 1.3s var(--ease) .55s forwards;
}
@keyframes logoPop { 55%{opacity:1} to { opacity:1; transform:scale(1) translateY(0); } }
.intro__paws {
  position:absolute; bottom:-9%; left:0; right:0; display:flex; justify-content:center; gap:1.4rem;
}
.intro__paws span {
  font-size:1.4rem; opacity:0; transform:translateY(10px) rotate(-12deg);
  animation:pawIn .5s ease forwards; animation-delay:calc(1.25s + var(--i) * .1s);
}
@keyframes pawIn { to { opacity:.9; transform:translateY(0) rotate(-8deg); } }
.intro__tagline {
  position:relative; z-index:2; margin-top:2.5rem;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,3vw,1.7rem);
  color:var(--coral-800); opacity:0; animation:fade .8s ease 1.5s forwards;
  text-shadow:0 2px 12px rgba(255,255,255,.5);
}
@keyframes fade { to { opacity:1; } }
.intro__sky { display:none; }
#intro.flying .intro__moon,
#intro.flying .intro__stars,
#intro.flying .intro__paws,
#intro.flying .intro__tagline { opacity:0; transition:opacity .45s ease; }
.intro__logo { will-change:transform; }

/* ============================================
   SCROLL PROGRESS + HEADER
   ============================================ */
#scroll-progress {
  position:fixed; top:0; left:0; height:4px; width:0;
  background:linear-gradient(90deg, var(--coral), var(--sun), var(--mint));
  z-index:1000; transition:width .1s linear; border-radius:0 2px 2px 0;
}
#site-header {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:900;
  display:flex; align-items:center;
  transition:background .35s, box-shadow .35s, transform .35s;
  background:transparent;
}
#site-header:not(.scrolled)::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,53,48,.55), rgba(15,53,48,0));
}
#site-header.scrolled {
  background:rgba(255,252,250,.97); backdrop-filter:blur(14px);
  box-shadow:0 4px 28px rgba(44,26,14,.08);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; width:100%; }
.site-logo {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--serif); font-weight:700; font-size:1.15rem;
  color:#fff; transition:color .35s;
}
#site-header.scrolled .site-logo { color:var(--ink); }
.site-logo img {
  width:46px; height:46px; object-fit:contain;
  background:var(--warm-white); border-radius:50%; padding:5px;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}

.main-nav { display:flex; align-items:center; gap:1.6rem; }
.nav-link {
  font-weight:700; font-size:.95rem; color:rgba(255,255,255,.94);
  position:relative; transition:color .25s; text-shadow:0 1px 8px rgba(0,0,0,.4);
}
#site-header.scrolled .nav-link { color:var(--ink); text-shadow:none; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-5px;
  height:2px; width:0; background:var(--coral); transition:width .25s var(--ease);
}
.nav-link:hover { color:var(--sun-100); }
#site-header.scrolled .nav-link:hover { color:var(--coral); }
.nav-link:hover::after { width:100%; }
.nav-cta { color:#fff !important; text-shadow:none !important; }

.lang-switcher {
  display:flex; gap:.15rem; background:rgba(255,255,255,.2);
  padding:.25rem; border-radius:var(--radius-pill);
}
#site-header.scrolled .lang-switcher { background:var(--peach); }
.lang-btn {
  border:none; background:transparent; font-family:var(--sans); font-weight:800;
  font-size:.72rem; color:#fff; padding:.25rem .5rem; border-radius:var(--radius-pill);
  cursor:pointer; opacity:.8; transition:.2s;
}
#site-header.scrolled .lang-btn { color:var(--ink); }
.lang-btn.active { background:var(--coral); color:#fff !important; opacity:1; }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:901; }
.hamburger span { width:26px; height:3px; background:#fff; border-radius:2px; transition:.3s; }
#site-header.scrolled .hamburger span { background:var(--ink); }
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position:fixed; top:0; right:0; bottom:0; width:min(80vw,320px); z-index:895;
  background:var(--warm-white); box-shadow:-10px 0 40px rgba(44,26,14,.18);
  padding:calc(var(--nav-h) + 1.5rem) 1.75rem 2rem;
  display:flex; flex-direction:column; gap:.3rem;
  transform:translateX(100%); transition:transform .4s var(--ease);
}
.mobile-menu.open { transform:translateX(0); }
.mob-link {
  font-weight:700; font-size:1.05rem; padding:.7rem 0;
  border-bottom:1px solid var(--line); color:var(--ink);
}

/* ============================================
   HERO — dark cinematic photo (kept)
   ============================================ */
.hero {
  position:relative; height:100vh; min-height:640px;
  overflow:hidden; display:flex; align-items:center; background:#123C39;
}
.hero__scene {
  position:absolute; inset:0; z-index:0;
  background:#123C39 url('../img/hero-poster.jpg') center center / cover no-repeat;
}
.hero .layer { display:none; }
.hero__scene::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,53,48,.78) 0%, rgba(15,53,48,.46) 38%, rgba(15,53,48,.08) 68%),
    linear-gradient(0deg, rgba(15,53,48,.6), rgba(15,53,48,0) 40%);
}
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s; z-index:1; }
.hero__video[src] { opacity:1; }

/* Slow cinematic settle on the hero scene */
.hero__scene { animation:heroSettle 1.6s var(--ease-slow) both; }
@keyframes heroSettle { from { transform:scale(1.04); } to { transform:scale(1); } }

/* Wave divider — hero flows into the page */
.hero::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:56px; z-index:2;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 56" preserveAspectRatio="none"><path d="M0 28 C240 56 480 0 720 22 C960 44 1200 8 1440 30 L1440 56 L0 56 Z" fill="%23FFFDF8"/></svg>') center / 100% 100% no-repeat;
  pointer-events:none;
}

.hero__content { position:relative; z-index:3; max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; width:100%; }
.hero__title { font-size:clamp(2.8rem,8vw,6rem); line-height:.98; color:#fff; text-shadow:0 4px 26px rgba(0,0,0,.55); }
.hero__line { display:block; opacity:0; transform:translateY(30px); animation:heroLine 1.3s var(--ease-slow) forwards; }
.hero__line:nth-child(1){ animation-delay:.2s; }
.hero__line:nth-child(2){ animation-delay:.5s; }
.hero__line:nth-child(3){ animation-delay:.8s; }
.hero__line--accent { color:var(--sun-100); font-style:italic; }
@keyframes heroLine { to { opacity:1; transform:translateY(0); } }
.hero__sub {
  color:rgba(255,255,255,.92); font-size:clamp(1.05rem,2.2vw,1.4rem);
  max-width:560px; margin:1.5rem 0 2.2rem; text-shadow:0 2px 14px rgba(0,0,0,.5);
  opacity:0; animation:heroLine 1.3s var(--ease-slow) 1.1s forwards;
}
.hero__btns { display:flex; flex-wrap:wrap; gap:1rem; opacity:0; animation:heroLine 1.3s var(--ease-slow) 1.4s forwards; }

.hero__scroll {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.85); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; font-weight:800;
}
.hero__scroll-arrow { width:22px; height:34px; border:2px solid rgba(255,255,255,.6); border-radius:14px; position:relative; }
.hero__scroll-arrow::after {
  content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:#fff; animation:scrollDot 1.5s infinite;
}
@keyframes scrollDot { 0%{opacity:0;top:6px} 40%{opacity:1} 80%{opacity:0;top:18px} 100%{opacity:0} }

/* ============================================
   MISSION + STATS
   ============================================ */
.mission__inner { display:grid; grid-template-columns:1.3fr 1fr; gap:4rem; align-items:center; }
.mission__heading { margin-bottom:1rem; }
.mission__text { margin-bottom:1.8rem; font-size:1.1rem; }
.stats { display:grid; gap:1.2rem; }
.stat {
  background:var(--white); border:1px solid var(--line);
  border-left:5px solid var(--coral);
  border-radius:var(--radius); padding:1.6rem 1.8rem;
  box-shadow:var(--shadow); display:flex; align-items:baseline; gap:1rem;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.stat:nth-child(2) { border-left-color:var(--mint); }
.stat:nth-child(3) { border-left-color:var(--sun); }
.stat:hover { transform:translateX(5px); box-shadow:var(--shadow-lg); }
.stat__num { font-family:var(--serif); font-weight:700; font-size:2.6rem; color:var(--coral); line-height:1; }
.stat:nth-child(2) .stat__num { color:var(--mint); }
.stat:nth-child(3) .stat__num { color:var(--sun-600); }
.stat__label { font-weight:700; color:var(--ink); }

/* ============================================
   CINEMATIC CLIP SECTIONS
   ============================================ */
.clip-section { padding:0; }
.clip {
  position:relative; height:min(78vh,640px); overflow:hidden; display:flex; align-items:flex-end;
  background:linear-gradient(135deg, var(--mint-800), var(--mint-600)); /* fallback if the photo fails */
}
.clip__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* puppies' ears are at the top of this photo — anchor the crop there */
.clip[data-clip="happy"] .clip__img { object-position:center top; }
.clip__overlay {
  position:relative; z-index:2; padding:3rem; max-width:680px;
  background:linear-gradient(0deg, rgba(8,3,1,.88), transparent); width:100%;
}
.clip__title { color:#fff; font-size:clamp(1.8rem,4vw,3rem); margin:.3rem 0 .6rem; }
.clip__text { color:rgba(255,255,255,.88); font-size:1.1rem; max-width:520px; }

/* ============================================
   CARDS (services)
   ============================================ */
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.card {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem 1.6rem;
  box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s;
}
.card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.card__icon {
  font-size:2rem; margin-bottom:1rem; display:inline-flex;
  width:64px; height:64px; align-items:center; justify-content:center;
  background:var(--coral-50); border-radius:18px;
}
.cards .card:nth-child(2) .card__icon { background:var(--mint-50); }
.cards .card:nth-child(3) .card__icon { background:#fff0f5; }
.cards .card:nth-child(4) .card__icon { background:var(--sun-50); }
.card h3 { margin-bottom:.5rem; }
.card p { font-size:.97rem; }

/* ============================================
   ANIMALS
   ============================================ */
.animals__head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip {
  font-family:var(--sans); font-weight:800; font-size:.85rem;
  padding:.5rem 1.1rem; border-radius:var(--radius-pill);
  border:2px solid var(--line); background:var(--white); color:var(--muted);
  cursor:pointer; transition:.2s;
}
.chip:hover { border-color:var(--coral); color:var(--ink); }
.chip.active { background:var(--coral); border-color:var(--coral); color:#fff; }
.chip--urgent.active { background:#e53e3e; border-color:#e53e3e; color:#fff; }

.animals__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.animal-group { margin-bottom:3rem; }
.animal-group:last-child { margin-bottom:0; }
.animal-group.hide { display:none; }
.animal-group__title {
  font-size:1.6rem; margin-bottom:1.3rem; padding-bottom:.5rem;
  border-bottom:3px solid var(--line); display:flex; align-items:center; gap:.5rem;
}
.animal-group[data-group="dog"] .animal-group__title { border-bottom-color:var(--coral-100); }
.animal-group[data-group="cat"] .animal-group__title { border-bottom-color:var(--mint-50); }
.animal {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s, opacity .3s;
  cursor:pointer;
}
.animal:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.animal.hide { display:none; }
.animal__photo {
  position:relative; aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--peach), var(--coral-50));
  display:flex; align-items:center; justify-content:center;
}
.animal__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-slow); }
.animal:hover .animal__photo img { transform:scale(1.05); }
/* "adopt me" paw overlay on hover */
.animal__photo::after {
  content:'🐾'; position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center; font-size:2.6rem;
  background:linear-gradient(0deg, rgba(15,53,48,.45), rgba(15,53,48,0) 60%);
  opacity:0; transition:opacity .5s var(--ease-slow); pointer-events:none;
}
.animal:hover .animal__photo::after { opacity:1; }
.animal--add .animal__photo::after { display:none; }
.animal__photo::before { content:attr(data-fallback); font-size:3rem; opacity:.4; }
.animal__photo--empty {
  background:repeating-linear-gradient(45deg, var(--peach), var(--peach) 12px, var(--coral-50) 12px, var(--coral-50) 24px);
}
.animal__body { padding:1.1rem 1.3rem 1.4rem; }
.animal__name { font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--ink); }
.animal__meta { font-size:.9rem; color:var(--muted); margin:.1rem 0 .7rem; }
.animal__link {
  background:none; border:none; cursor:pointer; font-family:var(--sans);
  padding:0; font-weight:800; color:var(--coral); font-size:.9rem; transition:color .2s;
}
.animal__link:hover { color:var(--coral-600); }
.animal--add { border-style:dashed; background:transparent; box-shadow:none; }

.badge {
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  font-weight:800; font-size:.72rem; letter-spacing:.04em;
  padding:.3rem .7rem; border-radius:var(--radius-pill); color:#fff;
}
.badge--available { background:var(--mint); }
.badge--fostered  { background:var(--sun-600); }
.badge--urgent    { background:#e53e3e; }

/* ---------- Pet detail modal ---------- */
.pet-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.pet-chips span {
  font-weight:800; font-size:.72rem; letter-spacing:.02em;
  padding:.35rem .8rem; border-radius:var(--radius-pill);
  background:var(--coral-50); color:var(--coral-600);
}
.pet-modal { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.pet-modal[hidden] { display:none; }
.pet-modal__overlay { position:absolute; inset:0; background:rgba(8,3,1,.72); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s; }
.pet-modal.open .pet-modal__overlay { opacity:1; }
.pet-modal__box {
  position:relative; z-index:1; width:min(900px,100%); max-height:90vh; overflow:auto;
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr 1fr;
  transform:translateY(20px) scale(.98); opacity:0; transition:transform .35s var(--ease), opacity .35s;
}
.pet-modal.open .pet-modal__box { transform:none; opacity:1; }
.pet-modal__close {
  position:absolute; top:.6rem; right:.8rem; z-index:3;
  width:38px; height:38px; border:none; border-radius:50%;
  background:rgba(0,0,0,.4); color:#fff; font-size:1.5rem; line-height:1;
  cursor:pointer; transition:.2s;
}
.pet-modal__close:hover { background:var(--coral); }
.pet-modal__gallery { background:var(--peach); padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.pet-modal__main { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius); background:var(--coral-50); }
.pet-modal__thumbs { display:flex; gap:.5rem; flex-wrap:wrap; }
.pet-modal__thumbs img { width:58px; height:58px; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:.2s; opacity:.7; }
.pet-modal__thumbs img:hover { opacity:1; }
.pet-modal__thumbs img.active { border-color:var(--coral); opacity:1; }
.pet-modal__info { padding:2.2rem 2rem; }
.pet-modal__badge { display:inline-block; font-weight:800; font-size:.72rem; padding:.3rem .8rem; border-radius:var(--radius-pill); color:#fff; margin-bottom:.7rem; }
.pet-modal__name { font-size:2rem; margin-bottom:.2rem; }
.pet-modal__meta { color:var(--coral); font-weight:700; margin-bottom:1.2rem; }
.pet-modal__bio p { font-size:.97rem; margin-bottom:.8rem; }
.pet-modal__cta { margin-top:.6rem; }
@media (max-width:680px){ .pet-modal__box { grid-template-columns:1fr; } .pet-modal__main { aspect-ratio:4/3; } }

/* ============================================
   GALLERY (adopted)
   ============================================ */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem; }
.gallery__item {
  position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg, var(--peach), var(--coral-50)); box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.gallery__item:hover { transform:scale(1.03); box-shadow:var(--shadow-lg); }
.gallery__item img { width:100%; height:100%; object-fit:cover; }
.gallery__item.is-empty img { display:none; }
.gallery__item.is-empty::after { content:attr(data-fallback); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.6rem; opacity:.4; }

/* ============================================
   ADOPT STEPS
   ============================================ */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.step {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem 1.5rem;
  box-shadow:var(--shadow); position:relative;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.step:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.step__n {
  display:inline-flex; width:52px; height:52px;
  align-items:center; justify-content:center; border-radius:50%;
  background:var(--coral); color:#fff;
  font-family:var(--serif); font-weight:700; font-size:1.3rem; margin-bottom:1rem;
  box-shadow:0 6px 18px rgba(255,107,74,.35);
}
.step:nth-child(2) .step__n { background:var(--sun); box-shadow:var(--shadow-sun); }
.step:nth-child(3) .step__n { background:var(--mint); box-shadow:var(--shadow-mint); }
.step:nth-child(4) .step__n { background:var(--coral); box-shadow:var(--shadow-coral); }
.step h3 { margin-bottom:.4rem; }
.step p { font-size:.95rem; }

/* ---------- Adoption form embed (SurveyHeart) ---------- */
.adopt-form { margin-top:3rem; }
.adopt-form__intro { font-weight:700; color:var(--ink); margin-bottom:1.4rem; }
.adopt-form__frame {
  max-width:860px; margin:0 auto; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line);
  background:var(--white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><text x="30" y="38" font-size="26" text-anchor="middle">🐾</text></svg>') center 120px no-repeat;
}
.adopt-form__frame iframe { display:block; width:100%; height:min(1100px, 82vh); border:0; }
.adopt-form__alt { margin-top:1.2rem; }

/* ============================================
   SUPPORT
   ============================================ */
.section--teal { background:linear-gradient(135deg, var(--mint-600), var(--mint) 55%, #8CEBCB); }
.support-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.support-card {
  background:rgba(255,255,255,.98); border-radius:var(--radius);
  padding:2.2rem 1.8rem; text-align:center;
  box-shadow:var(--shadow-lg); transition:transform .3s var(--ease);
}
.support-card:hover { transform:translateY(-8px); }
.support-card .card__icon { margin:0 auto 1rem; }
.support-card:nth-child(1) .card__icon { background:var(--sun-50); }
.support-card:nth-child(2) .card__icon { background:var(--mint-50); }
.support-card:nth-child(3) .card__icon { background:var(--coral-50); }
.support-card p { margin-bottom:1.3rem; }

/* ============================================
   CONTACT
   ============================================ */
.contact__inner { display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:start; }
.contact__list { margin-top:1.6rem; display:grid; gap:.9rem; }
.contact__list li { display:flex; align-items:center; gap:.7rem; color:var(--ink); font-weight:600; }
.contact__list a:hover { color:var(--coral); }
.contact-form {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.form-group label { font-weight:800; font-size:.85rem; color:var(--ink); }
.form-group input, .form-group textarea {
  font-family:var(--sans); font-size:1rem; padding:.85rem 1rem;
  border:2px solid var(--line); border-radius:12px;
  background:var(--warm-white); transition:border .2s, box-shadow .2s;
}
.form-group input:focus, .form-group textarea:focus {
  outline:none; border-color:var(--coral);
  box-shadow:0 0 0 4px rgba(255,107,74,.12);
}
.form-group textarea { min-height:130px; resize:vertical; }
.form-status { margin-bottom:1rem; font-weight:700; font-size:.92rem; }
.form-status.ok  { color:var(--mint); }
.form-status.err { color:#e53e3e; }

/* ============================================
   FOOTER — warm deep brown
   ============================================ */
#site-footer {
  background:linear-gradient(160deg, #1F5C55, #164943 70%, #0F3530);
  color:rgba(255,255,255,.82); padding:4rem 0 0;
}
#site-footer .site-logo img {
  background:var(--warm-white); border-radius:50%; padding:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; }
.footer-brand p { color:rgba(255,255,255,.58); margin-top:1rem; font-size:.95rem; }
.social { display:flex; gap:.6rem; margin-top:1.2rem; }
.social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  transition:transform .25s var(--ease), background .25s;
}
.social a:hover { background:var(--coral); transform:translateY(-3px); }
.social svg { width:20px; height:20px; fill:currentColor; }
.footer-col h4 { color:#fff; margin-bottom:1rem; font-size:1rem; }
.footer-col li { margin-bottom:.6rem; }
.footer-col a:hover { color:var(--sun-100); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.10); margin-top:3rem;
  padding:1.5rem 0; text-align:center; font-size:.85rem;
}
.footer-bottom .container { padding:0 1.5rem; }

/* ============================================
   SCROLL TOP + REVEALS
   ============================================ */
.scroll-top {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:800;
  width:50px; height:50px; border:none; border-radius:50%;
  background:var(--coral); color:#fff; font-size:1.4rem; font-weight:800;
  cursor:pointer; box-shadow:var(--shadow-coral);
  opacity:0; visibility:hidden; transform:translateY(15px); transition:.3s;
}
.scroll-top.show { opacity:1; visibility:visible; transform:translateY(0); }

.reveal { opacity:0; transform:translateY(34px); transition:opacity 1.2s var(--ease-slow), transform 1.2s var(--ease-slow); }
.reveal.in { opacity:1; transform:none; }
/* Staggered reveals inside card grids — each sibling waits a beat longer */
.cards > .reveal:nth-child(2), .steps > .reveal:nth-child(2), .support-grid > .reveal:nth-child(2),
.founders > .reveal:nth-child(2), .blog-grid > .reveal:nth-child(2), .moved__grid > .reveal:nth-child(2),
.gallery > .reveal:nth-child(2) { transition-delay:.2s; }
.cards > .reveal:nth-child(3), .steps > .reveal:nth-child(3), .support-grid > .reveal:nth-child(3),
.founders > .reveal:nth-child(3), .blog-grid > .reveal:nth-child(3), .moved__grid > .reveal:nth-child(3),
.gallery > .reveal:nth-child(3) { transition-delay:.4s; }
.cards > .reveal:nth-child(4), .steps > .reveal:nth-child(4), .blog-grid > .reveal:nth-child(4),
.moved__grid > .reveal:nth-child(4), .gallery > .reveal:nth-child(4) { transition-delay:.6s; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:980px) {
  .cards, .animals__grid, .gallery, .steps { grid-template-columns:repeat(2,1fr); }
  .support-grid { grid-template-columns:1fr; }
  .mission__inner, .contact__inner { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:760px) {
  .main-nav { display:none; }
  .hamburger { display:flex; }
  .section { padding:4rem 0; }
  .clip__overlay { padding:1.6rem; }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .cards, .animals__grid, .gallery, .steps { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}

/* ============================================
   SUBPAGE (historia.html)
   ============================================ */
body.subpage { padding-top:var(--nav-h); }
.narrow { max-width:780px; }
.lead { font-size:1.2rem; color:var(--ink); font-weight:600; margin-bottom:1rem; }

.page-hero { position:relative; padding:5rem 0 4rem; overflow:hidden; color:#fff; }
.page-hero__bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg, var(--coral-600), var(--coral) 55%, #ff8c72);
}
.page-hero__bg::after {
  content:''; position:absolute; top:-40px; right:8%;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle at 38% 35%, #fff8e6, var(--sun) 55%, var(--sun-600) 100%);
  box-shadow:0 0 80px 20px rgba(255,184,48,.40);
}
.page-hero .container { position:relative; z-index:1; }

/* Photo variant — founders photo with a warm overlay for text contrast.
   Anchored to the bottom so the founders (bottom of the photo) never crop,
   and oversized upward so the JS parallax can slide it without gaps. */
.page-hero--photo { padding:10rem 0 7rem; }
.page-hero--photo .page-hero__bg {
  top:-55%;
  background:
    linear-gradient(180deg, rgba(15,53,48,.55), rgba(15,53,48,.30) 55%, rgba(185,74,46,.45)),
    url('../img/founder/historia-hero.jpg') center bottom / cover no-repeat,
    linear-gradient(135deg, var(--coral-600), var(--coral));
  will-change:transform;
}
.page-hero--photo .page-hero__bg::after { display:none; }
.page-hero--photo .page-hero__title,
.page-hero--photo .page-hero__sub { text-shadow:0 2px 18px rgba(0,0,0,.45); }
@media (max-width:767px) {
  .page-hero--photo .page-hero__bg { top:0; }  /* no parallax on mobile */
}

/* Blog variant — two dogs playing by the lake */
.page-hero--blog .page-hero__bg {
  background:
    linear-gradient(180deg, rgba(15,53,48,.50), rgba(15,53,48,.28) 55%, rgba(31,169,124,.45)),
    url('../img/founder/blog-hero.jpg') center 62% / cover no-repeat,
    linear-gradient(135deg, var(--mint-600), var(--mint));
}
.page-hero__title { font-size:clamp(2.4rem,6vw,4.2rem); color:#fff; margin:.3rem 0 .8rem; }
.page-hero__sub { color:rgba(255,255,255,.92); font-size:1.2rem; max-width:600px; }

/* "Os animais que nos moveram" — 2x2 photo grid + story video */
.moved__grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem;
  max-width:820px; margin:2.5rem auto 0;
}
.moved__item {
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:3/4; background:linear-gradient(135deg, var(--peach), var(--coral-50));
  transition:transform .3s var(--ease), box-shadow .3s;
}
.moved__item:hover { transform:translateY(-5px) scale(1.01); box-shadow:var(--shadow-lg); }
.moved__item img { width:100%; height:100%; object-fit:cover; display:block; }
.moved__video { max-width:420px; margin:2rem auto 0; text-align:center; }
.moved__video video {
  max-width:100%; height:auto; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); background:#000; display:block;
}
.moved__caption { font-size:.88rem; color:var(--muted); margin-top:.7rem; font-style:italic; }
@media (max-width:768px) {
  .moved__grid { grid-template-columns:1fr; max-width:420px; }
}

/* Timeline */
.timeline { margin-top:3rem; display:grid; gap:1.5rem; position:relative; }
.timeline::before {
  content:''; position:absolute; left:46px; top:10px; bottom:10px;
  width:2px; background:var(--line);
}
.tl-item { display:flex; align-items:flex-start; gap:1.5rem; position:relative; }
.tl-year {
  flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:.9rem;
  z-index:1; box-shadow:var(--shadow-coral);
}
.tl-item:nth-child(2) .tl-year { background:var(--sun); color:var(--ink); box-shadow:var(--shadow-sun); }
.tl-item:nth-child(3) .tl-year { background:var(--mint); box-shadow:var(--shadow-mint); }
.tl-card {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.4rem 1.6rem;
  box-shadow:var(--shadow); flex:1;
}
.tl-card h3 { margin-bottom:.3rem; }

/* Founders */
.founders { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3rem; }
.founder { text-align:center; }
.founder__photo {
  position:relative; width:170px; height:170px; margin:0 auto 1.1rem;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg, var(--peach), var(--coral-50));
  box-shadow:var(--shadow);
}
.founder__photo img { width:100%; height:100%; object-fit:cover; }
.founder__photo.is-empty img { display:none; }
.founder__photo.is-empty::after {
  content:attr(data-fallback); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; font-size:3rem; opacity:.4;
}
.founder__name { font-size:1.35rem; }
.founder__role {
  color:var(--coral); font-weight:800; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.08em; margin:.2rem 0 .6rem;
}
.founder__bio { font-size:.95rem; }
@media (max-width:760px){ .founders{ grid-template-columns:1fr; } }

/* ============================================
   SKIP LINK (a11y)
   ============================================ */
.skip-link {
  position:fixed; top:-60px; left:1rem; z-index:10000;
  background:var(--ink); color:#fff; font-weight:800; font-size:.9rem;
  padding:.7rem 1.2rem; border-radius:0 0 12px 12px;
  transition:top .25s var(--ease);
}
.skip-link:focus { top:0; outline:3px solid var(--sun); }

/* Discreet footer admin link */
.admin-link { opacity:.45; font-size:.8rem; transition:opacity .2s; }
.admin-link:hover { opacity:.85; text-decoration:underline; }

/* ============================================
   BLOG
   ============================================ */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.blog-card {
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.blog-card__photo {
  position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg, var(--peach), var(--coral-50));
}
.blog-card__photo img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.blog-card:hover .blog-card__photo img { transform:scale(1.05); }
.blog-card--soon .blog-card__photo img { filter:saturate(.55); opacity:.85; }
.blog-card__body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.blog-card__meta {
  font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mint-600);
}
.blog-card__title { font-size:1.25rem; line-height:1.25; }
.blog-card__title a:hover { color:var(--coral-600); }
.blog-card__excerpt { font-size:.95rem; flex:1; }
.blog-card--soon { opacity:.92; }
@media (max-width:980px){ .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .blog-grid { grid-template-columns:1fr; } }

/* Blog post article */
.post__title { font-size:clamp(2rem,5vw,3.2rem); margin:.4rem 0 1rem; }
.post__figure { margin:2rem 0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.post__figure img { width:100%; height:auto; }
.post__figure figcaption { font-size:.85rem; color:var(--muted); padding:.7rem 1.2rem; background:var(--peach); }
.post h2 { font-size:1.5rem; margin:2.2rem 0 .7rem; }
.post p { margin-bottom:1rem; }
.post p a { color:var(--coral-600); font-weight:700; }
.post p a:hover { text-decoration:underline; }
.post__cta {
  margin-top:2.5rem; padding:1.8rem; text-align:center;
  background:var(--mint-50); border:1px solid #C9F2E3; border-radius:var(--radius-lg);
}
.post__cta p { margin-bottom:1rem; color:var(--ink); }

/* ============================================
   ADMIN LOGIN
   ============================================ */
.admin-page { min-height:100vh; background:linear-gradient(160deg, var(--peach), var(--warm-white) 45%, var(--mint-50)); padding-top:0; }
.admin-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem; }
.admin-box {
  width:min(430px,100%); background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:2.6rem 2.2rem 2.2rem; text-align:center;
}
.admin-box__logo { display:flex; justify-content:center; margin-bottom:1rem; }
.admin-box__logo img { width:72px; height:72px; background:var(--warm-white); border-radius:50%; padding:6px; box-shadow:var(--shadow); }
.admin-box__title { font-size:2rem; margin:.2rem 0 .3rem; }
.admin-box__sub { font-size:.95rem; margin-bottom:1.6rem; }
.admin-box form { text-align:left; }
.admin-soon {
  display:flex; gap:.8rem; align-items:flex-start; text-align:left;
  margin-top:1.4rem; padding:1rem 1.2rem;
  background:var(--sun-50); border:1px solid var(--sun-100); border-radius:var(--radius);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.admin-soon.show { opacity:1; transform:none; }
.admin-soon span { font-size:1.4rem; }
.admin-soon p { font-size:.92rem; color:var(--ink); }
.admin-box__langs { justify-content:center; margin:1.4rem auto 0; width:max-content; background:var(--peach); }
.admin-box__langs .lang-btn { color:var(--ink); }

/* ============================================
   CHATBOT WIDGET
   ============================================ */
.chatbot-toggle {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:850;
  width:60px; height:60px; border:none; border-radius:50%;
  background:var(--mint); color:#fff; font-size:1.7rem;
  cursor:pointer; box-shadow:var(--shadow-mint);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease), background .25s;
}
.chatbot-toggle:hover { transform:translateY(-3px); background:var(--mint-600); }
/* keep clear of the scroll-to-top button when it appears */
body.has-chatbot .scroll-top { bottom:1.7rem; right:calc(1.5rem + 60px + .9rem); }
.chatbot-panel {
  position:fixed; bottom:calc(1.5rem + 60px + .9rem); right:1.5rem; z-index:860;
  width:min(370px, calc(100vw - 2rem)); height:min(520px, calc(100vh - 140px));
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.chatbot-panel.open { opacity:1; transform:none; pointer-events:auto; }
.chatbot-head {
  display:flex; align-items:center; gap:.7rem; padding:.9rem 1.1rem;
  background:linear-gradient(135deg, var(--mint-600), var(--mint));
  color:#fff;
}
.chatbot-head img { width:34px; height:34px; background:var(--warm-white); border-radius:50%; padding:3px; }
.chatbot-head h3 { font-family:var(--sans); font-size:.98rem; color:#fff; flex:1; }
.chatbot-close { background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; line-height:1; padding:.2rem .4rem; opacity:.85; }
.chatbot-close:hover { opacity:1; }
.chatbot-msgs { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--warm-white); }
.chat-msg { max-width:85%; padding:.6rem .9rem; border-radius:16px; font-size:.92rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.chat-msg--bot { align-self:flex-start; background:var(--white); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px; }
.chat-msg--user { align-self:flex-end; background:var(--mint); color:#fff; border-bottom-right-radius:4px; }
.chat-msg--typing { color:var(--muted); font-style:italic; }
.chatbot-form { display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--line); background:var(--white); }
.chatbot-form input {
  flex:1; font-family:var(--sans); font-size:.95rem; padding:.65rem .9rem;
  border:2px solid var(--line); border-radius:var(--radius-pill); background:var(--warm-white);
}
.chatbot-form input:focus { outline:none; border-color:var(--mint); }
.chatbot-form button {
  border:none; background:var(--mint); color:#fff; font-weight:800; font-size:.85rem;
  padding:.6rem 1.1rem; border-radius:var(--radius-pill); cursor:pointer; transition:background .2s;
}
.chatbot-form button:hover { background:var(--mint-600); }
.chatbot-form button:disabled { opacity:.55; cursor:default; }
@media (max-width:520px) {
  .chatbot-panel { right:.75rem; bottom:calc(1rem + 60px + .75rem); }
  .chatbot-toggle { bottom:1rem; right:1rem; }
  body.has-chatbot .scroll-top { bottom:1.2rem; right:calc(1rem + 60px + .8rem); }
}

/* ============================================
   KEYBOARD FOCUS (WCAG)
   ============================================ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--sky-600); outline-offset:2px; border-radius:4px;
}
.btn:focus-visible { outline-offset:3px; }

/* ============================================
   PET DETAILS PAGE (pet-details.php)
   ============================================ */
.petd__grid { display:grid; grid-template-columns:1.05fr 1fr; gap:3rem; margin-top:1.5rem; align-items:start; }
.petd__main-wrap {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); background:linear-gradient(135deg, var(--peach), var(--coral-50));
}
.petd__main { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.petd__main-wrap .badge { top:1rem; left:1rem; font-size:.8rem; padding:.4rem .9rem; }
.petd__thumbs { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.petd__thumb {
  border:3px solid transparent; border-radius:12px; overflow:hidden; padding:0;
  background:none; cursor:pointer; opacity:.75; transition:opacity .2s, border-color .2s;
}
.petd__thumb img { width:74px; height:74px; object-fit:cover; display:block; }
.petd__thumb:hover { opacity:1; }
.petd__thumb.active { border-color:var(--coral); opacity:1; }
.petd__name { font-size:clamp(2.4rem,5vw,3.6rem); margin:.2rem 0 .3rem; }
.petd__meta { color:var(--coral); font-weight:800; font-size:1.05rem; margin-bottom:1.2rem; }
.petd__bio p { margin-bottom:.9rem; }
.petd__ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }
@media (max-width:860px){ .petd__grid { grid-template-columns:1fr; gap:2rem; } }

/* ============================================
   FLOATING PAW PRINTS — ambient background decor
   (generated by script.js; sits behind the content)
   ============================================ */
.paw-field {
  position:fixed; inset:0; z-index:-1;
  pointer-events:none; overflow:hidden;
}
.paw-field svg {
  position:absolute; bottom:-90px; opacity:0;
  animation:pawFloat var(--dur,20s) linear var(--delay,0s) infinite;
}
@keyframes pawFloat {
  0%   { transform:translate3d(0,0,0) rotate(var(--rot,0deg)); opacity:0; }
  8%   { opacity:var(--op,.06); }
  90%  { opacity:var(--op,.06); }
  100% { transform:translate3d(var(--dx,0px),-115vh,0) rotate(var(--rot,0deg)); opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .paw-field { display:none; } }

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.1ms !important; }
  .reveal { opacity:1; transform:none; }
  #intro { display:none; }
}