/* ===========================================================================
   FRAMASA — product.css
   Estilos das páginas de produto (carregar APÓS styles.css).
   Reaproveita tokens, .wrap, .section, .eyebrow, .btn, .faq, .lede de styles.css
   =========================================================================== */

/* ---- Dropdown "Seguros" na nav (desktop) -------------------------------- */
.nav__links .has-mega{ position:relative; }
.nav__links .mega-trigger{ display:inline-flex; align-items:center; gap:.35em; background:none; border:0; font:inherit; font-weight:600; font-size:.96rem; color:var(--ink); padding:.4em 0; cursor:pointer; }
.nav__links .mega-trigger svg{ width:14px; height:14px; transition:transform .25s var(--ease); color:var(--gold); }
.nav__links .has-mega:hover .mega-trigger svg,
.nav__links .has-mega:focus-within .mega-trigger svg{ transform:rotate(180deg); }
.mega{
  position:absolute; top:calc(100% + 14px); left:0; transform:translateY(8px);
  width:min(620px,90vw); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden; pointer-events:none; transition:.22s var(--ease); z-index:70;
}
.mega::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.has-mega:hover .mega, .has-mega:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mega a{ display:flex; gap:.8rem; align-items:flex-start; padding:.7rem .8rem; border-radius:var(--r); transition:background .18s; }
.mega a:hover{ background:var(--cream); }
.mega a::after{ content:none; }
.mega .mi{ width:38px; height:38px; flex:none; border-radius:10px; background:var(--gold-tint); color:var(--gold); display:grid; place-items:center; }
.mega .mi svg{ width:20px; height:20px; }
.mega b{ font-family:var(--ff-display); font-weight:700; font-size:.95rem; color:var(--navy); display:block; line-height:1.2; }
.mega span{ font-size:.8rem; color:var(--muted); line-height:1.3; }

/* group label inside mobile drawer */
.drawer .d-group{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:1.3rem 0 .2rem; }
.drawer a.d-sub{ font-family:var(--ff-display); font-weight:700; font-size:1.12rem; color:var(--navy); padding:.55rem 0; border-bottom:1px solid var(--line); }

