/* ==========================================================
   ANANTEC - SERVICIOS
   Misma tipografía y cabecera compartida del proyecto.
   ========================================================== */
.services-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(37,173,216,.045), transparent 32%),
    #f8fafc;
  color: var(--ink);
}

.services-main {
  min-height: calc(100vh - var(--topbar-height) - var(--header-height));
  padding: clamp(56px, 6vw, 92px) 0 30px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.service-card {
  min-height: 306px;
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(56,64,154,.12);
  border-radius: 18px;
  box-shadow:
    0 8px 22px rgba(11,22,51,.055),
    0 1px 2px rgba(11,22,51,.035);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(45,127,192,.22);
  box-shadow:
    0 18px 38px rgba(11,22,51,.095),
    0 5px 12px rgba(45,127,192,.055);
}

.service-card__media {
  min-height: 100%;
  background: linear-gradient(145deg, #eef4fb, #f8fbfd);
  overflow: hidden;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}

.service-card:hover .service-card__media img {
  transform: scale(1.025);
}

.service-card__body {
  min-width: 0;
  padding: 34px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-card h1,
.service-card h2 {
  margin: 0 0 22px;
  color: #0b2456;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
  word-break: normal;
}

.service-card p {
  margin: 0 0 24px;
  color: #263653;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 450;
}

.service-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 600;
}

.service-card__link span {
  font-size: 18px;
  transition: transform .2s ease;
}

.service-card__link:hover span {
  transform: translateX(4px);
}

.services-legal {
  padding-top: 34px;
  text-align: center;
  color: #65718a;
  font-size: 11px;
  font-weight: 450;
}

.services-legal p {
  margin: 0;
}

.services-legal a:hover {
  color: var(--blue);
}

/* Cambiar ilustración por foto:
   solo reemplaza el archivo indicado en el atributo src del <img>
   de cada tarjeta. No necesitas tocar el CSS. object-fit: cover hará
   que cualquier foto ocupe correctamente el recuadro. */

@media (max-width: 1180px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .services-main {
    padding-top: 34px;
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-card {
    min-height: 260px;
    grid-template-columns: 42% 58%;
    border-radius: 15px;
  }
  .service-card__body {
    padding: 24px 20px 22px;
  }
  .service-card h1,
  .service-card h2 {
    margin-bottom: 14px;
    font-size: 16px;
  }
  .service-card p {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 18px;
  }
}

@media (max-width: 480px) {
  .service-card {
    grid-template-columns: 1fr;
  }
  .service-card__media {
    height: 190px;
  }
}


/* V10: ajuste fino para que títulos largos no sobresalgan. */
.service-card__body {
  overflow: hidden;
}

.service-card h1,
.service-card h2 {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .service-card__body {
    padding-left: 22px;
    padding-right: 22px;
  }

  .service-card h1,
  .service-card h2 {
    font-size: 15px;
  }
}


/* ==========================================================
   V12 - TEXTO DE SERVICIOS MÁS NATURAL
   ========================================================== */

/* Evitar el efecto forzado del texto justificado. */
.service-card p,
.service-card__description {
  text-align: left;
  text-justify: auto;
  hyphens: none;
  line-height: 1.68;
  letter-spacing: -0.005em;
  max-width: 31ch;
  text-wrap: pretty;
}

/* Títulos largos: líneas equilibradas y sin sobresalir. */
.service-card h1,
.service-card h2,
.service-card__title {
  text-align: left;
  line-height: 1.22;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

/* Un poco más de aire entre título, descripción y CTA. */
.service-card__body {
  display: flex;
  flex-direction: column;
}

.service-card__body p {
  margin-top: 16px;
}

.service-card__link,
.service-card a {
  margin-top: auto;
}

/* Mantener lectura limpia en resoluciones intermedias. */
@media (max-width: 1180px) {
  .service-card p,
  .service-card__description {
    max-width: none;
    line-height: 1.62;
  }
}


/* ==========================================================
   V13 - ALINEACIÓN DE TEXTOS SECUNDARIOS EN SERVICIOS
   Los títulos pueden ocupar 1 o 2 líneas, pero las descripciones
   comienzan siempre a la misma altura dentro de cada fila.
   ========================================================== */

.service-card__body {
  display: grid;
  grid-template-rows: 52px auto 1fr auto;
  align-content: stretch;
}

/* Reserva una altura uniforme para los títulos de cada tarjeta */
.service-card h1,
.service-card h2,
.service-card__title {
  min-height: 52px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

/* Todas las descripciones arrancan en el mismo punto */
.service-card__body p,
.service-card__description {
  margin-top: 14px;
  align-self: start;
}

/* CTA estable al pie */
.service-card__link,
.service-card a {
  align-self: end;
  margin-top: 22px;
}

/* Ajuste en pantallas medianas */
@media (max-width: 1180px) {
  .service-card__body {
    grid-template-rows: 48px auto 1fr auto;
  }

  .service-card h1,
  .service-card h2,
  .service-card__title {
    min-height: 48px;
  }
}

/* En móvil no forzamos altura fija para evitar espacios innecesarios */
@media (max-width: 720px) {
  .service-card__body {
    display: flex;
  }

  .service-card h1,
  .service-card h2,
  .service-card__title {
    min-height: 0;
  }
}


/* ==========================================================
   V15 - TÍTULOS DE SERVICIOS UNIFICADOS
   ========================================================== */
:root {
  --anantec-title-color: #38409a;
}

.service-card h1,
.service-card h2,
.service-card h3,
.service-card__title,
.services-main h1,
.services-main h2,
.services-main h3,
main h1,
main h2,
main h3 {
  color: var(--anantec-title-color) !important;
  -webkit-text-fill-color: var(--anantec-title-color) !important;
  background: none !important;
  background-image: none !important;
}


/* ==========================================================
   V16 - TÍTULOS SERVICIOS CON DEGRADADO ANANTEC
   ========================================================== */

.service-card h1,
.service-card h2,
.service-card h3,
.service-card__title,
.services-main h1,
.services-main h2,
.services-main h3,
main h1,
main h2,
main h3 {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #38409a 0%, #2d7fc0 58%, #25add8 100%) !important;
  background-image: linear-gradient(90deg, #38409a 0%, #2d7fc0 58%, #25add8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Descripciones en gris azulado, sin alterar links ni botones */
.service-card p,
.service-card__description {
  color: #394356;
}


/* ==========================================================
   V19 - PANEL DE AJUSTES RÁPIDOS / SERVICIOS
   Cambia estos valores sin tocar el resto del CSS.
   ========================================================== */
:root {
  /* GRID */
  --services-columns-desktop: 3;
  --services-grid-gap: 24px;
  --services-section-top: 72px;
  --services-section-bottom: 30px;

  /* TARJETAS */
  --service-card-min-height: 306px;
  --service-card-radius-custom: 18px;
  --service-card-image-width: 42%;
  --service-card-shadow-y: 8px;
  --service-card-hover-lift: -5px;

  /* IMÁGENES */
  --service-image-scale: 1;
  --service-image-x: 50%;
  --service-image-y: 50%;

  /* TEXTO */
  --service-body-padding-top: 34px;
  --service-body-padding-x: 28px;
  --service-body-padding-bottom: 28px;
  --service-title-size-custom: 17px;
  --service-title-line-height: 1.28;
  --service-title-space-bottom: 22px;
  --service-text-size-custom: 13px;
  --service-text-line-height: 1.75;
  --service-text-space-bottom: 24px;
  --service-link-size-custom: 13px;
}

/* Aplicación de parámetros */
.services-main {
  padding-top: var(--services-section-top);
  padding-bottom: var(--services-section-bottom);
}

.services-grid {
  grid-template-columns:
    repeat(var(--services-columns-desktop), minmax(0, 1fr));
  gap: var(--services-grid-gap);
}

.service-card {
  min-height: var(--service-card-min-height);
  grid-template-columns:
    var(--service-card-image-width)
    calc(100% - var(--service-card-image-width));
  border-radius: var(--service-card-radius-custom);
}

.service-card:hover {
  transform: translateY(var(--service-card-hover-lift));
}

.service-card__media img {
  transform: scale(var(--service-image-scale));
  object-position: var(--service-image-x) var(--service-image-y);
}

.service-card:hover .service-card__media img {
  transform: scale(calc(var(--service-image-scale) + .025));
}

.service-card__body {
  padding:
    var(--service-body-padding-top)
    var(--service-body-padding-x)
    var(--service-body-padding-bottom);
}

.service-card h1,
.service-card h2,
.service-card h3,
.service-card__title {
  font-size: var(--service-title-size-custom);
  line-height: var(--service-title-line-height);
  margin-bottom: var(--service-title-space-bottom);
}

.service-card p,
.service-card__description {
  font-size: var(--service-text-size-custom);
  line-height: var(--service-text-line-height);
  margin-bottom: var(--service-text-space-bottom);
}

.service-card__link,
.service-card a {
  font-size: var(--service-link-size-custom);
}

/* Ajustes individuales de foto por tarjeta.
   Puedes cambiar X/Y o escala sin afectar las demás. */
.service-card:nth-child(1) { --service-image-x: 50%; --service-image-y: 50%; }
.service-card:nth-child(2) { --service-image-x: 50%; --service-image-y: 50%; }
.service-card:nth-child(3) { --service-image-x: 50%; --service-image-y: 50%; --service-image-scale: 1.02; }
.service-card:nth-child(4) { --service-image-x: 50%; --service-image-y: 50%; }
.service-card:nth-child(5) { --service-image-x: 50%; --service-image-y: 50%; }
.service-card:nth-child(6) { --service-image-x: 50%; --service-image-y: 48%; --service-image-scale: 1.02; }

@media (max-width: 1180px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 260px;
    grid-template-columns:
      var(--service-card-image-width)
      calc(100% - var(--service-card-image-width));
  }
}

@media (max-width: 480px) {
  .service-card {
    grid-template-columns: 1fr;
  }
}




/* ==========================================================
   V27 - PANEL MAESTRO SIN BLOQUEOS / SERVICIOS
   Último bloque = tus controles siempre mandan.
   +X derecha / -X izquierda | +Y abajo / -Y arriba
   ========================================================== */
:root {
  /* Sección / grid completo */
  --v27-services-grid-x: 0px;
  --v27-services-grid-y: 0px;

  /* Tarjetas individuales */
  --v27-service-1-x: 0px; --v27-service-1-y: 0px;
  --v27-service-2-x: 0px; --v27-service-2-y: 0px;
  --v27-service-3-x: 0px; --v27-service-3-y: 0px;
  --v27-service-4-x: 0px; --v27-service-4-y: 0px;
  --v27-service-5-x: 0px; --v27-service-5-y: 0px;
  --v27-service-6-x: 0px; --v27-service-6-y: 0px;

  /* Contenido dentro de TODAS las tarjetas */
  --v27-service-body-x: 0px;
  --v27-service-body-y: 0px;

  /* Texto: título / descripción / Ver más */
  --v27-service-title-x: 0px;
  --v27-service-title-y: 0px;
  --v27-service-text-x: 0px;
  --v27-service-text-y: 0px;
  --v27-service-link-x: 0px;
  --v27-service-link-y: 0px;

  /* Legal */
  --v27-services-legal-x: 0px;
  --v27-services-legal-y: 0px;
}

.services-grid {
  translate: var(--v27-services-grid-x) var(--v27-services-grid-y);
}

.service-card:nth-child(1) { translate: var(--v27-service-1-x) var(--v27-service-1-y); }
.service-card:nth-child(2) { translate: var(--v27-service-2-x) var(--v27-service-2-y); }
.service-card:nth-child(3) { translate: var(--v27-service-3-x) var(--v27-service-3-y); }
.service-card:nth-child(4) { translate: var(--v27-service-4-x) var(--v27-service-4-y); }
.service-card:nth-child(5) { translate: var(--v27-service-5-x) var(--v27-service-5-y); }
.service-card:nth-child(6) { translate: var(--v27-service-6-x) var(--v27-service-6-y); }

.service-card__body {
  translate: var(--v27-service-body-x) var(--v27-service-body-y);
}

.service-card h1,
.service-card h2,
.service-card h3,
.service-card__title {
  translate: var(--v27-service-title-x) var(--v27-service-title-y);
}

.service-card p,
.service-card__description {
  translate: var(--v27-service-text-x) var(--v27-service-text-y);
}

.service-card__link,
.service-card a {
  translate: var(--v27-service-link-x) var(--v27-service-link-y);
}

.services-legal {
  translate: var(--v27-services-legal-x) var(--v27-services-legal-y);
}

/* ==========================================================
   V28 FINAL — PANEL MAESTRO SIN BLOQUEOS / SERVICIOS
   Último bloque del archivo. Modifica SOLO aquí si quieres mover.
   +X derecha / -X izquierda | +Y abajo / -Y arriba
   ========================================================== */
:root {
  --v28-services-grid-x: 0px; --v28-services-grid-y: 0px;

  --v28-service-1-x: 0px; --v28-service-1-y: 0px;
  --v28-service-2-x: 0px; --v28-service-2-y: 0px;
  --v28-service-3-x: 0px; --v28-service-3-y: 0px;
  --v28-service-4-x: 0px; --v28-service-4-y: 0px;
  --v28-service-5-x: 0px; --v28-service-5-y: 0px;
  --v28-service-6-x: 0px; --v28-service-6-y: 0px;

  --v28-service-body-x: 0px; --v28-service-body-y: 0px;
  --v28-service-title-x: 0px; --v28-service-title-y: 0px;
  --v28-service-text-x: 0px; --v28-service-text-y: 0px;
  --v28-service-link-x: 0px; --v28-service-link-y: 0px;
  --v28-services-legal-x: 0px; --v28-services-legal-y: 0px;

  /* Fotos individuales: posición visible dentro de cada tarjeta + escala */
  --v28-img1-x: 50%; --v28-img1-y: 50%; --v28-img1-scale: 1;
  --v28-img2-x: 50%; --v28-img2-y: 50%; --v28-img2-scale: 1;
  --v28-img3-x: 50%; --v28-img3-y: 50%; --v28-img3-scale: 1.02;
  --v28-img4-x: 50%; --v28-img4-y: 50%; --v28-img4-scale: 1;
  --v28-img5-x: 50%; --v28-img5-y: 50%; --v28-img5-scale: 1;
  --v28-img6-x: 50%; --v28-img6-y: 50%; --v28-img6-scale: 1.02;
}

.services-grid { translate: var(--v28-services-grid-x) var(--v28-services-grid-y) !important; }
.service-card:nth-child(1) { translate: var(--v28-service-1-x) var(--v28-service-1-y) !important; }
.service-card:nth-child(2) { translate: var(--v28-service-2-x) var(--v28-service-2-y) !important; }
.service-card:nth-child(3) { translate: var(--v28-service-3-x) var(--v28-service-3-y) !important; }
.service-card:nth-child(4) { translate: var(--v28-service-4-x) var(--v28-service-4-y) !important; }
.service-card:nth-child(5) { translate: var(--v28-service-5-x) var(--v28-service-5-y) !important; }
.service-card:nth-child(6) { translate: var(--v28-service-6-x) var(--v28-service-6-y) !important; }
.service-card__body { translate: var(--v28-service-body-x) var(--v28-service-body-y) !important; }
.service-card h1, .service-card h2, .service-card h3, .service-card__title { translate: var(--v28-service-title-x) var(--v28-service-title-y) !important; }
.service-card p, .service-card__description { translate: var(--v28-service-text-x) var(--v28-service-text-y) !important; }
.service-card__link, .service-card a { translate: var(--v28-service-link-x) var(--v28-service-link-y) !important; }
.services-legal { translate: var(--v28-services-legal-x) var(--v28-services-legal-y) !important; }

.service-card:nth-child(1) .service-card__media img { object-position: var(--v28-img1-x) var(--v28-img1-y) !important; transform: scale(var(--v28-img1-scale)) !important; }
.service-card:nth-child(2) .service-card__media img { object-position: var(--v28-img2-x) var(--v28-img2-y) !important; transform: scale(var(--v28-img2-scale)) !important; }
.service-card:nth-child(3) .service-card__media img { object-position: var(--v28-img3-x) var(--v28-img3-y) !important; transform: scale(var(--v28-img3-scale)) !important; }
.service-card:nth-child(4) .service-card__media img { object-position: var(--v28-img4-x) var(--v28-img4-y) !important; transform: scale(var(--v28-img4-scale)) !important; }
.service-card:nth-child(5) .service-card__media img { object-position: var(--v28-img5-x) var(--v28-img5-y) !important; transform: scale(var(--v28-img5-scale)) !important; }
.service-card:nth-child(6) .service-card__media img { object-position: var(--v28-img6-x) var(--v28-img6-y) !important; transform: scale(var(--v28-img6-scale)) !important; }

/* ==========================================================
   ANANTEC — AJUSTE VISUAL 2026-09-10
   SOLO COLOR: gris frío integrado, sin cambios de estructura.
   ========================================================== */
.services-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(37,173,216,.055), transparent 32%),
    #e9eef3;
}

.services-main {
  background: transparent;
}

.service-card {
  background: rgba(248,250,252,.985);
  border-color: rgba(56,64,154,.14);
}

.service-card__media {
  background: linear-gradient(145deg, #e4eaf0, #f4f7fa);
}