/* ==========================================================================
   SITIO PIOLA — Portfolio one-page (tema morado oscuro)
   Base: layout del BRUTA (Diogo Coura), adaptado para Sitio Piola. Referencia de
   estructura original: jensbosman.nl (tipografía gigante, grid masonry,
   carteles repetidos). Todo lo marcado "A CONFIRMAR" o "EN CAMINO" hay
   que reemplazarlo con material real (capturas/links de trabajos, etc).
   ========================================================================== */

:root{
  --bg:#160b26;
  --bg-2:#231239;
  --fg:#f6f2fb;
  --fg-dim:#b3a0d1;
  --fg-faint:#6d5a8c;
  --line:#3c2657;
  --accent:#c6ff3d;       /* verde neón — cambiá acá si querés otro color */
  --accent-dark:#2a3a12;  /* usado en el degradé del menú */
  --accent-2:#ff3fa4;     /* rosa chicle — pop secundario, con moderación */
  --radius:18px;
  --display: 'Passion One', Impact, 'Arial Narrow Bold', sans-serif; /* fuente de los títulos del sitio */
  --logo-font: 'Bungee', var(--display); /* fuente única del logotipo, ver .navbar-logo */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
  --nav-h: 84px;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:0; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
section{ position:relative; scroll-margin-top:var(--nav-h); }
#inicio, #nosotros, #trabajos, #detalles, #contacto{ scroll-margin-top:var(--nav-h); }
img,canvas,video,iframe{ display:block; max-width:100%; }

::selection{ background:var(--fg); color:var(--bg); }

a, button, .project-card, .menu-item{ cursor:pointer; }

/* ---------------------------------------------------------------------- */
/* Navbar                                                                  */
/* ---------------------------------------------------------------------- */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,48px);
  background:linear-gradient(180deg, rgba(22,11,38,.92) 0%, rgba(22,11,38,.6) 65%, rgba(22,11,38,0) 100%);
}
.navbar-logo{
  font-family:var(--logo-font); font-weight:400; font-size:21px; letter-spacing:.02em;
  display:flex; align-items:center; gap:9px;
}
.navbar-logo span{ color:var(--fg); }
.navbar-logo span em{ font-style:normal; color:var(--accent); }
.icon-glasses{ width:1.15em; height:auto; flex:none; color:var(--accent); }
.navbar-role{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--fg-dim);
}
.navbar-menu-btn{
  border:1px solid var(--fg); border-radius:100px;
  padding:10px 24px; font-size:11px; font-weight:700; letter-spacing:.14em;
  white-space:nowrap;
}

/* ---------------------------------------------------------------------- */
/* Scrollspy pill                                                          */
/* ---------------------------------------------------------------------- */
.scrollspy-pill{
  position:fixed; left:clamp(20px,4vw,48px); top:50%; transform:translateY(-50%);
  z-index:400;
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:100px;
  padding:8px 16px;
  font-size:10px; font-weight:700; letter-spacing:.14em;
  background:rgba(22,11,38,.7); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s ease;
}
.scrollspy-pill.is-visible{ opacity:1; }
@media (max-width: 900px){ .scrollspy-pill{ display:none; } }

