/* Layout: straw-cream page opening on the brand banner edge to edge; a horizontal "balcão" of species panels
   (horse panel carries the saddlery); the banner returns as the closing image in the footer. Leather for warmth, logo green for action. */
:root{
  --bg:#F6EFE2;
  --surface:#EDE2CD;
  --ink:#2B1E14;
  --leather:#9A5A2B;
  --leather-deep:#6E3D1C;
  --green:#1F5B33;
  --mute:#6C5A48;
  --rule:rgba(43,30,20,.14);
  --white:#FFFDF8;

  --f-display:"Fraunces","Cooper","Georgia",serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-xs:.78rem; --t-sm:.92rem; --t-md:1.08rem; --t-lg:1.3rem;
  --t-2xl:clamp(2.4rem,5.4vw,4.6rem);
  --t-hero:clamp(2.7rem,6.6vw,6.2rem);
  --t-giant:clamp(3.2rem,9vw,8.6rem);
  --gutter:clamp(16px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--t-md);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--leather);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1;margin:0;text-wrap:balance;letter-spacing:-.02em;font-variation-settings:"SOFT" 100,"WONK" 0}
p{margin:0}
em{font-style:italic;color:var(--leather);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 1}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:grid;gap:1.4rem}
.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--leather);display:flex;align-items:center;gap:.75em}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.ph{font-size:.82em;font-style:normal;font-weight:600;letter-spacing:.04em;background:rgba(154,90,43,.1);outline:1px dashed var(--leather);outline-offset:1px;padding:.08em .45em;border-radius:4px;color:inherit;white-space:nowrap}

