/* ===================================================================
   Valena Espaco de Saude - spec mockup stylesheet
   LEAD, NOT A CLIENT. Nothing here is client work.

   PALETTE
   No brand file or CSS palette was retrievable, so this is a
   PROPOSAL drawn from their own positioning - a renovated house on
   Campeche's main avenue, "uma sensacao de calma e cura desde o
   estacionamento". [CONFIRM against their logo.]
     deep sage   #3E5049   base, dark bands, footer
     bone        #F7F4EE   page ground
     terracotta  #C1745A   primary accent
     eucalyptus  #8FA894   chips, ticks, rules
     warm sand   #E6DCCB   alternate ground, card fills
     ink         #22282A   body text on light

   MEASURED CONTRAST (WCAG 2.1, computed - not estimated)
   The brief warns terracotta on bone needs checking. It fails - and
   so does the thing nobody checks, which is terracotta as a BUTTON
   FILL with either text colour on it:
     terracotta #C1745A on bone #F7F4EE ....  3.24  FAILS
     terracotta #C1745A on sand #E6DCCB ....  2.62  FAILS
     ink  #22282A on terracotta fill .......  4.21  FAILS  (just)
     white        on terracotta fill .......  3.55  FAILS
   So #C1745A cannot carry body text on the light grounds AND cannot
   be a button fill at body size with any text colour. It survives as
   a large-display colour, a rule and a decorative wash, nothing else.
   The working substitutes, same hue family, nothing invented:
     --terra-ink #8E452C on bone ...........  6.30  PASSES AAA
     --terra-ink #8E452C on sand ...........  5.09  PASSES AA
     --terra-btn #9C4F34 with WHITE text ...  5.86  PASSES AA
   Eucalyptus has the same problem and the brief does not mention it:
     eucalyptus #8FA894 on bone ............  2.33  FAILS
     eucalyptus #8FA894 on sand ............  1.89  FAILS
     ink        on eucalyptus fill .........  5.83  PASSES  <- so a
       eucalyptus chip is fine, as long as its text is ink.
     --euc-ink  #55705A on bone ............  4.97  PASSES AA
     --euc-lit  #B4C9B8 on sage ............  4.90  PASSES AA
   Structural pairs, all measured:
     ink  #22282A on bone ................. 13.62  AAA
     ink  #22282A on sand ................. 11.01  AAA
     sage #3E5049 on bone .................  7.81  AAA
     bone #F7F4EE on sage .................  7.81  AAA
     bone #F7F4EE on ink .................. 13.62  AAA

   WHAT IS DELIBERATELY NOT BUILT, AND WHY IT IS REGULATORY
   This lead sits on the ANVISA / CFM line, so three devices from the
   design reference are absent by decision, not by omission:
     1. NO before-and-after gallery, slider or placeholder for one.
        CFM Resolution 1.974/2011 prohibits before/after imagery in
        medical advertising in Brazil.
     2. NO price on any card and NO promotional discount device
        anywhere. CFM 1.974/2011 also prohibits publishing prices,
        promotions and discounts for medical procedures - and until
        Valena confirms service by service which of its offerings are
        medical, the safe build shows no price at all.
     3. NO rating, review, review count, testimonial, "X clientes
        atendidos" or "X anos de experiencia". They publish none, and
        the only date that IS verifiable - opened 08/12/2021 - is
        stated as a date rather than animated into a counter.
   No stock face appears beside a treatment name anywhere, because a
   face beside a treatment reads as a patient result.
   =================================================================== */

