/* =========================================================
   style.css — Dale Like Studio
   Estilos específicos da página. Usa os tokens e utilitários
   definidos em dl.css — evite repetir valores aqui.
   ========================================================= */

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: var(--sp-5);
  transition: background var(--t-fast), padding var(--t-fast), box-shadow var(--t-fast);
}
.site-header.is-scrolled{
  background: rgba(244,239,233,.86);
  backdrop-filter: blur(10px);
  padding-block: var(--sp-3);
  box-shadow: 0px 7px 17px rgba(58, 54, 54, .08);
}
.site-logo{ display: inline-flex; }
.site-logo img{height: 50px;width: auto;}
.site-logo--footer img{ height: 34px; }

@media (max-width: 860px){
  .site-logo img{ height: 50px; }
}

.nav-links{ gap: var(--sp-6); }
.nav-links a{
  font-size: .85rem;
  font-weight: 600;
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--antracita);
  transition: width var(--t-fast);
}
.nav-links a:hover::after{ width: 100%; }

.lang-toggle{ display: flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; }
.lang-toggle button{ font-size: inherit; font-weight: inherit; letter-spacing: inherit; padding: 4px 2px; opacity: .55; transition: opacity var(--t-fast), color var(--t-fast); }
.lang-toggle button:hover{ opacity: 1; }
.lang-toggle button.active{ color: var(--bubblegum); opacity: 1; }

/* Imagens ainda não enviadas: decorativas somem, fotos deixam só o bloco de cor */
img.is-missing[aria-hidden="true"]{ display: none; }
img.is-missing{ visibility: hidden; }
.work-card{ background: rgba(15,61,57,.12); }

.nav-toggle{ width: 28px; height: 20px; position: relative; }
.nav-toggle span{ position: absolute; left: 0; right: 0; height: 2px; background: var(--antracita); border-radius: 2px; }
.nav-toggle span:nth-child(1){ top: 0; }
.nav-toggle span:nth-child(2){ top: 9px; width: 70%; }
.nav-toggle span:nth-child(3){ top: 18px; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--perla);
  padding-top: var(--sp-9);
}
@media (min-width: 861px){
  .hero{ padding-top: 72px; padding-bottom: 20px; }
  .hero__content .mt-3{ margin-top: clamp(8px, 1.6vh, 16px); }
  .hero__content .mt-4{ margin-top: clamp(14px, 2.6vh, 28px); }
  .hero__sub{ margin-top: clamp(10px, 2vh, 20px); }
}
.hero__wave{
  position: absolute;
  top: 0;
  right: 8%;
  /* acompanha a altura do hero e encolhe com a largura: nunca é cortada */
  height: min(100%, 52vw);
  width: auto;
  max-width: none;
  z-index: 1;
  opacity: .95;
  top: 0;
  animation: wave-draw 2.2s cubic-bezier(.65,0,.25,1) .2s both;
}
@keyframes wave-draw{
  from{ clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); opacity:.4; }
  to{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity:.95; }
}
@media (prefers-reduced-motion: reduce){ .hero__wave{ animation:none; } }
.hero__dot{
  position: absolute;
  bottom: -45px;
  right: 36%;
  /* width: 46px; */
  z-index: 2;
}
.hero__model{
  position: absolute;
  right: 18%;
  bottom: 0;
  height: 92%;
  max-height: 880px;
  z-index: 2;
}
.hero__edge{ position: absolute; z-index: 0; top: 8%; height: 84%; aspect-ratio: 1; right: 0; translate: calc(100% - clamp(28px, 4vw, 56px)) 0; border-radius: 50%; background: #103D39; pointer-events: none; }
.hero__circle{ position: absolute; z-index: -1; left: -14%; bottom: -8%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: #BFD1C5; }
.hero__star{ position: absolute; z-index: -1; left: -4%; top: 14%; width: 15%; height: auto; }
.hero__model img.hero__star{ width: 15% !important; height: auto !important; max-height: none; display: block; }
.hero__model img{ height: 100%; width: auto; display: block; object-fit: contain; }

@keyframes wave-float{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-18px) rotate(2deg); }
}

