/*
  La página Nosotros (`layouts/_shortcodes/nosotros-cifras.html` y `llamada.html`).

  El cliente pidió dos cosas sobre esta página: que las cifras lleven el mismo formato que las
  de la portada («el +6 Años está mejor en el home, que sea el mismo del home») y que el cierre
  —«Tu empresa B2B necesita dejar de ser invisible»— deje de ser un titular más y sea un
  destacado, una caja de llamada a la acción que siga la línea del cierre de la portada. El
  contenido de la página es markdown importado del sitio anterior; estas dos piezas se montan
  con shortcodes (ver `docs/REGLAS.md`, «Las páginas de servicios») y se visten acá.

  Igual que `portada.css`: selectores con `body .nosotros` delante, porque esta hoja se carga
  ANTES que el paquete del theme y en un empate de especificidad gana el theme. La llamada es
  del flujo del contenido, así que toma los papeles de `emeyeme.css` (`--em-acento`,
  `--em-acento-texto`, `--em-rotulo`) y el color de las líneas por su nombre (`--em-salvia`).
*/

/* --- las secciones, separadas con una línea ------------------------------------- */
/* El cliente pidió «líneas separadoras» para los bloques de la página: es la misma línea que ya
   llevan las páginas de servicios (`servicios.css`), así que la página queda con el mismo ritmo
   que el resto del sitio. La primera sección no la lleva —sigue al titular de la página y una
   línea ahí sería un subrayado del título—, y por eso se le devuelve el aire por arriba. */
body .nosotros .post-body > h2 {
  margin-block: 3.6rem 0.8rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.3);
}

body .nosotros .post-body > h2:first-of-type {
  margin-block-start: 2.4rem;
  padding-block-start: 0;
  border-block-start: 0;
}

/* --- las cifras, con el formato de la portada ----------------------------------- */

body .nosotros .nosotros-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.6rem;
  /* El mismo ritmo de la sección de cifras de la portada. */
  margin-block: 2.4rem;
  padding-block: 1.4rem 0.4rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.3);
}

body .nosotros .nosotros-cifra-valor {
  display: block;
  font-size: clamp(2.3rem, 2rem + 2.2vw, 3.4rem);
  line-height: 1;
  color: var(--em-acento-texto);
}

body .nosotros .nosotros-cifra-rotulo {
  display: block;
  margin-block-start: 0.5rem;
  font-size: 0.92rem;
  max-inline-size: 22ch;
}

/* --- la llamada a la acción (jumbotron) ---------------------------------------- */

body .nosotros .llamada {
  margin-block: 3.6rem 1rem;
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--em-acento);
}

/* En el tema claro la caja lleva el papel de tarjeta (el blanco de la paleta sobre el crema);
   en el oscuro ya es el grafito y sólo la separa la línea. `:root:root` es lo que hace ganar
   esta regla (el theme carga después, ver `emeyeme.css`). */
:root:root[data-theme="light"] body .nosotros .llamada {
  background: var(--em-blanco);
}

body .nosotros .llamada-titulo {
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  margin-block: 0 0.7rem;
  max-inline-size: 28ch;
}

body .nosotros .llamada-cuerpo {
  margin: 0;
}

body .nosotros .llamada-cuerpo p {
  margin-block: 0 0.6rem;
}

/* Los enlaces dentro de la caja llevan el botón naranjo que ya usa la portada: es el CTA de
   la marca y el cliente pidió que los botones sean naranjos en todo el sitio. */
body .nosotros .llamada-cuerpo a {
  display: inline-block;
  margin-block-start: 0.4rem;
  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;
}

body .nosotros .llamada-cuerpo a:hover,
body .nosotros .llamada-cuerpo a:focus-visible {
  background: var(--em-mostaza);
  border-color: var(--em-mostaza);
}

/* Y la etiqueta 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,99:1.
   Acá manda la tinta sobre el naranjo (4,79:1), igual que en los botones del resto del sitio. */
:root[data-theme="light"] body .nosotros .llamada-cuerpo a {
  color: var(--em-tinta);
}

/* --- los íconos del Enfoque Human B2B ------------------------------------------ */

/* Los cuatro pilares del enfoque llevan un ícono de línea (SVG inline en el contenido). Son
   marcas de la paleta: en el color de acento de texto del tema, y se leen como un signo al
   inicio del párrafo. El cliente pidió recursos visuales en esta sección («Al enfoque Human
   B2B le falta iconos»). */
body .nosotros .icono-enfoque {
  /* El ícono del mismo tamaño que la fuente del párrafo que lo sigue: lo ancla el tamaño de
     letra del título de la tarjeta, así el signo acompaña al encabezado y no compite con él.
     (Antes iba a 1.6rem y quedaba como un bloque; y sin la clase `.nosotros` en el artículo
     la regla no aplicaba y el SVG se estiraba al ancho completo.) */
  inline-size: 1.1em;
  block-size: 1.1em;
  flex: none;
  color: var(--em-acento-texto);
}

