/* ==========================================================================
   LUMINA DENTAL — Stylesheet
   1. Tokens          5. Hero            9.  Pricing      13. Contact
   2. Reset/base      6. Services        10. Reviews      14. Footer
   3. Utilities       7. Before/After    11. FAQ          15. Responsive
   4. Header/Nav      8. Why us          12. Map          16. Motion prefs
   ========================================================================== */

/* ============================ 1. TOKENS ================================== */
:root{
  /* Brand — clinical teal + deep navy, warm amber accent */
  --ink:            #062330;
  --ink-soft:       #33586a;
  --ink-muted:      #6b8896;

  --brand-900:      #052a3c;
  --brand-800:      #073c52;
  --brand-700:      #0a5c72;
  --brand-600:      #0d8a97;
  --brand-500:      #14a8ad;
  --brand-400:      #3fc3c0;
  --brand-300:      #7fdcd3;
  --brand-100:      #d3f2ee;
  --brand-50:       #eefaf8;

  --accent:         #f2a541;
  --accent-soft:    #ffd9a0;
  --whatsapp:       #25d366;
  --whatsapp-dark:  #1da851;

  --bg:             #ffffff;
  --bg-tint:        #f4faf9;
  --bg-deep:        #052a3c;
  --line:           #e2eef0;
  --line-strong:    #c9e2e4;

  /* Type */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.9rem, 7.2vw, 5.4rem);
  --fs-h2:    clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h3:    clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.075rem);
  --fs-sm:    0.925rem;
  --fs-xs:    0.8rem;

  /* Space & shape */
  --container: 1240px;
  --gutter:    clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 10vw, 8.5rem);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-full: 999px;

  --shadow-sm: 0 2px 8px rgba(5,42,60,.06);
  --shadow-md: 0 12px 30px -12px rgba(5,42,60,.16);
  --shadow-lg: 0 30px 70px -28px rgba(5,42,60,.30);
  --shadow-glow: 0 20px 50px -20px rgba(20,168,173,.55);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .22s var(--ease);
  --t-med:  .45s var(--ease);
  --t-slow: .85s var(--ease-out);

  --header-h: 76px;
}

/* ============================ 2. RESET / BASE ============================ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--brand-900);
}

::selection{ background:var(--brand-300); color:var(--brand-900); }

:focus-visible{
  outline:3px solid var(--brand-500);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-900); color:#fff; padding:.9rem 1.4rem;
  border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ============================ 3. UTILITIES ============================== */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}

.section{ padding-block:var(--section-y); position:relative; }

.section__head{
  max-width:44rem; margin-inline:auto; text-align:center;
  margin-bottom:clamp(2.75rem,5vw,4.25rem);
}
.section__head--left{ margin-inline:0; text-align:left; }

.section__title{ font-size:var(--fs-h2); margin-bottom:1.1rem; }
.section__title em{
  font-style:italic; color:var(--brand-600);
  position:relative; white-space:nowrap;
}
.section__sub{ color:var(--ink-soft); font-size:1.05rem; max-width:38rem; margin-inline:auto; }
.section__head--left .section__sub{ margin-inline:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-600);
  background:var(--brand-50); border:1px solid var(--brand-100);
  padding:.45rem 1rem; border-radius:var(--r-full); margin-bottom:1.25rem;
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand-500);
  box-shadow:0 0 0 0 rgba(20,168,173,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(20,168,173,.55); }
  70%{ box-shadow:0 0 0 9px rgba(20,168,173,0); }
  100%{ box-shadow:0 0 0 0 rgba(20,168,173,0); }
}

/* --- Buttons --- */
.btn{
  --btn-bg:var(--brand-600); --btn-fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; font-weight:600; font-size:.975rem; letter-spacing:-.01em;
  padding:.9rem 1.6rem; border-radius:var(--r-full);
  background:var(--btn-bg); color:var(--btn-fg);
  transition:transform var(--t-fast), box-shadow var(--t-fast),
             background-color var(--t-fast), color var(--t-fast);
  will-change:transform; overflow:hidden; isolation:isolate;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex:none; transition:transform var(--t-fast); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(3px); }

/* shine sweep */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.28) 45%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }

.btn--primary{
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500) 60%,var(--brand-400));
  box-shadow:0 12px 28px -14px rgba(13,138,151,.85);
}
.btn--primary:hover{ box-shadow:var(--shadow-glow); }

