/* ==========================================================
   BECO DA MARCELA | Quem Somos V2 ("Como Surgiu o Beco?")
   Third pass: built to the client's own layout reference
   (img/About 1.jpg). Four stacked rows, each pairing a column
   of justified body text with a photo or the closing plaque,
   alternating sides, every photo top-aligned with the text
   beside it. The pulled quote sits right where it does in the
   reference, directly under the first chunk of text, and the
   same sentence stays in place in the body further down too.
   Header, footer and every token below are reused verbatim
   from the homepage so the brand stays locked across pages.
   Body font is Roboto per brief; headings are Merriweather
   Sans Bold. Colors, shapes and icons match the homepage.
   Motion: CSS only, subtle rise-in and scroll reveals, off
   under prefers-reduced-motion.
   ========================================================== */
:root{
  --blue:#020959;
  --blue-hover:#101a86;
  --yellow:#F5A623;
  --yellow-hover:#FFB93F;
  --gray:#DFDFDF;
  --paper:#FAFAF5;
  --band:#ECECE3;
  --ink:#020959;
  --ink-soft:#4b5080;
  --line:rgba(2,9,89,.16);
  --on-blue-soft:rgba(250,250,245,.8);
  --on-blue-line:rgba(250,250,245,.18);
  --on-blue-rule:rgba(250,250,245,.42);
  --f-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-display:'Merriweather Sans','Segoe UI',system-ui,sans-serif;
  --max:1200px;
  --gutter:clamp(16px,4vw,48px);
  --edge:max(var(--gutter),calc((100% - var(--max)) / 2));
  --section:clamp(5rem,10vw,9rem);
  --header:72px;
  --r-plaque:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1rem/1.75 var(--f-body);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.site-header :focus-visible,.close-box :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow)}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--yellow);color:var(--blue);padding:.6rem 1rem;border-radius:999px;font-weight:500;z-index:100}
.skip:focus{top:.75rem}
.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons (pills), brand plaque: reused verbatim from the homepage ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;
  font:500 1.0625rem/1 var(--f-body);text-decoration:none;cursor:pointer;
  padding:1.05rem 2rem;border-radius:999px;border:1.5px solid transparent;
  transition:transform .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--yellow{background:var(--yellow);color:var(--blue)}
.btn--yellow:hover{background:var(--yellow-hover);transform:translateY(-2px)}
.btn .icon{transition:transform .35s var(--ease)}
.btn:hover .icon--go{transform:translateX(5px)}
.btn:active{transform:translateY(1px) scale(.98)}

.plaque{position:relative;background:var(--blue);color:var(--paper);border-radius:var(--r-plaque)}
.plaque::before{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:2px solid rgba(250,250,245,.92);border-radius:calc(var(--r-plaque) - 5px);
}
.plaque>*{position:relative}

/* ---------- header (reused verbatim from the homepage) ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--blue);color:var(--paper)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header)}
.brand{display:block;line-height:0}
.brand img{height:52px;width:auto}
.nav ul{display:flex;gap:clamp(1.5rem,3.5vw,3rem)}
.nav a{position:relative;display:inline-block;padding:.5rem 0;font-size:1rem;text-decoration:none;color:var(--paper)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;border-radius:2px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{
  position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(250,250,245,.85);background:transparent;color:var(--paper);cursor:pointer;text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.icon-btn:hover{background:var(--yellow);border-color:var(--yellow);color:var(--blue)}
.icon-btn:active{transform:scale(.94)}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:var(--yellow);color:var(--blue);font:700 .72rem/20px var(--f-body);text-align:center;
}
.nav-toggle{display:none}
.nav-toggle .icon--close{display:none}
.nav-toggle[aria-expanded="true"] .icon--menu{display:none}
.nav-toggle[aria-expanded="true"] .icon--close{display:block}
@media (max-width:820px){
  .nav-toggle{display:grid}
  .nav{
    position:absolute;left:0;right:0;top:100%;display:none;background:var(--blue);
    border-top:1px solid var(--on-blue-line);padding:.5rem var(--gutter) 1.25rem;
  }
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav li+li{border-top:1px solid var(--on-blue-line)}
  .nav a{display:block;padding:1rem 0;font-size:1.25rem}
  .nav a::after{display:none}
}

/* ---------- opening: just the title ---------- */
.opening{padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2rem)}
.opening h1{
  font-family:var(--f-display);font-weight:700;color:var(--blue);
  font-size:clamp(2.3rem,4.6vw,3.75rem);line-height:1.1;letter-spacing:-.015em;max-width:16ch;
}

/* ---------- story: four stacked rows, per the client's layout reference (img/About 1.jpg) ---------- */
.story{padding-block:0 var(--section)}
.story>*+*{margin-top:clamp(2.5rem,5vw,4rem)}
.story p{font-size:clamp(1.0625rem,1.05vw,1.1875rem);font-weight:400;line-height:1.8;color:var(--ink);text-align:justify;text-align-last:left}
.story p+p{margin-top:1.5rem}

