/*
  Las páginas de servicios (`/servicios-…`).

  Es la página con más texto del sitio y la que la agencia muestra como vidriera. Como quedó después
  de la importación, todo pesaba lo mismo: rótulos de 19 px, párrafos de 15, y los seis servicios
  —cada uno con su número— leídos como una lista plana; los entregables, como un renglón corrido con
  marcas de visto; y las tres etapas del método, como párrafos sueltos que empezaban con «1 —
  CONOCER:».

  Acá se le da jerarquía con el mismo lenguaje de la portada: el ritmo de secciones (hairline arriba
  y aire), los numerales en el color de la marca, y los enlaces que son una llamada sola como
  botones. La estructura que hacía falta está en los atajos de plantilla (`layouts/_shortcodes/`),
  no en el contenido.

  Todo va con `body` delante y la hoja se carga sólo en estas páginas (ver `head.html`), así que
  nada de esto toca el resto del sitio —donde el theme decide la tipografía.
*/

/* --- ritmo de lectura ---------------------------------------------------------------- */

body.layout-page .post-body {
  font-size: 1rem;
  line-height: 1.75;
}

body.layout-page .post-body > p {
  margin-block: 0 1.25rem;
}

/* La entrada de la página se lee como entradilla: es la línea que resume de qué se trata. */
body.layout-page .post-body > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* --- las secciones: el mismo ritmo que la portada ------------------------------------ */

/* La línea que separa las secciones y el aire de arriba: el cliente pidió «líneas separadoras»
   para los bloques de la página. El tamaño y el peso del título los pone `emeyeme.css`, que es
   donde vive el mismo título de la portada; acá sólo va el ritmo vertical y la línea. */
body.layout-page .post-body > h2 {
  margin-block: 3.6rem 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.3);
}

/* El número que antepone el theme, en el color de la marca y sin competir con el título. */
body.layout-page .post-body > h2 > i {
  margin-inline-end: 0.6em;
  color: var(--em-acento-texto);
  font-style: normal;
  font-size: 0.8em;
}

/* La etiqueta chica que el sitio viejo ponía encima del título («Cómo trabajamos», «FAQ»). Cuando
   está, ella abre la sección y el título se le cuelga debajo: el hairline no se repite. */
body.layout-page .post-body .post-etiqueta {
  margin-block: 3.6rem 0.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.3);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--em-rotulo);
}

body.layout-page .post-body .post-etiqueta + h2 {
  margin-block-start: 0.35rem;
  padding-block-start: 0;
  border-block-start: 0;
}

/* --- las etapas del método ----------------------------------------------------------- */

body .fase {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 1.1rem;
  margin-block: 2.4rem;
  /* La rejilla alinea sus ítems arriba, no estirados: con el `stretch` por defecto, la caja del
     nombre —que es un flex para llevar el ícono— tomaba el alto de la fila (54 px en vez de 23) y
     la etapa quedaba con un aire de más entre el nombre y su texto. */
  align-items: start;
}

body .fase .fase-numero {
  grid-column: 1;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  /* El numeral lleva el color de su etapa; si el atajo no trae `n`, el acento de siempre. */
  color: var(--em-etapa, var(--em-acento-texto));
}

/* El margen del numeral tiene que ganarle al del theme (`.post-body p { margin-bottom: 1.7em }`).
   Con un solo `body` delante, la especificidad empata con la suya y gana la del theme, que carga
   después: quedaban 34 px de margen bajo el numeral, la fila del nombre crecía a 54 px y el texto
   de la etapa arrancaba 45 px abajo en vez de 14. Es la trampa anotada en `docs/REGLAS.md` («al
   pisar una regla del theme pueden hacer falta dos clases»), y por eso el selector lleva `.fase`. */

/* Las tres etapas del Método 3C, una por color secundario de la paleta, en su orden: Conocer,
   Clarificar, Conectar. Va en el numeral y en la línea de arriba de cada etapa, no en su nombre,
   porque sobre el grafito ninguno de los tres pasa el 4,5:1 que la norma pide para texto chico.
   El 1,25 rem del numeral es grande y lo aguanta; el nombre de la etapa se queda en la tinta. */
body .fase-1,
body .diagrama-1 { --em-etapa: var(--em-terracota); }
body .fase-2,
body .diagrama-2 { --em-etapa: var(--em-mostaza); }
body .fase-3,
body .diagrama-3 { --em-etapa: var(--em-olivo); }

/* --- el diagrama de flujo del método ------------------------------------------------ */
/* Las tres cajas encadenadas que van arriba de las etapas
   (`layouts/_shortcodes/diagrama-3c.html`): cada una enlaza a su etapa y lleva el color de esa
   etapa —el mismo `--em-etapa` de las reglas de arriba— en la línea que la abre, para que el
   visitante ate la caja con la sección antes de llegar a ella. */
