.planes-page { padding: 2rem 0 4rem; }
.planes-page__head { text-align: center; max-width: 40rem; margin: 0 auto 2rem; }
.planes-page__campana { font-weight: 600; color: var(--accent); }

.planes-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	align-items: stretch;
}

.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.5rem;
	border: 1px solid var(--ink-faint);
	border-radius: 12px;
	background: color-mix(in srgb, var(--indigo) 8%, transparent);
	color: var(--ink);
}
.plan-card--lanzamiento { border-color: var(--accent); }
.plan-card__badge {
	align-self: flex-start;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--accent-pale);
	color: var(--ink);
	font-size: .8rem;
	font-weight: 600;
}
.plan-card__nombre { margin: 0; }
.plan-card__precio { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.plan-card__precio strong { font-size: 2rem; }
.plan-card__regular { color: var(--ink-soft); }
.plan-card__moneda { color: var(--ink-soft); font-size: .85rem; }
.plan-card__duracion { margin: 0; font-weight: 600; }
.plan-card__nota { margin: 0 0 auto; color: var(--ink-soft); }
.plan-card .button { margin-top: .75rem; text-align: center; }
.plan-card__login { text-align: center; font-size: .9rem; }

.pago-resumen { display: grid; grid-template-columns: 1fr; gap: .25rem; margin: 1rem 0; }
.pago-resumen dt { font-weight: 600; margin-top: .5rem; }
.pago-resumen dd { margin: 0; }
.pago-check { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; }
.pago-check input { margin-top: .25rem; }
.pago-nota { color: var(--ink-soft); }

/* Cupón en /pago/ */
.pago-cupon { margin: 1rem 0; }
.pago-cupon label { display: block; font-weight: 600; margin-bottom: .35rem; }
.pago-cupon__fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.pago-cupon__fila input { flex: 1 1 12rem; min-width: 0; text-transform: uppercase; }
.pago-cupon__ok { color: #166534; margin: .5rem 0 0; }
.pago-cupon__error { color: #991b1b; margin: .5rem 0 0; }

/* Resultado del pago: emoji decorativo (el estado va en el texto de abajo) */
/* Título, emoji y mensaje con la misma separación en todos los estados. */
.pago-resultado { display: flex; flex-direction: column; gap: var(--gap); margin-bottom: var(--gap); }
.pago-resultado > * { margin: 0; }
.pago-emoji { text-align: center; font-size: clamp(5rem, 22vw, 8.75rem); line-height: 1; }
.pago-emoji--festivo { animation: pago-emoji-rebote 1s cubic-bezier(.28, .84, .42, 1) both; }

@keyframes pago-emoji-rebote {
	0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
	50%  { transform: scale(1.35) rotate(10deg); opacity: 1; }
	70%  { transform: scale(.9) rotate(-4deg); }
	100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
	.pago-emoji--festivo { animation: none; }
}

/* Botón de pago: amarillo con letras índigo. */
@font-face {
	font-family: "Maven Pro";
	src: url("../fonts/MavenPro-VariableFont_wght.ttf") format("truetype");
	font-weight: 400 900;
	font-display: swap;
}

#pago-boton {
	--pago-fondo: #ffe600;
	--pago-texto: #2d3277;
	background: var(--pago-fondo);
	color: var(--pago-texto);
	border-color: var(--pago-fondo);
	font-family: "Maven Pro", var(--font-sans);
	font-weight: 700;
}

#pago-boton:hover:not(:disabled) {
	background: #f2db00;
	border-color: #f2db00;
	color: var(--pago-texto);
}

#pago-boton:focus-visible {
	outline: 3px solid var(--pago-texto);
	outline-offset: 3px;
}

#pago-boton:disabled {
	opacity: .65;
}

/* Separa "Volver a los planes" del botón de pago. */
.pago-volver { margin-top: 1.25rem; }

/* ---------- /pago/: selector de país y botón de PayPal ---------- */
.pago-pais {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.25rem;
}

.pago-pais__titulo {
	flex-basis: 100%;
	margin: 0;
	font-weight: 700;
}

