/* =========================================================================
   EFS Cursos — identidad visual
   Azul federal + ocre trigo + rojo tierra, sobre papel crudo.
   Tipografía: Barlow Condensed (titulares, estilo afiche) + Source Sans 3.
   Todo el CSS queda dentro de .efs-cursos-app / .efs-app para no
   interferir con el resto del theme de WordPress.
   ========================================================================= */

.efs-cursos-app {
	--efs-azul: #122544;
	--efs-azul-2: #1c3a63;
	--efs-ocre: #d99a2b;
	--efs-ocre-2: #b97e1c;
	--efs-rojo: #963527;
	--efs-papel: #f1ead9;
	--efs-papel-2: #e7dcc2;
	--efs-tinta: #1c1a15;
	--efs-tinta-suave: #4a4438;
	--efs-borde: rgba(18, 37, 68, 0.14);
	--efs-radio: 4px;
	--efs-fuente-titular: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--efs-fuente-cuerpo: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

	background: var(--efs-papel);
	color: var(--efs-tinta);
	font-family: var(--efs-fuente-cuerpo);
	line-height: 1.55;
}

.efs-app { overflow-x: hidden; }

.efs-app *, .efs-app *::before, .efs-app *::after { box-sizing: border-box; }

.efs-contenedor {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.efs-contenedor-angosto {
	max-width: 760px;
}

.efs-app h1, .efs-app h2, .efs-app h3 {
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--efs-azul);
	line-height: 1.05;
	margin: 0 0 0.5em;
}

.efs-app h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 700; }
.efs-app h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
.efs-app h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; }

.efs-eyebrow {
	display: inline-block;
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--efs-ocre-2);
	margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */
.efs-hero {
	background: radial-gradient(circle at 85% 20%, var(--efs-azul-2), var(--efs-azul) 65%);
	color: #f4f0e4;
	padding: 88px 0 76px;
	position: relative;
}

.efs-hero .efs-eyebrow { color: var(--efs-ocre); }

.efs-hero h1 { color: #fff; }

.efs-hero-bajada {
	font-size: 1.1rem;
	max-width: 46ch;
	color: rgba(244, 240, 228, 0.86);
	margin-bottom: 28px;
}

.efs-hero-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}

.efs-hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; }

.efs-hero-sello { display: flex; justify-content: center; }

.efs-sello {
	width: 148px;
	height: 148px;
	border-radius: 50%;
	border: 3px solid var(--efs-ocre);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	transform: rotate(-8deg);
}

.efs-sello::before {
	content: '';
	position: absolute;
	inset: 10px;
	border: 1px dashed rgba(217, 154, 43, 0.55);
	border-radius: 50%;
}

.efs-sello-num {
	font-family: var(--efs-fuente-titular);
	font-size: 3.2rem;
	font-weight: 700;
	color: var(--efs-ocre);
	line-height: 1;
}

.efs-sello-label {
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	color: #f4f0e4;
}

/* ---------------------------------------------------------------------
   Franja de datos (nivel / acceso / consultas / material)
   ------------------------------------------------------------------- */
.efs-franja-datos {
	background: var(--efs-ocre);
	color: var(--efs-azul);
}

.efs-franja-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.efs-franja-grid div {
	padding: 18px 20px;
	border-left: 1px solid rgba(18, 37, 68, 0.2);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.efs-franja-grid div:first-child { border-left: none; }

.efs-franja-grid strong {
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.95rem;
}

.efs-franja-grid span { font-size: 0.88rem; }

/* ---------------------------------------------------------------------
   Secciones generales
   ------------------------------------------------------------------- */
.efs-seccion { padding: 68px 0; }

.efs-seccion-bajada {
	max-width: 60ch;
	color: var(--efs-tinta-suave);
	margin-bottom: 36px;
}

.efs-subtitulo {
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--efs-azul);
	border-top: 2px solid var(--efs-azul);
	padding-top: 10px;
	margin: 40px 0 16px;
}

/* ---------------------------------------------------------------------
   Grilla de cursos
   ------------------------------------------------------------------- */
.efs-grilla-cursos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.efs-tarjeta-curso {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--efs-borde);
	border-radius: var(--efs-radio);
	padding: 22px 20px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.efs-tarjeta-curso:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(18, 37, 68, 0.12);
	border-color: var(--efs-ocre);
}

.efs-tarjeta-numero {
	font-family: var(--efs-fuente-titular);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--efs-papel-2);
	-webkit-text-stroke: 1.5px var(--efs-azul);
	line-height: 1;
	flex-shrink: 0;
}

.efs-tarjeta-cuerpo h3 {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.efs-tarjeta-cuerpo p {
	font-size: 0.92rem;
	color: var(--efs-tinta-suave);
	margin: 0 0 12px;
}

.efs-tarjeta-meta {
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.78rem;
	color: var(--efs-ocre-2);
}

/* ---------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------- */
.efs-boton, .efs-formulario button {
	display: inline-block;
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	font-size: 0.98rem;
	background: var(--efs-ocre);
	color: var(--efs-azul);
	border: none;
	padding: 13px 26px;
	border-radius: var(--efs-radio);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}

.efs-boton:hover, .efs-formulario button:hover { background: var(--efs-ocre-2); color: #fff; }

.efs-boton-fantasma {
	background: transparent;
	color: #f4f0e4;
	border: 1px solid rgba(244, 240, 228, 0.5);
}

.efs-boton-fantasma:hover { background: rgba(244, 240, 228, 0.1); color: #fff; }

.efs-boton-secundario { background: var(--efs-azul); color: #fff; }
.efs-boton-secundario:hover { background: var(--efs-azul-2); }

.efs-boton-chico {
	font-size: 0.78rem;
	padding: 7px 14px;
	background: var(--efs-ocre);
	color: var(--efs-azul);
	border-radius: var(--efs-radio);
	text-decoration: none;
	margin-left: 10px;
}

/* ---------------------------------------------------------------------
   Sección de inscripción / formularios
   ------------------------------------------------------------------- */
.efs-seccion-inscripcion { background: var(--efs-papel-2); }

.efs-inscripcion-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 48px;
	align-items: start;
}

.efs-inscripcion-texto p { color: var(--efs-tinta-suave); }

.efs-inscripcion-formularios {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.efs-formulario-caja {
	background: #fff;
	border: 1px solid var(--efs-borde);
	border-radius: var(--efs-radio);
	padding: 24px;
}

.efs-formulario-caja h3 { margin-bottom: 6px; }

.efs-formulario-ayuda {
	font-size: 0.88rem;
	color: var(--efs-tinta-suave);
	margin-bottom: 16px;
}

.efs-formulario { display: flex; flex-direction: column; gap: 4px; }

.efs-formulario label {
	font-size: 0.8rem;
	font-weight: 600;
	margin-top: 10px;
	color: var(--efs-tinta-suave);
}

.efs-formulario input {
	padding: 10px 12px;
	border: 1px solid var(--efs-borde);
	border-radius: var(--efs-radio);
	font-family: var(--efs-fuente-cuerpo);
	font-size: 0.95rem;
}

.efs-formulario input:focus, .efs-app a:focus-visible, .efs-app button:focus-visible {
	outline: 2px solid var(--efs-azul);
	outline-offset: 2px;
}

.efs-formulario button { margin-top: 18px; }

.efs-formulario-error {
	background: #fbeae7;
	border: 1px solid var(--efs-rojo);
	color: var(--efs-rojo);
	padding: 10px 12px;
	border-radius: var(--efs-radio);
	font-size: 0.88rem;
	margin-bottom: 14px;
}

.efs-formulario-ok {
	background: #e9f3e6;
	border: 1px solid #3e7d32;
	color: #3e7d32;
	padding: 10px 12px;
	border-radius: var(--efs-radio);
	font-size: 0.88rem;
	margin-bottom: 14px;
}

/* Estado de cuenta (shortcode [efs_cuenta]) */
.efs-cuenta { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.efs-cuenta a { color: var(--efs-azul); text-decoration: none; }
.efs-cuenta a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Curso individual — lista de clases
   ------------------------------------------------------------------- */
.efs-hero-curso .efs-hero-bajada p { margin: 0; }

.efs-lista-clases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.efs-item-clase a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--efs-borde);
	border-radius: var(--efs-radio);
	padding: 16px 20px;
	text-decoration: none;
	color: var(--efs-tinta);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.efs-item-clase a:hover { border-color: var(--efs-ocre); background: #fffdf8; }

.efs-item-clase-num {
	font-family: var(--efs-fuente-titular);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--efs-ocre-2);
}

.efs-item-clase-titulo { font-weight: 600; }

.efs-item-clase-estado {
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--efs-tinta-suave);
}

.efs-item-clase.efs-bloqueada .efs-item-clase-estado { color: var(--efs-rojo); }

.efs-seccion-volver { padding: 0 0 60px; }
.efs-volver { color: var(--efs-azul); text-decoration: none; font-weight: 600; }
.efs-volver:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Clase individual
   ------------------------------------------------------------------- */
.efs-migas { padding: 22px 0 0; }
.efs-migas a { color: var(--efs-tinta-suave); text-decoration: none; font-size: 0.9rem; }
.efs-migas a:hover { color: var(--efs-azul); }

.efs-seccion-clase { padding-top: 20px; }

.efs-video-envoltorio {
	position: relative;
	padding-top: 56.25%;
	margin: 24px 0;
	background: var(--efs-azul);
	border-radius: var(--efs-radio);
	overflow: hidden;
}

.efs-video-envoltorio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.efs-contenido-clase { font-size: 1.03rem; color: var(--efs-tinta); }
.efs-contenido-clase p { margin: 0 0 1.1em; }

.efs-materiales { margin-top: 12px; }
.efs-lista-materiales { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.efs-lista-materiales a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--efs-azul);
	text-decoration: none;
	background: var(--efs-papel-2);
	padding: 10px 14px;
	border-radius: var(--efs-radio);
	font-weight: 600;
	font-size: 0.92rem;
}
.efs-lista-materiales a:hover { background: var(--efs-ocre); }
.efs-icono-doc { font-weight: 700; }

.efs-navegacion-clases {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--efs-borde);
}

.efs-nav-clase { color: var(--efs-azul); text-decoration: none; font-weight: 600; }
.efs-nav-clase:hover { text-decoration: underline; }

/* Muro de inscripción (contenido bloqueado) */
.efs-anticipo { color: var(--efs-tinta-suave); font-size: 1.02rem; }

.efs-muro {
	background: var(--efs-azul);
	color: #f4f0e4;
	border-radius: var(--efs-radio);
	padding: 32px 28px;
	margin-top: 20px;
}

.efs-muro-titulo {
	font-family: var(--efs-fuente-titular);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.2rem;
	color: var(--efs-ocre);
	margin: 0 0 8px;
}

.efs-muro p:not(.efs-muro-titulo) { color: rgba(244, 240, 228, 0.85); margin-bottom: 18px; }

/* Consultas (comentarios nativos de WP) */
.efs-consultas { margin-top: 10px; }
.efs-consultas-bloqueadas {
	background: var(--efs-papel-2);
	border-radius: var(--efs-radio);
	padding: 18px 20px;
	font-size: 0.92rem;
}

.efs-consultas .comment-form input[type="text"],
.efs-consultas .comment-form input[type="email"],
.efs-consultas .comment-form input[type="url"],
.efs-consultas .comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--efs-borde);
	border-radius: var(--efs-radio);
	font-family: var(--efs-fuente-cuerpo);
	margin-bottom: 12px;
}

