/* kryptoluxa.com — caderno-zine sobre uma rã cheia de cor
   Substrato: papel verde · cartões bone · serif sussurrado (Gilda Display) + Karla
   Escrito à mão. Sem frameworks. */

:root{
  --paper:#d7ead9;          /* substrato verde-cinza, papel */
  --paper-deep:#cbe1cd;     /* variação para faixas */
  --bone:#fafafa;           /* cartão */
  --ink:#171717;            /* corpo */
  --ink-soft:#3d4a3e;       /* secundário */
  --pencil:#8a988c;         /* terciário, metadados */
  --line:#c2d6c4;           /* hairline verde */
  --line-strong:#a9c1ac;
  --mint:#daf5ae;
  --butter:#fde5a7;
  --sage:#b7f2cc;
  --rust:#7c2d12;           /* único acento quente, com conta-gotas */
  --frog:#3f7d3a;
  --frog-deep:#2c5a29;
  --frog-light:#7bbf5f;

  --f-head:'Gilda Display', Georgia, 'Times New Roman', serif;
  --f-body:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --edge:clamp(18px,5vw,84px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw + 13px,17px);
  line-height:1.62;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
b,strong{font-weight:700;color:var(--ink)}
::selection{background:var(--mint);color:#111}

.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;
  padding:8px 14px;border-radius:4px;z-index:60}
.skip-link:focus{left:12px}

/* word painted with the rust marker — used with a very light hand */
.mark{color:var(--rust);font-weight:700}
.u-sage{background:linear-gradient(transparent 62%, var(--sage) 62%)}
.u-mint{background:linear-gradient(transparent 62%, var(--mint) 62%)}

/* ---------- header / nav ---------- */
.site-head{padding:clamp(14px,2.4vw,22px) var(--edge) 6px}
.nav{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-head);
  font-size:20px;letter-spacing:-0.02em;color:var(--ink)}
.brand svg{width:30px;height:30px}
.brand em{font-style:normal;color:var(--pencil);font-family:var(--f-body);
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;margin-left:2px}
.nav-spacer{flex:1}
.nav-links{list-style:none;display:flex;gap:clamp(12px,1.6vw,26px);margin:0;padding:0}
.nav-links a{font-size:15px;color:var(--ink-soft);padding:4px 0;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--line-strong)}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:6px;
  width:42px;height:38px;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:9px;right:9px;
  height:2px;background:var(--ink);top:50%;transform:translateY(-50%);transition:.22s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:860px){
  .burger{display:block}
  .nav-links{position:absolute;left:var(--edge);right:var(--edge);top:64px;z-index:50;
    flex-direction:column;gap:2px;background:var(--bone);border:1px solid var(--line);
    border-radius:10px;padding:8px;box-shadow:0 14px 30px -18px rgba(20,40,20,.5);
    display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 8px;border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:none}
}

/* ---------- generic section rhythm ---------- */
main{display:block}
.section{padding-inline:var(--edge)}
.rule{height:1px;background:var(--line);margin:clamp(30px,5vw,58px) var(--edge)}
.eyebrow{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--pencil);
  display:inline-block;margin-bottom:10px}

/* ---------- hero / editorial intro ---------- */
.hero{padding:clamp(26px,5vw,60px) var(--edge) clamp(12px,3vw,26px)}
.hero-grid{display:grid;gap:clamp(20px,4vw,46px);align-items:end}
@media(min-width:820px){.hero-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.hero-kicker{font-size:12.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--pencil)}
.hero h1{font-family:var(--f-head);font-weight:400;
  font-size:clamp(38px,7vw,74px);line-height:0.98;letter-spacing:-0.03em;
  margin:14px 0 0;max-width:16ch}
.hero h1 .soft{color:var(--frog-deep)}
.hero-lead{max-width:52ch;margin:clamp(16px,2.4vw,26px) 0 0;color:var(--ink-soft);
  font-size:clamp(16px,0.6vw + 15px,19px);line-height:1.6}
.hero-anchors{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:26px;align-items:center}
.alink{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--rust);
  border-bottom:1px solid rgba(124,45,18,.35);padding-bottom:1px}
