/* =========================================================================
   Fichas de servicio (/servicios/<slug>/) · WordPress cmsmasters_singular#124 (post-124.css) y contenido de
   cada ficha (post-40277.css y hermanos), medido a 1440 px. Clases con prefijo servicio-.
   El carrusel del equipo (3 a la vista) es el componente común: equipo-tarjetas.css y equipo-carrusel.js.
   ========================================================================= */

/* 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 estas páginas. */
.servicio-pagina { font-variation-settings: 'opsz' 14; }

/* ---------- 1. Cabecera: texto a la izquierda (48 %), imagen a la derecha (52 %) ---------- */
.servicio-cabecera {
  /* La barra de navegación va superpuesta (como en WordPress): el hueco superior la incluye */
  padding: 215px var(--margen) 150px;
  background: url('/assets/img/servicio-fondo-cabecera.webp') center / cover no-repeat;
}
.servicio-cabecera__interior {
  display: flex;
  width: min(100%, 1460px);
  margin-inline: auto;
}
.servicio-cabecera__texto {
  flex: 0 0 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  padding-right: 100px;
}
.servicio-cabecera__titulo { margin-bottom: 30px; overflow-wrap: break-word; }
.servicio-cabecera__extracto {
  margin: 0;
  font-size: var(--t-entradilla);
  font-weight: 500;
  line-height: 1.5;
}
.servicio-cabecera__imagen {
  flex: 0 0 52%;
  position: relative;
  min-height: 580px;
  overflow: hidden;
  border-radius: var(--radio);
}
.servicio-cabecera__imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 2. Cuerpo: lista de servicios (32 %) y contenido (68 %) ---------- */
.servicio-cuerpo {
  display: grid;
  grid-template-columns: 32fr 68fr;
  align-items: start;
  gap: 60px 100px;
  width: min(100% - 2 * var(--margen), 1280px);
  margin: 0 auto 150px;
}

/* Lista «Nuestros servicios» */
.servicio-lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  background: var(--c-borde);
  border-radius: var(--radio);
}
.servicio-lista__titulo {
  margin-bottom: 10px;
  font-size: var(--t-h5);
  line-height: 1.35;
  letter-spacing: -1px;
  text-align: center;
}
.servicio-lista ul { display: flex; flex-direction: column; gap: 20px; list-style: none; }
.servicio-lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-pequeno);
  line-height: 1.55;
  color: var(--c-grafito);
}
.servicio-lista a svg { flex: none; width: 12px; height: 12px; fill: currentColor; transition: fill var(--transicion); }
.servicio-lista a:hover,
.servicio-lista a:focus-visible { color: var(--c-arena); }

/* Contenido */
.servicio-principal { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.servicio-contenido { display: flex; flex-direction: column; gap: 40px; margin-bottom: 40px; }
.servicio-contenido__titulo,
.servicio-equipo__titulo {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -1px;
}
/* El párrafo conserva el margen inferior del tema (1,5 rem: 27 px a 1440, 24 en móvil) */
.servicio-contenido__texto { margin: 0 0 1.5em; }
.servicio-contenido--margen .servicio-contenido__texto { margin-bottom: calc(1.5em + 40px); }

/* «¿Qué ofrecemos?»: desplegables independientes (varios pueden estar abiertos a la vez) */
.servicio-desplegables { display: flex; flex-direction: column; gap: 2px; }
.servicio-desplegable {
  padding: 30px;
  background: var(--c-superficie);
  border-radius: var(--radio);
  interpolate-size: allow-keywords;
}
.servicio-desplegable__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}
.servicio-desplegable__cabeza::-webkit-details-marker { display: none; }
.servicio-desplegable__cabeza::marker { content: ''; }
.servicio-desplegable__titulo {
  padding-right: 20px;
  font-size: var(--t-h5);
  line-height: 1.35;
  letter-spacing: -1px;
}
.servicio-desplegable__flecha {
  flex: none;
  display: inline-flex;
  padding: 0.5em;
  border-radius: 30px;
  background: var(--c-borde);
  color: var(--c-grafito);
  font-size: var(--t-h5);
  transition: color var(--transicion), background-color var(--transicion);
}
.servicio-pagina--flecha-arena .servicio-desplegable__flecha { color: var(--c-arena); }
.servicio-desplegable__flecha svg { width: 12px; height: 12px; fill: currentColor; }
.servicio-desplegable__abierto { display: none; }
.servicio-desplegable[open] .servicio-desplegable__abierto { display: block; }
.servicio-desplegable[open] .servicio-desplegable__cerrado { display: none; }
.servicio-desplegable__cabeza:hover .servicio-desplegable__flecha,
.servicio-desplegable[open] .servicio-desplegable__flecha,
.servicio-pagina--flecha-arena .servicio-desplegable__cabeza:hover .servicio-desplegable__flecha,
.servicio-pagina--flecha-arena .servicio-desplegable[open] .servicio-desplegable__flecha {
  background: var(--c-arena);
  color: var(--c-superficie);
}
.servicio-desplegable__texto { margin: 25px 0 0; }
/* Apertura con deslizamiento donde el navegador lo sabe hacer; en el resto, se abre sin animación */
.servicio-desplegable::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.servicio-desplegable[open]::details-content { block-size: auto; }

