/* ============================================================
   POLÍTICAS DEL SERVICIO — estilos específicos de
   politicas-del-servicio.html (o index.html según el nombre final)
   Reutiliza tokens/componentes de style.css, animations.css,
   responsive.css y services.css. No duplicar aquí lo que ya
   exista en esos archivos.
   ============================================================ */

/* ---------- 1. HERO LEGAL — solo texto, sin visual a la derecha ---------- */
.legal-hero{padding-block:var(--space-2xl) var(--space-xl)}
.legal-hero .breadcrumb{margin-bottom:1rem}
.legal-hero h1{margin-top:.5rem;color:var(--white);font-size:clamp(2rem,4vw,2.75rem)}


/* ---------- 2. LAYOUT — índice lateral fijo + contenido ---------- */
.legal-layout{
  display:grid;grid-template-columns:260px 1fr;gap:var(--space-2xl);
  align-items:start;
}

.legal-toc{position:sticky;top:110px}
.legal-toc .eyebrow{display:block;margin-bottom:1rem}
.legal-toc nav{display:flex;flex-direction:column;gap:.1rem;border-left:2px solid rgba(4,65,84,.1)}
.legal-toc nav a{
  display:block;padding:.55rem 0 .55rem 1rem;margin-left:-2px;
  border-left:2px solid transparent;
  font-size:.86rem;line-height:1.4;color:var(--text-muted);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.legal-toc nav a:hover{color:var(--navy);border-left-color:rgba(4,65,84,.35)}


/* ---------- 3. CONTENIDO — bloques de artículos ---------- */
.legal-content{max-width:720px}

.legal-block{padding-block:1.85rem;border-top:1px solid rgba(4,65,84,.08)}
.legal-block:first-child{border-top:none;padding-top:0}
.legal-block h2{
  font-size:1.3rem;color:var(--navy);margin-bottom:.9rem;
  scroll-margin-top:110px;
}
.legal-block p{color:var(--text-muted);line-height:1.75;font-size:.98rem}
.legal-block p strong{color:var(--navy)}
.legal-block p a{color:var(--blue-primary);text-decoration:underline;text-underline-offset:2px}
.legal-block p a:hover{color:var(--navy)}


/* ---------- 4. CTA banner (ancho completo, con letra "G") ---------- */
.cta-banner{
  position:relative;overflow:hidden;
  background:var(--gradient-brand);
  padding-block:var(--space-2xl);
  min-height:280px;display:flex;align-items:center;
}
.cta-banner > *{position:relative;z-index:1}
.cta-banner-g{
  position:absolute;left:-1.5rem;bottom:-4rem;z-index:0;
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:min(26vw,320px);color:var(--white);opacity:.14;
  pointer-events:none;user-select:none;
}
.cta-banner-inner{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-md);flex-wrap:wrap;
}
@media (max-width:960px){
  .cta-banner-inner{flex-direction:column;text-align:center}
}
@media (max-width:640px){
  .cta-banner{min-height:auto;padding-block:var(--space-xl)}
  .cta-banner-g{font-size:min(55vw,260px);left:-1rem;bottom:-2.5rem}
}


/* ---------- 5. RESPONSIVE ---------- */
@media (max-width:960px){
  .legal-layout{grid-template-columns:1fr;gap:var(--space-lg)}

  .legal-toc{
    position:static;border-left:none;
    padding-bottom:var(--space-md);margin-bottom:var(--space-md);
    border-bottom:var(--border);
  }
  .legal-toc nav{
    display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem .75rem;
    border-left:none;
  }
  .legal-toc nav a{
    border-left:none;padding:.4rem 0;font-size:.82rem;
  }
}
@media (max-width:640px){
  .legal-toc nav{grid-template-columns:1fr}
  .legal-block{padding-block:1.4rem}
  .legal-block h2{font-size:1.15rem}
  .legal-block p{font-size:.92rem}
}