/*
  La portada (layouts/home.html, con el texto en data/portada.yaml).

  DOS COSAS QUE HAY QUE RESPETAR AL ESCRIBIR ACÁ:

  1. **Todo va con prefijo `body .portada`.** Esta hoja se carga ANTES que el paquete del theme
     (ver `head.html`: primero las hojas propias, después las del theme), así que en un empate de
     especificidad gana el theme. Y el theme tiene reglas de una clase más un elemento
     (`.post-body ul`, `.post-body li`, `.post-body p`, `.post-body blockquote`) que alcanzan justo
     a lo que se usa acá: sin el prefijo, la rejilla de clientes se apilaba en una columna (`.post-body
     ul` la dejaba en `display: block`) y la columna se quedaba en los 760 px de `--post-max-w`.
     Con `body .portada` delante, cada regla de acá queda por encima.

  2. **Los colores no se declaran.** Dentro de `.post-body` ya los ponen las reglas del theme
     (títulos en el color de acento, párrafos en `--texto-lectura`) y `emeyeme.css`; repetirlos acá
     sería una segunda fuente de verdad. Se usan los papeles que declara esa hoja —`--em-acento`
     para lo que se pinta, `--em-acento-texto` para lo que se lee, `--em-rotulo` para los rótulos— y
     los colores de la paleta por su nombre (`--em-salvia`, el color de las líneas). Las líneas
     traslúcidas se hacen con los canales (`rgba(var(--em-salvia-rgb), …)`), que es para lo que
     `head.html` publica cada color dos veces.
*/

/* Las tarjetas y los bloques: en el tema oscuro son el mismo grafito y los separa la línea; en el
   claro van en blanco sobre el papel crema, que es el papel de tarjeta de la paleta. La etiqueta
   del bloque lleva `:root:root` porque el theme carga después (ver `emeyeme.css`). */
:root:root[data-theme="light"] body .portada .portada-tarjeta,
:root:root[data-theme="light"] body .portada .portada-nota,
:root:root[data-theme="light"] body .portada .testimonios blockquote,
:root:root[data-theme="light"] body .portada .portada-cierre {
  background: var(--em-blanco);
}

/* La columna se ensancha: esto no es una nota para leer de corrido sino secciones con rejilla.
   Se toca la misma variable que el theme usa para limitar el ancho (`--post-max-w`), no `max-width`:
   los dos límites se aplicarían a la vez y ganaría el más chico. El texto largo se acota aparte
   (`.portada-entrada`), así que ensanchar no alarga la línea. */
body .portada {
  --post-max-w: 68rem;
}

body .portada .portada-bajada {
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  max-inline-size: 46ch;
  margin-block: 0.8rem 1.6rem;
}

/* Los botones: relleno del acento con la tinta por encima. Ese par se lee igual en los dos temas
   (4,79:1) y por eso no cambia con el tema: el naranjo de la paleta es el mismo en oscuro y en
   claro. En el hover el relleno pasa al mostaza —el otro color de la paleta con la tinta encima
   (4,90:1)—: un contorno con el texto en naranjo no serviría, porque sobre el crema el naranjo
   queda en 2,07:1. */
/* --- los botones de cierre ----------------------------------------------------------- */
/* El cliente pidió que los botones cierren cada bloque: centrados y con más aire respecto de lo
   que va arriba (antes quedaban pegados a las tarjetas o al párrafo, con 26 px de aire y al
   costado izquierdo). Van dentro de un `párrafo` —a veces solo el botón, a veces la pregunta más
   el botón—, así que se centra el párrafo; el aire se mide sobre el bloque anterior. */
body .portada p:has(> a.boton),
body .portada .portada-cierre > p:has(> a.boton) {
  text-align: center;
}

body .portada .portada-seccion > p:has(> a.boton),
body .portada .portada-cierre > p:has(> a.boton) {
  margin-block-start: 2.4rem;
}

body .portada a.boton {
  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;
}

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

/* --- las secciones ------------------------------------------------------------------- */

body .portada .portada-seccion {
  margin-block-start: 3.6rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(var(--em-salvia-rgb), 0.3);
  scroll-margin-block-start: 1.5rem;
}

body .portada .portada-etiqueta {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--em-rotulo);
}

body .portada .portada-seccion > h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  margin-block: 0 0.7rem;
  max-inline-size: 30ch;
}

