/* =========================================================
   SIPCI — Soporte Técnico
   Página individual de servicio
   ========================================================= */

:root{
  --sipci-blue:#2761AB;
  --sipci-gold:#F9AF17;
  --sipci-navy:#082D56;
  --sipci-light:#F5F8FC;
  --sipci-text:#172033;
  --sipci-muted:#617086;
  --sipci-border:#DDE6F0;
  --sipci-shadow:0 18px 50px rgba(8,45,86,.10);
  --sipci-radius:20px;
}

.soporte-hero{
  position:relative;
  overflow:hidden;
  padding:38px 0 86px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 28%, rgba(39,97,171,.38), transparent 30%),
    linear-gradient(135deg,#061E39 0%,#082D56 52%,#123F70 100%);
}

.soporte-hero::after{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border:1px solid rgba(249,175,23,.18);
  border-radius:50%;
  right:-170px;
  bottom:-250px;
}

.soporte-hero .breadcrumb{
  position:relative;
  z-index:2;
  margin:0 0 52px;
  color:#C9D6E8;
  font-size:.92rem;
}

.soporte-hero .breadcrumb a{
  color:#C9D6E8;
}

.soporte-hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:70px;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:16px;
  font-family:"IBM Plex Mono",monospace;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.10em;
  color:#F9AF17;
}

.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:currentColor;
}

.eyebrow--blue{
  color:var(--sipci-blue);
}

.soporte-hero h1{
  max-width:850px;
  margin:0 0 22px;
  font-family:Sora,sans-serif;
  font-size:clamp(2.5rem,5vw,4.7rem);
  line-height:1.04;
  letter-spacing:-.045em;
  color:#fff;
}

.soporte-hero__lead{
  max-width:760px;
  margin:0;
  color:#DCE8F6;
  font-size:1.12rem;
  line-height:1.8;
}

.soporte-hero__acciones{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:30px;
}

.boton--outline-light{
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  background:transparent;
}

.boton--outline-light:hover{
  border-color:#F9AF17;
  color:#fff;
  background:rgba(249,175,23,.12);
}

.soporte-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:27px;
}

.soporte-hero__chips span{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#E6EEF8;
  font-size:.83rem;
}

.soporte-hero__visual{
  position:relative;
  min-height:370px;
}

.visual-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  box-shadow:0 25px 70px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}