.hero__content{ position: relative; z-index: 4; max-width: 620px; }
.hero__eyebrow{ margin-bottom: var(--sp-5); }
.hero__scroll{
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: calc(var(--sp-6) + 40px);
  z-index: 4;
  writing-mode: vertical-rl;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero__scroll i{ position:relative; display:block; width:1px; height:56px; background: rgba(51,48,48,.18); overflow:hidden; }
.hero__scroll i::after{ content:''; position:absolute; left:0; top:0; width:1px; height:22px; background: var(--bubblegum); animation: scroll-line 1.8s cubic-bezier(.65,0,.35,1) infinite; }
.hero__scroll span{ animation: scroll-txt 1.8s ease-in-out infinite; }
.hero__scroll:hover i::after{ animation-duration: 1s; }
@keyframes scroll-line{ 0%{ transform: translateY(-22px); } 100%{ transform: translateY(56px); } }
@keyframes scroll-txt{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero__scroll i::after, .hero__scroll span{ animation:none; } }

.hero__quote{
  position: absolute;
  top: var(--sp-10);
  right: clamp(115px, 8vw, 100px);
  z-index: 4;
  text-align: right;
  max-width: 260px;
}
.hero__quote .h-md{ line-height: 1.15; }
.hero__quote-author{ margin-top: var(--sp-3); }
.hero__quote-author .name{ font-weight: 700; font-size: .85rem; }
.hero__quote-author .role{ font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

/* Telas médias: texto e modelo dividem a largura sem se sobrepor */
@media (max-width: 1280px){
  .hero__content{ max-width: min(620px, 50%); }
  .hero__model{ right: auto; left: 46%; height: auto; width: min(54vw, calc((100vh - 100px) * .85)); }
  .hero__model img{ width: 100%; height: auto; }
  .hero__dot{ right: 30%; }
}
@media (max-width: 860px){ .think__steps{ display: none !important; } .think{ padding-bottom: 100px !important; }
  section .h-xl, .think__title, .wk__title, .tm__title, .prod__title, .fd__name, .brands__title, .cta2__title{ font-size: clamp(2.4rem, 10.5vw, 3.4rem) !important; line-height: 1.02 !important; letter-spacing: -.035em; }
  main section:not(.hero){ text-align: center; }
  main section:not(.hero) :is(h2, p, .tm__copy, .prod__copy, .fd__copy, .lia__lead, .lia__body, .tm__body, .prod__body, .fd__body, .cta2__title, .cta2__body){ margin-left: auto; margin-right: auto; }
  main section:not(.hero) :is(.wk__head, .wk__top, .wk__filters, .tm__loc, .prod__list, .fd__list, .ft__social){ justify-content: center; }
  .wk__head{ flex-direction: column; align-items: center; }
  .cta2__actions{ justify-content: center; }
  .wk__top{ justify-content: center !important; }
  .wk__filters{ width: 100%; justify-content: center !important; text-align: center; }
  .fd__list{ text-align: center; }
  .why-card{ text-align: center; display: flex !important; flex-direction: column; align-items: center; }
  .why-card > *{ margin-left: auto !important; margin-right: auto !important; }
  .why-card .why-card__icon{ margin: 0 auto var(--sp-3) !important; }
}
.hero__caption{ display: none; }
.hero__mquote{ position: relative; font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.2; margin: 0 0 14px; }
.hero__mquote::before{ content: none; }
@media (max-width: 860px){
  .hero__caption{display: block;position: absolute;z-index: 2;left: auto;right: calc(100% + -45px);top: 22%;/* text-align: right; */white-space: nowrap;}
  .hero__caption .name{ font-weight: 700; font-size: .95rem; line-height: 1.2; }
  .hero__caption .role{ font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 2px; }
}
/* Cita: flutuante no topo direito em todo o desktop; abaixo do botão só no mobile */
.hero__quote--inline{ display: none; }
@media (max-width: 1180px){
  /* Cita volta ao topo direito; a modelo se desloca/encolhe para liberar essa coluna */
  .hero__model{ left: 38%; width: min(50vw, calc((100vh - 100px) * .85)); }
  .hero__quote:not(.hero__quote--inline){right: clamp(20px, 3vw, 40px);max-width: max(150px, 17vw);}
  .hero__quote .h-md{ font-size: 1rem; }
}
@media (max-width: 860px){
  .hero__quote--inline{
    display: block;
    position: static;
    text-align: left;
    max-width: 280px;
    margin-top: var(--sp-6);
  }
  .hero__quote--inline .h-md{ font-size: 1.15rem; }
}

@media (max-width: 860px){
  .hero{ min-height: auto; padding-top: calc(var(--sp-9) - var(--sp-3)); padding-bottom: 0; align-items: flex-start; }
  .hero__content{ max-width: none; }
  .hero .container{ display: flex; flex-direction: column; }
  /* onda na diagonal atrás da foto, saindo pela direita */
  .hero__wave{width: 100%;height: auto;max-width: 520px;top: auto;bottom: 16%;right: -45%;opacity: .95;transform: none;transform-origin: center;}
  .hero__model{position: relative;left: auto;right: auto;bottom: auto;height: auto;max-height: none;width: min(92%, 480px);margin: calc(var(--sp-7) * -1) calc(clamp(20px, 4vw, 64px) * -1 - 25%) 0 auto;}
  .hero__circle{left: -13%;bottom: 4%;width: 66%;}
  .hero .hero__model{ margin-bottom: -60px; }
  .hero .hero__model img:not(.hero__star){ display: block; }
  .hero__quote--inline{ display: none !important; }
  .hero .h-display{ font-size: clamp(2.9rem, 13.5vw, 4.6rem); line-height: .95; letter-spacing: -.045em; }
  .hero__model img{ width: 100%; height: auto; }
  .hero__scroll{ display: none; }
  .hero__dot{ display: none; }
}

/* ---------- Visibility (wave + phone + plants, tudo em posição absoluta) ---------- */
.visibility{
  position: relative;
  overflow: visible; /* o celular precisa "vazar" para cima, sobre o hero */
  padding: 60px 0 60px;
}

/* Wave 3D atrás de tudo */
.visibility__wave{
  position: absolute;
  /* top: 34.5%; */
  width: 80%;
  max-width: 640px;
  z-index: 1;
  opacity: .92;
  bottom: 0;
  left: -3%;
  display: block;
  translate: none !important;
  transform: none !important;
}

/* Plantas nos cantos inferiores, acima da wave, atrás do celular */
.visibility__plant-left, .visibility__plant-right{
  position: absolute;
  bottom: 10%;
  width: 23%;
  max-width: 300px;
  z-index: 2;
  opacity: .95;
}
.visibility__plant-left{left: 4%;}
.visibility__plant-right{ right: -2%; transform: scaleX(-1); }

/* Celular na frente de tudo, sobrepondo o fim do hero */
.visibility__phone{
  position: absolute;
  bottom: -6%;
  left: 10%;
  width: 40%;
  min-width: 210px;
  max-width: 458px;
  z-index: 3;
  filter: drop-shadow(0 30px 50px rgba(15,61,57,.2));
}
.visibility__phone img{ width: 100%; display: block; }
.visibility__combo{ display: none !important; }
@media (max-width: 860px){ .visibility__phone{ display: none !important; } }

/* Grade de texto: tagline esquerda / espaço do celular / texto principal / aside direita */
.visibility__grid{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1.8fr 2fr .5fr;
  align-items: center;
  gap: var(--sp-6);
}
.visibility__col--right{ padding-left: var(--sp-6); }
.visibility__col--aside{
  align-self: start;
  padding-top: var(--sp-1);
  padding-left: var(--sp-5);
  border-left: 1px solid rgba(58,54,54,.18);
}

/* Telas médias: o celular ganha uma coluna própria e o aside desce para baixo do texto */
@media (max-width: 1280px) and (min-width: 861px){
  .visibility__phone{ left: 3%; width: 42%; max-width: 440px; min-width: 0; }
  .visibility__wave{ width: 50%; left: -6%; }
  .visibility__plant-left{ width: 18%; left: 0; }
  .visibility__grid{ grid-template-columns: 44% minmax(0, 1fr); row-gap: var(--sp-6); }
  .visibility__col--right{ padding-left: var(--sp-6); }
  .visibility__col--aside{
    grid-column: 2;
    margin-left: var(--sp-6);
    padding-left: 0;
    padding-top: var(--sp-4);
    border-left: 0;
    border-top: 1px solid rgba(58,54,54,.18);
  }
}

@media (max-width: 860px){
  /* mobile: texto primeiro, celular embaixo com a onda atrás */
  .visibility{ overflow: hidden; padding-top: clamp(56px, 12vw, 100px); padding-bottom: clamp(56px, 12vw, 80px); display: flex; flex-direction: column; }
  .visibility > .container{ order: 1; }
  .visibility__phone{
    order: 2;
    position: relative;
    top: auto; left: auto; bottom: auto;
    width: min(300px, 70%);
    min-width: 0;
    margin: var(--sp-6) 6% calc(var(--sp-6) * -1) auto;
  }
  .visibility__wave{ width: 115%; max-width: 560px; left: -20%; top: auto; bottom: 0; opacity: .95; }
  .visibility__plant-left{ width: 34%; left: -4%; bottom: 4%; opacity: 1; }
  .visibility__plant-right{ display: none; }
  .visibility__col--aside{ display: none !important; }
  /* mobile: composição pronta (celular + folha + onda) */
  .visibility__wave, .visibility__plant-left{ display: none !important; }
  .visibility__phone{ width: 100%; margin: var(--sp-6) 0 0; filter: none; }
  .visibility__phone img:not(.visibility__combo){ display: none; }
  .visibility__phone .visibility__combo{ display: block; width: 108%; max-width: none; margin-left: -4%; }
  .visibility__grid{ grid-template-columns: 1fr; gap: var(--sp-5); }
  .visibility__col--center{ display: none; }
  .visibility__col--right{ padding-left: 0; }
  .visibility__col--aside{
    border-left: 0;
    border-top: 1px solid rgba(58,54,54,.18);
    padding-left: 0;
    padding-top: var(--sp-4);
  }
}

/* ---------- Why visibility matters ---------- */
/* Como esta fileira de 3 cards vive dentro de metade do container
   (grid-2), ela fica apertada bem antes do breakpoint geral de
   860px — por isso colapsa antes, em 2 e depois 1 coluna. */
/* Telas médias: título em cima, os 5 cards em linha embaixo */
@media (max-width: 1180px){
  .why-visibility-grid{ grid-template-columns: 1fr !important; gap: var(--sp-7) !important; }
  .why-visibility-grid .h-xl{ max-width: 18ch; }
  .why-cards-row{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
/* Mobile: 2 colunas, depois 1 */
@media (max-width: 860px){
  .why-cards-row{ grid-template-columns: 1fr !important; row-gap: var(--sp-5); }
  .why-card{ display: grid; grid-template-columns: 68px minmax(0,1fr); column-gap: var(--sp-4); align-items: start; border: 0 !important; padding: 0; }
  .why-card > *:not(.why-card__icon){ grid-column: 2; margin-top: 0; }
  .why-card .why-card__icon{ grid-column: 1; grid-row: 1 / span 4; width: 60px; height: 60px; margin: 2px 0 0; }
  .why-card .tagline{ font-size: .78rem; }
  .why-card .h-md{ margin-top: 4px; font-size: 1.35rem; }
  .why-card .body-sm{ margin-top: 6px; font-size: 1rem; line-height: 1.5; }
  .why-card:not(:last-child){ border-bottom: 1px solid rgba(58,54,54,.16) !important; padding-bottom: var(--sp-5); }
}
@media (max-width: 520px){
  .why-cards-row{ grid-template-columns: 1fr !important; }
}

/* ---------- Why visibility matters (grid externo) ----------
   Proporção assimétrica: a fileira de 3 cards ocupa mais espaço
   que o bloco de texto, como na referência. */
.why-visibility-grid{
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: .8fr 1.8fr;
  /* vertical-align: middle; */
  align-items: center;
}



.why-card{
  padding: var(--sp-3) var(--sp-4) var(--sp-1) 0;
  border-right: 1px solid rgba(58,54,54,.16);
  /* border-radius: var(--sp-3); */
  /* background-color: #f8f2eb; */
}
.why-card__icon{
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-5);
}
.why-card__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(58,54,54,.25);
  margin-top: var(--sp-4);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.why-card__link:hover{ background: var(--antracita); border-color: var(--antracita); color: var(--perla); }

/* ---------- Services (dark) ---------- */
.service-card{
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card__media{/* aspect-ratio: 3/4; */}
.service-card__body{ padding-top: var(--sp-4); }
.service-card__num{ font-size: .72rem; opacity: .55; letter-spacing: .1em; }

/* ---------- Method / Andromeda orbit ---------- */
.method__diagram{
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1/1;
  margin-inline: auto;
}
.method__ring{
  position: absolute;
  inset: 0;
  border: 1px solid rgba(58,54,54,.18);
  border-radius: 50%;
}
.method__ring--inner{ inset: 22%; }
.method__core{
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  background: var(--bubblegum);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 8px rgba(214,0,127,.12);
}
.method__core::before{
  content: '\2605';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 8px;
}
.method__point{
  position: absolute;
  width: 8px; height: 8px;
  background: var(--antracita);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.method__label{
  position: absolute;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -140%);
}
.method__legend-item{
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-top: 1px solid rgba(58,54,54,.14);
  font-size: .85rem;
}
.method__legend-item.is-active{ font-weight: 700; }
.method__legend-num{ font-size: .7rem; opacity: .55; }

/* ---------- Team ---------- */
.team__media{ border-radius: var(--radius-lg); overflow: hidden; }
.team__locations{ letter-spacing: .05em; }

/* ---------- Selected work ---------- */
.work-card{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
}
.work-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.work-card:hover img{ transform: scale(1.05); }
.work-card__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,61,57,0) 40%, rgba(15,61,57,.75) 100%);
}
.work-card__label{
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  bottom: var(--sp-5);
  color: var(--white);
}
.work-card__arrow{
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast);
}
.work-card:hover .work-card__arrow{ transform: rotate(45deg); }

