/* =========================================================
   PÁGINA: Ficha de detalle de Servicio
   servicios/servicio-*.html — TEMPLATE MAESTRO reutilizable
   para las 9 fichas de servicio.

   Header (.header--light), Footer, botones (.btn) y el CTA
   final (.final-cta) son componentes transversales y viven en
   global.css. Acá solo van los estilos propios de esta vista.
   ========================================================= */

/* ============ HERO DEL SERVICIO ============ */
/* Primera sección de la página: el Header (.header--light) queda
   absolute + transparente flotando encima, así que compensamos
   con padding-top propio (mismo patrón que .services en servicios.css). */
.service-hero {
  padding: clamp(190px, 16vw, 250px) 0 20px;
  text-align: center;
}
.service-hero__kicker {
  display: block;
  margin-bottom: 20px;
  color: var(--color-gray);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.service-hero h1 {
  max-width: 900px;
  margin: 0 auto;
}
/* Algunos títulos de servicio ("Impermeabilizaciones en general") son una
   palabra sola muy larga (21 caracteres) que, al piso de --type-title-size
   (2rem), no entra en una sola línea en mobile angosto. Medido: a 320px el
   contenedor deja ~272px útiles y la palabra sola necesita ~266px a 1.15rem;
   valores mayores (probado 1.4rem) siguen partiéndola a la mitad. */
@media (max-width: 400px) {
  .service-hero h1 { font-size: 1.15rem; }
}

/* ============ FOTO VERTICAL + OTROS SERVICIOS ============ */
.service-main { padding: 40px 0 60px; }

.service-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 32px;
}

.service-detail__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
}

.service-detail__other {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-detail__eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--color-gray);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: right;
}

.service-pills {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
}
.service-pill-btn {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  border-radius: 2px;
  transition: filter var(--transition), transform var(--transition);
}
.service-pill-btn:hover,
.service-pill-btn:focus-visible {
  filter: brightness(0.9);
  transform: translateX(4px);
}

/* ============ PÁRRAFO DESCRIPTIVO ============ */
.service-description { padding: 20px 0 40px; }
.service-description p {
  line-height: 1.6;
}

/* ============ GALERÍA DE 2 FOTOS ============ */
.service-gallery { padding: 0; }
.service-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.service-gallery__item {
  overflow: hidden;
  border-radius: 4px;
}
.service-gallery__img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 4px;
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.service-gallery__img:hover {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* ============ BLOQUES DE INFO (aplicación / ventajas) ============
   Sub-secciones editoriales con H2 + párrafos + listas con viñetas.
   Reutilizable en cualquier ficha de servicio que necesite este
   patrón (ej. "¿Dónde se aplica?", "Ventajas", "Compromiso"). */
.service-info { padding: 20px 0 10px; }
.service-info h2 {
  font-size: var(--type-subtitle-size);
  font-weight: 600;
  margin-top: 48px;
  margin-bottom: 18px;
}
.service-info h2:first-of-type { margin-top: 0; }
.service-info p { line-height: 1.65; margin-bottom: 20px; }
.service-info p:last-child { margin-bottom: 0; }
.service-info__list {
  margin: 20px 0 28px;
  padding-left: 0;
}
.service-info__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.service-info__list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .service-detail__grid { grid-template-columns: 1fr; }
  .service-detail__photo img { aspect-ratio: 16 / 10; }
  .service-detail__other { height: auto; }
  .service-detail__eyebrow { text-align: left; }
  .service-pills { gap: 12px; }
  .service-gallery__grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 600px) {
  .service-gallery__img { height: 220px; }
}