/* Encabezado que sólo existe para quien usa un lector de pantalla: la lista de clientes empieza
   con la etiqueta «01 — Han confiado en nosotros» y no con un título, pero una lista conviene que
   tenga encabezado. */
body .portada .portada-oculto {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body .portada .portada-entrada {
  max-inline-size: 62ch;
  margin-block-end: 1.5rem;
}

/* El bloque «Nuestro estilo» (02) va a todo el ancho de la sección. El cliente pidió que sus dos
   textos —el título «Más que marketing digital, somos human B2B» y el párrafo que lo sigue— «se
   expandan en toda la sección, como las otras páginas», sin saltos de línea de más. Los topes de
   lectura de arriba (30ch en el `h2`, 62ch en `.portada-entrada`) existen para las secciones de
   texto de corrido, y acá partían el título en dos líneas con la columna a media asta. En las
   páginas de contenido el texto usa la columna entera —medido en /nosotros/: 735 px de ancho y
   `max-inline-size: none`—, así que este bloque hace lo mismo. */
body .portada #estilo > h2,
body .portada #estilo > .portada-entrada {
  max-inline-size: none;
}

/* La pregunta y su botón. El texto ya va centrado (la regla de arriba alcanza a todo párrafo que
   lleve un botón), pero el bloque tiene tope de ancho por la lectura y quedaba pegado al borde
   izquierdo de la columna: su centro no coincidía con el eje de los otros cierres —medido a
   1920 px, el botón de acá caía en 1066 y el de las secciones, en 1254—. Con el margen automático
   el bloque se centra en la columna y la pregunta y su botón quedan sobre el mismo eje. */
body .portada .portada-pregunta {
  margin-block-start: 1.6rem;
  margin-inline: auto;
  max-inline-size: 62ch;
}

/* El botón del cierre con pregunta, en su propio renglón y centrado. En línea con el texto el
   botón cae al final de la frase, y ahí su centro depende de dónde termine la línea —medido a
   1920 px: el botón quedaba en 1385 mientras el resto de los cierres de la portada van en 1254—,
   que es justo lo que el cliente pidió corregir («el mismo lineamiento de centrado»). Con el
   ancho del contenido y los márgenes automáticos el botón ocupa su renglón y queda sobre el eje de
   la columna, con el mismo aire respecto de la pregunta que el resto de los cierres. */
body .portada .portada-pregunta .boton {
  display: block;
  inline-size: fit-content;
  margin-inline: auto;
  margin-block-start: 1rem;
}

/* --- los clientes -------------------------------------------------------------------- */

/* La sección ya no lleva reglas propias: los logotipos van en el **carrusel compartido**
   (`.emeyeme-logos`, en `carrusel.css`), la misma pieza que las herramientas y los clientes de
   /nosotros/. El cliente pidió primero una parrilla («estaba bien como parrilla»), después una
   rejilla, y por último el carrusel del interior; manda lo último.

   Acá quedó sólo el ritmo de la sección: el carrusel es un bloque ancho y necesita el mismo aire
   arriba y abajo que los otros bloques de la portada. El tinte de las marcas —y la excepción del
   logotipo de Dole, que llegó en su versión oscura— vive en `emeyeme.css`, que es la hoja común. */
body .portada .emeyeme-logos {
  margin-block: 0.4rem 1.6rem;
}

/* --- tarjetas (los desafíos, los casos) ---------------------------------------------- */

/* Las enumeraciones de la portada son listas de verdad (`ul` + `li`, los ítems con su clase de
   siempre), y esto es lo que hace que no se vean como listas: sin viñeta, sin el aire lateral que
   el navegador le pone al `ul` y sin el margen del `li`. La geometría sigue viniendo de la clase
   —la rejilla de abajo—, así que el reset no la toca. Es la misma decisión que ya estaba en
   `.pasos` y `.revision-lista`, que nacieron como listas. */
body .portada .portada-tarjetas,
body .portada .cifras,
body .portada .portada-notas,
body .portada .testimonios-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Y el `li` también: el theme le pone margen inferior (`.post-body li`), y en una rejilla eso
   infla cada fila —medido: 7,5 px por fila, la sección crecía 15 px y las tarjetas se corrían—.
   El `padding` no se toca acá: el de las tarjetas es suyo y lo pone su propia regla. */
