/* =========================================================================
   Mastercoip 2026 — página "COIP Method en Inglés".
   Referencia: artboard Adobe XD 98739fab, 1920 x 8789.
   Contenedor 1142 px (márgenes de 389), columna de contenido 560,
   hueco 134, columna lateral 448. Los tokens de paleta, el contenedor
   y los breakpoints vienen de base.css.
   ========================================================================= */

.coipm {
	--coipm-col: 49.0368%; /* 560 / 1142 */
	--coipm-aside: 39.2294%; /* 448 / 1142 */

	--coipm-fs-h1: 50px;
	--coipm-lh-h1: 60px;
	--coipm-fs-h2: 40px;
	--coipm-lh-h2: 48px;
	--coipm-fs-lead: 30px;
	--coipm-lh-lead: 36px;
	--coipm-fs-quote: 26px;
	--coipm-lh-quote: 31px;
	--coipm-fs-body: 20px;
	--coipm-lh-body: 24px;
	--coipm-fs-md: 18px;
	--coipm-lh-md: 22px;
	--coipm-fs-sm: 16px;
	--coipm-lh-sm: 19px;
	--coipm-fs-price: 30px;
	--coipm-lh-price: 36px;

	--coipm-select-border: #29255c;
	--coipm-cta-dark-hover: #525255;

	/* Separación del borde superior de la ventana cuando la tarjeta de compra
	   se queda pegada. Con la barra de administración hay que bajarla. */
	--coipm-buy-top: 20px;

	position: relative;
	font-size: var(--coipm-fs-body);
	line-height: var(--coipm-lh-body);
}

.admin-bar .coipm {
	--coipm-buy-top: 52px; /* 32 de la barra de administración + 20 de aire */
}

/* -------------------------------------------------------------------------
   Iconos: máscara CSS sobre los SVG exportados del AGC, de modo que
   heredan el color del contexto y conservan sus proporciones exactas.
   ---------------------------------------------------------------------- */

.coipm-ic {
	display: block;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--coipm-ic) no-repeat center / contain;
	mask: var(--coipm-ic) no-repeat center / contain;
}

.coipm-ic--lecciones { --coipm-ic: url("../svg/coipm-icon-lecciones.svg"); width: 30.01px; height: 20.7px; }
.coipm-ic--idioma    { --coipm-ic: url("../svg/coipm-icon-idioma.svg");    width: 30.05px; height: 30.04px; }
.coipm-ic--online    { --coipm-ic: url("../svg/coipm-icon-online.svg");    width: 30px;    height: 18.44px; }
.coipm-ic--acceso    { --coipm-ic: url("../svg/coipm-icon-acceso.svg");    width: 30.03px; height: 30.38px; }
.coipm-ic--sesion    { --coipm-ic: url("../svg/coipm-icon-sesion.svg");    width: 30.23px; height: 22.69px; }

.coipm-ic--f-lecciones { --coipm-ic: url("../svg/coipm-feat-lecciones.svg"); width: 40.01px; height: 27.6px; }
.coipm-ic--f-online    { --coipm-ic: url("../svg/coipm-feat-online.svg");    width: 40px;    height: 24.58px; }
.coipm-ic--f-acceso    { --coipm-ic: url("../svg/coipm-feat-acceso.svg");    width: 27.18px; height: 27.49px; }
.coipm-ic--f-sesion    { --coipm-ic: url("../svg/coipm-feat-sesion.svg");    width: 40.3px;  height: 30.25px; }
.coipm-ic--f-casos     { --coipm-ic: url("../svg/coipm-feat-casos.svg");     width: 26.66px; height: 30.54px; }

.coipm-ic--programa { --coipm-ic: url("../svg/coipm-icon-programa.svg"); width: 31.47px; height: 36px; }
.coipm-ic--clase    { --coipm-ic: url("../svg/coipm-icon-clase.svg");    width: 38.53px; height: 29.99px; }
.coipm-ic--estrella { --coipm-ic: url("../svg/coipm-icon-estrella.svg"); width: 18.88px; height: 18.06px; }

/* -------------------------------------------------------------------------
   Rejilla general: secciones a sangre + carril lateral pegajoso
   ---------------------------------------------------------------------- */

.coipm-sec {
	position: relative;
}

.coipm-col {
	width: var(--coipm-col);
}

/* El carril ocupa toda la altura de la página para que el sticky tenga un
   bloque contenedor por el que desplazarse. El margen inferior es a propósito
   —igual que en .coip-curso__rail—: sin él, el "contenedor" del sticky acaba
   justo donde acaba `.coipm`, así que la tarjeta llega a tocar el footer al
   final del todo. Con el margen, deja de subir antes. */
.coipm__rail {
	position: absolute;
	inset: 100px 0 150px;
	z-index: 3;
	pointer-events: none;
}

