/* ==========================================================================
   JKM SEGUROS PRIME — PROTÓTIPO
   Layout conforme mockup aprovado. Valores vêm do design system.
   Grid canônico: canvas 1920 · container 1192 · 16 col · gutter 24.
   ========================================================================== */

@font-face{
  font-family:"Manrope";
  src:url("../Manrope-Variable.woff2") format("woff2-variations");
  font-weight:200 800;font-display:swap;
}

:root{
  --marsala-100:#f1ebef;
  --marsala-300:#c7bbc4;   /* Figma: Marasala/4 */
  --marsala-400:#a894a1;
  --marsala-500:#8a7281;
  --marsala-600:#705767;
  --marsala-700:#5a4352;
  --marsala-800:#412f3b;
  --marsala-900:#2b2128;   /* Figma: Marasala/10 */
  --neutral-300:#dddadc;
  --neutral-600:#6f676c;
  --neutral-900:#232321;
  --paper:#f7f7f8;
  --ink:#40323b;                 /* tom dos tiles de ícone entregues pelo cliente */

  --bg:#ffffff;
  --text:var(--neutral-900);
  --text-muted:var(--neutral-600);
  --text-accent:var(--marsala-600);
  --action:var(--marsala-700);
  --action-hover:var(--neutral-900);
  --border:var(--neutral-300);

  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --text-label:12px; --text-caption:14px; --text-ui:15px;
  --text-body:17px; --text-body-lg:19px; --text-lead:22px;
  --text-h4:27px; --text-h3:34px; --text-h2:42px; --text-h1:52px;

  --weight-light:300; --weight-regular:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700; --weight-black:800;
  --tracking-label:.22em; --tracking-heading:-.025em; --tracking-display:-.035em;

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px;
  --section-y:120px;

  --container:1192px;
  --gutter:24px;
  --radius-md:8px;
  --radius-xl:22px;

  /* Chanfro da marca — mesma diagonal do símbolo, usada em fotos e blocos */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:180ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-width:320px;overflow-x:hidden;background:var(--paper);
  font-family:var(--font);font-size:var(--text-body);line-height:1.65;
  color:var(--text);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{width:min(var(--container),calc(100vw - 80px));margin:0 auto}

/* ---------- tipografia ------------------------------------------------- */

.eyebrow{
  font-size:var(--text-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-5);
}
h1,h2,h3,h4{font-weight:var(--weight-black);color:var(--text);letter-spacing:var(--tracking-heading)}
.h-display{font-size:var(--text-h1);line-height:1.1;letter-spacing:var(--tracking-display)}
.h-section{font-size:var(--text-h2);line-height:1.16}
.h-card{font-size:var(--text-lead);font-weight:var(--weight-bold);line-height:1.3}
.lead{font-size:var(--text-body-lg);font-weight:var(--weight-light);line-height:1.6;color:var(--text-muted)}
p{margin-bottom:var(--space-4)}
p:last-child{margin-bottom:0}
.muted{color:var(--text-muted)}
.small{font-size:var(--text-ui)}

/* ---------- botões ------------------------------------------------------ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;padding:16px 30px;font-family:inherit;
  font-size:var(--text-ui);font-weight:var(--weight-bold);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn--primary{background:var(--action);color:#fff}
.btn--primary:hover{background:var(--action-hover)}
.btn--light{background:#fff;color:var(--text)}
.btn--light:hover{background:var(--marsala-100)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--action);color:var(--action)}
.btn--mauve{background:var(--marsala-500);color:#fff}
.btn--mauve:hover{background:var(--marsala-400)}
.btn--sm{padding:12px 22px;font-size:var(--text-caption)}

/* Link "Ver soluções" + quadrado de seta (ícone entregue pelo cliente) */
.seta-link{display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:var(--text-ui);font-weight:var(--weight-bold);color:var(--text)}
.seta-link img{width:24px;height:24px;transition:transform var(--dur) var(--ease)}
.seta-link:hover img{transform:translateX(3px)}

/* ---------- grafismo de linha (fundo) ----------------------------------- */
/* Contornos do chevron da marca, bem apagados, ancorados nas margens. */

.linhas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.linhas svg{position:absolute;stroke:var(--marsala-400);fill:none;stroke-width:1;opacity:.5}

/* ---------- header ------------------------------------------------------ */

.header{background:var(--bg);position:relative;z-index:30}
.header__inner{width:min(var(--container),calc(100vw - 80px));margin:0 auto;height:140px;
  display:flex;align-items:center;gap:var(--space-8)}
.header__logo img{height:42px}
.nav{display:flex;align-items:center;gap:var(--space-10);margin-left:auto}
.nav a{font-size:var(--text-ui);font-weight:var(--weight-medium);color:var(--text)}
.nav a:hover{color:var(--action)}

.nav-toggle{display:none;width:40px;height:40px;flex:none;border:0;background:none;
  cursor:pointer;position:relative;padding:0;margin-left:auto}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--text);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav-toggle span{top:19px}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.header.is-open .nav-toggle span{background:transparent}
