/*
Theme Name:   GeneratePress Child - Slow Medicine Institute
Theme URI:    https://slowmedicineinstitute.com
Description:  Tema hijo de GeneratePress para Slow Medicine Institute. Todo el CSS y las
              personalizaciones propias van aquí, de modo que las actualizaciones de
              GeneratePress no las sobreescriban.
Author:       Slow Medicine Institute
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* -------------------------------------------------------------------------
   GeneratePress encola este fichero automáticamente después del CSS del padre
   (inc/general.php, handle "generate-child"), así que no hace falta un
   wp_enqueue_style en functions.php.

   Organización:
     1. Tokens del diseño de Figma (fichero «Slow Medicine»).
     2. Componentes compartidos: las piezas que Figma repite igual en varias
        páginas (botones, barra de datos, profesionales, testimonios, FAQ…).
        No llevan page-id: se declaran una vez y las páginas solo añaden sus
        diferencias.
     3. Cabecera y pie: GLOBALES, afectan a todo el sitio (rediseño aprobado).
     4. Lienzo de las páginas rediseñadas.
     5. Una sección por página rediseñada, acotada a body.page-id-XX, con lo
        que es exclusivo de esa página.
   ---------------------------------------------------------------------- */


/* =========================================================================
   1. TOKENS  ·  Figma «Slow Medicine» › HOMEPAGE (5:6)
   ====================================================================== */

:root {
	--sm-fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--sm-verde-btn:      #459d6a; /* botón primario */
	--sm-verde:          #5fb683; /* acento, eyebrows, bordes */
	--sm-verde-oscuro:   #2b8450; /* texto verde sobre fondo claro */
	--sm-verde-flecha:   #2e8c57; /* flecha activa del carrusel */
	--sm-verde-hero:     #235939; /* eyebrow del hero */
	--sm-fondo-verde:    #e7f1db; /* fondo de sección */
	--sm-fondo-verde-2:  #f4f9ee; /* fondo de la trust bar */
	--sm-fondo-gris:     #f6f6f6; /* fondo de sección (novedades) */
	--sm-chip:           #d5eab8; /* chips y avisos */

	--sm-tinta:          #212121;
	--sm-tinta-2:        #222222;
	--sm-tinta-3:        #232323;
	--sm-gris:           #6b6b70;
	--sm-gris-2:         #5b5b5b;
	--sm-gris-3:         #666666;

	--sm-borde:          #d6d6db;
	--sm-borde-2:        #dbdbe0;
	--sm-borde-3:        #e6e6e6;
	--sm-borde-nav:      #e0e0e5;

	--sm-naranja:        #ec9e50; /* lead magnet del ebook */
	--sm-naranja-fondo:  #faedd9;

	--sm-pie-fondo:      #1a1a1c;
	--sm-pie-texto:      #b2b2bd;
	--sm-pie-linea:      #424247;
	--sm-pie-legal:      #9e9ea8;

	--sm-r-boton:   8px;
	--sm-r-tarjeta: 14px;
	--sm-r-imagen:  10px;
	--sm-r-chip:    20px;

	--sm-ancho:     1440px; /* ancho del frame */
	--sm-margen:    60px;   /* margen lateral del frame */
	--sm-contenido: 1320px; /* 1440 - 60 - 60: la caja de contenido real */

	/* Los fondos de sección van a sangre, pero el contenido se queda centrado en
	   la caja de 1320px: en pantallas anchas se ve con las proporciones exactas
	   de Figma, y por debajo de 1440 se comporta como un margen de 60px. */
	--sm-padding-lateral: max(var(--sm-margen), calc((100% - var(--sm-contenido)) / 2));
}


/* =========================================================================
   2. COMPONENTES COMPARTIDOS
      Las piezas que Figma repite igual en varias páginas. Van sin page-id: se
      declaran una sola vez y cada página añade solo lo que cambia (un fondo,
      un ancho). Las clases .sm-* solo existen en las páginas rediseñadas, así
      que sacarlas del page-id no afecta al blog ni a las páginas antiguas.
   ====================================================================== */

/* --- 2.1 Botones ---------------------------------------------------------
   Un solo sitio donde se define cómo es y cómo se comporta un botón; la
   cabecera, el pie y las páginas rediseñadas solo aplican las clases.
   Figma no define estados: hover, foco y activo se resuelven aquí.
     · botón relleno  → se oscurece, el texto sigue blanco.
     · botón blanco   → fondo #E7F1DB, el texto sigue verde.
   ---------------------------------------------------------------------- */

.sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: var(--sm-r-boton);
	font-family: var(--sm-fuente);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

/* --- Relleno verde: el texto es blanco siempre --------------------------- */

.sm-btn--primario {
	border: 0;
	background-color: var(--sm-verde-btn);
	color: #fff;
}

.sm-btn--secundario-relleno {
	border: 1.5px solid var(--sm-verde);
	background-color: var(--sm-verde-btn);
	color: #fff;
}

.sm-btn--descarga {
	border: 0;
	background-color: var(--sm-verde);
	color: #fff;
}

.sm-btn--primario:hover,
.sm-btn--primario:focus,
.sm-btn--primario:active,
.sm-btn--secundario-relleno:hover,
.sm-btn--secundario-relleno:focus,
.sm-btn--secundario-relleno:active,
.sm-btn--descarga:hover,
.sm-btn--descarga:focus,
.sm-btn--descarga:active {
	background-color: var(--sm-verde-oscuro);
	color: #fff;
}

/* --- Blanco con borde verde: el texto es verde siempre ------------------- */

.sm-btn--secundario {
	border: 1.5px solid var(--sm-verde);
	background-color: #fff;
	color: var(--sm-verde);
}

.sm-btn--secundario:hover,
.sm-btn--secundario:focus,
.sm-btn--secundario:active {
	background-color: #e7f1db63;
	color: var(--sm-verde);
}

/* Variantes de color del secundario que sí trae el frame (mismo comportamiento,
   distinto verde de texto y de borde). */
.sm-btn--secundario-oscuro {
	border-color: var(--sm-verde-oscuro);
	color: var(--sm-verde-oscuro);
}

.sm-btn--secundario-oscuro:hover,
.sm-btn--secundario-oscuro:focus,
.sm-btn--secundario-oscuro:active {
	background-color: #e7f1db63;
	color: var(--sm-verde-oscuro);
}

/* El botón ancho de cierre de sección (Figma: «btn-iniciar-suscripcion»,
   179:377): mismo componente, más alto y con el texto más grande. */
.sm-btn--grande {
	width: 100%;
	max-width: 640px;
	height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background-color: var(--sm-verde);
	box-shadow: 0 10px 24px -6px rgba(95, 182, 131, 0.2);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.sm-btn--grande:hover,
.sm-btn--grande:focus,
.sm-btn--grande:active {
	background-color: var(--sm-verde-oscuro);
	color: #fff;
}

/* El CTA de la barra de suscripción del catálogo (Figma: «CTA», 245:335) es el
   único botón negro del sitio. Oscurecerlo en hover no se vería, así que se
   resuelve al revés que los verdes: pasa al verde oscuro de la marca, que sobre
   la tarjeta verde clara se lee igual de bien y mantiene el texto blanco. */
.sm-btn--negro {
	border: 0;
	background-color: #000;
	color: #fff;
}

.sm-btn--negro:hover,
.sm-btn--negro:focus,
.sm-btn--negro:active {
	background-color: var(--sm-verde-oscuro);
	color: #fff;
}

/* --- 2.2 Tipografía de sección ------------------------------------------- */

.sm-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sm-verde);
}

.sm-eyebrow--oscuro {
	color: var(--sm-verde-oscuro);
}

.sm-h2 {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: normal;
	color: var(--sm-tinta);
}

/* Cabecera de sección: títulos a la izquierda, flechas del carrusel a la derecha. */
.sm-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.sm-cab__titulos {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

/* --- 2.3 Chip ------------------------------------------------------------ */

.sm-chip {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--sm-r-chip);
	background-color: var(--sm-chip);
	font-size: 12px;
	font-weight: 500;
	color: var(--sm-tinta);
}

/* --- 2.4 Barra de datos (Figma: «03 · Trust Bar») ------------------------ */

.sm-trust {
	padding: 36px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde-2);
}

.sm-trust__lista {
	display: flex;
	gap: 90px;
	align-items: center;
	justify-content: center;
}

.sm-trust__dato {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	text-align: center;
	white-space: nowrap;
}

.sm-trust__cifra {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	color: var(--sm-tinta);
}

.sm-trust__etiqueta {
	margin: 0;
	font-size: 13px;
	color: var(--sm-gris);
}

/* --- 2.5 Bloque Dra. Sari (Figma: «06 · Meet Dra. Sari») ----------------- */

.sm-sari {
	display: flex;
	gap: 64px;
	align-items: center;
	padding: 96px var(--sm-padding-lateral);
	background-color: #fff;
}

.sm-sari__foto {
	flex: 0 0 480px;
	width: 480px;
	height: 520px;
	margin: 0;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

.sm-sari__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-sari__texto {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	min-width: 0;
}

.sm-sari__titulo {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	color: var(--sm-tinta);
}

.sm-sari__rol {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--sm-gris);
}

.sm-sari__bio {
	max-width: 623px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sm-gris);
}

.sm-sari__hitos {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--sm-tinta);
}

/* --- 2.6 Profesionales (Figma: «06b · Led by professionals») ------------- */

.sm-pros {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: flex-start;
	padding: 88px var(--sm-padding-lateral);
	background-color: #fff;
}

.sm-pros__flechas {
	display: flex;
	gap: 8px;
}

/* Si las tarjetas caben todas a la vez no hay nada que desplazar, así que las
   flechas sobran. Lo decide el JS midiendo el carrusel (assets/js/carrusel.js);
   sin JS se quedan visibles, que es como estaban antes. */
.sm-pros__flechas--ocultas {
	display: none;
}

/* Flecha que ya no lleva a ningún sitio (se está en un extremo del carrusel). */
.sm-pros__flecha[disabled] {
	opacity: 0.45;
	cursor: default;
}

.sm-pros__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid #d9d9d9;
	border-radius: 24px;
	background-color: #f2f2f2;
	/* La flecha es el carácter ← / →. Es un <button>, y los elementos de
	   formulario no heredan la fuente de la página: sin este font-family el glifo
	   se dibuja con la del sistema y no coincide con el de los botones. El tamaño
	   de la flecha se cambia con el font-size. */
	font-family: var(--sm-fuente);
	font-size: 22px;
	font-weight: 500;
	color: #808080;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.sm-pros__flecha--activa {
	border-color: var(--sm-verde-flecha);
	background-color: var(--sm-verde-flecha);
	color: #fff;
}

/* El carrusel se sale del frame por la derecha (1590px de tarjetas en una caja
   de 1320): se resuelve con desplazamiento horizontal, que además es lo que
   hace falta en móvil. */
.sm-pros__carrusel {
	display: flex;
	gap: 24px;
	width: 100%;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sm-pros__carrusel::-webkit-scrollbar {
	display: none;
}

.sm-pro {
	display: flex;
	flex: 0 0 244.5px;
	flex-direction: column;
	gap: 12px;
	width: 245px;
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
	overflow: hidden;
	scroll-snap-align: start;
	position: relative;
	transition: all 0.3s ease-in-out;
}

/* Toda la tarjeta lleva al perfil, igual que las de curso: el «Ver perfil»
   estira un pseudoelemento por encima de ella. Vale para la rejilla de
   colaboradores de Quiénes Somos y para el carrusel de la membresía, que usan
   la misma tarjeta. Dentro no hay más enlaces que este. */
.sm-pro__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sm-pro:hover,
.sm-pro:focus-within,
.sm-pro:active {
	border-color: var(--sm-verde);
	box-shadow: 0 6px 20px rgba(34, 34, 34, 0.09);
	transform: translateY(-2px);
}

.sm-pro:active {
	box-shadow: 0 2px 8px rgba(34, 34, 34, 0.08);
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sm-pro {
		transition: none;
	}

	.sm-pro:hover,
	.sm-pro:focus-within,
	.sm-pro:active {
		transform: none;
	}
}

.sm-pro__foto {
	position: relative;
	height: 240px;
	margin: 0;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

/* Cada retrato tiene su propio encuadre en Figma: se replica uno a uno. */
.sm-pro__foto img {
	position: absolute;
	max-width: none;
}

.sm-pro--antonio img  { top: -7.91%;  left: -39.01%; width: 149.02%; height: 200.69%; }
.sm-pro--almudena img { top: -5.92%;  left: -31.73%; width: 147.82%; height: 199.08%; }
.sm-pro--asum img     { top: -6.37%;  left: -35.84%; width: 171.32%; height: 230.72%; }
.sm-pro--elena img    { top: 0.13%;   left: -11.54%; width: 123.04%; height: 165.70%; }
.sm-pro--africa img   { top: -23.35%; left: -26.50%; width: 170.76%; height: 186.18%; }
.sm-pro--sari img     { top: 0.12%;   left: -15.36%; width: 130.73%; height: 157.21%; }

.sm-pro__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	padding: 4px 18px 20px;
}

.sm-pro__nombre {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--sm-tinta);
}

.sm-pro__esp {
	margin: 0;
	font-size: 13px;
	color: var(--sm-gris);
}

.sm-pro__link {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--sm-tinta);
	text-decoration: underline;
	transition: all 0.3s ease-in-out;
}

.sm-pro__link:hover,
.sm-pro__link:focus,
.sm-pro__link:active {
	color: var(--sm-verde-oscuro);
}

/* --- 2.7 Testimonios (Figma: «08 · Student Testimonials») ---------------- */

.sm-testi {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde);
}

.sm-testi__cab {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

/* Carrusel de testimonios. En escritorio las tres tarjetas caben en la caja y no
   hay nada que desplazar; por debajo de 900px pasan a una por pantalla y los
   puntos se vuelven la navegación real (ver el bloque responsive). */
.sm-testi__grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* la navegación son los puntos, no la barra */
}

.sm-testi__grid::-webkit-scrollbar {
	display: none;
}

.sm-testi__tarjeta {
	display: flex;
	/* Un tercio exacto del ancho, descontando los dos huecos de 24px: se ven tres
	   testimonios y el resto desborda, que es lo que los puntos van pasando. */
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
}

