/* =====================================================================
   sobre.css · Dr. Fabio Salomão
   Página Sobre: a mais narrativa, mistura os três universos (clínico,
   educacional, consultoria) sem perder unidade. Cor só via var(--…).
   Nota: o briefing cita Pêssego Escuro 01 e Marfim Clínico Escuro 01
   como detalhes; mapeados para tokens existentes
   (--areia-escuro-01, --marfim-escuro-01, --pessego).
   ===================================================================== */

/* ===== 1. Hero (Marfim, duas colunas) ===== */
.sob-hero{position:relative;overflow:hidden;background:var(--marfim);border-bottom:1px solid var(--areia-escuro-01);padding:150px 0 110px}
.sob-hero .wrap{position:relative;z-index:1}
.sob-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.sob-hero-copy{max-width:760px}
.sob-hero h1{margin-bottom:24px;max-width:14ch}
.sob-hero .lead{max-width:62ch;color:var(--grafite);margin-bottom:30px}
.sob-hero .tags{margin-bottom:32px}
.sob-hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

/* mancha Azul Névoa de baixa opacidade */
.sob-hero .blob-nevoa{position:absolute;width:520px;height:520px;top:-160px;right:-140px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--nevoa),transparent 70%);opacity:.5;filter:blur(2px);pointer-events:none}

/* foto: moldura marfim + bloco deslocado Azul Névoa */
.sob-hero-media{position:relative}
.sob-hero-media .frame{position:relative;aspect-ratio:4/5;border:6px solid var(--marfim);border-radius:var(--radius-img);box-shadow:var(--shadow-img);background:var(--nevoa)}
.sob-hero-media .frame .img-reveal{border-radius:calc(var(--radius-img) - 6px);height:100%}
.sob-hero-media .frame .media-ph{height:100%;min-height:0}
.sob-hero-media::before{content:"";position:absolute;inset:26px -26px -26px 26px;background:var(--nevoa);border-radius:var(--radius-img);z-index:-1;opacity:.7}

/* ===== 2. Introdução geral (Areia Claro 01, centralizada + 3 cards) ===== */
.sob-intro{background:var(--areia-claro-01)}
.sob-intro-head{max-width:900px;margin:0 auto;text-align:center}
.sob-intro-head h2{color:var(--azul-profundo);max-width:22ch;margin:0 auto 22px}
.sob-intro-head p{color:var(--grafite);max-width:860px;margin:0 auto 16px}
.sob-intro-head p:last-of-type{margin-bottom:0}

.sob-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.principle-card{background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-card);padding:30px 30px;box-shadow:var(--shadow-soft)}
.principle-card .pc-mark{display:block;width:32px;height:3px;border-radius:var(--radius-pill);background:var(--pessego);margin-bottom:18px}
.principle-card h3{color:var(--azul-profundo);margin-bottom:10px}
.principle-card p{color:var(--grafite);font-size:15px;line-height:1.55;margin:0}

/* ===== 3. Linha narrativa (Marfim, duas colunas) ===== */
.sob-narrativa{background:var(--marfim)}
.sob-narrativa-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.sob-narrativa-copy h2{color:var(--azul-profundo);margin-bottom:24px;max-width:16ch}
.sob-narrativa-copy p{color:var(--grafite);margin-bottom:18px;max-width:60ch}
.sob-narrativa-copy p:last-of-type{margin-bottom:0}
.sob-narrativa-aside{position:sticky;top:120px}
.quote-panel{background:var(--areia);border-radius:var(--radius-img);padding:36px 34px;border:0}
.quote-panel p{font-family:var(--font-display);font-size:clamp(24px,2.4vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--azul-profundo);margin:0}
.narrativa-diag{width:100%;height:auto;margin-top:28px;color:var(--azul-profundo)}

/* ===== 4. Trajetória e formação (Areia Mineral, timeline vertical) ===== */
.sob-trajetoria{background:var(--areia);border-top:1px solid var(--areia-escuro-01)}
.sob-trajetoria-head{max-width:820px;margin-bottom:52px}
.sob-trajetoria-head h2{color:var(--azul-profundo);max-width:20ch;margin-bottom:22px}
.sob-trajetoria-head p{color:var(--grafite);margin-bottom:16px}
.sob-trajetoria-head p:last-of-type{margin-bottom:0}