.visual-card--main{
  position:absolute;
  inset:58px 28px 52px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.visual-card__icon{
  display:grid;
  place-items:center;
  width:94px;
  height:94px;
  margin-bottom:25px;
  border:1px solid rgba(249,175,23,.45);
  border-radius:26px;
  color:#F9AF17;
  font-size:3rem;
  background:rgba(249,175,23,.08);
}

.visual-card--main strong{
  font-family:Sora,sans-serif;
  font-size:1.45rem;
}

.visual-card--main span{
  margin-top:8px;
  color:#C9D6E8;
  font-size:.9rem;
}

.visual-card--small{
  position:absolute;
  padding:14px 18px;
  color:#fff;
  font-weight:600;
  font-size:.82rem;
}

.visual-card--top{
  top:18px;
  right:0;
  border-color:rgba(249,175,23,.38);
}

.visual-card--bottom{
  bottom:12px;
  left:0;
  border-color:rgba(39,97,171,.55);
}

.section-heading{
  max-width:840px;
  margin-bottom:42px;
}

.section-heading h2,
.consult-link h2{
  margin:0 0 16px;
  color:var(--sipci-navy);
  font-family:Sora,sans-serif;
  font-size:clamp(1.9rem,3.3vw,3rem);
  line-height:1.15;
  letter-spacing:-.03em;
}

.section-heading p{
  margin:0;
  color:var(--sipci-muted);
  font-size:1.04rem;
  line-height:1.8;
}

.section-heading--center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-heading--center .eyebrow{
  justify-content:center;
}

.section-heading--light h2{
  color:#fff;
}

.section-heading--light p{
  color:#C9D6E8;
}

.seccion--gris{
  background:var(--sipci-light);
}

.seccion--azul{
  background:linear-gradient(135deg,#071F3B,#0B3766);
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.info-card,
.problem-card,
.audience-grid article,
.plan-card{
  border:1px solid var(--sipci-border);
  border-radius:var(--sipci-radius);
  background:#fff;
  box-shadow:0 10px 30px rgba(8,45,86,.05);
}

.info-card{
  position:relative;
  padding:27px;
  overflow:hidden;
}

.info-card::after{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  right:-35px;
  top:-35px;
  border-radius:50%;
  background:rgba(39,97,171,.08);
}

.info-card__number{
  color:var(--sipci-blue);
  font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;
}

.info-card h3,
.problem-card h3,
.audience-grid h3,
.plan-card h3{
  margin:15px 0 8px;
  color:var(--sipci-navy);
  font-family:Sora,sans-serif;
  font-size:1.12rem;
}

.info-card p,
.problem-card p,
.audience-grid p,
.plan-card p{
  margin:0;
  color:var(--sipci-muted);
  line-height:1.7;
}

.problem-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.problem-card{
  padding:28px;
}

.problem-card > span,
.audience-grid article > span{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:14px;
  background:#EDF4FC;
  font-size:1.45rem;
}

.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.service-panel{
  padding:38px;
  border-radius:24px;
  border:1px solid var(--sipci-border);
  box-shadow:var(--sipci-shadow);
}

.service-panel--preventivo{
  background:linear-gradient(145deg,#fff,#F4F9FF);
}

.service-panel--correctivo{
  background:linear-gradient(145deg,#fff,#FFF9ED);
}

.panel-tag,
.plan-card__tag{
  display:inline-block;
  color:var(--sipci-blue);
  font-family:"IBM Plex Mono",monospace;
  font-size:.73rem;
  letter-spacing:.08em;
}

.service-panel--correctivo .panel-tag{
  color:#B97900;
}

.service-panel h2{
  margin:13px 0 12px;
  color:var(--sipci-navy);
  font-family:Sora,sans-serif;
  font-size:1.65rem;
}

.service-panel p{
  color:var(--sipci-muted);
  line-height:1.75;
}

.service-panel ul,
.remote-card ul{
  margin:22px 0 0;
  padding:0;
  list-style:none;
}

.service-panel li,
.remote-card li{
  position:relative;
  margin:10px 0;
  padding-left:24px;
  color:var(--sipci-text);
}

.service-panel li::before,
.remote-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--sipci-blue);
  font-weight:700;
}

.remote-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.remote-card{
  padding:38px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  background:rgba(255,255,255,.07);
}

.remote-card--accent{
  border-color:rgba(249,175,23,.4);
  background:linear-gradient(145deg,rgba(249,175,23,.12),rgba(255,255,255,.045));
}

.remote-card__icon{
  display:block;
  margin-bottom:20px;
  color:#F9AF17;
  font-size:2rem;
}

.remote-card h3{
  margin:0 0 10px;
  color:#fff;
  font-family:Sora,sans-serif;
  font-size:1.45rem;
}

.remote-card p{
  color:#C9D6E8;
  line-height:1.75;
}

.remote-card li{
  color:#E5EEF8;
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}

.audience-grid article{
  padding:24px;
}

.process{
  display:flex;
  align-items:flex-start;
  gap:0;
}

.process-step{
  flex:1;
  text-align:center;
}

.process-step > span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin:0 auto 17px;
  border-radius:50%;
  background:var(--sipci-navy);
  color:#fff;
  font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;
  box-shadow:0 0 0 7px #E8EFF7;
}

.process-step h3{
  margin:0 0 7px;
  color:var(--sipci-navy);
  font-family:Sora,sans-serif;
  font-size:1rem;
}

.process-step p{
  max-width:180px;
  margin:0 auto;
  color:var(--sipci-muted);
  line-height:1.6;
  font-size:.9rem;
}

.process-line{
  flex:0 0 7%;
  height:2px;
  margin-top:29px;
  background:linear-gradient(90deg,var(--sipci-blue),var(--sipci-gold));
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.plan-card{
  padding:32px;
}

.plan-card--featured{
  border:2px solid var(--sipci-blue);
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(39,97,171,.14);
}

.plan-card--featured .plan-card__tag{
  color:var(--sipci-gold);
}

.plan-card a{
  display:inline-block;
  margin-top:22px;
  color:var(--sipci-blue);
  font-weight:600;
}

.consult-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:42px;
  border:1px solid var(--sipci-border);
  border-radius:26px;
  background:#fff;
  box-shadow:var(--sipci-shadow);
}

.consult-link h2{
  font-size:2rem;
}

.consult-link p{
  max-width:720px;
  margin:0;
  color:var(--sipci-muted);
  line-height:1.75;
}

.faq-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:start;
}

.faq{
  display:grid;
  gap:12px;
}

.faq details{
  border:1px solid var(--sipci-border);
  border-radius:15px;
  background:#fff;
}

.faq summary{
  position:relative;
  padding:20px 52px 20px 22px;
  cursor:pointer;
  color:var(--sipci-navy);
  font-weight:600;
  list-style:none;
}

.faq summary::-webkit-details-marker{
  display:none;
}

.faq summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:17px;
  color:var(--sipci-blue);
  font-size:1.35rem;
}