.pair{display:grid;gap:clamp(2rem,4.5vw,3.75rem);align-items:start}
.pair--a{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"text photo"}
.pair--b{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"photo text"}
.text-col{grid-area:text}
.photo-col{grid-area:photo}
@media (max-width:860px){
  .pair{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"photo" "text"}
}

/* the two portrait photos: identical size, nudged down 5px so the box top
   matches the visual top of the paired text's first glyph (not the line
   box, which carries extra leading above the actual letterforms) */
.side-photo{overflow:hidden;border-radius:var(--r-plaque);background:var(--gray);margin-top:5px}
.side-photo img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.side-photo--placa img{object-position:50% 15%}
.side-photo--perfil img{object-position:50% 28%}

/* the third photo, full measure, between the two paired rows */
.full-photo{overflow:hidden;border-radius:var(--r-plaque);background:var(--gray)}
.full-photo img{display:block;width:100%;height:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 42%}
@media (max-width:640px){.full-photo img{aspect-ratio:4/3}}

/* pulled from the paragraph just above it; the same sentence stays in the paragraph too */
/* first row: the text column stretches to the photo's height and the quote sits
   centered in the space between the end of the paragraph and the foot of the row;
   equal padding above and below keeps a minimum gap without shifting the centre */
.pair--intro .text-col{display:flex;flex-direction:column;align-self:stretch}
.pull-slot{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(1.5rem,3vw,2rem);margin-top:-5px} /* -5px: measure from the paragraph's visible last line, not its leading */
@media (max-width:860px){.pull-slot{padding-bottom:0;margin-top:0}}
.pull{padding-left:clamp(1.25rem,3vw,1.75rem);border-left:4px solid var(--yellow)}
.pull p{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.42;letter-spacing:-.01em;color:var(--blue);text-align:left;
}

/* closing: the tagline inside the brand's own plaque shape, stretched to
   match the height of the paragraph column beside it, its content centered
   and sized up so the extra height reads as composed, not empty */
.close-box{
  align-self:stretch;padding:clamp(2.25rem,4.5vw,3rem);text-align:left;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,4vw,2.75rem);
}
.close-box h2{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.6rem,2.9vw,2.2rem);line-height:1.2;
}
.close-box h2 .ln{display:block}
.close-box h2 .lg{font-size:1.2em}
.close-box h2 .mark{
  background:linear-gradient(transparent 62%,var(--yellow) 62% 88%,transparent 88%);
  color:var(--paper);padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.close-box .btn{align-self:flex-start}
@media (min-width:861px){.close-box{contain:size;margin-block:5px}}

/* ---------- footer (reused verbatim from the homepage) ---------- */
.site-footer{background:var(--blue);color:var(--paper);overflow:hidden}
.footer-main{padding-top:clamp(3rem,5.5vw,4.25rem)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,1.1fr);gap:2.5rem 3rem}
.footer-brand img{height:62px;width:auto;margin-bottom:1rem}
.footer-brand p{max-width:34ch;color:var(--on-blue-soft);font-weight:300;line-height:1.6}
.footer-col h2{font-size:1rem;font-weight:500;color:var(--on-blue-soft);margin-bottom:.7rem}
.footer-nav li+li{margin-top:.35rem}
.footer-nav a,.contact a{text-decoration:none;font-size:1.0625rem}
.footer-nav a:hover,.contact a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
.contact{font-style:normal;display:grid;gap:.5rem}
.contact a{display:inline-flex;align-items:center;gap:.7rem;overflow-wrap:anywhere}
.social{display:flex;gap:.7rem;margin-top:1.1rem}
.social a{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(250,250,245,.6);
  transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.social a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--blue)}
.social a:active{transform:scale(.94)}
.social .icon{width:22px;height:22px}
.footer-ghost{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-size:clamp(2.4rem,8.8vw,7.9rem);font-weight:700;letter-spacing:-.05em;line-height:1;
  height:.62em;overflow:hidden;white-space:nowrap;color:rgba(250,250,245,.08);
  -webkit-user-select:none;user-select:none;
}
.footer-bar{border-top:1px solid var(--on-blue-line)}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  padding-block:.72rem;font-size:.9rem;font-weight:300;color:var(--on-blue-soft);
}
@media (max-width:900px){.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer-brand{grid-column:1/-1}}
@media (max-width:520px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- motion ---------- */
@keyframes rise-in{from{opacity:0;transform:translateY(20px)}}
@keyframes reveal-up{from{transform:translateY(48px)}}
@media (prefers-reduced-motion:no-preference){
  .opening h1{animation:rise-in .8s var(--ease) both}
  @supports (animation-timeline:view()){
    .reveal{animation:reveal-up linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}