/* =========================================================================
 * USAA Cursos — estilos de front
 * Alineado con el rebranding newusa24: Anton (títulos), Inter (texto),
 * naranja #f15529, verde #0C655C, radios de 32px, botones pill.
 * Todo va scopeado bajo .usaa-cursos para no afectar al resto del sitio.
 * ====================================================================== */

.usaa-cursos {
	--usaa-orange: #f15529;
	--usaa-green: #0c655c;
	--usaa-black: #000;
	--usaa-ink: #111;
	--usaa-muted: #5d5d5d;
	--usaa-line: #e6e6e6;
	--usaa-bg-soft: #f6f6f4;
	--usaa-white: #fff;
	--usaa-radius: 32px;
	--usaa-radius-sm: 18px;
	--usaa-accent: var(--usaa-orange);
	--usaa-gap: 24px;
	--usaa-font-head: "Anton", "Inter", system-ui, sans-serif;
	--usaa-font-body: "Inter", system-ui, -apple-system, sans-serif;

	font-family: var(--usaa-font-body);
	color: var(--usaa-ink);
	box-sizing: border-box;
}

.usaa-cursos *,
.usaa-cursos *::before,
.usaa-cursos *::after {
	box-sizing: border-box;
}

.usaa-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* ---------- Cabecera del catálogo ---------- */
.usaa-archive__head {
	text-align: center;
	padding: 100px 0 40px;
}

.usaa-archive__title {
	font-family: var(--usaa-font-head);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0.01em;
	font-size: clamp(40px, 7vw, 72px);
	margin: 0;
	color: var(--usaa-accent);
	text-transform: uppercase;
}

.usaa-archive__desc {
	max-width: 720px;
	margin: 14px auto 0;
	color: var(--usaa-muted);
	font-size: 18px;
}

/* ---------- Buscador + filtro ---------- */
.usaa-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	justify-content: center;
	margin: 8px auto 40px;
	max-width: 820px;
}

.usaa-search__field {
	flex: 1 1 320px;
	min-width: 0;
}

.usaa-search__field input[type="search"],
.usaa-search__filter select {
	width: 100%;
	height: 56px;
	border: 1px solid var(--usaa-line);
	border-radius: var(--usaa-radius);
	padding: 0 22px;
	font-family: var(--usaa-font-body);
	font-size: 16px;
	color: var(--usaa-ink);
	background: var(--usaa-white);
	transition: border-color .2s ease, box-shadow .2s ease;
	padding: 0 0 0 20px !important;
}

.usaa-search__field input[type="search"]:focus,
.usaa-search__filter select:focus {
	outline: none;
	border-color: var(--usaa-accent);
	box-shadow: 0 0 0 3px rgba(241, 85, 41, 0.18);
}

.usaa-search__filter {
	flex: 0 1 220px;
}

.usaa-search__filter select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	padding-right: 44px;
	cursor: pointer;
}

.usaa-search__submit {
	flex: 0 0 auto;
	height: 56px;
	padding: 0 32px;
	border: none;
	border-radius: var(--usaa-radius);
	background: var(--usaa-accent);
	color: var(--usaa-white);
	font-family: var(--usaa-font-body);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: transform .25s ease, filter .25s ease;
}

.usaa-search__submit:hover {
	transform: scale(1.06);
	filter: brightness(1.03);
}

.usaa-search__submit:focus-visible {
	outline: 3px solid var(--usaa-green);
	outline-offset: 2px;
}

/* ---------- Grid ---------- */
.usaa-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(3, 1fr);
}

.usaa-grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
.usaa-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.usaa-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.usaa-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.usaa-grid,
	.usaa-grid--cols-3,
	.usaa-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.usaa-grid,
	.usaa-grid--cols-2,
	.usaa-grid--cols-3,
	.usaa-grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ---------- Tarjeta de curso ---------- */
.usaa-card {
	display: flex;
	flex-direction: column;
	background: var(--usaa-white);
	border-radius: var(--usaa-radius);
	overflow: hidden;
	border: 1px solid var(--usaa-line);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
	transition: transform .3s ease, box-shadow .3s ease;
	height: 100%;
}

