/*!
Theme Name: PopularFX
Theme URI: https://popularfx.com
Author: Pagelayer
Author URI: https://pagelayer.com
Description: Lightweight theme to make beautiful websites with Pagelayer. Includes 100s of pre-made templates to design your dream website !
Version: 99.0.0
License: LGPL v2.1
License URI: LICENSE
Text Domain: popularfx
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, entertainment, full-width-template, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, microformats, post-formats, theme-options, blog, rtl-language-support
Tested up to: 6.0
Requires PHP: 5.5

This theme is licensed under the LGPL v2.1.
*/

/* ==========================================================================
   Ramon Carmona — Redesign 2026
   Design tokens ported from the approved reference (Space Grotesk / DM Sans,
   indigo accent). Prefixed rc- to avoid clashing with theme/plugin classes.
   ========================================================================== */

:root{
	--rc-bg: #f5f7f9;
	--rc-bg-soft: #fbfcfe;
	--rc-fg: #0a0d16;
	--rc-fg-muted: #5e636f;
	--rc-card: #ffffff;
	--rc-border: #dcdee3;
	--rc-secondary: #ebeef5;
	--rc-accent: #463fd5;
	--rc-accent-deep: #4118a5;
	--rc-accent-soft: #ecebfb;
	--rc-primary: #0a0d16;
	--rc-primary-fg: #fcfcfc;

	--rc-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--rc-font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

	--rc-radius: 0.875rem;
	--rc-radius-sm: 0.5rem;
	--rc-radius-lg: 1.25rem;

	--rc-gradient-primary: linear-gradient(120deg, var(--rc-accent), var(--rc-accent-deep));
	--rc-gradient-hero: radial-gradient(1000px 520px at 50% -10%, color-mix(in oklab, var(--rc-accent) 14%, transparent), transparent 70%), linear-gradient(180deg, var(--rc-bg-soft), var(--rc-bg));

	--rc-shadow-card: 0 18px 50px -30px rgba(10, 13, 22, 0.35);
	--rc-shadow-glow: 0 24px 70px -30px rgba(70, 63, 213, 0.55);

	--rc-container: 1180px;
}

/* Reset (scoped to the redesigned home so the rest of the theme/plugins is untouched) */
.rc-home,
.rc-home *,
.rc-home *::before,
.rc-home *::after{
	box-sizing: border-box;
}

