/* ==========================================================================
   Clubinho - spec mockup stylesheet
   STATUS: LEAD, not signed. Nothing here is deployed or approved.

   THE PALETTE IS NOW THE LOGO'S. The first build had no brand file to work
   from - the only public surface was an Instagram profile behind a login
   wall - so it proposed a light page with graphite bands and used the
   yellow sparingly. The client then supplied the artwork, and the artwork
   is not a light brand. It is a yellow mark and a white wordmark on solid
   black. Sampled off the file: yellow #F5C41E at hue 47, field #000000,
   wordmark #FFFFFF. The site follows it.

   MEASURED CONTRAST (WCAG 2.2, sRGB relative luminance)
   ---------------------------------------------------------------------
   gelo    #F1F2F3 on preto #0A0A0B  17.66  AA
   gelo    #F1F2F3 on carv  #141416  16.27  AA
   mut     #B9BEC2 on preto          10.56  AA   (secondary text)
   dim     #9AA1A6 on preto           7.56  AA   (captions, small print)
   amar    #F5C41E on preto          12.06  AA   <- yellow as TEXT
   amar    #F5C41E on carv           11.11  AA
   amar    #F5C41E on carv-2         10.25  AA
   preto   #0A0A0B on amar fill      12.06  AA   <- the CTA
   preto   #0A0A0B on amar-lit fill  13.70  AA   (hover, brighter)
   aco     #8C9BA6 on preto           6.93  AA   (steel, on dark)

   THE COLOUR THAT COULD NOT BE TEXT NOW IS. On the light ground the first
   build used, this same yellow measured 1.56:1 - it was a fill and a rule
   and never a word, and the stylesheet said so in capitals. On the black
   the logo actually uses, it measures 12.06:1. Nothing about the yellow
   changed. The ground did. That is the whole argument for taking a brand
   at its word instead of lightening it into a house style: the black is
   not decoration, it is the thing that makes their yellow legible.

   The steel accent had to move in the opposite direction. #4A5A66 was
   text-safe on the old cream field at 6.63 and is 2.78 on black, so it
   lightens to #8C9BA6. Every neutral in this file was re-measured against
   the new ground rather than inverted by eye.

   Fonts: Archivo for display, Inter for text.
   ========================================================================== */

:root{
  --preto:#0A0A0B;     /* the logo's field - page ground */
  --preto-2:#000000;   /* the deepest stop, used in gradients */
  --carv:#141416;      /* lifted surface - cards, bands */
  --carv-2:#1D1D20;    /* second lift - cards sitting on a lifted band */
  --amar:#F5C41E;      /* THE LOGO YELLOW - fill, rule and, on this ground, text */
  --amar-lit:#FFD23F;  /* hover, brighter - black text climbs to 13.70 */
  --amar-dp:#C79B0C;   /* deepened yellow for hairlines that must recede */
  --gelo:#F1F2F3;      /* body text */
  --mut:#B9BEC2;       /* secondary text */
  --dim:#9AA1A6;       /* captions and small print */
  --aco:#8C9BA6;       /* steel - lightened for the dark ground */
  --ink:#0A0A0B;       /* text that sits on a yellow fill */
  --line:rgba(241,242,243,.13);
  --line-2:rgba(241,242,243,.22);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.55);
  --shadow-lift:0 4px 12px rgba(0,0,0,.55), 0 24px 52px rgba(0,0,0,.62);
  --r:14px;
  --r-lg:22px;
  --disp:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gut:clamp(1.1rem,4vw,2.6rem);
  --pad:clamp(3.2rem,7vw,6.2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--preto);color:var(--gelo);font-family:var(--sans);
  font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--amar);text-underline-offset:3px}
a:hover{color:var(--amar-lit)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.12;margin:0;
  letter-spacing:-.02em;color:var(--gelo)}
