/* =====================================================================
   PG Ingeniería S.R.L. (S00107) — pages/interior.css
   Cabecera con foto de las páginas interiores (servicios, contacto) y bloques propios de cada una.
   ===================================================================== */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(2.5rem, 6vw, 4.5rem); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(10, 10, 10, .94) 0%, rgba(10, 10, 10, .8) 55%, rgba(10, 10, 10, .6) 100%); }
.page-hero__content { display: grid; gap: 1rem; max-width: 720px; }
.page-hero .lead { color: var(--bone-2); max-width: 54ch; }

.svc-detail { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line-dark); }
.svc-detail:last-child { border-bottom: 0; }
@media (min-width: 900px) { .svc-detail { grid-template-columns: 5fr 7fr; align-items: center; } .svc-detail:nth-child(even) .svc-detail__media { order: 2; } }
.svc-detail__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-3); }
.svc-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail__media--icon { display: grid; place-items: center; background: linear-gradient(160deg, #1b1b1b, #0a0a0a); }
.svc-detail__media--icon img { width: auto; height: 88%; object-fit: contain; }
.svc-detail__body { display: grid; gap: 1rem; align-content: center; }
.svc-detail__body p { color: var(--muted-2); max-width: 58ch; }

.contact-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 960px) { .contact-layout { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.contact-list { display: grid; gap: .9rem; }
.contact-form { display: grid; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line); }
.contact-map { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 340px; background: var(--ink-3); border: 1px solid var(--line); }
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }