/* =========================================================
   STUDIO MOVE THAI — Aclimação, São Paulo
   Palette taken from the studio itself: the black uniform,
   the yellow wall (#FED406, sampled from their own mark),
   the bone-white upper wall and the grey rubber floor.
   ========================================================= */

:root{
  --ink:      #0B0B0C;
  --ink-2:    #131316;
  --ink-3:    #1D1D21;
  --yellow:   #FED406;
  --yellow-d: #D9B300;
  --bone:     #EDE9E0;
  --bone-2:   #E2DDD1;
  --floor:    #6E6F73;
  --ash:      #93939A;

  --wrap: 1220px;
  --gut: clamp(20px, 5vw, 64px);
  --pad: clamp(76px, 11vw, 150px);

  --f-disp: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `hidden` would make body a scroll container and break
     the sticky round timer. */
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--yellow); color:var(--ink); }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--yellow); color:var(--ink); padding:12px 20px;
  font:600 14px/1 var(--f-mono);
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ---------------------------------------------------------
   SECTION SYSTEM — the "wall split".
   The studio's walls are grey below and yellow above, cut by
   one hard horizontal line. Every section edge repeats it.
   --------------------------------------------------------- */
.s{ position:relative; padding-block:var(--pad); }

.s--ink{ background:var(--ink); color:var(--bone); }
.s--bone{ background:var(--bone); color:var(--ink); }
.s--yellow{ background:var(--yellow); color:var(--ink); }

.s::before{
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:var(--yellow);
}
.s--yellow::before{ background:var(--ink); }

/* ---------------------------------------------------------
   TYPE
   --------------------------------------------------------- */
.eyebrow{
  font:500 12px/1.4 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow);
  margin:0 0 22px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.s--bone .eyebrow{ color:#8A7300; }
.s--yellow .eyebrow{ color:var(--ink); }
.eyebrow__sep{ opacity:.5; }

.h2{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(42px, 6.4vw, 86px);
  line-height:1;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0 0 22px;
}
.hi{ color:var(--yellow); }
/* Painted as a background band so it can't be pushed behind the section fill. */
.hi--ink{
  color:var(--ink);
  background-image:linear-gradient(var(--yellow), var(--yellow));
  background-repeat:no-repeat;
  background-size:100% .16em;
  background-position:0 92%;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

.head{ max-width:760px; margin-bottom:clamp(48px,6vw,80px); }
.head--center{ margin-inline:auto; text-align:center; }
.head--center .eyebrow{ justify-content:center; }
.head__note{
  color:var(--ash); font-size:17px; max-width:56ch; margin:0;
}
.head--center .head__note{ margin-inline:auto; }
.s--bone .head__note{ color:var(--floor); }
.head__note--left{ margin-bottom:28px; }

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  font:600 14px/1 var(--f-mono);
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:2px solid transparent; border-radius:2px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s;
}
.btn--lg{ padding:19px 32px; font-size:15px; }
.btn--sm{ padding:11px 18px; font-size:12px; }
.btn .ico{ width:18px; height:18px; fill:currentColor; flex:none; }

.btn--wa{ background:var(--yellow); color:var(--ink); }
.btn--wa:hover{ background:#fff; transform:translateY(-2px); }

.btn--ink{ background:var(--ink); color:var(--yellow); }
.btn--ink:hover{ background:#000; color:#fff; transform:translateY(-2px); }

.btn--ghost{ border-color:rgba(237,233,224,.35); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--yellow); color:var(--yellow); transform:translateY(-2px); }

.btn--ghost-ink{ border-color:rgba(11,11,12,.3); color:var(--ink); }
.btn--ghost-ink:hover{ border-color:var(--ink); color:var(--ink); background:rgba(11,11,12,.06); }

.btn--outline-ink{ border-color:var(--ink); color:var(--ink); }
.btn--outline-ink:hover{ background:var(--ink); color:var(--yellow); transform:translateY(-2px); }

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:90;
  transform:translateY(-104%);
  transition:transform .5s var(--ease-out);
  background:rgba(11,11,12,.9);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(254,212,6,.22);
}
.nav.is-on{ transform:none; }
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:11px var(--gut);
  display:flex; align-items:center; gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.nav__mark{ width:auto; height:34px; }
.nav__word{
  font:700 20px/1 var(--f-disp); text-transform:uppercase; letter-spacing:.02em; color:var(--bone);
}
.nav__word em{ font-style:normal; color:var(--yellow); }
.nav__links{ display:flex; gap:26px; }
.nav__links a{
  font:500 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ash); text-decoration:none; padding:6px 0; position:relative;
  transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--yellow);
  transition:width .3s var(--ease-out);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ width:100%; }

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(104px,13vh,140px) clamp(52px,7vh,80px);
  overflow:hidden;
  border-bottom:3px solid var(--yellow);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:grayscale(.62) contrast(1.12) brightness(.74);
  transform:scale(1.06);
  animation:heroZoom 15s var(--ease-out) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,11,12,.97) 4%, rgba(11,11,12,.80) 34%, rgba(11,11,12,.34) 66%, rgba(11,11,12,.72) 100%),
    radial-gradient(120% 78% at 12% 88%, rgba(254,212,6,.16) 0%, transparent 58%);
}
.grain{
  position:absolute; inset:0; opacity:.055; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__in{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.eyebrow--hero{ color:var(--yellow); margin-bottom:26px; }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--yellow); flex:none;
  box-shadow:0 0 0 0 rgba(254,212,6,.7); animation:pulse 2.6s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 11px rgba(254,212,6,0);} 100%{ box-shadow:0 0 0 0 rgba(254,212,6,0);} }

