/**
 * RinconMarciano — Design system (Papel & Estrellas variant).
 *
 * Tokens + utility classes extracted from the approved design mockups
 * (Home / Boxes / Libros .dc.html). Loaded on the front end and inside the
 * Elementor editor so native widgets and HTML widgets share one look.
 *
 * @package RinconMarcianoChild
 */

:root {
	/* Palette */
	--rm-cream: #F6EDDE;        /* page background */
	--rm-ink: #2A201B;          /* text / dark sections */
	--rm-terracotta: #B14A2B;   /* accent */
	--rm-card-bg: #efe8da;      /* image placeholder bg */
	--rm-panel: #ffffff;        /* "qué incluye" panel */
	--rm-panel-border: #e7ddc9;
	--rm-ink-66: rgba(42, 32, 27, .66);
	--rm-ink-60: rgba(42, 32, 27, .60);
	--rm-ink-50: rgba(42, 32, 27, .50);
	--rm-ink-20: rgba(42, 32, 27, .20);
	--rm-ink-08: rgba(42, 32, 27, .08);
	--rm-on-dark-50: rgba(246, 237, 222, .5);

	/* Type */
	--rm-serif: 'Cormorant Garamond', Georgia, serif;
	--rm-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Shape */
	--rm-radius-card: 18px;
	--rm-radius-pill: 40px;
	--rm-radius-field: 12px; /* form controls (inputs, selects, boxes) */
	--rm-shadow-frame: 0 24px 70px rgba(42, 32, 27, .28);
}

/* ---- Sticky footer: content fills the viewport so the footer sits at the
   bottom on short pages (cart, 404, etc.). Scoped off the wp-admin editor UI. */
body:not(.wp-admin) {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body:not(.wp-admin) > main,
body:not(.wp-admin) main#content,
body:not(.wp-admin) main.site-main,
body:not(.wp-admin) .site-main {
	flex: 1 0 auto;
}

/* ---- Breathing room around theme-rendered content (cart, checkout, 404,
   account...). Elementor-built pages are not wrapped in <main> at all -- they
   render as a bare `.elementor` sibling of header/footer -- so their
   full-bleed sections stay flush, which is what they are designed for. */
body:not(.wp-admin) main.site-main {
	padding-top: 56px;
	padding-bottom: 96px;
}
@media (max-width: 782px) {
	body:not(.wp-admin) main.site-main {
		padding-top: 32px;
		padding-bottom: 64px;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* `.alignwide` pulls a block 80px past its container on each side, which a
	   phone does not have to give: the cart and checkout hung 80px off-canvas
	   either way, under the header padding rather than inside it. Elementor-built
	   pages are unaffected — they render outside <main>. */
	body:not(.wp-admin) main.site-main .alignwide {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ---- Twinkle star animation (hero + quote motif) ---- */
@keyframes rmTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.rm-twinkle { animation: rmTwinkle 3s ease-in-out infinite; }

/* ---- Typography helpers ---- */
.rm-kicker {
	font-family: var(--rm-sans);
	font-size: 11px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--rm-terracotta);
	font-weight: 500;
}
.rm-serif { font-family: var(--rm-serif); }
.rm-serif-italic { font-family: var(--rm-serif); font-style: italic; }
.rm-title {
	font-family: var(--rm-serif);
	font-weight: 600;
	line-height: 1.0;
	letter-spacing: -.015em;
	color: var(--rm-ink);
	margin: 0;
}
.rm-price {
	font-family: var(--rm-serif);
	font-weight: 700;
	color: var(--rm-ink);
}

/* ---- Buttons / pills ---- */
.rm-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--rm-ink);
	color: var(--rm-cream);
	font-family: var(--rm-sans);
	font-weight: 500;
	font-size: 15px;
	padding: 17px 32px;
	border-radius: var(--rm-radius-pill);
	text-decoration: none;
	line-height: 1;
	transition: transform .15s ease, opacity .15s ease;
}
.rm-btn:hover { transform: translateY(-1px); opacity: .92; }
.rm-btn svg { stroke: var(--rm-terracotta); }
.rm-link-underline {
	font-family: var(--rm-sans);
	font-size: 15px;
	color: var(--rm-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rm-terracotta);
	padding-bottom: 3px;
}
.rm-chip {
	font-family: var(--rm-sans);
	font-size: 13px;
	padding: 9px 18px;
	border-radius: 30px;
	border: 1px solid var(--rm-ink-20);
	color: var(--rm-ink);
	cursor: pointer;
}
.rm-chip.is-active { background: var(--rm-ink); color: var(--rm-cream); border-color: var(--rm-ink); font-weight: 500; }

/* ---- Product / box card ---- */
.rm-card { font-family: var(--rm-sans); }
.rm-card__media {
	position: relative;
	border-radius: var(--rm-radius-card);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	margin-bottom: 14px;
	background: var(--rm-card-bg);
}
.rm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--rm-terracotta);
	color: var(--rm-cream);
	padding: 5px 11px;
	border-radius: 20px;
}
.rm-card__title { font-size: 16px; font-weight: 500; color: var(--rm-ink); }
.rm-card__author { font-size: 13px; color: var(--rm-ink-50); margin-bottom: 2px; }
.rm-card__price { font-family: var(--rm-serif); font-size: 22px; font-weight: 700; color: var(--rm-ink); }