.coipm__buy {
	position: sticky;
	top: var(--coipm-buy-top, 20px);
	width: var(--coipm-aside);
	margin-inline-start: auto;
	padding: 30px;
	background: var(--coip-white);
	border-radius: var(--coip-radius);
	box-shadow: var(--coip-shadow);
	color: var(--coip-ink);
	pointer-events: auto;

	/* Con los plazos de SUMO la tarjeta puede crecer más que la ventana. En
	   vez de desbordar por arriba y por abajo, se desplaza por dentro. */
	max-height: calc(100vh - var(--coipm-buy-top, 20px) - 20px);
	max-height: calc(100dvh - var(--coipm-buy-top, 20px) - 20px);
	overflow-x: hidden;
	overflow-y: auto;

	/* Sin «overscroll-behavior: contain» a propósito: con `position: sticky`
	   de por medio, Chrome deja de mandar el scroll de rueda a este cuadro en
	   cuanto lo lleva —ni desplaza la tarjeta ni la página, la rueda no hace
	   nada—, así que quien pasa el ratón por la foto se queda sin poder bajar
	   la página. Sin «contain» el comportamiento es el de siempre: la rueda
	   desplaza la tarjeta y, al llegar al final, sigue con la página.
	   El «contain» de base.css sólo alcanza a `[data-lenis-prevent]`, y esta
	   tarjeta lleva `data-lenis-auto`: no le llega.
	   Ver assets/css/curso.css, su misma tarjeta en las páginas de curso. */

	/* Sin JavaScript se queda la barra nativa, lo más discreta que deja el
	   navegador; con JavaScript, `has-veladura` la esconde y en su lugar el
	   contenido se difumina contra los cantos (ui.js + base.css). */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color var(--coip-dur) var(--coip-ease);
}

.coipm__buy:hover,
.coipm__buy:focus-within {
	scrollbar-color: rgba(41, 37, 92, 0.22) transparent;
}

.coipm__buy.has-veladura {
	scrollbar-width: none;
}

.coipm__buy.has-veladura::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* Marco de recorte de la foto: es lo que hace posible el gesto 4 (acercar)
   del lenguaje de hover. La tarjeta no sirve de marco —se desplaza por
   dentro, así que su overflow es `auto` en vertical— y la propia imagen
   tampoco: el borde redondeado escala con ella y se comería el relleno de
   30 px de la tarjeta. Con este envoltorio la foto crece dentro de una caja
   que no se mueve. */
.coipm__buy-media {
	display: block;
	overflow: hidden;
	border-radius: 16px;
}

.coipm__buy-img {
	width: 100%;
	height: auto;
	aspect-ratio: 388 / 250;
	object-fit: cover;
	object-position: left center;
	border-radius: 16px;
	transition: transform var(--coip-dur) var(--coip-ease-suave);
}

/* La foto es lo único de estas dos páginas que se puede escalar: no lleva
   texto que desenfocar y ahora tiene contenedor con overflow: hidden. El
   disparador es la tarjeta entera, que es la unidad que el usuario mira. */
@media (hover: hover) and (pointer: fine) {
	.coipm__buy:hover .coipm__buy-img {
		transform: scale(var(--coip-zoom));
	}
}

/* Paridad de teclado: el foco cae en el desplegable o en el botón de compra,
   nunca en la imagen, así que el gesto se repite con :focus-within. */
.coipm__buy:focus-within .coipm__buy-img {
	transform: scale(var(--coip-zoom));
}

.coipm__price {
	margin-top: 20px;
	color: var(--coip-charcoal);
	font-size: var(--coipm-fs-price);
	font-weight: 700;
	line-height: var(--coipm-lh-price);
}

.coipm__select-wrap {
	position: relative;
	margin-top: 20px;
	color: var(--coipm-select-border);
}

.coipm__select {
	display: block;
	width: 100%;
	height: 40px;
	padding-inline: 18px 44px;
	font-family: inherit;
	font-size: var(--coipm-fs-sm);
	font-weight: 300;
	line-height: var(--coipm-lh-sm);
	color: var(--coip-ink);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--coip-radius);
	appearance: none;
	cursor: pointer;
	transition: background-color var(--coip-dur-rapida) var(--coip-ease);
}

/* Gesto 2 (rellenar): el desplegable se tiñe de crema, sin cambiar de
   tamaño —ensancharlo movería el botón de compra que tiene debajo—. Como
   sólo cambia de color, no necesita el guardia de hover. */
.coipm__select:hover,
.coipm__select:focus-visible {
	background: var(--coip-cream);
}

.coipm__select-arrow {
	position: absolute;
	top: 50%;
	right: 21px;
	width: 11px;
	height: 9px;
	margin-top: -4.5px;
	--coipm-ic: url("../svg/coipm-icon-select.svg");
	pointer-events: none;
}

.coipm__buy .coipm-cta {
	margin-top: 30px;
}

.coipm__specs {
	margin-top: 20px;
}

