/* =========================================================================
   Índice de servicios (/servicios/) · WordPress wp-page#55355 (post-55355.css) y tarjeta cmsmasters_entry#130
   (post-130.css), medido a 1440 px. Clases con prefijo servicios-.
   ========================================================================= */

/* WordPress pinta Roboto Serif con tamaño óptico 14 a cualquier tamaño; la fuente local, con el óptico
   automático, sale más estrecha y parte distinto los títulos. Mientras base.css no lo fije para toda la web,
   se fija aquí para el contenido de esta página. */
.servicios-pagina { font-variation-settings: 'opsz' 14; }

/* ---------- Cabecera: fondo claro bajo la barra de navegación (que va superpuesta, como en WordPress) ---------- */
.servicios-cabecera {
  padding: 245px var(--margen) 200px;
  background: url('/assets/img/servicios-fondo-cabecera.webp') top center / cover no-repeat;
}
.servicios-cabecera__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: min(100%, 1280px);
  margin-inline: auto;
  text-align: center;
}
.servicios-cabecera__entradilla {
  width: 50%;
  margin: 0;
  font-size: var(--t-entradilla);
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Rejilla de servicios: 3 columnas, tarjetas de alto propio ---------- */
.servicios-rejilla { margin-bottom: 150px; padding-inline: var(--margen); }
.servicios-rejilla__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
  width: min(100%, 1280px);
  margin-inline: auto;
}
.servicios-tarjeta {
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  transition: box-shadow var(--transicion);
}
.servicios-tarjeta:hover { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }
.servicios-tarjeta__imagen {
  display: block;
  overflow: hidden;
  border-radius: var(--radio) var(--radio) 0 0;
}
.servicios-tarjeta__imagen img {
  width: 100%;
  aspect-ratio: 1180 / 900;
  object-fit: cover;
}
.servicios-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
}
.servicios-tarjeta__titulo {
  font-size: var(--t-h4);
  line-height: 1.25;
  letter-spacing: -1px;
}
.servicios-tarjeta__titulo a:hover,
.servicios-tarjeta__titulo a:focus-visible { color: var(--c-apagado); }
.servicios-tarjeta__extracto { margin: 0; }

/* ---------- Contáctanos: foto a la izquierda, texto a la derecha ---------- */
.servicios-contacto {
  display: flex;
  align-items: center;
  gap: 100px;
  width: min(100% - 2 * var(--margen), 1280px);
  margin-inline: auto;
}
.servicios-contacto__foto,
.servicios-contacto__texto { flex: 1 1 0; min-width: 0; }
.servicios-contacto__foto img { width: 100%; border-radius: var(--radio); }
.servicios-contacto__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}
/* Píldora «Contáctanos»: en WordPress es un h6 (17 px) con sombra suave */
.etiqueta.servicios-etiqueta {
  padding: 3px 15px;
  border-radius: 30px;
  font-size: var(--t-h6);
  line-height: 1.65;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.servicios-contacto__parrafo { margin: 0; }
.servicios-contacto__boton .boton { transition: background var(--transicion), box-shadow var(--transicion), transform 0.4s; }
.servicios-contacto__boton .boton:hover,
.servicios-contacto__boton .boton:focus-visible { transform: translateX(5px); }
.servicios-contacto__boton .boton__icono .icono { width: 12px; height: 12px; }

/* ---------- Tableta ---------- */
@media (max-width: 1180px) {
  .servicios-cabecera { padding-top: 180px; padding-bottom: 120px; }
  .servicios-cabecera__entradilla { width: 80%; }
  .servicios-rejilla { margin-bottom: 100px; }
  .servicios-rejilla__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
  .servicios-tarjeta__cuerpo { padding: 30px; }
  .servicios-contacto { flex-direction: column; align-items: stretch; gap: 60px; }
  .servicios-contacto__foto,
  .servicios-contacto__texto { flex: none; width: 100%; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  .servicios-cabecera { padding-top: 120px; padding-bottom: 80px; }
  .servicios-cabecera__entradilla { width: 100%; }
  .servicios-rejilla { margin-bottom: 80px; }
  .servicios-rejilla__lista { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .servicios-tarjeta__cuerpo { padding: 30px 20px; }
  .servicios-contacto { gap: 50px; }
}