/* Estilos compartidos por las páginas individuales de servicio.
   Mismo lenguaje visual que la sección de detalle de servicios.html. */

.crumbs { border-bottom:1px solid var(--line); background:var(--bg); }
.crumbs .wrap { padding:14px 0; font-size:.82rem; color:var(--mut); display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:var(--mut); }
.crumbs a:hover { color:var(--primary); }
.crumbs b { color:var(--slate); font-weight:600; }

.svc-layout { display:grid; grid-template-columns:1fr 420px; gap:64px; align-items:start; }
@media(max-width:960px){ .svc-layout{grid-template-columns:1fr;} }

.svc-tag { display:inline-block; background:rgba(192,69,90,.08); color:var(--primary); border:1px solid rgba(192,69,90,.2); border-radius:20px; font-size:.76rem; font-weight:700; padding:4px 14px; margin-bottom:16px; letter-spacing:.06em; text-transform:uppercase; }
.svc-body h2 { font-size:1.9rem; color:var(--slate); margin-bottom:14px; line-height:1.2; }
.svc-body > p { color:var(--mut); font-size:.97rem; line-height:1.78; margin-bottom:18px; }
.mini-h { font-size:.96rem; color:var(--slate); margin:24px 0 10px; }

.audience-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
@media(max-width:560px){ .audience-grid{grid-template-columns:1fr;} }
.audience-item { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.audience-item strong { display:block; font-size:.88rem; color:var(--slate); margin-bottom:3px; }
.audience-item span { font-size:.8rem; color:var(--mut); }

.svc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.svc-chip { background:rgba(192,69,90,.07); color:var(--primary); border:1px solid rgba(192,69,90,.18); border-radius:20px; padding:4px 12px; font-size:.78rem; font-weight:500; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }

.process-panel { background:linear-gradient(160deg,var(--slate),#1c3244); border-radius:24px; padding:32px; color:#fff; position:sticky; top:90px; }
.process-panel h3 { font-size:.82rem; color:rgba(255,255,255,.45); font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:24px; }
.step { display:flex; gap:14px; margin-bottom:18px; }
.step:last-of-type { margin-bottom:0; }
.step-dot { min-width:28px; height:28px; border-radius:8px; background:rgba(255,150,53,.15); border:1px solid rgba(255,150,53,.3); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:var(--accent); flex-shrink:0; }
.step-text h4 { font-size:.86rem; color:#fff; font-weight:700; margin-bottom:3px; }
.step-text p { font-size:.76rem; color:rgba(255,255,255,.45); line-height:1.5; }

.tools-table { width:100%; border-collapse:collapse; margin-top:24px; font-size:.82rem; }
.tools-table th { background:rgba(255,255,255,.06); color:rgba(255,255,255,.45); padding:8px 10px; text-align:left; font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.tools-table td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.7); vertical-align:top; }
.tools-table tr:last-child td { border-bottom:none; }

.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:820px){ .why-grid{grid-template-columns:1fr;} }
.why-card { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px; }
.why-card h4 { font-size:.96rem; color:var(--slate); margin-bottom:6px; }
.why-card p { font-size:.84rem; color:var(--mut); line-height:1.65; }