/* timeline: linha vertical contínua + marcadores + card à direita */
.timeline{position:relative;max-width:820px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--areia-escuro-01)}
.tl-item{position:relative;padding-bottom:22px}
.tl-item:last-child{padding-bottom:0}
.tl-node{position:absolute;left:-34px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--marfim);border:3px solid var(--azul-profundo);box-shadow:0 0 0 4px var(--areia)}
.tl-card{background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-card);padding:28px 32px;box-shadow:var(--shadow-soft)}
.tl-date{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--azul-profundo);margin-bottom:8px}
.tl-card h3{color:var(--azul-profundo);margin-bottom:6px}
.tl-inst{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--azul-profundo);margin-bottom:10px}
.tl-card p:last-child{color:var(--grafite);font-size:15px;line-height:1.55;margin:0}

.sob-trajetoria-link{max-width:820px;margin-top:36px}
.sob-trajetoria-link a{font-weight:700;font-size:15px;color:var(--azul-profundo);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.sob-trajetoria-link a svg{transition:transform .35s var(--ease)}
.sob-trajetoria-link a:hover svg{transform:translateX(4px)}

/* ===== 5. Vida pessoal e visão humana (Marfim) ===== */
.sob-humana{background:var(--marfim);border-top:1px solid var(--marfim-escuro-01)}
.sob-humana-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.sob-humana-copy h2{color:var(--azul-profundo);margin-bottom:24px;max-width:16ch}
.sob-humana-copy p{color:var(--grafite);margin-bottom:18px;max-width:60ch}
.sob-humana-copy p:last-of-type{margin-bottom:0}
.sob-humana-media{position:relative}
.sob-humana-media .frame{position:relative;aspect-ratio:4/5;border:6px solid var(--marfim);border-radius:var(--radius-img);box-shadow:var(--shadow-img);background:var(--nevoa)}
.sob-humana-media .frame .img-reveal{border-radius:calc(var(--radius-img) - 6px);height:100%}
.sob-humana-media .frame .media-ph{height:100%;min-height:0}
.sob-humana-media::before{content:"";position:absolute;inset:24px 24px -24px -24px;background:var(--areia);border-radius:var(--radius-img);z-index:-1;opacity:.9}

.quote-band{background:var(--areia-claro-01);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-img);padding:40px 44px;margin-top:56px}
.quote-band p{font-family:var(--font-display);font-size:clamp(23px,2.6vw,32px);line-height:1.22;letter-spacing:-.01em;color:var(--azul-profundo);margin:0;max-width:26ch}

.sob-micro{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.micro-card{background:var(--areia-claro-01);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-tag);padding:24px 24px}
.micro-card h3{font-size:clamp(18px,1.6vw,21px);color:var(--azul-profundo);margin-bottom:8px}
.micro-card p{color:var(--grafite);font-size:14.5px;line-height:1.5;margin:0}

/* ===== 6. Prática clínica (Azul Profundo, tema clínico) ===== */
.sob-clinica-head{max-width:820px;margin-bottom:48px}
.sob-clinica-head h2{color:var(--marfim);margin-bottom:22px;max-width:16ch}
.sob-clinica-head p{color:var(--azul-claro-02);margin-bottom:16px}
.sob-clinica-head p:last-of-type{margin-bottom:0}

