/* Resulka — _shared/styles.css
 * Extraído por extração da landing-v8 (RES-171 C1 fundação).
 * Tokens canônicos do BRAND_BOOK §2: #5C2E1F (forja) / #3D3D3D (carvão) /
 * #CFCFCF (cimento) / #D8D8D8 (claro). Não duplique este CSS em outras
 * landings — referencie via <link rel="stylesheet" href="/_shared/styles.css">.
 */

:root { --forja:#5C2E1F; --carvao:#3D3D3D; --cimento:#CFCFCF; --claro:#D8D8D8; --paper:#E7E7E7; --maxw:1120px; }
* { box-sizing: border-box; }
body { margin:0; font-family:Inter,system-ui,sans-serif; color:var(--carvao); background:radial-gradient(circle at 80% 0%,rgba(92,46,31,.12),transparent 38%),linear-gradient(180deg,#d6d6d6 0%,var(--cimento) 100%); }
.wrap { width:min(var(--maxw),100% - 2rem); margin:0 auto; }
header { position:sticky; top:0; z-index:100; background:rgba(207,207,207,.86); border-bottom:1px solid rgba(61,61,61,.22); backdrop-filter:blur(6px); }
.head { padding:.9rem 0; display:flex; justify-content:space-between; align-items:center; }
.head svg { height:30px; width:auto; }
.chip { background:var(--forja); color:var(--claro); border-radius:999px; font-size:.78rem; padding:.38rem .68rem; font-weight:600; }
section { padding:3.3rem 0; }
.hero-grid { display:grid; gap:1.6rem; align-items:center; }
.kicker { font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--forja); }
h1 { margin:.55rem 0 .9rem; font:700 clamp(2rem,7.4vw,4rem)/.96 "Barlow Condensed",sans-serif; text-transform:uppercase; color:var(--forja); max-width:16ch; }
.sub { max-width:48ch; margin:0 0 1.4rem; font-size:clamp(1rem,2.2vw,1.2rem); }
.cta-group { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:.8rem 1.25rem; border-radius:12px; text-decoration:none; font-weight:700; font-family:inherit; font-size:1rem; transition:opacity .15s; }
.cta:hover { opacity:.88; }
.cta-main { background:var(--forja); color:var(--claro); }
.micro { margin-top:.7rem; font-size:.85rem; opacity:.75; }

/* Hero Visual */
.hero-visual { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); aspect-ratio: 4/3; background: #ddd; }
.hero-bg { position: absolute; inset: 0; z-index: 1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.9); }

.phone-mockup {
  position: absolute;
  z-index: 2;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  height: 86%;
  width: auto;
  aspect-ratio: 9/18;
  max-width: 42%;
  background: #000;
  border: 6px solid #222;
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* WhatsApp UI in CSS */
.wa-header { background: #075e54; color: #fff; padding: 12px 10px; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; }
.wa-avatar { width: 24px; height: 24px; border-radius: 50%; background: #ccc; }
.wa-body { flex: 1; background: #e5ddd5 url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); background-blend-mode: overlay; padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.wa-bubble { padding: 8px 10px; border-radius: 10px; font-size: 0.75rem; line-height: 1.3; max-width: 85%; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.wa-bubble::after { content: ''; position: absolute; top: 0; width: 0; height: 0; border: 8px solid transparent; }

.wa-recv { background: #fff; align-self: flex-start; border-top-left-radius: 0; }
.wa-recv::after { left: -8px; border-top-color: #fff; border-right-color: #fff; }

.wa-sent { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 0; }
.wa-sent::after { right: -8px; border-top-color: #dcf8c6; border-left-color: #dcf8c6; }

.wa-footer { background: #f0f0f0; padding: 8px; display: flex; gap: 8px; align-items: center; }
.wa-input { flex: 1; height: 24px; background: #fff; border-radius: 12px; }

.hero-card,.card,.note,details,.form-wrap { border:1px solid rgba(61,61,61,.22); border-radius:12px; background:var(--paper); }
.hero-card { padding:1rem; box-shadow:0 10px 0 rgba(61,61,61,.12); }
.hero-card h3,.card h3 { margin:0 0 .6rem; font-size:1.04rem; }
.hero-card ul { margin:0; padding-left:1rem; }
.hero-card li { margin-bottom:.45rem; }

.section-title { font:700 clamp(1.5rem,4.8vw,2.3rem)/1 "Barlow Condensed",sans-serif; text-transform:uppercase; color:var(--forja); margin:0 0 1rem; }
.cards { display:grid; gap:.9rem; }
.card { padding:1rem; border-left:5px solid var(--forja); display:flex; flex-direction:column; justify-content:space-between; }
.card p { margin:0 0 1rem; font-style:italic; font-size:.95rem; line-height:1.4; }
.card-meta { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.card-meta img { width: 32px; height: 32px; border-radius: 50%; background: var(--cimento); }
.card .cite { font-weight:700; font-size:.85rem; font-style:normal; color:var(--forja); }

.feature-grid { display: grid; gap: 2rem; align-items: center; }
.feature-img { border-radius: 12px; overflow: hidden; border: 1px solid rgba(61,61,61,.22); }
.feature-img img { width: 100%; height: auto; display: block; }

.note { padding:.9rem 1rem; position: relative; overflow: hidden; }
.note-bg { position: absolute; inset: 0; opacity: 0.15; z-index: 0; }
.note-bg img { width: 100%; height: 100%; object-fit: cover; }
.note-content { position: relative; z-index: 1; }

.form-wrap { padding:1rem; background:linear-gradient(180deg,#ececec 0%,#dfdfdf 100%); }
.testimony-qualified { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(61,61,61,.1); }
.testimony-qualified p { font-style: italic; font-size: 0.95rem; margin-bottom: 0.5rem; line-height: 1.4; }
.testimony-qualified .cite { font-weight: 700; font-size: 0.85rem; color: var(--forja); }
.honest-cite { opacity: 0.7; font-size: 0.8rem; margin-top: 0.5rem; display: block; }

form { display:grid; gap:.78rem; }
label { display:grid; gap:.32rem; font-weight:600; font-size:.95rem; }
input,select { min-height:52px; border-radius:10px; border:1px solid rgba(61,61,61,.33); font:inherit; padding:0 .78rem; background:#fff; }
.btn-submit { min-height:52px; border-radius:10px; border:none; font:inherit; font-weight:700; padding:0 1.25rem; cursor:pointer; background:var(--forja); color:var(--claro); }
.btn-alt { background:var(--claro); color:var(--carvao); border:1px solid rgba(61,61,61,.33); }
.btn-question { min-height:52px; border-radius:10px; border:1px solid rgba(61,61,61,.22); font:inherit; font-weight:700; padding:0 1.25rem; cursor:pointer; width:100%; margin-bottom:.65rem; text-align:left; }
.btn-question.primary { background:var(--forja); color:var(--claro); }
.btn-question.secondary { background:var(--claro); color:var(--carvao); }
.ok { margin-top:.9rem; display:none; background:#e4f1e5; border:1px solid #9dc8a5; color:#1f4f29; border-radius:10px; padding:.75rem; }
details { padding:.72rem .86rem; }
details + details { margin-top:.55rem; }
summary { cursor:pointer; font-weight:700; }
footer { padding:2rem 0 2.4rem; font-size:.9rem; opacity:.86; }
footer svg { height:26px; width:auto; display:block; margin-bottom:.6rem; }

@media (max-width:939px) {
  .hero-visual { aspect-ratio: 3/4; }
  .phone-mockup { height: 80%; max-width: 52%; right: 50%; transform: translate(50%, -50%); }
}

@media (min-width:940px){
  section{padding:4.3rem 0;}
  .hero-grid{grid-template-columns:1.2fr 1.1fr; gap:3rem;}
  .cards{grid-template-columns:repeat(3,1fr);}
  .feature-grid { grid-template-columns: 1fr 1.2fr; gap: 3rem; }
  .feature-grid.rev { grid-template-columns: 1.2fr 1fr; }
  .feature-grid.rev .feature-img { order: -1; }
  .head svg{height:36px;}
}