.efs-consultas .comment-form-cookies-consent { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; }
.efs-consultas .comment-reply-title { font-family: var(--efs-fuente-titular); text-transform: uppercase; color: var(--efs-azul); }
.efs-consultas ol.comment-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.efs-consultas .comment-body { background: #fff; border: 1px solid var(--efs-borde); border-radius: var(--efs-radio); padding: 16px 18px; }
.efs-consultas .comment-author .fn { font-weight: 700; font-style: normal; color: var(--efs-azul); }
.efs-consultas .comment-metadata { font-size: 0.78rem; color: var(--efs-tinta-suave); margin-bottom: 6px; }
.efs-consultas .comment-metadata a { color: inherit; }

/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width: 880px) {
	.efs-hero-grid { grid-template-columns: 1fr; }
	.efs-hero-sello { justify-content: flex-start; }
	.efs-franja-grid { grid-template-columns: repeat(2, 1fr); }
	.efs-franja-grid div:nth-child(3) { border-left: none; }
	.efs-grilla-cursos { grid-template-columns: repeat(2, 1fr); }
	.efs-inscripcion-grid { grid-template-columns: 1fr; }
	.efs-inscripcion-formularios { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.efs-grilla-cursos { grid-template-columns: 1fr; }
	.efs-franja-grid { grid-template-columns: 1fr; }
	.efs-franja-grid div { border-left: none; border-top: 1px solid rgba(18, 37, 68, 0.2); }
	.efs-franja-grid div:first-child { border-top: none; }
	.efs-item-clase a { grid-template-columns: auto 1fr; }
	.efs-item-clase-estado { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.efs-tarjeta-curso, .efs-item-clase a { transition: none; }
}