/* =========================================================================
   Mastercoip 2026 — página «COIP Method en Español».
   Referencia: artboard 03-coip-method-coip-method-espanol, 1920 x 7342.

   Hereda entero el sistema visual de assets/css/coip-method.css (la página
   hermana en inglés): tipografía, botones, tarjeta de compra, tarjetas de
   formulario, rejillas, acordeón del FAQ y breakpoints. Aquí sólo van las
   diferencias de ESTE artboard:

     · la tarjeta de compra no lleva desplegable de pago, sino una línea;
     · «De utilizar alineadores a dominarlos» va sobre banda negra y su CTA
       es un contorno crema de 340 px, no un botón sólido;
     · no existe la rejilla de beneficios («MEJORES CASOS…») del inglés;
     · la tarjeta del programa cabalga entre la banda negra y la foto;
     · la tarjeta de los fundadores cae sobre blanco, no sobre negro;
     · los ritmos verticales de cada banda son los de este artboard.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Tarjeta de compra pegajosa (448 x 739, y=220)
   ---------------------------------------------------------------------- */

/* y=571: "Pago único o en 2 plazos" en Light 16, sin caja ni desplegable. */
.coip-method-es .coipm__terms {
	margin-top: 15px;
	font-size: var(--coipm-fs-sm);
	font-weight: 300;
	line-height: var(--coipm-lh-sm);
	color: var(--coip-ink);
}

.coip-method-es .coipm__buy .coipm-cta {
	margin-top: 25px;
}

.coip-method-es .coipm__specs {
	margin-top: 25px;
}

/* La última fila arranca 19 px después de la anterior —no 24— porque en el
   artboard el salto se mide desde el subtítulo de «6 meses de acceso». */
.coip-method-es .coipm__specs li:last-child {
	margin-top: 19px;
}

/* El botón de contorno (.coipm-cta--ghost) vive ya en coip-method.css: desde
   la revisión 55 del XD también lo lleva el hero de la página inglesa. */

/* -------------------------------------------------------------------------
   2. «De utilizar alineadores a dominarlos» (banda negra, y=784..1570)
   ---------------------------------------------------------------------- */

.coip-method-es .coipm-dominar {
	/* 158 px de fondo: los 58 px que la tarjeta del programa cabalga sobre
	   esta banda más el aire del diseño. */
	padding-block: 100px 158px;
	background: var(--coip-ink);
	color: var(--coip-cream);
}

/* 340 x 40 y, a diferencia del resto de CTA, con el texto centrado en el hueco
   que deja el chevron: en el artboard la caja de texto va de x=401 a x=696
   dentro de un botón que empieza en x=389. */
.coip-method-es .coipm-dominar .coipm-cta {
	width: 340px;
	max-width: 100%;
	margin-top: 50px;
	padding-inline: 12px 33px;
}

/* -------------------------------------------------------------------------
   3. Formulario del programa + «¿Qué conseguirás?» (foto, y=1570..2694)
   ---------------------------------------------------------------------- */

.coip-method-es .coipm-conseguir {
	padding-block: 0 135px;
	background-image: url("../img/method-es-fondo.webp");
}

/* En este artboard el velo es negro al 70,5 % en modo multiplicar y sin
   opacidad de grupo, a diferencia del inglés. */
.coip-method-es .coipm-conseguir::before {
	background: rgba(0, 0, 0, 0.705);
}

/* Bloque de formato para que el margen negativo de la tarjeta no se colapse
   hacia fuera y arrastre la banda entera. */
.coip-method-es .coipm-conseguir > .coip-wrap,
.coip-method-es .coipm-autores > .coip-wrap {
	display: flow-root;
}

.coip-method-es .coipm-conseguir .coipm-fcard {
	margin-top: -58px;
}

.coip-method-es .coipm-conseguir .coipm-col {
	margin-top: 102px;
}

/* -------------------------------------------------------------------------
   4. «El método desarrollado por» (tarjeta lila sobre blanco, y=2653)
   ---------------------------------------------------------------------- */

.coip-method-es .coipm-autores {
	padding-block: 0;
	background: var(--coip-white);
	color: var(--coip-charcoal);
}

/* -------------------------------------------------------------------------
   5. «¿Qué incluye COIP Method?» (blanco, y=3265..4414)
   ---------------------------------------------------------------------- */

/* Las cinco fichas con contorno salen 9 px más bajas que en el artboard: el
   componente compartido centra el icono sobre una cabecera fija de 22 px y el
   diseño da algo más de aire a la única ficha con título de dos líneas. Se
   compensa en el pie de la sección para que las bandas siguientes caigan en
   su y exacta. */
.coip-method-es .coipm-incluye {
	padding-block: 99px 109px;
}

/* -------------------------------------------------------------------------
   9. Cierre (banda negra, y=6465..7127)
   ---------------------------------------------------------------------- */

.coip-method-es .coipm-cierre {
	padding-block: 100px 102px;
}

/* En el cierre los resaltes son Bold, no SemiBold como en el resto. */
.coip-method-es .coipm-cierre .coipm-body strong {
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Breakpoints: sólo los de las reglas propias de esta página. El resto lo
   resuelve coip-method.css.
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.coip-method-es .coipm-dominar {
		padding-block: 100px 120px;
	}

	.coip-method-es .coipm-conseguir {
		padding-block: 0 80px;
	}

	.coip-method-es .coipm-conseguir .coipm-fcard {
		margin-top: -40px;
	}

	.coip-method-es .coipm-conseguir .coipm-col {
		margin-top: 60px;
	}

	.coip-method-es .coipm-incluye {
		padding-block: 100px;
	}

	.coip-method-es .coipm-cierre {
		padding-block: 100px;
	}
}

@media (max-width: 767px) {
	.coip-method-es .coipm-dominar {
		padding-block: 60px 80px;
	}

	.coip-method-es .coipm-conseguir {
		padding-block: 0 60px;
	}

	.coip-method-es .coipm-conseguir .coipm-fcard {
		margin-top: -30px;
	}

	.coip-method-es .coipm-conseguir .coipm-col {
		margin-top: 50px;
	}

	.coip-method-es .coipm-incluye,
	.coip-method-es .coipm-cierre {
		padding-block: 60px;
	}

	.coip-method-es .coipm-dominar .coipm-cta {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   AJUSTES DEL INGLÉS

   La maqueta se escribe una sola vez, en castellano y con las medidas del XD;
   el inglés es un diccionario de textos sobre esa misma maqueta (BILINGUE.md).
   Cuando el rótulo inglés no cabe en una caja cerrada del diseño se le da
   caja aquí, sin tocar el texto ni mover el castellano.
   ---------------------------------------------------------------------- */

@media (min-width: 768px) {

	/* «I WANT TO MASTER THE COIP METHOD» pide 298 px y en los 340 del artboard
	   caben 293, así que se partía en dos renglones dentro de una caja de 40 px
	   de alto. Quince píxeles más y vuelve a un renglón; la columna mide 560,
	   de sobra. En castellano «QUIERO DOMINAR EL MÉTODO COIP» pide 280 y ya
	   cabía en los 340 del diseño. */
	:lang(en) .coip-method-es .coipm-dominar .coipm-cta {
		width: 355px;
	}
}