/* ---------------------------------------------------------------------- */
/* Menu overlay                                                            */
/* ---------------------------------------------------------------------- */
.menu-overlay{
  position:fixed; inset:0; z-index:800;
  background:var(--bg);
  clip-path:circle(0px at calc(100% - 48px) 42px);
  transition:clip-path .7s var(--ease);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(24px,6vw,80px);
  pointer-events:none;
}
.menu-overlay.is-open{ clip-path:circle(150% at calc(100% - 48px) 42px); pointer-events:auto; }
.menu-close{
  position:absolute; top:26px; right:clamp(20px,4vw,48px);
  border:1px solid var(--fg); border-radius:100px; padding:10px 24px;
  font-size:11px; font-weight:700; letter-spacing:.14em;
  white-space:nowrap;
}
.menu-list{ display:flex; flex-direction:column; }
.menu-item{
  position:relative; padding:.5vw 0; border-bottom:1px solid var(--line);
  overflow:hidden;
}
.menu-item:first-child{ border-top:1px solid var(--line); }
.menu-item-text{
  position:relative; display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(46px,9.5vw,120px); line-height:1.05; text-transform:uppercase;
  color:var(--fg);
  background-image:linear-gradient(100deg, var(--accent) 0%, var(--accent-dark) 35%, var(--bg) 70%, var(--accent) 100%);
  background-size:300% 100%;
  background-position:0% 0%;
  -webkit-background-clip:text; background-clip:text;
  transition:transform .5s var(--ease), color .3s ease;
}
.menu-item:hover .menu-item-text{
  transform:translateX(14px);
  color:transparent;
  animation:menuTextSweep 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .menu-item:hover .menu-item-text{ animation:none; background-position:35% 0%; }
}
@keyframes menuTextSweep{
  from{ background-position:0% 0%; }
  to{ background-position:300% 0%; }
}
/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.hero{
  position:relative; height:100svh; min-height:640px;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-bg{ position:absolute; inset:0; z-index:0; background:var(--bg); overflow:hidden; }
.hero-bg-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-media{
  position:absolute; inset:0; z-index:0;
  animation:heroFadeIn 1.1s var(--ease) both;
}
@keyframes heroFadeIn{
  from{ opacity:0; transform:scale(1.03); }
  to{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){ .hero-media{ animation:none; } }

.hero-content{
  position:relative; z-index:2;
  padding:calc(var(--nav-h) + 30px) clamp(20px,6vw,90px) 0;
  max-width:1180px;
  margin:0 auto; /* centraliza o bloco na tela — ver nota no chat sobre o
                    porquê disso ter um limite físico sem mudar o
                    alinhamento à esquerda de cada linha do texto. */
  /* Desloca o bloco um pouco pra esquerda e pra cima do centro matemático
     (pedido do cliente, referência: monitor 4K). O eixo X usa uma fração
     do espaço vazio que sobra dos dois lados quando a tela é bem mais larga
     que os 1180px do bloco — em notebook/desktop comum (pouco espaço
     sobrando) o deslocamento fica sutil, e em monitores ultrawide/4K
     (muito espaço sobrando) fica bem mais perceptível, sem nunca chegar a
     encostar no pill "INICIO" da esquerda. Usa transform (não muda o
     max-width/padding) pra não afetar o wrap do título nem o alinhamento
     à esquerda de cada linha. */
  transform:translate(calc(-1 * clamp(0px, calc(17.5vw - 206.5px), 480px)), clamp(-34px,-2.5vh,-12px));
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--fg-dim);
  margin-bottom:22px; text-transform:uppercase;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.hero-title{
  margin:0; font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(40px,8.6vw,118px); line-height:.98;
}
.hero-title em{ font-style:normal; color:var(--accent); }
.hero-sub{
  margin:26px 0 0; max-width:560px; font-size:clamp(15px,1.6vw,19px);
  line-height:1.55; color:var(--fg-dim);
}
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.available-badge{
  position:absolute; z-index:2; top:50%; right:clamp(20px,6vw,90px); transform:translateY(-50%);
  width:clamp(112px,11vw,150px); height:clamp(112px,11vw,150px);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.available-badge-ring{
  position:absolute; inset:0; border:1px solid rgba(246,242,251,.35); border-radius:50%;
  animation:spin 14s linear infinite;
}
.available-badge-text{
  font-size:15px; font-weight:800; letter-spacing:.03em; line-height:1.25; text-align:center;
  padding:0 8px;
}
.available-badge-text .dot{ color:var(--accent); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width: 900px){ .available-badge{ display:none; } }

.hero-scroll-hint{
  position:absolute; z-index:2; left:clamp(20px,4vw,40px); bottom:clamp(16px,3vw,28px);
  font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--fg-faint);
  writing-mode:vertical-rl;
}

/* ---------------------------------------------------------------------- */
/* WhatsApp flotante                                                       */
/* ---------------------------------------------------------------------- */
.wa-float{
  position:fixed; z-index:900; /* por encima del menu-overlay (z-index:800) para
                                    que siga visible y clickeable con el menú abierto */
  right:clamp(16px,4vw,32px); bottom:clamp(16px,4vw,32px);
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--bg);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition:transform .2s var(--ease), box-shadow .2s ease;
}
.wa-float-icon{ font-size:26px; line-height:1; transform:translateY(-1px); pointer-events:none; }
.wa-float-ring{
  position:absolute; inset:-7px; border-radius:50%;
  border:1px solid var(--accent);
  opacity:0; animation:waFloatPulse 2.8s ease-out infinite; pointer-events:none;
}
@keyframes waFloatPulse{
  0%{ opacity:.55; transform:scale(.92); }
  100%{ opacity:0; transform:scale(1.35); }
}
.wa-float:hover{
  transform:scale(1.08);
  box-shadow:0 10px 32px rgba(0,0,0,.45);
}
.wa-float:active{
  transform:scale(.9);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .1s ease, box-shadow .1s ease;
}
@media (prefers-reduced-motion: reduce){
  .wa-float-ring{ animation:none; display:none; }
}
@media (max-width:520px){
  .wa-float{ width:52px; height:52px; }
  .wa-float-icon{ font-size:22px; }
}

/* ---------------------------------------------------------------------- */
/* Manifesto / About                                                       */
/* ---------------------------------------------------------------------- */
.manifesto{
  padding:clamp(90px,14vw,180px) clamp(20px,6vw,90px);
  display:flex; flex-direction:column; align-items:center; gap:34px; text-align:center;
}
.manifesto-text{
  margin:0; max-width:1180px;
  font-family:var(--display); font-weight:900; font-size:clamp(28px,5vw,64px); line-height:1.08;
  text-transform:uppercase;
}
.manifesto-text em{ font-style:normal; color:var(--accent); }
.pill-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--fg); border-radius:100px; padding:14px 34px;
  font-size:12px; font-weight:800; letter-spacing:.14em;
  transition:background .3s ease, color .3s ease;
}
.pill-btn:hover{ background:var(--fg); color:var(--bg); }
.pill-btn.is-solid{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.pill-btn.is-solid:hover{ background:var(--fg); border-color:var(--fg); color:var(--bg); }

/* ---------------------------------------------------------------------- */
/* Section header + marquee title                                         */
/* ---------------------------------------------------------------------- */
.section-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,6vw,90px);
}
.section-tag{ display:flex; align-items:center; gap:10px; }
.section-tag-circle{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:900; font-size:13px;
}
.section-tag-circle .icon-glasses{ width:16px; }
.pill{
  border:1px solid var(--line); border-radius:100px; padding:7px 16px;
  font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--fg-dim);
}
.all-link{ font-size:12px; font-weight:700; letter-spacing:.06em; }
.all-link:hover{ color:var(--fg-dim); }

