/* =====================================================================
   PARIS COLCHÕES — LAYOUT 3 (definitivo)

   Proposta aprovada pelo cliente: paleta azul-noite + dourado + sálvia
   e areia marcando as seções, tipografia com serifa (Fraunces) no
   título e Manrope no corpo, formas mais macias. Carrega sempre —
   não depende mais de nenhum seletor nem de data-layout.

   As variáveis de cor (--c-ink, --ink, --amarelo etc.) já ficam
   definidas em :root dentro de includes/head.php. Este arquivo cuida
   só do peso visual: bordas mais finas, cantos arredondados, sombras
   suaves e a cor por seção.
   ===================================================================== */


/* =====================================================================
   1. MENOS PESO, MAIS CURVA
   ===================================================================== */

/* ---------- bordas de 2px viram 1px ---------- */
.border-2{ border-width:1px; }
.border-y-2{ border-top-width:1px; border-bottom-width:1px; }
.border-t-2{ border-top-width:1px; }
.border-b-2{ border-bottom-width:1px; }
.border-r-2{ border-right-width:1px; }
.border-b-\[3px\]{ border-bottom-width:2px; }

/* ---------- botões: sem sombra chapada, formato pílula ---------- */
.btn-amarelo,.btn-escuro,.btn-linha,.btn-claro{
  border-width:1px; border-radius:var(--r-btn); box-shadow:none; letter-spacing:.005em;
}
.btn-amarelo:hover{
  transform:translateY(-2px); box-shadow:var(--sombra); background:var(--amarelo-claro);
}
.btn-escuro:hover{
  transform:translateY(-2px); box-shadow:var(--sombra);
}
.btn-linha{ border-color:var(--linha); }
.btn-linha:hover{ border-color:var(--ink); }
.btn-amarelo:active,.btn-escuro:active{
  transform:translateY(0); box-shadow:none;
}
.btn-amarelo,.btn-escuro{ border-color:transparent; }
.btn-amarelo{ color:#241B00; }

/* ---------- cartões ---------- */
.cartao{
  border-width:1px; border-color:var(--linha);
  border-radius:var(--r-g); overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.cartao:hover{
  transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--ink);
}
.cartao img{ border-radius:0; border-bottom-width:1px; border-color:var(--linha); }
.cartao-escuro{ border-color:var(--ink); }
.cartao-plano{ border-radius:var(--r-m); }
.cartao-plano:hover{ box-shadow:var(--sombra); }

/* selo: fora do canto, virou etiqueta flutuante */
.selo{
  top:12px; right:12px; border:0; border-radius:999px; padding:.3rem .7rem;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* ---------- imagens, mapas, campos ---------- */
img,iframe{ border-radius:var(--r-m); }
header img,footer img,#menu-lateral img{ border-radius:0; }

.campo{
  border-width:1px; border-color:var(--linha); border-radius:var(--r-p);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.campo:focus{
  border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.05);
}
a:focus-visible,button:focus-visible,select:focus-visible{ border-radius:var(--r-p); }

/* ---------- detalhes ---------- */
.eyebrow{ border-radius:999px; }
.escala i{ border-radius:999px; }
.foto-pendente{ border-radius:var(--r-m); }
.prosa ul li::before{ border-radius:999px; }
.prosa a{ text-decoration-thickness:2px; }
.link-nav::after{ height:2px; border-radius:2px; background:var(--amarelo); }

/* cabeçalho: sombra chapada preta que o JS liga vira sombra suave */
#topo.shadow-\[0_2px_0_0_\#0B0B0A\]{
  box-shadow:0 10px 26px -20px rgba(0,0,0,.6) !important;
}
#topo{ background:rgba(251,250,247,.82); }

/* fita rolante: sem contorno grosso, fundo azul-noite, letra dourada */
.fita{ border-block-width:1px; background:var(--ink); border-block:0; }
.fita-trilho > span{ color:var(--amarelo); font-weight:600; }

/* botão flutuante do WhatsApp */
.fixed.bottom-4.right-4{
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
}


/* =====================================================================
   2. TIPOGRAFIA
   ===================================================================== */
.h-display{
  font-family:"Fraunces",Georgia,serif; font-weight:600;
  letter-spacing:-.012em; line-height:1.04;
}
.h-display-2{
  font-family:"Fraunces",Georgia,serif; font-weight:400;
  letter-spacing:-.005em; line-height:1.14;
}
.prosa h2,.prosa h3{
  font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:-.01em;
}
.eyebrow{
  font-family:"Manrope",system-ui,sans-serif; font-weight:600;
  font-size:11.5px; letter-spacing:.14em;
}
.prosa ol li::marker{ font-family:"Manrope",system-ui,sans-serif; }
.font-mono{ letter-spacing:.01em; }


/* =====================================================================
   3. COR POR SEÇÃO
   ===================================================================== */

/* faixas que antes eram amarelo-cheio viram areia: continuam separando
   a página, sem gritar. O dourado fica para os detalhes. */
section.bg-amarelo{ background:var(--areia); border-color:#E3D8C4; }
section.bg-paper2{ background:var(--salvia); border-color:#D6E0D8; }

/* a seção escura "encontre pelo problema" ganha profundidade */
section.bg-ink{ background:linear-gradient(165deg,#1B2334 0%,#232E45 100%); }
section.bg-ink li.bg-ink{ background:rgba(255,255,255,.035); }
footer.bg-ink{ background:#161D2C; }

/* grade quadriculada do hero dá lugar a um halo suave */
.grade-fundo{
  background-image:
    radial-gradient(60% 70% at 78% 18%, rgba(216,169,58,.20) 0%, transparent 65%),
    radial-gradient(55% 60% at 10% 85%, rgba(47,107,95,.14) 0%, transparent 60%);
  background-size:auto; opacity:1;
}

/* marcador atrás da palavra: dourado translúcido, mais fino */
.marca{
  background-image:linear-gradient(180deg,transparent 62%,rgba(216,169,58,.42) 62%,rgba(216,169,58,.42) 95%,transparent 95%);
}

/* ---------- FAQ em cartões separados ---------- */
.faq-item{
  background:#fff; border:1px solid var(--linha); border-radius:var(--r-m);
  margin-bottom:10px; padding:0 20px; transition:border-color .2s ease;
}
.faq-item[open]{ border-color:var(--oliva); }
.faq-item .sinal{ color:var(--oliva); }

/* ---------- bordas pretas viram hairline ---------- */
.border-ink{ border-color:var(--linha); }
section.bg-ink .border-ink{ border-color:rgba(255,255,255,.14); }


/* =====================================================================
   4. CELULAR
   ===================================================================== */
@media (max-width:640px){
  .btn-amarelo,.btn-escuro,.btn-linha,.btn-claro{ box-shadow:none; }
  .cartao{ border-radius:var(--r-m); }
  .faq-item{ padding:0 14px; }
}