.hero__h1{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(52px, 9.4vw, 128px);
  line-height:.95; letter-spacing:-.012em; text-transform:uppercase;
  margin:0 0 26px; max-width:15ch;
}
/* Big Shoulders sets tall acute accents — this keeps "JÁ" clear of the
   line above without loosening the whole block. */
.hero__line{ display:block; }
.hero__line--hi{ color:var(--yellow); }

.hero__sub{
  max-width:60ch; font-size:clamp(16px,1.7vw,18.5px); line-height:1.58;
  color:rgba(237,233,224,.86); margin:0 0 30px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }

.hero__trust{
  list-style:none; margin:0; padding:22px 0 0; border-top:1px solid rgba(237,233,224,.16);
  display:flex; flex-wrap:wrap; gap:12px 34px;
  font:500 12.5px/1.5 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ash);
}
.hero__trust li{ display:flex; align-items:center; gap:9px; }
.stars{ color:var(--yellow); font-weight:600; }

.hero__anim{ opacity:0; transform:translateY(26px); animation:rise .95s var(--ease-out) forwards; animation-delay:var(--d,0s); }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------
   STAT BAND
   --------------------------------------------------------- */
.band{ background:var(--yellow); color:var(--ink); padding-block:clamp(30px,4vw,44px); }
.band__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.band__item{ display:flex; flex-direction:column; gap:5px; position:relative; padding-left:20px; }
.band__item::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:rgba(11,11,12,.28); }
.band__n{ font:800 clamp(34px,4.4vw,56px)/1 var(--f-disp); letter-spacing:-.01em; }
.band__n i{ font-style:normal; font-size:.5em; }
.band__l{ font:500 11px/1.4 var(--f-mono); letter-spacing:.13em; text-transform:uppercase; color:rgba(11,11,12,.66); }

/* ---------------------------------------------------------
   MODALIDADES
   --------------------------------------------------------- */
/* Alternating full-width rows. The studio's own photos are portrait, so the
   image column is portrait too — no subject gets cropped out of frame. */
.mods{ display:grid; gap:2px; background:rgba(237,233,224,.13); border:1px solid rgba(237,233,224,.13); }

.mod{ background:var(--ink); display:grid; grid-template-columns:clamp(280px,40%,500px) 1fr; }
.mod:nth-child(even){ grid-template-columns:1fr clamp(280px,40%,500px); }
.mod:nth-child(even) .mod__img{ grid-column:2; grid-row:1; }
.mod:nth-child(even) .mod__body{ grid-column:1; grid-row:1; }

.mod__img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink-3); }
.mod__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(.78);
  transform:scale(1.02);
  transition:filter .7s var(--ease), transform 1.1s var(--ease-out);
}
.mod__img::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:0;
  background:var(--yellow); transition:height .45s var(--ease-out);
}
.mod:hover .mod__img img,
.mod:focus-within .mod__img img{ filter:grayscale(.1) contrast(1.06) brightness(.95); transform:scale(1.07); }
.mod:hover .mod__img::after,
.mod:focus-within .mod__img::after{ height:4px; }