/* ---- Breadcrumb --------------------------------------------------------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:.5em; align-items:center; font-size:.85rem; color:var(--muted); margin-bottom:1.4rem; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--gold); }
.crumbs .sep{ opacity:.5; }
.crumbs span[aria-current]{ color:var(--navy); font-weight:600; }

/* ---- Product hero (navy, conversion-focused) ----------------------------- */
.phero{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.phero .wrap{ padding-block:clamp(28px,5vw,52px) clamp(44px,7vw,80px); }
.phero__grid{ display:grid; gap:clamp(28px,5vw,52px); align-items:center; grid-template-columns:1fr; }
.phero__cat{ margin-bottom:1rem; color:var(--gold-bright); }
.phero__icon{ width:60px; height:60px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:var(--gold-bright); display:grid; place-items:center; margin-bottom:1.2rem; }
.phero__icon svg{ width:32px; height:32px; }
.phero h1{ font-size:clamp(2.1rem,5vw,3.4rem); margin-bottom:1rem; color:#fff; }
.phero h1 .em{ color:var(--gold-bright); }
.phero__intro{ font-size:1.12rem; color:rgba(255,255,255,.75); max-width:52ch; margin-bottom:1.8rem; }
.phero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.phero__flame{ position:absolute; right:-20px; bottom:-30px; width:clamp(160px,24vw,320px); opacity:.1; pointer-events:none; z-index:0; }
.phero__col{ position:relative; z-index:2; }
.phero__facts{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:1.4rem 1.5rem; display:grid; gap:1px; align-self:start; position:relative; z-index:2; }
.phero__facts .fact{ display:flex; gap:1rem; align-items:flex-start; padding:.95rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.phero__facts .fact:last-child{ border-bottom:0; }
.phero__facts .fact svg{ width:22px; height:22px; color:var(--gold-bright); flex:none; margin-top:2px; }
.phero__facts .fact b{ display:block; font-family:var(--ff-display); color:#fff; font-size:1rem; line-height:1.2; }
.phero__facts .fact span{ font-size:.88rem; color:rgba(255,255,255,.6); }
/* breadcrumb on navy */
.phero .crumbs{ color:rgba(255,255,255,.4); }
.phero .crumbs a{ color:rgba(255,255,255,.4); }
.phero .crumbs a:hover{ color:var(--gold-bright); }
.phero .crumbs span[aria-current]{ color:rgba(255,255,255,.7); }
.phero .crumbs .sep{ opacity:.35; }
.phero .eyebrow::before{ background:var(--gold-bright); }
/* hero trust strip */
.phero__trust{ display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); position:relative; z-index:2; }
.phero__trust .ht{ display:flex; gap:.5rem; align-items:center; }
.phero__trust .ht svg{ width:17px; height:17px; color:var(--gold-bright); flex:none; }
.phero__trust .ht span{ font-size:.86rem; color:rgba(255,255,255,.6); }
.phero__trust .ht b{ color:#fff; font-weight:700; }

/* ---- Prose / como funciona --------------------------------------------- */
.psec-head{ max-width:58ch; margin-bottom:clamp(26px,3.5vw,42px); }
.psec-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:.7rem; }
.prose{ max-width:68ch; display:grid; gap:1.1rem; }
.prose p{ color:var(--ink); font-size:1.06rem; line-height:1.7; }
.prose p .lead{ font-size:1.16rem; }
.prose strong{ color:var(--navy); }
.prose h3{ font-size:1.3rem; margin-top:1rem; }
.prose ul.ticks{ display:grid; gap:.7rem; margin-top:.3rem; }
.prose ul.ticks li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1.02rem; color:var(--ink); }
.prose ul.ticks li svg{ width:21px; height:21px; color:var(--gold); flex:none; margin-top:3px; }

/* ---- Coberturas grid ---------------------------------------------------- */
.cover-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
.cover-item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; transition:transform .2s var(--ease), box-shadow .2s; }
.cover-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.cover-item .ci-ico{ width:44px; height:44px; border-radius:12px; background:var(--gold-tint); color:var(--gold); display:grid; place-items:center; margin-bottom:.3rem; }
.cover-item .ci-ico svg{ width:24px; height:24px; }
.cover-item h3{ font-size:1.12rem; }
.cover-item p{ color:var(--muted); font-size:.96rem; }

/* ---- O que você precisa para cotar (steps) ------------------------------ */
.reqs{ background:var(--navy); color:#fff; border-radius:var(--r-xl); padding:clamp(28px,4vw,52px); position:relative; overflow:hidden; }
.reqs__flame{ position:absolute; right:-30px; bottom:-30px; width:180px; opacity:.14; }
.reqs .eyebrow{ color:var(--gold-bright); }
.reqs h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin:.7rem 0 .6rem; max-width:22ch; }
.reqs__lede{ color:rgba(255,255,255,.78); max-width:54ch; margin-bottom:2rem; }
.reqs__list{ display:grid; gap:14px; grid-template-columns:1fr; position:relative; z-index:2; }
.reqs__item{ display:flex; gap:1rem; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:1.1rem 1.2rem; }
.reqs__item .num{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--gold); color:#23252b; display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; font-size:.92rem; }
.reqs__item b{ display:block; font-family:var(--ff-display); color:#fff; font-size:1rem; line-height:1.25; margin-bottom:.15rem; }
.reqs__item span{ color:rgba(255,255,255,.72); font-size:.92rem; }
.reqs__cta{ margin-top:1.8rem; position:relative; z-index:2; }

/* ---- Contato: form + info ---------------------------------------------- */
.pcontact{ background:var(--cream-2); scroll-margin-top:96px; }
.pcontact__grid{ display:grid; gap:clamp(26px,4vw,48px); grid-template-columns:1fr; }
.cform{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow); }
.cform h3{ font-size:1.4rem; margin-bottom:.4rem; }
.cform .sub{ color:var(--muted); font-size:.96rem; margin-bottom:1.5rem; }
.field{ display:grid; gap:.4rem; margin-bottom:1rem; }
.field label{ font-size:.86rem; font-weight:600; color:var(--navy); }
.field label .req{ color:var(--gold); }
.field input, .field textarea, .field select{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--cream); border:1.5px solid var(--line);
  border-radius:var(--r); padding:.8rem .95rem; width:100%; transition:border-color .18s, box-shadow .18s; -webkit-appearance:none;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-tint); background:#fff; }