.rc-home{
	background: var(--rc-bg);
	color: var(--rc-fg);
	font-family: var(--rc-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.rc-home h1,
.rc-home h2,
.rc-home h3,
.rc-home h4{
	font-family: var(--rc-font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--rc-fg);
}

.rc-home p{
	margin: 0;
}

.rc-home ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.rc-home img{
	max-width: 100%;
	display: block;
}

.rc-home a{
	color: inherit;
	text-decoration: none;
}

.rc-container{
	max-width: var(--rc-container);
	margin: 0 auto;
	padding: 0 24px;
}

.rc-kicker{
	display: inline-block;
	font-family: var(--rc-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rc-accent);
	margin-bottom: 12px;
}

.rc-section__head{
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

.rc-section__head h2{
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	margin-bottom: 14px;
}

.rc-section__head p{
	color: var(--rc-fg-muted);
	font-size: 1.0625rem;
}

.rc-text-accent{
	background: var(--rc-gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- Buttons ---- */
.rc-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--rc-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.rc-btn--primary{
	background: var(--rc-primary);
	color: var(--rc-primary-fg);
}

.rc-btn--primary:hover{
	transform: translateY(-2px);
	box-shadow: var(--rc-shadow-glow);
}

.rc-btn--accent{
	background: var(--rc-gradient-primary);
	color: #fff;
}

.rc-btn--accent:hover{
	transform: translateY(-2px);
	box-shadow: var(--rc-shadow-glow);
}

.rc-btn--ghost{
	background: transparent;
	border-color: var(--rc-border);
	color: var(--rc-fg);
}

.rc-btn__icon{
	flex-shrink: 0;
}

.rc-btn--whatsapp{
	background: #25d366;
	color: #fff;
}

.rc-btn--whatsapp:hover{
	background: #1ebe5a;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(37, 211, 102, 0.6);
}

.rc-btn--ghost:hover{
	border-color: var(--rc-accent);
	color: var(--rc-accent);
}

.rc-btn--block{
	width: 100%;
}

.rc-btn:disabled{
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

/* ---- Header / Nav ---- */
.rc-home .site-header{
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 24px;
	background: rgba(245, 247, 249, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rc-border);
	font-family: var(--rc-font-body);
}

.rc-home .site-branding{
	display: flex;
	align-items: center;
}

.rc-home .site-title,
.rc-home .site-title a{
	font-family: var(--rc-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--rc-fg);
	letter-spacing: -0.01em;
}

.rc-home .site-description{
	display: none;
}

.rc-home .main-navigation ul#primary-menu{
	display: flex;
	align-items: center;
	gap: 8px;
}

.rc-home .main-navigation .rc-nav-link{
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rc-fg-muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.rc-home .main-navigation .rc-nav-link:hover{
	background: var(--rc-secondary);
	color: var(--rc-fg);
}

.rc-home .main-navigation .rc-nav-cta{
	margin-left: 8px;
}

.rc-home .menu-toggle{
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--rc-border);
	background: var(--rc-card);
	color: var(--rc-fg);
	font-size: 18px;
}

@media (max-width: 900px){
	.rc-home .menu-toggle{
		display: inline-flex;
	}

	.rc-home .main-navigation{
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--rc-card);
		border-bottom: 1px solid var(--rc-border);
		box-shadow: var(--rc-shadow-card);
		padding: 12px;
	}

	.rc-home .main-navigation.hidden-mobile{
		display: none;
	}

	.rc-home .main-navigation ul#primary-menu{
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.rc-home .main-navigation .rc-nav-link{
		padding: 12px 16px;
	}

	.rc-home .main-navigation .rc-nav-cta{
		margin: 8px 4px 4px;
		text-align: center;
	}
}

@media (min-width: 901px){
	.rc-home .main-navigation,
	.rc-home .main-navigation.hidden-mobile{
		display: block !important;
	}
}

/* ---- Hero ---- */
.rc-hero{
	position: relative;
	overflow: hidden;
	background: var(--rc-gradient-hero);
	padding: 72px 0 0;
}

.rc-hero__grid{
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	padding-bottom: 56px;
}

.rc-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rc-accent);
	margin-bottom: 24px;
}

.rc-hero__title{
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	margin-bottom: 22px;
}

.rc-hero__lead{
	font-size: 1.125rem;
	color: var(--rc-fg-muted);
	max-width: 560px;
	margin-bottom: 32px;
}

.rc-hero__cta{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 44px;
}

.rc-stats{
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 28px;
}

.rc-stat__num{
	display: block;
	font-family: var(--rc-font-display);
	font-size: 1.75rem;
	font-weight: 700;
	background: var(--rc-gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rc-stat__label{
	display: block;
	font-size: 0.8125rem;
	color: var(--rc-fg-muted);
	margin-top: 2px;
}

.rc-hero__media{
	position: relative;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Fiverr identity chip — circular photo w/ lime ring + attached "fiverr."
   button, then rating + Pro/Top Rated tags below. Sits under the hero photo. */
.rc-fv{
	position: relative;
	margin-top: -24px;
	z-index: 3;
	width: max-content;
	max-width: min(92vw, 470px);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
	padding: 12px 18px;
	background: #fff;
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	box-shadow: var(--rc-shadow-card);
	font-family: var(--rc-font-body);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rc-fv:hover{
	transform: translateY(-3px);
	box-shadow: 0 24px 55px -28px rgba(10, 13, 22, 0.4);
}

.rc-fv__id{
	display: inline-flex;
	align-items: center;
}

.rc-fv__avatar{
	position: relative;
	z-index: 2;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px #fff, 0 0 0 6px #a3e635;
	background: var(--rc-secondary);
}

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

.rc-fv__logo{
	display: inline-flex;
	align-items: center;
	margin-left: -24px;
	padding: 16px 30px 16px 42px;
	background: #1dbf73;
	color: #fff;
	border-radius: 0 999px 999px 0;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.03em;
	line-height: 1;
}

.rc-fv__logo b{
	color: #fff;
	font-size: 1.4em;
	line-height: 0;
	margin-left: 1px;
}

.rc-fv__meta{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	font-size: 0.9375rem;
}

.rc-fv__stars{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #1dbf73;
	letter-spacing: 1px;
}

.rc-fv__stars strong{
	color: var(--rc-fg);
	font-family: var(--rc-font-display);
	letter-spacing: 0;
}

.rc-fv__count{
	color: var(--rc-fg-muted);
	letter-spacing: 0;
}

.rc-fv__tags{
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.rc-fv__tag{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.rc-fv__tag--pro{
	background: rgba(70, 63, 213, 0.12);
	color: #3a33b8;
}

.rc-fv__tag--top{
	background: rgba(240, 165, 0, 0.16);
	color: #9a6b00;
}

.rc-fv__tag--top i{
	font-style: normal;
	font-size: 0.7em;
	letter-spacing: 1px;
}

@media (max-width: 560px){
	.rc-fv{
		gap: 6px 10px;
		padding: 9px 12px;
		max-width: 94vw;
		margin-top: -16px;
	}

	.rc-fv__avatar{
		width: 52px;
		height: 52px;
		box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a3e635;
	}

	.rc-fv__logo{
		margin-left: -16px;
		padding: 10px 16px 10px 26px;
		font-size: 1rem;
	}

	.rc-fv__meta{
		font-size: 0.75rem;
		gap: 4px;
	}

	.rc-fv__stars{
		letter-spacing: 0.5px;
	}

	.rc-fv__tag{
		padding: 3px 9px;
		font-size: 0.6875rem;
	}
}

.rc-hero__photo-wrap{
	position: relative;
	width: min(360px, 100%);
	border-radius: var(--rc-radius-lg);
	overflow: hidden;
	box-shadow: var(--rc-shadow-card);
	border: 1px solid var(--rc-border);
	background: var(--rc-card);
}

.rc-hero__photo{
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.rc-skillbar{
	border-top: 1px solid var(--rc-border);
	background: rgba(255,255,255,0.6);
}

.rc-skillbar__row{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 24px;
	justify-content: center;
}

.rc-chip{
	display: inline-flex;
	flex-direction: column;
	padding: 10px 18px;
	border-radius: var(--rc-radius);
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	font-family: var(--rc-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
}

.rc-chip small{
	font-family: var(--rc-font-body);
	font-weight: 400;
	color: var(--rc-fg-muted);
	font-size: 0.75rem;
	margin-top: 2px;
}

/* ---- Generic section rhythm ---- */
.rc-section{
	padding: 96px 0;
}

.rc-section--muted{
	background: var(--rc-secondary);
}

.rc-section--dark{
	background: var(--rc-primary);
	color: var(--rc-primary-fg);
	position: relative;
	overflow: hidden;
}

.rc-section--dark::before{
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(700px 360px at 50% 0%, color-mix(in oklab, var(--rc-accent) 35%, transparent), transparent 70%);
	pointer-events: none;
}

.rc-section--dark .rc-section__head h2,
.rc-section--dark .rc-section__head p{
	color: var(--rc-primary-fg);
}

.rc-section--dark .rc-section__head p{
	opacity: 0.7;
}

/* ---- Grids & cards ---- */
.rc-grid{
	display: grid;
	gap: 24px;
}

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

.rc-grid--3{
	grid-template-columns: repeat(3, 1fr);
}

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

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

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

.rc-card{
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	padding: 28px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rc-card:hover{
	transform: translateY(-4px);
	box-shadow: var(--rc-shadow-card);
	border-color: color-mix(in srgb, var(--rc-accent) 35%, var(--rc-border));
}

.rc-card__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--rc-radius-sm);
	background: var(--rc-gradient-primary);
	color: #fff;
	font-family: var(--rc-font-display);
	font-weight: 700;
	margin-bottom: 18px;
}

.rc-card__icon svg{
	width: 22px;
	height: 22px;
}

.rc-section__head .rc-btn{
	margin-top: 8px;
}

.rc-card h3{
	font-size: 1.125rem;
	margin-bottom: 10px;
}

.rc-card p{
	color: var(--rc-fg-muted);
	font-size: 0.9375rem;
}

/* Case studies */
.rc-case{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.rc-case__media{
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--rc-secondary);
}

.rc-case__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.rc-case__media--cover{
	background: #fff;
}

.rc-case__media--cover img{
	object-fit: contain;
}

.rc-case:hover .rc-case__media img{
	transform: scale(1.05);
}

.rc-case__body{
	padding: 24px 26px 28px;
}

.rc-case__tags{
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.rc-tag{
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.rc-tag--dark{
	background: var(--rc-primary);
	color: var(--rc-primary-fg);
}

.rc-tag--accent{
	background: var(--rc-accent-soft);
	color: var(--rc-accent-deep);
}

.rc-case h3{
	font-size: 1.1875rem;
	margin-bottom: 10px;
}

.rc-case p{
	color: var(--rc-fg-muted);
	font-size: 0.9375rem;
	margin-bottom: 16px;
}

.rc-case__results{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rc-case__results li{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 500;
}

.rc-case__results li::before{
	content: '';
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rc-gradient-primary);
	margin-top: 7px;
}

/* Testimonials */
.rc-testimonials{
	margin-top: 64px;
}

.rc-testimonial{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.rc-testimonial p{
	font-size: 0.9375rem;
	color: var(--rc-fg);
	margin-bottom: 20px;
}

.rc-testimonial p::before{
	content: '\201C';
}

.rc-testimonial p::after{
	content: '\201D';
}

.rc-testimonial__author{
	display: flex;
	align-items: center;
	gap: 12px;
}

.rc-testimonial__author img{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

.rc-testimonial__author strong{
	display: block;
	font-size: 0.875rem;
}

.rc-testimonial__author span{
	display: block;
	font-size: 0.8125rem;
	color: var(--rc-fg-muted);
}

/* Free tools */
.rc-tool{
	display: flex;
	flex-direction: column;
}

.rc-tool p{
	flex: 1;
	margin-bottom: 20px;
}

.rc-tool .rc-btn{
	align-self: flex-start;
	padding: 10px 20px;
	font-size: 0.875rem;
}

/* Agenda */
.rc-agenda{
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.rc-agenda__card{
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: var(--rc-radius-lg);
	padding: 32px;
	backdrop-filter: blur(6px);
}

.rc-agenda__card h3{
	color: #fff;
	font-size: 1.25rem;
	margin-bottom: 8px;
}

.rc-agenda__card p{
	color: rgba(255,255,255,0.7);
	font-size: 0.9375rem;
	margin-bottom: 24px;
}

.rc-agenda__actions{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Contact */
.rc-contact{
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
	align-items: start;
}

.rc-contact__info{
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rc-contact__info li{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
}

.rc-contact__info li strong{
	display: block;
	font-family: var(--rc-font-display);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rc-fg-muted);
	margin-bottom: 2px;
}

.rc-form{
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	padding: 32px;
	box-shadow: var(--rc-shadow-card);
}

.rc-form__row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.rc-field{
	margin-bottom: 18px;
}

.rc-field label{
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.rc-field input,
.rc-field textarea{
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--rc-radius-sm);
	border: 1px solid var(--rc-border);
	background: var(--rc-bg-soft);
	font-family: var(--rc-font-body);
	font-size: 0.9375rem;
	color: var(--rc-fg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rc-field input:focus,
.rc-field textarea:focus{
	outline: none;
	border-color: var(--rc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc-accent) 18%, transparent);
}

.rc-field textarea{
	min-height: 120px;
	resize: vertical;
}

.rc-hp{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rc-form__notice{
	padding: 12px 16px;
	border-radius: var(--rc-radius-sm);
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 18px;
}

.rc-form__notice--ok{
	background: #e7f7ee;
	color: #146c3e;
	border: 1px solid #bfe9d3;
}

.rc-form__notice--error{
	background: #fdecec;
	color: #a3231f;
	border: 1px solid #f6c3c1;
}

/* ---- Footer ---- */
.rc-home .site-footer{
	background: var(--rc-primary);
	color: rgba(255,255,255,0.6);
	padding: 48px 24px;
	text-align: center;
}

.rc-home .site-footer .site-info{
	max-width: var(--rc-container);
	margin: 0 auto;
}

.rc-footer__brand{
	font-family: var(--rc-font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: #fff;
	margin-bottom: 8px;
}

.rc-footer__tagline{
	font-size: 0.875rem;
	margin-bottom: 20px;
}

.rc-footer__copy{
	font-size: 0.8125rem;
	opacity: 0.6;
}

/* ---- Responsive ---- */
@media (max-width: 1024px){
	.rc-hero__grid{
		grid-template-columns: 1fr;
		text-align: center;
	}

	.rc-hero__lead{
		margin-left: auto;
		margin-right: auto;
	}

	.rc-hero__cta{
		justify-content: center;
	}

	.rc-stats{
		grid-template-columns: repeat(2, auto);
		justify-content: center;
	}

	.rc-hero__media{
		margin-top: 24px;
	}

	.rc-agenda,
	.rc-contact{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px){
	.rc-section{
		padding: 64px 0;
	}

	.rc-hero{
		padding-top: 48px;
	}

	.rc-form__row{
		grid-template-columns: 1fr;
	}

	.rc-stats{
		grid-template-columns: repeat(2, auto);
		gap: 20px;
	}
}

/* ==========================================================================
   Cascade hardening
   Pagelayer's bundled frontend CSS (loaded globally by the plugin, not by
   this theme) forces white text on headings/links/buttons everywhere —
   left over from the dark "photoshoot" starter template this site used to
   run. It has no !important, but it loads after this stylesheet, so on a
   specificity/order tie it was winning and made our light-background hero
   text render invisible (confirmed via computed styles: h1 and the ghost
   button were both resolving to rgb(255,255,255)). Reassert our colors
   here with !important, scoped to .rc-home only.
   ========================================================================== */
.rc-home h1,
.rc-home h2,
.rc-home h3,
.rc-home h4{
	color: var(--rc-fg) !important;
	-webkit-text-fill-color: var(--rc-fg) !important;
}

.rc-home p,
.rc-home span,
.rc-home li,
.rc-home a,
.rc-home label,
.rc-home input,
.rc-home textarea,
.rc-home button{
	color: var(--rc-fg) !important;
	-webkit-text-fill-color: var(--rc-fg) !important;
}

.rc-home .rc-text-accent,
.rc-home .rc-stat__num{
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.rc-home .rc-hero__lead,
.rc-home .rc-section__head p,
.rc-home .rc-card p,
.rc-home .rc-case p,
.rc-home .rc-stat__label,
.rc-home .rc-chip small,
.rc-home .main-navigation .rc-nav-link,
.rc-home .rc-contact__info li strong,
.rc-home .rc-testimonial__author span{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-home .main-navigation .rc-nav-link:hover{
	color: var(--rc-fg) !important;
	-webkit-text-fill-color: var(--rc-fg) !important;
}

.rc-home .rc-eyebrow,
.rc-home .rc-kicker{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

.rc-home .rc-btn--primary,
.rc-home .rc-btn--accent,
.rc-home .rc-tag--dark{
	color: var(--rc-primary-fg) !important;
	-webkit-text-fill-color: var(--rc-primary-fg) !important;
}

.rc-home .rc-btn--whatsapp{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Fiverr chip — spans/strong, so the broad hardening rule above
   would otherwise flatten the brand green, star and tag colors. */
.rc-home .rc-fv__stars{
	color: #1dbf73 !important;
	-webkit-text-fill-color: #1dbf73 !important;
}

.rc-home .rc-fv__logo,
.rc-home .rc-fv__logo b{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-fv__stars strong{
	color: var(--rc-fg) !important;
	-webkit-text-fill-color: var(--rc-fg) !important;
}

.rc-home .rc-fv__count{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-home .rc-fv__tag--pro{
	color: #3a33b8 !important;
	-webkit-text-fill-color: #3a33b8 !important;
}

.rc-home .rc-fv__tag--top{
	color: #9a6b00 !important;
	-webkit-text-fill-color: #9a6b00 !important;
}

/* Icon badges (services + free tools) are <span>s, so the broad
   ".rc-home span{color:...}" rule above was winning over their own
   color:#fff and turning the icons dark-on-purple — same specificity
   fight as everything else here, just noticed later. */
.rc-home .rc-card__icon{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-tag--accent{
	color: var(--rc-accent-deep) !important;
	-webkit-text-fill-color: var(--rc-accent-deep) !important;
}

.rc-home .rc-btn--ghost{
	color: var(--rc-fg) !important;
	-webkit-text-fill-color: var(--rc-fg) !important;
}

.rc-home .rc-btn--ghost:hover{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

.rc-home .site-footer,
.rc-home .site-footer a,
.rc-home .rc-footer__tagline,
.rc-home .rc-footer__copy{
	color: rgba(255,255,255,0.6) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.6) !important;
}

.rc-home .rc-footer__brand{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-section--dark h2,
.rc-home .rc-section--dark .rc-kicker,
.rc-home .rc-agenda__card h3{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-section--dark p,
.rc-home .rc-agenda__card p{
	color: rgba(255,255,255,0.7) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.7) !important;
}

.rc-home .rc-btn--ghost-on-dark{
	border-color: rgba(255,255,255,0.3) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-btn--ghost-on-dark:hover{
	border-color: #fff !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* The site's existing custom logo is a leftover agency mark (an old
   cropped "FugaLabs" image, not Ramón's own brand), and it rendered at
   its native size with a distorted aspect ratio since nothing constrained
   it — 375x375 native, stretched to ~135x481 in the old markup. The
   reference design uses a clean text wordmark only, so hide the image
   mark instead of trying to rescale someone else's logo into this design. */
.rc-home .custom-logo-link{
	display: none !important;
}

/* Pagelayer's global typography settings (its Customizer "H1/H2/H3
   Typography" options) also force a huge font-size + uppercase on every
   heading tag site-wide — not just color, which is all the hardening
   above covers. Confirmed via computed styles: h1 was rendering at 90px
   uppercase (line-height 90px), h2 at 85px, h3 at 50px, tall enough on
   its own to fill the whole viewport. Pin size/case/line-height back to
   the intended values, same !important approach as the color fixes. */
.rc-home h1,
.rc-home h2,
.rc-home h3,
.rc-home h4{
	text-transform: none !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
}

.rc-home .rc-hero__title{
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem) !important;
	line-height: 1.1 !important;
}

.rc-home .rc-section__head h2,
.rc-home .rc-section--dark h2{
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) !important;
	line-height: 1.15 !important;
}

.rc-home .rc-card h3{
	font-size: 1.125rem !important;
	line-height: 1.3 !important;
}

.rc-home .rc-case h3{
	font-size: 1.1875rem !important;
	line-height: 1.3 !important;
}

.rc-home .rc-agenda__card h3{
	font-size: 1.25rem !important;
	line-height: 1.3 !important;
}

/* Rotating word in the hero title ("Experto en n8n / Zapier / Make / ...") */
.rc-home .rc-rotator{
	display: block;
	transition: opacity .25s ease, transform .25s ease;
}

.rc-home .rc-rotator.rc-rotator--out{
	opacity: 0;
	transform: translateY(-10px);
}

/* Hidden Fiverr booking pages (/fiverr-30-min/, /fiverr-20-min/). Heading size is pinned with
   !important for the same reason as the other headings (Pagelayer's global
   heading typography otherwise forces a huge size). */
.rc-booking .rc-section__head{
	margin-bottom: 32px;
}

.rc-home .rc-booking__title{
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem) !important;
	line-height: 1.15 !important;
	margin-bottom: 14px;
}

.rc-booking__card{
	max-width: 960px;
	margin: 0 auto;
	min-height: 520px;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	box-shadow: var(--rc-shadow-card);
	overflow: hidden;
}

/* The pasted Cal embed div ships with inline overflow:scroll, which shows
   permanent scrollbar tracks on Windows. Override from CSS (inline styles lose
   to !important) so the embed code itself stays exactly as provided. */
.rc-booking__card [id^="my-cal-inline"]{
	overflow: auto !important;
}

/* ==========================================================================
   Fiverr reviews carousel (between Servicios and Case Studies)
   Colors that the broad ".rc-home p/span/button" hardening rule would
   flatten are re-set below with the same .rc-home scope and !important.
   ========================================================================== */
.rc-reviews{
	background: var(--rc-card);
	border-top: 1px solid var(--rc-border);
	border-bottom: 1px solid var(--rc-border);
}

.rc-rv{
	position: relative;
}

.rc-rv__viewport{
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 4px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
	padding: 4px 4px 12px;
	border-radius: var(--rc-radius);
}

.rc-rv__viewport::-webkit-scrollbar{
	display: none;
}

.rc-rv__viewport:focus-visible{
	outline: 2px solid var(--rc-accent);
	outline-offset: 2px;
}

.rc-rv__track{
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rc-rv__slide{
	flex: 0 0 calc((100% - 48px) / 3);
	display: flex;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.rc-rv__card{
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 28px;
	background: var(--rc-bg);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
}

.rc-rv__stars{
	font-size: 1.125rem;
	line-height: 1;
	letter-spacing: 3px;
}

.rc-rv__text{
	flex: 1 1 auto;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
}

.rc-rv__text::before{
	content: '\201C';
}

.rc-rv__text::after{
	content: '\201D';
}

.rc-rv__author{
	display: flex;
	align-items: center;
	gap: 12px;
}

.rc-rv__avatar{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--rc-gradient-primary);
	font-family: var(--rc-font-display);
	font-weight: 700;
}

.rc-rv__avatar img{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.rc-rv__who strong{
	display: block;
	font-size: 0.875rem;
}

.rc-rv__who span{
	display: block;
	font-size: 0.8125rem;
}

.rc-rv__controls{
	display: none;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
}

.rc-rv--js .rc-rv__controls{
	display: flex;
}

.rc-rv__dots{
	display: flex;
	align-items: center;
	gap: 8px;
}

.rc-rv__more{
	margin-top: 32px;
	text-align: center;
}

.rc-home .rc-rv__stars{
	color: #1dbf73 !important;
	-webkit-text-fill-color: #1dbf73 !important;
}

.rc-home .rc-rv__avatar{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-rv__who span{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-home .rc-rv__btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--rc-border);
	border-radius: 50%;
	background: var(--rc-card);
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.rc-home .rc-rv__btn:hover,
.rc-home .rc-rv__btn:focus-visible{
	border-color: var(--rc-accent);
	background: var(--rc-card);
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

.rc-home .rc-rv__dot{
	display: block;
	width: 10px;
	height: 10px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--rc-border);
	box-shadow: none;
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}

.rc-home .rc-rv__dot[aria-current="true"]{
	width: 26px;
	background: var(--rc-accent);
}

@media (max-width: 1024px){
	.rc-rv__slide{
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (max-width: 640px){
	.rc-rv__slide{
		flex-basis: 100%;
	}

	.rc-rv__card{
		padding: 24px;
	}
}

/* ==========================================================================
   Cursos / tutoriales: header dropdown, course landing, lesson posts, archives.
   Same cascade-hardening rule as above: anything that is a p/span/li/a/button
   and not plain body color gets a ".rc-home .class" override with !important.
   ========================================================================== */

/* The theme injects "aside{width:20%;float:..}" and "main{width:79% !important;float:..}" inline
   whenever the Sidebar widget area is active (posts and archives default to "right"). These
   templates have no sidebar, so give <main> back its full width. */
.rc-home main.rc-main{
	display: block !important;
	float: none !important;
	width: 100% !important;
}

/* ---- "Cursos" dropdown in the header ---- */
.rc-home .main-navigation .rc-has-drop{
	position: relative;
}

.rc-home .main-navigation .rc-nav-drop-toggle{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

.rc-home .main-navigation .rc-nav-drop-toggle svg{
	flex: none;
	transition: transform 0.15s ease;
}

.rc-home .main-navigation .rc-has-drop.is-open .rc-nav-drop-toggle svg{
	transform: rotate(180deg);
}

.rc-home .main-navigation .rc-has-drop.is-current .rc-nav-drop-toggle,
.rc-home .main-navigation .rc-has-drop.is-open .rc-nav-drop-toggle{
	color: var(--rc-fg) !important;
	-webkit-text-fill-color: var(--rc-fg) !important;
	background: var(--rc-secondary);
}

.rc-home .main-navigation .rc-nav-drop{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 120;
	min-width: 270px;
	margin: 6px 0 0;
	padding: 8px;
	list-style: none;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	box-shadow: var(--rc-shadow-card);
}

.rc-home .main-navigation .rc-nav-drop::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}

.rc-home .main-navigation .rc-has-drop.is-open > .rc-nav-drop{
	display: block;
}

.rc-home .main-navigation .rc-nav-drop li{
	margin: 0;
}

.rc-home .main-navigation .rc-nav-sub{
	display: block;
	padding: 10px 14px;
	border-radius: var(--rc-radius-sm);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.rc-home .main-navigation .rc-nav-sub:hover{
	background: var(--rc-secondary);
}

@media (min-width: 901px) and (hover: hover){
	.rc-home .main-navigation .rc-has-drop:hover > .rc-nav-drop{
		display: block;
	}

	.rc-home .main-navigation .rc-has-drop:hover .rc-nav-drop-toggle{
		color: var(--rc-fg) !important;
		-webkit-text-fill-color: var(--rc-fg) !important;
		background: var(--rc-secondary);
	}
}

/* The extra "Cursos" item makes the one-line header too wide between the hamburger breakpoint
   (900px) and ~1200px, so tighten it there instead of letting items wrap or the CTA overflow. */
@media (min-width: 901px) and (max-width: 1200px){
	.rc-home .site-header{
		gap: 12px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.rc-home .main-navigation ul#primary-menu{
		gap: 0;
	}

	.rc-home .main-navigation .rc-nav-link{
		padding: 8px 9px;
		font-size: 0.875rem;
		white-space: nowrap;
	}

	.rc-home .main-navigation .rc-nav-cta{
		margin-left: 4px;
	}

	.rc-home .main-navigation .rc-nav-cta .rc-btn{
		padding: 11px 16px;
		font-size: 0.875rem;
	}
}

@media (max-width: 900px){
	.rc-home .main-navigation .rc-nav-drop-toggle{
		width: 100%;
		justify-content: space-between;
		padding: 12px 16px;
		text-align: left;
	}

	.rc-home .main-navigation .rc-nav-drop{
		position: static;
		min-width: 0;
		margin: 0 0 4px;
		padding: 2px 0 4px 12px;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.rc-home .main-navigation .rc-nav-drop::before{
		display: none;
	}

	.rc-home .main-navigation .rc-nav-sub{
		padding: 12px 16px;
		white-space: normal;
	}
}

/* ---- Course landing: hero ---- */
.rc-container--narrow{
	max-width: 860px;
}

.rc-coursehero .rc-hero__grid{
	padding-bottom: 72px;
}

.rc-home .rc-hero__title.rc-coursehero__title{
	font-size: clamp(2rem, 1.35rem + 2.3vw, 3.2rem) !important;
	line-height: 1.1 !important;
}

/* Same specificity trick as the other hero text: ".rc-home h1/p { margin: 0 }" would otherwise zero these out. */
.rc-home .rc-coursehero .rc-hero__title{
	margin-bottom: 20px;
}

.rc-home .rc-coursehero .rc-hero__lead{
	margin-bottom: 32px;
}

.rc-coursemeta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

@media (max-width: 1024px){
	.rc-coursemeta{
		justify-content: center;
	}
}

.rc-coursemeta li{
	position: relative;
	padding-left: 16px;
	font-size: 0.875rem;
	font-weight: 500;
}

.rc-coursemeta li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rc-gradient-primary);
}

.rc-home .rc-coursemeta li{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-preview{
	display: block;
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	box-shadow: var(--rc-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rc-preview:hover{
	transform: translateY(-4px);
	box-shadow: var(--rc-shadow-glow);
}

.rc-preview__thumb{
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rc-primary);
}

.rc-preview__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rc-preview__cap{
	display: block;
	padding: 16px 22px 20px;
	text-align: left;
}

.rc-preview__cap small{
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rc-preview__cap strong{
	display: block;
	margin-top: 4px;
	font-family: var(--rc-font-display);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.rc-home .rc-preview__cap small{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

/* ---- Lesson cards (course landing + archives) ---- */
.rc-lesson{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.rc-lesson__media{
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rc-primary);
}

.rc-lesson__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.rc-lesson:hover .rc-lesson__media img{
	transform: scale(1.05);
}

.rc-lesson__play{
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(10, 13, 22, 0.72);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background 0.2s ease;
}

.rc-lesson__play svg{
	width: 22px;
	height: 22px;
	margin-left: 3px;
	fill: #fff;
}

.rc-lesson:hover .rc-lesson__play,
.rc-preview:hover .rc-lesson__play{
	background: var(--rc-accent);
	transform: translate(-50%, -50%) scale(1.07);
}

.rc-lesson__num{
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--rc-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rc-home .rc-lesson__num{
	color: var(--rc-primary-fg) !important;
	-webkit-text-fill-color: var(--rc-primary-fg) !important;
}

.rc-lesson__body{
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: 20px 22px 24px;
}

.rc-home .rc-lesson__body h3{
	margin: 0;
	font-size: 1.0625rem !important;
	line-height: 1.3 !important;
}

.rc-lesson__body h3 a::after{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.rc-lesson__body p{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9rem;
}

.rc-lesson__more{
	margin-top: auto;
	font-size: 0.875rem;
	font-weight: 600;
}

.rc-home .rc-lesson__more{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

/* ---- Lesson post ---- */
.rc-section.rc-lessonpage{
	padding: 48px 0 96px;
}

.rc-crumbs{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 22px;
	font-size: 0.8125rem;
}

.rc-home .rc-crumbs a,
.rc-home .rc-crumbs span{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-home .rc-crumbs a:hover{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

.rc-lessonhead{
	margin-bottom: 28px;
}

.rc-lessonhead__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.rc-lessonhead__tags:empty{
	display: none;
}

.rc-lessonhead__tags .rc-tag{
	padding: 6px 12px;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.rc-lessonhead__tags a.rc-tag:hover{
	background: var(--rc-accent);
}

.rc-home .rc-lessonhead__tags a.rc-tag:hover{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-lessonhead__title{
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem) !important;
	line-height: 1.12 !important;
}

.rc-lessonhead__date{
	margin-top: 12px;
	font-size: 0.875rem;
}

.rc-home .rc-lessonhead__date{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-video{
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 0 32px;
	overflow: hidden;
	background: var(--rc-primary);
	border-radius: var(--rc-radius-lg);
	box-shadow: var(--rc-shadow-card);
}

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

/* Long-form text (lesson notes, plain posts) */
.rc-prose{
	font-size: 1.0625rem;
	line-height: 1.75;
}

.rc-home .rc-prose > * + *{
	margin-top: 1.1em;
}

.rc-home .rc-prose p{
	font-size: 1.0625rem;
	line-height: 1.75;
}

.rc-home .rc-prose > h3{
	margin-top: 2em;
	font-size: 1.375rem !important;
}

.rc-home .rc-prose > h2{
	margin-top: 2em;
	font-size: 1.75rem !important;
}

.rc-home .rc-prose ul{
	padding-left: 1.4em;
	list-style: disc;
}

.rc-home .rc-prose ol{
	padding-left: 1.4em;
	list-style: decimal;
}

.rc-home .rc-prose li{
	margin: 0.45em 0;
	padding-left: 0.25em;
}

.rc-home .rc-prose li::marker{
	color: var(--rc-accent);
}

.rc-home .rc-prose a{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rc-prose code{
	padding: 0.1em 0.4em;
	background: var(--rc-secondary);
	border: 1px solid var(--rc-border);
	border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.rc-prose img{
	height: auto;
	border-radius: var(--rc-radius);
}

/* Tip / note callouts (plain paragraph blocks with a class) */
.rc-home .rc-prose .rc-callout{
	position: relative;
	padding: 16px 20px 16px 54px;
	border: 1px solid;
	border-radius: var(--rc-radius);
	font-size: 1rem;
	line-height: 1.6;
}

.rc-home .rc-prose .rc-callout::before{
	position: absolute;
	left: 18px;
	top: 15px;
	font-size: 1.25rem;
	line-height: 1.4;
}

.rc-home .rc-prose .rc-callout--tip{
	background: var(--rc-accent-soft);
	border-color: color-mix(in srgb, var(--rc-accent) 28%, transparent);
}

.rc-home .rc-prose .rc-callout--tip::before{
	content: '\1F4A1';
}

.rc-home .rc-prose .rc-callout--note{
	background: #fff7e3;
	border-color: #f0d79a;
}

.rc-home .rc-prose .rc-callout--note::before{
	content: '\1F4CC';
}

/* Email example (Make lesson) and side-by-side comparison (Data Stores lesson) */
.rc-sample{
	padding: 18px 22px;
	background: var(--rc-card);
	border: 1px dashed var(--rc-border);
	border-radius: var(--rc-radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9375rem;
	line-height: 1.9;
}

.rc-home .rc-sample .rc-label{
	font-weight: 700;
	color: var(--rc-accent-deep) !important;
	-webkit-text-fill-color: var(--rc-accent-deep) !important;
}

.rc-compare{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.rc-compare__card{
	padding: 20px 22px;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
}

.rc-home .rc-compare__card h4{
	margin-bottom: 8px;
	font-size: 1rem !important;
	line-height: 1.3 !important;
}

.rc-home .rc-compare__card ul{
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.rc-home .rc-compare__card li{
	margin: 0.3em 0;
	font-size: 0.9375rem;
}

/* Progress + previous / next, one block per course the lesson belongs to */
.rc-coursenav{
	margin-top: 32px;
	padding: 24px;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
}

.rc-coursenav + .rc-coursenav{
	margin-top: 20px;
}

.rc-coursenav__head{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	margin-bottom: 12px;
}

.rc-coursenav__title{
	font-family: var(--rc-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
}

.rc-home a.rc-coursenav__title:hover{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

.rc-coursenav__pos{
	font-size: 0.8125rem;
	font-weight: 600;
}

.rc-home .rc-coursenav__pos,
.rc-home .rc-coursenav__link small{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-coursenav__bar{
	height: 6px;
	margin-bottom: 18px;
	overflow: hidden;
	background: var(--rc-secondary);
	border-radius: 999px;
}

.rc-coursenav__bar span{
	display: block;
	height: 100%;
	background: var(--rc-gradient-primary);
	border-radius: 999px;
}

.rc-coursenav__links{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.rc-coursenav__link{
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.rc-coursenav__link:hover{
	transform: translateY(-2px);
	border-color: var(--rc-accent);
	box-shadow: var(--rc-shadow-card);
}

.rc-coursenav__link--next{
	text-align: right;
}

.rc-coursenav__link small{
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 600;
}

.rc-coursenav__link strong{
	display: block;
	font-family: var(--rc-font-display);
	font-size: 0.9375rem;
	line-height: 1.3;
}

@media (max-width: 640px){
	.rc-coursenav__links,
	.rc-compare{
		grid-template-columns: 1fr;
	}

	.rc-coursenav__link--next{
		text-align: left;
	}

	.rc-section.rc-lessonpage{
		padding: 32px 0 72px;
	}
}

/* ---- Archives ---- */
.rc-section.rc-archive{
	padding: 64px 0 96px;
}

.rc-home .rc-archive__title{
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem) !important;
	line-height: 1.12 !important;
	margin-bottom: 14px;
}

.rc-archive__empty{
	text-align: center;
}

.rc-home .rc-archive__empty{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-pagination .nav-links{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.rc-home .rc-pagination .page-numbers{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.rc-home .rc-pagination a.page-numbers:hover{
	border-color: var(--rc-accent);
}

.rc-home .rc-pagination .page-numbers.current{
	background: var(--rc-primary);
	border-color: var(--rc-primary);
	color: var(--rc-primary-fg) !important;
	-webkit-text-fill-color: var(--rc-primary-fg) !important;
}

/* ==========================================================================
   Course page, original layout: index, audience box, pastel module cards,
   closing block, sticky purple sign-up box (right column) and a floating
   orange "Índice del Curso" button. Lesson posts reuse the grid + the box.
   Pseudo-elements set -webkit-text-fill-color too: li/span/a get it forced
   by the cascade hardening above and ::before would inherit it.
   ========================================================================== */
:root{
	--rc-orange: #f97316;
	--rc-orange-deep: #ea6c0a;
}

html:has(.rc-course){
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
	html:has(.rc-course){
		scroll-behavior: auto;
	}
}

.rc-courselayout{
	padding: 56px 0 96px;
}

.rc-coursegrid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 48px;
	align-items: start;
}

.rc-coursegrid__main{
	min-width: 0;
}

.rc-coursegrid__side{
	position: sticky;
	top: 104px;
}

/* ---- Purple sign-up box ---- */
.rc-ctabox{
	padding: 24px 22px;
	text-align: center;
	background: var(--rc-gradient-primary);
	border-radius: var(--rc-radius-lg);
	box-shadow: var(--rc-shadow-glow);
}

.rc-ctabox--inline{
	display: none;
	margin: 24px 0;
}

.rc-home .rc-ctabox p{
	margin: 0 0 16px;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home .rc-ctabox__title{
	font-family: var(--rc-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.rc-home .rc-ctabox__text{
	font-size: 0.9375rem;
	line-height: 1.5;
}

.rc-ctabox__btn{
	display: inline-block;
	padding: 11px 20px;
	background: var(--rc-orange);
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 700;
	transition: background 0.15s ease, transform 0.15s ease;
}

.rc-home a.rc-ctabox__btn{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home a.rc-ctabox__btn:hover{
	background: var(--rc-orange-deep);
	transform: translateY(-1px);
}

/* ---- Index ---- */
.rc-index{
	margin: 0 0 24px;
	padding: 28px 32px;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	box-shadow: 0 4px 20px rgba(10, 13, 22, 0.04);
	scroll-margin-top: 100px;
}

.rc-home .rc-index h2{
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rc-border);
	font-size: 1.0625rem !important;
	line-height: 1.3 !important;
}

.rc-index ol{
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: idx;
}

.rc-index li{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--rc-secondary);
	counter-increment: idx;
}

.rc-index li:last-child{
	border-bottom: 0;
}

.rc-index li::before{
	content: counter(idx);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--rc-orange);
	border-radius: 50%;
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
}

.rc-home .rc-index li a{
	font-size: 0.9375rem;
	font-weight: 500;
}

.rc-home .rc-index li a:hover{
	color: var(--rc-orange-deep) !important;
	-webkit-text-fill-color: var(--rc-orange-deep) !important;
}

/* ---- Who is it for ---- */
.rc-whobox{
	margin: 0 0 24px;
	padding: 28px 32px;
	background: color-mix(in srgb, var(--rc-accent) 5%, #fff);
	border: 1px solid color-mix(in srgb, var(--rc-accent) 18%, #fff);
	border-radius: var(--rc-radius-lg);
}

.rc-home .rc-whobox h2{
	margin: 0 0 18px;
	font-size: 1.125rem !important;
	line-height: 1.3 !important;
}

.rc-whobox ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rc-whobox li{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--rc-accent) 14%, #fff);
	border-radius: 10px;
	font-size: 0.875rem;
}

.rc-whobox__ico{
	flex: none;
	line-height: 1.55;
}

.rc-home .rc-whobox__txt{
	color: var(--rc-fg-muted) !important;
	-webkit-text-fill-color: var(--rc-fg-muted) !important;
}

.rc-home .rc-whobox__txt strong{
	color: var(--rc-fg) !important;
	-webkit-text-fill-color: var(--rc-fg) !important;
}

/* ---- Module cards: the original card colors, pastel ---- */
.rc-mod{
	margin: 32px 0;
	overflow: hidden;
	background: #eef2ff;
	background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 24%, #fff), color-mix(in srgb, var(--c2) 14%, #fff));
	border: 1px solid color-mix(in srgb, var(--c1) 30%, #fff);
	border-radius: var(--rc-radius-lg);
	scroll-margin-top: 100px;
}

.rc-mod__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 28px 36px 18px;
}

.rc-mod__txt{
	min-width: 0;
}

.rc-mod__num{
	display: block;
	margin-bottom: 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.rc-home .rc-mod__num{
	color: color-mix(in srgb, var(--c2) 85%, #000) !important;
	-webkit-text-fill-color: color-mix(in srgb, var(--c2) 85%, #000) !important;
}

.rc-home .rc-mod__txt h2{
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem) !important;
	line-height: 1.2 !important;
}

.rc-mod__ico{
	flex: none;
	font-size: 2.75rem;
	line-height: 1;
	opacity: 0.9;
}

.rc-mod__body{
	padding: 8px 36px 30px;
}

.rc-home .rc-mod .rc-video{
	margin: 0 0 22px;
	border-radius: 12px;
	box-shadow: 0 12px 30px -18px rgba(10, 13, 22, 0.55);
}

.rc-home .rc-mod__body.rc-prose p{
	font-size: 1rem;
	line-height: 1.7;
}

.rc-home .rc-mod__body.rc-prose > h3{
	margin-top: 1.6em;
	font-size: 1.0625rem !important;
}

.rc-home .rc-mod__body li::marker{
	color: color-mix(in srgb, var(--c2) 85%, #000);
}

.rc-home .rc-mod__body.rc-prose a{
	color: color-mix(in srgb, var(--c2) 85%, #000) !important;
	-webkit-text-fill-color: color-mix(in srgb, var(--c2) 85%, #000) !important;
}

.rc-mod__body code{
	background: rgba(255, 255, 255, 0.7);
}

.rc-home .rc-mod .rc-callout,
.rc-home .rc-mod .rc-callout--tip,
.rc-home .rc-mod .rc-callout--note{
	background: rgba(255, 255, 255, 0.62);
	border-color: color-mix(in srgb, var(--c2) 30%, #fff);
}

.rc-mod .rc-sample,
.rc-mod .rc-compare__card{
	background: rgba(255, 255, 255, 0.62);
	border-color: color-mix(in srgb, var(--c2) 25%, #fff);
}

.rc-home .rc-mod__link{
	margin-top: 22px;
	text-align: right;
	font-size: 0.875rem;
	font-weight: 600;
}

.rc-home .rc-mod__body .rc-mod__link a{
	text-decoration: none;
}

.rc-home .rc-mod__body .rc-mod__link a:hover{
	text-decoration: underline;
}

/* ---- Closing block ---- */
.rc-closing{
	position: relative;
	margin-top: 56px;
	padding: 44px 40px;
	overflow: hidden;
	text-align: center;
	background: var(--rc-primary);
	border-radius: var(--rc-radius-lg);
}

.rc-closing::before{
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(520px 260px at 50% 0%, color-mix(in oklab, var(--rc-accent) 35%, transparent), transparent 70%);
	pointer-events: none;
}

.rc-closing > *{
	position: relative;
}

.rc-home .rc-closing h2{
	margin: 0 0 14px;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-size: 1.5rem !important;
}

.rc-home .rc-closing p{
	max-width: 480px;
	margin: 0 auto 24px;
	color: rgba(255, 255, 255, 0.85) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
	line-height: 1.7;
}

.rc-closing__btn{
	display: inline-block;
	padding: 13px 28px;
	background: var(--rc-orange);
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 700;
	transition: background 0.15s ease;
}

.rc-home a.rc-closing__btn{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-home a.rc-closing__btn:hover{
	background: var(--rc-orange-deep);
}

/* ---- Floating orange "Índice del Curso" button ---- */
.rc-fab{
	position: fixed;
	right: max(96px, calc((100vw - 1180px) / 2 + 24px));
	bottom: 32px;
	z-index: 90;
	width: 260px;
}

.rc-fab__btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 13px 20px;
	background: var(--rc-orange);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
	font-family: var(--rc-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
}

.rc-home .rc-fab__btn,
.rc-home .rc-fab__btn span{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-fab__btn:hover{
	background: var(--rc-orange-deep);
}

.rc-fab__arrow{
	font-size: 0.625rem;
	transition: transform 0.2s ease;
}

.rc-fab__btn.is-open .rc-fab__arrow{
	transform: rotate(180deg);
}

.rc-fab__menu{
	display: none;
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	left: 0;
	max-height: min(70vh, 560px);
	padding: 10px 0;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--rc-border);
	border-radius: 14px;
	box-shadow: 0 8px 32px rgba(10, 13, 22, 0.15);
}

.rc-fab__menu.is-visible{
	display: block;
}

.rc-fab__menu ol{
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fmod;
}

.rc-fab__menu li{
	counter-increment: fmod;
}

.rc-home .rc-fab__menu li a{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	transition: background 0.15s ease;
}

.rc-home .rc-fab__menu li a:hover{
	background: #fff7ed;
	color: var(--rc-orange-deep) !important;
	-webkit-text-fill-color: var(--rc-orange-deep) !important;
}

.rc-fab__menu li a::before{
	content: counter(fmod);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: #fff7ed;
	border-radius: 50%;
	color: var(--rc-orange);
	-webkit-text-fill-color: var(--rc-orange);
	font-size: 0.6875rem;
	font-weight: 700;
}

/* ---- Small screens: one column, the box moves inline, the button sits left of the chat bubble ---- */
@media (max-width: 1000px){
	.rc-coursegrid{
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.rc-coursegrid__side{
		display: none;
	}

	.rc-ctabox--inline{
		display: block;
	}
}

@media (max-width: 900px){
	.rc-courselayout{
		padding: 40px 0 80px;
	}

	.rc-index,
	.rc-whobox{
		padding: 22px;
	}

	.rc-whobox ul{
		grid-template-columns: 1fr;
	}

	.rc-mod__head{
		padding: 20px 24px 14px;
	}

	.rc-mod__ico{
		display: none;
	}

	.rc-mod__body{
		padding: 6px 24px 26px;
	}

	.rc-closing{
		padding: 34px 24px;
	}

	.rc-fab{
		right: 92px;
		bottom: 20px;
		left: 16px;
		width: auto;
	}
}

/* ==========================================================================
   Orange + white sign-up button (hero of the course pages) and the FAQ block
   (Make.com course page). Same hardening rules as above.
   ========================================================================== */
.rc-btn--orange{
	background: var(--rc-orange);
	color: #fff;
}

.rc-btn--orange:hover{
	background: var(--rc-orange-deep);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(249, 115, 22, 0.6);
}

.rc-home .rc-btn--orange{
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.rc-faq{
	margin-top: 56px;
	scroll-margin-top: 100px;
}

.rc-home .rc-faq h2{
	margin: 0 0 18px;
	font-size: 1.375rem !important;
	line-height: 1.25 !important;
}

.rc-faq details{
	margin: 0 0 10px;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rc-faq details[open]{
	border-color: color-mix(in srgb, var(--rc-orange) 45%, var(--rc-border));
	box-shadow: var(--rc-shadow-card);
}

.rc-faq summary{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-family: var(--rc-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.rc-faq summary::-webkit-details-marker{
	display: none;
}

.rc-faq summary::after{
	content: '+';
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: #fff7ed;
	border-radius: 50%;
	color: var(--rc-orange);
	-webkit-text-fill-color: var(--rc-orange);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.rc-faq details[open] summary::after{
	content: '\2212';
}

.rc-faq__a{
	padding: 0 20px 18px;
}

.rc-home .rc-faq__a.rc-prose p,
.rc-home .rc-faq__a.rc-prose li{
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* ==========================================================================
   Post cover (featured image), figures inside long-form text and cover cards
   in archives. Used by case-study posts such as TicTacArea.
   ========================================================================== */
.rc-cover{
	margin: 0 0 32px;
	overflow: hidden;
	background: var(--rc-card);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-lg);
	box-shadow: var(--rc-shadow-card);
}

.rc-cover img{
	display: block;
	width: 100%;
	height: auto;
}

.rc-home .rc-prose > :first-child{
	margin-top: 0;
}

.rc-prose figure{
	margin: 0;
}

.rc-home .rc-prose > figure{
	margin-top: 1.6em;
}

.rc-prose figure a{
	display: block;
}

.rc-prose figure img{
	width: 100%;
	height: auto;
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
}

.rc-prose figcaption{
	margin-top: 10px;
	font-size: 0.875rem;
	text-align: center;
}

.rc-home .rc-prose figcaption{
	color: var(--rc-fg-muted);
}

.rc-lesson__media--cover{
	aspect-ratio: 3 / 2;
	background: #fff;
	border-bottom: 1px solid var(--rc-border);
}

/* ==========================================================================
   Case-study popup on the landing (native <dialog> filled from the REST API).
   ========================================================================== */
.rc-case__tags{
	flex-wrap: wrap;
}

html.rc-modal-open{
	overflow: hidden;
	scrollbar-gutter: stable;
}

.rc-modal{
	width: min(94vw, 860px);
	max-width: none;
	max-height: 92vh;
	margin: auto;
	padding: 0;
	overflow: hidden;
	background: var(--rc-bg);
	border: 0;
	border-radius: var(--rc-radius-lg);
	box-shadow: 0 30px 80px -20px rgba(10, 13, 22, 0.6);
	color: var(--rc-fg);
	font-family: var(--rc-font-body);
}

.rc-modal[open]{
	display: flex;
	flex-direction: column;
	animation: rc-modal-in 0.2s ease-out;
}

.rc-modal::backdrop{
	background: rgba(10, 13, 22, 0.62);
	backdrop-filter: blur(3px);
}

@keyframes rc-modal-in{
	from{
		opacity: 0;
		transform: translateY(12px) scale(0.985);
	}

	to{
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce){
	.rc-modal[open]{
		animation: none;
	}
}

.rc-modal__bar{
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px 10px 24px;
	background: var(--rc-card);
	border-bottom: 1px solid var(--rc-border);
}

.rc-modal__kicker{
	font-family: var(--rc-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rc-home .rc-modal__kicker{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
}

.rc-modal__close{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--rc-secondary);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}

.rc-modal__close:hover{
	background: var(--rc-border);
}

.rc-modal__close:focus-visible{
	outline: 2px solid var(--rc-accent);
	outline-offset: 2px;
}

.rc-modal__body{
	flex: 1 1 auto;
	padding: 28px 32px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rc-modal__body:focus{
	outline: none;
}

.rc-home .rc-modal__title{
	margin: 0 0 20px;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important;
	line-height: 1.15 !important;
}

.rc-modal__body .rc-cover{
	margin-bottom: 28px;
}

.rc-modal__loading{
	padding: 40px 0;
	text-align: center;
}

.rc-modal__foot{
	flex: none;
	padding: 14px 24px;
	text-align: right;
	background: var(--rc-card);
	border-top: 1px solid var(--rc-border);
}

.rc-home a.rc-modal__open{
	color: var(--rc-accent) !important;
	-webkit-text-fill-color: var(--rc-accent) !important;
	font-size: 0.9375rem;
	font-weight: 600;
}

.rc-home a.rc-modal__open:hover{
	text-decoration: underline;
}

@media (max-width: 640px){
	.rc-modal{
		width: 96vw;
		max-height: 94vh;
	}

	.rc-modal__bar{
		padding-left: 18px;
	}

	.rc-modal__body{
		padding: 20px 18px 8px;
	}

	.rc-modal__foot{
		padding: 12px 18px;
		text-align: center;
	}
}