.mod__body{ padding:clamp(28px,4vw,58px); display:flex; flex-direction:column; justify-content:center; }
.mod__kicker{ font:500 11px/1.4 var(--f-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--yellow); margin:0 0 12px; }
.mod__t{
  font:800 clamp(30px,3.6vw,46px)/.95 var(--f-disp); text-transform:uppercase;
  letter-spacing:-.005em; margin:0 0 14px;
}
.mod__d{ color:var(--ash); margin:0 0 24px; font-size:16.5px; max-width:46ch; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.tags li{
  font:500 11px/1 var(--f-mono); letter-spacing:.09em; text-transform:uppercase;
  padding:7px 11px; border:1px solid rgba(237,233,224,.2); color:var(--ash); border-radius:2px;
}

/* ---------------------------------------------------------
   ROUNDS — the signature block
   --------------------------------------------------------- */
.rnd{ display:grid; grid-template-columns:260px 1fr; gap:clamp(36px,6vw,90px); align-items:start; }

.rnd__clock{ position:sticky; top:110px; width:260px; aspect-ratio:1; display:grid; place-items:center; }
.rnd__face{ position:relative; z-index:2; text-align:center; }
.rnd__time{
  display:block; font:600 46px/1 var(--f-mono); letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.rnd__label{ display:block; margin-top:9px; font:500 11px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--floor); }
.rnd__ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.rnd__ring circle{ fill:none; stroke:rgba(11,11,12,.14); stroke-width:3; }
/* Same specificity as the rule above would lose to it — qualify the class. */
.rnd__ring circle.rnd__prog{
  stroke:var(--yellow); stroke-width:6; stroke-linecap:butt;
  stroke-dasharray:339.29; stroke-dashoffset:339.29;
  transition:stroke-dashoffset .6s var(--ease);
}

.rnd__list{ list-style:none; margin:0; padding:0; }
.rnd__item{
  position:relative; padding:0 0 clamp(40px,5vw,64px) clamp(30px,4vw,52px);
  border-left:2px solid rgba(11,11,12,.14);
  /* dimmed, but never below a readable contrast — several rounds are on
     screen at once on mobile */
  opacity:.66; transition:opacity .5s var(--ease);
}
.rnd__item:last-child{ padding-bottom:0; border-left-color:transparent; }
.rnd__item::before{
  content:""; position:absolute; left:-9px; top:6px; width:16px; height:16px;
  background:var(--bone); border:2px solid rgba(11,11,12,.24); border-radius:50%;
  transition:background-color .4s, border-color .4s, transform .4s var(--ease-out);
}
.rnd__item.is-live{ opacity:1; }
.rnd__item.is-live::before{ background:var(--yellow); border-color:var(--ink); transform:scale(1.22); }
.rnd__n{ display:block; font:500 11px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:#8A7300; margin-bottom:12px; }
.rnd__t{ font:700 clamp(26px,3.1vw,40px)/1.02 var(--f-disp); text-transform:uppercase; margin:0 0 12px; }
.rnd__p{ margin:0; color:var(--floor); max-width:56ch; }

.rnd__cta{ margin-top:clamp(48px,6vw,76px); text-align:center; }
.rnd__note{ margin:16px 0 0; font:500 12px/1.5 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--floor); }

/* ---------------------------------------------------------
   PROFESSOR
   --------------------------------------------------------- */
.prof__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,6vw,86px); align-items:center; }
.prof__media{ position:relative; }
.prof__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(.85) contrast(1.14) brightness(.85);
  border:1px solid rgba(237,233,224,.14);
}
.prof__media2{
  position:absolute; right:-11%; bottom:-9%; width:43%;
  aspect-ratio:4/3 !important;
  border:3px solid var(--ink) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.prof__p{ color:var(--ash); margin:0 0 18px; max-width:56ch; }
.pull{
  margin:32px 0 0; padding:24px 0 4px 26px; border-left:3px solid var(--yellow);
}
.pull p{ font:500 clamp(19px,2.2vw,25px)/1.42 var(--f-body); color:var(--bone); margin:0 0 14px; }
.pull cite{ font:500 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:var(--yellow); }
.pull cite span{ color:var(--ash); }

/* ---------------------------------------------------------
   DEPOIMENTOS
   --------------------------------------------------------- */
.rail{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  /* snap has to know about the track's inset, or it parks on the padding */
  scroll-padding-inline-start:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
}
.rail::-webkit-scrollbar{ display:none; }
.rail__track{
  display:flex; gap:22px;
  padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  padding-block:4px 8px;
}
.quote{
  flex:0 0 min(420px, 82vw); scroll-snap-align:start;
  margin:0; padding:34px 32px;
  background:#fff; border:1px solid rgba(11,11,12,.1);
  border-top:3px solid var(--yellow);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.quote:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(11,11,12,.12); }
.quote p{ margin:0 0 22px; font-size:16.5px; line-height:1.62; color:var(--ink); flex:1; }
.quote figcaption{ display:flex; flex-direction:column; gap:4px; }
.quote strong{ font:600 15px/1 var(--f-body); }
.quote span{ font:500 11px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:#8A7300; }

.rail__nav{ display:flex; align-items:center; gap:12px; margin-top:34px; }
.rbtn{
  width:48px; height:48px; display:grid; place-items:center;
  background:transparent; border:2px solid rgba(11,11,12,.22); border-radius:2px; cursor:pointer;
  transition:background-color .25s, border-color .25s, transform .25s var(--ease-out);
}
.rbtn svg{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:square; }
.rbtn:hover{ background:var(--yellow); border-color:var(--ink); transform:translateY(-2px); }
.rail__link{
  margin-left:auto; font:600 12px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:2px solid var(--yellow); padding-bottom:5px;
  transition:opacity .25s;
}
.rail__link:hover{ opacity:.62; }

/* ---------------------------------------------------------
   COMMUNITY BAND — the page argues you'll belong here, so it
   ends the testimonials by showing the room.
   --------------------------------------------------------- */
.turma{ position:relative; margin:0; background:var(--ink); }
.turma img{
  width:100%; height:clamp(300px,46vw,560px); object-fit:cover; object-position:50% 62%;
  filter:grayscale(.68) contrast(1.12) brightness(.82);
}
.turma figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:64px var(--gut) 22px;
  background:linear-gradient(to top, rgba(11,11,12,.92), transparent);
  font:500 12px/1.5 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--bone);
}

