/*
  Quiero ser miembro de RIAL.

  Página clara (decisión de la directora, 26/09/2026; en Wix era oscura).
  Tres partes: la cabecera con las dos credenciales y la franja de
  "Membresía sin costo", las dos membresías y el formulario de solicitud,
  que va en la página y no en una ventana emergente.

  El diseño es el boceto aprobado, no un mockup: no hay medidas que calcar.
  Los títulos usan las escalas del resto del sitio (el del Home para el h1,
  el de Encuentros para los h2) y los textos de cuerpo, tamaño fijo.

  La membresía elegida en el formulario se lee con :has() sobre el botón de
  radio `tipo`: así la ficha cambia de credencial y de etiquetas sin
  JavaScript. Todo lo que es de una sola membresía lleva data-solo.
*/

.membresia-pildora {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding-inline: 14px;
	border-radius: var(--radius-pill);
	background-color: var(--hover-cyan);
	color: var(--text-1);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- Cabecera ---------- */

.membresia-cabecera {
	position: relative;
	isolation: isolate; /* el resplandor va detrás del contenido, no detrás de la página */
	padding-bottom: 5rem;
}

/* El resplandor detrás de las credenciales: a lo ancho de la pantalla y por detrás de todo. */
.membresia-cabecera::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -4rem calc(50% - 50vw) 0;
	background: radial-gradient(38rem 26rem at 78% 42%, rgba(11, 129, 170, 0.16), transparent 70%);
	pointer-events: none;
}

.membresia-cabecera__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 3rem;
	align-items: center;
	min-height: 520px;
}

.membresia-cabecera__titulo {
	margin-top: 1.25rem;
	font-size: clamp(2.2rem, 4.89vw, 4.4rem);
	line-height: 1.15;
	text-wrap: wrap;
}

.membresia-cabecera__subtitulo {
	margin-top: 0.5rem;
	color: var(--cta);
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	font-weight: 600;
}

.membresia-cabecera__bajada {
	max-width: 30rem;
	margin-top: 1.25rem;
}

.membresia-cabecera__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.membresia-cabecera__credenciales {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 600px;
	aspect-ratio: 1.45;
}

.membresia-cabecera__credenciales img {
	position: absolute;
	width: 74%;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(10, 14, 34, 0.28), 0 2px 6px rgba(10, 14, 34, 0.12);
}

.membresia-cabecera__credenciales img:first-child {
	top: 0;
	left: 0;
}

.membresia-cabecera__credenciales img:last-child {
	right: 0;
	bottom: 0;
}

/* ---------- Franja: sin costo y las cifras ---------- */

.membresia-franja {
	display: grid;
	grid-template-columns: 1.35fr;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin-top: clamp(3rem, 5.3vw, 5rem);
	border-radius: 20px;
	background-color: var(--bg-white);
	box-shadow: var(--sombra-tarjeta-clara);
}

/* Cada grupo de texto, centrado en el alto de la franja. */
.membresia-franja > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.6rem 2rem;
}

.membresia-franja > div + div {
	border-left: 1px solid rgba(10, 14, 34, 0.1);
}

.membresia-franja > .membresia-franja__gratis {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.membresia-franja__sello {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--bg-dark);
	color: var(--text-1);
}

.membresia-franja__sello svg {
	width: 24px;
}

.membresia-franja__valor {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
}

.membresia-franja__gratis .membresia-franja__valor {
	font-size: 1.5rem;
}

.membresia-franja__etiqueta {
	margin-top: 0.35rem;
	color: var(--text-4);
	font-size: 0.85rem;
	line-height: 1.5;
}

/* ---------- Encabezados de sección ---------- */

.membresia-encabezado {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

.membresia-encabezado__titulo {
	margin-top: 1rem;
	font-size: clamp(1.75rem, 2.83vw, 2.55rem);
	font-weight: 600;
}

.membresia-encabezado__bajada {
	margin-top: 0.75rem;
}

/* ---------- Las dos membresías ---------- */

.membresia-planes {
	padding-block: 7rem 6rem;
}

.membresia-planes__rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1180px;
	margin: 3.5rem auto 0;
}