h1{font-size:clamp(2.2rem,5.4vw,4rem);text-transform:uppercase}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.24}
h4{font-family:var(--sans);font-size:1rem;font-weight:700}
p{margin:.85rem 0}

.wrap{width:min(100% - (var(--gut) * 2),1180px);margin-inline:auto}
.wide{width:min(100% - (var(--gut) * 2),1360px);margin-inline:auto}
.narrow{width:min(100% - (var(--gut) * 2),760px);margin-inline:auto}
section{padding-block:var(--pad)}
.center{text-align:center}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--mut);max-width:62ch}
.small{font-size:.87rem;color:var(--dim)}
.eyebrow{font-size:.71rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amar);margin:0 0 .7rem}
.rule{height:3px;width:min(64px,20%);border:0;margin:1.3rem 0 0;background:var(--amar)}
.skip{position:absolute;left:-9999px;top:0;background:var(--amar);color:var(--ink);
  padding:.8rem 1.2rem;z-index:200;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amar);outline-offset:3px;border-radius:6px}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;justify-content:center;
  font-family:var(--sans);font-weight:700;font-size:.93rem;
  padding:.9rem 1.5rem;border-radius:10px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,
             box-shadow .18s ease,border-color .18s ease}
/* Black on the logo yellow, 12.06. Room in both directions; this one
   brightens to 13.70. */
.btn-amar{background:var(--amar);color:var(--ink);box-shadow:var(--shadow)}
.btn-amar:hover{background:var(--amar-lit);color:var(--ink);transform:translateY(-2px);
  box-shadow:var(--shadow-lift)}
/* On a black page the old "dark button" has to become a light one or it
   disappears into the ground. */
.btn-graf{background:var(--gelo);color:var(--preto)}
.btn-graf:hover{background:#FFFFFF;color:var(--preto);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--gelo);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(241,242,243,.09);color:var(--gelo);transform:translateY(-2px)}
.btn-ghost-lt{background:transparent;color:var(--gelo);border-color:var(--line-2)}
.btn-ghost-lt:hover{background:rgba(241,242,243,.12);color:var(--gelo)}
.btn-sm{padding:.6rem 1.05rem;font-size:.84rem}
.btn-block{display:flex;width:100%}
.btn .ar{transition:transform .18s ease}
.btn:hover .ar{transform:translateX(4px)}

/* ---------------------------------------------------------------- utility */
.utility{background:var(--preto-2);color:var(--mut);font-size:.78rem;
  padding:.48rem 0;position:relative;z-index:60;border-bottom:1px solid var(--line)}
.utility .wide{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;align-items:center;
  justify-content:space-between}
.u-left,.u-right{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;align-items:center;min-width:0}
.utility a{color:var(--mut);text-decoration:none}
.utility a:hover{color:var(--amar);text-decoration:underline}
.langsw{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.langsw a{padding:.14rem .6rem;font-weight:700;letter-spacing:.06em;font-size:.71rem}
.langsw a.on{background:var(--amar);color:var(--ink)}
.langsw a.on:hover{color:var(--ink);text-decoration:none}

/* ----------------------------------------------------------------- header */
.site-head{position:sticky;top:0;z-index:70;background:rgba(10,10,11,.9);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid transparent;
  padding-block:.85rem;
  transition:padding .25s ease,box-shadow .25s ease,border-color .25s ease,
             background-color .25s ease}
.site-head.is-stuck{padding-block:.42rem;box-shadow:0 8px 26px rgba(0,0,0,.6);
  border-bottom-color:var(--line);background:rgba(10,10,11,.985)}
.head-in{display:flex;align-items:center;gap:1rem;justify-content:space-between}
/* ---- brand lockup
   The client supplied the logo after the first build, so the header is no
   longer a typographic stand-in. logo.png is their own artwork with the
   black field lifted to alpha and the result trimmed to the ink - nothing
   redrawn, nothing recoloured. It sits on black here, which is the field
   it was drawn for. [CONFIRM] ask for the vector original. */
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;min-width:0}
.brand-mark{width:auto;height:40px;flex:0 0 auto;transition:height .25s ease}
.site-head.is-stuck .brand-mark{height:32px}
/* The wordmark is set in live type rather than pulled from the artwork,
   because the supplied lockup is stacked: at a 40px header the word
   CLUBINHO inside it would render about 6px tall. The weight split is the
   logo's own - CLUB heavy, INHO light - so the lockup still reads as
   theirs. [CONFIRM the typeface; Archivo is a stand-in.] */
.brand-wm{display:block;min-width:0;font-family:var(--disp);font-weight:800;
  font-size:1.26rem;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--gelo);white-space:nowrap}