:root{
  --sage:#3E5049;
  --bone:#F7F4EE;
  --sand:#E6DCCB;
  --terra:#C1745A;
  --terra-ink:#8E452C;   /* text-safe terracotta on the light grounds */
  --terra-btn:#9C4F34;   /* button fill that carries white at 5.86 */
  --euc:#8FA894;
  --euc-ink:#55705A;     /* text-safe eucalyptus on the light grounds */
  --euc-lit:#B4C9B8;     /* text-safe eucalyptus on sage */
  --ink:#22282A;
  --muted:#55605C;       /* 7.5:1 on bone */
  --line:rgba(34,40,42,.13);
  --line-dark:rgba(247,244,238,.2);
  --maxw:1240px;
  --gut:clamp(1.1rem,4vw,2.6rem);
  --r:14px;
  --serif:'Fraunces','Lora',Georgia,'Times New Roman',serif;
  --sans:'Karla','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --g-soft:linear-gradient(180deg,#F7F4EE 0%,#E6DCCB 100%);
  --g-dark:linear-gradient(160deg,#3E5049 0%,#22282A 100%);
  --g-cta:linear-gradient(90deg,#9C4F34 0%,#8E452C 100%);
  --g-wash:linear-gradient(180deg,rgba(143,168,148,.22) 0%,rgba(230,220,203,.4) 100%);
  --g-scrim:linear-gradient(90deg,rgba(62,80,73,.9) 0%,rgba(62,80,73,.55) 42%,
            rgba(62,80,73,.12) 100%);
  --shadow:0 6px 20px rgba(34,40,42,.08);
  --shadow-lift:0 14px 34px rgba(34,40,42,.14);
  --ease:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.68;color:var(--ink);
  background:var(--bone);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--terra-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--terra-btn);outline-offset:3px;border-radius:4px}
.band-dark a:focus-visible,.band-dark button:focus-visible,.site-foot a:focus-visible{
  outline-color:var(--euc-lit)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;margin:0 0 .6rem;
  color:var(--sage);letter-spacing:-.008em}
h1{font-size:clamp(2rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.05rem,1.8vw,1.3rem)}
p{margin:0 0 1rem}

.wrap{width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto}
.wide{width:min(100% - (var(--gut) * 2),1480px);margin-inline:auto}
section{padding-block:clamp(2.8rem,7vw,5.4rem)}
.band-sand{background:var(--sand)}
.band-soft{background:var(--g-soft)}
.band-dark{background:var(--g-dark);color:rgba(247,244,238,.9)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--bone)}
.band-dark p,.band-dark .lede{color:rgba(247,244,238,.9)}
.band-dark a{color:var(--euc-lit)}

