/* AlphaMine Glass / Operation — style.css
   Paleta e tipografia da identidade AlphaMine. */

/* Fontes no próprio site (sem Google Fonts: mais rápido e sem enviar dados do visitante) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format('woff2')}

:root {
  --f-titulo: 'Montserrat', system-ui, sans-serif;
  --f-texto: 'Manrope', system-ui, sans-serif;
  --f-destaque: 'Instrument Serif', Georgia, serif;
  --gold: #D4A017;
  --gold-light: #E3B843;
  --bg-0: #0A0D10;
  --bg-1: #0E1116;
  --bg-2: #14171A;
  --cream: #F6F1E7;
  --text-0: #F2F0EA;
  --text-1: #DEE1E4;
  --text-2: #A9B4BE;
  --text-3: #5A6773;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--f-texto);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.accent { font-family: var(--f-destaque); font-style: italic; font-weight: 400; }
.eyebrow { font-family: var(--f-texto); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

.btn-gold:hover { background: var(--gold-light) !important; }
.btn-ghost:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.nav-link:hover { color: var(--gold) !important; }

@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pulse-dot { animation: pulse 1.8s ease-in-out infinite; }

.step { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.step:hover { transform: translateY(-4px); border-color: var(--gold) !important; box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.35), 0 0 28px -4px rgba(212, 160, 23, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.7); background-color: rgba(212, 160, 23, 0.04) !important; }
@media (prefers-reduced-motion: reduce) { .step, .step:hover { transition: none; transform: none; } }

details.acc summary { cursor: pointer; list-style: none; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc .chev { transition: transform .25s ease; }
details.acc[open] .chev { transform: rotate(45deg); }
details.acc[open] summary { border-bottom-color: transparent !important; }

/* ---------- Responsivo — tablet / mobile grande (≤960px) ---------- */
@media (max-width: 960px) {
  .util-bar, .header, .frentes-bar, .contato-bar, .footer-cols { padding-left: 20px !important; padding-right: 20px !important; }
  .header .nav-links { display: none !important; }
  .hero-text { max-width: 100% !important; padding: 0 20px !important; }
  .hero-card { display: none !important; }
  h1 { font-size: 32px !important; }
  .section-pad { padding: 56px 20px !important; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr !important; }
  .quem-somos-row { flex-direction: column !important; gap: 32px !important; }
  .quem-somos-row > div { flex: none !important; width: 100% !important; }
  .quem-somos-img { height: 260px !important; }
  .footer-cols { flex-direction: column !important; gap: 32px !important; }

  /* Utility bar: texto longo não cabia ao lado do telefone — agora trunca com reticências */
  .util-bar { height: auto !important; min-height: 40px; padding-top: 8px !important; padding-bottom: 8px !important; gap: 10px; }
  .util-eyebrow { flex: 1 1 auto; min-width: 0; }
  .util-eyebrow .eyebrow { display: block; font-size: 9.5px !important; }

  /* Header: logo, Instagram e botão brigavam por espaço — ícone social e botão saem daqui,
     o WhatsApp passa a viver dentro do menu mobile, aberto pelo hamburger */
  .header { padding-top: 0 !important; padding-bottom: 0 !important; }
  .header-logo { gap: 8px !important; flex: 1 1 auto; min-width: 0; }
  .header-logo-word { width: 118px !important; height: 19px !important; }
  .header-ig { display: none !important; }
  .header-cta { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
  .mobile-menu-btn:hover { border-color: var(--gold) !important; }
  .mobile-nav-link:hover { color: var(--gold) !important; }

  /* Hero: altura fixa de 740px numa tela estreita fazia o cover cortar quase toda a foto —
     agora a altura acompanha a largura (proporção) e o enquadramento prioriza a cena de trabalho */
  .hero-media { height: auto !important; aspect-ratio: 3 / 4; }
  .hero-img { object-position: 66% 42% !important; }

  /* O texto do hero passa a ocupar quase a largura toda da tela — o degradê horizontal, pensado
     para o layout largo do desktop, deixava o lado direito do texto com pouco contraste sobre a foto.
     Uma camada vertical mais forte, mais escura perto do título e dos botões, resolve a legibilidade
     em qualquer largura de texto e ainda abre um respiro no topo/base do bloco. */
  .hero-scrim-h { background: linear-gradient(180deg, rgba(10,13,16,0.62) 0%, rgba(10,13,16,0.4) 45%, rgba(10,13,16,0.58) 100%) !important; }
  .hero-scrim-v { background: linear-gradient(180deg, rgba(10,13,16,0.45) 0%, rgba(10,13,16,0.08) 26%, rgba(10,13,16,0.18) 62%, rgba(10,13,16,0.62) 100%) !important; }
  .hero-text { gap: 20px !important; justify-content: center !important; }
  .hero-subtitle { font-size: 21px !important; }

  /* A faixa amarela ficava colada no botão "Como funciona" em cima e no título da seção
     seguinte embaixo — um respiro dos dois lados evita a sensação de tudo grudado. */
  .hero-media { margin-bottom: 34px !important; }
  #servicos { padding-top: 92px !important; }

  /* CTA final: título e lista não devem forçar altura de grid de uma coluna */
  .cta-left { height: auto !important; gap: 24px !important; }

  /* Contato: em várias linhas, os traços verticais de separação ficavam soltos no fim de
     cada linha — vira uma lista vertical centralizada, sem os traços. */
  .contato-bar { flex-direction: column !important; gap: 14px !important; padding-top: 24px !important; padding-bottom: 24px !important; }
  .contato-divider { display: none !important; }
}

/* ---------- Responsivo — celular pequeno (≤480px) ---------- */
@media (max-width: 480px) {
  h1 { font-size: 27px !important; }
  .section-pad { padding: 44px 16px !important; }
  .util-bar, .header, .frentes-bar, .contato-bar, .footer-cols { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-text { padding: 0 16px !important; gap: 18px !important; }
  .hero-text > .hero-ctas { flex-direction: column !important; align-items: stretch !important; }
  .hero-text a.btn-gold, .hero-text a.btn-ghost { text-align: center; }
  .util-eyebrow .eyebrow { font-size: 8.5px !important; }
  .header-logo-word { width: 96px !important; height: 15px !important; }
  .hero-media { aspect-ratio: 4 / 5.4; }
  .quem-somos-img { height: 200px !important; }
  .frentes-marquee span { font-size: 12px !important; }
  .hero-subtitle { font-size: 19px !important; }
  .hero-text p { font-size: 15px !important; line-height: 1.6 !important; }
  .hero-media { margin-bottom: 26px !important; }
  #servicos { padding-top: 76px !important; }
}

/* Rodapé: links legais */
.rodape-legal { font-size: 12.5px; color: #5A6773; }
.rodape-legal a, .ck-prefs-link { color: #A9B4BE; text-decoration: underline; text-underline-offset: 2px; }
.ck-prefs-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ck-prefs-link:hover, .rodape-legal a:hover { color: var(--gold); }

/* elementos com o atributo hidden ficam escondidos mesmo quando a classe define display */
[hidden]{display:none!important}

/* ---------- aviso de cookies (LGPD), nas cores da AlphaMine ---------- */

.ck-banner{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;width:min(920px,calc(100% - 32px));display:flex;align-items:center;gap:20px;padding:18px 20px;border-radius:20px;background:#0D110E;border:1px solid rgba(212,160,23,.35);box-shadow:0 24px 70px rgba(0,0,0,.6);animation:ckin .5s ease}
@keyframes ckin{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.ck-text{flex:1;font-size:14px;line-height:1.55;color:#C9D0CB}
.ck-text b{color:var(--text-0)}
.ck-text a{text-decoration:underline;text-underline-offset:2px}
.ck-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ck-btn{min-height:44px;padding:0 18px;border-radius:999px;font-family:var(--f-texto);font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s}
.ck-ok{background:var(--gold);color:#14171A}
.ck-ok:hover{background:var(--gold)}
.ck-ghost{background:transparent;color:var(--text-0);border-color:rgba(255,255,255,.2)}
.ck-ghost:hover{border-color:var(--gold);color:var(--gold)}
.ck-link{background:transparent;color:#A3ABA6;padding:0 10px}
.ck-link:hover{color:var(--text-0)}
.ck-overlay{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:16px}
.ck-dialog{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border-radius:24px;background:#0D110E;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:14px}
.ck-dialog h2{margin:0;font-family:var(--f-titulo);font-size:24px;font-weight:700}
.ck-dialog > p{margin:0;font-size:14px;line-height:1.55;color:#A3ABA6}
.ck-opt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border-radius:16px;background:#070907;border:1px solid rgba(255,255,255,.08);cursor:pointer}
.ck-opt b{display:block;font-size:15px;margin-bottom:2px}
.ck-opt span{font-size:13px;line-height:1.5;color:#8A938E}
.ck-always{font-size:12px!important;font-weight:700;color:var(--gold)!important;white-space:nowrap}
.ck-switch{appearance:none;-webkit-appearance:none;flex-shrink:0;width:48px;height:28px;border-radius:999px;background:#2A322D;position:relative;cursor:pointer;transition:background .2s;margin:0}
.ck-switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#F5F7F5;transition:transform .2s ease}
.ck-switch:checked{background:var(--gold)}
.ck-switch:checked::after{transform:translateX(20px);background:#14171A}
.ck-switch:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ck-dialog .ck-actions{justify-content:flex-end;margin-top:6px}
body.ck-open .wa-float{opacity:0;pointer-events:none}
.ck-prefs-link{background:none;border:0;padding:0;font:inherit;color:var(--text-2);cursor:pointer}
.ck-prefs-link:hover{color:var(--gold)}
@media (max-width:760px){
  .ck-banner{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .ck-actions{justify-content:stretch}
  .ck-banner .ck-ok,.ck-banner .ck-ghost{flex:1}
  .ck-banner .ck-link{order:3;width:100%}
}
@media (prefers-reduced-motion:reduce){.ck-banner{animation:none}}

/* Link para o Perfil no Google (depoimentos) */
.link-google { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.link-google:hover { color: var(--text-0); }

/* Antes e depois (serviços executados) */
.ad-intro { margin: 0; font-size: 14px; line-height: 1.6; color: #5C5344; }
.ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
.ad-card { margin: 0; background: #FFFFFF; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px -18px rgba(20,23,26,0.18); }
.ad-par { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #14171A; }
.ad-foto { position: relative; }
.ad-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ad-selo { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 100px; background: rgba(10,13,16,0.82); color: #F2F0EA; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; }
.ad-selo-depois { background: var(--gold); color: #14171A; }
.ad-legenda { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.ad-frente { color: #8A6410; font-size: 10.5px; }
.ad-texto { font-size: 14px; line-height: 1.55; color: #14171A; font-weight: 600; }
.ad-cta { display: flex; justify-content: center; margin-top: 36px; }
/* número ímpar de cards: o último fica centralizado */
.ad-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
@media (max-width: 760px) {
  .ad-grid { grid-template-columns: 1fr; gap: 18px; }
  .ad-card:last-child:nth-child(odd) { width: 100%; }
  .ad-legenda { padding: 14px 16px 18px; }
}

/* Galeria "Nosso trabalho em campo": no celular vira uma faixa que desliza para o lado */
@media (max-width: 960px) {
  .galeria { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin: 0 -20px; padding: 0 20px 8px; -webkit-overflow-scrolling: touch; }
  .galeria > figure { flex: 0 0 72%; scroll-snap-align: center; }
  .galeria .x91 { height: 340px; }
}
@media (max-width: 480px) { .galeria { margin: 0 -16px; padding: 0 16px 8px; } }

/* Telas mais largas que 1440px: os fundos das seções vão até a borda da tela
   e o conteúdo continua alinhado numa coluna de 1440px (sem faixas escuras nas laterais) */
@media (min-width: 1441px) {
  .wrap { max-width: none; }
  .util-bar, .header, .contato-bar, .section-pad:not(.x93) {
    padding-left: calc(50% - 656px) !important;
    padding-right: calc(50% - 656px) !important;
  }
  .hero-text { margin-left: calc(50% - 720px); }
}