.sm-testi__cita {
	margin: 0;
	font-size: 15px;
	color: var(--sm-tinta);
}

.sm-testi__estrellas {
	display: flex;
	gap: 4px;
}

.sm-testi__estrellas img {
	width: 14px;
	height: 14px;
}

.sm-testi__autor {
	display: flex;
	gap: 12px;
	align-items: center;
}

/* En Figma el avatar es un hueco por rellenar: se respeta como marcador. */
.sm-testi__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px dashed var(--sm-borde);
	border-radius: 50% !important;
	background-color: #e5e5e9;
	font-size: 13px;
	font-weight: 500;
	color: #8c8c94;
}

.sm-testi__nombre {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sm-verde);
}

.sm-testi__prof {
	margin: 0;
	font-size: 12px;
	color: var(--sm-gris);
}

.sm-testi__puntos {
	display: flex;
	gap: 8px;
}

/* El JS pone hidden cuando las tarjetas caben enteras: sin desplazamiento no hay
   nada que navegar y los puntos sobran. */
.sm-testi__puntos[hidden] {
	display: none;
}

.sm-testi__punto {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--sm-borde);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.sm-testi__punto:hover,
.sm-testi__punto:focus,
.sm-testi__punto:active {
	background-color: var(--sm-tinta);
}

/* La marca el JS según la página de testimonios que se esté viendo. */
.sm-testi__punto--activo {
	background-color: var(--sm-tinta);
}

/* --- 2.8 Preguntas frecuentes (Figma: «13 · FAQ») ------------------------ */

.sm-faq {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: #fff;
}

.sm-faq__cab {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

.sm-faq__lista {
	width: 860px;
	max-width: 100%;
}

.sm-faq__item {
	border-bottom: 1px solid var(--sm-borde-2);
}

.sm-faq__item:first-child {
	border-top: 1px solid var(--sm-borde-2);
}

.sm-faq__item summary {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 22px 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--sm-tinta);
	list-style: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.sm-faq__item summary:hover,
.sm-faq__item summary:focus,
.sm-faq__item summary:active {
	color: var(--sm-verde-oscuro);
}

.sm-faq__item summary::-webkit-details-marker {
	display: none;
}

.sm-faq__item summary::after {
	content: "+";
	font-size: 22px;
	font-weight: 400;
	color: var(--sm-gris);
}

.sm-faq__item[open] summary::after {
	content: "−";
}

.sm-faq__item p,
.sm-faq__item ul {
	margin: 0;
	padding: 0 0 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sm-gris);
}

.sm-faq__item ul {
	padding-left: 20px;
}

.sm-faq__item p + p {
	padding-top: 12px;
}

/* --- 2.9 Tarjeta de curso (Figma: «wf/CourseCard») -----------------------
   La misma tarjeta en la portada («04 · Cursos destacados») y en el catálogo
   de /cursos/. Solo la tarjeta es compartida: cómo se colocan (tres fijas en
   fila en la portada, rejilla que envuelve en el catálogo) lo pone cada página.
   ---------------------------------------------------------------------- */

.sm-curso {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
	overflow: hidden;
	position: relative;
	transition: all 0.3s ease-in-out;
	/* Todas las tarjetas de una fila miden lo mismo, la del texto más largo manda.
	   Antes esto era height:100%, que hacía justo lo contrario: al ser una altura
	   declarada, el navegador ya no estiraba la tarjeta hasta la altura de la fila
	   y cada una se quedaba con la suya. align-self sirve igual en las rejillas
	   flex (portada, fichas) y grid (catálogo). */
	align-self: stretch;
}

/* Toda la tarjeta es zona de clic: el «Ver curso» estira un pseudoelemento
   invisible por encima de ella. Así no hay que envolver la tarjeta en otro
   enlace (ni tocar las que están escritas a mano en las páginas) y el lector
   de pantalla sigue anunciando un único enlace, el del botón. Funciona porque
   dentro de la tarjeta no hay ningún otro enlace; si algún día se añade uno,
   habrá que darle position:relative para que quede por encima. */
.sm-curso .sm-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* El realce lo dispara tanto el ratón sobre la tarjeta como el foco de teclado
   en el botón, que es el que recibe el tabulador. */
.sm-curso:hover,
.sm-curso:focus-within,
.sm-curso:active {
	border-color: var(--sm-verde);
	box-shadow: 0 6px 20px rgba(34, 34, 34, 0.09);
	transform: translateY(-2px);
}

/* Al pulsar, la tarjeta vuelve a su sitio: da la sensación de hundirse. */
.sm-curso:active {
	box-shadow: 0 2px 8px rgba(34, 34, 34, 0.08);
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sm-curso {
		transition: none;
	}

	.sm-curso:hover,
	.sm-curso:focus-within,
	.sm-curso:active {
		transform: none;
	}
}

.sm-curso__foto {
	height: 197px;
	margin: 0;
}

.sm-curso__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-curso__cuerpo {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	padding: 18px 20px 20px;
}

.sm-curso__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: normal;
	color: var(--sm-tinta);
}

.sm-curso__desc {
	margin: 0;
	font-size: 13px;
	color: var(--sm-gris);
}

.sm-curso__meta {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--sm-tinta);
}

/* El botón se pega al fondo de la tarjeta cuando la fila las estira a la misma
   altura (portada); cuando cada tarjeta mide lo suyo (catálogo) no hay hueco
   sobrante que repartir y simplemente sigue al texto, como en Figma. */
.sm-curso .sm-btn {
	width: 100%;
	margin-top: auto;
}

/* --- 2.10 CTA de cierre (Figma: «Hazte miembro / Aprende…») --------------
   Banda verde de cierre que sale en la portada y en Quiénes Somos. El
   componente es el mismo; cada página declara su gradiente, su título y su
   texto. El botón oscuro se comporta igual en las dos. */

.sm-cta {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	padding: 96px max(120px, calc((100% - 1200px) / 2));
	background-image: linear-gradient(110.02deg, #459d6a 1.33%, #b1d185 118.91%);
	text-align: center;
}

.sm-cta__titulo {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	color: #fff;
}

.sm-cta__sub {
	margin: 0;
	font-size: 17px;
	color: #fff;
}

.sm-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 193px;
	height: 48px;
	border-radius: var(--sm-r-boton);
	background-color: var(--sm-tinta);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.sm-cta__btn:hover,
.sm-cta__btn:focus,
.sm-cta__btn:active {
	background-color: #000;
	color: #fff;
}

.sm-cta__nota {
	margin: 0;
	font-size: 13px;
	color: #fff;
}

.sm-cta__nota a {
	color: #fff;
	text-decoration: underline;
}

/* --- 2.11 Móvil y tableta de los componentes compartidos ----------------- */

@media (max-width: 1200px) {
	.sm-trust__lista {
		flex-wrap: wrap;
		gap: 40px 60px;
	}

	.sm-sari__bio {
		max-width: 100%;
	}
}

@media (max-width: 900px) {
	.sm-trust,
	.sm-sari,
	.sm-pros,
	.sm-testi,
	.sm-faq {
		padding-right: 20px;
		padding-left: 20px;
	}

	.sm-sari {
		flex-direction: column;
		gap: 32px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.sm-sari__foto {
		order: -1;
		flex: 0 0 auto;
		width: 100%;
		height: 100%;
	}

	.sm-cta {
		padding: 64px 20px;
	}

	.sm-cta__titulo {
		font-size: 30px;
	}

	.sm-h2,
	.sm-sari__titulo {
		font-size: 28px;
	}

	.sm-cab {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}

	/* Los testimonios no se apilan: se convierten en un carrusel de una tarjeta
	   por pantalla, que es donde los puntos hacen de navegación de verdad. */
	.sm-testi__tarjeta {
		flex: 0 0 100%;
	}
}

@media (max-width: 600px) {
	/* Los cuatro datos no caben en fila y, envueltos, quedaban en 2 + 1 + 1
	   (cada uno mide distinto). En rejilla se reparten limpios en 2 × 2. */
	.sm-trust__lista {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}

	.sm-trust__dato {
		white-space: normal;
	}
}


/* =========================================================================
   3. CABECERA Y PIE  ·  GLOBAL (todo el sitio, blog incluido)
      Figma: «01 · Sticky Nav» (5:7) y «14 · Footer» (262:513)
   ====================================================================== */

/* --- 3.1 Cabecera / navegación ------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #fff;
	border-bottom: 1px solid var(--sm-borde-nav);
}

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 100%;
	padding: 20px var(--sm-padding-lateral);
}

.site-header .site-logo {
	margin: 0;
	padding: 0;
}

.site-header .site-logo img.header-image {
	width: auto;
	height: 45px;
}

.site-header .main-navigation,
.site-header .main-navigation .inside-navigation {
	background-color: transparent;
	padding: 0;
}

.site-header .main-navigation .main-nav > ul {
	display: flex;
	align-items: center;
	gap: 28px;
}

.site-header .main-navigation .main-nav > ul > li > a {
	display: flex;
	align-items: center;
	padding: 0;
	font-family: var(--sm-fuente);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--sm-tinta);
}

.site-header .main-navigation .main-nav > ul > li:hover > a,
.site-header .main-navigation .main-nav > ul > li.current-menu-item > a {
	background-color: transparent;
	color: var(--sm-verde-oscuro);
}

/* Los dos botones de la barra se marcan con una clase CSS en el menú de WP.
   Reutilizan el componente de botón: aquí solo se declara qué enlace es botón. */
.site-header .main-navigation .main-nav > ul > li.nav-btn-primario > a,
.site-header .main-navigation .main-nav > ul > li.nav-btn-secundario > a {
	padding: 12px 20px;
	border-radius: var(--sm-r-boton);
	transition: all 0.3s ease-in-out;
}

.site-header .main-navigation .main-nav > ul > li.nav-btn-primario > a {
	border: 0;
	background-color: var(--sm-verde-btn);
	color: #fff;
}

.site-header .main-navigation .main-nav > ul > li.nav-btn-primario:hover > a,
.site-header .main-navigation .main-nav > ul > li.nav-btn-primario > a:hover,
.site-header .main-navigation .main-nav > ul > li.nav-btn-primario > a:focus,
.site-header .main-navigation .main-nav > ul > li.nav-btn-primario > a:active,
.site-header .main-navigation .main-nav > ul > li.nav-btn-primario.current-menu-item > a {
	background-color: var(--sm-verde-oscuro);
	color: #fff;
}

.site-header .main-navigation .main-nav > ul > li.nav-btn-secundario > a {
	border: 1.5px solid var(--sm-verde);
	background-color: #fff;
	color: var(--sm-verde);
}

.site-header .main-navigation .main-nav > ul > li.nav-btn-secundario:hover > a,
.site-header .main-navigation .main-nav > ul > li.nav-btn-secundario > a:hover,
.site-header .main-navigation .main-nav > ul > li.nav-btn-secundario > a:focus,
.site-header .main-navigation .main-nav > ul > li.nav-btn-secundario > a:active,
.site-header .main-navigation .main-nav > ul > li.nav-btn-secundario.current-menu-item > a {
	background-color: #e7f1db63;
	color: var(--sm-verde);
}

/* Móvil: no hay diseño en Figma. Se usa el desplegable propio de GeneratePress,
   con los botones a ancho completo para que sigan leyéndose como botones. */
@media (max-width: 768px) {
	.site-header .inside-header {
		padding: 14px 20px;
	}

	.site-header .site-logo img.header-image {
		height: 36px;
	}

	.main-navigation .main-nav > ul {
		display: block;
	}

	.main-navigation .main-nav > ul > li > a {
		padding: 14px 20px;
	}

	.main-navigation .main-nav > ul > li.nav-btn-primario > a,
	.main-navigation .main-nav > ul > li.nav-btn-secundario > a {
		justify-content: center;
		margin: 8px 20px;
	}
}

/* --- 3.2 Pie de página --------------------------------------------------- */

.site-footer {
	background-color: var(--sm-pie-fondo);
}

.sm-pie {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 72px var(--sm-padding-lateral) 40px;
	font-family: var(--sm-fuente);
}

.sm-pie__cols {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}

.sm-pie__marca {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.sm-pie__marca img {
	width: 150px;
	height: 44px;
	object-fit: contain;
}

.sm-pie__claim {
	max-width: 330px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-pie-texto);
}

.sm-pie__contacto {
	display: flex;
	flex-direction: column;
	max-width: 330px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-pie-texto);
}

.sm-pie__contacto a {
	color: var(--sm-pie-texto);
	text-decoration: none;
	transition: all .3s ease-in-out;
}

.sm-pie__contacto a:hover,
.sm-pie__contacto a:focus,
.sm-pie__contacto a:active {
	color: #fff;
}

.sm-pie__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	white-space: nowrap;
}

.sm-pie__col strong {
	font-weight: 600;
	color: #fff;
}

.sm-pie__col a {
	color: var(--sm-pie-texto);
	text-decoration: none;
	transition: all .3s ease-in-out;
}

.sm-pie__col a:hover,
.sm-pie__col a:focus,
.sm-pie__col a:active {
	color: #fff;
}