/* --- los cuatro puntos de «Nuestro enfoque», como tabla --------------------------------- */
/* El cliente los pidió como tabla, con la referencia de las de /contacto y de la política de
   privacidad: el rótulo de un lado, el detalle del otro. Antes eran cuatro tarjetas en una
   grilla que se leían como cuatro bloques sueltos («queda muy plano»). El ícono de cada punto se
   conserva y va en la celda del rótulo, junto al número, con el tamaño de la fuente que lo
   sigue —`1.1em`— para que acompañe al título y no compita con él. */
body .nosotros .enfoque-tabla {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: 1.8rem 2.4rem;
  /* El cliente pidió que los cuatro puntos se lean como la tabla de /contacto y la de la política
     de privacidad —«donde está cómo obtenemos qué datos y para qué los usamos»—: la de allá lleva
     cada celda enmarcada, y eso es lo que hace que la fila se lea como un bloque. Acá las líneas
     iban sólo encima de cada fila y con el alfa bajo, así que los puntos quedaban como texto entre
     renglones («que no queden volando»). */
  border: 1px solid rgba(var(--em-salvia-rgb), 0.45);
}

body .nosotros .enfoque-tabla th,
body .nosotros .enfoque-tabla td {
  text-align: start;
  vertical-align: top;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(var(--em-salvia-rgb), 0.45);
}

body .nosotros .enfoque-tabla thead th {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--em-rotulo);
}

body .nosotros .enfoque-tabla tbody th {
  inline-size: 15rem;
  font-weight: 600;
}

/* El ícono va en línea, antes del número: como el `th` no es flex, se alinea a la línea del texto
   y se le da el aire con el margen (no con un `gap`, que acá no existe). */
body .nosotros .enfoque-tabla tbody th .icono-enfoque {
  vertical-align: -0.2em;
  margin-inline-end: 0.55rem;
}

body .nosotros .enfoque-tabla tbody td {
  font-size: 0.9375rem;
  line-height: 1.7;
}

body .nosotros .enfoque-tabla tbody td > p {
  margin: 0;
}

/* En pantalla angosta la tabla se apila: cada punto arriba de su texto. */
@media (max-width: 700px) {
  body .nosotros .enfoque-tabla,
  body .nosotros .enfoque-tabla tbody,
  body .nosotros .enfoque-tabla tr,
  body .nosotros .enfoque-tabla th,
  body .nosotros .enfoque-tabla td {
    display: block;
    inline-size: auto;
  }

  body .nosotros .enfoque-tabla tr + tr > th {
    margin-block-start: 1.6rem;
  }

  body .nosotros .enfoque-tabla thead {
    display: none;
  }
}

/* --- el destacado ------------------------------------------------------------------------ */
/* La caja del acento con el texto centrado que el cliente pidió para «Transformamos expertise
   técnico en claridad comercial» y para el título de los valores centrales: «el efecto de la caja
   blanca con el borde naranjo y centrado» del cierre de la portada. En el tema claro lleva el
   blanco de la paleta; en oscuro, sobre el papel crema, el blanco sobra y queda el borde. */
body .destacado {
  margin-block: 2.8rem;
  padding: 1.7rem 1.5rem;
  border: 1px solid var(--em-acento);
  text-align: center;
}

:root:root[data-theme="light"] body .destacado {
  background: var(--em-blanco);
}

body .destacado > :first-child { margin-block-start: 0; }
body .destacado > :last-child { margin-block-end: 0; }

body .destacado > * {
  max-inline-size: 36rem;
  margin-inline: auto;
}

body .destacado h4,
body .destacado h3 {
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* La lista de valores dentro del destacado va alineada a la izquierda: el texto de la caja va
   centrado, pero cuatro elementos centrados se leen como cuatro versos. */
body .destacado ul {
  text-align: start;
}

/* La lista de los valores centrales: el cliente pidió que los cuatro elementos lleven énfasis y
   se lean como lista. La marca de la viñeta toma el acento y el término destacado va en la tinta
   plena, no en el gris del texto corriente. */
body .nosotros .post-body ul li::marker {
  color: var(--em-acento-texto);
}

body .nosotros .post-body ul li > strong {
  color: var(--fg);
}

/* Los rótulos de sección de la página («Herramientas», «Ellos ya confiaron en nosotros») abren su
   bloque: el cliente pidió más aire entre el carrusel y el rótulo que le sigue. */
body .nosotros .post-body > h4 {
  margin-block: 3.4rem 1.1rem;
}

/* El rótulo que abre el carrusel de clientes lleva la línea separadora: el cliente pidió «un borde
   separador entre empresas y tecnologías» para que los dos carruseles —el de herramientas y el de
   clientes— se lean como dos grupos de productos, no como la misma cinta seguida. Es la misma
   hairline con la que el resto del sitio abre una sección. */
body .nosotros .post-body > h4[id^="ellos-ya-confiaron"] {
  margin-block-start: 2.2rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.35);
}