.marquee-title{ overflow:hidden; padding:8px 0 clamp(30px,5vw,60px); }
.marquee-track{
  display:flex; gap:.35em; white-space:nowrap; width:max-content;
  font-family:var(--display); font-weight:900; font-size:clamp(60px,13vw,190px); line-height:1;
  text-transform:uppercase;
  animation:marquee 22s linear infinite;
  padding-left:clamp(20px,6vw,90px);
}
.marquee-track .outline{ -webkit-text-stroke:1.5px var(--fg); color:transparent; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------------- */
/* "Em breve" — vagas de projeto ainda sem material                       */
/* ---------------------------------------------------------------------- */
.coming-soon{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; min-height:clamp(200px,26vw,340px);
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:40px 24px; background:var(--bg-2);
}
.coming-soon-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); animation:pulse 1.6s ease-in-out infinite; }
.coming-soon p{
  margin:0; max-width:340px; font-size:12px; font-weight:700; letter-spacing:.05em;
  color:var(--fg-dim); text-transform:uppercase;
}

/* Tarjeta "en camino" con el nombre del cliente ya confirmado, sin sitio/
   captura todavía (ver PLACEHOLDER_PROJECTS en script.js). */
.placeholder-card{
  border-style:dashed; background:var(--bg-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; padding:24px;
}
.placeholder-card-name{
  font-family:var(--display); font-weight:900; font-size:clamp(16px,1.8vw,22px);
  text-transform:uppercase; color:var(--fg-dim); line-height:1.2; max-width:230px;
}
.placeholder-card-tag{
  font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--fg-faint); text-transform:uppercase;
}