.pago-pais .button { padding: .55rem 1.1rem; font-size: .95rem; }

/* Opción elegida: relleno de color de marca (no depende solo del borde). */
.pago-pais .button[aria-current="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.pago-paypal {
	margin: 1rem 0;
	min-height: 60px;
}

/* ---------- /pago/resultado/: acciones ----------
   Causa del rojo "solo en hover": .button--primary (main.css) está pensado para el hero
   rojo: fondo --paper y texto --accent, y recién en :hover/:focus-visible se rellena de
   rojo. Sobre la tarjeta clara el botón queda casi invisible. Aquí se redefine solo
   dentro de .pago-acciones (esta página); el resto del sitio no cambia. */
.pago-hasta { text-align: center; }

.pago-acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

.pago-acciones .button { text-align: center; }

/* Acción principal: rojo de marca y texto blanco siempre. */
.pago-acciones .button--primary {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.pago-acciones .button--primary:hover,
.pago-acciones .button--primary:focus-visible {
	background: color-mix(in srgb, var(--accent) 85%, #000);
	border-color: color-mix(in srgb, var(--accent) 85%, #000);
	color: #fff;
}

.pago-acciones .button:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* Acción secundaria: contorno neutro, para no competir con la principal. */
.pago-acciones .button--outline {
	background: transparent;
	color: var(--ink-soft);
	border-color: var(--ink-faint);
}

.pago-acciones .button--outline:hover,
.pago-acciones .button--outline:focus-visible {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

/* Móvil: uno debajo del otro, centrados y con el mismo ancho. */
@media (max-width: 36em) {
	.pago-acciones { flex-direction: column; }
	.pago-acciones .button { width: 100%; }
}


/* ---------- /planes/: selector de moneda (control segmentado) ---------- */
.planes-moneda {
	display: flex;
	justify-content: center;
	gap: .25rem;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1.75rem;
	padding: .25rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
}

.planes-moneda[hidden] { display: none; }

.planes-moneda__opcion {
	padding: .6rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ink-soft);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.planes-moneda__opcion:hover { color: var(--ink); }

/* Opción elegida: color de marca (no depende solo del borde ni del tono). */
.planes-moneda__opcion[aria-checked="true"] {
	background: var(--accent);
	color: #fff;
}

.planes-moneda__opcion:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

@media (max-width: 30em) {
	.planes-moneda { width: 100%; }
	.planes-moneda__opcion { flex: 1; padding-inline: .5rem; }
}

/* Precios y botones de cada moneda: se alterna con data-moneda (planes.js). */
[data-planes-moneda][data-moneda="cl"] [data-moneda-solo="otro"],
[data-planes-moneda][data-moneda="otro"] [data-moneda-solo="cl"] { display: none; }

.plan-card__acciones {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* "Próximamente": botón deshabilitado, sin efecto al pasar el mouse. */
.plan-card .button:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.plan-card .button--primary:disabled:hover {
	background: var(--paper);
	color: var(--accent);
	transform: none;
	box-shadow: none;
}

/* Pago de prueba: solo administración, discreto y debajo de los planes. */
.planes-prueba {
	max-width: 36rem;
	margin: 2.5rem auto 0;
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	text-align: center;
}

.planes-prueba h2 {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
}

.planes-prueba p {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--ink-soft);
}

/* Mercado Pago y Flow lado a lado; en móvil, uno bajo el otro. */
.pago-botones {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: flex-start;
}

.pago-botones > form {
	flex: 1 1 14rem;
}

.pago-botones .button {
	width: 100%;
	text-align: center;
}

/* Flow: verde de la marca con texto blanco. */
#flow-boton {
	background: #4c5501;
	border-color: #4c5501;
	color: #ffffff;
	font-weight: 700;
}

#flow-boton:hover,
#flow-boton:focus-visible {
	background: #3a4101;
	border-color: #3a4101;
	color: #ffffff;
}

#flow-boton:focus-visible {
	outline: 3px solid #4c5501;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.pago-botones {
		flex-direction: column;
		align-items: stretch;
	}

	.pago-botones > form {
		flex-basis: auto;
	}
}