.btn--ghost{
  background:transparent; color:var(--brand-800);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost:hover{ background:var(--brand-50); box-shadow:inset 0 0 0 1.5px var(--brand-400); }

.btn--whatsapp{
  background:linear-gradient(135deg,var(--whatsapp-dark),var(--whatsapp));
  box-shadow:0 12px 28px -14px rgba(37,211,102,.9);
}
.btn--whatsapp:hover{ box-shadow:0 18px 40px -16px rgba(37,211,102,.75); }

.btn--lg{ padding:1.05rem 2rem; font-size:1.02rem; }
.btn--sm{ padding:.65rem 1.2rem; font-size:.9rem; }
.btn--block{ display:flex; width:100%; }

/* --- Reveal animation --- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
/* If JS never runs, nothing should stay invisible. */
html:not(.js) [data-reveal]{ opacity:1; transform:none; }

/* --- Scroll progress --- */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:120;
  background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-400),var(--accent));
  transition:width .1s linear;
}

/* ============================ 4. HEADER / NAV =========================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background-color var(--t-med), box-shadow var(--t-med),
             backdrop-filter var(--t-med), height var(--t-med);
}
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  opacity:0; transition:opacity var(--t-med);
  border-bottom:1px solid var(--line);
}
.header.is-stuck::before{ opacity:1; }
.header.is-stuck{ box-shadow:0 4px 24px -18px rgba(5,42,60,.5); }

.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.logo{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); }
.logo__mark{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:12px; color:#fff;
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400));
  box-shadow:0 8px 18px -10px rgba(13,138,151,.9);
  transition:transform var(--t-med);
}
.logo:hover .logo__mark{ transform:rotate(-8deg) scale(1.06); }
.logo__mark svg{ width:23px; height:23px; }
.logo__text{ font-size:1.22rem; font-weight:600; color:var(--brand-900); letter-spacing:-.02em; }
.logo__text em{ font-style:italic; font-weight:500; color:var(--brand-600); }
.logo--light .logo__text{ color:#fff; }
.logo--light .logo__text em{ color:var(--brand-300); }

.nav__list{ display:flex; align-items:center; gap:.35rem; }
.nav__link{
  position:relative; display:block; padding:.55rem .85rem;
  font-size:.945rem; font-weight:500; color:var(--ink-soft);
  border-radius:var(--r-full); transition:color var(--t-fast), background-color var(--t-fast);
}
.nav__link::after{
  content:""; position:absolute; left:50%; bottom:.28rem;
  width:0; height:2px; border-radius:2px; background:var(--brand-500);
  transform:translateX(-50%); transition:width var(--t-med);
}
.nav__link:hover{ color:var(--brand-800); }
.nav__link:hover::after{ width:22px; }
.nav__link.is-active{ color:var(--brand-700); font-weight:600; }
.nav__link.is-active::after{ width:22px; }

.header__actions{ display:flex; align-items:center; gap:.85rem; }
.header__phone{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.92rem; font-weight:600; color:var(--brand-800);
  transition:color var(--t-fast);
}
.header__phone svg{ width:17px; height:17px; color:var(--brand-500); }
.header__phone:hover{ color:var(--brand-500); }

.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:var(--brand-50); border:1px solid var(--brand-100);
}
.burger span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--brand-800);
  transition:transform var(--t-fast), opacity var(--t-fast);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================ 5. HERO =================================== */
.hero{
  position:relative; padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,5rem));
  padding-bottom:0; overflow:hidden;
  background:linear-gradient(180deg,var(--brand-50) 0%, #fff 62%);
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
  will-change:transform;
}
.blob--1{
  width:min(46vw,560px); aspect-ratio:1; top:-14%; right:-8%;
  background:radial-gradient(circle,var(--brand-300),transparent 68%);
  animation:float1 18s ease-in-out infinite;
}
.blob--2{
  width:min(38vw,460px); aspect-ratio:1; bottom:4%; left:-10%;
  background:radial-gradient(circle,var(--accent-soft),transparent 68%);
  opacity:.42; animation:float2 22s ease-in-out infinite;
}
@keyframes float1{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-40px,36px,0) scale(1.08); }
}
@keyframes float2{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(46px,-30px,0) scale(1.1); }
}
.grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);
  opacity:.55;
}

.hero__inner{
  position:relative; display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1.05fr .95fr; align-items:center;
  padding-bottom:clamp(3.5rem,7vw,6rem);
}

