/* =====================================================================
   components.css · Dr. Fabio Salomão
   Header, footer, cards, carrossel, acordeão, filtros, float-stage.
   ===================================================================== */

/* ===== Header (marfim translúcido, shrink no scroll) ===== */
header.site{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:88px;display:flex;align-items:center;
  background:rgba(251,250,247,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:height .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
header.site.scrolled{height:64px;border-bottom:1px solid var(--marfim-escuro-01)}
.hd-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:46px;width:auto;transition:height .4s var(--ease)}
header.site.scrolled .brand img{height:36px}

nav.main{display:flex;align-items:center;gap:28px}
nav.main a{font-size:15px;font-weight:500;color:var(--grafite);position:relative;padding:12px 0;transition:color .3s var(--ease)}
nav.main a::after{content:"";position:absolute;left:0;bottom:6px;height:1px;width:0;background:var(--azul-profundo);transition:width .35s var(--ease)}
nav.main a:hover{color:var(--azul-profundo)}
nav.main a:hover::after{width:100%}

/* estado ativo automático via body[data-page] (sem JS) */
body[data-page="home"] nav a[data-nav="home"],
body[data-page="sobre"] nav a[data-nav="sobre"],
body[data-page="procedimentos"] nav a[data-nav="procedimentos"],
body[data-page="cursos"] nav a[data-nav="cursos"],
body[data-page="consultorias"] nav a[data-nav="consultorias"],
body[data-page="blog"] nav a[data-nav="blog"],
body[data-page="contato"] nav a[data-nav="contato"]{color:var(--azul-profundo)}
body[data-page="home"] nav.main a[data-nav="home"]::after,
body[data-page="sobre"] nav.main a[data-nav="sobre"]::after,
body[data-page="procedimentos"] nav.main a[data-nav="procedimentos"]::after,
body[data-page="cursos"] nav.main a[data-nav="cursos"]::after,
body[data-page="consultorias"] nav.main a[data-nav="consultorias"]::after,
body[data-page="blog"] nav.main a[data-nav="blog"]::after,
body[data-page="contato"] nav.main a[data-nav="contato"]::after{width:100%}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:10px;min-width:44px;min-height:44px}
.burger span{width:24px;height:2px;background:var(--azul-profundo);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:64px 0 0 0;background:var(--marfim);z-index:99;transform:translateY(-110%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s;display:flex;flex-direction:column;padding:24px var(--gutter);gap:4px;overflow-y:auto}
.mobile-nav.open{transform:translateY(0);visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.mobile-nav a{font-family:var(--font-display);font-size:24px;color:var(--azul-profundo);padding:16px 0;border-bottom:1px solid var(--marfim-escuro-01);min-height:44px}

/* ===== Footer (4 colunas, Azul Profundo Escuro 02) ===== */
footer.site{background:var(--azul-escuro-02);color:var(--marfim);padding:72px 0 30px}
.ft-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr 1.4fr;gap:40px}
.ft-brand img{height:56px;width:auto;margin-bottom:18px}
.ft-col h2{font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.03em;color:var(--marfim);margin-bottom:18px;text-transform:uppercase}
.ft-col ul{display:flex;flex-direction:column;gap:10px}
.ft-col a:not(.btn){font-size:14.5px;color:var(--azul-claro-02);transition:color .3s;padding:2px 0;display:inline-block}
.ft-col a:not(.btn):hover{color:var(--nevoa)}
.ft-contact .item{margin-bottom:14px;font-size:14.5px;color:var(--azul-claro-02);line-height:1.45}
.ft-contact .item strong{color:var(--marfim);font-weight:700;display:block;font-size:12px;letter-spacing:.04em;margin-bottom:2px;text-transform:uppercase;opacity:.75}
.ft-contact .btn{margin-top:10px}
.ft-units .unit{margin-bottom:20px;font-size:14.5px;color:var(--marfim);line-height:1.5}
.ft-units .unit strong{font-weight:700;display:block;margin-bottom:3px}
.ft-bottom{margin-top:54px;padding-top:26px;border-top:1px solid var(--azul-escuro-01);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--azul-claro-01)}
.ft-bottom a{color:var(--azul-claro-02)}
.ft-bottom a:hover{color:var(--nevoa)}
.ft-bottom .legal{display:flex;gap:22px}
.ft-bottom .legal-future{color:var(--azul-claro-01);cursor:default}