.coipm__specs li {
	display: grid;
	grid-template-columns: 30px 1fr;
	column-gap: 12px;
	align-items: start;
}

.coipm__specs li + li {
	margin-top: 24px;
}

/* El icono se centra sobre la primera línea del texto y desborda la caja
   de 22 px de forma simétrica, igual que en el diseño. */
.coipm__specicon {
	display: flex;
	align-items: center;
	height: var(--coipm-lh-md);
	color: var(--coip-charcoal);
}

.coipm__specs b {
	display: block;
	font-size: var(--coipm-fs-md);
	font-weight: 600;
	line-height: var(--coipm-lh-md);
}

.coipm__specsub {
	display: block;
	margin-top: 5px;
	font-size: var(--coipm-fs-sm);
	font-weight: 400;
	line-height: var(--coipm-lh-sm);
}

/* -------------------------------------------------------------------------
   Tipografía de la página
   ---------------------------------------------------------------------- */

.coipm-h1,
.coipm .coipm-h1 {
	font-size: var(--coipm-fs-h1);
	font-weight: 900;
	line-height: var(--coipm-lh-h1);
}

.coipm-h2,
.coipm .coipm-h2 {
	font-size: var(--coipm-fs-h2);
	font-weight: 700;
	line-height: var(--coipm-lh-h2);
}

.coipm .is-black {
	font-weight: 900;
}

.coipm .is-semi {
	font-weight: 600;
}

.coipm .is-coral {
	color: var(--coip-coral);
}

.coipm-eyebrow {
	font-size: var(--coipm-fs-body);
	font-weight: 400;
	line-height: var(--coipm-lh-body);
}

.coipm-lead {
	font-size: var(--coipm-fs-lead);
	font-weight: 500;
	line-height: var(--coipm-lh-lead);
}

.coipm-body {
	font-size: var(--coipm-fs-body);
	font-weight: 400;
	line-height: var(--coipm-lh-body);
}

.coipm-body strong,
.coipm-quote strong {
	font-weight: 600;
}

.coipm-quote {
	font-size: var(--coipm-fs-quote);
	font-weight: 700;
	line-height: var(--coipm-lh-quote);
}

/* Los párrafos del diseño llevan una línea en blanco entre bloques: se
   reproduce con un margen igual a una línea completa. */
.coipm-body + .coipm-body {
	margin-top: var(--coipm-lh-body);
}

/* -------------------------------------------------------------------------
   Botones
   ---------------------------------------------------------------------- */

.coipm-cta,
.coipm-cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 40px;
	padding-inline: 12px;
	border-radius: var(--coip-radius);
	border: 1px solid transparent;
	font-size: var(--coipm-fs-sm);
	font-weight: 500;
	line-height: var(--coipm-lh-sm);
	text-align: center;
	/* El relleno y la vuelta de las letras (gesto 2) los lleva el mecanismo de
	   base.css; aquí sólo queda el acompañamiento de 2 px. */
	transition: translate var(--coip-dur-rapida) var(--coip-ease-suave);
}

.coipm-cta::after,
.coipm-cta .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 19px;
	width: 6.32px;
	height: 11.35px;
	margin-top: -5.68px;
	background-color: currentColor;
	-webkit-mask: url("../svg/coipm-icon-chevron.svg") no-repeat center / contain;
	mask: url("../svg/coipm-icon-chevron.svg") no-repeat center / contain;
}

.coipm-cta--coral,
.coipm-cta--coral .wp-block-button__link {
	background: var(--coip-coral);
	border-color: var(--coip-coral);
	color: var(--coip-cream);
}

/* Gesto 2: de qué se rellena cada modificador. Las variables van en el
   selector de reposo, no en un `:hover` — ver base.css. */
.coipm-cta--coral,
.coipm-cta--coral .wp-block-button__link {
	--coip-fx-fill: var(--coip-charcoal);
}

.coipm-cta--dark,
.coipm-cta--dark .wp-block-button__link {
	background: var(--coip-charcoal);
	border-color: var(--coip-charcoal);
	color: var(--coip-cream);
}

.coipm-cta--dark,
.coipm-cta--dark .wp-block-button__link {
	--coip-fx-fill: var(--coipm-cta-dark-hover);
}

.coipm-cta--cream,
.coipm-cta--cream .wp-block-button__link {
	background: var(--coip-cream);
	border-color: var(--coip-cream);
	color: var(--coip-charcoal);
}

.coipm-cta--cream,
.coipm-cta--cream .wp-block-button__link {
	--coip-fx-fill: var(--coip-white);
}

/* Contorno crema de 1 px sobre fondo de color: «VER PROGRAMA» del hero y el
   «QUIERO DOMINAR…» de la banda negra de la página española. */
.coipm-cta--ghost,
.coipm-cta--ghost .wp-block-button__link {
	background: transparent;
	border-color: var(--coip-cream);
	color: var(--coip-cream);
}