body .portada .portada-tarjetas > li,
body .portada .cifras > li,
body .portada .portada-notas > li,
body .portada .testimonios-lista > li {
  list-style: none;
  margin: 0;
}

body .portada .portada-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
}

body .portada .portada-tarjeta {
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(var(--em-salvia-rgb), 0.3);
}

body .portada .portada-tarjeta h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin-block: 0 0.6rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

/* El ícono de línea que abre cada tarjeta (problema, sector) y cada etapa del método: el tamaño
   (1.15 rem cuadrados) lo pone `emeyeme.css`, que es la hoja que va en todas las páginas —el set
   también se usa en /servicios/ y en la barra de cookies—; acá queda lo que es de la portada, que
   es la alineación con la primera línea del título. El `currentColor` del SVG toma el color del
   h3, así que el `margin` es lo que lo centra con la primera línea. */
.icono-linea {
  margin-block-start: 0.15em;
}

body .portada .pasos h3 {
  font-size: 1.1rem;
  margin-block: 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

body .portada .pasos h3 .icono-linea {
  color: var(--em-acento-texto);
}

body .portada .portada-tarjeta p {
  margin-block: 0 0.5rem;
}

body .portada .portada-tarjeta p:last-child {
  margin-block-end: 0;
}

/* --- el método, en tres pasos numerados ---------------------------------------------- */

body .portada .pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

body .portada .pasos li {
  counter-increment: paso;
  margin: 0;
  padding-block-start: 0.7rem;
  /* Cada etapa del Método 3C con su color secundario, en el orden de la paleta: Conocer,
     Clarificar, Conectar. Va en la línea y no en el numeral porque sobre el grafito ninguno de los
     tres pasa el 4,5:1 que pide la norma para texto chico (terracota 2,34, mostaza 4,90, olivo
     1,70); como línea de 2 px son una señal, no un texto que haya que leer. */
  border-block-start: 2px solid var(--em-terracota);
}

body .portada .pasos li:nth-child(2) {
  border-block-start-color: var(--em-mostaza);
}

body .portada .pasos li:nth-child(3) {
  border-block-start-color: var(--em-olivo);
}

body .portada .pasos li::before {
  content: "0" counter(paso);
  display: block;
  margin-block-end: 0.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--em-acento-texto);
}

body .portada .pasos h3 {
  font-size: 1.1rem;
  margin-block: 0 0.5rem;
}

body .portada .pasos p {
  margin-block: 0 0.4rem;
}

/* --- las cifras ---------------------------------------------------------------------- */

body .portada .cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.6rem;
}

body .portada .cifra-valor {
  display: block;
  font-size: clamp(2.3rem, 2rem + 2.2vw, 3.4rem);
  line-height: 1;
}

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

/* --- los testimonios (carrusel) -------------------------------------------------- */

/* El cliente pidió que los testimonios se desplieguen de a uno, como en el sitio anterior, y
   «no queden tan pesados»: antes se veían los seis en una rejilla. Ahora son un carrusel que
   avanza solo cada tres segundos (controlado por `js/testimonios.js`, la animación y el estado
   van acá). Cada ítem es un `<figure class="testimonio" data-testimonio>`; el activo es el que
   se muestra, con una aparición corta. */
body .portada .testimonios {
  position: relative;
  margin: 0;
}

body .portada .testimonio {
  display: none;
  margin: 0;
  padding: 1.3rem 1.4rem;
  border: 1px solid rgba(var(--em-salvia-rgb), 0.3);
  /* En el tema claro los testimonios van en el papel de tarjeta (el blanco sobre el crema),
     igual que las otras tarjetas de la portada; en el oscuro ya es el grafito y los separa la
     línea. */
  background: var(--em-tinta);
}

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

body .portada .testimonio.activo {
  display: block;
  animation: testimonio-entrada 0.5s ease-out;
}

@keyframes testimonio-entrada {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* La barra que anuncia el próximo cambio: el cliente pidió «algún efecto que demuestre
   movimiento». Se llena en el mismo tiempo que dura el paso del carrusel (la duración se la pasa
   el init como `--testimonios-paso`), así que además de moverse dice cuánto falta. Se pausa con el
   carrusel cuando el puntero entra al bloque. */
body .portada .testimonios-progreso {
  margin-block-start: 0.9rem;
  block-size: 2px;
  background: rgba(var(--em-salvia-rgb), 0.35);
  overflow: hidden;
}

body .portada .testimonios-progreso i {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--em-acento);
}