.field textarea{ resize:vertical; min-height:104px; }
.field-row{ display:grid; gap:0 1rem; grid-template-columns:1fr; }
.cform .consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; color:var(--muted); margin:.4rem 0 1.2rem; }
.cform .consent input{ width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--gold); }
.cform .consent a{ color:var(--gold); text-decoration:underline; }
.cform .btn{ width:100%; }
.cform .form-note{ font-size:.8rem; color:var(--muted); text-align:center; margin-top:.9rem; }

/* Leads360 embed — o card abraça o formulário (sem padding/altura em excesso) */
.cform--leads360{ padding:clamp(12px,1.6vw,18px); }
.cform--leads360 h3{ font-size:1.2rem; margin-bottom:.25rem; }
.cform--leads360 .sub{ font-size:.9rem; margin-bottom:.85rem; }
.cform--leads360 iframe{ display:block; border-radius:10px; }
.field.error input, .field.error textarea{ border-color:#c0432f; box-shadow:0 0 0 3px rgba(192,67,47,.12); }
.field .err-msg{ font-size:.78rem; color:#c0432f; display:none; }
.field.error .err-msg{ display:block; }

.cinfo{ display:grid; gap:1.4rem; align-content:start; }
.cinfo h3{ font-size:1.4rem; }
.cinfo .cinfo-lede{ color:var(--muted); }
.cinfo__list{ display:grid; gap:1rem; }
.cinfo__list li{ display:flex; gap:.9rem; align-items:flex-start; }
.cinfo__list .ico{ width:44px; height:44px; flex:none; border-radius:12px; background:var(--paper); border:1px solid var(--line); color:var(--gold); display:grid; place-items:center; }
.cinfo__list .ico svg{ width:21px; height:21px; }
.cinfo__list b{ display:block; font-family:var(--ff-display); color:var(--navy); font-size:1rem; }
.cinfo__list a, .cinfo__list span{ color:var(--ink); font-size:.98rem; }
.cinfo__list a:hover{ color:var(--gold); }
.cinfo__map{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.cinfo__map iframe{ height:280px; }
.cinfo__map .ph{ height:180px; border-radius:0; }

/* ---- Product feature image (banner abaixo do hero) --------------------- */
.pfeature{ padding-top:clamp(28px,5vw,52px); }
.pfeature img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }

/* ---- Como funciona: texto + imagem lado a lado ------------------------- */
.how-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.92fr); gap:clamp(28px,4vw,56px); align-items:stretch; margin-top:1.5rem; }
.how-grid .prose{ margin:0; max-width:none; }
.how-media{ min-height:100%; }
.how-media img{ width:100%; height:100%; min-height:360px; object-fit:cover; object-position:center 35%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); display:block; }
@media (max-width:880px){
  .how-grid{ grid-template-columns:1fr; gap:26px; }
  .how-media{ order:-1; }
  .how-media img{ height:auto; min-height:0; aspect-ratio:16/10; }
}