.header.is-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
.header.is-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero -------------------------------------------------------- */
/* Foto sangrando + painel marsala chanfrado por cima (canto sup-esq e inf-dir). */

.hero{position:relative;min-height:715px;display:flex;align-items:center;isolation:isolate}
.hero__foto{position:absolute;inset:0;z-index:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero__painel{
  position:absolute;top:0;bottom:0;left:0;width:55%;z-index:1;
  background:var(--marsala-500);
  clip-path:polygon(22% 0, 100% 0, 100% 85%, 81.5% 100%, 0 100%, 0 34%);
}
.hero__inner{position:relative;z-index:2;width:min(var(--container),calc(100vw - 80px));
  margin:0 auto;padding:var(--space-16) 0}
.hero__content{max-width:520px}
.hero h1{margin-bottom:var(--space-5)}
.hero .lead{color:rgba(255,255,255,.92);margin-bottom:var(--space-5);max-width:26em}
.hero .small{color:rgba(255,255,255,.86);max-width:30em;line-height:1.6}
.hero .btn{margin-top:var(--space-8)}

/* ---------- seções ------------------------------------------------------ */

.section{padding:var(--section-y) 0;position:relative}
.section--paper{background:var(--paper)}

/* ---------- foto chanfrada ---------------------------------------------- */
/* Corte diagonal derivado do símbolo. Sempre no canto superior esquerdo. */

.foto-chanfro{clip-path:polygon(16% 0, 100% 0, 100% 100%, 0 100%, 0 22%)}

/* ---------- A parceria -------------------------------------------------- */

.split{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:var(--gutter);
  align-items:center;position:relative;z-index:1}
.split__texto{grid-column:1 / span 7}
.split__texto h2{margin-bottom:var(--space-6)}
.split__texto .btn{margin-top:var(--space-4)}
.split__foto{grid-column:8 / span 9;position:relative}
.split__foto img{width:100%;height:440px;object-fit:cover}
/* faixa diagonal marsala espiando atrás do canto inferior direito */
.split__foto::after{content:"";position:absolute;right:-58px;bottom:-84px;
  width:260px;height:260px;background:var(--marsala-800);z-index:-1;
  clip-path:polygon(100% 0, 100% 38%, 38% 100%, 0 100%)}

/* ---------- Nossas soluções --------------------------------------------- */

.sec-head{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:var(--gutter);
  align-items:end;margin-bottom:var(--space-16);position:relative;z-index:1}
.sec-head__titulo{grid-column:1 / span 9}
.sec-head__apoio{grid-column:11 / span 6}
.sec-head__apoio p{font-size:var(--text-ui);color:var(--text-muted)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);
  position:relative;z-index:1}
.card__foto{width:100%;height:230px;object-fit:cover;margin-bottom:var(--space-6);
  clip-path:polygon(0 0, 100% 0, 100% 74%, 88% 100%, 0 100%)}
.card h3{margin-bottom:var(--space-3)}
.card p{font-size:var(--text-ui);color:var(--text-muted);margin-bottom:var(--space-6);min-height:84px}

/* ---------- Faixa de públicos ------------------------------------------- */

.publicos{background:var(--marsala-300);padding:var(--section-y) 0;position:relative}
.publico{background:#fff;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));
  gap:var(--gutter);align-items:center;margin-bottom:var(--space-10);position:relative;z-index:1}
.publico:last-child{margin-bottom:0}
.publico__texto{grid-column:2 / span 8;padding:var(--space-20) 0}
.publico__texto h2{font-size:var(--text-h3);line-height:1.2;margin-bottom:var(--space-6)}
.publico__texto p{font-size:var(--text-ui);color:var(--text-muted)}
.publico__texto .btn{margin-top:var(--space-6)}
/* foto recuada dentro do card (sem chanfro — o Figma usa retângulo) */
.publico__foto{grid-column:11 / span 5;align-self:stretch;
  padding:var(--space-16) 0 var(--space-5)}
.publico__foto img{width:100%;height:100%;min-height:440px;object-fit:cover}

/* ---------- Diferenciais ------------------------------------------------ */

.dif-head{text-align:center;margin-bottom:var(--space-16);position:relative;z-index:1}
.dif-head .eyebrow{margin-bottom:var(--space-4)}
.difs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-10);
  position:relative;z-index:1}
.dif img{width:52px;height:52px;margin-bottom:var(--space-6)}
.dif h3{font-size:var(--text-body-lg);line-height:1.3;margin-bottom:var(--space-3);min-height:52px}
.dif p{font-size:var(--text-caption);color:var(--text-muted);line-height:1.6}
.rule{border:0;border-top:1px solid var(--border);margin:var(--section-y) 0 0}

