/* ============================================================================
   «EL PRIMER PASO, CON CALMA» · según Figma (Calma-Designs, nodo 175-12)
   ----------------------------------------------------------------------------
   El contenedor interior es el de siempre (.cmp__inner: 1570 px como mucho,
   con sus márgenes). Dentro, dos columnas: el texto, centrado, toma lo que
   sobra; la foto mide 720 px como mucho y nunca más de media anchura.

   LO ÚNICO QUE SALE DEL CONTENEDOR ES LA FOTO, y solo con el estilo de
   imagen «Hacia la vora» (inc/block-styles.php, el mismo de recursos): se
   estira hacia fuera hasta tocar el borde de la ventana, por el lado en el
   que está. El texto no se mueve. Dos estilos del grupo intercambian las
   columnas: «Primer paso · foto a la derecha» (de serie) y «… a la
   izquierda». Pedido el 2026-09-16.

   ⚠️ El sangrado se calcula con 100vw. En Windows la barra de scroll cuenta
   dentro de 100vw; el overflow-x: clip de la sección evita que asome una
   barra horizontal por esos 15 px.
   ========================================================================== */

.c-firststep {
  overflow-x: clip;
}

.c-firststep .cmp__inner {
  /* El margen del contenedor en cada tramo (como .cmp__inner en componentes.css). */
  --cds-pp-pad: var(--wp--custom--space--gutter-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "foto";
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}
@container (min-width: 48rem) { .c-firststep .cmp__inner { --cds-pp-pad: var(--wp--preset--spacing--60); } }
@container (min-width: 75rem) { .c-firststep .cmp__inner { --cds-pp-pad: var(--wp--custom--space--gutter); } }

.c-firststep__body { grid-area: texto; }
.c-firststep__media { grid-area: foto; }

@container (min-width: 56rem) {
  .c-firststep .cmp__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(720px, 50%));
    grid-template-areas: "texto foto";
    gap: var(--wp--preset--spacing--80);
  }
  .c-firststep.is-style-primer-paso-izquierda .cmp__inner {
    grid-template-columns: minmax(0, min(720px, 50%)) minmax(0, 1fr);
    grid-template-areas: "foto texto";
  }

  /* La foto se pega al borde exterior de su columna. */
  .c-firststep__media .wp-block-image { margin-inline: auto 0; }
  .c-firststep.is-style-primer-paso-izquierda .c-firststep__media .wp-block-image { margin-inline: 0 auto; }

  /*
   * «HACIA LA VORA» (estilo de la imagen): el contenedor solo manda por el
   * lado del texto. Por el lado de la foto, la caja crece hasta el borde de
   * la ventana —o hasta una caja de 1920 px, centrada, si la ventana es más
   * ancha— y la foto se pega a ese borde. La columna de texto se ensancha
   * hasta la foto: es lo que pide el diseño (Figma 175-12).
   */
  .c-firststep .cmp__inner:has(.is-style-hacia-la-vora) {
    max-width: 1920px;
    --cds-pp-sangrado: calc(var(--cds-pp-pad) + max(0px, (min(100vw, 1920px) - var(--wp--custom--layout--content)) / 2));
    padding-inline: var(--cds-pp-sangrado) 0;
  }
  .c-firststep.is-style-primer-paso-izquierda .cmp__inner:has(.is-style-hacia-la-vora) {
    padding-inline: 0 var(--cds-pp-sangrado);
  }
}

/* La foto: 4/5, recortada, 720 px como mucho; el bloque sin los márgenes del núcleo. */
.c-firststep__media .wp-block-image { margin-block: 0; max-width: 720px; }
.c-firststep__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* Texto centrado, como en Figma: título, párrafos, lista, botón y enlaces. */
.c-firststep__body {
  align-items: center;
  text-align: center;
}
.c-firststep__body p { margin-inline: auto; }
.c-firststep__body .c-firststep__what,
.c-firststep__body .cds-ticks { margin-inline: auto; }
.c-firststep__body .cds-ticks > li { justify-content: center; text-align: left; }
/* Numerada (R8): la lista centrada como un bloque y los números en columna. Si
   cada punto se centra por su cuenta, los números quedan a alturas distintas. */
.c-firststep__body ol.cds-ticks { width: fit-content; max-width: 100%; }
.c-firststep__body ol.cds-ticks > li { justify-content: flex-start; }

/* Los CTA, apilados y centrados: el botón y, debajo, los dos enlaces. */
.c-firststep__actions,
.c-firststep__body .wp-block-buttons {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
}