.brand-wm em{font-style:normal;font-weight:300}
.brand-wm small{display:block;font-family:var(--sans);font-weight:700;font-size:.57rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--aco);margin-top:.22rem;
  white-space:normal}
/* The footer has room for the full stacked lockup as supplied. */
.site-foot .brand{display:block}
.site-foot .brand-mark{height:82px}
.site-foot .brand-txt{display:block;font-family:var(--sans);font-weight:700;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aco);
  margin-top:.75rem}
@media (max-width:480px){.brand-mark{height:34px}.brand-wm small{display:none}}
.site-nav{display:flex;align-items:center;gap:.1rem}
.site-nav a{color:var(--gelo);text-decoration:none;font-size:.86rem;font-weight:600;
  padding:.5rem .66rem;border-radius:8px;white-space:nowrap;
  transition:background-color .16s ease,color .16s ease}
.site-nav a:hover{background:rgba(241,242,243,.1);color:var(--gelo)}
.site-nav a[aria-current="page"]{background:rgba(245,196,30,.16);color:var(--amar)}
.head-cta{display:flex;align-items:center;gap:.5rem;min-width:0}
.burger{display:none;background:none;border:1.5px solid var(--line-2);border-radius:10px;
  width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--gelo);position:relative;
  transition:transform .2s ease,background-color .2s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;
  height:2px;background:var(--gelo);transition:transform .2s ease}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){
  .site-nav{position:fixed;inset:0 0 auto;top:0;padding:6rem 6vw 2.4rem;flex-direction:column;
    align-items:stretch;gap:.15rem;background:var(--carv);
    transform:translateY(-102%);transition:transform .32s cubic-bezier(.22,.9,.3,1);
    box-shadow:0 26px 60px rgba(0,0,0,.7);z-index:65}
  .site-nav.is-open{transform:translateY(0)}
  .site-nav a{padding:.9rem .4rem;font-size:1.05rem;border-bottom:1px solid var(--line);
    border-radius:0}
  .burger{display:inline-flex}
}
@media (max-width:620px){.head-cta .btn{display:none}}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--preto-2);color:var(--gelo);overflow:hidden;
  padding-block:clamp(3.6rem,9vw,7rem)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42;
  transform:scale(1.06);will-change:transform}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.8) 42%,
             rgba(10,10,11,.4) 100%),
             linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.66) 100%)}
.hero-in{position:relative;z-index:2;max-width:47rem}
.hero h1{color:var(--gelo)}
.hero .lede{color:var(--mut);max-width:50ch}
.hero .eyebrow{color:var(--amar)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.hero-note{margin-top:1.8rem;font-size:.81rem;color:var(--dim);max-width:56ch}

/* -------------------------------------------------------------- page head */
.page-head{background:var(--carv);border-bottom:1px solid var(--line);
  padding-block:clamp(2.4rem,6vw,4.4rem)}
.page-head .lede{max-width:58ch}
.crumb{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--amar);margin:0 0 .6rem}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ bands
   On a black page the band system inverts: the default section IS the dark
   one, so "band-graf" becomes the deepest stop and "band-papel" the lift.
   The class names are kept because 700-odd pages across this batch use
   them and renaming them buys nothing. */
