/* ===== Variáveis ===== */
:root {
  --brand-navy: #11212D;
  --brand-teal: #0f6373;
  --icon-box: 56px;     /* tamanho do quadrado escuro do ícone */
  --icon-img: 40px;     /* tamanho do desenho dentro do quadrado */
}

/* ===== Reset mínimo ===== */
* { box-sizing: border-box; }

/* ===== Máxima largura SOMENTE nas seções desta página ===== */
.t-hero .container,
.t-steps .container,
.t-sites .container,
.trat-robotica .container,
.trat-alertas .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== Tipografia utilitária ===== */
.t-section-title{
  font-family: "Merriweather", serif;
  font-weight: 700;
  color: var(--brand-navy);
  text-align: center;
  margin: 0 0 20px;
}

/* ========================= */
/*          HERO             */
/* ========================= */
.t-hero{
  background:
    radial-gradient(1200px 300px at 20% -50%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #11212D 0%, #0f1f2b 100%);
  color:#fff;
  padding:72px 0 40px;
}
.t-hero-head{ text-align:center; }
.t-hero-over{
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b9c7d0;
  font-weight:800;
  margin-bottom:6px;
}
.t-hero h1{
  font:700 clamp(1.9rem,3.6vw,3rem)/1.2 "Merriweather", serif;
  margin:0 0 8px;
  color:#fff;
}
.t-hero-sub{ color:#dbe0e6; max-width:940px; margin:0 auto; }

/* Quick-nav */
.trat-quicknav{ padding:18px 0; }
.trat-quicknav-list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.trat-quicknav-list a{
  display:inline-block; padding:10px 14px; border-radius:999px;
  background:#f6f8fa; color:#11212D; text-decoration:none; font-weight:700;
  border:1px solid rgba(17,33,45,.08);
}
.trat-quicknav-list a:hover{ background:#eef2f5; }
.trat-quicknav--hero{ padding-top:20px; }
.t-hero .trat-quicknav--hero .trat-quicknav-list a{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color:#fff;
}
.t-hero .trat-quicknav--hero .trat-quicknav-list a:hover{ background: rgba(255,255,255,.16); }

/* ========================= */
/*          ETAPAS           */
/* ========================= */
.t-steps{ background:#fff; padding:48px 0; }

.steps-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:18px; margin:20px 0 18px;
}
@media (max-width:1200px){ .steps-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:640px){ .steps-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:420px){ .steps-grid{ grid-template-columns: 1fr; } }

.step-card{
  border-radius:14px; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  border:1px solid rgba(17,33,45,.1);
  display:grid; grid-template-rows:120px auto;
  background:#fff;
}
.step-ico{ background:#fff; display:grid; place-items:center; color:#1396b1; }
.step-caption{
  display:block; width:100%;
  background:#2c7f8f; color:#fff; text-align:center; font-weight:800;
  padding:14px 12px; border:0; cursor:pointer;
  transition:filter .15s ease, background .15s ease;
}
.step-caption:hover{ filter:brightness(1.05); }
.step-card.is-active .step-caption{ background:#1396b1; }

.steps-details{
  background:#f8fbfd; border:1px solid rgba(17,33,45,.08);
  border-radius:14px; padding:20px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.step-panel:not([hidden]){ animation:dropIn .35s ease both; }
.step-panel h3{ font-family:"Merriweather", serif; margin:4px 0 8px; color:#11212D; }
.step-panel p{ color:#334a57; line-height:1.65; margin:.5rem 0; }
@keyframes dropIn{
  from{opacity:0; transform:translateY(-12px); filter:blur(1px);}
  to{opacity:1; transform:none; filter:none;}
}

.etapas-note{
  margin-top:12px; text-align:center; color:#5b6b75;
  font-size:1.05rem; font-style:italic;
}

/* CTA inline genérico */
.t-cta-inline{
  display:flex; gap:12px; justify-content:center;
  margin-top:22px; flex-wrap:wrap;
}

/* ========================= */
/*  CÂNCERES QUE TRATAMOS    */
/* ========================= */
.t-sites{ background:#fff; padding:26px 0; }
.t-sites-lead{
  text-align:center; color:#3a5163; max-width:880px;
  margin:0 auto 14px;
}
.site-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
@media (max-width:768px){ .site-grid{ grid-template-columns:1fr; } }

.site-card{
  background:#fff; border:1px solid rgba(17,33,45,.1);
  border-radius:14px; padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.05);
}

.site-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}

/* Ícone do card */
.site-ico{
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 14px;
  display:grid; place-items:center;
  background:#11212D; color:#fff;
}
.site-ico-img{
  width: var(--icon-img);
  height: var(--icon-img);
  display:block;
  object-fit:contain;   /* mantém proporção do desenho */
}
/* Apenas SVG recebe inversão para branco no fundo escuro */
.site-ico img[src$=".svg"]{
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
/* PNG/JPG coloridos não sofrem filtro */
.site-ico img.is-color{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Dar um pouquinho mais de contraste no retroperitônio se for necessário */
.site-ico-img[alt="Ícone retroperitônio"]{
  filter: brightness(1.15) contrast(1.05);
}

.site-text{ color:#334a57; }

/* details/summary estilo link-botão */
.site-more{ margin-top:.25rem; }
.site-more > summary{
  list-style:none; cursor:pointer; user-select:none;
  color:#0f6373; font-weight:800; display:inline-block; padding:8px 10px;
  border:1px solid rgba(15,99,115,.35); border-radius:10px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.site-more > summary::marker{ content:""; }
.site-more[open] > summary{
  background:#0f6373; color:#fff; border-color:#0f6373;
}
.site-more p{ margin:.5rem 0 0; color:#3a5163; }

/* CTA texto dentro do bloco */
.t-sites-cta{ margin:24px auto 8px; text-align:center; }
.t-sites-cta-title{
  font-family:"Merriweather", serif; font-weight:800;
  font-size:clamp(1.8rem,3.2vw,2.2rem); color:var(--brand-navy);
  margin:0;
}
.t-sites-cta-sub{
  margin:6px 0 0; font-weight:700;
  font-size:clamp(1.02rem,1.6vw,1.15rem); color:#3a5163;
}
.t-cta-actions{
  display:flex; gap:12px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:12px;
}
.t-cta-actions .btn, .t-cta-actions .btn-outline{ min-width:210px; }

/* ========================= */
/*      CIRURGIA ROBÓTICA    */
/* ========================= */
.trat-robotica{ background:#fff; padding:56px 0; }
.trat-robotica-grid{
  display:grid; grid-template-columns:1.1fr 1.2fr; gap:28px; align-items:center;
}
@media (max-width:980px){ .trat-robotica-grid{ grid-template-columns:1fr; } }

.trat-robotica-media img{
  width:100%; height:auto; display:block;
  border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.trat-robotica-media{ position:relative; }
.trat-robotica-media::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 60% at 30% 40%, transparent, rgba(0,0,0,.05));
  pointer-events:none; border-radius:16px;
}
.trat-robotica-texto h2{
  font-family:"Merriweather", serif; font-weight:700; margin-bottom:10px;
}
.trat-list{ margin:10px 0 16px; padding-left:18px; }
.trat-list li{ margin:6px 0; color:#334a57; }

/* ========================= */
/*     ALERTAS + FAQ         */
/* ========================= */
.trat-alertas{ background:#fff; padding:56px 0; }
.trat-alertas h2{ text-align:center; font-family:"Merriweather", serif; margin-bottom:18px; }

.alertas-grid-2col{
  display:grid; grid-template-columns:1.05fr 1fr; gap:24px; align-items:start;
}
@media (max-width:980px){ .alertas-grid-2col{ grid-template-columns:1fr; } }

.trat-card{
  background:#f6f8fa; border:1px solid rgba(17,33,45,.08);
  border-radius:16px; padding:18px; box-shadow:0 2px 0 rgba(17,33,45,.03);
}
.trat-card h3{ margin:0 0 6px; font-family:"Merriweather", serif; }
.trat-note{ color:#5b6b75; font-size:.95rem; margin:10px 0 20px; }

/* FAQ accordions */
.faq-box{
  background:#fff; border:1px solid rgba(17,33,45,.08);
  border-radius:16px; padding:18px; box-shadow:0 2px 0 rgba(17,33,45,.03);
}
.faq-title{
  margin:0 0 8px; font-family:"Merriweather", serif;
  font-weight:700; color:#11212D;
}
.trat-acc{
  background:#fff; border:1px solid rgba(17,33,45,.12);
  border-radius:14px; margin:10px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.04); overflow:hidden;
}
.trat-acc-summary{
  list-style:none; cursor:pointer; padding:14px 16px;
  font-weight:800; color:#11212D;
}
.trat-acc[open] .trat-acc-summary{ border-bottom:1px solid rgba(17,33,45,.08); }
.trat-acc-panel{ padding:14px 16px; color:#334a57; }

/* ========================= */
/*   Botões (mínimos)        */
/* ========================= */
.btn, .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:10px; font-weight:800; text-decoration:none;
}
.btn{ background:#0f6373; color:#fff; border:1px solid #0f6373; }
.btn:hover{ filter:brightness(1.05); }
.btn-outline{ background:#fff; color:#0f6373; border:1px solid #0f6373; }
.btn-outline:hover{ background:#0f6373; color:#fff; }

/* ======================
   AJUSTE DOS CARDS (Cânceres que tratamos)
   - amplia a largura útil só dessa seção
   - usa 3 colunas em telas ≥1200px
   - reduz o espaço entre cards
   ====================== */

/* Desktop “normal” */
@media (min-width: 1200px){
  .t-sites > .container{
    max-width: 1320px !important;  /* vence o .container global (1100px) */
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .t-sites .site-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
    row-gap: 18px !important;
  }
}

/* Ultra-wide (opcional, melhora ainda mais o respiro em telas grandes) */
@media (min-width: 1536px){
  .t-sites > .container{
    max-width: 1440px !important;
  }
  .t-sites .site-grid{
    column-gap: 24px !important;
    row-gap: 20px !important;
  }
}
/* ===== Espaço lateral extra na seção "Cânceres que tratamos" ===== */
.t-sites {
  padding-left: 20px;   /* respiro lateral */
  padding-right: 20px;
}

@media (min-width: 1200px){
  .t-sites > .container{
    max-width: 1320px !important; 
    padding-left: 20px !important;  /* garante espaçamento interno */
    padding-right: 20px !important;
  }
  .t-sites .site-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important; /* mais equilíbrio entre cards */
  }
}