/* Estilos compartidos para las páginas de servicio (mecánico, eléctrico, civil)
   - Controles de layout para subsecciones
   - Estilos para .service-section, .subsection, .advantages
   - Mejoras para botón "Volver a Servicios" y galerías
*/

.back-to-services { margin-bottom: 1rem; }
.btn--back { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 999px; }

.service-section {
  padding: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,251,255,0.95));
  border-radius: var(--radius-md);
  border: 1px solid rgba(30,58,138,0.04);
}

.service-content { max-width: 100%; }
.service-detail__lead { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 1.25rem; }

.service-subsections { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.subsection { padding: 1rem; background: white; border-radius: var(--radius-md); border: 1px solid rgba(2,6,23,0.04); box-shadow: var(--shadow-sm); }
.subsection__title { font-size: 1rem; margin-bottom: .5rem; font-weight:700; }
.subsection__text { color: var(--text-secondary); line-height: 1.6; }
.subsection__note { margin-top: .75rem; font-size: .95rem; color: var(--text-secondary); background: rgba(30,58,138,0.03); padding: .75rem; border-radius: var(--radius-sm); }

.advantages { margin-top: 1rem; }
.advantages__title { display:flex; align-items:center; gap:.5rem; font-size:1.125rem; }
.advantages__list { margin-top:.75rem; display:grid; gap:.5rem; }

.gallery.card { margin-top: 1.25rem; padding: 1rem; }
.gallery__img { border-radius: var(--radius-md); }

/* Note: subsections are displayed in a single column by design (desktop and mobile)
   This keeps each subsection as a full-width card for better readability on wide screens. */
@media (max-width: 900px) {
  .service-detail__lead { font-size: 1rem; }
}

/* Small helper for collapsible subsections (JS will toggle .is-collapsed) */
.subsection .subsection__toggle { display: none; }
.subsection.is-collapsed .subsection__text,
.subsection.is-collapsed .list-check { display: none; }
.subsection.is-collapsed .subsection__note { display: none; }
.subsection .subsection__title { cursor: default; }
@media (max-width: 700px) {
  .subsection .subsection__title { cursor: pointer; position: relative; padding-right: 1.6rem; }
  .subsection .subsection__title::after { content: '\25BC'; position: absolute; right: 0; top: 0; font-size: .85rem; transform: translateY(3px); transition: transform .2s ease; }
  .subsection.is-expanded .subsection__title::after { transform: rotate(180deg); }
  .subsection .subsection__toggle { display: block; }
}