.band-graf{background:linear-gradient(155deg,#000000 0%,#0F0F11 100%);color:var(--gelo)}
.band-graf h2,.band-graf h3,.band-graf h4{color:var(--gelo)}
.band-graf .lede{color:var(--mut)}
.band-graf .eyebrow{color:var(--amar)}
.band-graf .small{color:var(--dim)}
.band-graf a{color:var(--amar)}
.band-papel{background:var(--carv);border-block:1px solid var(--line)}
.band-photo{position:relative;color:var(--gelo);overflow:hidden}
.band-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.36}
.band-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(145deg,rgba(0,0,0,.93) 8%,rgba(10,10,11,.84) 100%)}
.band-photo>.wide,.band-photo>.wrap{position:relative;z-index:2}
.band-photo h2,.band-photo h3{color:var(--gelo)}
.band-photo .lede{color:var(--mut)}
.band-photo .eyebrow{color:var(--amar)}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.g5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.g3,.g5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
.grid>*{min-width:0}
.card{background:var(--carv);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.3rem;transition:transform .22s ease,box-shadow .22s ease,
  border-color .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);
  border-color:var(--line-2)}
.card h3{margin-bottom:.35rem}
.card p{margin:.45rem 0 0;font-size:.9rem;color:var(--mut)}
.card .num{font-family:var(--disp);font-size:1.9rem;color:var(--amar);line-height:1;
  display:block;margin-bottom:.5rem}
/* card-graf sits INSIDE a band-graf, so it has to lift off the deepest
   stop rather than sink into it. */
.card-graf{background:var(--carv-2);border-color:var(--line);color:var(--gelo)}
.card-graf h3{color:var(--gelo)}
.card-graf p{color:var(--mut)}
.card-graf .num{color:var(--amar)}
.band-papel .card,.band-papel .svc,.band-papel details,.band-papel .form-card{
  background:var(--carv-2)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);
  align-items:center}
.split.top{align-items:start}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ------------------------------------------------------- service cards */
.svc{background:var(--carv);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);
  border-color:var(--line-2)}
.svc .fig{border-radius:0}
.svc-body{padding:1.05rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1 1 auto}
.svc h3{font-size:1.05rem}
.svc p{font-size:.86rem;margin:.4rem 0 0;color:var(--mut);flex:1 1 auto}
.svc .who{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amar);display:block;margin-bottom:.3rem}
/* Every regulated activity carries the council it answers to, right on the
   card. Five regulated things under one roof and not one registration
   published is the finding this build is built around. */
.reg{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.7rem;font-size:.76rem;
  color:var(--dim)}
.reg b{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amar);margin-bottom:.2rem}

/* -------------------------------------------------------- timetable grid */
.tt{width:100%;border-collapse:collapse;font-size:.88rem;min-width:38rem}
.tt th,.tt td{padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top;color:var(--gelo)}
.tt thead th{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amar);border-bottom-width:2px;
  border-bottom-color:var(--line-2)}