.hero__title{
  font-size:var(--fs-hero); font-weight:600; margin-bottom:1.5rem;
  letter-spacing:-.035em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block; transform:translateY(105%);
  animation:lineUp 1.05s var(--ease-out) forwards;
  padding-right:0.25em;
  padding-bottom:0.1em;
  margin-bottom:-0.1em;
}
.hero__title .line:nth-child(2) > span{ animation-delay:.13s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
.hero__title em{
  font-style:italic; position:relative; white-space:nowrap;
  display:inline-block;
  padding-right:0.18em;
  padding-bottom:0.06em;
  margin-right:-0.18em;
  background:linear-gradient(120deg,var(--brand-600),var(--brand-400) 55%,var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__text{ font-size:1.12rem; color:var(--ink-soft); max-width:33rem; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.75rem; }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,3.5vw,3rem);
  padding-top:1.75rem; border-top:1px solid var(--line);
}
.hero__trust li{ display:flex; flex-direction:column; }
.hero__trust strong{
  font-family:var(--font-display); font-size:1.85rem; font-weight:600;
  color:var(--brand-800); line-height:1.1; letter-spacing:-.03em;
}
.hero__trust span{ font-size:.845rem; color:var(--ink-muted); font-weight:500; }

/* Hero visual */
.hero__visual{ position:relative; }
.hero__card{
  position:relative; border-radius:var(--r-xl); overflow:visible;
  transform-style:preserve-3d; transition:transform .5s var(--ease-out);
}
.hero__card img{
  width:100%; border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  background:var(--brand-100);
}
.hero__card::before{
  content:""; position:absolute; inset:-14px; z-index:-1; border-radius:calc(var(--r-xl) + 12px);
  background:linear-gradient(140deg,var(--brand-300),transparent 55%);
  opacity:.55; filter:blur(6px);
}

.hero__badge{
  position:absolute; display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  padding:.75rem .95rem; border-radius:var(--r-md);
  box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.9);
  transform:translateZ(45px);
}
.hero__badge strong{ display:block; font-size:.88rem; font-weight:700; color:var(--brand-900); line-height:1.25; }
.hero__badge small{ font-size:.76rem; color:var(--ink-muted); }
.hero__badge--top{
  top:8%; left:-6%; animation:floatY 6s ease-in-out infinite;
}
.hero__badge--bottom{
  bottom:9%; right:-5%; animation:floatY 6s ease-in-out infinite .8s;
}
@keyframes floatY{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-11px,0); }
}
.hero__badge-icon{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:var(--brand-100); color:var(--brand-700);
}
.hero__badge-icon svg{ width:18px; height:18px; }
.avatars{ display:flex; }
.avatars i{
  width:28px; height:28px; border-radius:50%; border:2px solid #fff; margin-left:-9px;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
}
.avatars i:first-child{ margin-left:0; background:linear-gradient(135deg,var(--accent),#f58a5b); }
.avatars i:nth-child(2){ background:linear-gradient(135deg,var(--brand-300),var(--brand-500)); }

/* Hero marquee strip */
.hero__marquee{
  background:var(--brand-900); color:var(--brand-100);
  padding-block:.95rem; position:relative; z-index:2;
}
.marquee--sm .marquee__track{ gap:2.5rem; }
.marquee--sm span{ font-size:.87rem; font-weight:500; letter-spacing:.04em; white-space:nowrap; }
.marquee--sm span[aria-hidden]{ color:var(--brand-400); }

/* ============================ MARQUEE (shared) ========================== */
.marquee{
  /* --shift is measured in JS: exact width of one content set + its gaps.
     Using a measured px value (not -50%) keeps the loop seam pixel-perfect. */
  --duration:40s; --dir:normal; --shift:50%;
  position:relative; overflow:hidden; width:100%;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{
  display:flex; align-items:stretch; width:max-content; gap:1.25rem;
  animation:scrollX var(--duration) linear infinite;
  animation-direction:var(--dir);
  will-change:transform;
  backface-visibility:hidden;
}
@keyframes scrollX{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(var(--shift) * -1),0,0); }
}
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ============================ 6. SERVICES =============================== */
.services{ background:var(--bg); }
.services__grid{
  display:grid; gap:clamp(1rem,1.6vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
}

.service-card{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(1.6rem,2.4vw,2.1rem);
  border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--line);
  transition:translate var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  will-change:transform;
}
.service-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg,var(--brand-50),transparent 55%);
  opacity:0; transition:opacity var(--t-med);
}
/* Lift uses `translate`, not `transform`, so the JS 3D tilt can compose
   with it instead of overwriting it. */
