/* ==========================================================================
   SERVICES — /desarrollo-apps-ios/
   Componentes exclusivos de la página de servicios. Base visual: home.css.
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
.service-page .service-hero { padding: 150px 0 120px; background: var(--bg); }
.service-page .service-hero h1 { max-width: 900px; }

/* Oferta ----------------------------------------------------------------- */
.offer-list { margin-top: 56px; border-top: 1px solid var(--page-rule); }
.offer-list article { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--page-rule); }
.offer-list article > span { color: var(--accent-deep); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.offer-list h3 { margin: 0 0 9px; font-size: 1.2rem; }
.offer-list p { max-width: 62ch; margin: 0; color: var(--ink-dim); font-size: 1.04rem; line-height: 1.5; }

/* Tecnología ------------------------------------------------------------- */
.tech-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; }
.tech-layout p { max-width: 56ch; margin: 0; color: var(--ink-dim); font-size: 1.12rem; line-height: 1.55; }

/* FAQ -------------------------------------------------------------------- */
.faq-list { margin-top: 48px; border-top: 1px solid var(--page-rule); }
.faq-list details { border-bottom: 1px solid var(--page-rule); }
.faq-list summary { position: relative; padding: 23px 32px 23px 0; color: var(--ink); cursor: pointer; font-family: var(--font-display); font-weight: 700; list-style: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 2px; color: var(--accent-deep); font-size: 20px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 68ch; padding: 0 32px 23px 0; margin: 0; color: var(--ink-dim); font-size: 1.02rem; line-height: 1.55; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 620px) {
    .service-page .service-hero { padding: 100px 0 80px; }
    .offer-list article, .tech-layout { grid-template-columns: 1fr; gap: 18px; }
}