.membresia-plan {
	display: flex;
	flex-direction: column;
	padding: 2.5rem;
	border-radius: 20px;
	background-color: var(--bg-white);
	box-shadow: var(--sombra-tarjeta-clara);
}

.membresia-plan__cabeza {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}

.membresia-plan__para {
	color: var(--cta);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.membresia-plan__titulo {
	margin-top: 0.35rem;
	font-size: 1.85rem;
}

.membresia-plan__credencial {
	flex: none;
	width: 118px;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(10, 14, 34, 0.22);
}

.membresia-plan__precio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-block: 1rem;
	border-block: 1px solid rgba(10, 14, 34, 0.1);
}

.membresia-plan__precio strong {
	font-size: 1.6rem;
}

.membresia-plan__precio span {
	color: var(--text-4);
	font-size: 0.85rem;
}

.membresia-plan__descripcion {
	margin-top: 1.25rem;
	font-size: 0.95rem;
}

.membresia-plan__subtitulo {
	margin-top: 1.5rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.membresia-plan__beneficios {
	display: grid;
	gap: 0.6rem;
	margin: 0.75rem 0 2rem;
	padding: 0;
	list-style: none;
}

.membresia-plan__beneficios li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0.65rem;
	font-size: 0.92rem;
	line-height: 1.45;
}

.membresia-plan__beneficios .icono-check {
	width: 18px;
	margin-top: 2px;
	color: var(--cta);
}

/* El botón, siempre al pie de la tarjeta: las dos terminan a la misma altura. */
.membresia-plan__boton {
	width: 100%;
	margin-top: auto;
}

/* ---------- Registro ---------- */

.membresia-registro {
	padding-bottom: 7rem;
}

.membresia-selector {
	display: flex;
	width: fit-content;
	margin: 2.25rem auto 0;
	padding: 5px;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: #fff;
	box-shadow: var(--sombra-tarjeta-clara);
}

.membresia-selector__opcion {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding-inline: 1.5rem;
	border-radius: var(--radius-pill);
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.membresia-selector__opcion:has(input:checked) {
	background-color: var(--bg-dark);
	color: var(--text-1);
}

.membresia-selector__opcion:has(input:focus-visible) {
	outline: 2px solid var(--cta);
	outline-offset: 2px;
}

.membresia-selector__corto {
	display: none;
}

/* Lo que es de una sola membresía se esconde cuando está elegida la otra. */
.membresia-formulario:has(input[name="tipo"][value="honorario"]:checked) [data-solo="asociado"],
.membresia-formulario:has(input[name="tipo"][value="asociado"]:checked) [data-solo="honorario"] {
	display: none;
}

.membresia-ficha {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	max-width: 1180px;
	margin: 2.5rem auto 0;
	overflow: hidden;
	border-radius: 32px;
	background-color: var(--bg-white);
	box-shadow: var(--sombra-tarjeta-clara);
}

/* El panel de la izquierda: azul noche con el resplandor del color de la membresía. */
.membresia-ficha__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 560px;
	padding: 3rem 2.5rem;
	overflow: hidden;
	background-color: var(--bg-dark);
	color: var(--text-1);
}

.membresia-ficha__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(28rem 22rem at 70% 30%, rgba(44, 103, 151, 0.85), transparent 70%),
		radial-gradient(22rem 18rem at 15% 90%, rgba(11, 129, 170, 0.55), transparent 70%);
	transition: opacity 0.4s ease;
}

.membresia-formulario:has(input[name="tipo"][value="asociado"]:checked) .membresia-ficha__visual::before {
	background:
		radial-gradient(28rem 22rem at 70% 30%, rgba(165, 165, 165, 0.55), transparent 70%),
		radial-gradient(22rem 18rem at 15% 90%, rgba(220, 232, 255, 0.28), transparent 70%);
}

.membresia-ficha__credencial {
	position: relative;
	display: grid;
	justify-items: center;
	width: 100%;
	text-align: center;
}

.membresia-ficha__cartas {
	position: relative;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 1.3;
}