.sob-clinica-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step-card{background:var(--marfim);border-radius:var(--radius-card);padding:30px 28px;display:flex;flex-direction:column}
.step-num{font-family:var(--font-display);font-size:22px;color:var(--nevoa);background:var(--azul-profundo);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step-card h3{color:var(--azul-profundo);font-size:clamp(18px,1.6vw,21px);margin-bottom:10px}
.step-card p{color:var(--grafite);font-size:14.5px;line-height:1.5;margin:0}

.sob-clinica-note{max-width:820px;margin-top:40px;color:var(--azul-claro-02);font-size:16px;line-height:1.6}
.sob-clinica-cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.sob-clinica-cta .btn-light:hover{background:var(--nevoa);color:var(--azul-escuro-02)}
.sob-clinica-link{font-weight:700;font-size:14.5px;color:var(--marfim);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.sob-clinica-link:hover{color:var(--nevoa)}
.sob-clinica-link svg{transition:transform .35s var(--ease)}
.sob-clinica-link:hover svg{transform:translateX(4px)}

/* ===== 7. Odontologia restauradora (Marfim, 2 col + visual lateral) ===== */
.sob-restauradora{background:var(--marfim);border-top:1px solid var(--marfim-escuro-01)}
.sob-restauradora-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
.sob-restauradora-copy h2{color:var(--azul-profundo);margin-bottom:24px;max-width:18ch}
.sob-restauradora-copy p{color:var(--grafite);margin-bottom:18px;max-width:62ch}
.sob-restauradora-cta{margin-top:32px}
.sob-restauradora-visual{display:flex;align-items:center;justify-content:center}
.sob-restauradora-visual svg{width:100%;max-width:320px;height:auto;color:var(--azul-profundo)}

/* ===== 8. Ensino e evolução (Areia Mineral, 2 col) ===== */
.sob-ensino{background:var(--areia);border-top:1px solid var(--areia-escuro-01)}
.sob-ensino-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.sob-ensino-media{position:relative}
.sob-ensino-media .frame{position:relative;aspect-ratio:4/3;border:6px solid var(--marfim);border-radius:var(--radius-img);box-shadow:var(--shadow-img);background:var(--nevoa)}
.sob-ensino-media .frame .img-reveal{border-radius:calc(var(--radius-img) - 6px);height:100%}
.sob-ensino-media .frame .media-ph{height:100%;min-height:0}
.sob-ensino-media::before{content:"";position:absolute;inset:24px -24px -24px 24px;background:var(--marfim);border-radius:var(--radius-img);z-index:-1;opacity:.7}
.sob-ensino-copy .sec-tag{background:var(--marfim)}
.sob-ensino-copy h2{color:var(--azul-profundo);margin:16px 0 22px;max-width:18ch}
.sob-ensino-copy p{color:var(--grafite);margin-bottom:16px;max-width:56ch}
.sob-ensino-highlight{background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-img);padding:28px 30px;margin:26px 0 30px}
.sob-ensino-highlight p{font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);line-height:1.24;letter-spacing:-.01em;color:var(--azul-profundo);margin:0;max-width:26ch}
.sob-ensino-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.sob-ensino-link{font-weight:700;font-size:14.5px;color:var(--azul-profundo);display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:34ch}
.sob-ensino-link svg{flex:none;transition:transform .35s var(--ease)}
.sob-ensino-link:hover svg{transform:translateX(4px)}

/* ===== 9. Mentorias e consultorias (Pêssego, tema consultoria) ===== */
.sob-consultoria-head{max-width:860px;margin-bottom:48px}
.sob-consultoria-head .sec-tag{background:var(--marfim);border-color:var(--marfim);margin-bottom:18px}
.sob-consultoria-head h2{color:var(--grafite);margin-bottom:22px;max-width:20ch}
.sob-consultoria-head p{color:var(--azul-profundo);margin-bottom:16px}
.sob-consultoria-head p:last-of-type{margin-bottom:0}
.sob-consultoria-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cons-card{background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-card);padding:30px 30px;box-shadow:var(--shadow-soft)}
.cons-card .cc-mark{display:block;width:32px;height:3px;border-radius:var(--radius-pill);background:var(--pessego);margin-bottom:18px}
.cons-card h3{color:var(--azul-profundo);margin-bottom:10px}
.cons-card p{color:var(--grafite);font-size:15px;line-height:1.55;margin:0}
.sob-consultoria-cta{margin-top:44px}