.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terra-ink);margin:0 0 .9rem}
.band-dark .eyebrow{color:var(--euc-lit)}
.lede{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted);max-width:62ch}
.small{font-size:.86rem;color:var(--muted)}
.band-dark .small{color:rgba(247,244,238,.8)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.rule-terra{height:2px;background:var(--g-cta);border:0;width:88px;margin:0 0 1.4rem}

/* [CONFIRM] markers */
.cfm{background:#FBEFE6;color:#5A2C18;border:1px dashed var(--terra-ink);border-radius:4px;
  padding:0 .34em;font-size:.9em;font-weight:600}
.band-dark .cfm{background:rgba(193,116,90,.24);color:#FBE8DE;border-color:#DFA184}
.cfm-block{background:#FBEFE6;border:1px dashed var(--terra-ink);border-left-width:5px;
  border-radius:10px;padding:1rem 1.15rem;font-size:.92rem;color:#5A2C18;margin:1.4rem 0}
.cfm-block p:last-child{margin-bottom:0}
.band-dark .cfm-block{background:rgba(193,116,90,.16);border-color:#DFA184;
  color:rgba(247,244,238,.94)}
.mock-note{background:rgba(247,244,238,.08);border:1px dashed rgba(180,201,184,.6);
  border-radius:10px;padding:1rem 1.15rem;font-size:.88rem;color:rgba(247,244,238,.92)}
.note-block{background:#fff;border:1px solid var(--line);border-left:5px solid var(--euc-ink);
  border-radius:10px;padding:1rem 1.15rem;font-size:.93rem;color:var(--muted);margin:1.3rem 0}
.note-block p:last-child{margin-bottom:0}
.reg-block{background:#F0F4F0;border:1px solid rgba(85,112,90,.28);border-left:5px solid var(--euc-ink);
  border-radius:10px;padding:1.05rem 1.2rem;font-size:.93rem;margin:1.3rem 0;color:#2C3630}
.reg-block p:last-child{margin-bottom:0}

/* ---------- buttons: the terracotta fill is the DARKER one ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;
  font-size:.9rem;font-weight:700;text-decoration:none;padding:.85rem 1.6rem;
  border:2px solid transparent;border-radius:999px;cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),
             transform .24s var(--ease),box-shadow .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-terra{background:var(--terra-btn);color:#fff;box-shadow:0 6px 18px rgba(156,79,52,.3)}
.btn-terra:hover{background:var(--terra-ink);box-shadow:var(--shadow-lift)}
.btn-sage{background:var(--sage);color:var(--bone)}
.btn-sage:hover{background:var(--ink)}
.btn-ghost{background:transparent;color:var(--sage);border-color:var(--sage)}
.btn-ghost:hover{background:var(--sage);color:var(--bone)}
.btn-light{background:transparent;color:var(--bone);border-color:rgba(247,244,238,.68)}
.btn-light:hover{background:var(--bone);color:var(--sage)}
.btn-sm{padding:.58rem 1.1rem;font-size:.83rem}
.btn-block{width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--sage);color:var(--bone);
  padding:.7rem 1.1rem;z-index:220}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- utility bar: location and hours, NOT a promo bar ---------- */
.utility{background:var(--sage);color:rgba(247,244,238,.92);font-size:.82rem;padding:.44rem 0}
.utility .wide{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
.utility a{color:var(--euc-lit);text-decoration:none}
.u-left,.u-right{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:120;background:rgba(247,244,238,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.site-head.solid{box-shadow:0 2px 16px rgba(34,40,42,.1)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.85rem;transition:padding .3s var(--ease)}
.site-head.solid .head-in{padding-block:.52rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--sage);
  font-family:var(--serif);font-weight:600;font-size:1.24rem;line-height:1.05}
.brand svg{width:2.2rem;height:2.2rem;flex:0 0 auto;color:var(--euc-ink)}
.brand span small{display:block;font-family:var(--sans);font-size:.58rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--terra-ink);margin-top:.16rem}
.nav{display:flex;align-items:center;gap:1.3rem}
.nav a{font-size:.87rem;font-weight:600;text-decoration:none;color:var(--sage);
  position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--terra);transition:right .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.head-right{display:flex;align-items:center;gap:.7rem}
.lang{display:flex;align-items:center;font-size:.76rem;font-weight:700}
.lang a{text-decoration:none;color:var(--muted);padding:.2rem .38rem}
.lang a.on{color:var(--terra-ink)}
.burger{display:none;width:2.7rem;height:2.7rem;background:transparent;border:0;cursor:pointer;
  padding:0;position:relative}
.burger span{position:absolute;left:.55rem;right:.55rem;height:2px;background:var(--sage);
  border-radius:2px;transition:transform .3s var(--ease),opacity .2s linear}
.burger span:nth-child(1){top:.9rem}
.burger span:nth-child(2){top:1.3rem}
.burger span:nth-child(3){top:1.7rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:115;background:var(--g-dark);display:flex;
  flex-direction:column;justify-content:center;gap:.2rem;padding:5rem var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1rem);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-family:var(--serif);font-size:clamp(1.4rem,6.5vw,2.1rem);color:var(--bone);
  text-decoration:none;padding:.32rem 0;border-bottom:1px solid var(--line-dark);font-weight:600}
.mobile-nav a:hover{color:var(--euc-lit)}
.mobile-nav .m-foot{margin-top:1.6rem;font-size:.88rem;color:rgba(247,244,238,.82);
  font-family:var(--sans)}
@media (max-width:1120px){.nav{display:none}.burger{display:block}.head-right .btn{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(460px,76vh,660px);display:flex;align-items:center;
  overflow:hidden;color:var(--bone);background:var(--sage)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:1;background:var(--g-scrim)}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.6rem,7vw,4.4rem)}
.hero h1{color:var(--bone);max-width:15ch;margin-bottom:.9rem}
.hero .eyebrow{color:var(--euc-lit)}
.hero .lede{color:rgba(247,244,238,.95);max-width:44ch}
.hero-cta{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.7rem}
@media (max-width:720px){.hero{min-height:70svh}.hero-scrim{
  background:linear-gradient(180deg,rgba(62,80,73,.35) 0%,rgba(34,40,42,.88) 100%)}}

/* ---------- the four-icon trust row, docked ---------- */
.trust{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lift);display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:calc(clamp(1.4rem,4vw,2.6rem) * -1);position:relative;z-index:4}
.trust .t{padding:1.3rem 1.2rem;display:flex;gap:.8rem;align-items:flex-start;
  border-right:1px solid var(--line)}
.trust .t:last-child{border-right:0}
.trust .t svg{width:1.7rem;height:1.7rem;flex:0 0 auto;color:var(--euc-ink)}
.trust .t b{display:block;font-size:.95rem;color:var(--sage)}
.trust .t span{display:block;font-size:.84rem;color:var(--muted);margin-top:.15rem}
@media (max-width:820px){.trust .t{border-right:0;border-bottom:1px solid var(--line)}
  .trust .t:last-child{border-bottom:0}}

.rev{opacity:0;transform:translateY(18px);
  transition:opacity .58s var(--ease),transform .58s var(--ease)}
.rev.in{opacity:1;transform:none}

/* ---------- the eight care areas ----------
   Split into two visually distinct bands, health and aesthetic,
   because an integrated health space that renders them as one
   undifferentiated six-pack tells a visitor nothing. NO PRICE on any
   card - see the stylesheet header. */
.cards{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  margin-top:2rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card .media{position:relative;overflow:hidden}
.card .media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--ease)}
.card:hover .media img{transform:scale(1.05)}
.card .media::after{content:"";position:absolute;inset:0;background:var(--g-wash);opacity:0;
  transition:opacity .3s var(--ease)}
.card:hover .media::after{opacity:1}
.card .body{padding:1.25rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card h3{margin:0}
.card p{margin:0;color:var(--muted);font-size:.94rem}
.card .foot{margin-top:auto;padding-top:.7rem}
.card.wide{grid-column:1 / -1}
@media (min-width:720px){.card.wide{flex-direction:row}
  .card.wide .media{flex:0 0 42%}
  .card.wide .media img{height:100%;aspect-ratio:auto}}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--euc);color:var(--ink);
  border-radius:999px;padding:.24rem .75rem;font-size:.76rem;font-weight:700;align-self:flex-start}
