/* ============================================================
   Centro Oftalmológico de Divinópolis · especialidades.css
   CSS específico da página Especialidades. Extraído de
   _original/index_1.html (seções .spec-grid "Áreas de atuação" e
   .tech "Tecnologia") SEM alterações visuais, mais o bloco de CTA
   final desta página. NÃO duplica tokens/reset/nav/footer/botões/
   .wrap/.sec-pad/.sec-tag/.sec-title/.sec-sub/.obs/.words — isso
   está em css/base.css.
   ============================================================ */

/* ===== ÁREAS DE ATUAÇÃO (spec-grid) ===== */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.spec{padding:2.4rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.spec::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--ink-2),var(--ink));opacity:0;transition:opacity .4s var(--ease);z-index:0}
.spec:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.spec:hover::before{opacity:1}
.spec>*{position:relative;z-index:1;transition:color .4s}
.spec:hover *{color:var(--paper)}
.spec .ic{width:48px;height:48px;border-radius:12px;background:var(--cream);display:grid;place-items:center;margin-bottom:1.4rem;transition:background .4s}
.spec:hover .ic{background:rgba(200,146,74,.18)}
.spec .ic svg{width:24px;height:24px;color:var(--accent-deep)}.spec:hover .ic svg{color:var(--accent)}
.spec h3{font-size:1.4rem;margin-bottom:.6rem}.spec p{color:var(--muted);font-size:.95rem}

/* ===== TECNOLOGIA ===== */
.tech{background:var(--cream)}
.tech-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:1.6rem;margin-top:3.5rem;align-items:stretch}
.tech-featured{background:linear-gradient(160deg,var(--ink-2),var(--ink));color:var(--paper);border-radius:14px;
  padding:2.6rem;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px}
.tech-featured::before{content:"";position:absolute;right:-15%;top:-15%;width:65%;height:65%;
  background:radial-gradient(circle,rgba(200,146,74,.35),transparent 70%);filter:blur(30px)}
.tech-featured .tech-icon{width:52px;height:52px;color:var(--accent);position:relative;z-index:1;margin-bottom:auto}
.tech-featured .tag{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:1.6rem 0 .8rem;display:block;position:relative;z-index:1}
.tech-featured h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:.8rem;position:relative;z-index:1}
.tech-featured p{color:rgba(242,235,220,.72);max-width:40ch;position:relative;z-index:1;font-size:.98rem}
.tech-list{display:grid;grid-template-rows:repeat(3,1fr);gap:1rem}
.tech-row{display:flex;gap:1.2rem;align-items:flex-start;padding:1.5rem;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);transition:transform .3s var(--ease),box-shadow .3s}
.tech-row:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tech-row .ic{width:42px;height:42px;border-radius:10px;background:rgba(200,146,74,.14);display:grid;place-items:center;flex:none}
.tech-row .ic svg{width:20px;height:20px;color:var(--accent-deep)}
.tech-row h4{font-family:'Fraunces',serif;font-size:1.08rem;margin-bottom:.3rem;font-weight:400}
.tech-row p{color:var(--muted);font-size:.9rem}

/* ===== CTA FINAL (específico desta página) ===== */
.spec-cta{background:var(--ink);color:var(--paper);text-align:center}
.spec-cta-inner{max-width:640px;margin:0 auto}
.spec-cta .sec-title{color:var(--paper)}
.spec-cta .sec-sub{color:rgba(242,235,220,.7);margin:0 auto 2.2rem;max-width:48ch;text-align:center}
.spec-cta-inner .btn{margin:0 auto}

/* ===== RESPONSIVO ===== */
@media(max-width:980px){
  .spec-grid{grid-template-columns:1fr 1fr}
  .tech-layout{grid-template-columns:1fr}
  .tech-list{grid-template-rows:none}
}
@media(max-width:680px){
  .spec-grid{grid-template-columns:1fr}
}