body .diagrama-3c {
  /* Tres cajas y, entre ellas, sus dos flechas, en una sola fila: así las tres comparten el alto
     de la más alta (el `stretch` de la rejilla) y el alto no depende de cuál nombre sea más
     largo. Antes era un flex con corte (`flex-wrap` y `flex: 1 1 9rem`): cuando las cajas no
     cabían en una fila, la tercera bajaba sola y quedaba de otro alto, porque el estirado del
     flex sólo alcanza a los ítems de la misma línea. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.7rem;
  margin-block: 1.9rem 2.6rem;
  scroll-margin-block-start: 2rem;
}

body .diagrama-caja {
  display: flex;
  /* El numeral y el nombre, en el mismo renglón y centrados entre sí: el cliente pidió que
     fueran «a la misma altura» (antes el numeral abría la caja y el nombre iba debajo). */
  align-items: center;
  gap: 0.6rem;
  /* Juntarlos en un renglón no encoge la caja: el alto mínimo conserva el que tenía con dos
     (78 px medidos a 16 px de raíz). Es mínimo y no fijo, así que si un nombre se parte en dos,
     la fila crece y las tres cajas siguen midiendo lo mismo. */
  min-block-size: 4.9rem;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid rgba(var(--em-salvia-rgb), 0.45);
  border-block-start: 3px solid var(--em-etapa, var(--em-acento));
  color: inherit;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

body .diagrama-caja:hover,
body .diagrama-caja:focus-visible {
  background: rgba(var(--em-salvia-rgb), 0.16);
  border-color: var(--em-etapa, var(--em-acento));
}

body .diagrama-numero {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--em-etapa, var(--em-acento-texto));
}

body .diagrama-nombre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.25;
}

body .diagrama-nombre .icono-linea {
  color: var(--em-etapa, var(--em-acento-texto));
}

/* La flecha entre caja y caja: un galón de dos bordes, en el color de las líneas. */
body .diagrama-flecha {
  align-self: center;
  justify-self: center;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-block-start: 1.5px solid rgba(var(--em-salvia-rgb), 0.9);
  border-inline-end: 1.5px solid rgba(var(--em-salvia-rgb), 0.9);
  rotate: 45deg;
}

/* En la banda compacta —ventana de teléfono o apaisada— no hay ancho para la fila: las cajas se
   apilan y la flecha gira para apuntar hacia abajo. Cada caja sigue midiendo lo mismo que las
   otras (el alto mínimo de la regla de arriba), así que la columna se lee como una escalera. */
@media (max-width: 960px), (max-aspect-ratio: 1/1) {
  body .diagrama-3c {
    grid-template-columns: minmax(0, 1fr);
  }
  body .diagrama-flecha {
    rotate: 135deg;
    margin-block: 0.05rem;
  }
}

body .fase + .fase {
  padding-block-start: 2rem;
  border-block-start: 2px solid var(--em-etapa, rgba(var(--em-salvia-rgb), 0.18));
}