.chip.sand{background:var(--sand)}
.ph-tag{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(34,40,42,.88);
  color:var(--bone);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.2rem .52rem;border-radius:4px}

/* ---------- the professionals block: the section the live site lacks ---------- */
.pros{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:1.8rem}
.pro{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;
  display:flex;flex-direction:column;gap:.5rem}
.pro .avatar{width:4.2rem;height:4.2rem;border-radius:50%;background:var(--sand);
  border:2px dashed var(--terra-ink);display:flex;align-items:center;justify-content:center;
  color:var(--terra-ink);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-align:center;
  padding:.3rem}
.pro dl{margin:.4rem 0 0;display:grid;gap:.4rem;font-size:.9rem}
.pro dt{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--euc-ink)}
.pro dd{margin:0}

/* ---------- process steps ---------- */
.steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:2rem;counter-reset:st}
.step{counter-increment:st;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem;position:relative}
.step::before{content:counter(st);display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--terra-btn);color:#fff;
  font-family:var(--serif);font-weight:600;font-size:1.15rem;margin-bottom:.7rem}
.step h3{margin:0 0 .3rem;font-size:1.05rem}
.step p{margin:0;color:var(--muted);font-size:.92rem}
.band-dark .step{background:rgba(247,244,238,.07);border-color:var(--line-dark)}
.band-dark .step p{color:rgba(247,244,238,.86)}

/* ---------- split editorial ---------- */
.split{display:grid;gap:clamp(1.4rem,4.5vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:center}
.split.top{align-items:start}
.figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--euc)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.79rem;color:var(--muted);padding:.5rem .1rem 0}
.band-dark .figure figcaption{color:rgba(247,244,238,.78)}
.imgpair{display:grid;gap:.85rem;grid-template-columns:1fr 1fr}
.imgpair figure:first-child{grid-column:1 / -1}
.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}
.r-16x9{aspect-ratio:16/9}
.r-1x1{aspect-ratio:1/1}
.r-3x4{aspect-ratio:3/4}

/* ---------- blog ---------- */
.posts{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:1.8rem}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post time{display:block;font-size:.8rem;color:var(--terra-ink);font-weight:700;
  margin-bottom:.5rem;font-variant-numeric:tabular-nums}
.post h3{margin:0 0 .5rem;font-size:1.08rem}
.post p{margin:0;font-size:.9rem;color:var(--muted)}
.post.slot{border-style:dashed;border-color:var(--terra-ink);background:#FBEFE6}

/* ---------- FAQ ---------- */
.faq{max-width:62rem;margin-inline:auto;display:grid;gap:.5rem;margin-top:1.8rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 1.15rem;
  box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:.95rem 2.2rem .95rem 0;font-weight:700;
  color:var(--sage);position:relative;font-family:var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.2rem;top:1.25rem;width:9px;height:9px;
  border-right:2px solid var(--terra-ink);border-bottom:2px solid var(--terra-ink);
  transform:rotate(45deg);transition:transform .26s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){padding-bottom:1rem;margin-top:-.2rem;color:var(--muted)}
.faq details[open] > *:not(summary){animation:fadein .26s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- location ---------- */
.loc-grid{display:grid;gap:clamp(1.4rem,4.5vw,3.2rem);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:start}
.nap{font-style:normal;line-height:1.85}
.nap dt{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terra-ink);margin-top:1.1rem}
.nap dd{margin:0}
.nap a{color:var(--sage);text-decoration:none;border-bottom:1px solid var(--euc)}
.mapthumb{display:block;margin-top:1.5rem;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden}
.mapthumb svg{width:100%;height:auto;display:block}
.mapthumb .cap{padding:.7rem .95rem;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line)}
.hours{border-collapse:collapse;width:100%;max-width:26rem;font-size:.94rem;margin-top:.8rem}
.hours th,.hours td{padding:.48rem .3rem;border-bottom:1px solid var(--line);text-align:left}
.hours th{font-weight:600;color:var(--muted)}
.site-foot .hours th,.site-foot .hours td{border-bottom-color:var(--line-dark);
  color:rgba(247,244,238,.86)}