.alink:hover{border-bottom-color:var(--rust)}
.alink svg{width:15px;height:15px;stroke:var(--rust);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alink.plain{color:var(--ink-soft);border-bottom-color:var(--line-strong)}
.alink.plain svg{stroke:var(--ink-soft)}
.alink.plain:hover{color:var(--ink);border-bottom-color:var(--ink)}

.hero-frog{position:relative;justify-self:center}
.hero-frog .lilies{position:absolute;inset:auto 0 -6px 0;height:22px;
  background:radial-gradient(closest-side, var(--frog-light) 60%, transparent 62%) 0 0/34px 22px repeat-x;
  opacity:.5}
.hero-frog svg.mascot{width:clamp(190px,26vw,290px);height:auto;
  filter:drop-shadow(0 12px 16px rgba(30,60,30,.18))}
.mascot-say{position:absolute;top:2px;right:-6px;background:var(--butter);color:#3a2c05;
  font-size:12px;letter-spacing:.02em;padding:5px 11px;border-radius:9999px;
  border:1px solid #e7ce85;transform:rotate(3deg)}

/* ---------- masonry (CSS columns) ---------- */
.garden{padding:clamp(22px,4vw,44px) var(--edge) clamp(30px,5vw,56px)}
.garden-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:clamp(18px,3vw,30px)}
.garden-head h2{font-family:var(--f-head);font-weight:400;font-size:clamp(26px,4vw,42px);
  letter-spacing:-0.025em;line-height:1.04;margin:0;max-width:20ch}
.garden-head p{margin:0;color:var(--ink-soft);max-width:40ch;font-size:15.5px}

.masonry{column-gap:clamp(14px,1.6vw,22px);column-count:1}
@media(min-width:620px){.masonry{column-count:2}}
@media(min-width:1040px){.masonry{column-count:3}}
.card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  background:var(--bone);border:1px solid var(--line);border-radius:9px;
  padding:20px 20px 18px;margin:0 0 clamp(14px,1.6vw,22px);
  box-shadow:rgba(30,55,30,.06) 0 1px 0 0, inset 0 0 0 1px rgba(255,255,255,.4)}
.card.tall{padding-bottom:22px}
.card .kicker{font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--pencil)}
.card h3{font-family:var(--f-head);font-weight:400;font-size:clamp(21px,2.4vw,27px);
  letter-spacing:-0.02em;line-height:1.08;margin:9px 0 8px}
.card p{margin:0 0 10px;font-size:15.5px;line-height:1.58;color:var(--ink)}
.card p:last-child{margin-bottom:0}
.card .lede{color:var(--ink-soft)}

