/* ==========================================================================
   AMMY TERRA — services.css (ERS 12 / checklist Z16)
   Foto editorial vertical a la izquierda + tarjetas de servicio a la derecha;
   detalle de servicio; formulario de cotizacion.
   Propiedad: Claude (T10). Solo variables de tokens.css.
   ========================================================================== */

.services-page { padding: 40px 0 var(--s6); }

/* ---------------------------------------------------------------- Cabecera */
.svc-head { margin-bottom: 28px; }
.svc-head__title { margin: 0 0 6px; font-size: clamp(30px, 1.6vw + 16px, 40px); font-weight: 600; color: var(--c-text); }
.svc-head__lead { margin: 0; font-size: 16.5px; color: var(--c-text-muted); }

/* ------------------------------------------ Foto 45 % + listado 55 % */
.svc-layout {
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 28px; align-items: stretch;
}
/* La foto toma el alto del listado (como en el mockup); cover evita deformarla. */
.svc-layout__photo {
  position: relative; min-height: 480px; overflow: hidden;
  border-radius: var(--r-card); box-shadow: var(--sh-soft);
  background: var(--c-bg-alt);
}
.svc-layout__photo picture { position: absolute; inset: 0; }
.svc-layout__img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }

.svc-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.svc-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: 20px 22px 20px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft); border-radius: var(--r-card);
  box-shadow: var(--sh-soft);
  color: var(--c-text);
  transition: box-shadow var(--t-base), border-color var(--t-fast), transform var(--t-base);
}
.svc-card:hover { color: var(--c-text); border-color: var(--c-border); box-shadow: var(--sh-hover); transform: translateY(-1px); }
.svc-card__icon {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-green-050); color: var(--c-green);
}
.svc-card__icon .icon { width: 34px; height: 34px; stroke-width: 2.8; }
.svc-card__body { display: flex; flex-direction: column; min-width: 0; }
.svc-card__title { font-size: 16.5px; font-weight: var(--fw-ui-semi); line-height: 1.3; color: var(--c-text); }
.svc-card__text { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--c-text-muted); }
.svc-card__price { margin-top: 8px; font-size: 14px; color: var(--c-text); }
.svc-card__price strong { font-size: 16px; font-weight: 700; }
.svc-price__unit { color: var(--c-text-muted); }
.svc-card__chev { align-self: start; width: 18px; height: 18px; stroke-width: 4; color: var(--c-text-muted); transition: transform var(--t-fast), color var(--t-fast); }
.svc-card:hover .svc-card__chev { transform: translateX(3px); color: var(--c-green); }

/* ---------------------------------------------------------------- Detalle */
.svc-detail {
  display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 48px; align-items: start;
}
.svc-detail__photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--sh-soft); }
.svc-detail__photo picture { display: block; width: 100%; height: 100%; }
.svc-detail__img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail__icon { margin-bottom: 14px; }
.svc-detail__title { margin: 0 0 6px; font-size: clamp(28px, 1.3vw + 16px, 36px); color: var(--c-text); }
.svc-detail__price { margin: 0 0 14px; font-size: 18px; }
.svc-detail__price strong { font-size: 24px; }
.svc-detail__lead { font-size: 16.5px; color: var(--c-text-muted); }
.svc-detail__sub { margin: 22px 0 10px; font-size: 20px; }
.svc-detail__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ------------------------------------------------------------- Cotizacion */
.quote {
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 48px;
  margin-top: 64px; padding: 40px;
  background: var(--c-bg-alt); border: 1px solid var(--c-border-soft); border-radius: var(--r-card);
  scroll-margin-top: calc(var(--header-h-sticky) + 16px);
}
.quote__title { margin: 0 0 10px; font-size: clamp(26px, 1vw + 16px, 32px); }
.quote__intro > p { color: var(--c-text-muted); }
.quote__points { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; }
.quote__points li { display: flex; gap: 12px; align-items: flex-start; }
.quote__points .icon { width: 26px; height: 26px; color: var(--c-green); margin-top: -2px; }
.quote__points a { text-decoration: underline; text-underline-offset: 3px; }

.quote__form { padding: 28px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); }
.quote__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.quote__grid .field { margin-bottom: 18px; }
.field--full { grid-column: 1 / -1; }
.file-input { padding: 9px 10px; font-size: 14px; background: var(--c-surface-warm); }
.file-input::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--c-green); border-radius: var(--r-btn);
  background: var(--c-surface); color: var(--c-green); font: inherit; font-weight: var(--fw-ui-semi); cursor: pointer;
}
.quote__msg { margin: 0 0 16px; }
.quote__submit { min-width: 220px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1279px) {
  .svc-card { padding: 18px; gap: 16px; }
  .svc-card__icon { width: 56px; height: 56px; }
  .svc-card__icon .icon { width: 30px; height: 30px; }
  .quote { gap: 32px; padding: 32px; }
}
@media (max-width: 1023px) {
  .svc-layout { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 20px; }
  .svc-card { grid-template-columns: auto 1fr; }
  .svc-card__chev { display: none; }
  .svc-detail { grid-template-columns: 1fr 1fr; gap: 28px; }
  .quote { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .services-page { padding-top: 24px; }
  .svc-layout { grid-template-columns: 1fr; gap: 18px; }
  .svc-layout__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .svc-layout__img { object-position: 50% 35%; }
  .svc-card { padding: 16px 14px; gap: 14px; }
  .svc-card__icon { width: 50px; height: 50px; }
  .svc-card__icon .icon { width: 26px; height: 26px; }
  .svc-detail { grid-template-columns: 1fr; gap: 20px; }
  .svc-detail__ctas .btn { width: 100%; }
  .quote { margin-top: 44px; padding: 22px 16px; gap: 22px; }
  .quote__form { padding: 18px 14px; }
  .quote__grid { grid-template-columns: 1fr; }
  .quote__submit { width: 100%; }
}