.service-card:hover{
  translate:0 -6px;
  border-color:var(--brand-300);
  box-shadow:var(--shadow-lg);
}
.service-card:hover::before{ opacity:1; }

/* cursor-following glow */
.service-card__glow{
  position:absolute; z-index:-1; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(20,168,173,.20),transparent 65%);
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  opacity:0; transition:opacity var(--t-med); pointer-events:none;
}
.service-card:hover .service-card__glow{ opacity:1; }

.service-card__icon{
  width:56px; height:56px; display:grid; place-items:center; margin-bottom:1.25rem;
  border-radius:16px; color:var(--brand-700);
  background:linear-gradient(145deg,var(--brand-100),var(--brand-50));
  border:1px solid var(--brand-100);
  transition:transform var(--t-med), background-color var(--t-med), color var(--t-med);
}
.service-card__icon svg{ width:28px; height:28px; }
.service-card:hover .service-card__icon{
  transform:translateY(-3px) rotate(-6deg) scale(1.05);
  background:linear-gradient(145deg,var(--brand-600),var(--brand-400));
  color:#fff;
}
.service-card h3{ font-size:var(--fs-h3); margin-bottom:.6rem; }
.service-card p{ color:var(--ink-soft); font-size:.965rem; margin-bottom:1.1rem; }

.service-card__meta{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.35rem;
}
.service-card__meta li{
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  padding:.32rem .75rem; border-radius:var(--r-full);
  background:var(--bg-tint); color:var(--brand-700); border:1px solid var(--line);
}
.service-card__link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.92rem; font-weight:600; color:var(--brand-600);
}
.service-card__link span{ transition:transform var(--t-fast); }
.service-card__link:hover span{ transform:translateX(5px); }

/* ============================ 7. BEFORE / AFTER ========================= */
.results{ background:var(--bg-tint); }
.ba{
  display:grid; gap:clamp(1.5rem,3vw,2.75rem);
  grid-template-columns:1.35fr .65fr; align-items:center;
}
.ba__stage{ position:relative; }

.ba__compare{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  aspect-ratio:16/10; background:var(--brand-100);
  box-shadow:var(--shadow-lg); cursor:ew-resize;
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
}
.ba__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; -webkit-user-drag:none;
}
.ba__after-wrap{
  position:absolute; inset:0; overflow:hidden;
  width:var(--pos,50%);
  will-change:width;
}
.ba__after-wrap .ba__img{
  width:var(--stage-w,100%);
  max-width:none;
}

.ba__tag{
  position:absolute; top:1rem; z-index:3;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:var(--r-full);
  background:rgba(5,42,60,.72); color:#fff; backdrop-filter:blur(6px);
  pointer-events:none;
}
.ba__tag--before{ left:1rem; }
.ba__tag--after{ right:1rem; background:rgba(20,168,173,.9); }

.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:2px; margin-left:-1px; z-index:4;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(5,42,60,.12);
  pointer-events:none; will-change:left;
}
.ba__handle-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--brand-700);
  box-shadow:0 8px 24px -6px rgba(5,42,60,.45);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.ba__handle-grip svg{ width:24px; height:24px; }
.ba__compare:hover .ba__handle-grip{ transform:translate(-50%,-50%) scale(1.09); }
.ba__compare.is-dragging{ cursor:grabbing; }
.ba__compare.is-dragging .ba__handle-grip{ transform:translate(-50%,-50%) scale(.94); }
.ba__compare:focus-visible .ba__handle-grip{ box-shadow:0 0 0 4px var(--brand-400); }

.ba__case-title{ font-size:clamp(1.4rem,2.4vw,1.85rem); margin-bottom:.7rem; }
.ba__case-text{ color:var(--ink-soft); font-size:.98rem; margin-bottom:1.4rem; }
.ba__facts{ display:flex; gap:2rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.ba__facts dt{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); font-weight:600; }
.ba__facts dd{ font-weight:600; color:var(--brand-800); font-size:.98rem; }