/* ---- Book cover placeholder (Libros) ---- */
.rm-cover {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	padding: 18px 14px;
	color: var(--rm-cream);
	aspect-ratio: 2 / 3;
	border-radius: 14px;
}
.rm-cover .mk { font-family: var(--rm-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .6; font-size: 10px; }
.rm-cover .t { font-family: var(--rm-serif); font-weight: 700; line-height: 1.05; font-size: 26px; }
.rm-cover .a { font-family: var(--rm-sans); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; opacity: .8; font-size: 11px; }

/* ---- Dark band (quote / CTA) ---- */
.rm-band-dark { background: var(--rm-ink); color: var(--rm-cream); }
.rm-quote {
	font-family: var(--rm-serif);
	font-style: italic;
	line-height: 1.35;
	margin: 0 auto;
	max-width: 760px;
}

/* ---- "Cómo funciona" step ---- */
/* In Elementor the number lives in `.elementor-heading-title`; style THAT as the
   circle so it's a perfect 60x60 with the number centered (styling the widget
   wrapper produced an off-center ellipse). */
.rm-step__num { text-align: center; margin-bottom: 18px; }
.rm-step__num .elementor-heading-title {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	border-radius: 50%;
	border: 1px solid rgba(177, 74, 43, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rm-serif);
	color: var(--rm-terracotta);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}
/* Plain-HTML fallback (dev preview only, no Elementor wrapper). */
.rm-step__num:not(:has(.elementor-heading-title)) {
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	border-radius: 50%;
	border: 1px solid rgba(177, 74, 43, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rm-serif);
	color: var(--rm-terracotta);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

/* ---- Helpers for native Elementor widgets (hook via "CSS Classes") ---- */
.rm-relative { position: relative; }
/* Hero image: crop to the design ratio while staying a native Image widget. */
.rm-hero-img img {
	width: 100%;
	aspect-ratio: 1085 / 1000;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 24px;
	display: block;
}
/* Hero photo as a container background (resolves reliably from the theme,
   no Media Library id needed). Swap for a real Image/Media later if desired. */
.rm-hero-photo {
	aspect-ratio: 1085 / 1000;
	border-radius: 24px;
	background-image: url("img/hero-principito.png");
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}
.rm-hero-star { position: absolute; top: 22px; right: 24px; z-index: 2; }

/* Win over Elementor's Kit defaults for headings tagged with our classes. */
.rm-title .elementor-heading-title { color: var(--rm-ink); font-family: var(--rm-serif); }
.rm-kicker .elementor-heading-title { color: var(--rm-terracotta); font-family: var(--rm-sans); }
.rm-quote .elementor-heading-title { color: var(--rm-cream); font-family: var(--rm-serif); font-style: italic; }
.rm-quote-src .elementor-heading-title { color: var(--rm-on-dark-50); font-family: var(--rm-sans); }
.rm-quote-src {
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--rm-on-dark-50);
}
.rm-seeall { color: var(--rm-terracotta); text-decoration: none; font-size: 14px; }
.rm-seeall a { color: var(--rm-terracotta); text-decoration: none; }

/* ---- Header / Footer (native widgets) ---- */
/* Logo mark as a CSS background so it resolves from the theme (no Media id). */
.rm-logo { width: 46px; height: 38px; background: url("img/logo.png") left center / contain no-repeat; }
.rm-logo--sm { width: 40px; height: 32px; }
.rm-logo--inv { filter: invert(1); }
/* Brand wordmark (a Heading using <br>). */
.rm-brand .elementor-heading-title {
	font-family: var(--rm-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: .98;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rm-ink);
}
.rm-brand--light .elementor-heading-title { color: var(--rm-cream); }
/* Nav Menu look (guaranteed regardless of widget setting keys). */
.rm-nav .elementor-item { font-family: var(--rm-sans); font-size: 14px; color: var(--rm-ink); font-weight: 400; }
.rm-nav .elementor-item:hover,
.rm-nav .elementor-item.elementor-item-active { color: var(--rm-terracotta); }
/* Mobile toggle color */
.rm-nav div.elementor-menu-toggle { color: var(--rm-ink); }

/* ---- Listado pages (Boxes / Libros) ---- */
.rm-sep { border-bottom: 1px solid var(--rm-ink-08); }
.rm-grow { flex: 1 1 0; min-width: 0; }

/* Filter chips as native Button widgets */
.rm-chip .elementor-button {
	background: transparent;
	color: var(--rm-ink);
	border: 1px solid var(--rm-ink-20);
	border-radius: 30px;
	padding: 9px 18px;
	font-family: var(--rm-sans);
	font-size: 13px;
	font-weight: 400;
	fill: var(--rm-ink);
}
.rm-chip .elementor-button:hover { border-color: var(--rm-terracotta); color: var(--rm-terracotta); background: transparent; }
.rm-chip--active .elementor-button {
	background: var(--rm-ink);
	color: var(--rm-cream);
	border-color: var(--rm-ink);
	font-weight: 500;
}
.rm-chip--active .elementor-button:hover { color: var(--rm-cream); border-color: var(--rm-ink); }

/* Libros sidebar */
.rm-catlist .elementor-widget-container > * { margin: 0; }
.rm-catlist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rm-catlist li { font-size: 14px; }
.rm-catlist a { color: rgba(42, 32, 27, .7); text-decoration: none; }
.rm-catlist a:hover { color: var(--rm-terracotta); }
.rm-catlist li.is-active a { color: var(--rm-ink); font-weight: 600; }
.rm-sidebar-sep { height: 1px; background: var(--rm-ink-08); margin: 24px 0; }

/* ---- Info panel ("Qué incluye" / ficha) ---- */
.rm-panel {
	background: var(--rm-panel);
	border: 1px solid var(--rm-panel-border);
	border-radius: 18px;
}
.rm-panel__label {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rm-terracotta);
	font-weight: 600;
}