body .fase-nombre {
  grid-column: 2;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* El `line-height` del cuerpo (1,95, que viene del theme) deja la caja del nombre con el doble
     de aire del que necesita y separa la etapa de su texto: acá va pegado a la línea. */
  line-height: 1.25;
  /* El ícono de la etapa va delante del nombre, como en la portada. */
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

body .fase-nombre .icono-linea {
  color: var(--em-etapa, var(--em-acento-texto));
  flex: none;
}

body .fase-texto {
  grid-column: 2;
  margin-block-start: 0.9rem;
}

body .fase-texto > p:first-child {
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Los puntos de cada etapa («1. Auditoría Digital Completa») como rótulos sobre su lista. */
body .fase-texto > p > strong {
  display: block;
  margin-block: 1.5rem 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

body .fase-texto > p > strong + * {
  margin-block-start: 0;
}

body .fase-texto ul {
  margin-block: 0 1.2rem;
  padding-inline-start: 1.1rem;
}

body .fase-texto li {
  font-size: 0.9375rem;
  line-height: 1.65;
}

body .fase-texto li::marker {
  color: var(--em-acento-texto);
}

/* --- las fichas de servicio ---------------------------------------------------------- */

body .servicios-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1px;
  margin-block: 2.2rem 1rem;
  background: rgba(var(--em-salvia-rgb), 0.22);
  border: 1px solid rgba(var(--em-salvia-rgb), 0.22);
}

body .servicio {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.7rem 1.5rem 1.4rem;
  background: var(--bg);
}

/* Cuando la cantidad de fichas es impar, la última ocupa el ancho completo: así no queda una ficha
   sola en una fila propia, a medio ancho (pasa en las otras dos páginas de servicios, con tres). */
body .servicios-rejilla > .servicio:nth-child(odd):last-child {
  grid-column: 1 / -1;
}

body .servicio-numero {
  margin: 0;
  color: var(--em-acento-texto);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

body .servicio h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

body .servicio p:not(.servicio-numero) {
  margin-block-end: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  /* La jerarquía se marca con el alfa del color, no con la opacidad del elemento: la opacidad
     arrastra a lo que va adentro y el enlace «conócelo aquí» quedaba en 3,74:1. El porqué, en el
     comentario del token (`emeyeme.css`). */
  color: var(--em-texto-suave);
}

body .servicio a {
  color: var(--em-acento-texto);
}

/* En el tema claro la ficha va en blanco sobre el papel crema (el papel de tarjeta de la paleta);
   en el oscuro es el mismo grafito y la separa la línea de la rejilla. */
:root:root[data-theme="light"] body .servicio,
:root:root[data-theme="light"] body .servicio:nth-child(odd):last-child {
  background: var(--em-blanco);
}

/* --- las listas marcadas: los entregables (✓) y la lista de comprobación (☐) ---------- */

body .marcada ul {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

body .marcada li {
  font-size: 0.9375rem;
  line-height: 1.65;
  /* El alfa en el color y no en la opacidad del elemento, por lo mismo que las fichas: lo que va
     adentro —una marca, un enlace— no tiene que quedar atenuado con ella. */
  color: var(--em-texto-suave);
}

/* La marca viene en el texto; acá sólo se le da el color de la marca del sitio. Es un signo
   gráfico (✓, ☐), no una frase: por eso lleva el naranjo del acento y no el acento de texto. */
body .marcada li::first-letter {
  color: var(--em-acento);
}

/* --- los enlaces que son una llamada sola -------------------------------------------- */

/* El botón de llamada aparece en dos lugares y los dos son lo mismo —una llamada sola—, así que se
   visten igual: en un párrafo suelto de la página (el cierre de una sección) y en un párrafo dentro
   de una ficha de servicio (el «conócelo aquí» del Starter Pack). El de la ficha no es hijo directo
   de `.post-body`, así que la regla de antes no lo alcanzaba y quedaba como un enlace de la lectura;
   el cliente pidió que fuera «el mismo tipo de botón anaranjado» y centrado. Centrados van los dos:
   son una llamada sola. */
body.layout-page :is(.post-body > p, .servicio p):has(> a:only-child) {
  margin-block: 2rem;
  text-align: center;
}

/* Dentro de la ficha el aire es otro: la ficha ya tiene su relleno y el botón va debajo de su
   propio texto, no de un bloque de la página. */
body.layout-page .servicio p:has(> a:only-child) {
  margin-block: 1.2rem 0;
}

body.layout-page :is(.post-body > p, .servicio p):has(> a:only-child) > a {
  display: inline-block;
  padding: 0.72em 1.25em;
  background: var(--em-acento);
  color: var(--em-tinta);
  border: 1px solid var(--em-acento);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* El hover pasa el relleno al mostaza, el otro color de la paleta que sostiene la tinta encima
   (4,90:1). El mismo criterio que los botones de la portada, y el porqué, allá. */
body.layout-page :is(.post-body > p, .servicio p):has(> a:only-child) > a:hover,
body.layout-page :is(.post-body > p, .servicio p):has(> a:only-child) > a:focus-visible {
  background: var(--em-mostaza);
  border-color: var(--em-mostaza);
}

/* Y la etiqueta del botón se repone sobre la regla de los enlaces de la lectura (`emeyeme.css`,
   que carga antes): ahí el enlace del tema claro queda en pizarra, y sobre el relleno naranjo eso
   da 2,8:1. Acá manda la tinta sobre el naranjo (4,79:1), como en el tema oscuro. Vale sólo para
   este botón: es el único enlace del cuerpo que se viste de botón. */
:root[data-theme="light"] body.layout-page :is(.post-body > p, .servicio p):has(> a:only-child) > a {
  color: var(--em-tinta);
}

/* --- las preguntas frecuentes -------------------------------------------------------- */

body.layout-page .post-body > h3 {
  margin-block: 2.6rem 0.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Quien pidió menos movimiento en su sistema no ve transiciones. */
@media (prefers-reduced-motion: reduce) {
  body.layout-page :is(.post-body > p, .servicio p):has(> a:only-child) > a {
    transition: none;
  }
}