/* =========================================================
   EMM – Landing Formación – Bloque “Sistema paso a paso” (v2)
   Scope: solo page-id-9595
   Estructura (clases en Gutenberg):
   - Grupo:        .emm-system
   - Columnas:     .emm-system__grid
   - Columna/card: .emm-system__card
   - Nota final:   .emm-system__note
   ========================================================= */

body.page-id-9595 .entry-content .emm-system{
  position: relative;
  margin: 70px 0;
  padding: clamp(26px, 3.2vw, 44px) clamp(16px, 3vw, 34px);
}

/* Panel gris suave SIN contorno (solo fondo) */
body.page-id-9595 .entry-content .emm-system::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  background: #f6f7f8; /* gris clarito */
  box-shadow: 0 18px 46px rgba(0,0,0,.06);
  z-index: -1;
}

/* Título del bloque (H2 dentro del grupo) */
body.page-id-9595 .entry-content .emm-system > h2{
  text-align: center;
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2.4vw, 40px);
}

/* Subtítulo (p justo debajo del H2, si lo tienes) */
body.page-id-9595 .entry-content .emm-system > p{
  text-align: center;
  margin: 0 auto 26px;
  max-width: 820px;
  opacity: .9;
  font-weight: 650;
}

/* Grid/columns: más aire + permitir que el skew “salga” sin ser recortado */
body.page-id-9595 .entry-content .emm-system__grid{
  gap: clamp(22px, 2.2vw, 34px);
  align-items: stretch;
  overflow: visible !important;
}

/* IMPORTANTE: algunos themes meten overflow hidden aquí */
body.page-id-9595 .entry-content .emm-system__grid.wp-block-columns{
  overflow: visible !important;
}

/* CARD = paralelogramo (todos inclinados al MISMO lado) */
body.page-id-9595 .entry-content .emm-system__card{
  position: relative;
  overflow: visible !important;
  background: #f1f3f5;               /* gris uniforme para evitar “caja dentro” */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;               /* puedes poner 0 si los quieres totalmente rectos */
  box-shadow: 0 18px 42px rgba(0,0,0,.10);

  padding: 18px;
  height: 100%;

  /* MÁS ancho visual y más pronunciado */
  transform: skewX(-10deg);
  transform-origin: center;
  will-change: transform;
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: 1;
}

/* Evita que el central “pise” a los laterales: un pelín más arriba */
body.page-id-9595 .entry-content .emm-system__card:nth-child(2){
  z-index: 3;
}

body.page-id-9595 .entry-content .emm-system__card:hover{
  transform: skewX(-10deg) translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,.14);
}

/* CONTRA-SKEW para que los textos se vean rectos (y no se corten raro) */
body.page-id-9595 .entry-content .emm-system__card h2,
body.page-id-9595 .entry-content .emm-system__card h3,
body.page-id-9595 .entry-content .emm-system__card p{
  transform: skewX(10deg);
}

/* Tipos: evita cortes y mejora ajuste */
body.page-id-9595 .entry-content .emm-system__card h2,
body.page-id-9595 .entry-content .emm-system__card h3{
  margin: 14px 0 8px;
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(18px, 1.6vw, 26px);
  overflow-wrap: anywhere; /* evita que se “salga” */
}

body.page-id-9595 .entry-content .emm-system__card p{
  margin: 0;
  opacity: .92;
  line-height: 1.45;
  max-width: 38ch;
}

/* COVER (imagen): que no aparezca “gris feo abajo” y que el recorte sea limpio */
body.page-id-9595 .entry-content .emm-system__card .wp-block-cover{
  /* el cover ocupa toda la cabecera del card */
  margin: -18px -18px 10px;  /* pega al borde del card */
  border-radius: 14px;       /* si pones card radius 0, pon esto a 0 también */
  overflow: hidden;

  /* altura estable, sin bandas raras */
  min-height: clamp(230px, 20vw, 320px);
}

/* quita el dim/overlay de WP cover si te mete “velo” */
body.page-id-9595 .entry-content .emm-system__card .wp-block-cover__background{
  opacity: 0 !important;
}

/* garantiza que el fondo cubra bien */
body.page-id-9595 .entry-content .emm-system__card .wp-block-cover__image-background{
  object-fit: cover !important;
}

/* Nota final */
body.page-id-9595 .entry-content .emm-system__note{
  text-align: center;
  margin: 22px auto 0;
  max-width: 820px;
  font-weight: 750;
  opacity: .95;
}

/* Responsive */
@media (max-width: 900px){
  body.page-id-9595 .entry-content .emm-system{
    margin: 54px 0;
    padding: 22px 14px;
  }
  body.page-id-9595 .entry-content .emm-system__grid{
    gap: 14px;
  }
  body.page-id-9595 .entry-content .emm-system__card{
    transform: skewX(-7deg);
  }
  body.page-id-9595 .entry-content .emm-system__card:hover{
    transform: skewX(-7deg) translateY(-4px);
  }
  body.page-id-9595 .entry-content .emm-system__card h2,
  body.page-id-9595 .entry-content .emm-system__card h3,
  body.page-id-9595 .entry-content .emm-system__card p{
    transform: skewX(7deg);
  }
}