.sm-pie__news {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.sm-pie__news strong {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.sm-pie__form {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

/* El ebook no se pide por email: se enlaza a la página de captación externa. */
.sm-pie__descarga {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border: 1px solid #e5e7eb;
	border-radius: var(--sm-r-boton);
	background-color: #fff;
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .08);
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	text-decoration: none;
	white-space: nowrap;
	transition: all .3s ease-in-out;
}

.sm-pie__descarga img {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.sm-pie__descarga:hover,
.sm-pie__descarga:focus,
.sm-pie__descarga:active {
	background-color: #dbdbdb;
	color: #111827;
}

.sm-pie__linea {
	width: 100%;
	height: 1px;
	background-color: var(--sm-pie-linea);
}

.sm-pie__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 12px;
	color: var(--sm-pie-texto);
}

/* GeneratePress pinta todos los <p> de #5b5b5b. Esa regla gana a la herencia del
   color del contenedor, así que el párrafo del legal hay que darle el color aquí. */
.sm-pie__legal p {
	margin: 0;
	color: var(--sm-pie-texto);
}

.sm-pie__legal a {
	color: var(--sm-pie-texto);
	text-decoration: none;
}

.sm-pie__legal a:hover,
.sm-pie__legal a:active,
.sm-pie__legal a:focus {
	color: #fff;
}

.sm-pie__redes {
	display: flex;
	gap: 16px;
}

.sm-pie__redes a {
	font-weight: 500;
}

.sm-pie__aviso {
	width: 100%;
	margin: 0;
	font-size: 12px;
	color: var(--sm-pie-legal);
}

@media (max-width: 900px) {
	.sm-pie {
		gap: 32px;
		padding: 48px 20px 32px;
	}

	.sm-pie__cols {
		flex-wrap: wrap;
		gap: 32px;
	}

	.sm-pie__marca,
	.sm-pie__news {
		flex: 1 0 100%;
	}

	/* "Nutrición evolutiva antiinflamatoria" no cabe en una línea en móvil. */
	.sm-pie__col {
		flex: 1 0 40%;
		white-space: normal;
	}

	.sm-pie__legal {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}
}


/* =========================================================================
   4. LIENZO DE LAS PÁGINAS REDISEÑADAS
      Las secciones van a sangre, sin el contenedor de GeneratePress. Cada
      página nueva se añade a esta lista.
   ====================================================================== */

body.page-id-3899 .site.grid-container,
body.page-id-3899 .site-content,
body.page-id-3899 .inside-article,
body.page-id-3899 .entry-content,
body.page-id-3394 .site.grid-container,
body.page-id-3394 .site-content,
body.page-id-3394 .inside-article,
body.page-id-3394 .entry-content,
body.page-id-4981 .site.grid-container,
body.page-id-4981 .site-content,
body.page-id-4981 .inside-article,
body.page-id-4981 .entry-content,
body.page-id-16 .site.grid-container,
body.page-id-16 .site-content,
body.page-id-16 .inside-article,
body.page-id-16 .entry-content,
body.parent-pageid-16 .site.grid-container,
body.parent-pageid-16 .site-content,
body.parent-pageid-16 .inside-article,
body.parent-pageid-16 .entry-content,
body.page-id-12 .site.grid-container,
body.page-id-12 .site-content,
body.page-id-12 .inside-article,
body.page-id-12 .entry-content,
body.page-id-20 .site.grid-container,
body.page-id-20 .site-content,
body.page-id-20 .inside-article,
body.page-id-20 .entry-content,
body.single-curso .site.grid-container,
body.single-curso .site-content,
body.single-curso .inside-article,
body.single-curso .entry-content {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

body.page-id-3899.separate-containers .site-main,
body.page-id-3394.separate-containers .site-main,
body.page-id-4981.separate-containers .site-main,
body.page-id-16.separate-containers .site-main,
body.parent-pageid-16.separate-containers .site-main,
body.page-id-12.separate-containers .site-main,
body.page-id-20.separate-containers .site-main,
body.single-curso.separate-containers .site-main {
	margin: 0;
}

body.page-id-3899 .entry-content > *,
body.page-id-3394 .entry-content > *,
body.page-id-4981 .entry-content > *,
body.page-id-16 .entry-content > *,
body.parent-pageid-16 .entry-content > *,
body.page-id-12 .entry-content > *,
body.page-id-20 .entry-content > *,
body.single-curso .entry-content > * {
	margin: 0;
}

/* La fuente hay que declararla también en .entry-content, no basta con el body:
   hay un CSS antiguo del sitio, en línea en el <head>, con la regla
   «body, header, .entry-content { font-family: "AzoSans Regular" }». Al apuntar
   directamente a .entry-content, corta la herencia de Inter que viene del body
   y reparte AzoSans a todo el contenido de la página. Una regla directa sobre
   el elemento siempre gana al valor heredado, así que la única forma de
   recuperar Inter es declararla sobre ese mismo contenedor.
   Ojo: por eso las flechas ← → solo salían bien en los elementos que declaran
   su propia font-family (.sm-btn); las demás heredaban AzoSans y dibujaban otro
   glifo. Si algún día se limpia ese CSS antiguo, esta regla se puede simplificar. */
body.page-id-3899,
body.page-id-3899 .entry-content,
body.page-id-3394,
body.page-id-3394 .entry-content,
body.page-id-4981,
body.page-id-4981 .entry-content,
body.page-id-16,
body.page-id-16 .entry-content,
body.parent-pageid-16,
body.parent-pageid-16 .entry-content,
body.page-id-12,
body.page-id-12 .entry-content,
body.page-id-20,
body.page-id-20 .entry-content,
body.single-curso,
body.single-curso .entry-content {
	font-family: var(--sm-fuente);
	color: var(--sm-tinta);
}

/* Los <button> tampoco heredan la tipografía (las flechas del carrusel y los
   puntos de los testimonios son <button>). */
body.page-id-3899 button,
body.page-id-3394 button,
body.page-id-4981 button,
body.page-id-16 button,
body.parent-pageid-16 button,
body.page-id-12 button,
body.page-id-20 button,
body.single-curso button {
	font-family: var(--sm-fuente);
}

body.page-id-3899 .sm-sec > .gb-inside-container,
body.page-id-3394 .sm-sec > .gb-inside-container,
body.page-id-4981 .sm-sec > .gb-inside-container,
body.page-id-16 .sm-sec > .gb-inside-container,
body.parent-pageid-16 .sm-sec > .gb-inside-container,
body.page-id-12 .sm-sec > .gb-inside-container {
	max-width: 100%;
	padding: 0;
}


/* =========================================================================
   5. PÁGINA 3899 · «Inicio Nuevo» (portada)
      Figma: HOMEPAGE (5:6). Solo lo exclusivo de esta página: lo demás sale
      de los componentes compartidos (sección 2).
   ====================================================================== */

/* --- 5.1  02 · Hero ------------------------------------------------------ */

body.page-id-3899 .sm-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 654px; /* alto del frame en Figma */
	padding: 96px var(--sm-padding-lateral);
	overflow: hidden;
	background-image: linear-gradient(180deg, rgba(177, 212, 122, 0.5), rgba(89, 183, 127, 0.5));
}

body.page-id-3899 .sm-hero__patron {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0.3;
	mix-blend-mode: darken;
	pointer-events: none;
}

/* El encuadre literal de Figma (116% de ancho por 211% de alto) deformaba el
   patrón. Se escala sin deformar y se recorta lo que sobre. */
body.page-id-3899 .sm-hero__patron img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

body.page-id-3899 .sm-hero__contenido {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	width: 848px;
	max-width: 100%;
	text-align: center;
}

body.page-id-3899 .sm-hero__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sm-verde-hero);
}

body.page-id-3899 .sm-hero__titulo {
	margin: 0;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -1.28px;
	background-image: linear-gradient(115.32deg, #349b16 13.765%, #000 123.4%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom:5px;
}

body.page-id-3899 .sm-hero__sub {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
	color: #000;
}

body.page-id-3899 .sm-hero__acciones {
	display: flex;
	gap: 14px;
	align-items: center;
}

/* Único matiz del hero en el frame: el primario lleva un borde claro. */
body.page-id-3899 .sm-hero__acciones .sm-btn--primario {
	border: 1px solid #edf7e5;
}

body.page-id-3899 .sm-hero__nota {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: #000;
}

/* --- 5.2  02b · Accesos principales -------------------------------------- */

body.page-id-3899 .sm-accesos {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	padding: 56px var(--sm-padding-lateral);
	background-color: #fff;
}

body.page-id-3899 .sm-accesos__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sm-verde);
}

body.page-id-3899 .sm-accesos__grid {
	display: flex;
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

body.page-id-3899 .sm-acceso {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
	text-decoration: none;
	transition: all .3s ease-in-out;
}

body.page-id-3899 .sm-acceso:hover, body.page-id-3899 .sm-acceso:active, body.page-id-3899 .sm-acceso:focus {
	border-color: var(--sm-verde);
}

body.page-id-3899 .sm-acceso img {
	width: 34px;
	height: 34px;
}

body.page-id-3899 .sm-acceso__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--sm-tinta-2);
}

body.page-id-3899 .sm-acceso__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sm-gris-2);
}

body.page-id-3899 .sm-acceso__link {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--sm-verde);
}

/* --- 5.3  03b · Membresía ------------------------------------------------ */

body.page-id-3899 .sm-membresia {
	display: flex;
	gap: 56px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde);
}

body.page-id-3899 .sm-membresia__texto {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
	min-width: 0;
}

body.page-id-3899 .sm-membresia__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--sm-verde);
}

body.page-id-3899 .sm-membresia__titulo {
	max-width: 444px;
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sm-tinta);
}

body.page-id-3899 .sm-membresia__entradilla {
	max-width: 725px;
	margin: 0;
	font-size: 17px;
	line-height: 1.48;
	color: var(--sm-gris);
}

body.page-id-3899 .sm-membresia__entradilla strong {
	font-weight: 700;
	color: var(--sm-tinta-3);
}

body.page-id-3899 .sm-membresia__checks {
	display: flex;
	gap: 40px;
	width: 100%;
}

body.page-id-3899 .sm-membresia__checks ul {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-id-3899 .sm-membresia__checks li {
	font-size: 14px;
	color: var(--sm-tinta);
}

body.page-id-3899 .sm-membresia__acciones {
	display: flex;
	gap: 14px;
}

body.page-id-3899 .sm-membresia__foto {
	flex: 0 0 480px;
	width: 480px;
	height: 420px;
	margin: 0;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

body.page-id-3899 .sm-membresia__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 5.4  04 · Cursos destacados ----------------------------------------- */

body.page-id-3899 .sm-cursos {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: #fff;
}

/* La tarjeta (.sm-curso) es un componente compartido con el catálogo: aquí solo
   se dice cómo se colocan, tres en fila y estiradas a la misma altura. */
body.page-id-3899 .sm-cursos__grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

body.page-id-3899 .sm-curso {
	flex: 1 0 0;
}

/* --- 5.5  05 · Qué es Slow Medicine -------------------------------------- */

body.page-id-3899 .sm-que {
	display: flex;
	flex-direction: column;
	gap: 25px;
	align-items: center;
	padding: 96px max(120px, calc((100% - 1200px) / 2));
	background-color: var(--sm-fondo-verde);
	text-align: center;
}

body.page-id-3899 .sm-que__cab {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	width: 542px;
	max-width: 100%;
}

body.page-id-3899 .sm-que__titulo {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.18;
	color: var(--sm-tinta);
}

body.page-id-3899 .sm-que__puntos {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 600px;
}

body.page-id-3899 .sm-que__punto {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body.page-id-3899 .sm-que__punto h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--sm-tinta);
}

body.page-id-3899 .sm-que__punto p {
	margin: 0;
	font-size: 15px;
	line-height: 1.48;
	color: var(--sm-gris);
}
body.page-id-3899 .sm-chip {
	margin-bottom: 0 !important;
}
body.page-id-3899 .sm-aviso {
	display: inline-flex;
	align-items: center;
	padding: 14px 20px;
	border-radius: var(--sm-r-imagen);
	background-color: var(--sm-chip);
	font-size: 13px;
	font-weight: 500;
	color: var(--sm-tinta);
	margin-top:20px;
}

/* --- 5.6  09 · Publicaciones (ebook) ------------------------------------- */

body.page-id-3899 .sm-libro {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: #fff;
}

body.page-id-3899 .sm-libro__caja {
	display: flex;
	gap: 32px;
	align-items: center;
	width: 100%;
	padding: 48px 60px;
	border: 1px solid var(--sm-naranja);
	background-color: var(--sm-naranja-fondo);
}

body.page-id-3899 .sm-libro__portada {
	flex: 0 0 180px;
	width: 180px;
	height: 240px;
	margin: 0;
	border: 1px solid var(--sm-verde-btn);
	border-radius: 5px;
	box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

body.page-id-3899 .sm-libro__portada img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.page-id-3899 .sm-libro__texto {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}

body.page-id-3899 .sm-libro__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--sm-naranja);
}

body.page-id-3899 .sm-libro__titulo {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	color: var(--sm-tinta-2);
}

body.page-id-3899 .sm-libro__desc {
	margin: 0;
	font-size: 15px;
	color: var(--sm-gris-2);
}

body.page-id-3899 .sm-libro__form {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
}

body.page-id-3899 .sm-libro__form input[type="email"] {
	width: 405px;
	max-width: 100%;
	padding: 13px 16px;
	border: 1.5px solid var(--sm-borde-2);
	border-radius: var(--sm-r-boton);
	background-color: #fff;
	font-size: 14px;
	color: var(--sm-tinta);
}

body.page-id-3899 .sm-libro__form input[type="email"]::placeholder {
	color: #9999a1;
}

body.page-id-3899 .sm-libro__form button {
	padding: 12px 20px;
	border: 0;
	border-radius: var(--sm-r-boton);
	background-color: var(--sm-verde);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
}

/* --- 5.7  10 · Podcast --------------------------------------------------- */

body.page-id-3899 .sm-podcast {
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde);
}

body.page-id-3899 .sm-podcast__destacado {
	display: flex;
	gap: 20px;
	align-items: center;
	width: 100%;
	padding: 20px;
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
}

body.page-id-3899 .sm-podcast__destacado figure {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	margin: 0;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

/* Las miniaturas van envueltas en un enlace: tiene que ocupar toda la caja o la
   imagen se deforma. */
body.page-id-3899 .sm-podcast figure a {
	display: block;
	width: 100%;
	height: 100%;
}

body.page-id-3899 .sm-podcast__destacado figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Los títulos de episodio son enlaces, pero se leen como texto del diseño.
   Los botones quedan fuera: mandan sus propias reglas. */
body.page-id-3899 .sm-podcast a:not(.sm-btn) {
	color: inherit;
	text-decoration: none;
}

body.page-id-3899 .sm-podcast__titulo a:hover,
body.page-id-3899 .sm-podcast__fila p a:hover {
	color: var(--sm-verde-oscuro);
}

body.page-id-3899 .sm-podcast__info {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

body.page-id-3899 .sm-podcast__fecha,
body.page-id-3899 .sm-podcast__dur {
	margin: 0;
	font-size: 13px;
	color: var(--sm-gris);
}

body.page-id-3899 .sm-podcast__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--sm-tinta);
}

body.page-id-3899 .sm-podcast__lista {
	width: 100%;
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
	overflow: hidden;
}

body.page-id-3899 .sm-podcast__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
}

body.page-id-3899 .sm-podcast__fila + .sm-podcast__fila {
	border-top: 1px solid var(--sm-borde);
}