.ba__thumbs{ display:flex; gap:.7rem; margin-bottom:1rem; flex-wrap:wrap; }
.ba__thumb{
  position:relative; width:78px; border-radius:var(--r-sm); overflow:hidden;
  border:2px solid transparent; background:#fff;
  transition:border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ba__thumb img{ width:100%; aspect-ratio:1; object-fit:cover; }
.ba__thumb span{
  display:block; font-size:.68rem; font-weight:600; padding:.3rem;
  color:var(--ink-muted); background:#fff;
}
.ba__thumb:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ba__thumb.is-active{ border-color:var(--brand-500); }
.ba__thumb.is-active span{ color:var(--brand-700); }

.ba__hint{ font-size:.82rem; color:var(--ink-muted); }

/* ============================ 8. WHY US ================================= */
.why__inner{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr .85fr; align-items:center;
}
.why__list{ margin-top:2.5rem; display:grid; gap:1.5rem; }
.why__list li{ display:flex; gap:1.1rem; align-items:flex-start; }
.why__num{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border-radius:13px; font-family:var(--font-display); font-weight:600; font-size:.95rem;
  background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100);
  transition:background-color var(--t-med), color var(--t-med), transform var(--t-med);
}
.why__list li:hover .why__num{
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400));
  color:#fff; transform:scale(1.07);
}
.why__list h3{ font-size:1.08rem; margin-bottom:.25rem; }
.why__list p{ color:var(--ink-soft); font-size:.95rem; }

.why__visual{ position:relative; }
.why__img{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  transition:transform .5s var(--ease-out);
}
.why__img img{ width:100%; background:var(--brand-100); }
.why__stat{
  position:absolute; bottom:-1.5rem; left:-1.5rem;
  background:#fff; padding:1.25rem 1.5rem; border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); max-width:15rem; border:1px solid var(--line);
}
.why__stat strong{
  display:block; font-family:var(--font-display); font-size:2.4rem; font-weight:600;
  color:var(--brand-600); line-height:1;
}
.why__stat span{ font-size:.85rem; color:var(--ink-soft); }

/* ============================ 9. PRICING ================================ */
.pricing{ background:var(--bg-tint); }
.pricing__grid{
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  align-items:stretch;
}
.price-card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.75rem,2.5vw,2.25rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:translate var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.price-card:hover{ translate:0 -6px; box-shadow:var(--shadow-lg); border-color:var(--brand-300); }

.price-card--featured{
  background:linear-gradient(165deg,var(--brand-900),var(--brand-800) 60%,var(--brand-700));
  border-color:transparent; color:#fff;
  box-shadow:var(--shadow-lg);
}
.price-card--featured::before{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg); pointer-events:none;
  background:radial-gradient(ellipse at 80% 0%,rgba(63,195,192,.35),transparent 60%);
}
.price-card--featured h3,
.price-card--featured .price-card__price strong{ color:#fff; }
.price-card--featured .price-card__desc,
.price-card--featured .price-card__features li{ color:var(--brand-100); }
.price-card--featured .price-card__price .cur,
.price-card--featured .price-card__price .per{ color:var(--brand-300); }
.price-card--featured .price-card__features li::before{
  background:var(--brand-400); color:var(--brand-900);
}

.price-card__ribbon{
  position:absolute; top:1.25rem; right:1.25rem;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:var(--r-full);
  background:var(--accent); color:#3c2504;
}
.price-card__name{ font-size:1.3rem; margin-bottom:.4rem; }
.price-card__desc{ font-size:.92rem; color:var(--ink-soft); margin-bottom:1.4rem; min-height:2.6em; }
.price-card__price{ display:flex; align-items:baseline; gap:.15rem; margin-bottom:1.5rem; }
.price-card__price .cur{ font-size:1.25rem; font-weight:600; color:var(--ink-muted); align-self:flex-start; margin-top:.4rem; }
.price-card__price strong{
  font-family:var(--font-display); font-size:3.1rem; font-weight:600;
  color:var(--brand-800); line-height:1; letter-spacing:-.03em;
}
.price-card__price .per{ font-size:.92rem; color:var(--ink-muted); margin-left:.2rem; }

.price-card__features{ display:grid; gap:.7rem; margin-bottom:1.85rem; flex:1; }
.price-card__features li{
  position:relative; padding-left:1.9rem; font-size:.93rem; color:var(--ink-soft);
}
.price-card__features li::before{
  content:"✓"; position:absolute; left:0; top:.12rem;
  width:20px; height:20px; display:grid; place-items:center; border-radius:50%;
  background:var(--brand-100); color:var(--brand-700); font-size:.7rem; font-weight:800;
}
.price-card--featured .btn--primary{
  background:#fff; color:var(--brand-800); box-shadow:none;
}
.price-card--featured .btn--primary:hover{ box-shadow:0 16px 36px -18px rgba(255,255,255,.7); }

.pricing__note{
  text-align:center; margin-top:2.5rem; font-size:.9rem; color:var(--ink-muted);
}

/* ============================ 10. REVIEWS =============================== */
.reviews{ background:var(--bg); overflow:hidden; }
.marquee--rows{ padding-block:.65rem; }
.marquee--rows .marquee__track{ gap:1.25rem; }
.marquee--reverse{ --dir:reverse; }

.review{
  width:min(84vw,400px); flex:none;
  padding:1.65rem 1.75rem; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  display:flex; flex-direction:column;
}
.review:hover{
  transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--brand-300);
}
.review__stars{ color:var(--accent); letter-spacing:.14em; font-size:.92rem; margin-bottom:.85rem; }
.review blockquote{ font-size:.965rem; color:var(--ink-soft); line-height:1.66; flex:1; }
.review figcaption{ display:flex; align-items:center; gap:.75rem; margin-top:1.25rem; }
.review__av{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:.82rem; font-weight:700; color:#fff;
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400));
}
.review figcaption strong{ display:block; font-size:.92rem; color:var(--brand-900); }
.review figcaption small{ font-size:.8rem; color:var(--ink-muted); }