/* ===== Cards de caminho (tilt 3D no desktop) ===== */
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1400px}
.path-card{position:relative;border-radius:var(--radius-card);padding:42px 36px;min-height:340px;display:flex;flex-direction:column;overflow:hidden}
.path-card .corner{position:absolute;top:0;right:0;width:170px;height:170px;opacity:.16;pointer-events:none;transition:transform .6s var(--ease)}
.path-card:hover .corner{transform:translate(14px,-14px) rotate(8deg)}
.path-card h3{margin-bottom:14px}
.path-card p{font-size:15px;line-height:1.6;margin-bottom:auto}
.path-card .pc-cta{margin-top:30px}
.path-card.dark{background:var(--azul-profundo);color:var(--marfim)}
.path-card.dark h3{color:var(--marfim)}
.path-card.dark p{color:var(--azul-claro-02)}
.path-card.dark .corner{color:var(--marfim)}
.path-card.sand{background:var(--areia);color:var(--grafite);border:1px solid var(--areia-escuro-01)}
.path-card.sand .corner{color:var(--azul-profundo)}
.path-card.peach{background:var(--pessego);color:var(--grafite)}
.path-card.peach .corner{color:var(--azul-profundo)}

.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}

/* ===== Carrossel (scroll-snap; JS só setas/dots) ===== */
.carousel{position:relative}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 52px)/3);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px;perspective:1600px}
.car-track::-webkit-scrollbar{display:none}
.car-track > *{scroll-snap-align:start}
.car-nav{display:flex;gap:12px;justify-content:center;margin-top:32px;align-items:center}
.car-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--areia-escuro-01);background:var(--marfim);color:var(--azul-profundo);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s var(--ease)}
.car-btn:hover{background:var(--nevoa);transform:translateY(-2px)}
.car-dots{display:flex;gap:8px;margin:0 8px}
.car-dots button{width:8px;height:8px;min-width:0;border-radius:50%;border:0;background:var(--marfim-escuro-01);cursor:pointer;padding:0;transition:background .3s,transform .3s}
.car-dots button[aria-current="true"]{background:var(--azul-profundo);transform:scale(1.25)}

/* ===== Card de procedimento (carrossel da Home) ===== */
.proc-card{position:relative;border-radius:26px;padding:38px 32px;min-height:430px;display:flex;flex-direction:column;overflow:hidden}
.proc-card .corner{position:absolute;bottom:-30px;left:-30px;width:200px;height:200px;opacity:.12;pointer-events:none}
.proc-card h3{margin-bottom:12px}
.proc-card .lead-s{font-size:14.5px;line-height:1.55;margin-bottom:22px}
.proc-card ul{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.proc-card li{font-size:14px;display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.proc-card li::before{content:"";width:5px;height:5px;border-radius:50%;margin-top:8px;flex:none;background:currentColor;opacity:.55}
.proc-card.dark{background:var(--azul-profundo);color:var(--marfim)}
.proc-card.dark h3{color:var(--marfim)}
.proc-card.dark .lead-s{color:var(--azul-claro-02)}
.proc-card.dark .corner{color:var(--marfim)}
.proc-card.sand{background:var(--areia);color:var(--grafite);border:1px solid var(--areia-escuro-01)}
.proc-card.sand .corner{color:var(--azul-profundo)}
.proc-card.deep{background:var(--azul-escuro-01);color:var(--marfim)}
.proc-card.deep h3{color:var(--marfim)}
.proc-card.deep .lead-s{color:var(--azul-claro-01)}
.proc-card.deep .corner{color:var(--marfim)}

/* ===== Acordeão (procedimentos) e cards expansíveis (cursos) ===== */
.acc{display:flex;flex-direction:column;gap:14px}
.acc-item{background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-tag);overflow:hidden;transition:background .35s var(--ease)}
.acc-item.open{background:var(--areia)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;background:none;border:0;cursor:pointer;text-align:left;padding:22px 24px;min-height:44px;font-family:var(--font-display);font-size:clamp(18px,1.6vw,22px);color:var(--azul-profundo)}
.acc-ico{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--azul-claro-01);position:relative;transition:transform .4s var(--ease)}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;background:var(--azul-profundo);top:50%;left:50%;transform:translate(-50%,-50%)}
.acc-ico::before{width:12px;height:1.6px}
.acc-ico::after{width:1.6px;height:12px;transition:opacity .3s,transform .4s var(--ease)}
.acc-item.open .acc-ico::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel-inner{overflow:hidden;padding:0 24px}
.acc-item.open .acc-panel-inner{padding-bottom:24px}