.usaa-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.usaa-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--usaa-bg-soft);
}

.usaa-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.usaa-card:hover .usaa-card__img {
	transform: scale(1.05);
}

.usaa-card__img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(241, 85, 41, 0.18), transparent 60%),
		radial-gradient(circle at 75% 70%, rgba(12, 101, 92, 0.18), transparent 60%),
		var(--usaa-bg-soft);
}

.usaa-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--usaa-white);
	color: var(--usaa-green);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.usaa-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px 26px;
	flex: 1 1 auto;
}

.usaa-card__title {
	margin: 0;
	font-family: var(--usaa-font-head);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: 0.01em;
	font-size: 26px;
	text-transform: uppercase!important;
}

.usaa-cursos .usaa-card__title,
.usaa-cursos h2.usaa-card__title {
	font-size: 32px !important;
	line-height: 1.1em !important;
	text-transform: uppercase;
	font-weight: normal !important;
	font-family: var(--usaa-font-head) !important;
	margin: 0;
}

.usaa-cursos .usaa-card__title a,
.usaa-cursos h2.usaa-card__title a {
	font-size: inherit !important;
	line-height: 1.1em !important;
	color: var(--usaa-green) !important;
	text-decoration: none;
	transition: color .2s ease;
}

.usaa-cursos .usaa-card__title a,
.usaa-cursos h2.usaa-card__title a {
	text-transform: uppercase !important;
	line-height: 1.1em !important;
}

.usaa-cursos .usaa-card__title a:hover {
	color: var(--usaa-accent) !important;
}

.usaa-card__subtitle {
	margin: 0;
	color: var(--usaa-muted);
	font-size: 15.5px;
	line-height: 1.45;
}

.usaa-card__meta {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.usaa-card__meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--usaa-ink);
}

.usaa-card__price {
	gap: 8px;
}

.usaa-card__price-label {
	color: var(--usaa-muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.usaa-card__price-value {
	font-weight: 800;
	font-size: 19px;
	color: var(--usaa-accent);
}

.usaa-card__work {
	color: var(--usaa-green);
	font-weight: 600;
}

.usaa-ico {
	flex: 0 0 auto;
	color: var(--usaa-accent);
}

.usaa-card__work .usaa-ico {
	color: var(--usaa-green);
}

.usaa-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin-top: auto;
	padding: 13px 26px;
	border-radius: var(--usaa-radius);
	background: var(--usaa-white);
	border: 1.5px solid var(--usaa-black);
	color: var(--usaa-black);
	font-family: var(--usaa-font-body);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}

.usaa-card__btn:hover {
	transform: scale(1.06);
	background: var(--usaa-accent);
	border-color: var(--usaa-accent);
	color: var(--usaa-white);
}

.usaa-card__btn:focus-visible {
	outline: 3px solid var(--usaa-green);
	outline-offset: 2px;
}

/* ---------- Paginación ---------- */
.usaa-pagination {
	margin: 44px 0 12px;
}

.usaa-pagination__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.usaa-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--usaa-line);
	background: var(--usaa-white);
	color: var(--usaa-ink);
	text-decoration: none;
	font-weight: 600;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.usaa-pagination__item .page-numbers:hover {
	border-color: var(--usaa-accent);
	color: var(--usaa-accent);
}

.usaa-pagination__item .page-numbers.current {
	background: var(--usaa-accent);
	border-color: var(--usaa-accent);
	color: var(--usaa-white);
}

.usaa-pagination__item .page-numbers.dots {
	border-color: transparent;
}

/* ---------- Estado vacío ---------- */
.usaa-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--usaa-muted);
	font-size: 18px;
}

.usaa-empty .usaa-card__btn {
	margin-top: 18px;
}

/* =========================================================================
 * Carrusel
 * ====================================================================== */
.usaa-carousel {
	position: relative;
	padding: 4px 60px 40px;
}