/* Con JavaScript (assets/js/paginas/servicio.js) la pista mide lo que las tarjetas a la vista, como el autoHeight
   de Swiper en WordPress; sin él, lo que la más alta. */
.servicio-equipo--alto-visible .equipo-carrusel__pista { align-items: flex-start; transition: height 0.3s ease; }

/* «Ver más» → /equipo/ */
.servicio-ver-mas {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-boton);
  font-weight: 700;
  line-height: 1.65;
  color: var(--c-grafito);
}
.servicio-ver-mas svg { width: 12px; height: 12px; fill: var(--c-arena); transition: fill var(--transicion); }
.servicio-ver-mas:hover,
.servicio-ver-mas:focus-visible { color: var(--c-arena); }
.servicio-ver-mas:hover svg,
.servicio-ver-mas:focus-visible svg { fill: var(--c-grafito); }

/* ---------- 3. Navegación: ficha anterior y siguiente ---------- */
/* Entre las dos mitades WordPress deja un separador de 40 px: el título corta con «…» donde corta allí (768 px) */
.servicio-navegacion {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: min(100% - 2 * var(--margen), 1280px);
  margin-inline: auto;
}
.servicio-navegacion__enlace {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 25px;
  min-width: 0;
}
.servicio-navegacion__enlace--siguiente { justify-content: flex-end; text-align: right; }
.servicio-navegacion__circulo {
  flex: none;
  display: inline-flex;
  padding: 16px;
  border-radius: 30px;
  background: var(--c-arena);
  color: var(--c-fondo);
  transition: background-color 0.5s ease, color var(--transicion);
}
.servicio-navegacion__circulo svg { width: 18px; height: 18px; fill: currentColor; }
.servicio-navegacion__titulo {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* En WordPress el título lleva encima una etiqueta vacía y 5 px de margen: queda 3 px bajo el centro del círculo */
  margin-top: 5px;
  font-family: var(--f-titulos);
  font-size: var(--t-h5);
  line-height: 1.35;
  letter-spacing: -1px;
  color: var(--c-grafito);
  transition: color var(--transicion);
}
.servicio-navegacion__enlace:hover .servicio-navegacion__circulo,
.servicio-navegacion__enlace:focus-visible .servicio-navegacion__circulo { background: var(--c-borde); color: var(--c-grafito); }
.servicio-navegacion__enlace:hover .servicio-navegacion__titulo,
.servicio-navegacion__enlace:focus-visible .servicio-navegacion__titulo { color: var(--c-arena); }

/* ---------- Pantallas anchas (más de 1600 px) ---------- */
@media (min-width: 1601px) {
  .servicio-cabecera__texto { padding-right: 120px; }
}

/* ---------- Tableta: todo en una columna ---------- */
@media (max-width: 1180px) {
  .servicio-cabecera { padding-top: 180px; padding-bottom: 100px; }
  .servicio-cabecera__interior { flex-direction: column; gap: 60px; }
  .servicio-cabecera__texto { flex: none; width: 100%; padding-right: 0; }
  .servicio-cabecera__imagen { flex: none; width: 100%; min-height: 500px; }
  .servicio-cuerpo { grid-template-columns: minmax(0, 1fr); margin-bottom: 100px; }
  .servicio-contenido { margin-bottom: 20px; }
  .servicio-contenido--margen .servicio-contenido__texto { margin-bottom: calc(1.5em + 20px); }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  .servicio-cabecera { padding-top: 140px; padding-bottom: 80px; }
  .servicio-cabecera__interior { gap: 50px; }
  .servicio-cabecera__titulo { margin-bottom: 15px; }
  .servicio-cabecera__imagen { min-height: 400px; }
  .servicio-cuerpo { margin-bottom: 80px; }
  .servicio-lista { padding: 30px 20px; }
  .servicio-principal { gap: 30px; }
  .servicio-contenido { gap: 30px; }
  .servicio-contenido--margen .servicio-contenido__texto { margin-bottom: calc(1.5em + 10px); }
  .servicio-desplegable { padding: 30px 20px; }
  .servicio-navegacion { flex-direction: column; gap: 0; }
  .servicio-navegacion__enlace { flex: none; width: 100%; }
}