/* --- la frase de cierre del bloque del enfoque -------------------------------------------- */
/* «Porque al final, hay una sola pregunta que importa: ¿Cerraste el contrato?» es un `h5` del
   contenido (el único de la página) y el cliente pidió «darle más relevancia»: antes salía con el
   tamaño de un rótulo chico, perdido entre el destacado de los valores y la sección del equipo.
   Sube a tamaño de subtítulo, se centra sobre su propio eje, y una hairline la separa de lo que
   viene arriba —el mismo recurso con que el resto de la página abre un bloque—. La relevancia se
   da con tamaño, peso y aire, no bajando la opacidad ni metiendo el naranjo como color de texto:
   sobre el papel crema el naranjo queda en 2,07:1 y no se lee (ver `emeyeme.css`). */
body .nosotros .post-body > h5 {
  max-inline-size: 36ch;
  margin-block: 3rem 0;
  margin-inline: auto;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.3);
  text-align: center;
  font-size: clamp(1.15rem, 1.02rem + 0.8vw, 1.55rem);
  font-weight: 600;
  line-height: 1.3;
}

/* --- los carruseles ---------------------------------------------------------------------- */
/* El aire de la cinta lo reparte Swiper (`spaceBetween`, en `js/carrusel-logos.js`, subido a
   pedido del cliente: «el carrusel de herramientas necesita más espacio entre logos, lo mismo que
   el de los clientes»). Acá queda lo que es de la página: el carrusel cierra su bloque con aire,
   para que el rótulo siguiente no quede pegado (el cliente lo había reportado como «está muy
   cerca, necesita más espacio»). */
body .nosotros .emeyeme-logos {
  margin-block: 1.2rem 2.6rem;
}

/* Las fotos del equipo van sin el borde del cuerpo (el cliente pidió quitar el tenue borde
   negro/gris que traían); el resto de las imágenes de la página lo conservan. */
body .nosotros .post-body img[width="300"] {
  border: 0;
}

/* El LinkedIn del equipo lleva su logotipo al comienzo (como el resto del sitio). El enlace
   pasa a inline-flex para alinear el ícono con el texto, y el logo hereda el color del
   enlace (`currentColor`), así que el hover lo cambia junto con la palabra. */
body .nosotros a[href*="linkedin.com/"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

body .nosotros a[href*="linkedin.com/"] .icono-marca {
  inline-size: 1.1em;
  block-size: 1.1em;
  flex: none;
}

/* --- imagen a la izquierda, texto a la derecha ------------------------------------- */

/* El bloque «¿Es Eme y Eme para tu empresa?» (shortcode `imagen-texto`): la foto de sectores
   e industrias está enfocada a las empresas que describen los párrafos de la derecha, así que
   va como columna a la izquierda y el texto ocupa la de la derecha. En pantallas angostas el
   texto baja debajo de la imagen. */
body .nosotros .imagen-texto {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  /* La imagen centrada en vertical contra el texto de al lado... hasta hoy. Dejó de estar
     centrada: centrada, la fila alta del texto deja un aire grande entre el título y la imagen
     («el bot gap debe ser menos, más cerca»). Va al tope de la fila, justo bajo el título, y el
     aire de separación lo da el `row-gap` (abajo) y el margen del bloque (arriba). */
  align-items: start;
  /* El aire del título: el cliente pidió «el top gap debe ser más y el bot gap menos, más cerca»,
     para que el título «¿Es Eme y Eme para tu empresa?» se sienta pegado a lo que describen las
     columnas y separado de lo que va arriba (el carrusel de clientes). El `gap` de la rejilla era
     uno solo y separaba por igual el título de las columnas y la imagen del texto; se reparte en
     dos para poder apretar lo de abajo sin poner el texto contra la foto. */
  margin-block: 3.4rem 2rem;
  column-gap: clamp(1.4rem, 2.2vw, 2.8rem);
  row-gap: clamp(0.85rem, 1.1vw, 1.3rem);
}

body .nosotros .imagen-texto-media img {
  width: 100%;
  height: auto;
  /* La lámina vertical de industrias no lleva el borde gris que el theme le da al resto de
     las fotos de la página (igual que las del equipo). */
  border: 0;
}

/* El encabezado del bloque («¿Es Eme y Eme para tu empresa?») es de la sección, no de la columna
   del texto: ocupa las dos, arriba de la foto y de los párrafos. El atajo lo emite como hermano
   de las dos columnas en vez de ir dentro de `.imagen-texto-cuerpo` (ver `imagen-texto.html`);
   acá sólo se le dice que cruce la rejilla. Es un `h2` (el cliente pidió que se viera como los
   otros títulos de sección) y va dentro del atajo, así que la medida que `emeyeme.css` le da a
   los `h2` hijos directos del cuerpo no lo alcanza: se repite acá para que se vea igual. */
body .nosotros .imagen-texto > h2 {
  grid-column: 1 / -1;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  /* Sin los márgenes del theme: la separación con las columnas la da el `gap` de la rejilla, que
     es el mismo en cualquier ancho. */
  margin-block: 0;
}

@media (max-width: 640px) {
  body .nosotros .imagen-texto {
    grid-template-columns: 1fr;
  }
}