.tt tbody th{font-weight:700;white-space:nowrap}
.tt td{color:var(--mut)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* -------------------------------------------------------------- figures */
figure{margin:0}
.fig{position:relative;overflow:hidden;border-radius:var(--r);background:var(--carv-2)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fig:hover img{transform:scale(1.045)}
.r-16x9{aspect-ratio:16/9}
.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}
.r-1x1{aspect-ratio:1/1}
.r-3x4{aspect-ratio:3/4}
.cap{font-size:.76rem;color:var(--dim);margin:.55rem 0 0;line-height:1.45}
.band-graf .cap,.band-photo .cap{color:var(--dim)}
.ph{position:absolute;left:.6rem;top:.6rem;z-index:3;font-size:.6rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;background:rgba(0,0,0,.86);
  color:var(--gelo);padding:.22rem .55rem;border-radius:6px;
  border:1px solid var(--line-2)}

/* ------------------------------------------------------------ confirm ink
   On black the yellow can carry the [CONFIRM] text itself (12.06), so the
   marker no longer needs a tinted pill behind a darker yellow to be read.
   The faint wash stays because it is what makes the markers scannable at a
   glance - there are 938 of them and they are the point of the mockup. */
.cfm{font-weight:700;color:var(--amar);background:rgba(245,196,30,.13);
  padding:.05em .42em;border-radius:5px;font-size:.94em;
  white-space:normal;overflow-wrap:anywhere}
.band-graf .cfm,.band-photo .cfm{color:var(--amar);background:rgba(245,196,30,.15)}
.cfm-block{border-left:3px solid var(--amar);background:rgba(245,196,30,.09);
  padding:1rem 1.15rem;border-radius:0 var(--r) var(--r) 0;font-size:.89rem;
  margin:1.3rem 0 0;color:var(--gelo)}
.cfm-block p{margin:.4rem 0}
.cfm-block p:first-child{margin-top:0}
.band-graf .cfm-block,.band-photo .cfm-block{background:rgba(245,196,30,.1);
  color:var(--gelo)}
.warn-block{border:1px solid var(--line-2);background:rgba(140,155,166,.1);
  padding:1.05rem 1.2rem;border-radius:var(--r);font-size:.88rem;margin:1.3rem 0 0;
  color:var(--mut)}
.warn-block b{color:var(--aco)}
.band-graf .warn-block,.band-photo .warn-block{border-color:var(--line-2);
  background:rgba(241,242,243,.06);color:var(--mut)}
.band-graf .warn-block b,.band-photo .warn-block b{color:var(--amar)}

/* ----------------------------------------------------------------- lists */
.ticks{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.55rem;font-size:.93rem;color:var(--mut)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--amar)}
.band-graf .ticks li{color:var(--mut)}

/* ----------------------------------------------------------------- forms */
.form-card{background:var(--carv);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2rem)}
.band-graf .form-card,.band-photo .form-card{background:var(--carv-2);
  border-color:var(--line)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field.full{grid-column:1/-1}
label{font-size:.81rem;font-weight:700;color:var(--gelo)}
.band-graf label{color:var(--gelo)}
input,select,textarea{font-family:var(--sans);font-size:.95rem;padding:.72rem .85rem;
  border-radius:9px;border:1.5px solid var(--line-2);background:#08080A;color:var(--gelo);
  width:100%;max-width:100%}
input::placeholder,textarea::placeholder{color:#7E868C}
textarea{resize:vertical;min-height:6.5rem}
input:focus,select:focus,textarea:focus{border-color:var(--amar);outline:none;
  box-shadow:0 0 0 3px rgba(245,196,30,.28)}
.consent{display:flex;gap:.65rem;align-items:flex-start;margin-top:1.05rem;
  font-size:.82rem;font-weight:400;line-height:1.5;color:var(--mut)}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:.15rem;accent-color:var(--amar)}
.form-status{margin:.9rem 0 0;font-size:.85rem;font-weight:700;min-height:1.2em;
  color:var(--amar)}
.form-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}

/* ------------------------------------------------------------------- FAQ */
.faq{display:grid;gap:.65rem;max-width:56rem;margin-inline:auto}
details{background:var(--carv);border:1px solid var(--line);border-radius:var(--r);
  padding:.1rem .3rem}
summary{cursor:pointer;font-weight:700;font-size:.98rem;padding:1rem 1.1rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  color:var(--gelo)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--disp);font-size:1.35rem;color:var(--amar);
  line-height:1;transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 1.1rem 1.1rem;margin:0;font-size:.92rem;color:var(--mut)}

/* ---------------------------------------------------------------- footer */
.site-foot{background:linear-gradient(155deg,#000000 0%,#0D0D0F 100%);
  color:var(--mut);padding-block:3.2rem 2rem;font-size:.89rem;
  border-top:1px solid var(--line)}
.site-foot .brand{color:var(--gelo)}
.site-foot .brand-txt{color:var(--dim)}
.site-foot h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 .7rem;color:var(--amar)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:2.1rem;
  padding-top:1.9rem;border-top:1px solid var(--line)}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid>*{min-width:0}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:.42rem}
