/* Marartes - components.css */

/* ---------- Botão (menu) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem 1.6rem;border-radius:999px;border:0;font-weight:800;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;background:var(--azul);color:var(--preto);transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn:hover{background:var(--preto);color:var(--branco)}
.icone{width:1.3rem;height:1.3rem;flex:none}
.icone--grande{width:3rem;height:3rem}

/* ---------- Botão flutuante do WhatsApp ---------- */
.cta-wrap{position:fixed;z-index:45;left:50%;bottom:var(--cta-bottom);
  transform:translate3d(calc(-50% + var(--cta-x,0px)),var(--cta-y,0px),0);will-change:transform}
.cta{position:relative;display:inline-flex;align-items:center;gap:.65rem;padding:.95rem 2rem;border-radius:999px;
  background:var(--azul);color:var(--preto);font-weight:800;font-size:1.05rem;line-height:1.2;text-decoration:none;white-space:nowrap;
  box-shadow:0 .3rem .6rem rgba(0,0,0,.3);
  transition:transform .65s cubic-bezier(.34,1.7,.5,1),box-shadow .5s,background .2s,color .2s}   /* pouso com leve quique */
.cta:hover{background:var(--preto);color:var(--branco)}
.cta:focus-visible{outline:3px solid var(--branco);outline-offset:3px;box-shadow:0 0 0 6px var(--preto)}
/* sombra no "chão": afasta e some quando o botão levanta */
.cta-wrap::after{content:"";position:absolute;left:10%;right:10%;bottom:-.3rem;height:.8rem;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(6px);z-index:-1;
  transition:transform .65s cubic-bezier(.34,1.4,.5,1),opacity .5s;opacity:.7}
.cta-wrap.is-voando .cta{transform:translateY(-1.2rem) scale(1.07);box-shadow:0 1.7rem 2rem -.6rem rgba(0,0,0,.45);transition:transform .4s cubic-bezier(.2,.8,.25,1),box-shadow .4s,background .2s,color .2s}
.cta-wrap.is-voando::after{transform:translateY(1.2rem) scaleX(.7);opacity:.25;transition:transform .4s cubic-bezier(.2,.8,.25,1),opacity .4s}
@media (prefers-reduced-motion:reduce){.cta,.cta-wrap::after,.cta-wrap.is-voando .cta,.cta-wrap.is-voando::after{transition:none}}

/* ---------- Cabeçalho ---------- */
.header{position:fixed;z-index:50;top:max(.75rem,env(safe-area-inset-top,0px));left:var(--gutter);right:var(--gutter);--focus:var(--azul-escuro)}
.header__barra{position:relative;max-width:82rem;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem .6rem .35rem 1rem;border-radius:999px;color:var(--preto);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .25s,box-shadow .25s}
.header.is-scrolled .header__barra{background:rgba(255,255,255,.92);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.28)}
.header__logo{display:block;flex:none}
.header__logo img{height:2.9rem;width:auto}
.header__toggle{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--preto);cursor:pointer}
.header__toggle-icone{display:grid;gap:.28rem;width:1.2rem}
.header__toggle-icone i{display:block;height:2px;background:var(--branco);border-radius:2px;transition:transform .25s,opacity .25s}
.header.is-open .header__toggle-icone i:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
.header.is-open .header__toggle-icone i:nth-child(2){opacity:0}
.header.is-open .header__toggle-icone i:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}
.menu{display:none;position:absolute;top:calc(100% + .5rem);left:0;right:0;flex-direction:column;gap:.25rem;padding:.75rem;border-radius:var(--raio);background:rgba(255,255,255,.97);box-shadow:var(--sombra)}
.header.is-open .menu{display:flex}
.menu a{padding:.7rem 1rem;border-radius:var(--raio-pq);font-weight:700;text-decoration:none;color:var(--preto)}
.menu a:hover,.menu a[aria-current="true"]{background:var(--azul-suave)}
.menu .menu__cta{justify-content:center;margin-top:.25rem}
.menu .menu__cta:hover{background:var(--preto);color:var(--branco)}
@media (min-width:900px){
  .header__toggle{display:none}
  .menu{display:flex;position:static;flex-direction:row;align-items:center;padding:0;background:none;box-shadow:none;gap:.15rem}
  .menu a{padding:.5rem .95rem}
  .menu .menu__cta{margin:0 0 0 .5rem;padding:.6rem 1.3rem}
}

/* ---------- Eyebrow ---------- */
.eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:currentColor;transform:skewX(-30deg)}