.coipm-cta--ghost,
.coipm-cta--ghost .wp-block-button__link {
	--coip-fx-fill: var(--coip-cream);
	--coip-fx-ink: var(--coip-charcoal);
}

/* Los bloques de arriba son el gesto 2 (rellenar) del lenguaje de hover de
   base.css: sólo declaran el color del relleno, y del barrido se encarga el
   mecanismo común. Lo que se escribe aquí es el acompañamiento del gesto: la
   píldora sube los 2 px de --coip-lift-sm y el chevron avanza los 3 px de
   --coip-nudge (gesto 3), que es lo que dice «aquí se sigue». Esas dos cosas
   sí mueven, así que van bajo el guardia, con su paridad de teclado justo
   debajo. */
.coipm-cta::after,
.coipm-cta .wp-block-button__link::after {
	transition: transform var(--coip-dur-rapida) var(--coip-ease-suave);
}

@media (hover: hover) and (pointer: fine) {
	.coipm-cta:hover,
	.coipm-cta .wp-block-button__link:hover {
		/* `translate` y no `transform`: GSAP deja un transform EN LÍNEA sobre
		   todo lo que anima anim.js, y el estilo en línea gana a la hoja. La
		   propiedad individual se compone con él en vez de pelearse con él.
		   Ver el LENGUAJE DE HOVER de base.css. */
		translate: 0 var(--coip-lift-sm);
	}

	.coipm-cta:hover::after,
	.coipm-cta .wp-block-button__link:hover::after {
		transform: translateX(var(--coip-nudge));
	}
}

/* :focus-visible sólo lo enciende el teclado, así que puede vivir fuera del
   guardia sin quedarse pegado tras un toque. */
.coipm-cta:focus-visible,
.coipm-cta .wp-block-button__link:focus-visible {
	/* `translate` y no `transform`: GSAP deja un transform EN LÍNEA sobre
	   todo lo que anima anim.js, y el estilo en línea gana a la hoja. La
	   propiedad individual se compone con él en vez de pelearse con él.
	   Ver el LENGUAJE DE HOVER de base.css. */
	translate: 0 var(--coip-lift-sm);
}

.coipm-cta:focus-visible::after,
.coipm-cta .wp-block-button__link:focus-visible::after {
	transform: translateX(var(--coip-nudge));
}

/* -------------------------------------------------------------------------
   1. Hero (banda lila)
   ---------------------------------------------------------------------- */

.coipm-hero {
	padding-block: 100px;
	background: var(--coip-lilac);
	color: var(--coip-cream);
}

.coipm-hero .coipm-eyebrow,
.coipm-hero .coipm-h1,
.coipm-hero .coipm-hero__sub,
.coipm-hero .coipm-lead {
	margin-bottom: 20px;
}

.coipm-hero__sub {
	font-size: var(--coipm-fs-h2);
	font-weight: 700;
	line-height: var(--coipm-lh-h2);
}

/* Revisión 55 del XD: dos píldoras de 260 x 40 en y 734, 50 px bajo la
   entradilla y separadas 39 (x 390 y x 689). Llevan a las dos tarjetas de
   formulario, que tienen «id» (coip_2026_render_lead_form()). */
.coipm-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 39px;
	margin-top: 50px;
}

.coipm-hero__ctas .coipm-cta {
	width: 260px;
	max-width: 100%;
}

/* La banda lila acaba ahora en y 828: 54 px bajo los botones, no los 100 que
   deja bajo la entradilla. Sólo en el escritorio, que es lo que dibuja XD; la
   landing rusa, sin botones, conserva los 100. */
@media (min-width: 1024px) {
	.coipm-hero:has(.coipm-hero__ctas) {
		padding-bottom: 54px;
	}
}

/* -------------------------------------------------------------------------
   2. Banda negra: titular y tarjetas de beneficio
   ---------------------------------------------------------------------- */

.coipm-benefits {
	padding-block: 100px 99px;
	background: var(--coip-ink);
	color: var(--coip-cream);
}

.coipm-benefits .coipm-h2 {
	margin-bottom: 50px;
}

.coipm-benefits__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px var(--coip-col-gap);
}

.coipm-bcard {
	height: 206px;
	padding: 36px 24px 24px;
	border: 1px solid var(--coip-cream);
	border-radius: var(--coip-radius);
	transition: translate var(--coip-dur) var(--coip-ease-suave),
		box-shadow var(--coip-dur) var(--coip-ease-suave);
}

/* Gesto 1 (elevar). Nada de scale(): la tarjeta lleva titular y párrafo, y
   escalar texto lo desenfoca y desborda la rejilla de dos columnas. Sobre la
   banda negra la sombra apenas se lee —es una sombra de tinta sobre tinta—,
   pero el filete crema subiendo 6 px sí, que es lo que hace legible el
   gesto. */
