/* =========================================================
   Tesis y Másters — Pago Online (backup estático)
   tienda.tesisymasters.es
   Paleta de marca: maroon #9E192E, azul oscuro #080E2C
   ========================================================= */

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background-color: #F4F6F9;
	color: #170F49;
}

a { color: #9E192E; text-decoration: none; }

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header — logo centrado */
.site-header {
	background: #ffffff;
	padding: 20px 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: center;
}
.site-header img { max-width: 190px; height: auto; }

/* Page title */
.page-title {
	text-align: center;
	font-weight: 700;
	font-size: 30px;
	color: #080E2C;
	margin: 36px 0 30px;
}

/* Layout: form + resumen */
.pago-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 60px;
}

.pago-card {
	flex: 2 1 480px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 9px 17px -6px rgba(8,15,52,0.10);
	padding: 36px;
}

.resumen-card {
	flex: 1 1 260px;
	background: #E1E1E0;
	border-radius: 24px;
	box-shadow: 0 9px 17px -6px rgba(8,15,52,0.10);
	padding: 28px;
}

.subtitulosWoompi {
	color: #000;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 14px;
}

.labelTienda {
	color: #170F49;
	font-size: 15px;
	font-weight: 600;
	margin: 18px 0 6px;
	display: flex;
}

.obligatorio { color: #a00; margin-left: 3px; }

.input-tienda {
	height: 46px;
	border-radius: 10px;
	background: rgba(225,225,224,0.5);
	border: none;
	width: 100%;
	padding-left: 14px;
	font-size: 15px;
	color: #000;
}
.input-tienda::placeholder { color: #AAAAAA; }
.input-tienda:focus { outline: 2px solid #9E192E; }

.row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 4px; }
.row > div { flex: 1 1 220px; min-width: 0; }

.precio-box { display: flex; gap: 8px; align-items: stretch; }
.precio {
	width: 46px;
	background: #EFF0F6;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: #170F49;
}

/* Método de pago (tarjeta de resumen) */
.resumen-title {
	font-weight: 700;
	font-size: 18px;
	color: #000;
	padding-bottom: 10px;
	border-bottom: 1px solid #cfd0da;
	margin-bottom: 18px;
}
.metodo-opcion {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	cursor: pointer;
}
.metodo-opcion input { width: 17px; height: 17px; accent-color: #9E192E; }
.metodo-opcion img { height: 20px; }
.metodo-opcion span { font-size: 15px; color: #000; }

.texto-resumen {
	font-size: 14px;
	font-weight: 600;
	color: #000;
	margin-top: 18px;
}
.medios-pago { display: flex; gap: 20px; align-items: center; margin-top: 14px; }
.medios-pago img { height: 28px; }

/* Legal + botón */
.legal-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 22px;
}
.legal-row input[type="checkbox"] {
	width: 17px; height: 17px; margin-top: 3px; accent-color: #9E192E;
}
.labelLegalesSite { font-size: 13px; color: #080E2C; }
.labelLegalesSite a { color: #9E192E; font-weight: 600; }

.btnTienda,
#btnFormWoompi {
	margin-top: 24px;
	width: 100%;
	background: #9E192E;
	color: #fff;
	border: none;
	border-radius: 5px;
	height: 50px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
}
#btnFormWoompi:hover:not(:disabled) { background: linear-gradient(180deg, #9E192E 0%, #500B16 100%); }
#btnFormWoompi:disabled { opacity: .55; cursor: not-allowed; }

/* Spinner de carga (CSS puro, sin dependencias externas) */
.spinner {
	width: 54px;
	height: 54px;
	margin: 0 auto;
	border: 5px solid #E1E1E0;
	border-top-color: #9E192E;
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}

#redireccionando {
	display: none;
	text-align: center;
	padding: 60px 0;
}
#redireccionando p { margin-top: 18px; font-size: 16px; color: #080E2C; }

/* Timeline "¿Qué sigue en tu proceso?" — página de gracias */
.gracias-hero {
	background: #080E2C;
	padding: 70px 20px 50px;
	text-align: center;
	color: #fff;
}
.gracias-hero h1 {
	font-size: 42px;
	font-weight: 800;
	margin: 0 0 14px;
}
.gracias-hero p {
	font-size: 20px;
	font-weight: 500;
	margin: 0;
	max-width: 560px;
	margin: 0 auto;
}

.proceso-section {
	background: #9E192E;
	padding: 50px 20px;
}
.proceso-section h2 {
	text-align: center;
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 34px;
}

.tm-track {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(140px, 1fr));
	gap: 22px;
	align-items: start;
}
.tm-line {
	position: absolute;
	left: 12%;
	top: 25px;
	height: 2px;
	background: #fff;
	z-index: 0;
	width: 75%;
}
.tm-step {
	position: relative;
	z-index: 1;
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 10px;
}
.tm-dot {
	color: #9E192E;
	background: #fff;
	border-radius: 50%;
	width: 37px;
	height: 37px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.tm-label {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}
.tm-step.is-active .tm-dot { background: #fff; color: #9E192E; box-shadow: 0 0 0 4px rgba(255,255,255,0.25); }

@media only screen and (max-width: 768px) {
	.tm-track { grid-template-columns: 1fr; gap: 12px; }
	.tm-line { display: none; }
	.tm-step { display: flex; align-items: center; gap: 14px; text-align: left; justify-items: start; }
	.gracias-hero h1 { font-size: 30px; }
	.gracias-hero p { font-size: 16px; }
}

/* Status hero (error) */
.status-hero {
	min-height: calc(100vh - 87px);
	padding: 80px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}
.status-hero h1 { color: #9E192E; font-size: 32px; font-weight: 800; margin: 0 0 10px; }
.status-hero .status-sub { color: #080E2C; font-size: 18px; margin: 0 0 30px; }
.status-hero .status-circle {
	width: 64px; height: 64px; border: 3px solid #9E192E; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 34px; color: #9E192E; font-size: 30px;
}
.status-hero .status-cta {
	display: inline-block; background: #9E192E; color: #fff;
	padding: 14px 34px; border-radius: 5px; font-weight: 700; font-size: 16px;
}
.status-hero .status-cta:hover { background: #080E2C; color: #fff; }

@media only screen and (max-width: 600px) {
	.pago-card { padding: 22px; }
	.resumen-card { padding: 22px; }
	.row { flex-direction: column; gap: 0; }
	.page-title { font-size: 22px; }
}