/* service-page.css — estilos compartidos para las páginas de servicio */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#F7F3EC;color:#0E1B2C;font-family:system-ui,-apple-system,'Segoe UI',Helvetica,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 32px}

/* ── Header ── */
.sp-header{position:sticky;top:0;z-index:100;background:#0E1B2C;padding:14px 0;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.sp-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sp-logo{height:34px;width:auto;display:block;filter:brightness(0) invert(1);object-fit:contain}
.sp-back{color:rgba(247,243,236,.55);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px;white-space:nowrap}
.sp-back:hover{color:#F7F3EC}
.sp-cta-btn{background:#B08A4A;color:#F7F3EC;padding:10px 22px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;white-space:nowrap}
.sp-cta-btn:hover{background:#9A7640}

/* ── Hero ── */
.sp-hero{background:#0E1B2C;color:#F7F3EC;padding:104px 0 84px}
.sp-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B08A4A;font-weight:600;margin-bottom:20px}
.sp-hero h1{font-size:clamp(38px,6vw,76px);font-weight:300;line-height:1.06;letter-spacing:-.025em;max-width:840px;margin-bottom:28px}
.sp-hero p{font-size:19px;color:rgba(247,243,236,.62);max-width:580px;line-height:1.6}

/* ── Sections ── */
.sp-section{padding:88px 0;border-top:1px solid rgba(14,27,44,.1)}
.sp-section--dark{background:#0E1B2C;color:#F7F3EC;border-top:none;padding:88px 0}
.sp-section-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B08A4A;font-weight:600;margin-bottom:16px}
.sp-section h2{font-size:clamp(26px,4vw,44px);font-weight:300;letter-spacing:-.022em;margin-bottom:28px;line-height:1.13;max-width:720px}
.sp-section-body{max-width:680px;color:#5A6A7C;font-size:17px;line-height:1.7;margin-bottom:0}

/* ── Benefits ── */
.sp-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;margin-top:56px}
.sp-benefit{border-top:2px solid #B08A4A;padding-top:20px}
.sp-benefit h3{font-size:17px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.sp-benefit p{font-size:15px;color:#5A6A7C;line-height:1.65}

/* ── Process ── */
.sp-process{margin-top:48px;display:flex;flex-direction:column;max-width:700px}
.sp-step{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid rgba(14,27,44,.09)}
.sp-step:last-child{border-bottom:none}
.sp-step-num{font-size:32px;font-weight:300;color:#B08A4A;letter-spacing:-.02em;line-height:1.1;padding-top:2px}
.sp-step h3{font-size:16px;font-weight:600;margin-bottom:8px}
.sp-step p{font-size:15px;color:#5A6A7C;line-height:1.65}

/* ── FAQ ── */
.sp-faq{margin-top:48px;display:flex;flex-direction:column;max-width:780px}
.sp-faq-item{padding:28px 0;border-bottom:1px solid rgba(14,27,44,.09)}
.sp-faq-item:first-child{border-top:1px solid rgba(14,27,44,.09)}
.sp-faq-item h3{font-size:17px;font-weight:600;margin-bottom:12px}
.sp-faq-item p{font-size:15px;color:#5A6A7C;line-height:1.65}

/* ── CTA ── */
.sp-cta-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:44px}
.sp-cta-primary{display:inline-flex;align-items:center;gap:8px;background:#B08A4A;color:#F7F3EC;padding:14px 32px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:2px}
.sp-cta-primary:hover{background:#9A7640}
.sp-cta-tel{font-size:26px;color:#F7F3EC;font-weight:300;letter-spacing:-.01em}
.sp-cta-tel:hover{color:#B08A4A}
.sp-section--dark .sp-section-body{color:rgba(247,243,236,.6)}

/* ── Footer ── */
.sp-footer{background:#060F1A;color:rgba(247,243,236,.38);padding:28px 0;font-size:13px}
.sp-footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.sp-footer a{color:rgba(247,243,236,.38)}
.sp-footer a:hover{color:#B08A4A}

/* ── Responsive ── */
@media(max-width:680px){
  .sp-hero{padding:72px 0 60px}
  .sp-section,.sp-section--dark{padding:60px 0}
  .sp-cta-primary{width:100%;justify-content:center}
  .container{padding:0 20px}
  .sp-back{display:none}
}