@media (hover: hover) and (pointer: fine) {
	.coipm-bcard:hover {
		/* `translate` y no `transform`: GSAP deja un transform EN LÍNEA sobre
		   todo lo que anima anim.js, y el estilo en línea gana a la hoja. La
		   propiedad individual se compone con él en vez de pelearse con él.
		   Ver el LENGUAJE DE HOVER de base.css. */
		translate: 0 var(--coip-lift);
		box-shadow: var(--coip-shadow-lift);
	}
}

.coipm-bcard h3 {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.coipm-bcard p {
	font-size: var(--coipm-fs-sm);
	font-weight: 400;
	line-height: var(--coipm-lh-sm);
}

/* -------------------------------------------------------------------------
   Tarjetas de formulario: cabalgan sobre el corte entre dos bandas
   ---------------------------------------------------------------------- */

.coipm-formsec {
	--coipm-formsec-top: var(--coip-ink);
	--coipm-formsec-split: 70px;

	background: linear-gradient(
		to bottom,
		var(--coipm-formsec-top) 0 var(--coipm-formsec-split),
		var(--coip-white) var(--coipm-formsec-split)
	);
}

.coipm-formsec--clase {
	--coipm-formsec-top: var(--coip-lilac);
	--coipm-formsec-split: 80px;
}

.coipm-fcard {
	width: var(--coipm-col);
	padding: 40px 41px 41px;
	background: var(--coip-cream);
	border-radius: var(--coip-radius);
	box-shadow: var(--coip-shadow);
	color: var(--coip-ink);
	/* Es el ancla de los botones del hero: se para 150 px por debajo del
	   borde. Lenis (smooth-scroll.js) descuenta este mismo margen, así que el
	   recorrido suave y el salto nativo acaban en el mismo sitio. */
	scroll-margin-top: 150px;
}

.coipm-fcard__head {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--coip-coral);
}

.coipm-fcard__title {
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	color: var(--coip-ink);
}

.coipm-fcard__title .is-black {
	font-weight: 900;
	color: var(--coip-coral);
}

.coipm-fcard__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 34px;
	margin-top: 30px;
}

.coipm-field input {
	width: 100%;
	height: 45px;
	padding-inline: 20px;
	font-family: inherit;
	font-size: var(--coipm-fs-sm);
	font-weight: 400;
	line-height: var(--coipm-lh-sm);
	color: var(--coip-ink);
	background: transparent;
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius-sm);
}

.coipm-field input::placeholder {
	color: var(--coip-ink);
	opacity: 1;
}

.coipm-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	font-size: var(--coipm-fs-sm);
	line-height: var(--coipm-lh-sm);
	color: var(--coip-charcoal);
}

.coipm-check strong {
	font-weight: 600;
	text-decoration: underline;
}

/* El enlace a la política de privacidad no tenía ningún estado: subrayado y
   nada más. Gesto 2 (rellenar) en su versión de enlace —cambia el color, no
   la caja—, así que tampoco necesita el guardia. */
.coipm-check a {
	transition: color var(--coip-dur-rapida) var(--coip-ease);
}

.coipm-check a:hover,
.coipm-check a:focus-visible {
	color: var(--coip-coral);
}

/* Trampa para bots: fuera de pantalla pero accesible al DOM. */
.coipm-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.coipm-form__msg {
	margin-top: 20px;
	font-size: var(--coipm-fs-sm);
	font-weight: 600;
	line-height: var(--coipm-lh-sm);
	color: #b3261e;
}

.coipm-form__msg.is-ok {
	color: #145c2e;
}

.coipm-fcard .coipm-cta {
	margin-top: 30px;
}

/* -------------------------------------------------------------------------
   3. "De utilizar alineadores a dominarlos" (blanco)
   ---------------------------------------------------------------------- */

.coipm-dominar {
	padding-block: 100px;
	background: var(--coip-white);
	color: var(--coip-charcoal);
}

.coipm-dominar .coipm-h2 {
	margin-bottom: 30px;
}

.coipm-dominar .coipm-cta {
	margin-top: 50px;
}

/* -------------------------------------------------------------------------
   4. "¿Qué conseguirás?" (foto con velo)
   ---------------------------------------------------------------------- */

.coipm-conseguir {
	padding-block: 100px 135px;
	color: var(--coip-cream);
	background-image: none;
	background-size: cover;
	background-position: center;
}

.coipm-conseguir.is-coip-bg-loaded {
	background-image: url("../img/coipm-teclado.webp");
}

/* El velo del diseño es negro en modo multiplicar al 70,5 % dentro de un
   grupo al 80,25 %: equivale a un 56,6 % de negro sobre la foto. */
.coipm-conseguir::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.566);
}

.coipm-conseguir > * {
	position: relative;
}

.coipm-conseguir .coipm-h2 {
	margin-bottom: 20px;
}

.coipm-conseguir__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 150px 150px auto;
	column-gap: var(--coip-col-gap);
}

.coipm-item {
	display: grid;
	grid-template-columns: 18.88px 1fr;
	column-gap: 7.12px;
	align-items: start;
}