/* ---------------------------------------------------------------------- */
/* Projects grid                                                          */
/* ---------------------------------------------------------------------- */
.projects{ padding-top:calc(var(--nav-h) + clamp(16px,3vw,32px)); padding-bottom:clamp(60px,10vw,120px); }
.projects-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,26px);
  padding:0 clamp(20px,6vw,90px);
}
.project-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5; background:var(--bg-2); border:1px solid var(--line);
}
.project-card:nth-child(3n+2){ margin-top:clamp(30px,6vw,80px); }
.project-card:nth-child(3n+3){ margin-top:clamp(14px,3vw,40px); }
.project-card.is-featured{ border-radius:28px; }
.project-card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform .6s var(--ease);
}
.project-card:hover .project-card-img{ transform:scale(1.04); }
.project-card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%);
}
.project-card-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:9px; font-weight:800; letter-spacing:.1em;
  padding:5px 10px; border-radius:100px; background:rgba(17,17,17,.55);
  border:1px solid rgba(255,255,255,.25); color:#f5f5f2;
}
.project-card-meta{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#f5f5f2;
  display:flex; flex-direction:column; gap:2px;
}
.project-card-client{ font-family:var(--display); font-weight:900; font-size:clamp(18px,2vw,24px); text-transform:uppercase; }
.project-card-sub{ font-size:11px; font-weight:600; letter-spacing:.08em; color:rgba(245,245,242,.75); }
.project-card-marquee{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; overflow:hidden;
  opacity:0; background:rgba(17,17,17,.45); transition:opacity .3s ease;
}
.project-card:hover .project-card-marquee{ opacity:1; }
.project-card-marquee-track{
  display:flex; gap:2em; white-space:nowrap; width:max-content; color:#f5f5f2;
  font-family:var(--display); font-weight:900; font-size:clamp(22px,3vw,34px); text-transform:uppercase;
  animation:marquee 9s linear infinite;
}

@media (max-width:1100px){
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
  .project-card:nth-child(3n+3){ margin-top:0; }
}
@media (max-width:640px){
  .projects-grid{ grid-template-columns:1fr; }
  .project-card:nth-child(3n+2), .project-card:nth-child(3n+3){ margin-top:0; }
}

