/* Servicios — profundidad de contenido (solo servicios.html)

   Las distancias NO se definen aquí: se heredan de la retícula compartida
   con desarrollo.html (.div-columns-about.margint-top → 100px,
   .div-about-colums-wrapper → gutter 5%, .title-sub-service-div → 75px + 55px
   al cuerpo, .products-grid-wrap → 45px, .btn-link-div → 25px).
   Aquí solo vive lo propio de esta página: color sobre fondo oscuro,
   línea de entrega, número de etapa, lista de sectores, FAQ y CTA final. */

/* ─── Notas del hero ─── */
.serv-cols--notes .title-sub-service {
  color: var(--beige);
}

.serv-note-text {
  color: rgba(248, 230, 216, .72);
}

/* ─── Columnas de contenido (síntomas, etapas) ─── */

/* Los títulos de esta página tienen longitudes distintas: height fijo
   alinea las reglas punteadas sólo mientras el título quepa en una o dos
   líneas. min-height mantiene la altura de referencia y deja crecer
   el bloque cuando el título necesita una tercera. */
.serv-cols .title-sub-service-div {
  height: auto;
  min-height: 75px;
}

.serv-col-deliver {
  margin-top: 25px;
  padding-top: 14px;
  border-top: 1px solid var(--outline);
  font-family: Inconsolata, monospace;
  font-size: .88rem;
  line-height: 165%;
  color: var(--_colors---dark-grey);
}

.serv-cols.is-dark .title-sub-service {
  color: var(--beige);
}

.serv-cols.is-dark .serv-col-deliver {
  color: rgba(248, 230, 216, .6);
  border-top-color: rgba(248, 230, 216, .2);
}

/* ─── Etapas numeradas ─── */
.serv-step-num {
  display: block;
  font-family: Inconsolata, monospace;
  font-size: 13px;
  font-weight: var(--font-weight--normal);
  line-height: 1;
  letter-spacing: var(--letter-spacing--s);
  color: var(--_colors---orange);
  margin-bottom: 8px;
}

/* ─── Acordeones de servicios ─── */
.serv-acc-title {
  display: flex;
  flex-direction: column;
  padding-right: 20px;
}

.serv-acc-kicker {
  color: var(--_colors---orange);
  font-family: Inconsolata, monospace;
  font-size: 13px;
  font-weight: var(--font-weight--normal);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing--s);
  text-transform: uppercase;
  margin-top: 9px;
}

.serv-acc-sub {
  margin-top: 30px;
}

.serv-acc-sub-title {
  color: rgba(248, 230, 216, .62);
  font-family: Inconsolata, monospace;
  font-size: 13px;
  font-weight: var(--font-weight--normal);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing--s);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.serv-acc-list {
  max-width: 92%;
  margin: 0;
}

/* Las cinco listas del acordeón comparten marcado, así que el marcador
   se fija una sola vez para todas. */
.products-acc .h2.smaller.items-ia.serv-acc-list--clean strong::before {
  content: "→";
  margin-right: .5em;
}

.serv-acc-desc {
  color: rgba(248, 230, 216, .6);
  display: block;
  font-size: .98rem;
  line-height: 155%;
  margin-top: 3px;
  padding-left: .7em;
}

.serv-acc-list--clean .serv-acc-desc {
  padding-left: .9em;
}

.serv-acc-note {
  border-top: 1px solid rgba(248, 230, 216, .18);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 1rem;
  line-height: 155%;
  max-width: 92%;
  /* Sin color propio heredaba el violeta del tema claro sobre el fondo
     #242424 del acordeón: 1.06:1, es decir invisible. */
  color: rgba(248, 230, 216, .62);
}

.serv-acc-note strong {
  color: var(--beige);
}

/* ─── Preguntas frecuentes ─── */
/* Sin reglas propias: la sección replica el marcado de synapse.html
   (.faq-div + .title-items-ia-info.no-underline + .answer-div) y hereda
   todo el estilo de la retícula compartida. */

/* ─── Pie ─── */
/* El correo del pie es una sola palabra a 48px: entre 375 y 560px de ancho
   desborda horizontalmente. Cualquier punto de corte es aceptable ahí. */
.footer-big-text .h1.footer {
  overflow-wrap: anywhere;
}

/* ─── Tipografía de display ─── */
/* Los H1 de esta página llegan a 80px: en móvil una palabra como
   "modernizamos" no cabe en 375px y ensancha la página. break-word no altera
   el cálculo de columnas, sólo corta la palabra cuando no hay otro corte. */
.h1 {
  overflow-wrap: break-word;
}

/* ─── Responsive ─── */
/* Las etapas van en 4 columnas; a 4 en tablet la medida cae a ~170px,
   así que pasan a 2 junto con el resto de columnas de contenido. */
@media screen and (max-width: 991px) {
  .serv-cols .w-col,
  .serv-list-row .w-col {
    width: 50%;
  }

  .serv-cols .title-sub-service-div {
    min-height: 0;
  }
}

@media screen and (max-width: 767px) {
  .serv-acc-list,
  .serv-acc-note,
  .serv-col-deliver {
    max-width: 100%;
  }

  .serv-cols .w-col,
  .serv-list-row .w-col {
    width: 100%;
  }
}