body .portada .testimonios-progreso.corriendo i {
  animation: testimonios-avance var(--testimonios-paso, 2200ms) linear forwards;
}

body .portada .testimonios-progreso.pausada i {
  animation-play-state: paused;
}

@keyframes testimonios-avance {
  from { inline-size: 0; }
  to { inline-size: 100%; }
}

/* Con el sistema pidiendo menos movimiento no hay avance automático: la barra quedaría quieta
   marcando un paso que no ocurre, así que se esconde. */
@media (prefers-reduced-motion: reduce) {
  body .portada .testimonios-progreso {
    display: none;
  }
}

body .portada .testimonio blockquote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

body .portada .testimonio blockquote::before {
  content: none;
}

body .portada .testimonio p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
}

body .portada .testimonio footer {
  font-size: 0.82rem;
}

body .portada .testimonio cite {
  font-style: normal;
}

/* Los puntos de navegación, bajo el testimonio. Cada uno es un botón chico; el activo va con
   el acento. Se espacian para que el toque no sea un problema en el teléfono. */
body .portada .testimonios-nav {
  display: flex;
  gap: 0.6rem;
  margin-block-start: 1rem;
}

body .portada .testimonios-nav button {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  padding: 0;
  border: 1px solid var(--em-acento);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease;
}

body .portada .testimonios-nav button.activo {
  background: var(--em-acento);
}

body .portada .testimonios-nav button:focus-visible {
  outline: 2px solid var(--em-acento);
  outline-offset: 2px;
}

/* Sin movimiento en el sistema: el carrusel no debe animar la entrada ni saltar solo. Los
   puntos siguen permitiendo cambiar a mano. */
@media (prefers-reduced-motion: reduce) {
  body .portada .testimonio.activo {
    animation: none;
  }
}

/* --- la lista de comprobación -------------------------------------------------------- */

body .portada .revision-lista {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .portada .revision-lista li {
  position: relative;
  margin: 0;
  padding-inline-start: 1.8rem;
}

/* El cuadro de cada ítem: lleno y del color del acento, como lo pidió el cliente —«cuadros
   completos en naranjo cada bullet, no un cuadro vacío, y que sea menos tenue»—. Antes era el
   signo `☐`, que se dibuja con la fuente que esté puesta: su forma, su grosor y su tamaño cambian
   de un sistema a otro y quedaba como un contorno fino. Acá la marca es una caja —el signo es el
   relleno, no un glifo—, así que el tamaño no depende de ninguna tipografía.

   El color es el **naranjo de la paleta en los dos temas**, y no el papel del acento: el cliente
   preguntó si se podían mantener naranjos en modo oscuro, y sí — el naranjo sobre el grafito mide
   4,79:1, sobre el mínimo de una marca gráfica (3:1)—. Antes esto usaba `--em-acento`, que en el
   tema oscuro vale crema (es el papel de lo que se pinta), así que los cuadros se perdían entre el
   resto de las marcas del tema. */
body .portada .revision-lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  /* Centrado con la primera línea del ítem: el cuadro mide 0,7 em y la línea del cuerpo 1,95 (el
     `line-height` que el theme le da a `.post-body`), así que le quedan 0,625 em hasta el centro
     de la línea. */
  inset-block-start: 0.625em;
  inline-size: 0.7em;
  block-size: 0.7em;
  background: var(--em-naranjo);
}

/* --- el cierre ----------------------------------------------------------------------- */

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

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

/* --- las últimas notas ---------------------------------------------------------------- */

body .portada .portada-notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.4rem;
}

body .portada .portada-nota {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--em-salvia-rgb), 0.3);
}

body .portada .portada-nota img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-block-end: 1px solid rgba(var(--em-salvia-rgb), 0.3);
}

body .portada .portada-nota-texto {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  padding: 1rem 1.1rem 1.2rem;
}

body .portada .portada-nota h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

body .portada .portada-nota h3 a {
  text-decoration: none;
}

body .portada .portada-nota h3 a:hover {
  text-decoration: underline;
}

body .portada .portada-nota p {
  margin: 0;
  font-size: 0.92rem;
}

body .portada .portada-mas {
  margin-block-start: auto;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}