/* ── VARIABLES ── */
  :root {
    --azul: #0D3B6E;
    --azul-med: #1A5FA8;
    --azul-claro: #2B82D4;
    --verde: #1E8A5E;
    --verde-claro: #27B07A;
    --gris-oscuro: #1A1D23;
    --gris-claro: #F4F6F9;
    --blanco: #FFFFFF;
    --acento: #E8F4FD;
    --texto: #2C303A;
    --texto-sub: #6B7280;
    --borde: rgba(13,59,110,0.12);
    --sombra: 0 4px 24px rgba(13,59,110,0.10);
    --radio: 16px;
    --radio-sm: 8px;
  }
 
  /* ── HERO ── */
  .serv-hero {
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-med) 60%, var(--azul-claro) 100%);
    padding: 110px 6vw 70px;
    position: relative;
    overflow: hidden;
  }
  .serv-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  .serv-hero-inner { position: relative; max-width: 760px; }
  .serv-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.6);
    text-decoration: none; font-size: 13px;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
    font-family: 'DM Sans', sans-serif;
  }
  .serv-back:hover { color: var(--blanco); }
  .serv-hero-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--verde-claro);
    margin-bottom: 0.75rem;
    font-family: 'DM Sans', sans-serif;
  }
  .serv-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--blanco);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1rem;
  }
  .serv-hero p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem; color: rgba(255,255,255,0.72);
    max-width: 560px; line-height: 1.7; font-weight: 300;
    margin-bottom: 2rem;
  }
  .serv-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    font-size: 12px; font-weight: 500;
    padding: 6px 16px; border-radius: 50px;
    font-family: 'DM Sans', sans-serif;
  }
  .serv-hero-badge i { color: var(--verde-claro); }
 
  /* ── CONTENIDO PRINCIPAL ── */
  .serv-main {
    background: var(--gris-claro);
    padding: 70px 6vw;
  }
 
  /* ── SUBAREAS ── */
  .subarea {
    margin-bottom: 3.5rem;
  }
  .subarea-header {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--borde);
  }
  .subarea-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    background: var(--azul);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--blanco); font-size: 1.1rem;
  }
  .subarea-header h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem; font-weight: 700;
    color: var(--azul);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .subarea-header span {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px; font-weight: 400;
    color: var(--texto-sub);
    text-transform: none; letter-spacing: 0;
    margin-top: 2px;
  }
 
  /* ── TABLA MODERNA ── */
  .tabla-wrap {
    background: var(--blanco);
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    overflow: hidden;
    box-shadow: var(--sombra);
  }
  .tabla-moderna {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', sans-serif;
  }
  .tabla-moderna thead tr {
    background: var(--azul);
  }
  .tabla-moderna thead th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'DM Sans', sans-serif;
  }
  .tabla-moderna thead th:first-child { border-radius: 0; }
  .tabla-moderna tbody tr {
    border-bottom: 1px solid var(--borde);
    transition: background 0.15s;
  }
  .tabla-moderna tbody tr:last-child { border-bottom: none; }
  .tabla-moderna tbody tr:hover { background: var(--acento); }
  .tabla-moderna tbody td {
    padding: 0.9rem 1.25rem;
    font-size: 13.5px; color: var(--texto);
    line-height: 1.5;
    vertical-align: top;
  }
  .tabla-moderna tbody td:nth-child(2) {
    color: var(--azul-med);
    font-weight: 500;
    font-size: 13px;
  }
  .tabla-moderna tbody td:nth-child(3) {
    color: var(--texto-sub);
    font-size: 13px;
  }
 
  /* Badge producto */
  .badge-producto {
    display: inline-block;
    background: var(--acento);
    color: var(--azul-med);
    font-size: 11px; font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    border: 1px solid rgba(43,130,212,0.2);
  }
 
  /* ── CTA CONTACTO ── */
  .serv-cta {
    background: var(--azul);
    padding: 70px 6vw;
    text-align: center;
  }
  .serv-cta h2 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800; color: var(--blanco);
    margin-bottom: 0.75rem;
  }
  .serv-cta p {
    font-family: 'DM Sans', sans-serif;
    color: rgba(255,255,255,0.65);
    margin-bottom: 2rem; font-size: 1rem;
  }
  .btn-primary {
    background: var(--blanco);
    color: var(--azul);
    font-family: 'Syne', sans-serif;
    font-size: 14px; font-weight: 700;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
 
  /* ── RESPONSIVE ── */
  @media (max-width: 700px) {
    .tabla-moderna thead { display: none; }
    .tabla-moderna tbody tr {
      display: block;
      padding: 1rem;
      margin-bottom: 0;
    }
    .tabla-moderna tbody td {
      display: block;
      padding: 0.3rem 0;
      font-size: 13px;
    }
    .tabla-moderna tbody td::before {
      content: attr(data-titulo) ": ";
      font-weight: 600; color: var(--azul);
      font-size: 11px; text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .tabla-moderna tbody td:nth-child(2),
    .tabla-moderna tbody td:nth-child(3) { color: var(--texto); font-size: 13px; }
    .badge-producto { display: none; }
  }