.coipm-item__star {
	display: flex;
	align-items: center;
	height: var(--coipm-lh-md);
	padding-top: 4px;
}

.coipm-item h3 {
	font-size: var(--coipm-fs-md);
	font-weight: 600;
	line-height: var(--coipm-lh-md);
}

.coipm-item p {
	margin-top: 10px;
	font-size: var(--coipm-fs-md);
	font-weight: 400;
	line-height: var(--coipm-lh-md);
}

/* -------------------------------------------------------------------------
   5. "El método desarrollado por" (tarjeta lila sobre banda negra)
   ---------------------------------------------------------------------- */

.coipm-autores {
	padding-block: 0 101px;
	background: var(--coip-ink);
	color: var(--coip-cream);
}

/* El layout de flujo de WordPress anula el margen superior del primer hijo,
   así que hace falta más especificidad para que la tarjeta pise la sección
   anterior tal y como marca el diseño. */
.coipm .coipm-autores__card {
	position: relative;
	z-index: 2;
	width: var(--coipm-col);
	margin-top: -41px;
	padding: 40px 40px 40px 41px;
	background: var(--coip-lilac);
	border-radius: var(--coip-radius);

	/* El color va en la tarjeta, no en la banda: es lila propia y el texto
	   sobre lila es crema en todo el sitio (hero y "Una inversión en tu
	   criterio clínico" hacen lo mismo). Heredarlo de la sección la ataba al
	   color de fondo de cada página — en español la banda es blanca con
	   texto charcoal (method-es.css) y la tarjeta salía en oscuro.
	   Los dos doctores se quedan en violeta: ver .coipm-person__txt. */
	color: var(--coip-cream);
}

.coipm-autores__card .coipm-h2 {
	margin-bottom: 23px;
}

.coipm-autores__people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 23px;
}

.coipm-person {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.coipm-person img {
	flex: none;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--coip-violet);
	object-fit: cover;
}

.coipm-person__txt {
	display: block;
	padding-top: 12px;
	color: var(--coip-violet);
}

.coipm-person__name {
	display: block;
	font-size: var(--coipm-fs-md);
	font-weight: 700;
	line-height: var(--coipm-lh-md);
}

.coipm-person__role {
	display: block;
	margin-top: 5px;
	font-size: var(--coipm-fs-sm);
	font-weight: 400;
	line-height: var(--coipm-lh-sm);
}

.coipm-autores__card .coipm-cta {
	margin-top: 40px;
}

/* -------------------------------------------------------------------------
   6. "¿Qué incluye COIP Method?" (blanco)
   ---------------------------------------------------------------------- */

.coipm-incluye {
	padding-block: 100px;
	background: var(--coip-white);
	color: var(--coip-charcoal);
}

.coipm-incluye .coipm-h2 {
	margin-bottom: 40px;
}

.coipm-feats {
	display: grid;
	gap: 20px;
}

.coipm-feat {
	padding: 23px 24px;
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius);
	transition: translate var(--coip-dur) var(--coip-ease-suave),
		box-shadow var(--coip-dur) var(--coip-ease-suave);
}

/* Gesto 1 (elevar): aquí la ficha vive sobre blanco, así que la sombra sí se
   ve y la elevación se lee entera. Sin scale(), como siempre que hay texto
   dentro. */
@media (hover: hover) and (pointer: fine) {
	.coipm-feat:hover {
		/* `translate` y no `transform`: GSAP deja un transform EN LÍNEA sobre
		   todo lo que anima anim.js, y el estilo en línea gana a la hoja. La
		   propiedad individual se compone con él en vez de pelearse con él.
		   Ver el LENGUAJE DE HOVER de base.css. */
		translate: 0 var(--coip-lift);
		box-shadow: var(--coip-shadow-lift);
	}
}

/* El alto de la fila lo marca el título: el icono se centra sobre él y
   desborda, igual que en el artboard. */
.coipm-feat__head {
	display: flex;
	align-items: center;
	position: relative;
	height: var(--coipm-lh-md);
	padding-left: 55px;
	margin-bottom: 20px;
}

.coipm-feat__ic {
	position: absolute;
	left: 0;
	top: 50%;
	display: flex;
	align-items: center;
	width: 40px;
	transform: translateY(-50%);
}

.coipm-feat h3 {
	font-size: var(--coipm-fs-md);
	font-weight: 700;
	line-height: var(--coipm-lh-md);
	text-transform: uppercase;
}

.coipm-feat p {
	font-size: var(--coipm-fs-sm);
	font-weight: 400;
	line-height: var(--coipm-lh-sm);
}

.coipm-feat p + p {
	margin-top: var(--coipm-lh-sm);
}

