/* Melhorias de visual (nov/2026).
   Carregado por último no <head><meta charset="utf-8"> pelo index.php. Para voltar ao visual
   anterior, basta remover a linha que carrega este arquivo. */

:root{
  --brand:#ff4000;          /* laranja da marca (detalhes e destaques) */
  --brand-btn:#d93a00;      /* laranja dos botões: texto branco legível */
  --brand-btn-hover:#b73000;
  --brand-soft:#fff1ea;
  --heading:#2b2f3a;
  --ink:#4f5563;
  --radius:16px;
  --shadow:0 2px 6px rgba(30,34,45,.05),0 10px 30px rgba(30,34,45,.07);
  --shadow-hover:0 4px 10px rgba(30,34,45,.07),0 18px 40px rgba(30,34,45,.12);
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-title:"Poppins","Inter",system-ui,Arial,sans-serif;
}

/* ---------- Tipografia ---------- */
body{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.hero-slide h1,.hero-slide h2,.years,.rating-number,.instagram-card-name,
#criacao-de-sites h2,#criacao-de-sites h3{font-family:var(--font-title);color:var(--heading)}
h1,.hero-slide h1,.hero-slide h2{font-weight:700;letter-spacing:-1.5px}
h2{font-weight:700;letter-spacing:-.8px}
h3{font-weight:600;letter-spacing:-.2px}
nav{font-weight:500}

/* Títulos pequenos acima dos títulos ("ASSISTÊNCIA TÉCNICA", "QUEM CONHECE..."):
   todos no mesmo estilo, em laranja */
.eyebrow,.num,.section-head [data-edit="official-catalog-kicker"],#criacao-de-sites .pf-kicker,
#servicos .service-intro{
  font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--brand-btn);line-height:1.4
}
#servicos .service-intro{margin:0 0 12px}

/* Seções escuras: títulos em branco */
.instagram-copy h2,.contact h2,.contact h3{color:#fff}
.instagram-copy .eyebrow,.contact .eyebrow{color:#ffb08f;opacity:1}

/* ---------- Botões ---------- */
.btn,#criacao-de-sites .pf-cta{
  background:var(--brand-btn);color:#fff;border-radius:999px;font-weight:600;
  box-shadow:0 6px 16px rgba(217,58,0,.22);transition:background .2s,transform .2s,box-shadow .2s
}
.btn:hover,#criacao-de-sites .pf-cta:hover{
  background:var(--brand-btn-hover);color:#fff;transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(183,48,0,.28)
}
.contact .route-button{background:var(--brand-btn);border-color:var(--brand-btn);border-radius:999px}
.contact .route-button:hover{background:var(--brand-btn-hover);border-color:var(--brand-btn-hover)}
.contact .contact-actions .wa{border-radius:999px;box-shadow:none}

/* Setas e "Pausar" dos carrosséis: botões redondos discretos */
.hero-buttons button,.review-controls button,#criacao-de-sites .pf-controls button{
  border-radius:999px;border:1px solid #d5d7dc;background:#fff;color:var(--heading);
  transition:border-color .2s,color .2s
}
.hero-buttons button:hover,.review-controls button:hover,#criacao-de-sites .pf-controls button:hover{
  border-color:var(--brand);color:var(--brand-btn)
}
.hero-buttons button:disabled,.review-controls button:disabled{opacity:.45}

/* ---------- Faixa de benefícios (logo abaixo do topo) ---------- */
.benefit-strip>div{display:flex;flex-direction:column;align-items:center}
.benefit-strip>div::before{
  content:"";width:48px;height:48px;border-radius:50%;margin-bottom:12px;
  background:var(--brand-soft) center/24px no-repeat
}
.benefit-strip>div:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d93a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E")}
.benefit-strip>div:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d93a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22M5 15h4'/%3E%3C/svg%3E")}
.benefit-strip>div:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d93a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
.benefit-strip strong{font-family:var(--font-title);color:var(--heading)}