body.page-id-3899 .sm-podcast__fila > div {
	display: flex;
	gap: 14px;
	align-items: center;
}

body.page-id-3899 .sm-podcast__fila figure {
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

body.page-id-3899 .sm-podcast__fila figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.page-id-3899 .sm-podcast__fila p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--sm-tinta);
}

body.page-id-3899 .sm-podcast__fila .sm-podcast__dur {
	white-space: nowrap;
}

body.page-id-3899 .sm-podcast__chips {
	display: flex;
	gap: 12px;
}

body.page-id-3899 .sm-podcast__chip {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: var(--sm-r-chip);
	background-color: var(--sm-fondo-verde);
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-tinta-2);
	text-decoration: none;
}

body.page-id-3899 .sm-podcast__chip img {
	width: 14px;
	height: 14px;
}

body.page-id-3899 .sm-podcast__pie {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--sm-gris);
}

/* --- 5.8  12 · CTA de membresía ------------------------------------------
   El CTA es ahora un componente compartido (sección 2.10). La portada solo
   aporta su texto en el markup; no necesita CSS propio aquí. */

/* --- 5.9 Móvil y tableta -------------------------------------------------
   El diseño móvil no existe en Figma. Se adapta manteniendo orden, colores y
   tipografía: las rejillas se apilan y los cuerpos grandes bajan de tamaño.
   ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
	body.page-id-3899 .sm-membresia__titulo,
	body.page-id-3899 .sm-membresia__entradilla {
		max-width: 100%;
	}

	body.page-id-3899 .sm-accesos__grid {
		flex-wrap: wrap;
	}

	body.page-id-3899 .sm-acceso {
		flex: 1 0 calc(50% - 10px);
	}
}

@media (max-width: 900px) {
	body.page-id-3899 .sm-hero,
	body.page-id-3899 .sm-accesos,
	body.page-id-3899 .sm-membresia,
	body.page-id-3899 .sm-cursos,
	body.page-id-3899 .sm-libro,
	body.page-id-3899 .sm-podcast {
		padding-right: 20px;
		padding-left: 20px;
	}

	body.page-id-3899 .sm-que {
		padding: 56px 20px;
	}

	body.page-id-3899 .sm-hero {
		min-height: 0; /* en móvil manda el contenido, no el alto del frame */
		padding-top: 64px;
		padding-bottom: 64px;
	}

	body.page-id-3899 .sm-hero__titulo {
		font-size: 38px;
		letter-spacing: -0.76px;
	}

	body.page-id-3899 .sm-hero__acciones {
		flex-direction: column;
		width: 100%;
	}

	body.page-id-3899 .sm-hero__acciones .sm-btn {
		width: 100%;
	}

	body.page-id-3899 .sm-membresia {
		flex-direction: column;
		gap: 32px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	body.page-id-3899 .sm-membresia__foto {
		flex: 0 0 auto;
		width: 100%;
		height: 320px;
	}

	body.page-id-3899 .sm-membresia__titulo {
		font-size: 30px;
	}

	body.page-id-3899 .sm-que__titulo {
		font-size: 28px;
	}

	body.page-id-3899 .sm-libro__titulo {
		font-size: 22px;
	}

	body.page-id-3899 .sm-accesos__grid,
	body.page-id-3899 .sm-cursos__grid,
	body.page-id-3899 .sm-membresia__checks,
	body.page-id-3899 .sm-libro__caja,
	body.page-id-3899 .sm-libro__form,
	body.page-id-3899 .sm-podcast__destacado,
	body.page-id-3899 .sm-membresia__acciones {
		flex-direction: column;
	}

	body.page-id-3899 .sm-libro__caja {
		align-items: flex-start;
		padding: 32px 20px;
	}

	body.page-id-3899 .sm-libro__form input[type="email"],
	body.page-id-3899 .sm-libro__form button,
	body.page-id-3899 .sm-podcast__destacado .sm-btn,
	body.page-id-3899 .sm-membresia__acciones .sm-btn {
		width: 100%;
	}

	body.page-id-3899 .sm-podcast__fila {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
}


/* =========================================================================
   6. PÁGINA 3394 · «Membresía» (slug /membresia-slow/)
      Figma: MEMBERSHIP · Producto principal (46:121).
      Reutiliza de la sección 2: .sm-btn, .sm-trust, .sm-sari, .sm-pros,
      .sm-testi, .sm-faq, .sm-eyebrow, .sm-h2, .sm-cab, .sm-chip.
   ====================================================================== */

/* --- 6.1 Diferencias respecto a los componentes compartidos --------------- */

/* En la membresía la sección de Sari va sobre fondo verde (en la portada es
   blanca), y el FAQ sobre el verde claro de la trust bar (en la portada es
   blanco) y con la caja algo más ancha. */
body.page-id-3394 .sm-sari {
	background-color: var(--sm-fondo-verde);
}

body.page-id-3394 .sm-faq {
	background-color: var(--sm-fondo-verde-2);
}

body.page-id-3394 .sm-faq__lista {
	width: 900px;
}

/* El título de los testimonios lleva la nota de Hotmart y va a dos líneas. */
body.page-id-3394 .sm-testi__cab .sm-h2 {
	max-width: 952px;
	color: var(--sm-tinta-2);
}

/* --- 6.2  02 · Hero ------------------------------------------------------ */

body.page-id-3394 .sm-mb-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 581px; /* alto del frame en Figma */
	padding: 72px var(--sm-padding-lateral);
	background-image: linear-gradient(180deg, #fff, var(--sm-fondo-verde));
	text-align: center;
}

body.page-id-3394 .sm-mb-hero__logo {
	width: 236px;
	height: 69px;
	margin: 0;
	object-fit: contain;
}

body.page-id-3394 .sm-mb-hero__titulo {
	max-width: 740px;
	margin: 44px 0 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.5px;
	color: var(--sm-tinta-2);
}

body.page-id-3394 .sm-mb-hero__sub {
	max-width: 740px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.4;
	color: var(--sm-pie-linea);
}

body.page-id-3394 .sm-mb-hero__nota {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--sm-pie-linea);
}

body.page-id-3394 .sm-mb-hero__precio {
	color: var(--sm-verde-btn);
	text-decoration: underline;
	transition: all .3s ease-in-out;
}

body.page-id-3394 .sm-mb-hero__precio:hover,
body.page-id-3394 .sm-mb-hero__precio:focus,
body.page-id-3394 .sm-mb-hero__precio:active {
	color: var(--sm-verde-btn);
	opacity: .75;
}

body.page-id-3394 .sm-mb-hero .sm-btn {
	margin-top: 40px;
	border: 1px solid #edf7e5;
}

/* --- 6.3  04 · Beneficios (texto + imagen) ------------------------------- */

body.page-id-3394 .sm-ben {
	display: flex;
	gap: 64px;
	align-items: center;
	padding: 96px var(--sm-padding-lateral);
	background-color: #fff;
}

/* La segunda tira invierte el orden y va sobre verde. */
body.page-id-3394 .sm-ben--verde {
	background-color: var(--sm-fondo-verde);
}

body.page-id-3394 .sm-ben--inversa .sm-ben__foto {
	order: -1;
}

body.page-id-3394 .sm-ben__texto {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
	min-width: 0;
}

body.page-id-3394 .sm-ben__titulo {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--sm-tinta-2);
}

body.page-id-3394 .sm-ben__desc {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--sm-gris);
}

/* El «Suscríbete ahora →» de los beneficios es un enlace de texto, no un botón. */
body.page-id-3394 .sm-ben__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--sm-verde);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

body.page-id-3394 .sm-ben__link:hover,
body.page-id-3394 .sm-ben__link:focus,
body.page-id-3394 .sm-ben__link:active {
	color: var(--sm-verde-oscuro);
	text-decoration: underline;
}

body.page-id-3394 .sm-ben__foto {
	flex: 0 0 604px;
	width: 604px;
	height: 420px;
	margin: 0;
	border-radius: var(--sm-r-tarjeta);
	overflow: hidden;
}

body.page-id-3394 .sm-ben__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 6.4  05 · El programa (18 módulos) ---------------------------------- */

body.page-id-3394 .sm-prog {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: #f6f6f6;
}

body.page-id-3394 .sm-prog__cab {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

/* Tres tarjetas por fila. En Figma miden 427px, pero 427 × 3 + 20 × 2 = 1321 y
   la caja de contenido es de 1320: se pasaban por un píxel y la tercera caía a
   la fila siguiente. Se reparte el ancho disponible en tres, que a 1320 da los
   mismos 426,7px del diseño. */
body.page-id-3394 .sm-prog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

body.page-id-3394 .sm-mod {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	justify-content: center;
	padding: 18px 20px;
	border: 1px solid var(--sm-borde);
	border-radius: 12px;
	background-color: #fff;
	transition: all 0.3s ease-in-out;
}

/* body.page-id-3394 .sm-mod:hover {
	border-color: var(--sm-verde);
} */

body.page-id-3394 .sm-mod__badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 6px;
	background-color: var(--sm-fondo-verde);
	font-size: 11px;
	font-weight: 700;
	color: var(--sm-verde);
}

body.page-id-3394 .sm-mod__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--sm-tinta-2);
}

body.page-id-3394 .sm-mod__docente {
	margin: 0;
	font-size: 12px;
	color: var(--sm-gris-2);
}

body.page-id-3394 .sm-prog__cta {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* --- 6.5  05b · Novedades cada mes --------------------------------------- */

body.page-id-3394 .sm-nov {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-gris);
}

body.page-id-3394 .sm-nov__cab {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
}

body.page-id-3394 .sm-nov__cab .sm-eyebrow {
	letter-spacing: 0.78px;
}

body.page-id-3394 .sm-nov__sub {
	max-width: 640px;
	margin: 0;
	font-size: 17px;
	color: var(--sm-gris-3);
}

body.page-id-3394 .sm-nov__grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

body.page-id-3394 .sm-nov__tarjeta {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
	padding: 26px 24px;
	border: 1px solid var(--sm-borde-3);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
}

/* El icono es un carácter (▶ + ? ✦), no una imagen. */
body.page-id-3394 .sm-nov__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: #f2f9f4;
	font-size: 20px;
	font-weight: 700;
	color: var(--sm-verde);
}

body.page-id-3394 .sm-nov__titulo {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--sm-tinta);
}

body.page-id-3394 .sm-nov__desc {
	margin: 0;
	font-size: 14px;
	color: var(--sm-gris-3);
}

/* --- 6.6  06 · Nivel técnico --------------------------------------------- */

body.page-id-3394 .sm-nivel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding: 56px max(120px, calc((100% - 1200px) / 2));
	background-color: #fff;
	text-align: center;
}

body.page-id-3394 .sm-nivel__titulo {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: var(--sm-tinta-2);
}

body.page-id-3394 .sm-nivel__sub {
	margin: 0;
	font-size: 15px;
	color: var(--sm-gris-2);
}

body.page-id-3394 .sm-nivel__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* Los chips de esta sección son mayores que los de la portada. */
body.page-id-3394 .sm-nivel__chips .sm-chip {
	padding: 9px 16px;
	font-size: 14px;
}

/* --- 6.7  10 · Planes y precios ------------------------------------------ */

body.page-id-3394 .sm-planes {
	display: flex;
	flex-direction: column;
	gap: 44px;
	align-items: center;
	padding: 96px var(--sm-padding-lateral);
	background-color: #fff;
}

body.page-id-3394 .sm-planes__cab {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-align: center;
}

body.page-id-3394 .sm-planes__sub {
	max-width: 698px;
	margin: 0;
	font-size: 17px;
	color: var(--sm-gris-3);
}

body.page-id-3394 .sm-plan {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	width: 648px;
	max-width: 100%;
	padding: 32px;
	border: 2px solid var(--sm-verde);
	border-radius: 16px;
	background-color: #fff;
	box-shadow: -6px 0 17.2px -5px rgba(0, 0, 0, 0.15);
}

body.page-id-3394 .sm-plan__badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--sm-r-chip);
	background-color: var(--sm-verde);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}

body.page-id-3394 .sm-plan__nombre {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--sm-tinta-2);
}

body.page-id-3394 .sm-plan__precio {
	display: flex;
	gap: 6px;
	align-items: baseline;
	margin: 0;
}

body.page-id-3394 .sm-plan__cifra {
	font-size: 40px;
	font-weight: 700;
	color: var(--sm-tinta-2);
}

body.page-id-3394 .sm-plan__periodo {
	font-size: 16px;
	color: var(--sm-gris-2);
}

body.page-id-3394 .sm-plan__lista {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--sm-tinta-2);
}

body.page-id-3394 .sm-plan__lista li::before {
	content: "✓";
	margin-right: 8px;
	color: #59b77f;
}

body.page-id-3394 .sm-plan .sm-btn {
	width: 100%;
	margin-top: 20px;
}

body.page-id-3394 .sm-planes__nota {
	margin: 0;
	font-size: 14px;
	color: var(--sm-gris-3);
	text-align: center;
}

/* --- 6.8 Móvil y tableta ------------------------------------------------- */

@media (max-width: 1200px) {
	body.page-id-3394 .sm-ben__foto {
		flex: 1 0 0;
		width: auto;
	}

	body.page-id-3394 .sm-prog__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	body.page-id-3394 .sm-nov__grid {
		flex-wrap: wrap;
	}

	body.page-id-3394 .sm-nov__tarjeta {
		flex: 1 0 calc(50% - 12px);
	}
}

