:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-ig:#e1306c;
  --ring: rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  color: var(--text);

  /* 🔹 Fundo apenas com imagem */
  background: url("./img/marmore_fundo.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  min-height: 100vh;
}

/* Caixa maior */
.card {
  width: 100%;
  max-width: clamp(320px, 95vw, 850px);
  background-color: rgba(17, 24, 39, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(16px, 2vw, 28px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: clamp(16px, 3vw, 36px);
  display: flex;
  justify-content: center;

  /* 🔹 Efeito vidro */
  backdrop-filter: blur(8px);
}


/* Largura útil comum (topo + grid) */
.content{
  width:100%;
  max-width:min(960px, 100%);
  margin-inline:auto;
  padding-inline:clamp(8px, 2vw, 24px);
  text-align:center;
}

/* Cabeçalho */
.header{
  display:flex;
  flex-wrap:wrap;  
  gap:clamp(12px, 2.5vw, 24px);
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}
.logo img{
  width:clamp(96px, 18vw, 160px);
  height:auto;
}
h1{
  margin:0;
  font-size:clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem);
}
.subtitle{
  color:var(--muted);
  margin-top:4px;
  font-size:clamp(0.95rem, 0.85rem + .4vw, 1.1rem);
}

.contact-grid{
  display:grid;
  gap:clamp(12px, 2vw, 24px);
  margin-top:clamp(16px, 2.5vw, 28px);
  width:100%;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  justify-items:center;
  align-items:stretch;
}

/* Caixas menores */
.field{
  position: relative;
  border:1px solid var(--ring);
  padding:clamp(12px, 2vw, 20px);
  border-radius:clamp(12px, 1.5vw, 18px);
  width:100%;
  max-width:560px; 
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow: hidden;
}

/* 🔹 Fundo translúcido separado da área de conteúdo */
.field::before{
  content:"";
  position:absolute;
  inset:0;
  background-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);                /* efeito vidro SÓ no fundo */
  -webkit-backdrop-filter: blur(10px);
  z-index:0;
}

/* 🔹 Garante que textos/ícones/botões fiquem nítidos por cima */
.field > *{
  position: relative;
  z-index: 1;
}

/* Linha interna */
.row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 1.8vw, 12px);
  width:100%;
  flex-wrap:wrap; 
}

/* Botões */
.btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:clamp(10px, 1.8vw, 14px) clamp(14px, 2.6vw, 18px);
  border-radius:12px;
  font-weight:600;
  border:1px solid var(--ring);
  transition: transform .06s ease;
  white-space:nowrap;
  font-size:clamp(.95rem, .9rem + .3vw, 1.05rem);
}
.btn:hover{ transform: translateY(-1px) }
.btn-ig{ background:rgba(225,48,108,.12); color:#ffd7e5; }
.btn-wa{ background:rgba(34,197,94,.12);  color:#d7ffe6; }

/* Ícone */
.icon{ width:clamp(18px, 2.2vw, 22px); height:clamp(18px, 2.2vw, 22px); display:inline-block }

/* Acessibilidade de movimento reduzido */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
}

/* Telas muito estreitas: força 1 coluna */
@media (max-width: 380px){
  .contact-grid{ grid-template-columns: 1fr; }
  .btn{ width:100%; }
}

/* Título bem branco */
.card h1{
  color:#ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Subtítulo menos “acinzentado” */
.card .subtitle{
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 1px rgba(0,0,0,.20);
}

/* Texto geral dentro do card (parágrafos, spans, links, labels) */
.card p,
.card span,
.card a,
.card label{
  color: rgba(255,255,255,.92);
}

/* Ícones (Instagram e WhatsApp) */
.icon {
  width: clamp(24px, 2.8vw, 30px);
  height: clamp(24px, 2.8vw, 30px);
  display: inline-block;
  color: #ffffff;
  transition: transform 0.15s ease;
}

.btn-ig,
.btn-wa{
  color:#ffffff;
}

/* Texto interno das caixas */
.field,
.field * {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Ícones dentro das caixas */
.field .icon {
  color: #ffffff !important;
  opacity: 1;
  filter: none;
}

/* Botões reforçados (cores sólidas e contraste ajustado) */
.btn-ig {
  background: rgba(225, 48, 108, 0.25);
  color: #ffffff !important;
}

.btn-wa {
  background: rgba(34, 197, 94, 0.25);
  color: #ffffff !important;
}

.btn-ig:hover {
  background: rgba(225, 48, 108, 0.35);
}

.btn-wa:hover {
  background: rgba(34, 197, 94, 0.35);
}

/* ===== ÍCONES INDIVIDUAIS ===== */

/* Ícone do WhatsApp */
.field:nth-child(1) .icon svg {
  width: 32px;   /* ajuste o tamanho aqui */
  height: 32px;
}

/* Ícone do Instagram */
.field:nth-child(2) .icon svg {
  width: 36px; 
  height: 36px;
}

.icon svg {
  transition: transform 0.2s ease;
}

.icon:hover svg {
  transform: scale(1.1);
}