.site-foot a{color:var(--mut);text-decoration:none}
.site-foot a:hover{color:var(--amar);text-decoration:underline}
.foot-legal{margin-top:1.9rem;padding-top:1.3rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--dim);display:flex;flex-wrap:wrap;
  gap:.5rem 1.2rem;justify-content:space-between}
.foot-note{font-size:.78rem;color:var(--dim);margin-top:.95rem;max-width:78ch}
.reg-box{border:1px solid var(--line-2);border-radius:var(--r);padding:1rem 1.15rem;
  margin-top:1.6rem;font-size:.8rem;color:var(--mut)}
.reg-box b{color:var(--amar);display:block;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.4rem}

/* ------------------------------------------------------------ sticky CTAs */
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;
  width:56px;height:56px;border-radius:999px;background:#25D366;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.7);transition:transform .2s ease}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:#0B2E17}
@media (max-width:767px){.wa-float{bottom:calc(70px + env(safe-area-inset-bottom))}}
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:88;height:56px;
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--carv);border-top:1px solid var(--line-2);
  box-shadow:0 -6px 24px rgba(0,0,0,.6)}
.mobile-bar .in{display:grid;grid-template-columns:1fr 1fr;height:56px}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:.4rem;
  color:var(--gelo);text-decoration:none;font-weight:700;font-size:.88rem}
.mobile-bar a.amar{background:var(--amar);color:var(--ink)}
@media (max-width:767px){.mobile-bar{display:block}body{padding-bottom:56px}}

/* -------------------------------------------------------------- LGPD bar */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--carv);
  border-top:3px solid var(--amar);box-shadow:0 -12px 40px rgba(0,0,0,.7);
  padding:1.2rem 0 calc(1.2rem + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .34s cubic-bezier(.22,.9,.3,1)}
.lgpd.is-open{transform:translateY(0)}
.lgpd[aria-hidden="true"]{visibility:hidden}
.lgpd[aria-hidden="false"]{visibility:visible}
.lgpd h2{font-size:1.08rem;color:var(--gelo)}
.lgpd p{font-size:.86rem;margin:.5rem 0 0;max-width:74ch;color:var(--mut)}
.lgpd-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.lgpd-prefs{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:1rem;
  display:grid;gap:.7rem;max-width:52rem}
.lgpd-row{display:flex;gap:.7rem;align-items:flex-start}
.lgpd-row input{width:18px;height:18px;flex:0 0 auto;margin-top:.2rem;accent-color:var(--amar)}
.lgpd-row label{font-weight:400;font-size:.85rem;color:var(--mut)}
.lgpd-row b{display:block;font-size:.89rem;color:var(--gelo)}
.lgpd-row small{color:var(--dim);font-size:.79rem}

/* ------------------------------------------------------------- animation */
.rev{opacity:0;transform:translateY(20px);
  transition:opacity .55s cubic-bezier(.22,.9,.3,1),transform .55s cubic-bezier(.22,.9,.3,1)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .hero-media img{transform:none!important}
}

/* ------------------------------------------------- overflow guard */
input,select,textarea,img,svg,video,iframe{max-width:100%}

/* ------------------------------------------- offcanvas-visibility-guard
   backdrop-filter on the sticky header makes the header the containing
   block for its position:fixed children, so this panel's top:0 is the
   header's top edge and not the viewport's. translateY(-102%) therefore
   leaves its bottom edge inside the screen at scroll 0. Visibility takes
   it out of the render tree while closed; the delay lets the slide finish
   before it disappears. */
@media (max-width:1080px){
  .site-nav{visibility:hidden;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s linear .32s}
  .site-nav.is-open{visibility:visible;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s}
}

/* ------------------------------------------- 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}
}