/* ---------- Results / stats ---------- */
.stats{ border-top: 1px solid rgba(58,54,54,.16); border-bottom: 1px solid rgba(58,54,54,.16); }
.stat{ padding-block: var(--sp-6); }
.stat + .stat{ border-left: 1px solid rgba(58,54,54,.16); }
.stat__num{ font-family: var(--font-sans); font-weight:500; letter-spacing:-.02em; font-size: clamp(2rem, 3.2vw, 3rem); }

/* ---------- About ---------- */
.about__media{ border-radius: var(--radius-lg); overflow: hidden; }

/* ---------- CTA banner ---------- */
.cta-banner{
  position: relative;
  overflow: hidden;
}
.cta-banner__wave{
  position: absolute;
  left: -8%;
  bottom: -12%;
  width: 40%;
  max-width: 460px;
  opacity: .9;
}
.cta-banner__leaves{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32%;
  max-width: 420px;
  opacity: .85;
}
.cta-banner__content{ position: relative; z-index: 2; }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid rgba(58,54,54,.14); }
.footer-links a{ font-size: .85rem; font-weight: 600; }
.social-icons{ gap: var(--sp-4); }
.social-icons a{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(58,54,54,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.social-icons a:hover{ background: var(--antracita); border-color: var(--antracita); color: var(--perla); }

/* ---------- Menu mobile ---------- */
@media (max-width: 860px){
  body.nav-open .nav-links{
    display: flex !important;
    position: fixed;
    inset: 0;
    background: var(--perla);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(50px + var(--sp-5) * 2 + var(--sp-4)) clamp(20px, 4vw, 64px) var(--sp-6);
    gap: var(--sp-5);
    z-index: 90;
  }
  body.nav-open .nav-links a{ font-size: 1.1rem; }
  body.nav-open .site-logo, body.nav-open .lang-toggle, body.nav-open .nav-toggle{ position: relative; z-index: 95; }
  body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
  .nav-toggle span{ transition: transform var(--t-fast), opacity var(--t-fast); }
}

/* ---------- Scroll reveal (uma única sequência sutil, não em cada card) ---------- */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Cómo pensamos ---------- */
.think{ background: var(--menta); padding-block: clamp(48px, 7vw, 96px); position: relative; z-index: 2; }
.think__leaf{ position: absolute; right: 0; top: clamp(-70px, -4.5vw, -30px); width: clamp(120px, 15vw, 240px); z-index: 3; pointer-events: none; }
@media (max-width: 700px){ .think__leaf{ width: 110px; top: -36px; } }
.think__tag{ font-size: .68rem; color: var(--antracita); margin: 0 0 var(--sp-4); }
.think__head{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: var(--sp-7); }
.think__title{ font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.04; letter-spacing: -.03em; margin: 0; text-wrap: pretty; }
.think__pink{ color: var(--bubblegum); }
.think__side{ margin: var(--sp-6) 0 0; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.55; color: rgba(51,48,48,.7); }
.think__diagram{ display:block; width: 100%; max-width: 640px; height:auto; justify-self: end; }
.think__steps{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-7) 0 0; padding: var(--sp-6) 0 0; border-top: 1px solid rgba(15,61,57,.25); list-style: none; }
.think__ico{ display: none !important; }
.think__step{ display:flex; align-items:center; gap: 14px; }
.think__ico{ flex: 0 0 auto; display:grid; place-items:center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(15,61,57,.08); color: var(--antracita); font-size: 28px; }
.think__txt{ display:flex; flex-direction:column; gap: 6px; }
.think__txt b{ font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--esmeralda); }
.think__txt span{ font-size: .9rem; line-height: 1.3; color: var(--antracita); }
.think__arrow{ flex: 0 1 56px; height: 1px; background: var(--esmeralda); position: relative; opacity: .7; }
.think__arrow::after{ content:''; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid var(--esmeralda); border-right:1px solid var(--esmeralda); transform: rotate(45deg); }
@media (max-width: 1100px){ .think__steps{ gap: var(--sp-3); } .think__arrow{ flex-basis: 32px; } }
@media (max-width: 960px){
  .think__head{ grid-template-columns: 1fr; }
  .think__diagram{ justify-self: center; max-width: 560px; }
}
@media (max-width: 520px){
  .think__steps{ display:grid; grid-template-columns: 1fr; }
  .think__ico{ width: 54px; height: 54px; font-size: 24px; }
}