/* ---------- Cartões de produtos ---------- */
.category{border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #eceef1}
.category:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.category-media img.category-photo{transition:transform .5s}
.category:hover .category-media img.category-photo{transform:scale(1.04)}
.category-text{padding:16px 22px 26px}
.category span{color:var(--brand-btn)}

/* ---------- Cartões de assistência técnica (com ícones) ---------- */
.card{
  position:relative;border-top:0;border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid #eceef1;padding:32px 30px 28px;transition:transform .2s,box-shadow .2s
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card::before{
  content:"";width:56px;height:56px;border-radius:14px;margin-bottom:20px;
  background:var(--brand) center/28px no-repeat;box-shadow:0 8px 18px rgba(255,64,0,.25)
}
.services .card:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")}
.services .card:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E")}
.services .card:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='13' rx='1.5'/%3E%3Cpath d='M8 21h8M12 16v5'/%3E%3C/svg%3E")}
.num{margin-bottom:12px}
.card h3{font-size:22px;line-height:1.25}
.card a{color:var(--brand-btn)}
.card a:hover{color:var(--brand-btn-hover)}

/* ---------- Avaliações ---------- */
.review-card{border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #eceef1}
.quote-mark{color:var(--brand)}
.rating-number{font-weight:700;color:var(--heading)}

/* ---------- Sobre: "19+ anos" em destaque ---------- */
.years{display:flex;align-items:baseline;gap:4px;font-weight:800;color:var(--brand)}
.about-title .years{font-size:clamp(64px,7vw,96px);letter-spacing:-4px}
.about-title .years>span:first-child{font-size:inherit;color:var(--brand);margin:0}
.about-title .years>span:last-child{margin-left:10px}
.years>span:last-child{font-family:var(--font-body);font-size:17px;font-weight:600;letter-spacing:0;color:var(--ink);max-width:120px;line-height:1.3}
.about-photo img{border-radius:var(--radius);box-shadow:var(--shadow)}
.values span{background:var(--brand-soft);color:var(--brand-btn-hover);font-weight:600}

/* ---------- Portfólio de sites ---------- */
#criacao-de-sites .pf-card{border-radius:var(--radius);box-shadow:var(--shadow);border-color:#eceef1}
#criacao-de-sites .live-demo button[aria-pressed=true]{background:var(--heading);border-color:var(--heading)}

/* ---------- Contato e mapa ---------- */
.contact{border-radius:24px}
.contact-map{border-radius:var(--radius)}

@media(max-width:760px){
  h1,.hero-slide h1,.hero-slide h2{letter-spacing:-1px}
  .card::before{width:50px;height:50px;margin-bottom:16px}
  .about-title .years{font-size:60px;letter-spacing:-2px}
  .contact{border-radius:0}
}

/* ---------- Efeito de aparecer ao rolar (usado por assets/reveal.js) ---------- */
html,body{overflow-x:clip}
.reveal{
  opacity:0;transform:translate3d(0,56px,0);
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal[data-reveal="left"]{transform:translate3d(-80px,0,0)}
.reveal[data-reveal="right"]{transform:translate3d(80px,0,0)}
.reveal[data-reveal="zoom"]{transform:scale(.9)}
.reveal.is-visible{opacity:1;transform:none}
@media(max-width:760px){
  .reveal[data-reveal="left"]{transform:translate3d(-40px,0,0)}
  .reveal[data-reveal="right"]{transform:translate3d(40px,0,0)}
}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Catálogo online (seção Produtos, abaixo das categorias) ---------- */
.catalog-cta{
  --cta-py:clamp(28px,4vw,48px);--cta-px:clamp(24px,4.5vw,56px);
  margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px 48px;
  padding:var(--cta-py) var(--cta-px);border-radius:var(--radius);
  background:var(--heading);color:#e6e8ec;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.catalog-cta::after{
  content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,64,0,.28),rgba(255,64,0,0) 70%);pointer-events:none
}
.catalog-cta-copy{position:relative;z-index:1;min-width:0}
.catalog-cta-media{
  grid-column:1/-1;display:block;position:relative;overflow:hidden;
  margin:calc(var(--cta-py)*-1) calc(var(--cta-px)*-1) -6px;aspect-ratio:2000/750;background:var(--heading)
}
.catalog-cta-media img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(var(--cta-zoom,1));transform-origin:50% 60%;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 99%)
}
.catalog-cta .catalog-cta-kicker{
  margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ff8a5c
}
.catalog-cta h3{
  margin:0;font-family:var(--font-title);font-size:clamp(1.55rem,2.8vw,2.25rem);line-height:1.15;
  letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere
}
.catalog-cta .catalog-cta-text{margin:12px 0 0;max-width:620px;font-size:16px;line-height:1.55;color:#d3d6dc}
.catalog-cta-perks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.catalog-cta-perks li{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:15px;font-weight:500;color:#fff
}
.catalog-cta-perks li::before{content:"✓";font-weight:700;color:#ff8a5c}
.catalog-cta-perks li:empty{display:none}
.catalog-cta .catalog-cta-button{
  position:relative;z-index:1;gap:10px;padding:17px 30px;font-size:17px;white-space:nowrap;
  box-shadow:0 10px 28px -10px rgba(255,64,0,.65)
}
.catalog-cta .catalog-cta-button:focus-visible{outline-color:#fff}
.catalog-cta-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:900px){
  .catalog-cta{grid-template-columns:1fr}
  .catalog-cta .catalog-cta-button{justify-self:start}
}
@media(max-width:560px){
  .catalog-cta{margin-top:20px;--cta-py:26px;--cta-px:20px}
  .catalog-cta-media{aspect-ratio:4/3}
  .catalog-cta-media img{object-position:56% center}
  .catalog-cta-perks li{font-size:14px;padding:7px 12px}
  .catalog-cta .catalog-cta-button{justify-self:stretch;white-space:normal}
}

/* Cartões de categorias com a pessoa "saindo" da foto (efeito 3D) */
.categories > .category:has(> .category-media.pop){overflow:visible;margin-top:16%}
.categories .category-media.pop{height:auto;aspect-ratio:5/3;overflow:visible;position:relative}
.categories .category-media.pop .pop-bg{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.categories .category-media.pop img.category-photo{top:auto;bottom:0;left:0;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;background:none;padding:0;transition:filter .45s,transform .45s}
.categories .category-media .pop-person{position:absolute;left:0;top:auto;right:auto;bottom:0;width:100%;max-width:none;height:auto;aspect-ratio:4/3;z-index:2;pointer-events:none;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;filter:drop-shadow(0 6px 10px rgb(0 0 0 / .16))}
.category:hover .category-media.pop img.category-photo{transform:none;filter:brightness(.82) blur(1.5px)}
.category:hover .category-media .pop-person{transform:scale(1.07);filter:drop-shadow(0 14px 18px rgb(0 0 0 / .25))}
/* Se a foto for trocada pelo painel, o recorte antigo não combina mais: some e fica só a foto */
.category-media.pop:has(img.custom-image) .pop-person{display:none}
@media(prefers-reduced-motion:reduce){.categories .category-media .pop-person,.categories .category-media.pop img.category-photo{transition:none}}

/* Efeito 3D genérico: foto de fundo cortada no topo + recorte (pessoas/produtos) "saindo" dela */
.pop-wrap{--pop:.2;position:relative;overflow:visible;z-index:1}
.pop-wrap .pop-bg{position:absolute;inset:0;overflow:hidden;display:block;border-radius:inherit}
.pop-wrap .pop-bg img,.pop-wrap .pop-person{position:absolute;left:0;right:auto;top:auto;bottom:0;width:100%;max-width:none;height:calc(100% / (1 - var(--pop)));aspect-ratio:auto;object-fit:cover}
.pop-wrap .pop-person{z-index:2;pointer-events:none;filter:drop-shadow(0 6px 10px rgb(0 0 0 / .18));transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
.pop-wrap .pop-bg img{transition:filter .45s}
.pop-wrap:has(img.custom-image) .pop-person{display:none}

/* Catálogo online */
.catalog-cta:has(.pop-wrap){overflow:visible;margin-top:calc(28px + 7.5%)}
.catalog-cta:has(.pop-wrap)::after{right:0;top:0;width:220px;height:220px;z-index:0;border-top-right-radius:var(--radius);background:radial-gradient(circle at 100% 0,rgba(255,64,0,.28),rgba(255,64,0,0) 70%)}
.catalog-cta-media.pop-wrap{aspect-ratio:2000/600;border-radius:var(--radius) var(--radius) 0 0;background:none}
.catalog-cta-media.pop-wrap .pop-bg{background:var(--heading)}
.catalog-cta-media.pop-wrap .pop-bg img,.catalog-cta-media.pop-wrap .pop-person{object-position:center;transform:scale(var(--cta-zoom,1));transform-origin:50% 60%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 99%);mask-image:linear-gradient(180deg,#000 62%,transparent 99%)}
@media(max-width:560px){
  .catalog-cta:has(.pop-wrap){margin-top:calc(20px + 19%)}
  .catalog-cta-media.pop-wrap{aspect-ratio:4/3}
  .catalog-cta-media.pop-wrap .pop-bg img,.catalog-cta-media.pop-wrap .pop-person{object-position:56% center}
}

/* Foto da equipe */
.team-photo.pop-wrap{--pop:.22;overflow:visible;aspect-ratio:32/7.02;margin-top:4%}
.team-photo.pop-wrap .pop-bg img,.team-photo.pop-wrap .pop-person{object-position:50% 50%}
.team-photo.pop-wrap .pop-person{transform:none;filter:none;transition:none}
@media(prefers-reduced-motion:reduce){.pop-wrap .pop-person,.pop-wrap .pop-bg img{transition:none}}

/* Foto da equipe com fundo transparente (imagem pronta), com zoom suave ao passar o mouse */
.team-photo.team-zoom{overflow:visible;aspect-ratio:1920/540}
.team-photo.team-zoom img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.team-photo.team-zoom:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.team-photo.team-zoom img{transition:none}}

/* Catálogo online com imagem pronta de fundo transparente: produtos saem por cima do bloco, zoom suave no mouse */
.catalog-cta-media.cta-solo img{position:absolute;left:0;right:auto;top:auto;bottom:0;width:100%;height:125%;object-fit:cover;object-position:50% 100%;transform:scale(var(--cta-zoom,1));transform-origin:50% 60%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.catalog-cta-media.cta-solo{clip-path:inset(-60% 0 0 0)}
.catalog-cta:hover .catalog-cta-media.cta-solo img{transform:scale(calc(var(--cta-zoom,1) * 1.04))}
@media(max-width:560px){.catalog-cta-media.cta-solo img{object-position:56% 100%}}
@media(prefers-reduced-motion:reduce){.catalog-cta-media.cta-solo img{transition:none}}