/* ============================================================
   PAGE-SERVICE.CSS — Estilos compartidos para páginas de servicio
   Pisciotti Gómez Abogados
   ============================================================ */

/* ── HERO DE SERVICIO ─────────────────────────────────────── */
.service-hero {
  background: linear-gradient(135deg, #0d2247 0%, var(--color-navy) 70%, var(--color-navy-light) 100%);
  padding: calc(var(--nav-height) + 64px) 0 80px;
  position: relative;
  overflow: hidden;
}
.service-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='%23ffffff' fill-opacity='0.025'%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/svg%3E");
  pointer-events: none;
}
.service-hero__gold-bar { position: absolute; top:0; left:0; right:0; height:3px; }
.service-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
  position: relative; z-index: 1;
}
.service-hero__breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-5);
}
.service-hero__breadcrumb a { color: rgba(255,255,255,0.55); transition: color 0.2s; }
.service-hero__breadcrumb a:hover { color: var(--color-gold); }
.service-hero__breadcrumb span { color: rgba(255,255,255,0.30); }
.service-hero__icon {
  font-size: 56px;
  width: 90px; height: 90px;
  background: var(--color-gold-muted);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-6);
}
.service-hero h1 { font-size: var(--text-h2); color: var(--color-text-white); margin-bottom: var(--space-4); }
.service-hero__sub { color: var(--color-text-light); font-size: var(--text-lg); max-width: 560px; margin-bottom: var(--space-8); }
.service-hero__btns { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.service-hero__card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  min-width: 240px;
  backdrop-filter: blur(10px);
}
.service-hero__card-label { font-size: var(--text-xs); color: var(--color-gold); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-3); }
.service-hero__price { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--color-text-white); margin-bottom: var(--space-2); }
.service-hero__price-note { font-size: var(--text-sm); color: rgba(255,255,255,0.50); }
.service-hero__geo { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--text-sm); color: rgba(255,255,255,0.60); }

@media (max-width: 768px) {
  .service-hero__inner { grid-template-columns: 1fr; }
  .service-hero__card { display: none; }
}

/* ── SECCIÓN QUÉ ES ───────────────────────────────────────── */
.que-es { background: var(--color-bg-white); }
.que-es__inner { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-16); align-items: start; }
.que-es__content p { color: var(--color-text-mid); font-size: var(--text-md); line-height: var(--leading-loose); margin-bottom: var(--space-6); }
.que-es__content p strong { color: var(--color-navy); }
.target-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.target-item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-gold);
  font-size: var(--text-sm); color: var(--color-text-mid);
}
.target-item strong { color: var(--color-navy); display: block; margin-bottom: 2px; }

/* Sidebar sticky */
.que-es__sidebar { position: sticky; top: calc(var(--nav-height) + 24px); }
.sidebar-cta {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}
.sidebar-cta h4 { color: var(--color-text-white); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.sidebar-cta p { color: rgba(255,255,255,0.65); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.sidebar-cta .btn { width: 100%; margin-bottom: var(--space-3); justify-content: center; }
.sidebar-cta .sidebar-cta__note { font-size: var(--text-xs); color: rgba(255,255,255,0.40); margin-top: var(--space-4); }

@media (max-width: 900px) {
  .que-es__inner { grid-template-columns: 1fr; }
  .que-es__sidebar { position: static; }
}

/* ── PROCESO DEL SERVICIO ─────────────────────────────────── */
.servicio-proceso { background: var(--color-bg-soft); }
.proceso-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-10); position: relative; }
.proceso-list::before {
  content: '';
  position: absolute; left: 28px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--color-gold), rgba(201,168,76,0.1));
  z-index: 0;
}
.proceso-step {
  display: flex; gap: var(--space-6); align-items: flex-start;
  padding: var(--space-5) 0;
  position: relative; z-index: 1;
}
.proceso-step__num {
  width: 56px; height: 56px; min-width: 56px;
  background: var(--color-navy); border: 2px solid var(--color-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: var(--text-lg);
  color: var(--color-gold); font-weight: var(--font-bold);
}
.proceso-step__content { padding-top: var(--space-3); }
.proceso-step__title { font-size: var(--text-md); color: var(--color-navy); margin-bottom: var(--space-2); }
.proceso-step__desc { font-size: var(--text-sm); color: var(--color-text-mid); line-height: var(--leading-loose); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-section { background: var(--color-bg-white); }
.faq-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-10); }
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5) 0;
  font-family: var(--font-sans); font-size: var(--text-md);
  font-weight: var(--font-semibold); color: var(--color-navy);
  text-align: left; gap: var(--space-4);
  transition: color 0.2s;
}
.faq-question:hover { color: var(--color-gold); }
.faq-icon { font-size: 20px; flex-shrink: 0; transition: transform 0.3s; color: var(--color-gold); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-answer p {
  padding-bottom: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text-mid);
  line-height: var(--leading-loose);
}
.faq-item.is-open .faq-answer { max-height: 400px; }

/* ── SERVICIOS RELACIONADOS ───────────────────────────────── */
.related-services { background: var(--color-bg-blue); }