/* ===== Filtros (blog) ===== */
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filter-chip{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--azul-profundo);background:var(--marfim);border:1px solid var(--areia-escuro-01);padding:10px 18px;min-height:44px;border-radius:var(--radius-pill);cursor:pointer;transition:background .3s,color .3s}
.filter-chip[aria-pressed="true"]{background:var(--azul-profundo);color:var(--marfim);border-color:var(--azul-profundo)}

/* ===== Float-stage (consultoria/IA, cards flutuantes) ===== */
.float-stage{position:relative;height:420px;perspective:1300px}
.float-card{position:absolute;background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:18px;padding:18px 22px;box-shadow:var(--shadow-card);will-change:transform}
.float-card .fc-title{font-family:var(--font-display);font-size:16px;color:var(--azul-profundo);margin-bottom:4px}
.float-card .fc-sub{font-size:12.5px;color:var(--grafite)}
.float-card.f1{top:18px;left:0;width:230px}
.float-card.f2{top:150px;right:6px;width:215px}
.float-card.f3{bottom:14px;left:48px;width:240px}
.float-line{position:absolute;inset:0;z-index:0;pointer-events:none}
.float-line line{stroke:var(--azul-profundo);stroke-width:1.4;opacity:.3;stroke-dasharray:5 6}
.float-line circle{fill:var(--azul-profundo);opacity:.4}

/* ===== Blobs de fundo (hero Camadas) ===== */
.bg-layers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(2px);will-change:transform}
.blob.b1{width:560px;height:560px;background:radial-gradient(circle at 35% 35%,var(--nevoa),transparent 70%);top:-140px;right:-120px;opacity:.85}
.blob.b2{width:440px;height:440px;background:radial-gradient(circle at 50% 50%,var(--pessego-claro-01),transparent 72%);bottom:-120px;left:-90px;opacity:.7}
.blob.b3{width:300px;height:300px;background:radial-gradient(circle at 50% 50%,var(--areia),transparent 70%);top:38%;left:46%;opacity:.6}

/* ===== Responsivo dos componentes ===== */
@media (max-width:980px){
  nav.main{display:none}
  .burger{display:flex}
  .path-grid{grid-template-columns:1fr;gap:18px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .float-stage{height:360px}
}
@media (max-width:768px){
  /* carrossel mobile: 1,15 card visível, navegação por toque */
  .car-track{grid-auto-columns:86%;gap:16px;scroll-padding-left:var(--gutter-m)}
  .car-btn{display:none}
}
@media (max-width:560px){
  .hd-inner{padding:0 var(--gutter-m)}
  .brand img{height:40px}
  header.site.scrolled .brand img{height:32px}
  .ft-grid{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column}
  .mobile-nav{padding:24px var(--gutter-m)}
}