@media (max-width: 900px) {
	body.page-id-3394 .sm-mb-hero,
	body.page-id-3394 .sm-ben,
	body.page-id-3394 .sm-prog,
	body.page-id-3394 .sm-nov,
	body.page-id-3394 .sm-planes {
		padding-right: 20px;
		padding-left: 20px;
	}

	body.page-id-3394 .sm-nivel {
		padding: 48px 20px;
	}

	body.page-id-3394 .sm-mb-hero {
		min-height: 0; /* en móvil manda el contenido, no el alto del frame */
		padding-top: 56px;
		padding-bottom: 56px;
	}

	body.page-id-3394 .sm-mb-hero__titulo {
		margin-top: 32px;
		font-size: 32px;
	}

	body.page-id-3394 .sm-mb-hero__sub {
		margin-top: 20px;
		font-size: 16px;
	}

	body.page-id-3394 .sm-mb-hero .sm-btn {
		width: 100%;
		margin-top: 28px;
	}

	/* Las dos tiras de beneficio se apilan con la imagen arriba, también la que
	   en escritorio va invertida. */
	body.page-id-3394 .sm-ben {
		flex-direction: column;
		gap: 32px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	body.page-id-3394 .sm-ben__foto {
		order: -1;
		flex: 0 0 auto;
		width: 100%;
		height: 260px;
	}

	body.page-id-3394 .sm-ben__titulo {
		font-size: 28px;
	}

	body.page-id-3394 .sm-prog__grid {
		grid-template-columns: 1fr;
	}

	body.page-id-3394 .sm-nov__tarjeta {
		flex: 1 0 100%;
	}

	body.page-id-3394 .sm-nivel__titulo {
		font-size: 22px;
	}

	body.page-id-3394 .sm-plan {
		padding: 24px 20px;
	}
}


/* =========================================================================
   7. PÁGINA 4981 · «Cursos» (slug /cursos/)
      Figma: COURSES · Archivo (49:147). Reutiliza de la sección 2: .sm-btn,
      .sm-curso, .sm-eyebrow. Aquí solo va la cabecera de la página, la rejilla
      del catálogo y la barra de suscripción.
   ====================================================================== */

/* --- 7.1  Cabecera de la página ------------------------------------------ */

body.page-id-4981 .sm-cat-cab {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
	padding: 72px var(--sm-padding-lateral);
	background-image: linear-gradient(180deg, #fff, var(--sm-fondo-verde));
}

/* El eyebrow es el compartido; en esta página Figma lo pone en negrita. */
body.page-id-4981 .sm-cat-cab .sm-eyebrow {
	font-weight: 700;
}

/* El título va con degradado de tinta a verde: se pinta el degradado como fondo
   y se recorta contra las letras. El color de reserva es la tinta, por si algún
   navegador no recorta el fondo y se quedara el texto transparente. */
body.page-id-4981 .sm-cat-cab__titulo {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: normal;
	color: var(--sm-tinta-2);
	background-image: linear-gradient(90deg, var(--sm-tinta-2), var(--sm-verde-btn));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

body.page-id-4981 .sm-cat-cab__bajada {
	max-width: 1320px;
	margin: 0;
	font-size: 17px;
	line-height: 1.48;
	color: var(--sm-gris-2);
}

/* --- 7.2  Catálogo ------------------------------------------------------- */

body.page-id-4981 .sm-cat {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding: 56px var(--sm-padding-lateral) 72px;
	background-color: #fff;
}

/* Tres tarjetas por fila. Cada una mide lo que pide su contenido (align-items:
   start), que es como están en Figma: en la misma fila las hay más altas y más
   bajas según el título. */
body.page-id-4981 .sm-cat__grid {
	display: grid;
	flex: 1 0 0;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 25px;
	align-items: start;
	min-width: 0;
}

/* --- 7.3  Barra de suscripción ------------------------------------------- */

/* Acompaña al catálogo mientras se baja. El desplazamiento se para por debajo de
   la cabecera del sitio, que es fija y mide 85px. */
body.page-id-4981 .sm-sus {
	position: sticky;
	top: 105px;
	display: flex;
	flex: 0 0 263px;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	justify-content: center;
	width: 263px;
	padding: 32px;
	border: 1px solid var(--sm-borde);
	border-radius: 16px;
	background-color: var(--sm-fondo-verde);
	text-align: center;
}

body.page-id-4981 .sm-sus__titulo {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	color: #000;
}

/* El precio es la única palabra en verde y más grande del titular. */
body.page-id-4981 .sm-sus__precio {
	font-size: 32px;
	color: #4aab72;
}

body.page-id-4981 .sm-sus__texto {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-tinta-2);
}

body.page-id-4981 .sm-sus .sm-btn {
	width: 100%;
}

/* --- 7.4  Móvil y tableta ------------------------------------------------ */

@media (max-width: 1200px) {
	/* La barra deja de caber al lado del catálogo: pasa a ir encima, a lo ancho,
	   y deja de acompañar al desplazamiento. */
	body.page-id-4981 .sm-cat {
		flex-direction: column;
		gap: 32px;
	}

	body.page-id-4981 .sm-sus {
		position: static;
		flex: 0 0 auto;
		order: -1;
		width: 100%;
	}

	body.page-id-4981 .sm-cat__grid {
		width: 100%;
	}

	/* Ya no es una columna estrecha: el botón dejaría de leerse como botón si se
	   estirase de lado a lado de la banda. */
	body.page-id-4981 .sm-sus .sm-btn {
		width: auto;
		min-width: 240px;
	}
}

@media (max-width: 900px) {
	body.page-id-4981 .sm-cat-cab,
	body.page-id-4981 .sm-cat {
		padding-right: 20px;
		padding-left: 20px;
	}

	body.page-id-4981 .sm-cat-cab {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	body.page-id-4981 .sm-cat-cab__titulo {
		font-size: 32px;
	}

	body.page-id-4981 .sm-cat__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	body.page-id-4981 .sm-cat__grid {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
   8. PÁGINAS LEGALES · Aviso legal (1257), Privacidad (3), Cookies (1260)
      No están en Figma. Se les da el título como H1 y el mismo espaciado que
      las secciones del rediseño, para que no queden pegadas a la cabecera.
   ====================================================================== */

body.page-id-1257,
body.page-id-3,
body.page-id-1260, body.page-id-1264 {
	font-family: var(--sm-fuente);
}

/* Alineadas con la cabecera: misma caja de contenido (1320) y mismo margen
   lateral. El espaciado propio de la página es solo arriba y abajo. */
body.page-id-1257 .site.grid-container,
body.page-id-3 .site.grid-container,
body.page-id-1260 .site.grid-container, body.page-id-1264 .site.grid-container {
	max-width: 100%;
	padding: 0 var(--sm-padding-lateral);
}

body.page-id-1257 .site-content,
body.page-id-3 .site-content,
body.page-id-1260 .site-content, body.page-id-1264 .site-content {
	padding: 88px 0;
}

body.page-id-1257 .entry-header,
body.page-id-3 .entry-header,
body.page-id-1260 .entry-header, body.page-id-1264 .entry-header {
	margin-bottom: 32px;
}

body.page-id-1257 .entry-title,
body.page-id-3 .entry-title,
body.page-id-1260 .entry-title, body.page-id-1264 .entry-title {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sm-tinta);
}

body.page-id-1257 .entry-content,
body.page-id-3 .entry-content,
body.page-id-1260 .entry-content, body.page-id-1264 .entry-content {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sm-gris);
}

body.page-id-1257 .entry-content h2,
body.page-id-3 .entry-content h2,
body.page-id-1260 .entry-content h2, body.page-id-1264 .entry-content h2 {
	margin-top: 32px;
	font-size: 24px;
	font-weight: 700;
	color: var(--sm-tinta);
}

@media (max-width: 900px) {
	body.page-id-1257 .site-content,
	body.page-id-3 .site-content,
	body.page-id-1260 .site-content, body.page-id-1264 .site-content {
		padding: 56px 0;
	}

	body.page-id-1257 .entry-title,
	body.page-id-3 .entry-title,
	body.page-id-1260 .entry-title, body.page-id-1264 .entry-title {
		font-size: 28px;
	}
}


/* =========================================================================
   9. PÁGINA 16 · «Quiénes Somos» (Profesionales, slug /quienes-somos/)
      Figma: PROFESSIONALS — Categoría (58:294). Reutiliza de la sección 2:
      .sm-sari, .sm-pro, .sm-eyebrow, .sm-h2, .sm-btn--primario y .sm-cta.
      Aquí solo lo exclusivo de esta página.
   ====================================================================== */

/* --- 9.1  Cabecera (Figma: «Header» 58:303) ------------------------------
   Banda simple alineada a la izquierda, con degradado vertical suave y el
   título en degradado de tinta a verde. */

body.page-id-16 .sm-qs-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	padding: 72px var(--sm-padding-lateral);
	background-image: linear-gradient(to top, #edf7e5, #fff);
}

body.page-id-16 .sm-qs-head__titulo {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: normal;
	background-image: linear-gradient(90deg, #222, #459d6a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body.page-id-16 .sm-qs-head__sub {
	max-width: 760px;
	margin: 0;
	font-size: 17px;
	line-height: 1.48;
	color: var(--sm-gris-2);
}

/* --- 9.2  Sari destacada (Figma: «Sari destacada» 58:307) ----------------
   Es el bloque compartido .sm-sari con tres matices: la foto es algo menor,
   lleva un eyebrow «TU PROFESORA» y cierra con un botón en vez de la lista
   de hitos. */

body.page-id-16 .sm-sari {
	gap: 56px;
	padding-top: 80px;
	padding-bottom: 80px;
}

body.page-id-16 .sm-sari__foto {
	flex-basis: 440px;
	width: 440px;
	height: 480px;
}

/* --- 9.3  Colaboradores (Figma: «Colaboradores» 58:322) ------------------
   Rejilla de tarjetas .sm-pro (no el carrusel): mismas piezas, pero en
   flex-wrap, más anchas y con una línea extra de «N cursos · M episodios».
   Los retratos son fotos reales verticales, así que se encuadran con
   object-fit en vez de los offsets por-imagen del carrusel. */

body.page-id-16 .sm-colab {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	padding: 80px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde);
}

body.page-id-16 .sm-colab__cab {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
}

body.page-id-16 .sm-colab__sub {
	margin: 0;
	font-size: 16px;
	color: var(--sm-gris-2);
}

body.page-id-16 .sm-colab__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	width: 80%;
}
@media(max-width:1184px) {
	body.page-id-16 .sm-colab__grid {
		width: 100%;
	}
}
body.page-id-16 .sm-colab .sm-pro {
	flex: 0 1 414px;
	width: 414px;
	max-width: 100%;
	min-width: 0;
}

body.page-id-16 .sm-colab .sm-pro__foto {
	height: 260px;
}

body.page-id-16 .sm-colab .sm-pro__foto img {
	position: static;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center 5%;
}

body.page-id-16 .sm-colab .sm-pro__cuerpo {
	padding: 4px 20px 20px;
}

body.page-id-16 .sm-colab .sm-pro__nombre {
	font-size: 18px;
}

body.page-id-16 .sm-colab .sm-pro__esp {
	font-size: 14px;
}

body.page-id-16 .sm-colab .sm-pro__meta {
	margin: 0;
	font-size: 12px;
	color: var(--sm-verde);
}

/* En el Figma «Ver perfil →» no va subrayado (a diferencia del carrusel). */
body.page-id-16 .sm-colab .sm-pro__link {
	text-decoration: none;
}

body.page-id-16 .sm-colab .sm-pro__link:hover,
body.page-id-16 .sm-colab .sm-pro__link:focus,
body.page-id-16 .sm-colab .sm-pro__link:active {
	text-decoration: underline;
}

/* --- 9.4  CTA de cierre (Figma: «CTA» 58:373) ----------------------------
   Componente compartido .sm-cta; esta página solo cambia el degradado y el
   tamaño del título. */

body.page-id-16 .sm-cta {
	background-image: linear-gradient(90deg, #5fb683 0%, #b1d47a 108.85%);
}

body.page-id-16 .sm-cta__titulo {
	font-size: 32px;
}

/* --- 9.5  Móvil y tableta -------------------------------------------------
   No hay diseño móvil en Figma. Las secciones a sangre reducen su margen
   lateral y la rejilla de colaboradores se apila; el resto lo resuelven ya
   los componentes compartidos (.sm-sari, .sm-cta). */

@media (max-width: 900px) {
	body.page-id-16 .sm-qs-head,
	body.page-id-16 .sm-colab {
		padding-right: 20px;
		padding-left: 20px;
	}

	body.page-id-16 .sm-qs-head {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	body.page-id-16 .sm-qs-head__titulo {
		font-size: 34px;
	}

	body.page-id-16 .sm-colab {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

@media (max-width: 600px) {
	body.page-id-16 .sm-colab .sm-pro {
		flex-basis: 100%;
		width: 100%;
	}
}


/* =========================================================================
   10. FICHAS DE PROFESIONAL (páginas hijas de «Quiénes Somos», 16)
       Sari Arponen (5023, /quienes-somos/sari-arponen/) y Antonio Valenzuela
       (5092, /quienes-somos/antonio-valenzuela/).
       Figma: PROFILE - Dra. Sari Arponen (61:304) y PROFILE - Antonio
       Valenzuela (534:243). Reutilizan de la sección 2: .sm-eyebrow, .sm-chip,
       .sm-btn--primario, .sm-btn--secundario, .sm-curso y .sm-cta.

       Las clases .sm-perfil-*, .sm-cv y .sm-libros solo existen en estas
       fichas, así que van sin page-id: son el vocabulario común de todas las
       fichas. Lo que sí hay que acotar es el retoque de un componente
       compartido con el resto del sitio (.sm-cta), y para eso vale la clase
       body.parent-pageid-16 que WordPress ya pone en las páginas hijas.
       Lo exclusivo de cada ficha va en su propia sección (14 para Antonio).
   ====================================================================== */

/* --- 10.0  Migas de pan (Figma: 533:2608) --------------------------------
   Banda fina sobre el hero: «Profesionales › Antonio Valenzuela». De momento
   solo la usa la ficha de Antonio; está aquí, y no en su sección, porque es
   vocabulario de ficha y la de Sari la heredará en cuanto se le añada. */

.sm-migas {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 18px var(--sm-padding-lateral);
	background-color: #fff;
	font-size: 13px;
	color: var(--sm-gris-2);
}

.sm-migas__link {
	color: var(--sm-gris-2);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.sm-migas__link:hover,
.sm-migas__link:focus,
.sm-migas__link:active {
	color: var(--sm-verde-oscuro);
	text-decoration: underline;
}

.sm-migas__sep {
	color: var(--sm-borde);
}

/* --- 10.1  Hero (Figma: «Hero» 61:313) -----------------------------------
   Texto a la izquierda, retrato a la derecha; degradado vertical de blanco a
   verde muy suave. */

.sm-perfil-hero {
	display: flex;
	gap: 56px;
	align-items: center;
	padding: 44px var(--sm-padding-lateral) 64px;
	background-image: linear-gradient(180deg, #fff 0%, #edf7e5 100%);
}

.sm-perfil-hero__texto {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
	min-width: 0;
}

.sm-perfil-hero__titulo {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: normal;
	color: var(--sm-tinta-2);
}

.sm-perfil-hero__sub {
	max-width: 619px;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--sm-gris-2);
}

/* Enlaces a la web y las redes de quien firma la ficha (Figma 570:274). Van en
   el hero, entre el subtítulo y el botón. Cada uno es un icono más su rótulo;
   sin padding a la izquierda, para que el primer icono alinee con el título. */
.sm-perfil-hero__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0 5px;
	align-items: center;
}

.sm-perfil-hero__red {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 10px 16px 10px 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: #333;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.sm-perfil-hero__red:hover,
.sm-perfil-hero__red:focus,
.sm-perfil-hero__red:active {
	color: var(--sm-verde-oscuro);
}

/* El logotipo de Instagram es a color y pesa más que el globo de trazo, así
   que va algo mayor para que ópticamente casen (23×22 y 16×16 en Figma). */
.sm-perfil-hero__red-icono {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.sm-perfil-hero__red--instagram .sm-perfil-hero__red-icono {
	width: 22px;
	height: 22px;
}

.sm-perfil-hero__foto {
	flex: 0 0 560px;
	width: 560px;
	height: 500px;
	margin: 0;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

.sm-perfil-hero__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
}

/* Sari es la excepción: su frame es el primero que se diseñó y lleva el
   retrato más ancho, con el encuadre algo más bajo. */
body.page-id-5023 .sm-perfil-hero__foto {
	flex: 0 0 617px;
	width: 617px;
}

body.page-id-5023 .sm-perfil-hero__foto img {
	object-position: center 20%;
}

/* --- 10.2  Cita destacada (Figma: «Statement» 61:325) --------------------- */

.sm-perfil-cita {
	padding: 72px var(--sm-padding-lateral);
	background-color: #f8f8f8;
	text-align: center;
}

.sm-perfil-cita__texto {
	max-width: 950px;
	margin: 0 auto;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sm-tinta-2);
}

.sm-perfil-cita__autor {
	margin: 20px 0 0;
	font-size: 16px;
}

.sm-perfil-cita__autor span {
	font-weight: 400;
	color: #5B5B5B;
}

/* --- 10.3  Trayectoria y credenciales (Figma: 353:246) -------------------
   Tres grupos (formación, experiencia, publicaciones). Cada entrada es una
   fila fecha | (nombre + descripción). */

.sm-cv {
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
	padding: 72px var(--sm-padding-lateral);
	background-color: #fff;
}

.sm-cv__titulo {
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	color: var(--sm-tinta-2);
}

.sm-cv__grupo {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.sm-cv__label {
	margin: 0 0 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sm-borde-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.72px;
	color: var(--sm-verde);
}

.sm-cv__fila {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	padding: 8px 0;
}

.sm-cv__fecha {
	flex: 0 0 120px;
	width: 120px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-gris-2);
}

.sm-cv__entrada {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sm-cv__nombre {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--sm-tinta-2);
}

.sm-cv__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-gris-2);
}

/* --- 10.4  Libros e investigación (Figma: «Libros e investigación» 62:371)
   Rejilla de cuatro portadas; la portada va «contain» sobre un fondo gris
   claro, para que no se recorte ningún libro. */

.sm-libros {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	padding: 56px var(--sm-padding-lateral);
	background-color: #fff;
}

.sm-libros__titulo {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: normal;
	color: var(--sm-tinta-2);
}

.sm-libros__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	width: 100%;
}

.sm-libro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.sm-libro__foto {
	height: 260px;
	margin: 0;
	border: 0.5px solid #b4b4b4;
	border-radius: var(--sm-r-imagen);
	background-color: #ededed;
	overflow: hidden;
}

.sm-libro__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sm-libro__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: normal;
	color: var(--sm-tinta-2);
}

.sm-libro__estrellas {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #ffc414;
}

.sm-libro__link {
	font-size: 14px;
	color: #3b82f2;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.sm-libro__link:hover,
.sm-libro__link:focus,
.sm-libro__link:active {
	text-decoration: underline;
}

/* --- 10.5  Sus cursos (Figma: «Sus cursos» 62:308) -----------------------
   Reutiliza la tarjeta .sm-curso de la sección 2; aquí solo la banda y la
   rejilla de tres columnas. */

.sm-perfil-cursos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	padding: 56px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde);
}

.sm-perfil-cursos__titulo {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: normal;
	color: var(--sm-tinta-2);
}

.sm-perfil-cursos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
}

/* --- 10.6  Sobre el profesional (Figma: «Sobre Antonio» 537:246,
       «Sobre Almudena» 538:1042) -------------------------------------------
   Dos columnas: la biografía se lleva el espacio sobrante y el raíl de
   formación es una tarjeta fija de 340px sobre fondo verde claro. La ficha de
   Sari no lo usa (ella tiene .sm-cv, la trayectoria en fila de fechas). */

.sm-perfil-sobre {
	display: flex;
	gap: 64px;
	align-items: flex-start;
	padding: 72px var(--sm-padding-lateral);
	background-color: #fff;
}

.sm-perfil-bio {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.sm-perfil-bio__titulo {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.16;
	color: var(--sm-tinta-2);
}

.sm-perfil-bio__texto {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sm-gris-2);
}

.sm-perfil-rail {
	flex: 0 0 340px;
	width: 340px;
	padding: 24px;
	border-radius: 12px;
	background-color: var(--sm-fondo-verde);
}

.sm-perfil-rail__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.48px;
	color: #8a8a8a;
}