/* ---------------------------------------------------------------------- */
/* Project detail (fullscreen)                                            */
/* ---------------------------------------------------------------------- */
.project-detail{
  position:fixed; inset:0; z-index:900;
  visibility:hidden; opacity:0;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
  overflow-y:auto;
}
.project-detail.is-open{ visibility:visible; opacity:1; transition:opacity .5s var(--ease); }
.detail-scrim{ position:fixed; inset:0; background:var(--bg); z-index:0; }
.detail-inner{ position:relative; z-index:1; min-height:100%; padding-bottom:80px; }
.detail-close{
  position:fixed; top:26px; right:clamp(20px,4vw,48px); z-index:5;
  border:1px solid var(--fg); border-radius:100px; padding:10px 20px;
  font-size:11px; font-weight:700; letter-spacing:.1em; background:var(--bg);
}
.detail-player{
  position:relative; margin-top:0; min-height:clamp(360px,64svh,720px);
  background:var(--bg-2); overflow:hidden;
}
.detail-player-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.detail-player-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:16px;
  padding:20px clamp(20px,4vw,48px);
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}
.detail-visit-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.6); border-radius:100px; padding:10px 22px;
  font-size:11px; font-weight:800; letter-spacing:.1em; color:#f5f5f2;
  background:rgba(17,17,17,.35); backdrop-filter:blur(4px);
}
.detail-visit-btn:hover{ background:var(--accent); border-color:var(--accent); }
.detail-player-tag{
  position:absolute; top:20px; left:clamp(20px,4vw,48px); z-index:2;
  font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:6px 12px; border-radius:100px; background:rgba(17,17,17,.55);
  border:1px solid rgba(255,255,255,.25); color:#f5f5f2;
}
.detail-info{
  display:grid; grid-template-columns:1fr 1fr; gap:0 40px;
  padding:40px clamp(20px,6vw,90px); border-bottom:1px solid var(--line);
}
.detail-info-row{
  display:flex; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.detail-info-row span{ color:var(--fg-dim); }
.detail-info-row a{ color:var(--accent); font-weight:700; }
.detail-stills{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  padding:2px 0;
}
.detail-still{ aspect-ratio:3/2; background:var(--bg-2); object-fit:cover; width:100%; height:100%; }
.detail-more{ padding:clamp(60px,8vw,100px) clamp(20px,6vw,90px) 0; }
.detail-more-header{ font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--fg-dim); margin-bottom:20px; }
.detail-more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.detail-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin:clamp(50px,7vw,80px) clamp(20px,6vw,90px) 0; padding:28px clamp(20px,4vw,36px);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
}
.detail-cta-text{ font-size:15px; color:var(--fg-dim); max-width:420px; }
@media (max-width:900px){
  .detail-info{ grid-template-columns:1fr; }
  .detail-stills{ grid-template-columns:1fr; }
  .detail-more-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------- */
/* Detalhes de interface (strip)                                          */
/* ---------------------------------------------------------------------- */
.stills{ padding:calc(var(--nav-h) + clamp(16px,3vw,32px)) 0 clamp(60px,10vw,120px); }
.stills-title{
  font-family:var(--display); font-weight:900; font-size:clamp(34px,6vw,80px); text-transform:uppercase;
  margin:0 0 30px; padding:0 clamp(20px,6vw,90px);
}
.stills-strip{
  display:flex; gap:14px; overflow-x:auto; padding:0 clamp(20px,6vw,90px) 10px;
  scrollbar-width:none;
}
.stills-strip::-webkit-scrollbar{ display:none; }
.still-item{
  flex:0 0 auto; width:clamp(160px,20vw,260px); border-radius:10px; background:var(--bg-2);
  border:1px solid var(--line);
}
.still-item:nth-child(odd){ height:clamp(220px,26vw,340px); align-self:flex-start; }
.still-item:nth-child(even){ height:clamp(180px,22vw,280px); align-self:center; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.footer{ padding:calc(var(--nav-h) + clamp(16px,3vw,32px)) clamp(20px,6vw,90px) 30px; }
.footer-divider{ height:1px; background:var(--line); margin-bottom:clamp(30px,5vw,54px); }
.footer-nav{
  display:flex; flex-wrap:wrap; gap:.4em 1.2em; margin-bottom:clamp(40px,6vw,70px);
}
.footer-nav a{
  font-family:var(--display); font-weight:900; font-size:clamp(32px,6vw,90px); text-transform:uppercase; line-height:1;
}
.footer-nav a:hover{ color:var(--fg-dim); }
.footer-whatsapp{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,44px); margin-bottom:50px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
}
.footer-whatsapp-text{ display:flex; flex-direction:column; gap:6px; }
.footer-whatsapp-title{ font-family:var(--display); font-weight:900; font-size:clamp(24px,3.4vw,36px); text-transform:uppercase; }
.footer-whatsapp-sub{ font-size:14px; color:var(--fg-dim); }
.footer-whatsapp-sub strong{ color:var(--fg); }
.social-icon{ width:15px; height:15px; flex:none; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  font-size:11px; color:var(--fg-faint); letter-spacing:.04em;
  border-top:1px solid var(--line); padding-top:20px;
}
.footer-legal-link{ color:var(--fg-faint); text-decoration:underline; text-underline-offset:2px; }
.footer-legal-link:hover{ color:var(--fg-dim); }

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll utility                                               */
/* ---------------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:translateY(0); }