/* ======== Servicios (estilo mejorado) ======== */

/* contenedor y espaciado general */
main.section--services{
  max-width: 1200px;          /* controla el ancho de línea */
  margin-inline: auto;
  padding: clamp(40px,6vw,96px) 0;
}

/* eye-brow/kicker y cabecera */
.section--services .kicker{
  display:inline-block;
  font: 700 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2563eb;
  background:#eff6ff;
  border-radius:999px;
  padding:.35rem .75rem;
  margin-bottom:.5rem;
}

.section--services h1{
  font-size:clamp(28px,4.2vw,44px);
  line-height:1.15;
  margin:0 0 .75rem;
  color:#0f172a;              /* gris muy oscuro */
}

.section--services .lead{
  max-width:65ch;
  margin:0 0 2rem;
  color:#475569;              /* gris medio */
  line-height:1.7;
}

/* fila imagen + texto */
.service-row{
  display:flex;
  gap: clamp(20px,3vw,32px);
  align-items:flex-start;
  margin-block: clamp(24px,4vw,40px);
}

.service-row--reverse{ flex-direction:row-reverse; }

/* columna imagen */
.service-row__media{
  flex:0 0 clamp(280px,38vw,480px);   /* ancho adaptable */
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(15,23,42,.12);
  background:#e5e7eb;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-row__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 4 / 3;
}
.service-row:hover .service-row__media{
  transform: translateY(-3px);
  box-shadow:0 18px 36px rgba(15,23,42,.16);
}

/* columna texto */
.service-row__body{ flex:1; min-width: 260px; }
.service-row__title{
  margin: 0 0 .4rem;
  font-size: clamp(20px,2.4vw,28px);
  color:#0f172a;
}
.service-row__text{
  margin:0;
  color:#475569;
  line-height:1.75;
  max-width: 70ch;
}

/* separador suave entre filas (opcional) */
.service-row + .service-row{
  border-top:1px solid rgba(2,6,23,.06);
  padding-top: clamp(16px,3vw,28px);
}

/* anclas internas (#terapia, etc.) no quedan ocultas bajo el header fijo */
#asesoria, #terapia { scroll-margin-top: 96px; }

/* RESPONSIVE */
@media (max-width: 980px){
  .service-row{ flex-direction:column; }
  .service-row--reverse{ flex-direction:column; }
  .service-row__media{ width:100%; }
  .service-row__text{ max-width: 80ch; }
}

/* === OVERRIDES FUERTES PARA SERVICIOS === */
main.section--services{
  max-width:1100px !important;
  margin-inline:auto !important;
  padding:60px 0 !important;
}

.section--services .kicker{
  display:inline-block !important;
  font:700 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#2563eb !important;
  background:#eff6ff !important;
  border-radius:999px !important;
  padding:.35rem .75rem !important;
  margin-bottom:.6rem !important;
}

.section--services h1{
  font-size: clamp(30px,5vw,46px) !important;
  line-height:1.15 !important;
  margin:0 0 1rem !important;
  color:#0f172a !important;
}

.section--services .lead{
  max-width:70ch !important;
  margin:0 0 2rem !important;
  color:#475569 !important;
  line-height:1.75 !important;
}

/* Layout imagen + texto con grid (más robusto) */
.service-row{
  display:grid !important;
  grid-template-columns: minmax(280px,420px) 1fr !important;
  gap:28px !important;
  align-items:center !important;
  margin:42px 0 !important;
}

.service-row--reverse{
  grid-template-columns: 1fr minmax(280px,420px) !important;
}
.service-row--reverse .service-row__media{ order:2 !important; }
.service-row--reverse .service-row__body{  order:1 !important; }

.service-row__media{
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:0 18px 36px rgba(15,23,42,.14) !important;
}
.service-row__media img{
  width:100% !important; height:auto !important;
  display:block !important; object-fit:cover !important; aspect-ratio:4/3 !important;
}

.service-row__title{
  font-size: clamp(22px,2.6vw,30px) !important;
  margin:0 0 .5rem !important;
  color:#0f172a !important;
}
.service-row__text{
  margin:0 !important;
  color:#475569 !important;
  line-height:1.8 !important;
  max-width:75ch !important;
}

/* Responsive */
@media (max-width: 940px){
  .service-row{ grid-template-columns:1fr !important; }
  .service-row--reverse{ grid-template-columns:1fr !important; }
}
/* === SERVICIOS — TARJETAS BONITAS (OVERRIDES) === */
:root{
  --svc-accent: #0f172a;     /* títulos */
  --svc-muted:  #475569;     /* texto */
  --svc-ring:   rgba(2,6,23,.06);
}

main.section--services{
  max-width: 1160px !important;
  margin-inline: auto !important;
  padding: 48px 0 96px !important;
}

/* Tarjeta + layout */
.section--services article.service-row{
  display: grid !important;
  grid-template-columns: minmax(320px,460px) 1fr !important;
  gap: 28px !important;
  align-items: center !important;

  background: #fff !important;
  border: 1px solid var(--svc-ring) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 40px rgba(2,6,23,.08) !important;
  padding: 28px !important;
  margin: 40px 0 64px !important;
}

.section--services article.service-row--reverse{
  grid-template-columns: 1fr minmax(320px,460px) !important;
}
.section--services article.service-row--reverse .service-row__media{ order:2 !important; }
.section--services article.service-row--reverse .service-row__body { order:1 !important; }

/* Imagen dentro de la tarjeta */
.section--services .service-row__media{
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.12) !important;
}
.section--services .service-row__media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  aspect-ratio: 16/11 !important;
}

/* Texto */
.section--services .service-row__title{
  color: var(--svc-accent) !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 2.6vw, 34px) !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.015em !important;
}
.section--services .service-row__text{
  color: var(--svc-muted) !important;
  line-height: 1.85 !important;
  font-size: 16px !important;
  margin: 0 !important;
  max-width: 78ch !important;
}

/* Separador sutil entre tarjetas (opcional) */
.section--services article.service-row + article.service-row{
  border-top: none !important;
}

/* Responsive */
@media (max-width: 980px){
  .section--services article.service-row,
  .section--services article.service-row--reverse{
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 18px !important;
  }
}

/* Solo afecta a la foto de "Sobre mí" */
#sobre-mi .service-row__media img.about-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* rellena el hueco */
  object-position: top center;    /* no corta por arriba */
  display: block;
}

/* Por si el contenedor recortaba la imagen */
#sobre-mi .service-row__media{
  overflow: visible;
  height: auto;
  max-height: none;
}