.coipm-feat strong {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   7. "Una inversión en tu criterio clínico" (lila)
   ---------------------------------------------------------------------- */

.coipm-inversion {
	padding-block: 100px;
	background: var(--coip-lilac);
	color: var(--coip-cream);
}

.coipm-inversion .coipm-h2 {
	margin-bottom: 20px;
}

.coipm-inversion .coipm-quote {
	margin-top: 20px;
}

/* -------------------------------------------------------------------------
   8. Preguntas frecuentes (blanco)
   ---------------------------------------------------------------------- */

.coipm-faq {
	padding-block: 100px;
	background: var(--coip-white);
	color: var(--coip-charcoal);
}

.coipm-faq .coipm-h2 {
	margin-bottom: 40px;
}

.coipm-faq__list {
	display: grid;
	gap: 20px;
}

.coipm-faq__item {
	background: var(--coip-white);
	border: 1px solid var(--coip-charcoal);
	border-radius: var(--coip-radius);
}

/* Mientras assets/js/ui.js lleva el alto de cerrado a abierto, lo que aún no
   cabe se queda dentro en vez de asomar. */
.coipm-faq__item.is-animando {
	overflow: hidden;
}

/* El alto de 70 px del acordeón incluye el borde de 1 px. */
.coipm-faq__item > summary {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 68px;
	padding: 23px 60px 23px 23px;
	font-size: var(--coipm-fs-md);
	font-weight: 700;
	line-height: var(--coipm-lh-md);
	cursor: pointer;
	list-style: none;

	/* El relleno del hover tiene que respetar el redondeo de la ficha; si no,
	   asoma un rectángulo por las esquinas. Un píxel menos que el radio de la
	   ficha, que es lo que le quita su trazo de 1 px por dentro. */
	border-radius: calc(var(--coip-radius) - 1px);
	transition: background-color var(--coip-dur-rapida) var(--coip-ease);
}

/* Sin gesto de ratón a propósito: la fila no lleva relleno ni sombra al
   pasar por encima. Se mantiene sólo el aviso a teclado, que es el único
   que no tiene otra forma de saber que la fila es interactiva. */
.coipm-faq__item > summary:focus-visible {
	background: var(--coip-cream);
}

/* Abierta, la fila deja de ser el final de la ficha: sus esquinas de abajo
   se cuadran para no dejar un escalón sobre la respuesta. */
.coipm-faq__item[open] > summary {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.coipm-faq__item > summary::-webkit-details-marker {
	display: none;
}

/* El signo son dos barras cruzadas. Se mueve una sola: la vertical gira un
   cuarto de vuelta y se acuesta sobre la horizontal, así que el «+» se
   convierte en «−». Es el mismo gesto en los cuatro acordeones del sitio
   (aquí, PRO, el programa de curso y el aviso legal) y el que ya dibujaba el
   programa: una pieza en movimiento, el mismo tiempo que el alto de la ficha
   y ningún giro que sobre. */
.coipm-faq__item > summary::before,
.coipm-faq__item > summary::after {
	content: "";
	position: absolute;
	right: 23.5px;
	top: 50%;
	background: var(--coip-charcoal);
	border-radius: 1px;
	transform-origin: center;
}

.coipm-faq__item > summary::before {
	width: 13.87px;
	height: 2px;
	margin: -1px -6.935px 0 0;
}

.coipm-faq__item > summary::after {
	width: 2px;
	height: 13.87px;
	margin: -6.935px -1px 0 0;
	transition: transform var(--coip-dur) var(--coip-ease);
}

.coipm-faq__item[open] > summary::after {
	transform: rotate(90deg);
}

.coipm-faq__a {
	padding: 0 24px 24px;
	font-size: var(--coipm-fs-sm);
	font-weight: 400;
	line-height: var(--coipm-lh-sm);

	/* La respuesta entra detrás del alto, no a la vez: así no se lee un
	   párrafo aplastado mientras la tarjeta todavía crece. */
	animation: coipm-faq-entra var(--coip-dur) var(--coip-ease) both;
}

@keyframes coipm-faq-entra {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* La respuesta va en redonda; lo que el texto marque en negrita se queda en
   semibold, que es el resaltado del sitio. */
.coipm-faq__a strong,
.coipm-faq__a b {
	font-weight: 600;
}

.coipm-faq__a p + p {
	margin-top: var(--coipm-lh-sm);
}

/* -------------------------------------------------------------------------
   9. Cierre (banda negra)
   ---------------------------------------------------------------------- */

.coipm-cierre {
	padding-block: 100px 332px;
	background: var(--coip-ink);
	color: var(--coip-cream);
}

.coipm-cierre .coipm-h2 {
	margin-bottom: 20px;
}

.coipm-cierre__brand {
	margin-top: 40px;
	font-size: var(--coipm-fs-h1);
	font-weight: 900;
	line-height: var(--coipm-lh-h1);
}

.coipm-cierre__terms {
	margin-top: 20px;
}

.coipm-cierre__price {
	margin-top: 20px;
	font-size: var(--coipm-fs-price);
	font-weight: 700;
	line-height: var(--coipm-lh-price);
}

/* -------------------------------------------------------------------------
   Breakpoints. El diseño sólo existe a 1920: por debajo el contenedor se
   comprime y, a partir de 1024, la tarjeta de compra deja de ser pegajosa
   y pasa a ocupar el ancho completo justo debajo del hero.
   ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.coipm {
		--coipm-fs-h1: 44px;
		--coipm-lh-h1: 53px;
		--coipm-fs-h2: 36px;
		--coipm-lh-h2: 43px;
		--coipm-fs-lead: 27px;
		--coipm-lh-lead: 32px;
		--coipm-fs-quote: 24px;
		--coipm-lh-quote: 29px;
	}

	.coipm-cierre {
		padding-bottom: 200px;
	}
}

@media (max-width: 1023px) {
	.coipm {
		--coipm-col: 100%;
		--coipm-aside: 100%;
		--coipm-fs-h1: 38px;
		--coipm-lh-h1: 46px;
		--coipm-fs-h2: 32px;
		--coipm-lh-h2: 38px;
		--coipm-fs-lead: 24px;
		--coipm-lh-lead: 29px;
		--coipm-fs-quote: 22px;
		--coipm-lh-quote: 26px;
		--coipm-fs-body: 19px;
		--coipm-lh-body: 23px;
	}

	/* La tarjeta deja de ser pegajosa y cae justo debajo del hero, sobre
	   una prolongación de la banda lila. */
	.coipm__rail {
		position: static;
		padding-top: 0;
		padding-bottom: 60px;
		background: var(--coip-lilac);
		pointer-events: auto;
	}

	.coipm__buy {
		position: static;
		width: 100%;
		max-width: 448px;
		margin-inline: auto;
		max-height: none;
		overflow: visible;
	}

	.coipm-hero {
		padding-bottom: 50px;
	}

	.coipm-benefits__grid,
	.coipm-conseguir__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.coipm-conseguir__grid {
		grid-template-rows: none;
		row-gap: 30px;
	}

	.coipm-bcard {
		height: auto;
	}

	.coipm-autores__people {
		gap: 24px;
	}

	.coipm-cierre {
		padding-bottom: 100px;
	}
}

@media (max-width: 767px) {
	.coipm {
		--coipm-fs-h1: 32px;
		--coipm-lh-h1: 38px;
		--coipm-fs-h2: 28px;
		--coipm-lh-h2: 34px;
		--coipm-fs-lead: 24px;
		--coipm-lh-lead: 29px;
		--coipm-fs-quote: 20px;
		--coipm-lh-quote: 24px;
		--coipm-fs-body: 18px;
		--coipm-lh-body: 22px;
		--coipm-fs-price: 26px;
		--coipm-lh-price: 31px;
	}

	.coipm-hero,
	.coipm-benefits,
	.coipm-dominar,
	.coipm-conseguir,
	.coipm-incluye,
	.coipm-inversion,
	.coipm-faq,
	.coipm-cierre {
		padding-block: 60px;
	}

	.coipm-autores {
		padding-bottom: 60px;
	}

	/* Los cinco recuadros de beneficios se apilan desde los 1023 px, pero
	   estirados al ancho entero dejaban de leerse como tarjetas. Aquí
	   recuperan la huella del diseño —300 px de ancho por 206 de alto— y se
	   centran en la columna. El alto va como min-height y no como height
	   porque en móvil el texto ocupa más líneas que en el artboard. */
	.coipm-benefits__grid {
		max-width: var(--coip-caja-movil);
		margin-inline: auto;
	}

	.coipm-bcard {
		min-height: 206px;
	}

	.coipm-fcard {
		padding: 28px 24px;
	}

	.coipm-hero__ctas .coipm-cta {
		width: 100%;
	}

	.coipm-fcard__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.coipm-fcard__title {
		font-size: 24px;
		line-height: 29px;
	}

	.coipm-autores__people {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En móvil la tarjeta deja de pisar la sección anterior: con una sola
	   columna, el solape de -41px del diseño de escritorio la dejaba pegada al
	   último párrafo de arriba. Sin él, la separación vuelve a ser la misma
	   que entre el resto de bandas (60px). */
	.coipm .coipm-autores__card {
		margin-top: 0;
		padding: 28px 24px;
	}

	.coipm-cierre__brand {
		font-size: var(--coipm-fs-h1);
		line-height: var(--coipm-lh-h1);
	}
}

@media (max-width: 479px) {
	.coipm {
		--coipm-fs-h1: 28px;
		--coipm-lh-h1: 34px;
		--coipm-fs-h2: 24px;
		--coipm-lh-h2: 29px;
	}

	.coipm__buy {
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coipm-cta,
	.coipm-cta .wp-block-button__link,
	.coipm-faq__item > summary::before,
	.coipm-faq__item > summary::after {
		transition: none;
	}

	.coipm-faq__a {
		animation: none;
	}
}