/* ============================================================
   PÁGINAS DE ESPECIALIDAD · PEDROSIERRA.ES
   Coach corporativo / Inteligencia Artificial
   ============================================================ */

.expertise-main{
  padding-top:var(--header-h);
}

.expertise-hero{
  padding:clamp(72px,9vw,132px) 0 64px;
}

.expertise-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:clamp(42px,6vw,92px);
  align-items:center;
}

.expertise-hero h1{
  max-width:900px;
  margin:18px 0 22px;
  font-size:clamp(42px,6vw,88px);
  line-height:.95;
  letter-spacing:-.045em;
}

.expertise-lead{
  max-width:760px;
  color:var(--muted);
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.55;
}

.expertise-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.expertise-hero-media{
  position:relative;
  min-height:560px;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
}

.expertise-hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.expertise-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.7));
}

.expertise-section{
  padding:clamp(74px,8vw,120px) 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.expertise-intro{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,6vw,90px);
  align-items:start;
}

.expertise-intro h2,
.expertise-head h2{
  margin:12px 0 0;
  font-size:clamp(34px,4.2vw,64px);
  line-height:1.02;
  letter-spacing:-.035em;
}

.expertise-copy{
  color:var(--muted);
  font-size:18px;
  line-height:1.78;
}

.expertise-copy p + p{
  margin-top:20px;
}

.expertise-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:48px;
}

.expertise-card{
  position:relative;
  min-height:260px;
  overflow:hidden;
  padding:clamp(28px,3.6vw,46px);
  background:rgba(14,14,17,.84);
  border:1px solid rgba(255,255,255,.11);
}

.expertise-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:100%;
  background:var(--magenta);
}

.expertise-card.ai::before{
  background:#f1d643;
}

.expertise-card span{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
}

.expertise-card h3{
  margin:18px 0 12px;
  font-size:clamp(25px,2.5vw,38px);
  line-height:1.05;
}

.expertise-card p{
  color:var(--muted);
  line-height:1.7;
}

.expertise-list{
  display:grid;
  gap:8px;
  margin:18px 0 0;
  padding:0;
  color:#ddd;
  list-style:none;
}

.expertise-list li::before{
  content:"→";
  margin-right:9px;
  color:var(--magenta);
}

.expertise-card.ai .expertise-list li::before{
  color:#f1d643;
}

.expertise-band{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:50px;
  margin-top:48px;
  padding:clamp(34px,5vw,64px);
  background:rgba(9,9,11,.9);
  border:1px solid rgba(255,255,255,.13);
}

.expertise-band h3{
  margin:12px 0;
  font-size:clamp(30px,3.4vw,50px);
  line-height:1.05;
}

.expertise-band p{
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.expertise-process{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:46px;
}

.expertise-step{
  padding:24px 20px;
  background:rgba(255,255,255,.025);
  border-top:1px solid rgba(255,255,255,.2);
}

.expertise-step b{
  color:var(--magenta);
  font-size:12px;
  letter-spacing:.14em;
}

.expertise-step h3{
  margin:13px 0 9px;
  font-size:20px;
}

.expertise-step p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.expertise-code{
  overflow:auto;
  padding:26px;
  background:#08090b;
  border:1px solid rgba(241,214,67,.24);
  color:#d8d8d8;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.75;
}

.expertise-code strong{
  color:#f1d643;
}

.expertise-note{
  margin-top:28px;
  padding:22px 24px;
  background:rgba(255,255,255,.03);
  border-left:3px solid var(--magenta);
  color:var(--muted);
  line-height:1.7;
}

@media(max-width:900px){
  .expertise-hero-grid,
  .expertise-intro,
  .expertise-band{
    grid-template-columns:1fr;
  }

  .expertise-hero-media{
    min-height:420px;
  }

  .expertise-grid{
    grid-template-columns:1fr;
  }

  .expertise-process{
    grid-template-columns:1fr 1fr;
  }

  .expertise-hero h1{
    font-size:clamp(38px,11vw,62px);
  }
}

@media(max-width:560px){
  .expertise-hero{
    padding-top:48px;
  }

  .expertise-hero-media{
    min-height:360px;
  }

  .expertise-process{
    grid-template-columns:1fr;
  }

  .expertise-card{
    min-height:auto;
  }

  .expertise-band{
    gap:24px;
  }

  .expertise-hero h1{
    font-size:clamp(34px,10.5vw,50px);
  }
}