/* ---------------------------------------------------------
   HORÁRIOS
   --------------------------------------------------------- */
.horas__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:start; }
.hours{ width:100%; border-collapse:collapse; font:500 14px/1 var(--f-mono); }
.hours th, .hours td{ text-align:left; padding:17px 8px; border-bottom:1px solid rgba(237,233,224,.14); }
.hours th{ font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--bone); width:36%; }
.hours td{ color:var(--ash); letter-spacing:.02em; }
.hours .dim{ color:#4E4E55; }
.hours tr.off th{ color:var(--floor); }
.hours tr.is-today th{ color:var(--yellow); }
.hours tr.is-today td{ color:var(--bone); }
.hours tr.is-today{ background:rgba(254,212,6,.07); }
.hours__now{
  margin:20px 0 0; font:500 12px/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ash); display:flex; align-items:center; gap:9px;
}
.hours__now b{ color:var(--yellow); font-weight:600; }

/* ---------------------------------------------------------
   LOCAL
   --------------------------------------------------------- */
.local__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,80px); align-items:center; }
.addr{
  font:500 19px/1.62 var(--f-mono); font-style:normal; color:var(--ink);
  margin:0 0 26px; padding-left:20px; border-left:3px solid var(--yellow);
}
.local__facts{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:11px; }
.local__facts li{
  position:relative; padding-left:26px; font-size:15.5px; color:var(--floor);
}
.local__facts li::before{
  content:""; position:absolute; left:0; top:.62em; width:11px; height:2px; background:var(--yellow);
}
.local__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.local__map{
  aspect-ratio:4/3; border:3px solid var(--ink); background:var(--bone-2); overflow:hidden;
}
.local__map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.06); }

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,80px); align-items:start; }
.fq{ border-bottom:1px solid rgba(237,233,224,.15); }
.fq:first-child{ border-top:1px solid rgba(237,233,224,.15); }
.fq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font:600 17.5px/1.42 var(--f-body); color:var(--bone);
  transition:color .25s;
}
.fq summary::-webkit-details-marker{ display:none; }
.fq summary:hover{ color:var(--yellow); }
.fq summary::after,
.fq summary::before{
  content:""; position:absolute; right:6px; top:50%; background:var(--yellow);
  transition:transform .35s var(--ease-out), opacity .3s;
}
.fq summary::after{ width:15px; height:2px; translate:0 -50%; }
.fq summary::before{ width:2px; height:15px; right:12.5px; translate:0 -50%; }
.fq[open] summary::before{ transform:rotate(90deg); opacity:0; }
.fq[open] summary{ color:var(--yellow); }
.fq__a{ padding:0 40px 26px 0; }
.fq__a p{ margin:0; color:var(--ash); font-size:16px; }
.fq[open] .fq__a{ animation:fqIn .45s var(--ease-out); }
@keyframes fqIn{ from{ opacity:0; transform:translateY(-8px);} }

/* ---------------------------------------------------------
   CTA FINAL
   --------------------------------------------------------- */