/* ============================ 11. FAQ ================================== */
.faq{ background:var(--bg-tint); }
.faq__inner{
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:.85fr 1.15fr; align-items:start;
}
.faq__inner .section__head{ margin-bottom:0; position:sticky; top:calc(var(--header-h) + 2rem); }

.faq__list{ display:grid; gap:.75rem; }
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq__item[open]{ border-color:var(--brand-300); box-shadow:var(--shadow-md); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem; cursor:pointer; list-style:none;
  font-weight:600; font-size:1rem; color:var(--brand-900);
  transition:color var(--t-fast), background-color var(--t-fast);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--brand-600); background:var(--brand-50); }

.faq__icon{
  position:relative; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--brand-50); border:1px solid var(--brand-100);
  transition:background-color var(--t-fast), transform var(--t-med);
}
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--brand-600);
  transform:translate(-50%,-50%); border-radius:2px; transition:transform var(--t-med);
}
.faq__icon::before{ width:11px; height:2px; }
.faq__icon::after{ width:2px; height:11px; }
.faq__item[open] .faq__icon{ background:var(--brand-500); transform:rotate(180deg); }
.faq__item[open] .faq__icon::before{ background:#fff; }
.faq__item[open] .faq__icon::after{ transform:translate(-50%,-50%) scaleY(0); }

.faq__body{
  overflow:hidden;
  padding:0 1.35rem;
  max-height:0;
  transition:max-height .45s var(--ease), padding .45s var(--ease);
}
/* Fallback so panels still open without JS; main.js sets the exact px height. */
.faq__item[open] .faq__body{ padding:0 1.35rem 1.35rem; max-height:32rem; }
html:not(.js) .faq__body{ max-height:none; transition:none; }
.faq__body p{ color:var(--ink-soft); font-size:.95rem; }

/* ============================ 12. MAP ================================== */
.map-strip{ position:relative; background:var(--brand-900); }
.map-strip__frame{
  height:clamp(340px,46vh,520px); width:100%;
  filter:grayscale(.35) contrast(1.05);
  transition:filter var(--t-med);
}
.map-strip:hover .map-strip__frame{ filter:grayscale(0) contrast(1); }
.map-strip__frame iframe{ width:100%; height:100%; border:0; }

/* This card is both vertically centred AND reveal-animated, so the two
   transforms are composed explicitly rather than overwriting each other. */
.map-strip__card{
  position:absolute; top:50%;
  left:max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));
  width:min(94vw,340px); padding:1.75rem;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.8);
  transform:translateY(-50%) translateY(26px);
}
.map-strip__card.is-visible{ transform:translateY(-50%); }
.map-strip__card h3{ font-size:1.25rem; margin-bottom:.5rem; }
.map-strip__card > p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:1.15rem; }
.map-strip__hours{ display:grid; gap:.5rem; margin-bottom:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.map-strip__hours li{ display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; }
.map-strip__hours span{ color:var(--ink-muted); }
.map-strip__hours strong{ color:var(--brand-800); font-weight:600; }

/* ============================ 13. CONTACT ============================== */
.contact{ background:var(--bg); }
.contact__inner{
  display:grid; gap:clamp(2.25rem,4.5vw,4rem);
  grid-template-columns:.9fr 1.1fr; align-items:start;
}
.contact__channels{ display:grid; gap:1.1rem; margin-top:2.25rem; }
.contact__channels li{ display:flex; align-items:center; gap:.95rem; }
.contact__ico{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:14px; background:var(--brand-50); color:var(--brand-600);
  border:1px solid var(--brand-100);
  transition:transform var(--t-med), background-color var(--t-med), color var(--t-med);
}
.contact__ico svg{ width:21px; height:21px; }
.contact__channels li:hover .contact__ico{
  transform:translateY(-3px);
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400)); color:#fff;
}
.contact__channels small{ display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); font-weight:600; }
.contact__channels a{ font-weight:600; color:var(--brand-900); transition:color var(--t-fast); }
.contact__channels a:hover{ color:var(--brand-500); }