.usaa-carousel__viewport {
	overflow: hidden;
	width: 100%;
	/* Permite el scroll vertical y deja el gesto horizontal para el carrusel. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	cursor: grab;
}

.usaa-carousel.is-dragging .usaa-carousel__viewport {
	cursor: grabbing;
}

.usaa-carousel__track {
	display: flex;
	gap: var(--usaa-gap);
	will-change: transform;
	transition: transform .45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.usaa-carousel.is-dragging .usaa-carousel__track {
	transition: none;
}

.usaa-slide {
	flex: 0 0 auto;
	/* El ancho real lo fija el JS según las tarjetas visibles. */
	width: calc((100% - 2 * var(--usaa-gap)) / 3);
	min-width: 0;
}

.usaa-slide .usaa-card {
	height: 100%;
}

/* Flechas */
.usaa-carousel__nav {
	position: absolute;
	top: calc(50% - 18px);
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: var(--usaa-accent);
	color: var(--usaa-white);
	cursor: pointer;
	padding: 0;
	transition: transform .25s ease, opacity .25s ease, filter .25s ease;
	z-index: 2;
}

.usaa-carousel__nav:hover {
	transform: translateY(-50%) scale(1.12);
}

.usaa-carousel__nav:focus-visible {
	outline: 3px solid var(--usaa-green);
	outline-offset: 2px;
}

.usaa-carousel__prev { left: 0; }
.usaa-carousel__next { right: 0; }

.usaa-carousel__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	transform: translateY(-50%);
}

/* Puntos */
.usaa-carousel__dots {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.usaa-carousel__dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: none;
	padding: 0;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, width .2s ease;
}

.usaa-carousel__dot.is-active {
	background: var(--usaa-accent);
	width: 26px;
}

.usaa-carousel__dot:focus-visible {
	outline: 2px solid var(--usaa-green);
	outline-offset: 2px;
}

.usaa-carousel__notice {
	padding: 22px;
	border: 1px dashed var(--usaa-line);
	border-radius: var(--usaa-radius-sm);
	color: var(--usaa-muted);
	text-align: center;
}

/* Móvil: la tarjeta ocupa todo el ancho, así que las flechas bajan debajo */
@media (max-width: 600px) {
	.usaa-carousel {
		padding: 4px 0 68px;
	}

	.usaa-carousel__nav {
		top: auto;
		bottom: 0;
		transform: none;
	}

	.usaa-carousel__nav:hover {
		transform: scale(1.12);
	}

	.usaa-carousel__nav[disabled] {
		transform: none;
	}

	.usaa-carousel__prev {
		left: calc(50% - 56px);
		right: auto;
	}

	.usaa-carousel__next {
		left: calc(50% + 10px);
		right: auto;
	}

	.usaa-carousel__dots {
		bottom: 54px;
	}
}

/* =========================================================================
 * Ficha de curso (plantilla de respaldo)
 * ====================================================================== */
.usaa-single {
	padding: 100px 0;
	max-width: 860px;
	margin-inline: auto;
}

.usaa-single__head {
	text-align: center;
	margin-bottom: 26px;
}

.usaa-single__eyebrow {
	display: inline-block;
	color: var(--usaa-green);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 12px;
}

.usaa-single__title {
	font-family: var(--usaa-font-head);
	font-weight: 400;
	line-height: 1.03;
	font-size: clamp(34px, 6vw, 62px);
	margin: 0;
	color: var(--usaa-black);
	text-transform: uppercase;
}

.usaa-single__subtitle {
	margin: 14px auto 0;
	max-width: 640px;
	color: var(--usaa-muted);
	font-size: 19px;
}

.usaa-single__media {
	margin: 0 0 28px;
}

.usaa-single__img {
	width: 100%;
	height: auto;
	border-radius: var(--usaa-radius);
	display: block;
}

.usaa-single__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 34px;
}

.usaa-fact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--usaa-bg-soft);
	border-radius: var(--usaa-radius-sm);
	padding: 14px 22px;
	text-align: center;
	min-width: 120px;
}

.usaa-fact__label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--usaa-muted);
	margin-bottom: 4px;
}

.usaa-fact__value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 17px;
	color: var(--usaa-ink);
}

.usaa-fact--price .usaa-fact__value {
	color: var(--usaa-green);
}

.usaa-fact--work {
	background: rgba(12, 101, 92, 0.1);
}