/* ===== 10. IA na odontologia (Marfim, 2 col + 5 cards) ===== */
.sob-ia{background:var(--marfim);border-top:1px solid var(--marfim-escuro-01)}
.sob-ia-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.sob-ia-copy{max-width:520px}
.sob-ia .ia-tag{background:var(--nevoa);border-color:var(--nevoa);color:var(--azul-profundo)}
.sob-ia-copy h2{color:var(--azul-profundo);margin:16px 0 22px;max-width:18ch}
.sob-ia-copy p{color:var(--grafite);margin-bottom:16px}
.sob-ia-copy p:last-of-type{margin-bottom:0}
.sob-ia-cta{margin-top:30px}
.sob-ia-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sob-ia-cards .ia-card{background:var(--nevoa);border:1px solid var(--marfim-escuro-01);border-radius:var(--radius-card);padding:24px 24px}
.sob-ia-cards .ia-card h3{font-size:clamp(17px,1.5vw,20px);color:var(--azul-profundo);margin-bottom:8px}
.sob-ia-cards .ia-card p{color:var(--grafite);font-size:14.5px;line-height:1.5;margin:0}
.sob-ia-cards .ia-card:last-child{grid-column:1/-1}

/* ===== 11. Fechamento institucional (Azul Profundo Escuro 02, 3 CTAs) ===== */
.sob-fechamento{background:var(--azul-escuro-02);color:var(--marfim);text-align:center}
.sob-fechamento .wrap{max-width:900px}
.sob-fechamento h2{color:var(--marfim);max-width:22ch;margin:0 auto 40px}
.sob-fechamento-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.sob-fechamento .btn-light:hover{background:var(--nevoa);color:var(--azul-escuro-02)}
/* CTA secundário: contorno Marfim sobre fundo escuro */
.btn-ghost-light{background:transparent;color:var(--marfim);border-color:var(--marfim)}
.btn-ghost-light:hover{background:var(--marfim);color:var(--azul-profundo)}
/* CTA terciário: contorno Azul Claro 02 (mais discreto) */
.btn-ghost-soft{background:transparent;color:var(--azul-claro-02);border-color:var(--azul-claro-02)}
.btn-ghost-soft:hover{background:var(--azul-claro-02);color:var(--azul-escuro-02)}

/* ===== Tablet ===== */
@media (max-width:980px){
  .sob-principles{grid-template-columns:1fr}
  .sob-clinica-steps{grid-template-columns:1fr 1fr}
  .sob-micro{grid-template-columns:1fr}
  .sob-consultoria-cards{grid-template-columns:1fr}
}

/* ===== Empilhamento mobile ===== */
@media (max-width:860px){
  .sob-hero-grid{grid-template-columns:1fr;gap:44px}
  .sob-hero-media{order:1;max-width:460px}
  .sob-intro-head{text-align:left}
  .sob-intro-head h2,.sob-intro-head p{margin-left:0;margin-right:0}
  .sob-narrativa-grid{grid-template-columns:1fr;gap:40px}
  .sob-narrativa-aside{position:static}
  .sob-humana-grid{grid-template-columns:1fr;gap:40px}
  .sob-humana-media{order:-1;max-width:460px}
  .sob-restauradora-grid{grid-template-columns:1fr;gap:44px}
  .sob-restauradora-visual{order:-1;max-width:300px}
  .sob-ensino-grid{grid-template-columns:1fr;gap:40px}
  .sob-ensino-media{order:1;max-width:520px}
  .sob-ia-grid{grid-template-columns:1fr;gap:40px}
  .sob-ia-copy{max-width:none}
}
@media (max-width:560px){
  .sob-hero{padding:120px 0 80px}
  .sob-hero-ctas{flex-direction:column;align-items:stretch}
  .sob-hero-ctas .btn{width:100%}
  .sob-clinica-steps{grid-template-columns:1fr}
  .sob-ia-cards{grid-template-columns:1fr}
  .timeline{padding-left:28px}
  .tl-node{left:-28px}
  .tl-card{padding:24px 22px}
  .sob-clinica-cta .btn,.sob-ensino-cta .btn,.sob-fechamento-ctas .btn{width:100%}
  .quote-band{padding:30px 26px}
  .quote-panel{padding:28px 26px}
}