.pills{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.pills li{font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:#182015;
  background:var(--mint);border-radius:9999px;padding:3px 10px}
.pills li.b{background:var(--butter)}
.pills li.s{background:var(--sage)}

.card-note{display:flex;gap:8px;align-items:center;margin-top:12px;
  font-size:13px;color:var(--pencil)}
.card-note svg{width:16px;height:16px;flex:none}

/* frog illustration card */
.card.frogcard{background:linear-gradient(180deg,#eaf6e6,var(--bone))}
.frogcard .scene{width:100%;height:auto;border-radius:6px;border:1px solid var(--line);
  background:#eef7ea;margin-bottom:12px}

/* colour swatch strip inside "Cores" */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:4px 0 12px;
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.swatches span{height:34px}

/* small pond scene / palette figures share muted frame */
.figure-frame{border:1px solid var(--line);border-radius:6px;background:#eef7ea;
  overflow:hidden;margin-bottom:12px}
.figure-frame svg,.figure-frame img{width:100%;height:auto;display:block}
.frogcard .shot,.card .shot{width:100%;height:auto;border-radius:6px;
  border:1px solid var(--line);background:#eef7ea;display:block;margin-bottom:12px}
figcaption{font-size:12.5px;color:var(--pencil);margin-top:8px}
/* thin lily-pad strip under the hero */
.hero-strip{margin-top:20px;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:#8fd0e6}
.hero-strip img{width:100%;height:auto;display:block}

/* quiet quote card */
.card.quote p{font-family:var(--f-head);font-weight:400;font-size:clamp(20px,2.6vw,25px);
  line-height:1.28;letter-spacing:-0.02em;color:var(--ink)}
.card.quote .by{font-family:var(--f-body);font-size:13px;color:var(--pencil);margin-top:12px}

/* ---------- FAQ ---------- */
.faq{padding:clamp(24px,4vw,50px) var(--edge) clamp(30px,5vw,56px);background:var(--paper-deep)}
.faq-wrap{max-width:820px}
.faq h2{font-family:var(--f-head);font-weight:400;font-size:clamp(26px,4vw,40px);
  letter-spacing:-0.025em;margin:0 0 clamp(16px,3vw,28px)}
.faq-item{border-top:1px solid var(--line-strong)}
.faq-item:last-child{border-bottom:1px solid var(--line-strong)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-body);font-size:clamp(16px,1.4vw,18px);color:var(--ink);
  padding:17px 40px 17px 2px;position:relative;line-height:1.4}
.faq-q .plus{position:absolute;right:2px;top:50%;width:15px;height:15px;transform:translateY(-50%)}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--frog-deep);
  left:0;right:0;top:50%;height:2px;transform:translateY(-50%);transition:.22s}
.faq-q .plus::after{transform:translateY(-50%) rotate(90deg)}
.faq-q[aria-expanded="true"] .plus::after{transform:translateY(-50%) rotate(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-a p{margin:0 0 16px;color:var(--ink-soft);font-size:15.5px;max-width:66ch}

/* ---------- subscribe / note strip ---------- */
.note-strip{padding:clamp(24px,4vw,46px) var(--edge);display:grid;gap:22px;align-items:start}
@media(min-width:820px){.note-strip{grid-template-columns:1.1fr 1fr}}
.note-copy .eyebrow{margin-bottom:8px}
.note-copy h2{font-family:var(--f-head);font-weight:400;font-size:clamp(24px,3.6vw,38px);
  letter-spacing:-0.025em;line-height:1.06;margin:0 0 12px}
.note-copy p{color:var(--ink-soft);max-width:46ch;margin:0 0 10px}

.form-plate{background:var(--bone);border:1px solid var(--line);border-radius:10px;
  padding:clamp(18px,3vw,28px)}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:6px}
.field input[type=text],.field input[type=email]{width:100%;font-family:var(--f-body);
  font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);
  border-radius:7px;padding:11px 13px}
.field input:focus{outline:2px solid var(--frog-light);outline-offset:1px;border-color:var(--frog)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:6px}
.check input{margin-top:4px;width:16px;height:16px;flex:none;accent-color:var(--frog)}
.check label{font-size:13px;color:var(--pencil);line-height:1.45}
.check a{color:var(--rust);border-bottom:1px solid rgba(124,45,18,.35)}
.submit{margin-top:6px;background:var(--frog-deep);color:#f4fbef;border:1px solid var(--frog-deep);
  font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:.02em;
  padding:12px 22px;border-radius:8px;cursor:pointer}
.submit:hover{background:#234a20}
#successMsg{margin-top:14px;background:var(--sage);border:1px solid #8fd9ab;color:#123;
  padding:12px 14px;border-radius:8px;font-size:14.5px}

/* ---------- footer ---------- */
.site-foot{background:var(--frog-deep);color:#d7e6d2;padding:clamp(34px,5vw,58px) var(--edge) 26px;
  margin-top:clamp(20px,4vw,40px)}
.foot-grid{display:grid;gap:26px}
@media(min-width:720px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:21px;color:#fbfffa}
.foot-brand svg{width:32px;height:32px}
.foot-about{color:#aecaa7;font-size:14px;max-width:42ch;margin:12px 0 0;line-height:1.55}
.site-foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8fb389;margin:0 0 12px;font-weight:600}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-links a{color:#d7e6d2;font-size:14.5px;border-bottom:1px solid transparent}
.foot-links a:hover{color:#fff;border-bottom-color:#5f8a58}
.foot-disc{border-top:1px solid #3a6335;margin-top:30px;padding-top:18px}
.foot-disc p{font-size:12px;color:#8fb389;line-height:1.55;max-width:96ch;margin:0 0 8px}
.foot-copy{color:#6f9169!important}

/* ---------- inner pages ---------- */
.page-hero{padding:clamp(30px,5vw,64px) var(--edge) clamp(14px,2vw,24px);max-width:60ch}
.page-hero h1{font-family:var(--f-head);font-weight:400;font-size:clamp(34px,6vw,60px);
  letter-spacing:-0.03em;line-height:1;margin:12px 0 0}
.page-hero p{color:var(--ink-soft);margin:16px 0 0;font-size:clamp(16px,0.5vw + 15px,18px)}

.prose{padding:0 var(--edge) clamp(30px,5vw,56px);max-width:74ch}
.prose .updated{font-size:13px;color:var(--pencil);margin-top:6px}
.prose h2{font-family:var(--f-head);font-weight:400;font-size:clamp(21px,2.6vw,28px);
  letter-spacing:-0.02em;margin:clamp(24px,3.5vw,38px) 0 8px}
.prose p,.prose li{color:var(--ink);font-size:15.5px;line-height:1.62}
.prose ul{padding-left:20px;margin:8px 0}
.prose li{margin-bottom:6px}
.prose a{color:var(--rust);border-bottom:1px solid rgba(124,45,18,.35)}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:#eef7ea;
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* about page bits */
.about-grid{display:grid;gap:clamp(16px,2vw,24px);padding:0 var(--edge) clamp(20px,3vw,32px)}
@media(min-width:760px){.about-grid{grid-template-columns:repeat(3,1fr)}}
.mini-card{background:var(--bone);border:1px solid var(--line);border-radius:9px;padding:18px}
.mini-card h3{font-family:var(--f-head);font-weight:400;font-size:22px;letter-spacing:-0.02em;margin:0 0 6px}
.mini-card p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* contact info row */
.info-row{display:grid;gap:14px;padding:0 var(--edge);margin-bottom:clamp(18px,3vw,30px)}
@media(min-width:680px){.info-row{grid-template-columns:repeat(3,1fr)}}
.info-card{background:var(--bone);border:1px solid var(--line);border-radius:9px;padding:16px 18px}
.info-card h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pencil);margin:0 0 6px;font-weight:600}
.info-card p{margin:0;font-size:15px}
.info-card a{color:var(--rust);border-bottom:1px solid rgba(124,45,18,.35)}
.form-block{padding:0 var(--edge) clamp(30px,5vw,56px);max-width:640px}

/* 404 */
.oops{min-height:52vh;display:grid;place-items:center;text-align:center;padding:60px var(--edge)}
.oops h1{font-family:var(--f-head);font-weight:400;font-size:clamp(56px,14vw,120px);
  letter-spacing:-0.04em;line-height:.9;margin:0}
.oops p{color:var(--ink-soft);margin:14px 0 22px;max-width:44ch}
.oops svg{width:120px;height:auto;margin:0 auto 8px}

/* reveal (progressive, no-JS safe via noscript) */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =====================================================================
   ANIMAÇÕES — a rã ganha vida (subtil, alegre, sem enjoar)
   ===================================================================== */
@keyframes idle{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-9px) rotate(-1.2deg)}}
@keyframes blinklid{0%,7%,100%{transform:scaleY(1)}3%{transform:scaleY(.08)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sway{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(6px) rotate(2deg)}}
@keyframes drift{from{background-position-x:0}to{background-position-x:-140px}}
@keyframes hopX{0%{left:6%}100%{left:82%}}   /* atravessa o charco, responsivo */
@keyframes hopY{0%,100%{transform:translateY(0)}45%{transform:translateY(-34px)}}
@keyframes fadeEnds{0%,4%{opacity:0}10%,90%{opacity:1}100%{opacity:0}}
@keyframes ripple{0%{transform:scale(.4);opacity:.5}100%{transform:scale(1.5);opacity:0}}
@keyframes fishwiggle{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(7px) rotate(3deg)}}

/* hero mascot ganha respiração + fala a abanar */
.hero-frog svg.mascot{animation:idle 3.4s ease-in-out infinite;transform-origin:50% 90%}
.mascot-say{animation:sway 3.4s ease-in-out infinite;transform-origin:0 100%}
.hero-strip img{transition:transform .6s ease}
.hero-strip:hover img{transform:scale(1.03)}

/* imagens dos cartões — zoom suave ao passar */
.figure-frame,.frogcard .shot,.card .shot{overflow:hidden}
.figure-frame img,.card .shot,.frogcard .shot{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.card:hover .figure-frame img,.card:hover .shot{transform:scale(1.045)}

/* ---------- faixa cinemática: "O salto" ---------- */
.leap{position:relative;margin:clamp(28px,5vw,52px) var(--edge) 0;border-radius:16px;
  overflow:hidden;border:1px solid var(--line);isolation:isolate;
  background:linear-gradient(180deg,#bfe6f2 0%,#8fd0e6 46%,#6fbcd6 47%,#4f9fc4 100%)}
.leap-scene{position:relative;height:clamp(220px,34vw,300px)}
.leap .cloud{position:absolute;top:14%;height:16px;border-radius:9999px;background:#fff;opacity:.85;
  box-shadow:20px 6px 0 -2px #fff, -18px 5px 0 -3px #fff}
.leap .cloud.c1{left:12%;width:56px;animation:bob 6s ease-in-out infinite}
.leap .cloud.c2{left:64%;top:22%;width:44px;animation:bob 7.5s ease-in-out .8s infinite}
.leap .sun{position:absolute;top:12%;right:9%;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle,#fff2c4 0%,#fde5a7 60%,rgba(253,229,167,0) 72%)}
.leap-pads{position:absolute;left:0;right:0;bottom:16%;display:flex;justify-content:space-around;
  padding:0 6%;pointer-events:none}
.leap-pads .pad{width:clamp(46px,9vw,76px);height:clamp(13px,2.6vw,20px);border-radius:50%;
  background:radial-gradient(closest-side,#7bbf5f 66%,#5aa444 100%);
  box-shadow:0 4px 0 -1px rgba(20,50,20,.18);animation:bob 3.6s ease-in-out infinite}
.leap-pads .pad:nth-child(2){animation-delay:.5s}
.leap-pads .pad:nth-child(3){animation-delay:1s}
.leap-pads .pad:nth-child(4){animation-delay:1.5s}
.leap-pads .pad:nth-child(5){animation-delay:2s}
.hopper{position:absolute;left:6%;bottom:calc(16% + 6px);width:clamp(42px,7vw,58px);
  animation:hopX 7s cubic-bezier(.34,0,.66,1) infinite, fadeEnds 7s linear infinite}
.hopper .hopbob{animation:hopY .7s ease-in-out infinite}
.hopper svg{width:100%;height:auto;filter:drop-shadow(0 5px 5px rgba(20,50,30,.28))}
.leap-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px clamp(16px,3vw,26px);
  background:linear-gradient(0deg,rgba(15,45,55,.55),transparent);
  color:#f2fbff;font-family:var(--f-head);font-size:clamp(16px,2.4vw,24px);
  letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,30,40,.4)}

/* ---------- galeria horizontal: "Momentos" ---------- */
.gallery{padding:clamp(26px,4vw,48px) 0 clamp(20px,3vw,36px)}
.gallery-head{padding:0 var(--edge);display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:clamp(14px,2vw,22px)}
.gallery-head h2{font-family:var(--f-head);font-weight:400;font-size:clamp(24px,4vw,40px);
  letter-spacing:-.025em;margin:0;line-height:1.04}
.gallery-head p{margin:0;color:var(--ink-soft);max-width:34ch;font-size:15px}
.rail{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--edge) 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.rail figure{scroll-snap-align:start;flex:0 0 auto;width:clamp(230px,42vw,320px);margin:0;
  background:var(--bone);border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:rgba(30,55,30,.06) 0 1px 0 0}
.rail .shot-wrap{overflow:hidden;border-radius:8px;border:1px solid var(--line);background:#eef7ea}
.rail img,.rail svg{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rail figure:hover img,.rail figure:hover svg{transform:scale(1.07)}
.rail figcaption{margin:9px 4px 2px;font-size:13px;color:var(--ink-soft);line-height:1.4}
.rail figcaption b{color:var(--frog-deep)}

/* ---------- bestiário do charco ---------- */
.bestiary{padding:clamp(26px,4vw,50px) var(--edge) clamp(24px,4vw,44px)}
.bestiary-head{margin-bottom:clamp(16px,2.4vw,26px);max-width:52ch}
.bestiary-head h2{font-family:var(--f-head);font-weight:400;font-size:clamp(24px,4vw,40px);
  letter-spacing:-.025em;margin:0 0 8px;line-height:1.04}
.bestiary-head p{margin:0;color:var(--ink-soft);font-size:15.5px}
.beasts{display:grid;gap:clamp(12px,1.6vw,20px)}
@media(min-width:700px){.beasts{grid-template-columns:repeat(3,1fr)}}
.beast{background:var(--bone);border:1px solid var(--line);border-radius:12px;padding:18px 18px 20px;
  box-shadow:rgba(30,55,30,.06) 0 1px 0 0}
.beast .crest{height:96px;border-radius:9px;border:1px solid var(--line);margin-bottom:14px;
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0,#eaf6e6,#dcefdc)}
.beast.water .crest{background:radial-gradient(120% 90% at 50% 0,#b6e2f0,#8fd0e6)}
.beast .crest svg{width:78px;height:auto}
.beast .art-frog{animation:bob 3s ease-in-out infinite;transform-origin:50% 90%}
.beast .art-fish{animation:fishwiggle 2.4s ease-in-out infinite;transform-origin:50% 50%}
.beast .art-lily{animation:sway 4s ease-in-out infinite;transform-origin:50% 100%}
.beast h3{font-family:var(--f-head);font-weight:400;font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
.beast p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.beast .tag{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#182015;background:var(--mint);border-radius:9999px;padding:3px 10px}
.beast.water .tag{background:var(--sage)}

@media(prefers-reduced-motion:reduce){
  .hero-frog svg.mascot,.mascot-say,.leap .cloud,.leap-pads .pad,.hopper,.hopper .hopbob,
  .beast .art-frog,.beast .art-fish,.beast .art-lily{animation:none!important}
  .figure-frame img,.figure-frame svg,.card .shot,.rail img,.rail svg,.hero-strip img,.hero-strip svg{transition:none}
}