/* ORBLIZT · Páginas de servicio
   Componentes para las páginas de detalle (pagina-web, seo-ia, crm, automatizacion).
   Se carga junto a styles.css y reutiliza sus variables; no toca el home. */

.page-wrap{ max-width:1250px;padding:0 var(--gutter);margin:0 auto }

.breadcrumb{ flex-wrap:wrap;align-items:center;gap:8px;color:var(--silver);letter-spacing:.1em;margin-bottom:30px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:10px;display:flex }
.breadcrumb a{ color:var(--silver);transition:color .2s }
.breadcrumb a:hover{ color:var(--bone) }
.breadcrumb span{ color:var(--line) }
.breadcrumb em{ color:var(--bone);font-style:normal }

.page-hero{ padding-top:clamp(140px,20svh,190px);padding-bottom:64px }
.page-hero h1{ letter-spacing:-.045em;max-width:820px;font-size:clamp(38px,5.2vw,76px);font-weight:500;line-height:1.08 }
.answer-box{ max-width:720px;color:var(--silver);margin-top:26px;font-size:16px;line-height:1.85 }
.answer-box strong{ color:var(--bone);font-weight:600 }
.page-meta{ flex-wrap:wrap;align-items:center;gap:16px 40px;margin-top:38px;display:flex }
.price-chip{ flex-direction:column;gap:3px;display:flex }
.price-chip strong{ letter-spacing:-.03em;font-family:var(--display);font-size:27px;font-weight:600 }
.price-chip span{ color:var(--silver);font-size:11px }
.page-hero .hero-actions{ margin-top:38px }

.content-section{ padding-top:64px;padding-bottom:64px;position:relative }
.content-section::before{ content:"";border-top:1px solid var(--line);position:absolute;top:0;left:var(--gutter);right:var(--gutter) }
.content-section:first-of-type{ padding-top:0 }
.content-section:first-of-type::before{ display:none }
.content-heading{ margin-bottom:34px }
.content-heading h2{ letter-spacing:-.04em;font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:600;line-height:1.15 }
.lede{ max-width:680px;color:var(--silver);margin-top:16px;font-size:14px;line-height:1.85 }

.detail-list{ grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;margin:36px 0 0;padding:0;list-style:none;display:grid }
.detail-list li{ border-top:1px solid var(--line);padding-top:20px;font-size:13px;line-height:1.75;color:var(--silver) }
.detail-list strong{ color:var(--bone);margin-bottom:6px;font-family:var(--body);font-size:14px;font-weight:600;display:block }

.steps-list{ grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;margin:36px 0 0;padding:0;list-style:none;display:grid }
.steps-list li{ border-top:1px solid var(--line);padding-top:20px }
.steps-list .step-number{ color:var(--accent);font-family:var(--display);margin-bottom:14px;font-size:15px;display:block }
.steps-list h3{ letter-spacing:-.02em;margin-bottom:8px;font-size:18px }
.steps-list p{ color:var(--silver);font-size:12.5px;line-height:1.75 }

.pricing-card{ border:1px solid var(--line);border-radius:18px;max-width:560px;margin-top:6px;padding:36px 38px }
.pricing-card .price-chip strong{ font-size:36px }
.pricing-card ul{ margin-top:22px;padding-left:18px;font-size:12.5px;line-height:1.85;color:var(--silver) }
.pricing-card ul li+li{ margin-top:7px }
.pricing-note{ color:var(--silver);margin-top:22px;max-width:480px;font-size:12px;line-height:1.7 }

.faq-list{ border-top:1px solid var(--line);margin-top:32px }
.faq-item{ border-bottom:1px solid var(--line);padding:22px 0 }
.faq-item summary{ cursor:pointer;justify-content:space-between;align-items:center;gap:24px;letter-spacing:-.01em;list-style:none;font-size:15px;font-weight:600;display:flex }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{ content:"+";color:var(--accent);flex-shrink:0;font-size:20px;font-weight:300 }
.faq-item[open] summary::after{ content:"−" }
.faq-item p{ color:var(--silver);max-width:680px;margin-top:14px;font-size:13px;line-height:1.85 }

.cross-links{ grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px;display:grid }
.cross-links.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.cross-link{ border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:10px;padding:24px 24px 26px;transition:border-color .2s,transform .2s;display:flex }
.cross-link:hover{ border-color:var(--accent);transform:translateY(-3px) }
.cross-link .mono{ color:var(--silver);font-size:10px }
.cross-link strong{ letter-spacing:-.02em;font-family:var(--display);font-size:17px }
.cross-link span{ color:var(--silver);font-size:12px;line-height:1.65 }

.updated-note{ color:var(--silver);letter-spacing:.08em;margin-top:16px;font-size:10px;display:block }

@media (max-width:1000px){
  .cross-links.cols-4,.steps-list{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:480px){
  .steps-list{ grid-template-columns:1fr }
}
@media (max-width:760px){
  .page-hero{ padding-top:clamp(112px,17svh,150px);padding-bottom:46px }
  .content-section{ padding-top:46px;padding-bottom:46px }
  .page-hero .hero-actions{ flex-wrap:wrap;gap:16px 28px }
  .page-hero .button{ gap:20px;white-space:nowrap }
  .page-hero .text-link{ gap:14px;white-space:nowrap }
  .detail-list{ grid-template-columns:1fr }
  .cross-links,.cross-links.cols-4{ grid-template-columns:1fr }
  .pricing-card{ padding:28px 26px }
}