/* =========================
   SERVICE PAGE (MANTENIMIENTO)
   ========================= */

/* HERO con imagen */
.svc-hero{
    position: relative;
    padding: 74px 0 54px;
  
    /* cambia por la imagen que quieras */
    background-image: url("../imagenes/empresa_02.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .svc-hero::before{
    content:"";
    position:absolute;
    inset:0;
  
    background:
      /* fundido inferior para evitar corte */
      linear-gradient(
        to bottom,
        rgba(245,245,245,0) 0%,
        rgba(245,245,245,0) 62%,
        rgba(245,245,245,.70) 82%,
        rgba(245,245,245,1) 100%
      ),
  
      /* overlay lateral para legibilidad (texto encima) */
      linear-gradient(
        90deg,
        rgba(245,245,245,.88) 0%,
        rgba(245,245,245,.55) 55%,
        rgba(245,245,245,.12) 100%
      ),
  
      /* luces marca */
      radial-gradient(900px 500px at 12% 18%, rgba(72,201,176,.12), transparent 60%),
      radial-gradient(900px 500px at 85% 22%, rgba(184,142,209,.12), transparent 60%);
  }
  
  html[data-theme="dark"] .svc-hero::before{
    background:
      linear-gradient(
        to bottom,
        rgba(14,22,33,0) 0%,
        rgba(14,22,33,0) 62%,
        rgba(14,22,33,.65) 82%,
        rgba(14,22,33,1) 100%
      ),
      linear-gradient(
        90deg,
        rgba(14,22,33,.86) 0%,
        rgba(14,22,33,.55) 55%,
        rgba(14,22,33,.14) 100%
      ),
      radial-gradient(900px 500px at 12% 18%, rgba(72,201,176,.16), transparent 60%),
      radial-gradient(900px 500px at 85% 22%, rgba(184,142,209,.16), transparent 60%);
  }
  
  .svc-hero .wrap{ position: relative; z-index: 1; }
  
  .svc-hero__inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  .svc-hero__content{
    max-width: 78ch;
  }
  
  .svc-title{
    margin: 10px 0 10px;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.8px;
  }
  
  .svc-lead{
    margin: 0;
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(11,18,32,.78);
  }
  
  html[data-theme="dark"] .svc-lead{
    color: rgba(233,236,245,.92);
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
  }
  
  .svc-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  
  /* Sección texto */
  .svc-section{
    padding: 46px 0;
  }
  
  .svc-text{
    margin: 0;
    line-height: 1.7;
    text-align: justify;
    text-justify: inter-word;
    max-width: 120ch;
  }
  
  /* Cards destacadas */
  .svc-cards{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: stretch;
  }
  
  .svc-card{
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 16px;
    position: relative;
    overflow: hidden;
  
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .svc-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(700px 220px at 18% 0%, rgba(72,201,176,.10), transparent 60%),
      radial-gradient(700px 220px at 85% 10%, rgba(184,142,209,.10), transparent 60%);
    pointer-events:none;
  }
  
  .svc-card > *{ position: relative; z-index: 1; }
  
  .svc-card h3{
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: var(--accent);
  }
  
  .svc-card p{
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
  }
  
  /* Responsive */
  @media (max-width: 920px){
    .svc-hero{ padding: 64px 0 44px; }
    .svc-cards{ grid-template-columns: 1fr; }
  }