/* ==========================================================================
   CONFECAP · HOME — seções específicas (Layout C "Safira Profundo")
   Depende de site.css. No Laravel vira o CSS da view home.
   ========================================================================== */

/* --- HERO --- */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--navy-900)}
.hero__media{position:absolute; inset:0; z-index:-3}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(104deg,
      rgba(5,15,38,.965) 0%, rgba(5,15,38,.93) 30%,
      rgba(6,57,106,.80) 62%, rgba(15,82,186,.58) 100%),
    linear-gradient(0deg, var(--navy-900) 2%, rgba(5,15,38,0) 40%);
}
.hero__halo{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 62% at 84% 8%, rgba(30,111,255,.46) 0%, rgba(30,111,255,0) 68%),
    radial-gradient(34% 40% at 96% 34%, rgba(76,141,255,.24) 0%, rgba(76,141,255,0) 70%);
}
.hero__inner{
  position:relative;
  min-height:clamp(600px, 88vh, 880px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:clamp(4rem,12vh,8rem); padding-bottom:0;
}
.hero__copy{max-width:min(100%, 47rem); padding-bottom:clamp(2.5rem,5vw,4rem)}
.h1{font-size:var(--t-hero); color:#fff}
.h1__kicker{
  display:block; font-size:clamp(.82rem,.3rem + 1vw,1rem); font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.74);
  margin-bottom:1.15rem; line-height:1.4;
}
.h1 em{
  font-style:normal; display:block;
  background:linear-gradient(96deg,#fff 18%,#BFD6FF 58%,var(--blue-400) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{max-width:44rem; margin:1.9rem 0 2.4rem; color:rgba(255,255,255,.9)}
.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem}

.legal{
  border-top:1px solid rgba(255,255,255,.13);
  display:grid; gap:0; padding-block:1.4rem;
}
.legal li{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:.65rem 0;
  font-family:var(--font-display); font-size:.875rem; font-weight:500;
  color:var(--on-dark-soft); line-height:1.45;
}
.legal li::before{
  content:""; flex:0 0 2px; width:2px; height:100%; min-height:2.4em;
  background:linear-gradient(180deg,var(--gold-500),rgba(201,162,39,0));
}
.legal b{display:block; font-weight:700; color:#fff; letter-spacing:.02em}

/* Entrada do hero — escalonada */
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.hero__copy > *{animation:rise .8s cubic-bezier(.22,.7,.3,1) backwards}
.hero__copy > *:nth-child(1){animation-delay:.05s}
.hero__copy > *:nth-child(2){animation-delay:.16s}
.hero__copy > *:nth-child(3){animation-delay:.27s}
.hero__copy > *:nth-child(4){animation-delay:.38s}
.hero .legal{animation:rise .9s .5s cubic-bezier(.22,.7,.3,1) backwards}

/* --- 01 · NOSSOS VALORES --- */
.valores{background:var(--navy-900); padding-bottom:clamp(5rem,10vw,10rem)}
.valores__grid{display:grid; gap:clamp(2.5rem,5vw,4rem)}
.valores__media{position:relative}
.valores__media .photo{aspect-ratio:4/5}
.valores__num{
  position:absolute; right:.15rem; bottom:-.3em; z-index:2;
  font-family:var(--font-display); font-weight:800; font-size:clamp(7rem,17vw,13rem);
  line-height:.8; letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:1.5px rgba(201,162,39,.45);
  pointer-events:none; user-select:none;
}
.valores__quote{
  font-family:var(--font-read); font-size:clamp(1.25rem,.9rem + 1.1vw,1.6rem);
  line-height:1.5; color:#fff; margin:2rem 0 1.5rem;
}
.valores__quote b{color:var(--gold-300); font-weight:600}
.valores__body{color:var(--on-dark-soft); max-width:36rem}

/* --- 02 · BEM-VINDO (clara) --- */
.bemvindo{background:var(--paper-alt)}
.bemvindo::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--navy-600),var(--blue-500) 40%,var(--gold-500) 78%,rgba(201,162,39,0));
}
.bemvindo__grid{display:grid; gap:clamp(2.75rem,6vw,4.5rem); align-items:start}
.bemvindo__title{color:var(--ink-900); font-size:var(--t-h2)}
.bemvindo__text{color:#2C3A50; max-width:34rem; margin-top:2rem}
.bemvindo__call{
  font-family:var(--font-read); font-style:italic; font-size:var(--t-lead);
  color:var(--navy-700); margin-bottom:0;
}
.bemvindo__text .drop{
  float:left; font-family:var(--font-display); font-weight:800;
  font-size:3.6rem; line-height:.86; margin:.22rem .6rem 0 0;
  color:var(--navy-600);
}
.marcos{margin-top:2.75rem; border-top:1px solid var(--line); padding-top:1.5rem}
.marcos li{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:.85rem 0}
.marcos li + li{border-top:1px dashed #DCE4F0}
.marcos time{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  color:var(--navy-700); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.marcos p{margin:0; font-size:var(--t-small); color:var(--ink-600); line-height:1.55}
.collage{position:relative; padding-bottom:clamp(3rem,7vw,5.5rem)}
.collage__a{aspect-ratio:4/3; box-shadow:0 40px 70px -38px rgba(5,15,38,.55)}
.collage__b{
  position:absolute; right:0; bottom:0; width:52%; aspect-ratio:1/1;
  border:6px solid var(--paper-alt); border-radius:4px;
  box-shadow:0 30px 60px -30px rgba(5,15,38,.5);
}
.collage__tag{
  position:absolute; left:0; bottom:0; z-index:3;
  background:var(--navy-900); color:#fff; border-left:2px solid var(--gold-500);
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.66rem 1rem;
}

/* --- 03 · ATUAÇÃO / TRÊS PILARES --- */
.pilares{
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(15,82,186,.30) 0%, rgba(15,82,186,0) 62%),
    var(--navy-900);
}
.pilares__head{max-width:44rem; margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.pilares__grid{display:grid; gap:1.25rem; align-items:start}
.pcard{padding:clamp(1.6rem,3.4vw,2.5rem); display:flex; flex-direction:column}
.pcard__icon{width:60px; height:60px; margin-bottom:1.4rem; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.pcard h3{color:#fff; margin-bottom:.5rem}
.pcard p{color:var(--on-dark-soft); font-size:var(--t-small); line-height:1.7}
.pcard .pcard__kicker{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-eyebrow);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300); margin:0 0 .9rem;
}
.pcard__actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:auto; padding-top:1.5rem}
.pcard--lead .pcard__icon{width:86px; height:86px}
.pcard--lead h3{font-size:clamp(1.7rem,1.2rem + 1.4vw,2.35rem)}
.pcard--lead p{font-size:var(--t-body)}
.specs{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair);
  margin-top:1.75rem; border-radius:4px; overflow:hidden;
}
.specs div{background:#08182F; padding:.95rem 1.05rem}
.specs dt{
  font-family:var(--font-display); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mute); margin-bottom:.3rem;
}
.specs dd{margin:0; font-family:var(--font-display); font-weight:700; font-size:.98rem; color:#fff; line-height:1.3}
.pcard .note{
  display:flex; align-items:center; gap:.6rem; margin:.4rem 0 0;
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.06em; color:var(--gold-300);
  border-top:1px solid rgba(201,162,39,.3); padding-top:.9rem;
}
.frentes{margin-top:1.4rem; border-top:1px solid var(--hair)}
.frentes li{padding:.85rem 0; border-bottom:1px solid var(--hair)}
.frentes h4{font-size:.95rem; font-weight:700; color:#fff; margin:0 0 .15rem; letter-spacing:-.01em}
.frentes span{font-size:.875rem; color:var(--on-dark-soft); line-height:1.5; display:block}

/* --- 04 · AGENDA --- */
.agenda{
  background:linear-gradient(150deg, var(--navy-800) 0%, var(--navy-700) 52%, #0A2E63 100%);
  border-top:1px solid rgba(255,255,255,.08);
  padding-block:clamp(3.75rem,7vw,6rem);
}
.agenda__head{display:grid; gap:1.75rem; align-items:end; margin-bottom:clamp(2rem,4vw,3rem)}
.agenda h2{color:#fff; font-size:clamp(1.85rem,1.2rem + 2.2vw,2.9rem)}
.agenda__sub{color:var(--on-dark); margin:1rem 0 0; max-width:34rem}
.agenda__list{display:grid; gap:1rem}
.ev{
  display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:center;
  padding:1.15rem 1.35rem; text-decoration:none;
  transition:transform var(--dur-1) ease, border-color var(--dur-1) ease;
}
.ev:hover{transform:translateY(-3px); border-color:rgba(227,199,101,.45)}
.ev__date{text-align:center; border-right:1px solid var(--hair); padding-right:1.25rem; min-width:76px}
.ev__d{display:block; font-family:var(--font-display); font-weight:800; font-size:2.1rem; line-height:1; color:#fff; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.ev__m{display:block; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300); margin-top:.35rem}
.ev h3{font-size:1.05rem; color:#fff; margin-bottom:.25rem}
.ev p{margin:0; font-family:var(--font-display); font-size:.85rem; color:var(--on-dark-soft)}

/* --- 05 · CONVÊNIOS (clara) --- */
.convenios__head{margin-bottom:clamp(2.25rem,4.5vw,3.25rem); max-width:46rem}
.convenios__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.conv{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; text-align:center; text-decoration:none;
  background:var(--paper); padding:2rem 1rem;
  transition:background-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.conv img{
  width:100px; height:100px; object-fit:contain; border-radius:4px; opacity:.88;
  transition:opacity var(--dur-1) ease, transform var(--dur-1) ease;
}
.conv span{font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.06em; color:var(--ink-600); transition:color var(--dur-1) ease}
.conv:hover{background:#FBFCFE}
.conv:hover img{opacity:1; transform:scale(1.06)}
.conv:hover span{color:var(--navy-700)}

/* Movimento reduzido — específico da home */
@media (prefers-reduced-motion:reduce){
  .hero__copy > *,
  .hero .legal{animation:none}
  .ev:hover,.conv:hover img{transform:none}
}

/* --- Responsivo home --- */
@media (min-width:600px){
  .legal{grid-template-columns:repeat(2,1fr); gap:0 2rem}
  .convenios__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:860px){
  .legal{grid-template-columns:repeat(3,1fr)}
  .valores__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center}
  .valores__media{margin-bottom:-4rem}
  .valores__num{right:-.06em; bottom:-.34em}
  .bemvindo__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .collage{margin-top:4.5rem}
  .collage__a{aspect-ratio:3/4}
  .agenda__head{grid-template-columns:1fr auto}
  .agenda__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ev{grid-template-columns:1fr; align-items:start; gap:1rem}
  .ev__date{text-align:left; border-right:0; border-bottom:1px solid var(--hair); padding:0 0 .9rem; display:flex; align-items:baseline; gap:.6rem}
  .ev__m{margin-top:0}
  .convenios__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pilares__grid{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); grid-template-rows:auto auto}
  .pcard--lead{grid-row:span 2}
}
@media (min-width:1024px){
  .bemvindo__grid{gap:5.5rem}
}
@media (min-width:1400px){
  .hero__copy{max-width:52rem}
  .beam-rail::before{
    content:""; position:absolute; left:calc((100% - var(--wrap))/2 + 10px);
    top:7%; bottom:7%; width:1px; background:var(--beam); opacity:.6;
  }
}