.site-foot .hours th{color:rgba(247,244,238,.7)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--g-cta);color:#fff;text-align:center}
.cta-band h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta-band .lede{color:rgba(255,255,255,.94);margin-inline:auto}
.cta-band .acts{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}
.cta-band .btn-light{border-color:rgba(255,255,255,.8)}
.cta-band .btn-light:hover{background:#fff;color:var(--terra-ink)}

/* ---------- page head ---------- */
.page-head{background:var(--g-dark);color:rgba(247,244,238,.9);
  padding-block:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,3.2vw,2.1rem)}
.page-head h1{color:var(--bone)}
.page-head .lede{color:rgba(247,244,238,.88)}
.crumbs{font-size:.8rem;color:rgba(247,244,238,.74);margin-bottom:.7rem}
.crumbs a{color:var(--euc-lit);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.prose{max-width:70ch}
.prose h2{margin-top:2.2rem}
.prose ul{padding-left:1.15rem}
.prose li{margin-bottom:.45rem}

/* ---------- floating WhatsApp ---------- */
.wa-bubble{position:fixed;right:1rem;bottom:1rem;z-index:130;width:3.4rem;height:3.4rem;
  border-radius:50%;background:#25D366;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 9px 24px rgba(34,40,42,.28);transition:transform .24s var(--ease)}
.wa-bubble:hover{transform:scale(1.07)}
.wa-bubble svg{width:1.9rem;height:1.9rem;fill:#0B2E17}
.wa-bubble[data-unconfirmed]{background:var(--euc-ink)}
@media (max-width:720px){.wa-bubble{bottom:4.6rem}}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:125;display:none;background:var(--sage);
  border-top:1px solid var(--line-dark)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.92rem .5rem;color:var(--bone);text-decoration:none;font-size:.85rem;font-weight:700}
.mobile-bar a + a{border-left:1px solid var(--line-dark)}
.mobile-bar a.hot{background:var(--terra-btn);color:#fff}
@media (max-width:720px){.mobile-bar{display:flex}body{padding-bottom:3.4rem}}

/* ---------- footer ---------- */
.site-foot{background:var(--g-dark);color:rgba(247,244,238,.84);
  padding-block:clamp(2.6rem,6vw,4.2rem) 2rem}
.site-foot .brand{color:var(--bone)}
.site-foot .brand svg{color:var(--euc-lit)}
.site-foot .brand span small{color:var(--euc-lit)}
.foot-grid{display:grid;gap:clamp(1.4rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:2rem}
.foot-grid h4{color:var(--bone);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 .8rem;font-family:var(--sans)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.9rem}
.site-foot a{color:rgba(247,244,238,.84);text-decoration:none}
.site-foot a:hover{color:var(--euc-lit)}
.foot-bottom{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--line-dark);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.8rem;
  color:rgba(247,244,238,.66)}

/* ---------- LGPD: health data is sensitive data ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:140;background:#fff;
  border-top:3px solid var(--sage);box-shadow:0 -9px 28px rgba(34,40,42,.18);padding:1.1rem 0;
  transform:translateY(112%);transition:transform .4s var(--ease)}
.lgpd.show{transform:none}
.lgpd[aria-hidden="true"]{visibility:hidden}
.lgpd.show[aria-hidden="false"]{visibility:visible}
.lgpd h2{font-size:1.05rem;margin:0 0 .4rem}
.lgpd p{font-size:.88rem;color:var(--muted);margin:0 0 .85rem;max-width:78ch}
.lgpd-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.lgpd-prefs{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.6rem}
.lgpd-row{display:flex;gap:.72rem;align-items:flex-start;font-size:.86rem}
.lgpd-row input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--terra-btn);
  flex:0 0 auto}
.lgpd-row b{display:block}
.lgpd-row small{color:var(--muted)}
@media (max-width:720px){.lgpd{bottom:3.4rem;max-height:76svh;overflow-y:auto}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rev{opacity:1;transform:none}
  .card:hover{transform:none}
}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}
