/**
 * Estilos del curso "PAMA · Familias y Bañistas" (versión ciudadana) — v1.0.
 *
 * Cargado solo en el front-end de contenido LearnDash (sfwd-topic,
 * sfwd-lessons, sfwd-courses) mediante wp_enqueue_scripts condicional en
 * hsg-curso-pama-familias.php.
 *
 * Paleta corporativa HSG (Nexus/Hydra Teal):
 *   Acento teal      #01696F  (bordes, botones, títulos destacados)
 *   Acento dark teal #0C4E54  (fondo placeholder de vídeo, hover botones)
 *   Beige de fondo   #F7F6F2  (fondo cards / cajas suaves)
 *   Aviso            #964219  (naranja quemado, callout IMPORTANTE)
 *   Aviso fondo      #FFF8EC
 *   Texto            #28251D
 *   Muted            #7A7974
 *   Borde neutro     #D4D1CA
 */

/* -------------------------------------------------------------------
 * Placeholder de vídeo (bloque .hsg-fam-video-placeholder).
 * El HTML se genera inline en data/course-structure.php, pero se deja
 * también aquí una regla equivalente por si se usa la clase sin estilos
 * inline en contenido futuro.
 * ------------------------------------------------------------------- */
.hsg-fam-video-placeholder {
	background: #0C4E54;
	color: #F7F6F2;
	padding: 2em;
	text-align: center;
	border-radius: 8px;
	margin: 1em 0;
}

.hsg-fam-video-placeholder p {
	margin: 0 0 0.5em;
	color: #F7F6F2;
}

.hsg-fam-video-placeholder p:last-child {
	margin-bottom: 0;
	font-size: 0.95em;
	opacity: 0.8;
}

/* -------------------------------------------------------------------
 * Cards de "ideas clave".
 * ------------------------------------------------------------------- */
.hsg-fam-ideas-clave {
	margin: 1.75em 0;
	padding: 1.25em 1.5em;
	background: #F7F6F2;
	border: 1px solid #D4D1CA;
	border-left: 4px solid #01696F;
	border-radius: 8px;
	color: #28251D;
}

.hsg-fam-ideas-clave__titulo {
	margin: 0 0 0.6em;
	color: #01696F;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.hsg-fam-ideas-clave ul {
	margin: 0.4em 0 0 1.25em;
	padding: 0;
}

.hsg-fam-ideas-clave li {
	margin: 0.4em 0;
}

/* -------------------------------------------------------------------
 * Callout "IMPORTANTE" — prohibiciones (nunca vaciar pulmones, nunca
 * entrar al agua).
 * ------------------------------------------------------------------- */
.hsg-fam-callout {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border-left: 4px solid #964219;
	background: #FFF8EC;
	border-radius: 4px;
	color: #28251D;
}

.hsg-fam-callout p {
	margin: 0;
}

.hsg-fam-callout strong {
	color: #964219;
}

/* -------------------------------------------------------------------
 * Bloque doble CTA (.hsg-fam-cta-doble): particulares (aulaarroba.com)
 * vs. empresas/AAPP (formacion@rcpparatodos.es).
 * ------------------------------------------------------------------- */
.hsg-fam-cta-doble {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 2em 0;
}

.hsg-fam-cta-doble__item {
	flex: 1 1 260px;
	padding: 1.25em 1.5em;
	background: #01696F;
	color: #ffffff;
	border-radius: 8px;
}

.hsg-fam-cta-doble__item p {
	margin: 0 0 0.5em;
	color: #ffffff;
}

.hsg-fam-cta-doble__item p:last-child {
	margin-bottom: 0;
}

.hsg-fam-cta-doble__item a {
	color: #ffffff !important;
	text-decoration: underline;
	font-weight: 600;
}

.hsg-fam-cta-doble__item a:hover,
.hsg-fam-cta-doble__item a:focus {
	color: #F7F6F2 !important;
}

/* -------------------------------------------------------------------
 * Caja de descarga del manual PDF al final de cada lección.
 * ------------------------------------------------------------------- */
.hsg-fam-download-box {
	margin: 2em 0 1em;
	padding: 1.25em 1.5em;
	border-left: 4px solid #01696F;
	background: #E6F1F2;
	border-radius: 4px;
	color: #28251D;
}

.hsg-fam-download-box p {
	margin: 0 0 0.6em;
	color: #28251D;
}

.hsg-fam-download-box p:last-child {
	margin-bottom: 0;
}

.hsg-fam-download-box__btn {
	display: inline-block;
	padding: 0.6em 1.2em;
	background: #01696F;
	color: #ffffff !important;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
	transition: background-color 0.15s ease-in-out;
}

.hsg-fam-download-box__btn:hover,
.hsg-fam-download-box__btn:focus {
	background: #0C4E54;
	color: #ffffff !important;
	text-decoration: none;
}

/* Responsividad básica para móvil. */
@media (max-width: 640px) {
	.hsg-fam-cta-doble {
		flex-direction: column;
	}
}