/* ---------- Card base (todos iguais) ---------- */
.card{position:relative;border-radius:var(--raio);padding:2rem;box-shadow:var(--sombra);overflow:hidden;isolation:isolate}
.card>*:not(.pesponto){position:relative;z-index:1}
.card--azul{background:var(--azul);color:var(--preto);--focus:#000;--ink:#fff;--acc:#000;--fab:rgba(255,255,255,.2);--line:#fff}
.card--preto{background:var(--preto);color:var(--branco);--focus:var(--azul-claro);--ink:#fff;--acc:var(--azul);--fab:rgba(255,255,255,.08);--line:#fff}
.card--branco{background:var(--branco);color:var(--preto);--focus:var(--azul-escuro);--ink:#000;--acc:var(--azul);--fab:var(--azul-suave);--line:#000}
.card--azul h2,.card--preto h2{color:var(--branco)}
.card--branco h2{color:var(--azul)}
.card--azul .eyebrow{color:var(--preto)}
.card--preto .eyebrow{color:var(--azul-claro)}
.card--branco .eyebrow{color:var(--azul-escuro)}

/* Vidro: muita transparência, pouco embaçamento */
.card--vidro{color:var(--branco);background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(6px) saturate(1.25);backdrop-filter:blur(6px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1.5rem 3rem rgba(0,0,0,.22);text-shadow:0 1px 8px rgba(0,0,0,.4);
  --focus:var(--azul-claro);--ink:#fff;--acc:var(--azul-claro);--fab:rgba(255,255,255,.12);--line:#fff}
.card--vidro h2{color:var(--branco);text-shadow:0 .1rem .8rem rgba(0,0,0,.45)}
.card--vidro .eyebrow{color:var(--azul-claro);text-shadow:0 .1rem .6rem rgba(0,0,0,.5)}

/* Pesponto feito à mão (desenhado por js/handmade.js) */
.pesponto{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;color:inherit}
.pesponto path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 6 13 5 9 7 12 6;opacity:.55}
.card--vidro>.pesponto path{opacity:.5}

/* Ilustrações SVG (cores vêm das variáveis do card) */
.ilu{width:100%;height:auto}
.f-ink{fill:var(--ink)}.s-ink{stroke:var(--ink)}
.f-acc{fill:var(--acc)}.s-acc{stroke:var(--acc)}
.f-fab{fill:var(--fab)}.s-line{stroke:var(--line)}
.f-olho{fill:#111}.s-olho{stroke:#111}
.ilu *{transition:fill .35s,stroke .35s}

/* ---------- Cards de vidro que ganham cor só ao passar o mouse (.hv) ---------- */
.hv{transition:background .35s,color .35s,border-color .35s,transform .35s,box-shadow .35s}
.hv--azul{--cor:var(--azul);--txt:#000;--t-ink:#fff;--t-acc:#000;--t-fab:rgba(255,255,255,.22);--t-line:#fff;--focus:#000}
.hv--preto{--cor:#000;--txt:#fff;--t-ink:#fff;--t-acc:var(--azul);--t-fab:rgba(255,255,255,.08);--t-line:#fff}
.hv--branco{--cor:#fff;--txt:#000;--t-ink:#000;--t-acc:var(--azul);--t-fab:var(--azul-suave);--t-line:#000;--focus:var(--azul-escuro)}

/* cards de serviço (dentro do card de vidro) */
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;min-height:0;padding:1.5rem;border-radius:1.25rem;overflow:hidden;isolation:isolate;
  color:var(--branco);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);text-shadow:0 1px 8px rgba(0,0,0,.4);
  --ink:#fff;--acc:var(--azul-claro);--fab:rgba(255,255,255,.1);--line:#fff}
.tile>*:not(.pesponto){position:relative;z-index:1}
.tile>.pesponto,.social>.pesponto{opacity:0;transition:opacity .4s}   /* nos cards internos a costura só aparece com a cor */
.tile h3{font-size:1.25rem;color:inherit}
.tile p{font-size:.98rem;color:inherit}
.tile__texto{display:grid;gap:.55rem}
.tile__ilu{flex:1 1 auto;min-height:0;display:grid;place-items:center}
.tile__ilu .ilu{height:100%;max-height:11.5rem;width:auto;max-width:100%}
@media (hover:hover){
  .hv:hover{background:var(--cor);color:var(--txt);border-color:transparent;--ink:var(--t-ink);--acc:var(--t-acc);--fab:var(--t-fab);--line:var(--t-line)}
  .hv:hover :is(h2,h3,.eyebrow){text-shadow:none}
  .hv:hover,.hv:hover p{text-shadow:none}
  .tile:hover>.pesponto,.social:hover>.pesponto{opacity:1}
  .hv--branco:hover h2{color:var(--azul)}
  .hv--branco:hover h3{color:var(--azul-escuro)}
  .hv--branco:hover .eyebrow{color:var(--azul-escuro)}
  .hv--branco:hover .destaque{border-left-color:var(--azul)}
  .hv--azul:hover :is(h2,h3,.eyebrow,.icone){color:var(--preto)}
  .tile:hover,.social:hover{transform:translateY(-.45rem);box-shadow:0 1.3rem 2.6rem rgba(0,0,0,.4)}
}
@media (hover:none){   /* sem mouse não existe "passar por cima": as cores ficam sempre visíveis */
  .hv{background:var(--cor);color:var(--txt);border-color:transparent;--ink:var(--t-ink);--acc:var(--t-acc);--fab:var(--t-fab);--line:var(--t-line)}
  .hv :is(h2,h3,.eyebrow){text-shadow:none}
  .hv,.hv p{text-shadow:none}
  .tile>.pesponto,.social>.pesponto{opacity:1}
  .hv--branco h2{color:var(--azul)}
  .hv--branco h3{color:var(--azul-escuro)}
  .hv--branco .eyebrow{color:var(--azul-escuro)}
  .hv--branco .destaque{border-left-color:var(--azul)}
  .hv--azul :is(h2,h3,.eyebrow,.icone){color:var(--preto)}
}
@media (prefers-reduced-motion:reduce){.hv{transition:background .2s,color .2s}.tile:hover,.social:hover{transform:none}}

/* ---------- Controles da rolagem lateral ---------- */
.controles{display:none}
@media (min-width:768px){
  .controles{position:fixed;z-index:40;left:var(--gutter);right:var(--gutter);bottom:max(1rem,env(safe-area-inset-bottom,0px));max-width:82rem;margin-inline:auto;display:flex;align-items:center;gap:1rem;color:var(--branco);text-shadow:0 1px 6px rgba(0,0,0,.7)}
  .controles__dica{font-size:.75rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
  .controles__progresso{flex:1;height:2px;background:rgba(255,255,255,.4);box-shadow:0 0 4px rgba(0,0,0,.5)}
  .controles__progresso span{display:block;height:100%;width:100%;background:var(--azul);transform-origin:left;transform:scaleX(0);box-shadow:0 0 6px var(--azul)}
  .controles__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background .2s,transform .2s}
  .controles__btn:hover:not(:disabled){background:var(--azul);transform:scale(1.06)}
  .controles__btn:disabled{opacity:.4;cursor:default}
  .controles__btn svg{width:1.2rem;height:1.2rem}
  .controles__num{font-family:var(--fonte-titulo);font-size:1.15rem;min-width:4.2rem;text-align:right}
}

/* ---------- Carrossel do portfólio ---------- */
.carousel{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.9rem;min-height:0;height:100%}
.carousel__palco{position:relative;min-height:14rem;overflow:hidden;touch-action:pan-y;cursor:grab;border-radius:var(--raio-pq);-webkit-user-select:none;user-select:none}
.carousel__palco.is-arrastando{cursor:grabbing}
.carousel__palco:focus-visible{outline-offset:-3px}
.cartao{position:absolute;left:50%;top:50%;margin:0;border-radius:1rem;overflow:hidden;background:#222;border:6px solid var(--branco);box-shadow:0 1rem 2.2rem rgba(0,0,0,.55);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s;will-change:transform}
.cartao img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.cartao::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--sombra-cartao,0);transition:opacity .55s;pointer-events:none}
.cartao[aria-hidden="true"]{cursor:pointer}
.carousel__rodape{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.carousel__legenda h3{font-size:1.1rem;color:var(--branco)}
.carousel__legenda p{font-size:.9rem;color:var(--azul-claro);font-weight:700}
.carousel__legenda a{display:inline-block;margin-top:.25rem;font-size:.9rem;font-weight:700;color:var(--branco);text-underline-offset:.25em}
.carousel__ctrl{display:flex;align-items:center;gap:.75rem}
.seta{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;transition:background .2s,color .2s}
.seta:hover{background:var(--azul);color:var(--preto);border-color:var(--azul)}
.seta svg{width:1.1rem;height:1.1rem}
.pontos{display:flex;gap:.45rem;align-items:center}
.pontos button{width:.65rem;height:.65rem;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:background .2s,transform .2s}
.pontos button[aria-current="true"]{background:var(--azul);transform:scale(1.35)}
.carousel__vazio{padding:3rem 1rem;text-align:center;color:#E8E8E8}
@media (prefers-reduced-motion:reduce){.cartao,.cartao::after{transition:none}}