/* ---------- Trabajos destacados ---------- */
.wk{ padding-block: clamp(56px, 7vw, 96px); color: var(--white); }
.wk__top{ display:flex; justify-content:space-between; align-items:center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.wk__top .tagline{ font-size:.68rem; margin:0; }
.wk__all:hover{ color: var(--menta); }
.wk__head{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--sp-5); flex-wrap:wrap; margin-bottom: var(--sp-6); }
.wk__title{ font-family: var(--font-sans); font-weight:500; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height:1.06; letter-spacing:-.03em; margin:0; text-wrap: pretty; }
.wk__filters{ display:flex; gap: var(--sp-5); flex-wrap:wrap; }
.wk__filters button{ font-size:.8rem; padding: 4px 0; opacity:.7; border-bottom:1px solid transparent; transition: opacity var(--t-fast), border-color var(--t-fast); }
.wk__filters button:hover{ opacity:1; }
.wk__filters button.is-active{ opacity:1; border-color: var(--white); font-weight:600; }
.wk__grid{
  display:grid; gap: 12px;
  grid-template-columns: 1.3fr .9fr 1fr 1fr;
  grid-auto-rows: 72px;
  grid-template-areas:
    "beauty fitness food food"
    "beauty fitness food food"
    "beauty fitness food food"
    "beauty fitness lifestyle wellness"
    "beauty ecommerce lifestyle wellness"
    "beauty ecommerce lifestyle wellness";
}
.wk-card{ position:relative; overflow:hidden; border-radius: 10px; background: rgba(191, 209, 197,.08); text-align:left; color: var(--white); padding:0; transition: opacity var(--t-slow), filter var(--t-slow); }
.wk-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform var(--t-slow); }
.wk-card:hover img{ transform: scale(1.04); }
.wk-card__shade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,61,57,0) 45%, rgba(10,30,28,.78) 100%); }
.wk-card__label{ position:absolute; left: var(--sp-4); right: 56px; bottom: var(--sp-4); display:flex; flex-direction:column; gap: 6px; }
.wk-card__name{ font-family: var(--font-sans); font-weight:500; letter-spacing:-.02em; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height:1.1; }
.wk-card__tags{ font-size:.75rem; opacity:.9; }
.wk-card__go{ position:absolute; right: var(--sp-4); bottom: var(--sp-4); width:30px; height:30px; border-radius:50%; background: var(--white); color: var(--antracita); display:grid; place-items:center; transition: transform var(--t-fast); }
.wk-card__go svg{ width:14px; height:14px; }
.wk-card:hover .wk-card__go{ transform: translateX(3px); }
.wk-card:focus-visible{ outline: 2px solid var(--menta); outline-offset: 3px; }
.wk-card.is-dim{ opacity:.18; filter: grayscale(1); pointer-events:none; }
.wk-card--beauty{ grid-area: beauty; } .wk-card--fitness{ grid-area: fitness; } .wk-card--food{ grid-area: food; }
.wk-card--ecommerce{ grid-area: ecommerce; } .wk-card--lifestyle{ grid-area: lifestyle; } .wk-card--wellness{ grid-area: wellness; }
.wk-card--beauty .wk-card__name{ font-size: clamp(1.25rem, 1.9vw, 1.7rem); }
@media (max-width: 1000px){
  .wk__grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 80px;
    grid-template-areas:
      "beauty fitness" "beauty fitness" "beauty fitness" "beauty ecommerce" "beauty ecommerce"
      "food food" "food food" "food food"
      "lifestyle wellness" "lifestyle wellness" "lifestyle wellness"; }
}
@media (max-width: 600px){
  .wk__filters{ gap: var(--sp-4); }
  .wk__grid{ grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: none; }
  .wk-card{ grid-area: auto !important; aspect-ratio: 4/3; }
  .wk-card--beauty{ aspect-ratio: 4/5; }
}