.membresia-ficha__cartas img {
	position: absolute;
	width: 82%;
	border-radius: 14px;
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
}

.membresia-ficha__reverso {
	top: 0;
	right: 0;
	transform: rotate(4deg);
}

.membresia-ficha__anverso {
	bottom: 0;
	left: 0;
	transform: rotate(-3deg);
}

.membresia-ficha__nombre {
	margin-top: 1rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.membresia-ficha__leyenda {
	max-width: 22rem;
	color: var(--text-3);
	font-size: 0.85rem;
	text-wrap: balance;
}

.membresia-ficha__panel {
	display: grid;
}

.membresia-ficha__campos {
	padding: 3.25rem 4rem 3rem;
}

.membresia-ficha__antetitulo {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.membresia-ficha__titulo {
	margin-top: 0.15rem;
	font-size: clamp(1.6rem, 2.2vw, 2rem);
}

.membresia-ficha__titulo span {
	color: var(--cta);
}

.membresia-ficha__intro {
	margin-top: 0.5rem;
	color: var(--text-4);
	font-size: 0.9rem;
}

.membresia-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
	margin-top: 1.75rem;
}

.membresia-campo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.membresia-campo--ancho {
	grid-column: 1 / -1;
}

.membresia-campo__etiqueta {
	font-size: 0.8rem;
	font-weight: 600;
}

.membresia-campo__etiqueta em {
	color: var(--text-4);
	font-style: normal;
	font-weight: 400;
}

/* Los campos del formulario de noviembre: borde azul noche de 1 px y radio de 8. */
.membresia-campo__control {
	width: 100%;
	height: 42px;
	padding-inline: 0.9rem;
	border: 1px solid var(--bg-dark);
	border-radius: 8px;
	background-color: #fff;
	color: var(--bg-dark);
	font-size: 0.92rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.membresia-campo__control {
	appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0E22' stroke-width='1.6'/%3E%3C/svg%3E");
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
}

.membresia-campo__control:focus {
	border-color: var(--cta);
	outline: none;
	box-shadow: 0 0 0 3px rgba(11, 129, 170, 0.18);
}

.membresia-campo__ayuda {
	color: var(--text-4);
	font-size: 0.75rem;
}

.membresia-consentimiento {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0.6rem;
	margin-top: 1.4rem;
	font-size: 0.8rem;
	line-height: 1.5;
	cursor: pointer;
}

.membresia-consentimiento input {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--bg-dark);
}

.membresia-formulario__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
}

.membresia-formulario__enviar {
	min-width: 190px;
}

/* Sobre fondo claro, el relleno se vuelve azul noche al pasar el cursor (el vacío blanco del botón base no se vería). */
.membresia-formulario__enviar:hover,
.membresia-formulario__enviar:focus-visible {
	border-color: var(--bg-dark);
	background-color: var(--bg-dark);
}

.membresia-formulario__enviar[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.membresia-formulario__nota {
	color: var(--text-4);
	font-size: 0.8rem;
}

.membresia-formulario__aviso {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background-color: #FCE8E8;
	color: #8A1C1C;
	font-size: 0.85rem;
}

/* El campo trampa: fuera de la pantalla, pero no con display: none, que algunos robots saltan. */
.membresia-formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* El aviso de gracias ocupa el lugar de los campos. */
.membresia-gracias {
	display: none;
	place-self: center;
	max-width: 30rem;
	padding: 4rem 2rem;
	text-align: center;
	outline: none;
}

.membresia-formulario.is-enviada .membresia-ficha__campos {
	display: none;
}

.membresia-formulario.is-enviada .membresia-gracias {
	display: block;
}

.membresia-gracias__icono {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-inline: auto;
	border-radius: 50%;
	background-color: var(--bg-dark);
	color: var(--text-1);
}

.membresia-gracias__icono .icono-check {
	width: 30px;
}

.membresia-gracias__titulo {
	margin-top: 1.25rem;
	font-size: 1.75rem;
}

.membresia-gracias__texto {
	margin-top: 0.75rem;
}

.membresia-pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1180px;
	margin: 4rem auto 0;
	padding: 0;
	list-style: none;
}