/* Cada entrada es un par clave/valor. La primera separa algo más del rótulo,
   como en Figma. */
.sm-perfil-rail__fila {
	padding-top: 16px;
}

.sm-perfil-rail__fila:first-of-type {
	padding-top: 20px;
}

.sm-perfil-rail__clave {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: normal;
	color: #8a8a8a;
}

.sm-perfil-rail__valor {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sm-tinta-2);
}

/* --- 10.7  Tarjeta de membresía (Figma: «Ver todas las formaciones»
       544:326 / 544:1057) ---------------------------------------------------
   Acompaña al curso en las fichas que solo imparten uno, para que la banda no
   quede coja. */

.sm-perfil-membresia {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	padding: 26px;
	border: 1px solid var(--sm-borde-2);
	border-radius: 12px;
	background-color: var(--sm-fondo-verde);
}

/* El chip compartido va sobre fondo verde en el resto del sitio; aquí la
   tarjeta ya es verde, así que se invierte a fondo blanco. */
.sm-perfil-membresia .sm-chip {
	background-color: #fff;
	color: var(--sm-verde);
}

.sm-perfil-membresia__titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--sm-tinta-2);
}

.sm-perfil-membresia__texto {
	margin: 0;
	font-size: 14px;
	line-height: 1.58;
	color: var(--sm-gris-2);
}

/* --- 10.8  CTA de cierre (Figma: «CTA» 64:352) --------------------------
   Componente compartido .sm-cta; las fichas solo cambian el degradado y el
   tamaño del título. */

body.parent-pageid-16 .sm-cta {
	background-image: linear-gradient(90deg, #5fb683 0%, #b1d47a 107.78%);
}

body.parent-pageid-16 .sm-cta__titulo {
	font-size: 32px;
}

/* --- 10.9  Móvil y tableta -----------------------------------------------
   No hay diseño móvil en Figma. El hero se apila (retrato debajo del texto),
   las rejillas de libros y cursos reducen columnas y las secciones a sangre
   recortan su margen lateral. */

@media (max-width: 900px) {
	.sm-perfil-hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		padding: 56px 20px;
	}

	.sm-perfil-hero__titulo {
		font-size: 36px;
	}

	.sm-perfil-hero__foto {
		flex: 0 0 auto;
		width: 100%;
		height: 420px;
	}

	.sm-perfil-cita,
	.sm-cv,
	.sm-libros,
	.sm-perfil-cursos,
	.sm-migas {
		padding-right: 20px;
		padding-left: 20px;
	}

	.sm-perfil-cita__texto {
		font-size: 24px;
	}

	/* «Sobre el profesional»: el raíl de formación baja debajo de la bio. */
	.sm-perfil-sobre {
		flex-direction: column;
		gap: 32px;
		padding: 56px 20px;
	}

	.sm-perfil-rail {
		flex: 0 0 auto;
		width: 100%;
	}

	.sm-libros__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sm-perfil-cursos__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.sm-cv__fila {
		flex-direction: column;
		gap: 4px;
	}

	.sm-cv__fecha {
		flex-basis: auto;
		width: auto;
	}

	.sm-libros__grid {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
   11. PÁGINA 12 · «Podcast» (slug /podcast/)
       Figma: «PODCAST — Slow Medicine Revolution» (230:839). Excepción a la
       regla del blog: la página se rediseña, pero las entradas del podcast no
       se tocan (solo se leen para el listado dinámico). El listado lo pinta el
       shortcode [sm_podcast_episodios] (functions.php). El CTA de cierre
       reutiliza el componente compartido .sm-cta (sección 2.10).
   ====================================================================== */

/* --- 11.1  Hero --------------------------------------------------------- */

body.page-id-12 .sm-ep-hero {
	display: flex;
	gap: 80px;
	align-items: center;
	padding: 88px var(--sm-padding-lateral);
	background-color: #fdfcf9;
}

body.page-id-12 .sm-ep-hero__texto {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
	min-width: 0;
}

body.page-id-12 .sm-ep-hero__titulo {
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 1.1;
	color: #2d2d2d;
}

body.page-id-12 .sm-ep-hero__sub {
	max-width: 440px;
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: #5f5e5c;
}

body.page-id-12 .sm-ep-hero__desc {
	max-width: 520px;
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #5f5e5c;
}

body.page-id-12 .sm-ep-hero__premio {
	display: flex;
	gap: 16px;
	align-items: center;
}

body.page-id-12 .sm-ep-hero__sello {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

body.page-id-12 .sm-ep-hero__sello img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.page-id-12 .sm-ep-hero__premio-tit {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sm-tinta);
}

body.page-id-12 .sm-ep-hero__premio-sub {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sm-gris);
}

body.page-id-12 .sm-ep-hero__premio-sub strong {
	font-weight: 700;
	color: var(--sm-tinta);
}

body.page-id-12 .sm-ep-hero__img {
	flex: 0 0 540px;
	width: 540px;
	height: 362px;
	max-width: 100%;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
}

body.page-id-12 .sm-ep-hero__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 11.2  Audiencia (stats de plataformas) ----------------------------- */

body.page-id-12 .sm-ep-stats {
	padding: 24px var(--sm-padding-lateral);
	background-color: #fff;
}

body.page-id-12 .sm-ep-stats__fila {
	display: flex;
	align-items: center;
}

body.page-id-12 .sm-stat {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	min-width: 0;
	padding: 12px 48px;
}

body.page-id-12 .sm-stat:first-child {
	padding-left: 0;
}

body.page-id-12 .sm-stat:last-child {
	padding-right: 0;
}

/* En iVoox y Spotify el encabezado (logo + nombre) es un enlace al canal
   general; en YouTube es un <div> y no enlaza (criterio de Vero). */
body.page-id-12 .sm-stat__plat {
	display: flex;
	gap: 8px;
	align-items: center;
	text-decoration: none;
}

body.page-id-12 a.sm-stat__plat {
	transition: all 0.3s ease-in-out;
}

body.page-id-12 a.sm-stat__plat:hover,
body.page-id-12 a.sm-stat__plat:focus,
body.page-id-12 a.sm-stat__plat:active {
	opacity: 0.7;
}

body.page-id-12 .sm-stat__logo {
	width: 20px;
	height: 20px;
	border-radius: 2px;
	object-fit: contain;
}

body.page-id-12 .sm-stat__nombre {
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-gris-2);
}

body.page-id-12 .sm-stat__cifra {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	color: var(--sm-tinta-2);
}

body.page-id-12 .sm-stat__etq {
	margin: 0;
	font-size: 15px;
	color: var(--sm-gris-2);
}

body.page-id-12 .sm-stat__rating {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
}

body.page-id-12 .sm-stat__estrellas {
	font-size: 14px;
	letter-spacing: 2px;
	color: #ffc200;
}

body.page-id-12 .sm-stat__nota {
	font-size: 13px;
	font-weight: 500;
	color: #333;
}

body.page-id-12 .sm-stat__resenas {
	font-size: 12px;
	color: #808080;
}

body.page-id-12 .sm-stat__div {
	flex: 0 0 1px;
	width: 1px;
	height: 72px;
	background-color: var(--sm-borde-2);
}

/* --- 11.3  El Podcast (intro + chips de tema) --------------------------- */

body.page-id-12 .sm-ep-intro {
	display: flex;
	gap: 60px;
	align-items: flex-start;
	padding: 88px var(--sm-padding-lateral);
	background-color: #f7faf3;
}

body.page-id-12 .sm-ep-intro__head {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

body.page-id-12 .sm-ep-intro__titulo {
	font-size: 40px;
	line-height: 1.18;
	color: var(--sm-tinta-2);
}

body.page-id-12 .sm-ep-intro__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

body.page-id-12 .sm-ep-intro__p {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sm-gris-2);
}

body.page-id-12 .sm-ep-intro__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Chip de tema en versión contorno (distinta del .sm-chip verde relleno). */
body.page-id-12 .sm-ep-chip {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #a2a999;
	border-radius: var(--sm-r-chip);
	font-size: 13px;
	font-weight: 500;
	color: #929292;
}

/* --- 11.4  Archivo de episodios ----------------------------------------- */

body.page-id-12 .sm-ep-archivo {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 56px var(--sm-padding-lateral) 64px;
	background-color: #fff;
}

body.page-id-12 .sm-ep-archivo__cab {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

body.page-id-12 .sm-ep-archivo__titulo {
	font-size: 26px;
	color: var(--sm-tinta-2);
}

body.page-id-12 .sm-ep-panel {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
	padding: 24px;
	border: 1px solid var(--sm-borde-2);
	border-radius: 12px;
	background-color: #fff;
}

/* Ficha del show (columna izquierda) */
body.page-id-12 .sm-ep-show {
	display: flex;
	flex: 0 0 240px;
	flex-direction: column;
	gap: 14px;
	width: 240px;
}

body.page-id-12 .sm-ep-show__cover {
	height: 241px;
	margin: 0;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

body.page-id-12 .sm-ep-show__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.page-id-12 .sm-ep-show__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--sm-tinta-2);
}