.final{ text-align:center; overflow:hidden; padding-block:clamp(64px,8vw,110px); }
.final::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-58deg, rgba(11,11,12,.05) 0 2px, transparent 2px 84px);
}
.final__in{ position:relative; z-index:2; max-width:760px; margin-inline:auto; }
.final__mark{ width:auto; height:96px; margin:0 auto 26px; }
.final__h{
  font:800 clamp(46px,7.6vw,104px)/.88 var(--f-disp); text-transform:uppercase;
  letter-spacing:-.012em; margin:0 0 22px; color:var(--ink);
}
.final__p{ margin:0 auto 34px; max-width:50ch; color:rgba(11,11,12,.74); font-size:17px; }
.final__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--ash); padding-block:clamp(56px,7vw,88px) 34px; border-top:3px solid var(--yellow); }
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; }
.foot__brand{ display:flex; align-items:center; gap:13px; text-decoration:none; margin-bottom:14px; }
.foot__brand img{ height:52px; width:auto; }
.foot__brand span{ font:700 21px/1.05 var(--f-disp); text-transform:uppercase; color:var(--bone); letter-spacing:.01em; }
.foot__brand em{ font-style:normal; color:var(--yellow); }
.foot__tag{ font:500 11.5px/1.6 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; margin:0; }
.foot__h{ font:500 11px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--yellow); margin:0 0 15px; }
.foot p{ margin:0; font-size:14.5px; line-height:1.78; }
.foot a{ text-decoration:none; transition:color .25s; }
.foot a:hover{ color:var(--yellow); }
.foot__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(237,233,224,.12);
  font:500 11px/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase;
}
.foot__base p{ font:inherit; margin:0; }

/* ---------------------------------------------------------
   MOBILE DOCK
   --------------------------------------------------------- */
.dock{
  position:fixed; inset-inline:0; bottom:0; z-index:95;
  display:none; gap:2px; padding:10px;
  background:rgba(11,11,12,.94); backdrop-filter:blur(14px);
  border-top:2px solid var(--yellow);
  transform:translateY(110%); transition:transform .45s var(--ease-out);
}
.dock.is-on{ transform:none; }
.dock__wa{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--yellow); color:var(--ink); text-decoration:none;
  padding:15px 12px; border-radius:2px;
  font:600 13.5px/1 var(--f-mono); letter-spacing:.04em; text-transform:uppercase;
}
.dock__wa .ico{ width:19px; height:19px; fill:currentColor; }
.dock__tel{
  width:52px; display:grid; place-items:center; border:2px solid rgba(254,212,6,.45); border-radius:2px;
}
.dock__tel svg{ width:21px; height:21px; fill:var(--yellow); }

/* ---------------------------------------------------------
   REVEAL
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.mods .reveal:nth-child(2){ transition-delay:.08s; }
.mods .reveal:nth-child(3){ transition-delay:.04s; }
.mods .reveal:nth-child(4){ transition-delay:.12s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .prof__grid, .horas__grid, .local__grid, .faq__grid{ grid-template-columns:1fr; }
  .prof__media{ max-width:440px; }
  .prof__media2{ right:-6%; width:46%; }
}

@media (max-width:860px){
  body{ font-size:16px; }
  .mod,
  .mod:nth-child(even){ grid-template-columns:1fr; }
  .mod:nth-child(even) .mod__img{ grid-column:1; grid-row:1; }
  .mod:nth-child(even) .mod__body{ grid-column:1; grid-row:2; }
  .mod__img{ aspect-ratio:1/1; }
  .band__in{ grid-template-columns:repeat(2,1fr); gap:26px 18px; }
  .rnd{ grid-template-columns:1fr; }
  .rnd__clock{
    position:relative; top:0; width:150px; margin:0 0 40px;
    justify-self:center;
  }
  .rnd__time{ font-size:30px; }
  .dock{ display:flex; }
  .hero{ min-height:92svh; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:34px; }
}

@media (max-width:560px){
  :root{ --pad:64px; }
  .hero{ padding-bottom:120px; }
  /* keep the live dot tied to the first words instead of orphaning it */
  .eyebrow--hero{ display:block; }
  .eyebrow--hero .dot{ display:inline-block; vertical-align:middle; margin-right:9px; }
  .eyebrow--hero .eyebrow__sep{ display:none; }
  .hero__cta .btn{ width:100%; }
  .hero__trust{ gap:10px 22px; font-size:11.5px; }
  .band__in{ grid-template-columns:1fr 1fr; }
  .prof__media2{ position:relative; right:0; bottom:0; width:70%; margin-top:12px; }
  .final__btns .btn{ width:100%; }
  .local__btns .btn{ width:100%; }
  .foot__grid{ grid-template-columns:1fr; gap:30px; }
  .rail__track{ padding-inline:var(--gut); }
  body{ padding-bottom:78px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal, .hero__anim{ opacity:1 !important; transform:none !important; }
  .rnd__item{ opacity:1; }
  .hero__media img{ transform:none; }
}