.contact__socials{ display:flex; gap:.65rem; margin-top:2rem; }
.contact__socials a{
  width:44px; height:44px; display:grid; place-items:center; border-radius:13px;
  background:var(--bg-tint); color:var(--brand-700); border:1px solid var(--line);
  transition:transform var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.contact__socials a svg{ width:20px; height:20px; }
.contact__socials a:hover{
  transform:translateY(-4px);
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400)); color:#fff;
  border-color:transparent;
}

/* Form */
.contact__form-wrap{ position:relative; }
.cform{
  position:relative; padding:clamp(1.6rem,3vw,2.4rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
}
.cform::before{
  content:""; position:absolute; inset:-1px; border-radius:var(--r-xl); z-index:-1;
  background:linear-gradient(140deg,var(--brand-300),transparent 50%);
  opacity:.6;
}
.cform__title{ font-size:1.45rem; margin-bottom:.4rem; }
.cform__sub{ font-size:.92rem; color:var(--ink-soft); margin-bottom:1.6rem; }

.field{ margin-bottom:1.15rem; }
.field label{
  display:block; font-size:.85rem; font-weight:600;
  color:var(--brand-900); margin-bottom:.45rem;
}
.field label small{ font-weight:500; color:var(--ink-muted); }

.field input,
.field textarea,
.select-wrap select{
  width:100%; padding:.85rem 1rem; font-size:.95rem;
  background:var(--bg-tint); border:1.5px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.field textarea{ resize:vertical; min-height:88px; }
.field input::placeholder,.field textarea::placeholder{ color:#9db3bd; }
.field input:focus,
.field textarea:focus,
.select-wrap select:focus{
  outline:none; background:#fff;
  border-color:var(--brand-400);
  box-shadow:0 0 0 4px rgba(63,195,192,.18);
}

.select-wrap{ position:relative; }
.select-wrap select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.8rem;
}
.select-wrap select:invalid{ color:#9db3bd; }
.select-wrap__arrow{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--brand-600); pointer-events:none;
  transition:transform var(--t-fast);
}
.select-wrap:focus-within .select-wrap__arrow{ transform:translateY(-50%) rotate(180deg); }

.field__error{
  display:none; margin-top:.4rem; font-size:.8rem; font-weight:500; color:#d64545;
}
.field.has-error input,
.field.has-error select{ border-color:#e58b8b; background:#fdf5f5; }
.field.has-error .field__error{ display:block; }

.cform__preview{
  padding:1rem 1.15rem; border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--brand-50),#fff);
  border:1px dashed var(--brand-300); margin-bottom:1.35rem;
}
.cform__preview-label{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-600); margin-bottom:.35rem;
}
.cform__preview p{ font-size:.88rem; color:var(--ink-soft); line-height:1.55; white-space:pre-line; }
.cform__alt{ text-align:center; font-size:.85rem; color:var(--ink-muted); margin-top:1rem; }
.cform__alt a{ color:var(--brand-600); font-weight:600; }
.cform__alt a:hover{ text-decoration:underline; }

/* ============================ 14. FOOTER =============================== */
.footer{
  background:var(--brand-900); color:var(--brand-100);
  padding-top:clamp(3.5rem,7vw,5.5rem);
  position:relative; overflow:hidden;
}
.footer::before{
  content:""; position:absolute; top:-40%; right:-10%; width:50vw; aspect-ratio:1;
  background:radial-gradient(circle,rgba(63,195,192,.16),transparent 65%);
  pointer-events:none;
}
.footer__inner{
  position:relative;
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  padding-bottom:3rem;
}
.footer__brand p{ font-size:.92rem; color:rgba(211,242,238,.72); margin-top:1rem; max-width:24rem; }
.footer__brand .contact__socials a{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:var(--brand-100);
}
.footer__brand .contact__socials a:hover{ color:#fff; }

.footer__col h4{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--brand-300); margin-bottom:1.1rem; font-family:var(--font-body); font-weight:700;
}
.footer__col ul{ display:grid; gap:.6rem; }
.footer__col a{ font-size:.92rem; color:rgba(211,242,238,.78); transition:color var(--t-fast), transform var(--t-fast); display:inline-block; }
.footer__col a:hover{ color:#fff; transform:translateX(4px); }
.footer__hours li{ display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; color:rgba(211,242,238,.72); }
.footer__hours strong{ color:#fff; font-weight:600; }
.footer__phone{
  display:inline-block; margin-top:1.2rem; font-family:var(--font-display);
  font-size:1.15rem; color:#fff; font-weight:600;
}
.footer__phone:hover{ color:var(--brand-300); }

.footer__bottom{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem; color:rgba(211,242,238,.6);
}
.footer__bottom ul{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer__bottom a:hover{ color:#fff; }

/* ============================ FLOATING WHATSAPP ======================== */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:100; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem; border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--whatsapp-dark),var(--whatsapp)); color:#fff;
  font-weight:600; font-size:.9rem;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.75);
  transform:translateY(120%); opacity:0;
  transition:transform .5s var(--ease-out), opacity .5s var(--ease-out), box-shadow var(--t-fast);
}
.wa-float.is-visible{ transform:translateY(0); opacity:1; }
.wa-float:hover{ box-shadow:0 20px 44px -12px rgba(37,211,102,.85); }
.wa-float svg{ width:22px; height:22px; flex:none; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--whatsapp); animation:ripple 2.6s ease-out infinite;
}
@keyframes ripple{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.22); opacity:0; }
  100%{ transform:scale(1.22); opacity:0; }
}