body.page-id-12 .sm-ep-show__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sm-gris-2);
}

body.page-id-12 .sm-ep-show__btn {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 11px 14px;
	border-radius: var(--sm-r-boton);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

body.page-id-12 .sm-ep-show__btn img {
	width: 20px;
	height: 20px;
}

body.page-id-12 .sm-ep-show__btn--ivoox {
	background-color: var(--sm-verde);
	color: #fff;
}

body.page-id-12 .sm-ep-show__btn--ivoox:hover,
body.page-id-12 .sm-ep-show__btn--ivoox:focus,
body.page-id-12 .sm-ep-show__btn--ivoox:active {
	background-color: var(--sm-verde-oscuro);
	color: #fff;
}

body.page-id-12 .sm-ep-show__btn--spotify {
	border: 1px solid var(--sm-borde-2);
	background-color: #fff;
	color: var(--sm-tinta-2);
}

body.page-id-12 .sm-ep-show__btn--spotify:hover,
body.page-id-12 .sm-ep-show__btn--spotify:focus,
body.page-id-12 .sm-ep-show__btn--spotify:active {
	background-color: #f4f4f6;
	color: var(--sm-tinta-2);
}

/* Lista de episodios (columna derecha) */
body.page-id-12 .sm-ep-lista {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

body.page-id-12 .sm-ep {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 18px 0;
}

body.page-id-12 .sm-ep + .sm-ep {
	border-top: 1px solid var(--sm-borde-2);
}

body.page-id-12 .sm-ep__info {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

body.page-id-12 .sm-ep__meta {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.44px;
	text-transform: uppercase;
	color: var(--sm-gris-2);
}

body.page-id-12 .sm-ep__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-tinta-2);
}

body.page-id-12 .sm-ep__titulo a {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

body.page-id-12 .sm-ep__titulo a:hover,
body.page-id-12 .sm-ep__titulo a:focus,
body.page-id-12 .sm-ep__titulo a:active {
	color: var(--sm-verde-oscuro);
}

body.page-id-12 .sm-ep__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sm-gris-3);
}

body.page-id-12 .sm-ep__notas {
	font-size: 13px;
	color: var(--sm-verde);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

body.page-id-12 .sm-ep__notas:hover,
body.page-id-12 .sm-ep__notas:focus,
body.page-id-12 .sm-ep__notas:active {
	color: var(--sm-verde-oscuro);
}

body.page-id-12 .sm-ep__dest {
	flex: 0 0 auto;
}

body.page-id-12 .sm-ep__ivoox {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 6px 10px;
	border: 1px solid var(--sm-borde-2);
	border-radius: var(--sm-r-chip);
	font-size: 12px;
	font-weight: 500;
	color: var(--sm-tinta-2);
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.3s ease-in-out;
}

body.page-id-12 .sm-ep__ivoox img {
	width: 20px;
	height: 20px;
}

body.page-id-12 .sm-ep__ivoox:hover,
body.page-id-12 .sm-ep__ivoox:focus,
body.page-id-12 .sm-ep__ivoox:active {
	border-color: var(--sm-verde);
	color: var(--sm-verde-oscuro);
}

/* «Ver más episodios» (carga AJAX): es un <button>, hereda la fuente por la
   regla de la sección 4. */
body.page-id-12 .sm-ep-mas {
	align-self: flex-start;
	margin-top: 20px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--sm-verde);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

body.page-id-12 .sm-ep-mas:hover,
body.page-id-12 .sm-ep-mas:focus,
body.page-id-12 .sm-ep-mas:active {
	color: var(--sm-verde-oscuro);
}

body.page-id-12 .sm-ep-mas.is-cargando,
body.page-id-12 .sm-ep-mas[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* --- 11.5  Móvil y tableta ---------------------------------------------- */

@media (max-width: 900px) {
	body.page-id-12 .sm-ep-hero {
		flex-direction: column;
		gap: 36px;
		align-items: flex-start;
		padding: 56px 20px;
	}

	body.page-id-12 .sm-ep-hero__img {
		order: -1;
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 540 / 362;
	}

	body.page-id-12 .sm-ep-hero__titulo {
		font-size: 36px;
	}

	body.page-id-12 .sm-ep-stats {
		padding: 24px 20px;
	}

	body.page-id-12 .sm-ep-stats__fila {
		flex-wrap: wrap;
		gap: 28px 0;
	}

	body.page-id-12 .sm-stat {
		flex: 1 0 45%;
		padding: 0 16px;
	}

	body.page-id-12 .sm-stat__div {
		display: none;
	}

	body.page-id-12 .sm-ep-intro {
		flex-direction: column;
		gap: 28px;
		padding: 64px 20px;
	}

	body.page-id-12 .sm-ep-intro__titulo {
		font-size: 30px;
	}

	body.page-id-12 .sm-ep-archivo {
		padding: 48px 20px;
	}

	body.page-id-12 .sm-ep-panel {
		flex-direction: column;
	}

	body.page-id-12 .sm-ep-show {
		flex: none;
		width: 100%;
	}

	body.page-id-12 .sm-ep-show__cover {
		height: 280px;
	}

	body.page-id-12 .sm-ep {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	body.page-id-12 .sm-ep-stats__fila {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
	}

	body.page-id-12 .sm-stat {
		padding: 0;
	}

	body.page-id-12 .sm-ep-hero__titulo {
		font-size: 30px;
	}
}


/* =========================================================================
   12. FICHA DE CURSO · single-curso (CPT «curso»)
       Figma: «Course / Ficha» (52:257). Solo lo exclusivo de la ficha; el resto
       sale de los componentes compartidos (.sm-eyebrow, .sm-h2, .sm-btn,
       .sm-testi, .sm-faq, .sm-curso, .sm-cta). El contenedor .sm-ficha va
       centrado; las bandas del cierre (opiniones, FAQ, relacionados, CTA) van
       a sangre, fuera de él.
   ====================================================================== */

body.single-curso .sm-ficha {
	max-width: var(--sm-contenido);
	margin: 0 auto;
	padding: 40px 0 72px;
}

/* --- 12.1 Migas de pan --------------------------------------------------- */

.sm-ficha__migas {
	margin: 0 0 28px;
	font-size: 13px;
	color: var(--sm-gris);
}

.sm-ficha__migas a {
	color: var(--sm-verde);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.sm-ficha__migas a:hover,
.sm-ficha__migas a:focus,
.sm-ficha__migas a:active {
	color: var(--sm-verde-oscuro);
	text-decoration: underline;
}

/* --- 12.2 Hero: contenido + tarjeta de compra --------------------------- */

.sm-ficha-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 48px;
	align-items: start;
}

.sm-ficha-hero__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	min-width: 0;
}

.sm-ficha-hero__titulo {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sm-tinta);
}

.sm-ficha-hero__imagen {
	width: 100%;
	margin: 4px 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--sm-r-imagen);
	overflow: hidden;
}

.sm-ficha-hero__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-ficha-hero__intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--sm-gris);
}

.sm-ficha-incluye__titulo {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--sm-tinta);
}

.sm-ficha-incluye {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sm-gris);
}

.sm-ficha-incluye li {
	position: relative;
	padding-left: 20px;
}

.sm-ficha-incluye li::before {
	content: "–";
	position: absolute;
	left: 0;
	color: var(--sm-verde);
}

.sm-ficha-autor {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 4px;
}

.sm-ficha-autor__avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #e5e5e9;
}

.sm-ficha-autor__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
}

.sm-ficha-autor__txt {
	margin: 0;
	font-size: 14px;
	color: var(--sm-tinta);
}

/* Tarjeta de compra (sticky en escritorio) */
.sm-ficha-compra {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 25px;
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	background-color: #fff;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.07);
}

.sm-ficha-compra__thumb {
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background-color: #e5e5e9;
}

.sm-ficha-compra__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-ficha-compra__titulo {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sm-tinta);
}

.sm-ficha-compra__precio {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	color: var(--sm-tinta);
}

.sm-ficha-compra__lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--sm-gris);
}

.sm-ficha-compra__lista li {
	position: relative;
	padding-left: 26px;
}

.sm-ficha-compra__lista li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--sm-verde);
	font-weight: 700;
}

.sm-ficha-compra .sm-btn {
	width: 100%;
}

.sm-ficha-compra__seguro {
	margin: 0;
	font-size: 12px;
	color: var(--sm-gris);
	text-align: center;
}

/* --- 12.3 Bloques centrales --------------------------------------------- */

.sm-ficha-bloque {
	padding: 50px 0 35px 0;
}

.sm-ficha-bloque > .sm-h2 {
	margin: 0 0 24px;
}

/* Qué vas a conseguir: checklist a dos columnas */
.sm-ficha-logros__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-ficha-logros__grid li {
	position: relative;
	padding-left: 28px;
	font-size: 16px;
	color: var(--sm-tinta);
}

.sm-ficha-logros__grid li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #222;
	font-weight: 500;
}

/* Para quién es este curso */
.sm-ficha-publico__texto {
	max-width: 780px;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--sm-gris);
}

.sm-ficha-publico__nota {
	display: inline-block;
	padding: 12px 18px;
	border-radius: 10px;
	background-color: var(--sm-fondo-verde);
	font-size: 14px;
	color: #222;
}

/* Temario: acordeón de módulos en una caja con borde. El WYSIWYG «programa» se
   trocea en módulos con smi_curso_temario_html(): título a la izquierda, meta
   («N lecciones · X h») + icono a la derecha, lecciones desplegables debajo. */
.sm-ficha-temario {
	border: 1px solid var(--sm-borde);
	border-radius: var(--sm-r-tarjeta);
	overflow: hidden;
	counter-reset: sm-mod;
}

.sm-ficha-mod {
	border-top: 1px solid var(--sm-borde);
}

.sm-ficha-mod:first-child {
	border-top: 0;
}

.sm-ficha-mod__cab {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 18px 22px;
	list-style: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.sm-ficha-mod__cab::-webkit-details-marker {
	display: none;
}

.sm-ficha-mod--plano .sm-ficha-mod__cab {
	cursor: default;
}

.sm-ficha-mod__titulo {
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 600;
	color: var(--sm-tinta);
}

/* Numeración automática de módulos (01, 02…), en la misma fila que el título. */
/* .sm-ficha-mod__titulo::before {
	counter-increment: sm-mod;
	content: counter(sm-mod, decimal-leading-zero);
	margin-right: 12px;
	color: var(--sm-verde);
	font-weight: 700;
} */

.sm-ficha-mod__meta {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--sm-gris);
	white-space: nowrap;
}

/* Icono +/− a la derecha del todo (solo en los módulos desplegables). */
details.sm-ficha-mod > .sm-ficha-mod__cab::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 400;
	color: var(--sm-gris);
}

details.sm-ficha-mod[open] > .sm-ficha-mod__cab::after {
	content: "−";
}

details.sm-ficha-mod > summary.sm-ficha-mod__cab:hover,
details.sm-ficha-mod > summary.sm-ficha-mod__cab:focus,
details.sm-ficha-mod > summary.sm-ficha-mod__cab:active {
	color: var(--sm-verde-oscuro);
}

.sm-ficha-mod__cuerpo {
	padding: 0 22px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-gris);
	margin-top:-15px;
}

.sm-ficha-mod__cuerpo ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-ficha-mod__cuerpo li {
	position: relative;
	margin: 6px 0;
	padding-left: 16px;
}

.sm-ficha-mod__cuerpo li::before {
	content: "·";
	position: absolute;
	left: 4px;
}

/* Reserva por si el «programa» no lleva encabezados: se pinta tal cual. */
.sm-ficha-temario__prog {
	padding: 20px 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-gris);
}

/* Profesor/a (bloque compacto) */
.sm-ficha-profe {
	display: flex;
	gap: 20px;
	align-items: start;
}

.sm-ficha-profe__avatar {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	border-radius: 12px;
	overflow: hidden;
}

.sm-ficha-profe__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
}

.sm-ficha-profe__nombre {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--sm-tinta);
}

.sm-ficha-profe__rol {
	margin: 4px 0 14px;
	font-size: 14px;
	color: var(--sm-gris);
}

/* --- 12.4 Opiniones y FAQ como bloques de la ficha ----------------------
   En la ficha (Figma 54:276 y 54:303) no son bandas a sangre como en la
   portada: viven dentro de la columna de contenido, con el título a la
   izquierda y sin antetítulo. Reutilizan las tarjetas/ítems compartidos
   (.sm-testi__*, .sm-faq__*); aquí solo se declara lo que cambia. */

/* Opiniones: el nombre va en tinta (en la portada es verde) y el avatar es un
   cuadrado redondeado, no un círculo. */
.sm-ficha-opiniones .sm-testi__nombre {
	color: var(--sm-tinta);
}

.sm-ficha-opiniones .sm-testi__avatar {
	border-style: solid;
	border-radius: 8px;
}

/* FAQ: la lista ocupa todo el ancho de la columna (en la portada va a 860 px
   centrada). */
.sm-ficha-faq .sm-faq__lista {
	width: 100%;
}

/* --- 12.5 Bandas a sangre del cierre ------------------------------------ */

/* Estrellas de opiniones como texto (la ficha no usa el asset de estrella). */
.sm-testi__estrellas--txt {
	color: #f5a623;
	font-size: 23px;
	letter-spacing: 2px;
	line-height:1;
}

/* «También te puede interesar»: banda verde con la tarjeta .sm-curso. */
.sm-ficha-relacionados {
	padding: 88px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde);
}

.sm-ficha-relacionados__inner {
	max-width: var(--sm-contenido);
	margin: 0 auto;
}

.sm-ficha-relacionados__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 32px;
}

/* --- 12.6 Móvil y tableta ----------------------------------------------- */