/* ---- Blog / conteúdos --------------------------------------------------- */
.blog-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
.post-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.post-card__media{ aspect-ratio:16/10; }
.post-card__media .ph{ border-radius:0; width:100%; height:100%; }
.post-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card__body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card__tag{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.post-card h3{ font-size:1.18rem; line-height:1.25; }
.post-card p{ color:var(--muted); font-size:.94rem; }
.post-card .meta{ margin-top:auto; padding-top:.7rem; font-size:.82rem; color:var(--muted); display:flex; gap:.5rem; align-items:center; }
.post-card .link-arrow{ font-size:.9rem; margin-top:.3rem; }

/* ---- Related products --------------------------------------------------- */
.related-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
.related-card{ display:flex; gap:1rem; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; transition:border-color .2s, transform .2s; }
.related-card:hover{ border-color:var(--gold); transform:translateX(3px); }
.related-card .rc-ico{ width:42px; height:42px; flex:none; border-radius:11px; background:var(--gold-tint); color:var(--gold); display:grid; place-items:center; }
.related-card .rc-ico svg{ width:22px; height:22px; }
.related-card b{ font-family:var(--ff-display); color:var(--navy); font-size:1rem; }
.related-card span{ display:block; font-size:.85rem; color:var(--muted); }
.related-card .rc-arrow{ margin-left:auto; color:var(--gold); }

/* ---- Mid-page CTA band -------------------------------------------------- */
.mid-cta{ background:linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); color:#23252b; padding-block:clamp(36px,5vw,60px); text-align:center; position:relative; overflow:hidden; }
.mid-cta .wrap{ position:relative; z-index:2; display:grid; gap:.7rem; justify-items:center; }
.mid-cta .eyebrow{ color:rgba(35,37,43,.5); }
.mid-cta .eyebrow::before{ background:rgba(35,37,43,.3); }
.mid-cta h2{ color:#23252b; font-size:clamp(1.5rem,3vw,2.2rem); max-width:26ch; margin-inline:auto; }
.mid-cta p{ color:rgba(35,37,43,.65); max-width:48ch; font-size:1.02rem; }
.mid-cta .btn{ margin-top:.5rem; }

/* ---- Article (blog post template) -------------------------------------- */
.article{ max-width:760px; }
.article__head{ margin-bottom:2rem; }
.article h1{ font-size:clamp(2rem,4.5vw,3rem); line-height:1.08; margin:.8rem 0 1rem; }
.article__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; color:var(--muted); font-size:.9rem; align-items:center; }
.article__hero{ aspect-ratio:16/9; margin:1.6rem 0 2rem; }
.article__hero .ph{ height:100%; }
.article__hero img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--r-lg); }
.article__body{ display:grid; gap:1.2rem; }
.article__body p{ font-size:1.08rem; line-height:1.75; color:var(--ink); }
.article__body h2{ font-size:1.5rem; margin-top:1.4rem; }
.article__body h3{ font-size:1.2rem; margin-top:.8rem; }
.article__body ul{ display:grid; gap:.6rem; padding-left:1.2rem; list-style:disc; }
.article__body li{ font-size:1.04rem; color:var(--ink); }
.article__body blockquote{ border-left:3px solid var(--gold); padding:.4rem 0 .4rem 1.2rem; color:var(--navy); font-size:1.15rem; font-style:italic; }
.article__cta{ margin-top:2.4rem; background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem 1.8rem; display:flex; flex-direction:column; gap:1rem; }
.article__cta b{ font-family:var(--ff-display); font-size:1.2rem; color:var(--navy); }

/* ---- Responsive --------------------------------------------------------- */
@media (min-width:600px){
  .field-row{ grid-template-columns:1fr 1fr; }
  .cover-grid{ grid-template-columns:repeat(2,1fr); }
  .reqs__list{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .related-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .phero__grid{ grid-template-columns:1.4fr .85fr; }
  .cover-grid{ grid-template-columns:repeat(3,1fr); }
  .blog-grid{ grid-template-columns:repeat(3,1fr); }
  .related-grid{ grid-template-columns:repeat(3,1fr); }
  .pcontact__grid{ grid-template-columns:1.1fr .9fr; align-items:start; }
}