.usaa-fact--work .usaa-fact__value {
	color: var(--usaa-green);
}

.usaa-single__content {
	font-size: 18px;
	line-height: 1.7;
	color: var(--usaa-ink);
}

.usaa-single__content h2,
.usaa-single__content h3 {
	font-family: var(--usaa-font-head);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.1;
}

.usaa-single__content a {
	color: var(--usaa-accent);
	text-decoration: underline;
}

/* ---------- Accesibilidad ---------- */
.usaa-cursos .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.usaa-card,
	.usaa-card__img,
	.usaa-card__btn,
	.usaa-search__submit,
	.usaa-carousel__track,
	.usaa-carousel__nav,
	.usaa-carousel__dot {
		transition: none !important;
	}
}

/* Anula el margen global de encabezados solo dentro del catálogo/ficha de cursos */
body.single.usaa-cursos-page h2.wgl-accordion_header,
body.single.usaa-cursos-page h2.wgl-accordion_header .wgl-accordion_title,
body.single.usaa-cursos-page h3.wgl-accordion_header,
body.single.usaa-cursos-page h3.wgl-accordion_header .wgl-accordion_title,
body.single.usaa-cursos-page h4.wgl-accordion_header,
body.single.usaa-cursos-page h4.wgl-accordion_header .wgl-accordion_title,
body.single.usaa-cursos-page h5.wgl-accordion_header,
body.single.usaa-cursos-page h5.wgl-accordion_header .wgl-accordion_title,
body.single.usaa-cursos-page h6.wgl-accordion_header,
body.single.usaa-cursos-page h6.wgl-accordion_header .wgl-accordion_title {
  margin: 0;
}
/* ===== Faldón sticky del curso ===== */
.usaa-faldon{position:fixed;left:0;right:0;bottom:0;z-index:9990;background:var(--usaa-orange,#f15529);color:#fff;transform:translateY(110%);transition:transform .35s ease;box-shadow:0 -6px 24px rgba(0,0,0,.15)}
.usaa-faldon.is-visible{transform:translateY(0)}
.usaa-faldon__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px 20px}
.usaa-faldon__title{font-family:'Anton',sans-serif;font-size:18px;line-height:1.1;text-transform:uppercase;flex:0 0 auto;max-width:260px}
.usaa-faldon__data{display:flex;gap:28px;flex:1 1 auto}
.usaa-faldon__item{display:flex;flex-direction:column}
.usaa-faldon__label{font-size:11px;text-transform:uppercase;opacity:.85;letter-spacing:.03em}
.usaa-faldon__value{font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px}
.usaa-faldon__cta{flex:0 0 auto;background:#fff;color:var(--usaa-orange,#f15529);font-weight:700;padding:12px 28px;border-radius:32px;text-decoration:none;transition:transform .2s ease;white-space:nowrap}
.usaa-faldon__cta:hover{transform:scale(1.1);color:var(--usaa-orange,#f15529)}
@media(max-width:900px){.usaa-faldon__inner{gap:14px;padding:10px 14px}.usaa-faldon__title{display:none}.usaa-faldon__data{gap:16px;overflow-x:auto}}
@media(max-width:600px){.usaa-faldon__data .usaa-faldon__item:nth-child(n+3){display:none}.usaa-faldon__cta{padding:10px 18px;font-size:14px}}

.usaa-fact--cta{
  flex:0 0 100% !important;        /* fila propia, ancho completo del bloque */
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  width:max-content !important;    /* el pill se ajusta al texto */
  max-width:max-content !important;
  margin:4px auto 0 !important;    /* auto = centrado horizontal real */
  padding:14px 40px 14px 65px;
  line-height:1;
  background:var(--usaa-orange,#f15529);
  color:#fff !important;
  font-family:'Anton',sans-serif;
  font-size:16px;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:32px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 18px rgba(241,85,41,.28);
}
.usaa-fact--cta:hover{ transform:scale(1.06); color:#fff !important; }

.usaa-faldon__item--work{
  justify-content:center;   /* centra vertical al no tener label */
}
.usaa-faldon__item--work .usaa-faldon__value{
  align-items:center;
}