@media (max-width: 900px) {
	.sm-ficha-hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sm-ficha-compra {
		position: static;
	}

	.sm-ficha-hero__titulo {
		font-size: 30px;
	}

	.sm-ficha-relacionados {
		padding-right: 20px;
		padding-left: 20px;
	}

	.sm-ficha-relacionados__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	body.single-curso .sm-ficha {
		padding-top: 24px;
	}

	.sm-ficha-logros__grid {
		grid-template-columns: 1fr;
	}
}
.sm-cta__sub a {
	color: white !important;
	transition: all .3s ease-in-out;
}
.sm-cta__sub a:hover, .sm-cta__sub a:active, .sm-cta__sub a:focus {
	opacity: .9 !important;
}
@media(max-width:1355px) and (min-width:769px) {
	body.single-curso .sm-ficha {
		padding: 40px var(--sm-padding-lateral) 72px;
	}
}
@media(max-width:768px) {
	body.single-curso .sm-ficha {
		padding-left:20px;
		padding-right: 20px;
	}
}
@media(max-width:1019px) {
	#menu-item-4982 {
		margin-bottom: -15px !important;
	}
	#menu-item-4982 a, #menu-item-4980 a {
		width: 142px;
		text-align: center;
		display:flex;
		justify-content:center;
	}
}
@media(max-width:768px) {
	#menu-item-4982 a, #menu-item-4980 a {
		margin: 0 !important;
	}
}


/* =========================================================================
   13. PÁGINA 20 · «Contacto»
      Figma: CONTACT (230:360). Cabecera y pie son los del sitio. Aquí solo
      lo exclusivo: hero verde, caja de aviso, y las dos columnas (formulario
      WPForms + tarjeta «Otras vías»). El eyebrow reutiliza .sm-eyebrow.
   ====================================================================== */

/* --- 13.1  Hero --------------------------------------------------------- */

body.page-id-20 .sm-contacto-hero {
	padding: 72px var(--sm-padding-lateral);
	background-color: var(--sm-fondo-verde);
}

body.page-id-20 .sm-contacto-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

/* El título hace un degradado horizontal de tinta a verde (Figma: from #222
   to #5fb683) recortado sobre el texto. */
body.page-id-20 .sm-contacto-hero__titulo {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: normal;
	background-image: linear-gradient(90deg, var(--sm-tinta-2), var(--sm-verde));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

body.page-id-20 .sm-contacto-hero__bajada {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--sm-gris-2);
}

/* --- 13.2  Caja de aviso ------------------------------------------------ */

body.page-id-20 .sm-contacto-aviso {
	padding: 40px var(--sm-padding-lateral);
	background-color: #fff;
}

body.page-id-20 .sm-contacto-aviso__caja {
	max-width: 962px;
	margin: 0 auto;
	padding: 18px 60px;
	border: 1px solid var(--sm-naranja);
	background-color: var(--sm-naranja-fondo);
	text-align: center;
}

body.page-id-20 .sm-contacto-aviso__titulo {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sm-naranja);
}

body.page-id-20 .sm-contacto-aviso__texto {
	max-width: 824px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sm-gris-2);
}

/* --- 13.3  Sección de formulario (dos columnas) ------------------------- */

body.page-id-20 .sm-contacto-form {
	padding: 64px var(--sm-padding-lateral) 80px;
	background-color: #f9f9f9;
}

body.page-id-20 .sm-contacto-form__inner {
	display: flex;
	gap: 56px;
	align-items: flex-start;
}

body.page-id-20 .sm-contacto-form__campos {
	flex: 1 1 0;
	min-width: 0;
}

/* --- 13.4  Formulario WPForms (form 729) -------------------------------- */

/* Se resetea el contenedor propio de WPForms para que el diseño lo marque el
   tema. */
body.page-id-20 .sm-contacto-form__campos .wpforms-container {
	margin: 0;
}

/* Cada campo es una fila; los dos con .wpforms-one-half comparten fila. El
   layout va con flex del contenedor de campos, no con los floats de WPForms,
   para que no dependa de que cargue su CSS base. */
body.page-id-20 .sm-contacto-form__campos .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

body.page-id-20 .sm-contacto-form__campos .wpforms-field {
	width: 100%;
	padding: 0;
	margin: 0;
	float: none;
	clear: none;
}

body.page-id-20 .sm-contacto-form__campos .wpforms-field.wpforms-one-half {
	width: calc(50% - 9px);
}

/* Etiquetas de campo. */
body.page-id-20 .sm-contacto-form__campos .wpforms-field-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: normal;
	color: var(--sm-tinta-2);
}

body.page-id-20 .sm-contacto-form__campos .wpforms-required-label {
	color: var(--sm-naranja);
}

/* Inputs, textarea y select con el estilo del frame. */
body.page-id-20 .sm-contacto-form__campos input[type="text"],
body.page-id-20 .sm-contacto-form__campos input[type="email"],
body.page-id-20 .sm-contacto-form__campos textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--sm-borde-2);
	border-radius: var(--sm-r-boton);
	background-color: #fff;
	font-family: var(--sm-fuente);
	font-size: 14px;
	color: var(--sm-tinta-2);
	transition: all 0.3s ease-in-out;
}

body.page-id-20 .sm-contacto-form__campos textarea {
	min-height: 140px;
	resize: vertical;
}

body.page-id-20 .sm-contacto-form__campos input::placeholder,
body.page-id-20 .sm-contacto-form__campos textarea::placeholder {
	color: #9999a1;
	opacity: 1;
}

body.page-id-20 .sm-contacto-form__campos input[type="text"]:focus,
body.page-id-20 .sm-contacto-form__campos input[type="email"]:focus,
body.page-id-20 .sm-contacto-form__campos textarea:focus {
	border-color: var(--sm-verde);
	outline: none;
}

/* La casilla de RGPD: la etiqueta general del campo («Acuerdo RGPD») es
   redundante, el texto real va en la casilla; se oculta para no ensuciar. */
body.page-id-20 .sm-contacto-form__campos .wpforms-field-checkbox > .wpforms-field-label {
	display: none;
}

body.page-id-20 .sm-contacto-form__campos .wpforms-field-checkbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-id-20 .sm-contacto-form__campos .wpforms-field-checkbox .wpforms-field-label-inline {
	font-size: 13px;
	font-weight: 400;
	color: var(--sm-gris-2);
}

/* Botón de envío: es el mismo verde del frame; hover = focus = active. */
body.page-id-20 .sm-contacto-form__campos .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: none;
	border-radius: var(--sm-r-boton);
	background-color: var(--sm-verde);
	font-family: var(--sm-fuente);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

body.page-id-20 .sm-contacto-form__campos .wpforms-submit:hover,
body.page-id-20 .sm-contacto-form__campos .wpforms-submit:focus,
body.page-id-20 .sm-contacto-form__campos .wpforms-submit:active {
	background-color: var(--sm-verde-btn);
	color: #fff;
}

/* Mensajes de error de validación y confirmación de éxito. */
body.page-id-20 .sm-contacto-form__campos .wpforms-error {
	font-size: 12px;
	color: #d63637;
}

body.page-id-20 .sm-contacto-form__campos input.wpforms-error,
body.page-id-20 .sm-contacto-form__campos textarea.wpforms-error {
	border-color: #d63637;
}

body.page-id-20 .sm-contacto-form__campos .wpforms-confirmation-container-full {
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--sm-verde);
	border-radius: var(--sm-r-boton);
	background-color: var(--sm-fondo-verde);
	color: var(--sm-tinta-2);
}

/* --- 13.5  Tarjeta «Otras vías» ----------------------------------------- */

body.page-id-20 .sm-contacto-vias {
	flex: 0 0 380px;
	width: 380px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border-radius: 16px;
	background-color: var(--sm-fondo-verde);
}

body.page-id-20 .sm-contacto-vias__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--sm-tinta-2);
}

body.page-id-20 .sm-contacto-vias__grupo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: flex-start;
}

body.page-id-20 .sm-contacto-vias__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sm-verde);
}

body.page-id-20 .sm-contacto-vias__valor {
	font-size: 14px;
	color: var(--sm-tinta-2);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

body.page-id-20 .sm-contacto-vias__valor:hover,
body.page-id-20 .sm-contacto-vias__valor:focus,
body.page-id-20 .sm-contacto-vias__valor:active {
	color: var(--sm-verde-oscuro);
	text-decoration: underline;
}

body.page-id-20 .sm-contacto-vias__chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	margin-top: 3px;
}

body.page-id-20 .sm-contacto-vias__chip {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--sm-r-chip);
	background-color: var(--sm-fondo-verde);
	font-size: 14px;
	font-weight: 500;
	color: var(--sm-tinta-2);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

body.page-id-20 .sm-contacto-vias__chip:hover,
body.page-id-20 .sm-contacto-vias__chip:focus,
body.page-id-20 .sm-contacto-vias__chip:active {
	background-color: var(--sm-chip);
	color: var(--sm-tinta-2);
}

body.page-id-20 .sm-contacto-vias__icono {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	object-fit: contain;
}

body.page-id-20 .sm-contacto-vias__nota {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sm-gris-2);
}

/* --- 13.6  Móvil y tableta ---------------------------------------------- */

@media (max-width: 900px) {
	body.page-id-20 .sm-contacto-form__inner {
		flex-direction: column;
		gap: 40px;
	}

	body.page-id-20 .sm-contacto-vias {
		flex-basis: auto;
		width: 100%;
	}
}

@media (max-width: 600px) {
	body.page-id-20 .sm-contacto-hero {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	body.page-id-20 .sm-contacto-hero__titulo {
		font-size: 34px;
	}

	body.page-id-20 .sm-contacto-aviso__caja {
		padding: 24px 20px;
	}

	body.page-id-20 .sm-contacto-form__campos .wpforms-field.wpforms-one-half {
		width: 100%;
	}
}
body.page-id-20 div.wpforms-container-full .wpforms-form input[type=date], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=datetime], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=datetime-local], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=email], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=month], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=number], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=password], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=range], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=search], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=tel], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=text], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=time], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=url], body.page-id-20 div.wpforms-container-full .wpforms-form input[type=week], body.page-id-20 div.wpforms-container-full .wpforms-form select, body.page-id-20 div.wpforms-container-full .wpforms-form textarea {
	border: 1px solid #DBDBE0 !important;
}
body.page-id-20 div.wpforms-container-full .wpforms-form button[type=submit] {
	display: flex;
	padding: 12px 20px;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	background: #5FB683;
	width:fit-content !important;
	font-family: var(--sm-fuente) !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 500;
	line-height: 26px;
	margin-top: 15px;
	transition: all .3s ease-in-out;
}
body.page-id-20 div.wpforms-container-full .wpforms-form button[type=submit]:hover, body.page-id-20 div.wpforms-container-full .wpforms-form button[type=submit]:active, body.page-id-20 div.wpforms-container-full .wpforms-form button[type=submit]:focus {
	background-color: var(--sm-verde-oscuro) !important;
}
@media (max-width: 450px) {
    body.page-id-20 .inside-article,  body.page-id-12 .inside-article {
        padding: 0px !important;
    }
}
@media (max-width: 768px) {
	body.page-id-20 .sm-contacto-hero, body.page-id-20 .sm-contacto-aviso, body.page-id-20 .sm-contacto-form {
		padding-left: 20px !important;
		padding-right:20px !important;
	}
}
body.page-id-20 div.wpforms-container-full .wpforms-form ul li:last-of-type {
	display: flex;
	align-items: start;
}
body.page-id-20 .sm-contacto-form__campos .wpforms-field-checkbox .wpforms-field-label-inline a {
	color: var(--sm-gris-2);
	text-decoration: underline;
	transition: all .3s ease-in-out;
}
body.page-id-20 .sm-contacto-form__campos .wpforms-field-checkbox .wpforms-field-label-inline a:hover, body.page-id-20 .sm-contacto-form__campos .wpforms-field-checkbox .wpforms-field-label-inline a:active, body.page-id-20 .sm-contacto-form__campos .wpforms-field-checkbox .wpforms-field-label-inline a:focus {
	color: black !important;
}
.error404 .site, .search .site {
	padding-top:50px !important; 
	padding-bottom: 80px !important;
}
.error404 .site .inside-article {
	text-align: center !important;
}



/* =========================================================================
   14. FICHAS DE UN SOLO CURSO · Antonio Valenzuela (5092),
       Dra. Almudena Nuño (5095) y Asun González (5097)
       Figma: PROFILE - Antonio Valenzuela (534:243), - Almudena Nuño
       (538:268) y - Asun González (mismo frame).
       Todo el diseño sale de la sección 10. Lo único propio es que, al
       impartir un solo curso, la rejilla de «Sus cursos» va a dos columnas
       (el curso y la tarjeta de membresía) en vez de a tres.
   ====================================================================== */

body.page-id-5092 .sm-perfil-cursos,
body.page-id-5095 .sm-perfil-cursos,
body.page-id-5097 .sm-perfil-cursos {
	background-color: var(--sm-fondo-gris);
}

/* La tarjeta de membresía se ajusta a su contenido, no a la altura de la
   tarjeta de curso (en Figma la rejilla alinea arriba). */
body.page-id-5092 .sm-perfil-cursos__grid,
body.page-id-5095 .sm-perfil-cursos__grid,
body.page-id-5097 .sm-perfil-cursos__grid {
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
}

@media (max-width: 900px) {
	/* Hay que repetir aquí el colapso a una columna: la regla de dos columnas
	   de arriba lleva page-id y gana por especificidad a la genérica que la
	   sección 10.9 declara para todas las fichas. */
	body.page-id-5092 .sm-perfil-cursos__grid,
	body.page-id-5095 .sm-perfil-cursos__grid,
	body.page-id-5097 .sm-perfil-cursos__grid {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
   15. FICHA SIN CURSO · Dra. África Villarroel (5096)
       Mismo frame que las demás, pero no imparte ningún curso: la página no
       lleva banda «Sus cursos» y el hero se queda sin botón (decisión de
       Vero, 2026-07-21: no hay destino al que llevar y la llamada a la
       membresía ya la hace la banda de cierre).
       Sin CSS propio: todo sale de la sección 10. Esta sección existe para
       dejar constancia de la variante.
   ====================================================================== */
blockquote {
	border-left: none !important;
	font-style: normal;
	padding: 0 !important;
}
.postid-5065 .sm-ficha-profe__avatar {
	background-color: #D4DDCB;
}
/* Solo en profesores sin ficha de profesional: como no hay botón «Ver perfil»
   al que ir, el bloque lleva aquí la descripción que en los demás cursos se
   lee en su página. Al ser el último hijo, no arrastra margen inferior. */
.sm-ficha-profe__bio {
	margin: 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sm-tinta);
}
body p, body a, body button, body span {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}