/* ============================ 15. RESPONSIVE =========================== */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; text-align:left; }
  .hero__visual{ max-width:520px; margin-inline:auto; }
  .why__inner,
  .contact__inner,
  .faq__inner{ grid-template-columns:1fr; }
  .faq__inner .section__head{ position:static; }
  .ba{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  :root{ --header-h:66px; }

  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    padding:1rem var(--gutter) 1.5rem;
    clip-path:inset(0 0 100% 0);
    opacity:0; pointer-events:none;
    transition:clip-path .45s var(--ease), opacity .3s ease;
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav__link{ padding:.85rem .5rem; font-size:1.02rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__link::after{ display:none; }
  .nav__link.is-active{ color:var(--brand-600); }

  .burger{ display:flex; }
  .header__phone{ display:none; }

  .why__stat{ left:0; bottom:-1rem; }
  .map-strip__card{
    position:static; width:auto;
    margin:-3rem var(--gutter) 0; border-radius:var(--r-lg);
    transform:translateY(26px);
  }
  .map-strip__card.is-visible{ transform:none; }
  .map-strip{ padding-bottom:2.5rem; }
}

@media (max-width:640px){
  .hero__badge--top{ left:-2%; top:5%; padding:.6rem .75rem; }
  .hero__badge--bottom{ right:-2%; bottom:6%; padding:.6rem .75rem; }
  .hero__badge strong{ font-size:.8rem; }
  .hero__badge small{ font-size:.7rem; }
  .hero__cta .btn{ width:100%; }
  .hero__trust{ gap:1.25rem 2rem; }
  .hero__trust strong{ font-size:1.5rem; }

  .ba__compare{ aspect-ratio:4/3; }
  .ba__handle-grip{ width:44px; height:44px; }
  .review{ width:min(86vw,330px); padding:1.35rem 1.4rem; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }

  .wa-float span{ display:none; }
  .wa-float{ padding:1rem; }
}

@media (max-width:420px){
  .btn--lg{ padding:.95rem 1.4rem; font-size:.95rem; }
  .price-card__price strong{ font-size:2.6rem; }
}

/* ============================ 16. MOTION PREFS ========================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .marquee__track{ animation:none !important; }
  .wa-float{ transform:none; opacity:1; }
}

/* Sample project notice and readable body copy */
.sample-notice { padding: .55rem 1rem; text-align: center; background: #e9f4f4; color: #174254; font-size: .78rem; line-height: 1.4; }
.section__sub, .service-card p, .faq__body p { line-height: 1.7; }
@media (max-width: 480px) {
  .header__inner { gap: .75rem; }
  .header__actions > .btn { display: none; }
  .header__actions, .burger { flex-shrink: 0; }
}