/* price-tag buttons: a green tag hung by a string, it swings from the eyelet on hover */
.tagbtn{--tb:var(--green);--tf:var(--white);--edge:transparent;position:relative;display:inline-flex;padding-left:26px;text-decoration:none;transform-origin:44px 50%;-webkit-tap-highlight-color:transparent}
.tagbtn::before{content:"";position:absolute;left:0;top:calc(50% - 15px);width:44px;height:17px;border:1.5px solid var(--leather);border-color:var(--leather) transparent transparent var(--leather);border-radius:22px 0 0 0;pointer-events:none}
.tagbtn-body{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.6em 1.05em 2.4em;background:var(--tb);color:var(--tf);font-family:var(--f-body);font-weight:700;font-size:var(--t-sm);line-height:1.2;white-space:nowrap;clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%);-webkit-mask:radial-gradient(circle 4.5px at 18px 50%,transparent 96%,#000 100%);mask:radial-gradient(circle 4.5px at 18px 50%,transparent 96%,#000 100%);transition:background .3s}
.tagbtn .arr{display:inline-block;transition:transform .35s var(--ease)}
.tagbtn:hover .arr,.tagbtn:focus-visible .arr{transform:translateX(4px)}
.tagbtn:hover .tagbtn-body{background:var(--tb-hover,#17472A)}
.tagbtn:focus-visible{outline:none}
.tagbtn:focus-visible .tagbtn-body{background:var(--tb-hover,#17472A);box-shadow:inset 0 0 0 2px var(--leather)}
.tagbtn.alt{--tb:var(--white);--tf:var(--green);--tb-hover:#E7EFE3;filter:drop-shadow(1.5px 0 0 var(--green)) drop-shadow(-1.5px 0 0 var(--green)) drop-shadow(0 1.5px 0 var(--green)) drop-shadow(0 -1.5px 0 var(--green))}
.tagbtn.light{--tb:var(--white);--tf:var(--green);--tb-hover:#F0E6D4}
.tagbtn.light::before{border-color:#E7C9A5 transparent transparent #E7C9A5}
.tagbtn.sm .tagbtn-body{padding:.72em 1.15em .72em 2.1em;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  .tagbtn:hover,.tagbtn:focus-visible{animation:swing 1.1s cubic-bezier(.3,0,.3,1)}
}
@keyframes swing{0%{rotate:0deg}18%{rotate:-8deg}40%{rotate:5deg}60%{rotate:-2.5deg}80%{rotate:1deg}100%{rotate:0deg}}

/* open / closed status */
.status{display:inline-flex;align-items:center;gap:.55em}
.dot{width:8px;height:8px;border-radius:50%;background:#C9B08A;flex:none}
.is-open .dot{background:#7ED68F;box-shadow:0 0 0 0 rgba(126,214,143,.7);animation:pulse 2s infinite}
.is-closed .dot{background:#E6A06B}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(126,214,143,0)}100%{box-shadow:0 0 0 0 rgba(126,214,143,0)}}
@media (prefers-reduced-motion:reduce){.is-open .dot{animation:none}}

/* top strip + nav */
.strip{background:var(--green);color:rgba(255,253,248,.88);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:calc(.55rem + env(safe-area-inset-top,0px)) var(--gutter) .55rem;display:flex;justify-content:space-between;gap:1rem}
.strip span:nth-child(2){display:none}
@media (min-width:760px){.strip span:nth-child(2){display:inline}}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:1.5rem;padding:10px var(--gutter);background:rgba(246,239,226,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:box-shadow .4s}
.nav.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.nav-brand{display:block;height:58px;flex:none}
.nav-brand img{height:100%;width:auto}
.nav-links{display:flex;gap:1.8rem;margin-left:auto;font-size:var(--t-sm);font-weight:500}
.nav-links a{text-decoration:none;position:relative;padding-block:.3em}
.nav-links sup{font-size:.62rem;font-weight:700;color:var(--leather);margin-right:.25em;vertical-align:.7em}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--leather);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:760px){.nav-links{display:none}.nav .tagbtn{margin-left:auto}.nav-brand{height:46px}}

/* hero */
.hero{padding-bottom:clamp(56px,7vw,96px)}
.banner{position:relative;overflow:hidden;aspect-ratio:1672/941;max-height:calc(100svh - 110px);width:100%;background:var(--surface)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60.5% 42%;filter:saturate(.95) contrast(1.03);will-change:transform;transform-origin:60% 42%}
/* phone: square crop framed on the logo so "Cunha Rações" never gets cut at the edge */
@media (max-width:700px){.banner{aspect-ratio:1/1;max-height:none}.banner img{object-position:74% 42%}}
@media (prefers-reduced-motion:no-preference){
  .banner{animation:open 1.6s cubic-bezier(.77,0,.18,1) both}
  .banner img{animation:settle 2.4s var(--ease) both}
}
@keyframes open{from{clip-path:inset(6% 4% 6% 4% round 28px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes settle{from{scale:1.12}}
.meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-block:.9rem;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hero-under{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(28px,4vw,56px)}
.hero-under h1{font-size:var(--t-hero);line-height:.98}
.hero-side{display:grid;gap:1.6rem;min-width:0}
.lead{color:var(--mute);font-size:var(--t-lg);line-height:1.5;max-width:30em}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem}
@media (max-width:860px){.hero-under{grid-template-columns:1fr;align-items:start}}

/* word + block reveals (text always visible; only position animates) */
.word{display:inline-block;transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*45ms)}
.split.pre .word{transform:translateY(.5em) rotate(3deg)}
.reveal{transition:transform 1.1s var(--ease)}
.reveal.pre{transform:translateY(48px)}
.photo-reveal img{transition:transform 1.6s var(--ease),scale 1.6s var(--ease)}
.photo-reveal.pre img{scale:1.18}
/* store photos: a curtain opening from the bottom */
/* the clip lives on the <img>, never on the observed <figure>: Chrome's IntersectionObserver
   ignores fully clipped targets, which left the photos hidden for good */
.shot.photo-reveal img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.65,0,.25,1),scale 2s var(--ease)}
.shot.photo-reveal.pre img{clip-path:inset(100% 0 0 0);scale:1.12}
.shot-b.photo-reveal img{transition-delay:.15s,.15s}
/* phone: quicker curtain so a fast thumb-scroll never lands on an empty frame */
@media (max-width:760px){.shot.photo-reveal img{transition-duration:.8s,1.1s}.shot-b.photo-reveal img{transition-delay:0s,0s}}
@media (prefers-reduced-motion:no-preference){
  .hero-under h1 .word{animation:wordin 1.1s var(--ease) both;animation-delay:calc(.9s + var(--i,0)*60ms)}
  .hero-side{animation:up 1s var(--ease) 1.25s both}
}
@keyframes wordin{from{transform:translateY(.6em) rotate(4deg)}}
@keyframes up{from{transform:translateY(24px)}}

/* marquee band (skews with scroll speed) */
.band{border-block:1px solid var(--rule);overflow:hidden;white-space:nowrap;padding-block:clamp(14px,2vw,26px)}
.band-skew{transform:skewX(var(--sk,0deg));will-change:transform}
.band-run{display:inline-flex;align-items:center;animation:run 42s linear infinite;font-family:var(--f-display);font-weight:600;font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.1;font-variation-settings:"SOFT" 100}
.band-run span{padding-inline:.35em}
.band-run i{color:var(--leather);font-variation-settings:"SOFT" 100,"WONK" 1}
.band-run .o{color:transparent;-webkit-text-stroke:1.2px var(--green);font-style:italic}
.band-run b{font-weight:400;font-size:.4em;color:var(--green)}
@keyframes run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band-run{animation:none}}

/* statement */
.statement{padding-block:clamp(80px,11vw,160px)}
.statement .wrap{display:grid;gap:2rem}
.big-statement{font-family:var(--f-display);font-weight:500;font-size:var(--t-2xl);line-height:1.12;max-width:18em;text-wrap:balance;letter-spacing:-.02em;font-variation-settings:"SOFT" 100}
/* scroll-scrubbed: each word rises and gains colour in sequence; always legible, only fainter before its turn */
.scrub .word{--w:1;opacity:calc(.22 + .78 * var(--w));transform:translateY(calc((1 - var(--w)) * .38em));transition:opacity .25s linear,transform .25s linear}
.statement-note{max-width:38em;color:var(--mute);font-size:var(--t-lg)}

/* species (horizontal balcão) */
.species{background:var(--surface);position:relative}
.species-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:2rem;align-items:end;padding-block:clamp(72px,10vw,140px) clamp(32px,4vw,56px)}
.species-head h2{font-size:var(--t-2xl)}
.species-head p{color:var(--mute);max-width:32em}
@media (max-width:760px){.species-head{grid-template-columns:1fr}}
.pin{position:relative}
.track{display:flex;flex-direction:column;gap:20px;padding:0 var(--gutter) clamp(64px,8vw,120px)}
.pin.is-horizontal .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.pin.is-horizontal .track{flex-direction:row;width:max-content;gap:28px;padding:80px var(--gutter) 24px;will-change:transform}
.panel{position:relative;overflow:hidden;background:var(--bg);border-radius:22px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(20px,3.5vw,56px);align-items:center;padding:clamp(22px,3.5vw,52px)}
.pin.is-horizontal .panel{width:min(80vw,1120px);height:min(76svh,690px)}
.pin.is-horizontal .panel-horse{width:min(88vw,1260px)}
.panel-title{position:relative;z-index:1;min-width:0;display:grid;gap:1.1rem;align-content:center}
.panel-title h3{font-size:clamp(3.4rem,8.5vw,8rem);line-height:.9}
.tag{justify-self:start;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--leather);color:var(--white);padding:.5em .95em;border-radius:999px;white-space:nowrap}
.photo{position:relative;z-index:1;margin:0;width:100%;height:100%;min-height:260px;overflow:hidden;border-radius:16px;background:var(--surface)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.03);transition:transform 1.2s var(--ease)}
.panel:hover .photo img{transform:scale(1.04)}
.panel-body{position:relative;z-index:1;min-width:0;display:grid;gap:1rem;align-content:center}
.latin{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leather)}
.latin i{font-family:var(--f-display);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.25em;font-weight:500}
.panel h3{font-size:clamp(2.6rem,5.6vw,5rem)}
.panel-lead{color:var(--mute);max-width:30em}
.items{list-style:none;margin:.4rem 0 0;padding:0;display:grid}
.items li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:.4rem 1.2rem;padding-block:.7rem;border-top:1px solid var(--rule);font-size:var(--t-sm);line-height:1.45}
.items li b{font-weight:700}
.items li span{color:var(--mute)}
.ghost-word{position:absolute;z-index:0;right:-.08em;bottom:-.24em;font-family:var(--f-display);font-style:italic;font-weight:600;font-size:clamp(7rem,19vw,17rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--rule);pointer-events:none;white-space:nowrap;will-change:transform;font-variation-settings:"SOFT" 100,"WONK" 1}
.panel-photo{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);align-items:stretch}
.panel-horse{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}
.horse-media{position:relative;z-index:1;min-width:0;min-height:300px}
.horse-media .photo-main img{object-position:62% 28%}
.saddle{position:absolute;z-index:2;right:-6%;bottom:-4%;width:52%;aspect-ratio:3/2;margin:0;border-radius:14px;overflow:hidden;border:6px solid var(--bg);box-shadow:0 24px 50px -24px rgba(43,30,20,.55);will-change:transform}
.saddle img{width:100%;height:100%;object-fit:cover}
.saddle figcaption{position:absolute;left:10px;top:10px}
.panel-more{grid-template-columns:1fr;align-content:center;background:var(--green);color:var(--white)}
.panel-more .latin{color:#E7C9A5}
.panel-more h3{font-style:italic;font-size:clamp(3rem,7vw,6.4rem);line-height:.95;font-variation-settings:"SOFT" 100,"WONK" 1}
.panel-more p{color:rgba(255,253,248,.82);max-width:28em;font-size:var(--t-lg)}
.panel-more .tagbtn{justify-self:start}
.panel-more .ghost-word{-webkit-text-stroke-color:rgba(255,253,248,.16)}
@media (max-width:760px){
  .panel,.panel-horse,.panel-photo{grid-template-columns:1fr}
  .photo{aspect-ratio:3/2;height:auto;min-height:0}
  /* phone: the saddlery photo sits under the horse photo instead of overlapping the text */
  .horse-media{min-height:0;display:grid;gap:12px}
  .horse-media .photo-main{aspect-ratio:4/3}
  .saddle{position:relative;right:auto;bottom:auto;width:100%;border:0;box-shadow:none;transform:none!important}
  .ghost-word{display:none}
  .items li{grid-template-columns:1fr}
}


/* loja (real store photos) */
.loja{padding-block:clamp(88px,12vw,170px)}
.loja-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(16px,2.5vw,32px);align-items:start}
.shot{position:relative;margin:0;height:auto;overflow:hidden;border-radius:18px;background:var(--surface)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(1.03)}
.shot-a{aspect-ratio:1400/1150}
.shot-b{aspect-ratio:1050/1500;margin-top:clamp(40px,8vw,120px);will-change:transform}
@media (max-width:760px){.loja-grid{grid-template-columns:1fr}.shot-b{margin-top:0}}

/* motivos */
.motivos{background:var(--surface);padding-block:clamp(88px,11vw,160px)}
.motivos h2{font-size:var(--t-2xl);max-width:12em;margin-top:1.4rem}
.motivos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px;gap:clamp(20px,3vw,48px);margin-top:clamp(40px,6vw,80px)}
.motivo{display:grid;gap:.9rem;align-content:start;border-top:2px solid var(--ink);padding-top:1.4rem}
.motivo:nth-child(2){transition-delay:.08s}
.motivo:nth-child(3){transition-delay:.16s}
.motivo-word{display:block;width:100%;max-width:470px;height:auto;overflow:visible}
.motivo-word text{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:76px;fill:var(--leather);stroke:var(--leather);stroke-width:1.2px;stroke-linejoin:round;stroke-dasharray:2600;stroke-dashoffset:0;fill-opacity:1;font-variation-settings:"SOFT" 100,"WONK" 1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.25,1),fill-opacity .9s ease 1.5s}
.motivo.pre .motivo-word text{stroke-dashoffset:2600;fill-opacity:0;transition:none}
.motivo:nth-child(2) .motivo-word text{transition-delay:.18s,1.68s}
.motivo:nth-child(3) .motivo-word text{transition-delay:.36s,1.86s}
.motivo h3{font-family:var(--f-body);font-size:var(--t-lg);font-weight:700;letter-spacing:0}
.motivo p{color:var(--mute)}
@media (max-width:860px){.motivos-grid{grid-template-columns:1fr}}