/* ---------- Colagem + história ------------------------------------------ */

.colagem{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.colagem img{width:100%;object-fit:cover}
.colagem .grande{grid-column:span 2;height:250px}
.colagem .peq{height:200px}

/* ---------- CTA --------------------------------------------------------- */

.cta{background:var(--marsala-900);border-radius:32px;
  padding:var(--space-12) var(--space-16);text-align:center;position:relative;z-index:1}
.cta h2{color:#fff;font-size:var(--text-h3);margin-bottom:var(--space-4)}
.cta p{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto var(--space-3);font-size:var(--text-ui)}
.cta p.forte{color:#fff;font-weight:var(--weight-bold);margin-bottom:var(--space-6)}

/* ---------- footer ------------------------------------------------------ */

.footer{background:#fff;padding:var(--space-24) 0 var(--space-8)}
.footer__top{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:var(--gutter);
  padding-bottom:var(--space-16)}
.footer__marca{grid-column:1 / span 5}
.footer__marca img.logo{height:42px;margin-bottom:var(--space-5)}
.footer__marca p{font-size:var(--text-ui);color:var(--text-muted);max-width:30ch;
  margin-bottom:var(--space-6)}
.social{display:flex;gap:var(--space-3)}
.social img{width:38px;height:38px;transition:opacity var(--dur) var(--ease)}
.social a:hover img{opacity:.75}
.footer__col{grid-column:span 3}
.footer__col:nth-of-type(2){grid-column:7 / span 3}
.footer__col:nth-of-type(3){grid-column:10 / span 3}
.footer__col:nth-of-type(4){grid-column:13 / span 4}
.footer__col h4{font-size:var(--text-label);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;margin-bottom:var(--space-5)}
.footer__col li{margin-bottom:var(--space-3);font-size:var(--text-ui);color:var(--text-muted)}
.footer__col a:hover{color:var(--action)}
.footer__bottom{border-top:1px solid var(--border);padding-top:var(--space-6);
  text-align:center;font-size:var(--text-caption);color:var(--text-muted)}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width:1279px){
  :root{--section-y:96px;--text-h1:38px;--text-h2:32px;--text-h3:27px}
  .container,.header__inner,.hero__inner{width:calc(100vw - 64px)}
  .split__foto img{height:360px}
}

@media (max-width:1023px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .difs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
  .card p,.dif h3{min-height:0}
}

@media (max-width:900px){
  :root{--section-y:72px;--text-h1:30px;--text-h2:26px;--text-h3:22px;--text-lead:19px}
  .container,.header__inner,.hero__inner{width:calc(100vw - 40px)}
  .header__inner{height:88px}
  .header__logo img{height:30px}

  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:var(--space-2);margin-left:0;
    background:#fff;border-bottom:1px solid var(--border);
    box-shadow:0 12px 40px rgba(35,35,33,.08);padding:var(--space-6) 20px var(--space-8);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
  .header.is-open .nav{opacity:1;visibility:visible;transform:translateY(0)}
  .nav a{padding:var(--space-3) 0;width:100%}
  .nav .btn{margin-top:var(--space-4)}

  /* hero empilha: faixa de foto em cima, bloco marsala com o texto embaixo */
  .hero{min-height:0;display:block}
  .hero__foto{position:relative;height:260px}
  .hero__painel{display:none}
  .hero__inner{position:static;width:100%;background:var(--marsala-500);
    padding:var(--space-12) 0 var(--space-16)}
  .hero__content{max-width:none;width:calc(100vw - 40px);margin:0 auto}

  .split,.sec-head,.publico,.footer__top{grid-template-columns:minmax(0,1fr)}
  .split__texto,.split__foto,.sec-head__titulo,.sec-head__apoio,
  .publico__texto,.publico__foto,
  .footer__marca,.footer__col,
  .footer__col:nth-of-type(2),.footer__col:nth-of-type(3),.footer__col:nth-of-type(4){grid-column:1 / -1}
  .split__foto{margin-top:var(--space-8)}
  .split__foto img{height:280px}
  .split__foto::after{display:none}
  .sec-head{margin-bottom:var(--space-10)}
  .sec-head__apoio{margin-top:var(--space-4)}

  .cards,.difs,.colagem{grid-template-columns:minmax(0,1fr)}
  .colagem .grande{grid-column:span 1}
  .publico{margin-bottom:var(--space-6)}
  .publico__texto{padding:var(--space-10) var(--space-5)}
  .publico__foto img{min-height:240px}
  .footer__col{margin-top:var(--space-8)}
  .cta{padding:var(--space-12) var(--space-6)}
  .linhas{display:none}
}

@media (max-width:520px){
  .btn{width:100%}
  .seta-link{width:auto}
}