/* Lightbox */
.lb{ border:0; padding:0; margin:auto; width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: transparent; color: var(--white); overflow: visible; }
.lb::backdrop{ background: rgba(8,24,22,.88); backdrop-filter: blur(4px); }
.lb[open]{ animation: lb-in .35s var(--ease); }
@keyframes lb-in{ from{ opacity:0; transform: translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
.lb__panel{ position:relative; background: var(--esmeralda); border-radius: 14px; overflow:auto; max-height: calc(100dvh - 32px); }
.lb__close{ position:absolute; top: 12px; right: 12px; z-index:3; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.92); color: var(--antracita); display:grid; place-items:center; }
.lb__close svg{ width:18px; height:18px; }
.lb__stage{ position:relative; aspect-ratio: 4/3; background: rgba(191, 209, 197,.08); }
.lb__img{ width:100%; height:100%; object-fit: cover; display:block; }
.lb__img.is-missing{ visibility:hidden; }
.lb__nav{ position:absolute; top:50%; transform: translateY(-50%); width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.92); color: var(--antracita); display:grid; place-items:center; transition: transform var(--t-fast); }
.lb__nav svg{ width:18px; height:18px; }
.lb__nav--prev{ left: 16px; } .lb__nav--next{ right: 16px; }
.lb__nav:hover{ transform: translateY(-50%) scale(1.06); }
.lb__count{ position:absolute; left:16px; bottom:14px; font-size:.72rem; letter-spacing:.16em; background: rgba(10,30,28,.6); padding: 6px 10px; border-radius: 999px; }
.lb__thumbs{ display:flex; gap: 8px; padding: 12px 22px 0; overflow-x:auto; }
.lb__thumbs button{ flex: 0 0 64px; aspect-ratio: 4/3; border-radius: 6px; overflow:hidden; background: rgba(191, 209, 197,.1); opacity:.5; outline: 2px solid transparent; outline-offset: -2px; transition: opacity var(--t-fast); padding:0; }
.lb__thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.lb__thumbs button.is-active{ opacity:1; outline-color: var(--menta); }
.lb__info{ display:grid; grid-template-columns: 1fr; gap: var(--sp-3); padding: 18px 22px 24px; }
.lb__client{ font-size:.68rem; color: var(--menta); margin:0 0 var(--sp-2); }
.lb__title{ font-family: var(--font-sans); font-weight:500; letter-spacing:-.03em; font-size: 1.7rem; line-height:1.05; margin:0; }
.lb__desc{ font-size: .88rem; line-height:1.7; margin:0 0 var(--sp-5); opacity:.92; text-wrap: pretty; }
.lb__svc-label{ font-size:.66rem; margin:0 0 var(--sp-3); opacity:.75; }
.lb__svc{ display:flex; flex-wrap:wrap; gap: 8px; }
.lb__svc li{ font-size:.78rem; padding: 7px 14px; border:1px solid rgba(191, 209, 197,.4); border-radius: 999px; }
@media (max-width: 700px){
  .lb__info{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .lb__stage{ aspect-ratio: 4/3; }
  .lb__nav{ width:38px; height:38px; }
}
body.lb-open{ overflow:hidden; }

/* ---------- Nuestro equipo ---------- */
.tm{ position:relative; overflow:hidden; background:#E6E6E4; color: var(--antracita); min-height: clamp(520px, 46vw, 760px); display:flex; align-items:center; }
.tm__img{ position:absolute; top:0; right:0; height:100%; width:66%; object-fit:cover; object-position: 50% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.tm__inner{ position:relative; z-index:1; width:100%; padding-block: clamp(48px, 6vw, 88px); }
.tm__copy{ max-width: 380px; }
.tm__tag{ font-size:.68rem; margin:0 0 var(--sp-4); }
.tm__title{ font-family: var(--font-sans); font-weight:500; font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height:.96; letter-spacing:-.04em; margin:0 0 var(--sp-5); }
.tm__lead{ font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight:600; line-height:1.35; color: var(--esmeralda); margin:0 0 var(--sp-4); text-wrap: pretty; }
.tm__body{ font-size:.9rem; line-height:1.7; margin:0 0 var(--sp-6); text-wrap: pretty; }
.tm__loc{ display:flex; align-items:center; gap: 10px; font-size:.68rem; margin:0; }
.tm__loc svg{ width:16px; height:16px; color: var(--esmeralda); flex:none; }
@media (max-width: 900px){
  .tm{ flex-direction:column; align-items:stretch; min-height:0; }
  .tm__img{ position:relative; width:100%; height:auto; aspect-ratio: 5/4; order:2; -webkit-mask-image:none; mask-image:none; }
  .tm__inner{ padding-bottom: var(--sp-6); }
  .tm__copy{ max-width: 560px; }
}

/* ---------- Producción (video) ---------- */
.prod{ position:relative; overflow:hidden; background: #1F1D1D; color: var(--white); min-height: clamp(460px, 38vw, 620px); display:flex; align-items:center; }
.prod__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.prod__overlay{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(31,29,29,1) 0%, rgba(31,29,29,.94) 35%, rgba(31,29,29,.6) 65%, rgba(31,29,29,.25) 100%); }
.prod__inner{ position:relative; z-index:1; width:100%; padding-block: clamp(56px, 6vw, 88px); }
.prod__copy{ max-width: 500px; margin-right:auto; }
.prod__tag{ font-size:.66rem; margin:0 0 var(--sp-4); opacity:.85; }
.prod__title{ font-family: var(--font-sans); font-weight:500; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height:1; letter-spacing:-.035em; margin:0 0 var(--sp-5); }
.prod__sub{ font-size:.8rem; letter-spacing:.22em; margin:0 0 var(--sp-3); }
.prod__body{ font-size:.92rem; line-height:1.7; margin:0 0 var(--sp-6); max-width: 420px; opacity:.9; text-wrap: pretty; }
.prod__list{ display:flex; flex-wrap:wrap; gap: 6px 0; padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.25); list-style:none; }
.prod__list li{ font-size:.82rem; }
.prod__list li + li::before{ content:'·'; margin: 0 12px; opacity:.6; }
@media (max-width: 700px){
  .prod__overlay{ background: linear-gradient(180deg, rgba(31,29,29,.7) 0%, rgba(31,29,29,.96) 60%); }
  .prod{ align-items:flex-end; min-height: 560px; }
  .prod__copy{ margin-left:0; }
}
@media (prefers-reduced-motion: reduce){ .prod__video{ display:none; } }

/* ---------- Meet Lia ---------- */
.lia{ position:relative; overflow:hidden; background: linear-gradient(100deg, #EEF3E8 0%, var(--menta) 100%); color: var(--antracita); }
.lia__wave{ position:absolute; right:2%; top:50%; translate:0 -50%; height: 130%; width:auto; max-width:none; opacity:.95; pointer-events:none; z-index:0; }
.lia__swirl{position:absolute;right: 0%;top: -13%;width: 78%;z-index:-2;pointer-events:none;}
/* folhas saindo de trás do tablet, lado direito */
.lia__plant{position:absolute;right: -24%;top: 45%;width: 48%;z-index:-1;pointer-events:none;}
.lia__inner{ position:relative; z-index:1; display:grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items:center; gap: var(--sp-7); padding-block: clamp(56px, 6vw, 96px); }
.lia__tag{ font-size:.66rem; margin:0 0 var(--sp-4); }
.lia__title{ font-family: var(--font-sans); font-weight:500; font-size: clamp(3.2rem, 6vw, 5.2rem); line-height:.95; letter-spacing:-.04em; margin:0 0 var(--sp-3); }
.lia__lead{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin:0 0 var(--sp-4); max-width: 360px; }
.lia__body{ font-size:.92rem; line-height:1.7; margin:0 0 var(--sp-6); max-width: 420px; text-wrap: pretty; }
/* tablet maior, apoiado na base da seção (borda inferior fica cortada) */
.lia__media{ position:relative; isolation:isolate; justify-self:end; align-self:center; width:100%; max-width: 680px; }
.lia__media img:not(.lia__plant):not(.lia__swirl){ display:block; width:100%; height:auto; filter: drop-shadow(0 30px 40px rgba(15,61,57,.14)); }
.lia__ph{ position:absolute; inset:0; display:grid; place-items:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(51,48,48,.55); }
.lia__media img:not(.is-missing) + .lia__ph{ display:none; }
@media (max-width: 960px){
  .lia__inner{ grid-template-columns: 1fr; }
  .lia__media{ justify-self:stretch; max-width:none; }
  .lia__plant{ right:-14%; width: 40%; }
}

/* ---------- Fundadora ---------- */
.fd{ display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--perla); color: var(--antracita); min-height: clamp(380px, 32vw, 540px); }
.fd__media{ position:relative; overflow:hidden; isolation:isolate; }
.fd__circle{ position:absolute; border-radius:50%; z-index:0; }
.fd__circle--green{ width: 72%; aspect-ratio:1; right: 2%; top: 10%; background: #BFD1C5; }
.fd__circle--pink{ width: 34%; aspect-ratio:1; left: 8%; top: 40%; background: radial-gradient(circle at 30% 70%, #F2489A 0%, #F68CBE 55%, #FBD3E5 100%); filter: drop-shadow(0 18px 30px rgba(214,0,127,.18)); }
.fd__star{ position:absolute; left: 24%; top: 16%; width: 11%; z-index:1; }
.fd__photo{ position:absolute; bottom:0; right: 4%; height: 92%; width:auto; max-width: 88%; object-fit: contain; object-position: bottom; z-index:2; }
.fd__leaf{ position:absolute; left: 6%; bottom: -4%; width: 34%; z-index:3; }
.fd__content{ display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap: var(--sp-7); padding: clamp(32px, 3.5vw, 52px) clamp(24px, 5vw, 80px); }
.fd__copy{ max-width: 520px; }
.fd__tag{ font-size:.66rem; margin:0 0 var(--sp-3); }
.fd__name{ font-family: var(--font-sans); font-weight:500; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height:1; letter-spacing:-.035em; margin:0 0 var(--sp-2); }
.fd__role{ font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight:500; margin:0 0 var(--sp-2); }
.fd__lead{ font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight:600; color: var(--esmeralda); margin:0 0 var(--sp-4); }
.fd__body{ font-size:.92rem; line-height:1.7; margin:0; max-width: 440px; text-wrap: pretty; }
.fd__list{ list-style:none; display:flex; flex-direction:column; gap: 10px; padding-left: var(--sp-5); border-left: 1px solid rgba(51,48,48,.3); text-align:right; }
.fd__list li{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
@media (max-width: 1000px){
  .fd__content{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .fd__list{ flex-direction:row; flex-wrap:wrap; gap: 10px 20px; padding: var(--sp-4) 0 0; border-left:0; border-top: 1px solid rgba(51,48,48,.3); text-align:left; }
}
@media (max-width: 720px){
  .fd{ grid-template-columns: 1fr; }
  .fd__media{ aspect-ratio: 1/1; margin: 56px 20px 0; border-radius: 28px; background: #E4EFDD; }
  .fd__photo{ right: 6%; }
}

/* ---------- Marcas ---------- */
.brands{ background: #E6E6E4; color: var(--antracita); padding-block: clamp(40px, 4.5vw, 64px); }
.brands__tag{ font-size:.64rem; margin:0 0 var(--sp-2); }
.brands__title{ font-family: var(--font-sans); font-weight:500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing:-.03em; line-height:1.1; margin:0 0 var(--sp-6); }
.brands__row{ list-style:none; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-5) var(--sp-6); }
.brands__row li{ display:flex; align-items:center; min-height: 72px; }
.brands__row img{ max-height: 66px; width:auto; filter: grayscale(1); opacity:.75; transition: opacity var(--t-fast), filter var(--t-fast); }
.brands__ph{ zoom: 1.5; }
.brands__row img:hover{ opacity:1; filter:none; }
.brands__ph{ color:#6B6666; display:flex; flex-direction:column; align-items:center; line-height:1; opacity:.85; }
.brands__ph small{ font-size:.5rem; letter-spacing:.3em; margin-top:4px; }
.brands__more{ font-size:.85rem; color:#6B6666; }
@media (max-width: 760px){
  .brands__row{ justify-content:flex-start; gap: var(--sp-5) var(--sp-7); }
}

/* ---------- CTA final ---------- */
.cta2{ background: var(--esmeralda); color: var(--white); overflow: hidden; }
.cta2__wave{ position:absolute; right: -8%; left:auto; top:0; bottom:0; height:100%; width:auto; max-width:none; transform:none; translate:none !important; pointer-events:none; z-index:0; }
.cta2__leaves{ position:absolute; right:0; top:0; height:100%; width:auto; max-width: 45%; object-fit:cover; opacity:.85; pointer-events:none; }
.cta2__leaves::after{ content:''; }
.cta2__inner{ position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap: var(--sp-7); padding-block: clamp(56px, 6vw, 88px); padding-left: clamp(16px, 16vw, 240px); }
.cta2__title{ font-family: var(--font-sans); font-weight:500; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height:1.05; letter-spacing:-.03em; margin:0 0 var(--sp-4); max-width: 640px; text-wrap: balance; }
.cta2__body{ font-size:.95rem; line-height:1.7; opacity:.88; margin:0 0 var(--sp-6); max-width: 520px; }
.cta2__btn{ display:inline-flex; align-items:center; gap: 14px; padding: 14px 28px; border:1px solid rgba(255,255,255,.75); border-radius: 999px; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; transition: background var(--t-fast), color var(--t-fast); }
.cta2__btn svg{ width:16px; height:16px; }
.cta2__btn:hover{ background: var(--white); color: var(--esmeralda); }
.cta2__aside{ border-left:1px solid rgba(255,255,255,.3); padding-left: var(--sp-6); }
.cta2__brand{ font-family: var(--font-sans); font-weight:700; font-size: 1.6rem; letter-spacing:-.04em; margin:0 0 var(--sp-3); display:flex; align-items:baseline; gap:6px; }
.cta2__brand span{ color: var(--bubblegum); margin-left:-6px; }
.cta2__brand small{ font-size:.6rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; }
.cta2__claim{ font-size:.92rem; line-height:1.5; margin:0 0 var(--sp-4); }
.cta2__loc{ font-size:.62rem; margin:0; opacity:.85; }
@media (max-width: 960px){
  .cta2__inner{ grid-template-columns: 1fr; padding-left: var(--sp-5); gap: var(--sp-6); }
  .cta2{ overflow: hidden; }
  .cta2__wave{ left:auto; left: calc(100% - 64px); right:auto; top:0; bottom:0; height:100%; width:auto; max-width:none; transform: none; translate: none !important; opacity:1; z-index:0; }
  .cta2__inner{ position: relative; z-index: 2; }
  .cta2__aside{ border-left:0; border-top:1px solid rgba(255,255,255,.3); padding:var(--sp-5) 0 0; }
}

/* ---------- Footer v2 ---------- */
.ft{ background: var(--perla); color: var(--antracita); border-top:0; }
.ft__inner{ display:flex; align-items:center; gap: clamp(24px, 3.5vw, 56px); padding-block: clamp(32px, 3.5vw, 48px); }
.ft__logo img{ height: 46px; width:auto; display:block; }
.ft__nav{ display:flex; gap: clamp(16px, 2vw, 28px); flex-wrap:wrap; }
.ft__nav a{ font-size:.82rem; color:#5a5555; transition: color var(--t-fast); }
.ft__nav a:hover{ color: var(--bubblegum); }
.ft__nav:first-of-type{ margin-left: auto; }
.ft__sep{ align-self:stretch; width:1px; background: rgba(51,48,48,.2); min-height: 64px; }
.ft__end{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); }
.ft__social{ display:flex; gap: var(--sp-5); }
.ft__social a{ color: var(--antracita); transition: color var(--t-fast); }
.ft__social a:hover{ color: var(--bubblegum); }
.ft__social svg{ width:20px; height:20px; display:block; }
.ft__copy{ font-size:.7rem; line-height:1.5; color:#5a5555; text-align:center; margin:0; }
@media (max-width: 1100px){
  .ft__inner{ flex-wrap:wrap; justify-content:center; text-align:center; row-gap: var(--sp-5); }
  .ft__nav{ justify-content:center; }
  .ft__nav:first-of-type{ margin-left:0; }
  .ft__sep{ display:none; }
  .ft__logo{ flex-basis:100%; display:flex; justify-content:center; }
  .ft__nav, .ft__end{ flex-basis:100%; }
}

/* ---------- One page: anclas y menú activo ---------- */
section[id]{ scroll-margin-top: 72px; }

.header-left{ display:flex; align-items:center; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 861px){
  .header-left .nav-links{ gap: clamp(20px, 2.4vw, 36px); }
  .header-left .nav-links a{ font-weight: 500; font-size: .84rem; color: var(--antracita); }
  .header-left .nav-links a.is-active, .header-left .nav-links a:hover{ color: var(--antracita); }
}

/* ---------- Trabajos: fila de proyectos ---------- */
.wk__row{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.wk-item{ display:flex; flex-direction:column; gap: 4px; text-align:left; color: var(--white); padding:0; transition: opacity var(--t-slow), filter var(--t-slow); }
.wk-item__media{ position:relative; display:block; width:100%; height:0; padding-bottom:133.33%; border-radius: 8px; overflow:hidden; background: rgba(191, 209, 197,.08); margin-bottom: 8px; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.wk-item{ min-width: 0; }
.wk-item__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform var(--t-slow); }
.wk-item:hover .wk-item__media img{ transform: scale(1.05); }
.wk-item__name{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.wk-item__tags{ font-size:.72rem; opacity:.75; }
.wk-item:focus-visible{ outline: 2px solid var(--menta); outline-offset: 4px; border-radius: 8px; }
.wk-item.is-dim{ opacity:.2; filter: grayscale(1); pointer-events:none; }

/* Até 1100px: trabajos em slideshow (arrastar para o lado) */
@media (max-width: 1100px){
  .wk__row{ display:flex; gap: 12px; overflow-x:auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(20px, 4vw, 64px); margin-inline: calc(clamp(20px, 4vw, 64px) * -1); padding: 0 clamp(20px, 4vw, 64px) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wk__row::-webkit-scrollbar{ display:none; }
  .wk-item{ flex: 0 0 78%; scroll-snap-align: start; }
  .wk-item.is-dim{ display:none; }
  .wk__dots{ display:flex; justify-content:center; gap: 8px; margin-top: var(--sp-5); }
  .wk__dots button{ width: 8px; height: 8px; padding:0; border-radius: 50%; background: rgba(191, 209, 197,.35); transition: width .3s, background .3s; }
  .wk__dots button.is-active{ width: 22px; border-radius: 4px; background: var(--menta); }
  .brands__track{ animation-duration: 26s; }
  .brands__track li{ padding-inline: 22px; }
  .brands__marquee{ margin-inline: calc(clamp(20px, 4vw, 64px) * -1); }
}
@media (min-width: 1101px){ .wk__dots{ display:none; } }

/* ---------- Efectos ---------- */
.fx{ opacity:0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.fx.in{ opacity:1; transform:none; }
.fx--up{ transform: translateY(34px); }
.fx-img{ clip-path: inset(6% 6% 6% 6% round 12px); transform: scale(1.06); transition: clip-path 1.3s cubic-bezier(.2,.7,.2,1), transform 1.6s cubic-bezier(.2,.7,.2,1); }
.fx-img.in{ clip-path: inset(0 0 0 0 round 0); transform: none; }
.lia__media.fx-img.in{ clip-path: none; }
.think__arrow.fx{ transform: scaleX(0); transform-origin: left; }
.think__arrow.fx.in{ transform: scaleX(1); }
.hero__wave, .lia__wave, .lia__plant, .cta2__wave, .cta2__leaves, .visibility__wave, .visibility__plant-left{ will-change: translate; }

/* Hero: entrada al cargar */
.fx-ready .hero__content > *, .fx-ready .hero__quote{ animation: fx-hero 1s cubic-bezier(.2,.7,.2,1) both; }
.fx-ready .hero__content > *:nth-child(2){ animation-delay: .12s; }
.fx-ready .hero__content > *:nth-child(3){ animation-delay: .24s; }
.fx-ready .hero__content > *:nth-child(4){ animation-delay: .36s; }
.fx-ready .hero__quote{ animation-delay: .5s; }
@keyframes fx-hero{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:none; } }

/* Microinteracciones */
.btn, .cta2__btn{ transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.btn:hover svg, .cta2__btn:hover svg, .wk__all:hover{ transform: translateX(4px); }
.btn svg, .cta2__btn svg{ transition: transform var(--t-fast); }
.wk-item__media::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(15,61,57,.45)); opacity:0; transition: opacity var(--t-fast); }
.wk-item:hover .wk-item__media::after{ opacity:1; }
.brands__ph{ transition: opacity var(--t-fast), transform var(--t-fast); }
.brands__row li:hover .brands__ph{ opacity:1; transform: translateY(-2px); }
.dot::after{ animation: none; }
.dot{ position: relative; display: inline-block; width: 0; height: 1em; vertical-align: baseline; }
.dot::after{ position: absolute; left: .1em; bottom: .02em; margin: 0; transform: none; vertical-align: baseline; }
@keyframes fx-dot{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.25); } }

@media (prefers-reduced-motion: reduce){
  .fx, .fx-img{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .dot::after{ animation:none; }
}

/* ---------- Logos en movimiento ---------- */
.brands__marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brands__track{ display:flex; flex-wrap:nowrap; justify-content:flex-start; gap: 0; width:max-content; animation: brands-scroll 38s linear infinite; }
.brands__track li{ padding-inline: clamp(28px, 3.5vw, 56px); flex:none; }
.brands__marquee:hover .brands__track{ animation-play-state: paused; }
@keyframes brands-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.brands__track > li.fx{ opacity:1; transform:none; }

/* ---------- Transiciones entre secciones ---------- */
.seam-round{ position:relative; z-index:2; margin-top: -32px; border-radius: 32px 32px 0 0; }
.wk.seam-round{ overflow: visible; }
.fd.seam-round{ overflow: hidden; }
.seam-deco{ position:absolute; pointer-events:none; z-index:3; }
.seam-deco--work{ right: 6%; top: -70px; width: clamp(110px, 11vw, 170px); transform: rotate(18deg); }
.fd{ position:relative; }
.seam-deco--fd{ left: -30px; top: -90px; width: clamp(120px, 12vw, 190px); z-index:4; transform: rotate(-8deg); }
@media (max-width: 720px){
  .seam-round{ margin-top:-20px; border-radius: 20px 20px 0 0; }
  .seam-deco--work{ top:-44px; right:4%; }
  .seam-deco--fd{ display:none; }
}

/* ---------- Cursor ---------- */
.cursor{ position:fixed; left:0; top:0; z-index:9999; pointer-events:none; opacity:0; transition: opacity .2s; }
.cursor.on{ opacity:1; }
.cursor::before{ content:''; position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; background: rgba(214,0,127,.22); transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s; }
.cursor.is-link::before{ transform: scale(1.7); background: rgba(214,0,127,.28); }
.cursor.is-view::before{ transform: scale(3.4); background: rgba(214,0,127,.5); }
.cursor-dot{ position:fixed; left:0; top:0; z-index:10000; pointer-events:none; opacity:0; transition: opacity .2s; }
.cursor-dot{ display:none; }
.cursor-dot::before{ content:''; position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background: var(--bubblegum); }
.cursor.is-dark ~ .cursor-dot::before{ background: var(--white); }
.cursor__label{ position:absolute; left:0; top:0; margin-top: 26px; transform: translate(-50%,-50%) scale(.6); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--white); opacity:0; transition: opacity .25s, transform .3s; white-space:nowrap; }
.cursor.is-view .cursor__label{ opacity:1; transform: translate(-50%,-50%) scale(1); }

.cursor__label{ display:none; }
.hero__sub{ font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight:500; letter-spacing:-.01em; margin: var(--sp-3) 0 0; color: var(--antracita); }
.brands__tag, .brands__title{ text-align:center; }
.why-card:last-child{ border-right: 0; }

/* Headlines: tracking más cerrado */
main h2, .brands__title, .cta2__title{ letter-spacing: -0.05em !important; }
main h2 .italic{ letter-spacing: -0.01em; }
.hero{ padding-bottom: clamp(56px, 7vw, 104px) !important; padding-top: clamp(140px, 13vw, 190px) !important; }

/* Labels en mayúsculas: mismo peso que .tagline */
.fd__list li, .wk-item__name, .lb__svc-label, .cta2__btn, .brands__tag, .think__tag{ font-weight: 700; }
.fd__list li{ color: var(--antracita); }

/* Verde esmeralda como acento en secciones claras */
.fd__list li{ color: var(--esmeralda); }
.visibility .tagline, #servicios .tagline, .think__tag, .tm__tag, .lia__tag, .fd__tag, .brands__tag{ color: var(--esmeralda) !important; opacity: 1 !important; }
.lia__lead{ color: var(--esmeralda); }

/* Footer: logo sin deformar y links en una línea */
.ft__logo{ flex: none; }
.ft__logo img{ height: 50px; width: auto; max-width: none; }
.ft__nav{ flex-wrap: nowrap; gap: clamp(14px, 1.6vw, 26px); }
.ft__nav a{ white-space: nowrap; }
.ft__end{ flex: none; }
.ft__copy{ white-space: nowrap; }
@media (max-width: 1100px){
  .ft__nav{ flex-wrap: wrap; }
}

/* ---------- Telas grandes (Full HD+) ---------- */
@media (min-width: 1600px){
  :root{ --container-w: 1520px; }
  html{ font-size: 17.5px; }
  .hero__quote:not(.hero__quote--inline){ right: calc((100vw - 1520px) / 2 + 64px); top: 26%; max-width: 280px; }
  .hero__model{ max-height: 960px; }
  .fd{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .fd__content{ max-width: 1100px; }
}

/* Desktop: onda do hero sempre colada no bottom; celular perto do texto */
@media (min-width: 861px){
  .hero__wave{ top: 0; bottom: 0; height: 100%; }
}
@media (min-width: 1281px){
  .visibility{ --ph-left: calc((100vw - min(100vw, var(--container-w))) / 2 + 64px + (min(100vw, var(--container-w)) - 128px) * .4186 - min(40vw, 458px) + 10px); }
  .visibility__phone{ left: var(--ph-left); }
  .visibility__wave{ left: calc(var(--ph-left) - 225px); }
  .visibility__plant-left{ left: calc(var(--ph-left) - 104px); }
}

/* CTA final desktop: texto à esquerda alinhado ao container, botão à direita */
@media (min-width: 961px){
  .cta2__inner{ padding-left: clamp(20px, 4vw, 64px); grid-template-columns: 1fr; }
  .cta2__main{ display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-7); align-items: center; }
  .cta2__main > :not(.cta2__actions){ grid-column: 1; }
  .cta2__actions{ grid-column: 2; grid-row: 1 / span 3; justify-content: flex-end; }
  .cta2__body{ margin-bottom: 0; }
}

/* Hero: cita maior em telas grandes */
@media (min-width: 1281px){
  .hero__quote:not(.hero__quote--inline){ max-width: 360px; }
  .hero__quote:not(.hero__quote--inline) .h-md{ font-size: clamp(1.5rem, 1.5vw, 2rem); line-height: 1.15; }
  .hero__quote:not(.hero__quote--inline) .hero__quote-author .name{ font-size: 1.05rem; }
  .hero__quote:not(.hero__quote--inline) .hero__quote-author .role{ font-size: .8rem; }
}

/* CTA final: fundo com folhas */
.cta2{ background: #01241F url("../assets/bg-folhas.png") right center / cover no-repeat; }
@media (max-width: 960px){ .cta2{ background-position: 78% center; } }

@media (min-width: 761px) and (max-width: 1100px){ .wk-item{ flex-basis: 38%; } }

/* Trabajos: fundo com folhas */
.wk{ background: #01241F url("../assets/bg-folhas-2.png") left center / cover no-repeat !important; }
@media (max-width: 960px){ .wk{ background-position: 22% center !important; } }


/* Lia logo */
.lia__logo{ display:block; width: clamp(110px, 11vw, 180px); height:auto; margin: 4px 0 8px; }
@media (max-width: 860px){ .lia__logo{ margin: 4px auto 8px; width: clamp(110px, 32vw, 160px); } }

/* Lia: mockup MacBook */
.lia__media{ max-width: 760px; }
.lia__media img:not(.lia__plant):not(.lia__swirl){ position:relative; z-index:2; filter: drop-shadow(0 24px 32px rgba(15,61,57,.12)); }

/* Hover visible en botones */
.btn--outline:hover{ background: var(--antracita) !important; color: var(--perla) !important; border-color: var(--antracita) !important; }
.btn--outline.on-dark:hover{ background: var(--perla) !important; color: var(--antracita) !important; border-color: var(--perla) !important; }
.btn--light:hover{ background: var(--bubblegum) !important; color: var(--white) !important; }

/* ---------- Esencia con foto de Natalia (mantiene grid original) ---------- */
.visibility.es-photo{ padding-top: clamp(96px, 10vw, 160px) !important; background: var(--perla) !important; color: var(--antracita) !important; overflow:hidden; }
.es-photo h2, .es-photo .body-md{ color: var(--antracita) !important; }
.es-photo .text-muted{ color: var(--esmeralda) !important; }
.es-photo h2 .italic{ color: var(--antracita) !important; }
.es-photo h2 .dot{ background: var(--bubblegum) !important; }
.es-photo .visibility__col--aside{ display:block !important; border-color: rgba(51,48,48,.25) !important; }
.es-photo__img{ position:absolute; z-index:0; top:0; left:0; height:100%; width:50%; object-fit:cover; object-position: 70% 30%;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 40%); mask-image: linear-gradient(270deg, transparent 0, #000 40%); }
@media (max-width: 1280px) and (min-width: 861px){ .es-photo__img{ width:46%; } }
@media (min-width: 861px){
  .es-photo__img{ left:auto; right:0; width:52%; object-position: 72% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
  .es-photo .visibility__grid{ position:relative; z-index:1; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; row-gap: var(--sp-5); }
  .es-photo .visibility__col--right{ grid-column:1; grid-row:1; padding-left:0 !important; text-align:left; max-width: 560px; }
  .es-photo .visibility__col--aside{ grid-column:1; grid-row:2; align-self:start; }
  .es-photo .visibility__col--center{ display:none !important; }
}
@media (max-width: 860px){
  .visibility.es-photo{ padding-bottom: 0 !important; }
  .es-photo__img{ order:2; position:relative; width:100%; height:auto; aspect-ratio: 4/3; margin-top: var(--sp-6); object-position: 58% 20%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
}

/* ---------- Fundadora: foto editorial con degradé ---------- */
.fd{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important; background: #ECE1D6; min-height: clamp(420px, 34vw, 600px); }
.fd .seam-deco--fd{ display:none !important; }
.fd__media--photo{ position:relative; overflow:hidden; }
.fd__pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 86% 22%;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 72%, transparent 100%); }
.fd__content{ position:relative; z-index:1; }
.fd{ background:#292727 !important; color: var(--perla); }
.fd .fd__pic{ object-position: 46% 30%; }
@media (min-width: 721px){ .fd .fd__pic{ transform: translateX(11%) scale(1.15); transform-origin: 100% 20%; -webkit-mask-image:none; mask-image:none; }
  .fd .fd__media--photo{ -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 98%); mask-image: linear-gradient(90deg, #000 50%, transparent 98%); } }
.fd .fd__name, .fd .fd__role, .fd .fd__body{ color: var(--perla); }
.fd .fd__lead, .fd .fd__list li, .fd .fd__tag{ color:#BFD1C5 !important; }
.fd .fd__list{ border-color: rgba(244,239,233,.3); }
@media (max-width: 720px){
  .fd{ grid-template-columns: 1fr !important; }
  .fd__media.fd__media--photo{ aspect-ratio: 4/3.4; margin: 0; border-radius: 0; background: none; }
  .fd__pic{ object-position: 80% 18%; -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%); mask-image: linear-gradient(180deg, #000 65%, transparent 100%); }
}

/* ---------- Inside Dale Like (reels) ---------- */
.inside{ position:relative; overflow:hidden; background:#121212; color: var(--perla); min-height: clamp(560px, 44vw, 820px); display:flex; align-items:center; }
.inside__bg{ position:absolute; inset:0; z-index:0; }
.inside__slide{ position:absolute; inset:0; opacity:0; transition: opacity .7s ease; }
.inside__slide.is-active{ opacity:1; }
.inside__slide img, .inside__slide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 60% 30%; }
.inside__slide video{ opacity:0; transition: opacity .5s ease; }
.inside__slide video.is-ready{ opacity:1; }
.inside__shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(18,18,18,.96) 0%, rgba(18,18,18,.82) 30%, rgba(18,18,18,.35) 58%, rgba(18,18,18,.15) 100%); }
.inside__inner{ position:relative; z-index:2; width:100%; padding-block: clamp(56px, 6vw, 96px); }
.inside__copy{ max-width: 560px; }
.inside__tag{ color: var(--perla) !important; opacity:.9; margin:0 0 var(--sp-4); }
.inside__title{ font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height:1.02; letter-spacing:-.035em; font-weight:500; margin:0 0 var(--sp-4); color: var(--perla); }
.inside__title .italic{ color: var(--bubblegum); }
.inside__body{ font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height:1.55; max-width: 460px; margin:0 0 var(--sp-6); color: rgba(244,239,233,.88); text-wrap: pretty; }
.inside__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 6px; }
.inside__item{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns: 40px minmax(0,1fr); align-items:center; width:100%; padding: 7px 0; position:relative; color: rgba(244,239,233,.6); transition: color .25s ease; }
.inside__item::before{ content:none; }
.inside__num{ font-weight:700; font-size: .82rem; letter-spacing:.02em; }
.inside__txt{ display:flex; flex-direction:column; gap:1px; padding-left: 14px; border-left: 1px solid rgba(244,239,233,.25); }
.inside__txt strong{ font-weight:600; font-size: .9rem; color: inherit; }
.inside__txt small{ font-size: .74rem; opacity:.85; }
.inside__item:hover{ color: rgba(244,239,233,.9); }
.inside__item.is-active{ color: var(--perla); }
.inside__item.is-active .inside__num{ color: var(--bubblegum); }
.inside__item.is-active::before{ opacity:1; }
.inside__item.is-active .inside__txt{ border-left-color: var(--bubblegum); }
.inside__item:focus-visible{ outline: 2px solid var(--bubblegum); outline-offset: 4px; border-radius: 4px; }
.inside__play{ all:unset; cursor:pointer; position:absolute; z-index:3; left: 60%; top: 50%; translate: -50% -50%; width: clamp(72px, 6vw, 104px); aspect-ratio:1; border-radius:50%; background: rgba(244,239,233,.92); color: #121212; display:grid; place-items:center; box-shadow: 0 10px 40px rgba(0,0,0,.35); transition: transform .25s ease, background .25s ease; }
.inside__play svg{width: 36%;height:36%;margin-left: 0;}
.inside__play:hover{ transform: scale(1.08); background: var(--bubblegum); color: #fff; }
.inside__modal{ border:0; padding:0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; }
.inside__modal::backdrop{ background: rgba(10,10,10,.9); }
.inside__modal[open]{ display:grid; place-items:center; }
.inside__modal video{ max-width: min(92vw, 520px); max-height: 88vh; width:auto; height:auto; border-radius: 18px; background:#000; }
.inside__close{ all:unset; cursor:pointer; position:fixed; top: 20px; right: 24px; font-size: 40px; line-height:1; color: var(--perla); }
@media (max-width: 860px){
  .inside{ flex-direction:column; align-items:stretch; min-height:0; }
  .inside__bg{ position:relative; inset:auto; aspect-ratio: 4/5; }
  .inside__shade{ background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,0) 32%, rgba(18,18,18,1) 56%); }
  .inside__play{ left: 50%; top: 22%; }
  .inside__inner{ margin-top: -42%; padding-top: 0; }
  main section.inside{ text-align:left; }
  main section.inside :is(h2, p){ margin-left:0; margin-right:0; }
  .inside__item::before{ left:-10px; }
  .inside__list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; }
  .inside__item{ grid-template-columns: 28px minmax(0,1fr); align-items:start; }
  .inside__txt{ padding-left: 10px; }
}