.membresia-paso {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 1rem;
}

.membresia-paso__numero {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bg-dark);
	border-radius: 50%;
	font-weight: 600;
}

.membresia-paso__titulo {
	font-size: 1rem;
	font-weight: 600;
}

.membresia-paso__texto {
	margin-top: 0.25rem;
	font-size: 0.88rem;
}

/* ---------- Hasta 1200 px: la franja y las cabezas de las tarjetas se apilan ---------- */

/*
  Entre 992 y 1200 la franja en fila partía "Membresía sin costo" en dos
  renglones y el texto en cinco. Se pasa al diseño apilado: el sello arriba,
  el texto centrado debajo y las tres cifras en una fila.
*/
@media (max-width: 1200px) {
	.membresia-franja {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-flow: row;
		text-align: center;
	}

	.membresia-franja > .membresia-franja__gratis {
		grid-column: 1 / -1;
		flex-direction: column;
		gap: 0.9rem;
		padding-block: 2rem;
		border-bottom: 1px solid rgba(10, 14, 34, 0.1);
	}

	.membresia-franja__gratis .membresia-franja__etiqueta {
		max-width: 26rem;
		margin-inline: auto;
		text-wrap: balance;
	}

	.membresia-franja > div:nth-child(2) {
		border-left: 0;
	}

	.membresia-plan__cabeza {
		flex-direction: column-reverse;
	}
}

/* ---------- Tablet (menú de hamburguesa): todo centrado ---------- */

@media (max-width: 991px) {
	.membresia-cabecera__rejilla {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
		min-height: 0;
		text-align: center;
	}

	/* Las credenciales, arriba del texto (decisión de la directora, 26/09/2026). */
	.membresia-cabecera__credenciales {
		grid-row: 1;
		justify-self: center;
		max-width: 420px;
		margin-top: 1.5rem;
	}

	.membresia-cabecera__bajada {
		margin-inline: auto;
	}

	.membresia-cabecera__botones {
		justify-content: center;
	}

	.membresia-planes__rejilla {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
	}

	.membresia-plan {
		text-align: center;
	}

	.membresia-plan__cabeza {
		align-items: center;
	}

	.membresia-plan__precio {
		justify-content: center;
	}

	.membresia-plan__beneficios {
		text-align: left;
	}

	.membresia-ficha {
		grid-template-columns: minmax(0, 1fr);
		max-width: 640px;
	}

	.membresia-ficha__visual {
		min-height: 0;
		padding: 2.5rem 2rem 2rem;
	}

	.membresia-ficha__cartas {
		max-width: 300px;
	}

	.membresia-ficha__campos {
		padding: 2.5rem 2rem;
		text-align: center;
	}

	.membresia-campos,
	.membresia-consentimiento {
		text-align: left;
	}

	.membresia-formulario__pie {
		justify-content: center;
	}

	.membresia-pasos {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}
}

/* ---------- Móvil horizontal ---------- */

@media (max-width: 767px) {
	.membresia-planes {
		padding-block: 5rem 4rem;
	}

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

	.membresia-franja > div + div {
		border-top: 1px solid rgba(10, 14, 34, 0.1);
		border-left: 0;
	}

	.membresia-franja > .membresia-franja__gratis {
		border-bottom: 0;
	}

	.membresia-selector__opcion {
		padding-inline: 1rem;
		font-size: 0.85rem;
	}
}

/* ---------- Móvil vertical ---------- */

@media (max-width: 479px) {
	.membresia-cabecera__botones {
		flex-direction: column;
		align-items: center;
	}

	.membresia-plan {
		padding: 2rem 1.4rem;
	}

	/* "Soy una institución / Soy profesional" no cabe en una fila: textos cortos. */
	.membresia-selector__largo {
		display: none;
	}

	.membresia-selector__corto {
		display: inline;
	}

	.membresia-selector__opcion {
		padding-inline: 1.4rem;
	}

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

	.membresia-ficha {
		border-radius: 18px;
	}

	.membresia-ficha__campos {
		padding: 2rem 1.25rem;
	}

	.membresia-formulario__enviar {
		width: 100%;
	}
}