/* faq */
.faq{padding-block:clamp(88px,11vw,160px)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq h2{font-size:var(--t-2xl);margin-top:1.4rem}
@media (max-width:860px){.faq .wrap{grid-template-columns:1fr}}
.faq-list{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding-block:1.35rem;font-family:var(--f-display);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.2;font-variation-settings:"SOFT" 100}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-body);font-weight:500;font-size:1.5rem;color:var(--leather);transition:transform .35s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.5rem;color:var(--mute);max-width:38em}

/* contato */
.contato{border-top:1px solid var(--rule);padding-block:clamp(96px,12vw,180px) 0}
.contato h2{font-size:var(--t-giant);line-height:.95;max-width:11em;margin-top:1.4rem}
.contato-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin:clamp(48px,6vw,88px) 0 0;border-top:1px solid var(--rule);padding-top:2rem}
.contato-grid dt{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leather);margin-bottom:.6rem}
.contato-grid dd{margin:0;font-size:var(--t-lg);line-height:1.45}
.phone{font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);text-decoration:none;font-variant-numeric:tabular-nums;font-variation-settings:"SOFT" 100}
.phone:hover{color:var(--green)}
.maplink{display:inline-flex;gap:.35em;margin-top:.5rem;font-size:var(--t-sm);font-weight:700;color:var(--green);text-decoration:none;border-bottom:2px solid var(--leather);padding-bottom:.1em}
.status-lg{font-weight:700;font-size:var(--t-sm);margin-bottom:.8rem}
.status-lg.is-open{color:var(--green)}
.status-lg.is-closed{color:var(--leather-deep)}
.hours{border-collapse:collapse;width:100%;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.hours th,.hours td{padding:.45rem 0;border-top:1px solid var(--rule);text-align:left;font-weight:500}
.hours td{text-align:right;color:var(--mute)}
.hours tr.today th,.hours tr.today td{font-weight:700;color:var(--ink)}
@media (max-width:760px){.contato-grid{grid-template-columns:1fr}}
.contato .ctas{margin-top:2.4rem}
.foot{display:grid;justify-items:center;gap:1.6rem;margin-top:clamp(80px,10vw,140px);padding-block:2.4rem calc(1.6rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);text-align:center}
/* closing banner: opens from a framed card to full width, the photo drifts inside its frame */
.closer{position:relative;margin:0;width:100%;aspect-ratio:1672/941;overflow:hidden;border-radius:24px;background:var(--surface)}
.closer img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:60.5% 42%;will-change:transform;clip-path:inset(0 0 0 0 round 24px);transition:clip-path 1.6s cubic-bezier(.65,0,.25,1),scale 2.2s var(--ease)}
.closer.pre img{clip-path:inset(7% 6% 7% 6% round 24px);scale:1.14}
@media (max-width:700px){.closer{aspect-ratio:1/1;border-radius:18px}.closer img{object-position:74% 42%}}
.foot p{font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}