.faq details[open] summary::after{
  content:"−";
}

.faq details p{
  margin:0;
  padding:0 22px 22px;
  color:var(--sipci-muted);
  line-height:1.75;
}

.cta-final{
  padding:90px 0;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 20% 50%,rgba(39,97,171,.35),transparent 30%),
    linear-gradient(135deg,#061C35,#082D56);
}

.cta-final h2{
  max-width:850px;
  margin:0 auto 16px;
  color:#fff;
  font-family:Sora,sans-serif;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.12;
}

.cta-final p{
  max-width:720px;
  margin:0 auto;
  color:#C9D6E8;
  line-height:1.8;
}

.cta-final__acciones{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:13px;
  margin-top:28px;
}

@media (max-width:1000px){
  .soporte-hero__grid,
  .faq-layout{
    grid-template-columns:1fr;
  }

  .soporte-hero__visual{
    min-height:330px;
    max-width:600px;
    width:100%;
    margin:auto;
  }

  .info-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .problem-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .audience-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:800px){
  .split-grid,
  .remote-grid,
  .plans-grid{
    grid-template-columns:1fr;
  }

  .plan-card--featured{
    transform:none;
  }

  .process{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }

  .process-line{
    width:2px;
    height:30px;
    margin:0 auto;
  }

  .consult-link{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:600px){
  .soporte-hero{
    padding-bottom:60px;
  }

  .soporte-hero__visual{
    min-height:290px;
  }

  .visual-card--main{
    inset:42px 14px 38px 14px;
  }

  .visual-card--top{
    right:4px;
  }

  .visual-card--bottom{
    left:4px;
  }

  .info-grid,
  .problem-grid,
  .audience-grid{
    grid-template-columns:1fr;
  }

  .service-panel,
  .remote-card,
  .consult-link{
    padding:27px;
  }
}

/* ===============================
   PLANES DE SOPORTE
================================ */
.plans-grid--four{
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
}

.plan-card{
  display:flex;
  flex-direction:column;
  padding:30px 27px 26px;
  min-height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.plan-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(8,45,86,.10);
  border-color:rgba(39,97,171,.35);
}

.plan-card--featured{
  border:2px solid var(--sipci-blue);
  box-shadow:0 18px 45px rgba(39,97,171,.12);
  transform:translateY(-8px);
}

.plan-card--featured:hover{
  transform:translateY(-12px);
}

.plan-card__audience{
  margin:0 0 15px !important;
  min-height:51px;
  font-size:.94rem;
}

.plan-card__list{
  margin:0;
  padding:0;
  list-style:none;
  flex:1;
}

.plan-card__list li{
  position:relative;
  margin:10px 0;
  padding-left:22px;
  color:var(--sipci-text);
  font-size:.92rem;
  line-height:1.55;
}

.plan-card__list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--sipci-blue);
  font-weight:800;
}

.plan-card--featured .plan-card__tag,
.plan-card--featured .plan-card__link{
  color:var(--sipci-gold);
}

.plan-card__link{
  display:inline-block;
  margin-top:22px;
  color:var(--sipci-blue);
  font-weight:700;
  text-decoration:none;
}

.plan-card__link:hover{
  text-decoration:underline;
}

.plans-note{
  margin-top:24px;
  padding:18px 22px;
  border-left:4px solid var(--sipci-gold);
  border-radius:12px;
  background:#FFF9ED;
  color:var(--sipci-muted);
  line-height:1.65;
}

.plans-note strong{
  color:var(--sipci-navy);
}

.plans-note span{
  display:inline-block;
  margin-left:6px;
  color:var(--sipci-navy);
  font-weight:700;
}

@media (max-width:1200px){
  .plans-grid--four{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:800px){
  .plans-grid--four{
    grid-template-columns:1fr;
  }

  .plan-card--featured,
  .plan-card--featured:hover{
    transform:none;
  }

  .plan-card__audience{
    min-height:0;
  }
}

@media (max-width:600px){
  .plans-note span{
    display:block;
    margin:5px 0 0;
  }
}

.pie__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pie__social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    font-size: 17px;
}

.pie__social a:hover {
    background: #F9AF17;
    color: #082D56;
    transform: translateY(-3px);
}