/* =========================================================================
   Horneando Recuerdos — hoja de estilos principal
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Reset ligero
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Ningún elemento debe provocar desplazamiento horizontal en móvil. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* -------------------------------------------------------------------------
   2. Tokens de marca
   ------------------------------------------------------------------------- */
:root {
	--hr-cacao-900: #2A1A11;
	--hr-cacao-700: #4A2E1F;
	--hr-cacao-500: #7A5138;
	--hr-terracotta-600: #BE6A44;
	--hr-terracotta-700: #A0552F;
	--hr-gold-500: #C99A56;
	--hr-blush-200: #F1D9C9;
	--hr-cream-100: #FBF2E7;
	--hr-cream-050: #FEFAF5;
	--hr-ivory-50: #FFFDF9;
	--hr-ink: #2A1A11;

	--hr-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--hr-font-body: 'Jost', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--hr-shadow-sm: 0 2px 10px rgba(42, 26, 17, 0.08);
	--hr-shadow-md: 0 10px 28px rgba(42, 26, 17, 0.12);
	--hr-shadow-lg: 0 24px 56px rgba(42, 26, 17, 0.18);
	--hr-radius-sm: 12px;
	--hr-radius: 20px;
	--hr-radius-lg: 32px;
	--hr-container: 1180px;
	--hr-header-h: 84px;

	/* Compatibilidad con el contenido existente: las 19 páginas y el blog
	   siguen refiriéndose a la paleta de Astra (más de 4.000 referencias en
	   la base de datos). Se remapean a los colores de marca en lugar de
	   reescribir el contenido bloque a bloque. */
	--ast-global-color-0: var(--hr-cacao-700);
	--ast-global-color-1: var(--hr-blush-200);
	--ast-global-color-2: var(--hr-terracotta-600);
	--ast-global-color-3: #4B4F58;
	--ast-global-color-4: var(--hr-cream-100);
	--ast-global-color-5: var(--hr-ivory-50);
	--ast-global-color-6: var(--hr-blush-200);
	--ast-global-color-7: var(--hr-ink);
	--ast-global-color-8: #000000;

	/* Iconos como máscaras SVG en línea: un solo trazo redondeado y suave
	   para todo el sitio, sin librerías externas ni peticiones de red. */
	--hr-icon-whatsapp: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 3C9.4 3 4 8.4 4 15c0 2.4.7 4.6 1.9 6.5L4 29l7.7-1.9C13.5 28 14.7 28 16 28c6.6 0 12-5.4 12-12S22.6 3 16 3zm5.9 16.7c-.3.9-1.5 1.6-2.2 1.6-.6.1-1.3.1-2-.1-.5-.2-1.1-.4-1.8-.7-3.2-1.4-5.3-4.6-5.5-4.8-.2-.2-1.3-1.7-1.3-3.3 0-1.6.8-2.3 1.1-2.7.3-.3.6-.4.8-.4h.6c.2 0 .5 0 .7.5.3.6.9 2.2 1 2.4.1.2.1.3 0 .5-.1.2-.2.4-.3.5l-.5.6c-.2.2-.3.3-.1.6.2.3.8 1.4 1.8 2.2 1.2 1.1 2.2 1.4 2.5 1.6.3.2.5.1.7-.1.2-.2.8-.9 1-1.3.2-.3.4-.3.7-.2.3.1 1.9.9 2.2 1 .3.2.5.2.6.4.1.1.1.7-.1 1.2z"/></svg>');
	--hr-icon-pin: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 5.5-8 12-8 12s-8-6.5-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>');
	--hr-icon-phone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/></svg>');
	--hr-icon-mail: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="m3 7 8.2 5.5a1.5 1.5 0 0 0 1.6 0L21 7"/></svg>');
}

/* -------------------------------------------------------------------------
   3. Tipografía general
   ------------------------------------------------------------------------- */
body {
	font-family: var(--hr-font-body);
	color: var(--hr-ink);
	background: var(--hr-cream-050);
	font-size: 17px;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hr-font-display);
	color: var(--hr-cacao-700);
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 600;
}

h1 { font-family: var(--hr-font-display); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.15; }

/* Las portadas antiguas traen tamaños fijos en línea (font-size:7em) que en
   móvil desbordan la pantalla. Se neutralizan en favor del tamaño fluido. */
.entry-content h1[style*="font-size"],
.entry-content h2[style*="font-size"],
.wp-block-cover h1,
.wp-block-cover h2 {
	font-size: clamp(2.2rem, 6vw, 4.4rem) !important;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Las portadas heredadas fijan `min-height:600px` en línea. En móvil eso
   deja una pantalla entera casi vacía con el título flotando en medio, así
   que se sustituye por una altura proporcional al ancho de la ventana. */
.entry-content .wp-block-cover {
	min-height: clamp(260px, 40vw, 520px) !important;
	border-radius: var(--hr-radius-lg);
	overflow: hidden;
}
/* A sangre completa las esquinas redondeadas dejan cuñas de fondo visibles
   en los bordes de la pantalla: solo se redondean las portadas contenidas. */
.entry-content .wp-block-cover.alignfull,
.entry-content .alignfull.has-background {
	border-radius: 0;
}
.entry-content .wp-block-cover .wp-block-spacer {
	height: clamp(0px, 4vw, 60px) !important;
}
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
h4 { font-family: var(--hr-font-body); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hr-terracotta-700); }

p { margin: 0 0 1.2em; }
.entry-content a:not(.wp-block-button__link):not(.hr-button) {
	color: var(--hr-terracotta-700);
	text-underline-offset: 3px;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
}
.entry-content a:not(.wp-block-button__link):not(.hr-button):hover { color: var(--hr-cacao-700); }

::selection { background: var(--hr-terracotta-600); color: var(--hr-ivory-50); }

/* -------------------------------------------------------------------------
   4. Utilidades de layout
   ------------------------------------------------------------------------- */
.hr-container {
	width: 100%;
	max-width: var(--hr-container);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

/* Solo padding vertical: la forma abreviada `padding: X 0` anularía el
   padding lateral de `.hr-container` cuando ambas clases van en el mismo
   elemento, y el contenido acabaría pegado al borde en móvil. */
.hr-section { padding-block: clamp(56px, 8vw, 108px); }
.hr-section--tight { padding-block: clamp(32px, 5vw, 56px); }
.hr-section--cream { background: var(--hr-cream-100); }
.hr-section--blush { background: var(--hr-blush-200); }
.hr-section--dark { background: var(--hr-cacao-900); color: var(--hr-cream-100); }
.hr-section--dark h1, .hr-section--dark h2, .hr-section--dark h3 { color: var(--hr-cream-100); }

.hr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--hr-font-body);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--hr-terracotta-700);
	margin-bottom: 14px;
}
.hr-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--hr-gold-500); display: inline-block; }

/* -------------------------------------------------------------------------
   5. Botones
   ------------------------------------------------------------------------- */

/* Los botones "WhatsApp" antiguos usan la clase de paleta por defecto de
   WordPress (verde), no un color en línea. Se remapea a la marca aquí para
   cubrir todas las páginas sin tener que editar cada bloque. */
body .wp-block-button__link.has-vivid-green-cyan-background-color,
body a.has-vivid-green-cyan-background-color {
	background-color: var(--hr-terracotta-600) !important;
}
body .wp-block-button__link.has-vivid-green-cyan-background-color:hover,
body a.has-vivid-green-cyan-background-color:hover {
	background-color: var(--hr-terracotta-700) !important;
}

.hr-button,
.wp-block-button__link,
.gform_button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--hr-font-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	font-size: 1rem;
	padding: 0.95em 2.1em;
	border-radius: 999px;
	border: none;
	background: var(--hr-cacao-700);
	color: var(--hr-ivory-50) !important;
	box-shadow: var(--hr-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	cursor: pointer;
}
/* Los botones de WhatsApp llevan el icono delante, servido como máscara
   SVG en línea (sin peticiones externas) para que herede el color del texto. */
a[href*="api.whatsapp.com"].wp-block-button__link::before,
a[href*="wa.me"].wp-block-button__link::before,
a[href*="api.whatsapp.com"].hr-button::before,
a[href*="wa.me"].hr-button::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--hr-icon-whatsapp) center / contain no-repeat;
	mask: var(--hr-icon-whatsapp) center / contain no-repeat;
}

/* Evita que una etiqueta larga parta el botón en dos líneas desiguales. */
.wp-block-button__link,
.hr-button {
	text-wrap: balance;
	line-height: 1.35;
}

/* Los botones a ancho completo dentro de una columna estrecha necesitan
   texto y relleno algo menores para no partirse en dos líneas. */
.wp-block-button__width-100 .wp-block-button__link {
	width: 100%;
	padding-left: 1.1em;
	padding-right: 1.1em;
	font-size: clamp(0.88rem, 1.2vw, 1rem);
}

/* Botón "marketing" de UAGB (p. ej. "nuestros ingredientes"): estilo
   secundario legible, con el icono alineado con el texto. */
.uagb-marketing-btn__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--hr-ivory-50) !important;
	color: var(--hr-cacao-700) !important;
	border: 1.5px solid rgba(74, 46, 31, 0.25) !important;
	border-radius: 999px !important;
	padding: 0.75em 1.6em !important;
}
.uagb-marketing-btn__link:hover {
	background: var(--hr-cacao-700) !important;
	color: var(--hr-ivory-50) !important;
	border-color: var(--hr-cacao-700) !important;
}
.uagb-marketing-btn__link svg {
	width: 1.1em !important;
	height: 1.1em !important;
	flex: 0 0 auto;
	fill: currentColor !important;
}
.uagb-marketing-btn__title {
	color: inherit !important;
	font-size: 0.95rem;
	font-weight: 600;
}

.hr-button:hover,
.wp-block-button__link:hover,
.gform_button:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--hr-shadow-md);
	background: var(--hr-cacao-900);
}
.hr-button--accent { background: var(--hr-terracotta-600); }
.hr-button--accent:hover { background: var(--hr-terracotta-700); }
.hr-button--outline {
	background: transparent;
	color: var(--hr-cacao-700) !important;
	border: 1.5px solid var(--hr-cacao-700);
	box-shadow: none;
}
.hr-button--outline:hover { background: var(--hr-cacao-700); color: var(--hr-ivory-50) !important; }

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--hr-cacao-700) !important;
	border: 1.5px solid var(--hr-cacao-700);
}

/* -------------------------------------------------------------------------
   6. Tarjetas
   ------------------------------------------------------------------------- */
.hr-card {
	background: var(--hr-ivory-50);
	border-radius: var(--hr-radius);
	box-shadow: var(--hr-shadow-sm);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hr-card:hover { transform: translateY(-4px); box-shadow: var(--hr-shadow-md); }
.hr-card__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.hr-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hr-card:hover .hr-card__image img { transform: scale(1.05); }
.hr-card__body { padding: 24px 26px 28px; }

.entry-content img,
.wp-block-image img {
	border-radius: var(--hr-radius);
	box-shadow: var(--hr-shadow-sm);
}

/* -------------------------------------------------------------------------
   7. Cabecera
   ------------------------------------------------------------------------- */
.hr-topbar {
	background: var(--hr-cacao-900);
	color: var(--hr-cream-100);
	text-align: center;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 9px 16px;
}
.hr-topbar a { color: var(--hr-cream-100); text-decoration: underline; text-underline-offset: 3px; }

.hr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(254, 250, 245, 0.92);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid rgba(42, 26, 17, 0.08);
}
.hr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--hr-header-h);
}
.hr-logo,
.hr-logo a,
.hr-logo .custom-logo-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--hr-font-display);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--hr-cacao-700);
	line-height: 1;
}
.hr-logo img,
.hr-logo .custom-logo {
	max-height: 58px;
	width: auto;
	height: auto;
	display: block;
	/* La ilustración original es un trazo blanco; se re-tiñe a chocolate
	   para que se lea sobre la cabecera clara sin tocar el archivo. */
	filter: brightness(0) saturate(100%) invert(14%) sepia(24%) saturate(1800%) hue-rotate(340deg) brightness(90%) contrast(90%);
}

.hr-nav { display: none; }
.hr-nav > ul { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); flex-wrap: nowrap; }
.hr-nav > ul > li { position: relative; }
.hr-nav a {
	font-family: var(--hr-font-body);
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--hr-cacao-900);
	position: relative;
	padding: 6px 0;
	white-space: nowrap;
	display: inline-block;
}
.hr-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--hr-terracotta-600);
	transition: right 0.25s ease;
}
.hr-nav > ul > li > a:hover::after,
.hr-nav .current-menu-item > a::after { right: 0; }

/* Submenú (p. ej. "Tartas personalizadas" > Bodas, Comuniones...) */
.hr-nav li.menu-item-has-children > a::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 7px;
	position: relative;
	top: -2px;
}
.hr-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: var(--hr-ivory-50);
	border-radius: var(--hr-radius-sm);
	box-shadow: var(--hr-shadow-md);
	padding: 10px;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 50;
}
.hr-nav li.menu-item-has-children:hover > .sub-menu,
.hr-nav li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.hr-nav .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	white-space: nowrap;
}
.hr-nav .sub-menu a::after { display: none; }
.hr-nav .sub-menu a:hover { background: var(--hr-cream-100); color: var(--hr-terracotta-700); }

.hr-header__actions { display: flex; align-items: center; gap: 14px; }
.hr-header__cta.hr-button { padding: 0.7em 1.5em; font-size: 0.92rem; white-space: nowrap; }

.hr-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--hr-cream-100);
	border: 1px solid rgba(42, 26, 17, 0.1);
}
.hr-menu-toggle svg { width: 20px; height: 20px; }

.hr-mobile-nav {
	position: fixed;
	inset: 0;
	background: var(--hr-cream-050);
	z-index: 200;
	display: flex;
	flex-direction: column;
	padding: 24px;
	transform: translateX(100%);
	transition: transform 0.35s ease;
}
.hr-mobile-nav.is-open { transform: translateX(0); }
.hr-mobile-nav__top { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.hr-mobile-nav > nav > ul { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.hr-mobile-nav a {
	display: block;
	font-family: var(--hr-font-display);
	font-size: 1.5rem;
	color: var(--hr-cacao-700);
	padding: 12px 4px;
	border-bottom: 1px solid rgba(42, 26, 17, 0.08);
}
.hr-mobile-nav .sub-menu {
	display: flex;
	flex-direction: column;
	padding-left: 18px;
	border-left: 2px solid var(--hr-blush-200);
	margin: 4px 0 10px;
}
.hr-mobile-nav .sub-menu a {
	font-size: 1.1rem;
	padding: 9px 4px;
	border-bottom: none;
	color: var(--hr-cacao-500);
}
.hr-mobile-nav__cta { margin-top: 24px; }

@media (min-width: 1000px) {
	.hr-nav { display: block; }
	.hr-menu-toggle { display: none; }
}

/* -------------------------------------------------------------------------
   8. Hero (portada)
   ------------------------------------------------------------------------- */
.hr-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--hr-cream-100) 0%, var(--hr-blush-200) 100%);
}
.hr-hero__grid {
	display: grid;
	gap: 48px;
	align-items: center;
	padding: clamp(56px, 9vw, 120px) 0;
}
.hr-hero__title { margin-bottom: 20px; }
.hr-hero__lead { font-size: 1.15rem; color: var(--hr-cacao-500); max-width: 46ch; margin-bottom: 32px; }
.hr-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hr-hero__image {
	border-radius: var(--hr-radius-lg);
	overflow: hidden;
	box-shadow: var(--hr-shadow-lg);
	aspect-ratio: 4 / 5;
}
.hr-hero__image img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
	.hr-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* -------------------------------------------------------------------------
   9. Rejilla de categorías / tarjetas de servicio
   ------------------------------------------------------------------------- */
.hr-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hr-service-card {
	display: block;
	position: relative;
	border-radius: var(--hr-radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	box-shadow: var(--hr-shadow-sm);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hr-service-card:hover { transform: translateY(-4px); box-shadow: var(--hr-shadow-md); }
.hr-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hr-service-card:hover img { transform: scale(1.06); }
.hr-service-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(42,26,17,0.82) 0%, rgba(42,26,17,0.15) 55%, rgba(42,26,17,0) 100%);
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 24px;
	color: var(--hr-cream-100);
}
.hr-service-card__overlay h3 { color: var(--hr-cream-100); margin-bottom: 8px; }
.hr-service-card__overlay p { font-size: 0.92rem; opacity: 0.92; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   10. Testimonios
   ------------------------------------------------------------------------- */
.hr-testimonial {
	background: var(--hr-ivory-50);
	border-radius: var(--hr-radius);
	padding: 32px;
	box-shadow: var(--hr-shadow-sm);
}
.hr-testimonial__stars { color: var(--hr-gold-500); letter-spacing: 2px; margin-bottom: 12px; }
.hr-testimonial__quote { font-style: italic; font-family: var(--hr-font-display); font-size: 1.1rem; color: var(--hr-cacao-700); }
.hr-testimonial__author { margin-top: 16px; font-weight: 600; font-size: 0.9rem; color: var(--hr-cacao-500); }

/* -------------------------------------------------------------------------
   11. Blog — listado y artículo
   ------------------------------------------------------------------------- */
.hr-blog-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.hr-post-card__meta { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hr-terracotta-700); margin: 18px 26px 8px; font-weight: 600; }
.hr-post-card__body { padding: 0 26px 26px; }
.hr-post-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.hr-post-card h3 a {
	color: var(--hr-cacao-700);
	text-decoration: none;
}
.hr-post-card h3 a:hover { color: var(--hr-terracotta-700); }
.hr-post-card p { color: var(--hr-cacao-500); font-size: 0.96rem; }
.hr-post-card__more { font-weight: 600; color: var(--hr-terracotta-700); font-size: 0.9rem; }

.hr-single-header { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.hr-single-meta { color: var(--hr-cacao-500); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
/* El enlace de categoría salía con el azul por defecto del navegador. */
.hr-single-meta a { color: var(--hr-terracotta-700); font-weight: 600; }
.hr-single-meta a:hover { color: var(--hr-cacao-700); text-decoration: underline; text-underline-offset: 3px; }

/* Los títulos de artículo suelen ser largos (SEO local); en móvil el tamaño
   del h1 general los convertía en un muro de texto de pantalla completa. */
.hr-single-header h1 { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
.hr-single-cover { border-radius: var(--hr-radius-lg); overflow: hidden; box-shadow: var(--hr-shadow-lg); margin-bottom: 48px; }
.hr-single-cover img { width: 100%; }
.hr-article { max-width: 760px; margin: 0 auto; font-size: 1.08rem; }

.hr-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 48px; }
.hr-pagination a, .hr-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; border-radius: 50%;
	background: var(--hr-ivory-50); color: var(--hr-cacao-700);
	font-weight: 600; box-shadow: var(--hr-shadow-sm);
}
.hr-pagination .current { background: var(--hr-cacao-700); color: var(--hr-ivory-50); }

/* -------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------- */
.hr-footer { background: var(--hr-cacao-900); color: rgba(251, 242, 231, 0.85); }
.hr-footer__top { padding: 64px 0 40px; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hr-footer h5 { color: var(--hr-cream-100); font-family: var(--hr-font-body); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; margin-bottom: 18px; }
.hr-footer p, .hr-footer li { font-size: 0.94rem; line-height: 1.8; }
.hr-footer a { color: rgba(251, 242, 231, 0.85); }
.hr-footer a:hover { color: var(--hr-gold-500); }
.hr-footer__brand { font-family: var(--hr-font-display); font-style: italic; font-size: 1.6rem; color: var(--hr-cream-100); margin-bottom: 12px; }
.hr-footer__social { display: flex; gap: 12px; margin-top: 6px; }
.hr-footer__social a {
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(251, 242, 231, 0.1);
	display: flex; align-items: center; justify-content: center;
}
.hr-footer__social a:hover { background: var(--hr-terracotta-600); color: var(--hr-cream-100); }
.hr-footer__blog-link { margin-top: 16px; }
.hr-footer__blog-link a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hr-footer__blog-link a:hover { color: var(--hr-gold-500); }
.hr-footer__bottom {
	border-top: 1px solid rgba(251, 242, 231, 0.12);
	padding: 20px 0;
	font-size: 0.82rem;
	display: flex; flex-wrap: wrap; gap: 12px 24px;
	justify-content: space-between;
	color: rgba(251, 242, 231, 0.6);
}
.hr-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* -------------------------------------------------------------------------
   13. WhatsApp flotante
   ------------------------------------------------------------------------- */
.hr-whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 150;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: var(--hr-terracotta-600);
	color: var(--hr-ivory-50);
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--hr-shadow-md);
	transition: transform 0.25s ease;
}
.hr-whatsapp-float:hover { transform: scale(1.08); }
.hr-whatsapp-float svg { width: 28px; height: 28px; }

/* -------------------------------------------------------------------------
   13b. Iconos del contenido (bloques UAGB)

   Los iconos venían del editor en negro sólido y a tamaños dispares. Se
   unifican como una sola familia: círculo suave en tono melocotón, trazo
   en chocolate y mismo tamaño en toda la web.
   ------------------------------------------------------------------------- */
.uagb-ifb-icon-wrap,
.uagb-icon-wrapper .uagb-svg-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--hr-blush-200);
}
.uagb-ifb-icon-wrap { margin-bottom: 16px; }

.uagb-ifb-icon-wrap svg,
.uagb-icon-wrapper .uagb-svg-wrapper svg {
	width: 22px !important;
	height: 22px !important;
	fill: var(--hr-cacao-700) !important;
	color: var(--hr-cacao-700) !important;
}

/* El icono dentro de un botón no lleva círculo: hereda el color del botón. */
.wp-block-button__link .uagb-svg-wrapper,
.uagb-marketing-btn__link .uagb-svg-wrapper {
	width: auto;
	height: auto;
	background: none;
}
.wp-block-button__link .uagb-svg-wrapper svg,
.uagb-marketing-btn__link .uagb-svg-wrapper svg {
	fill: currentColor !important;
	color: currentColor !important;
}

/* -------------------------------------------------------------------------
   13c. Formulario de email plegado

   WhatsApp es la vía principal de contacto; el formulario queda disponible
   pero sin robarle protagonismo.
   ------------------------------------------------------------------------- */
.hr-form-toggle {
	border: 1.5px solid rgba(42, 26, 17, 0.12);
	border-radius: var(--hr-radius);
	background: var(--hr-ivory-50);
	padding: 4px 20px;
	margin-top: 8px;
}
.hr-form-toggle[open] {
	padding-bottom: 24px;
	box-shadow: var(--hr-shadow-sm);
}
.hr-form-toggle__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	font-family: var(--hr-font-body);
	font-weight: 600;
	color: var(--hr-cacao-700);
}
.hr-form-toggle__summary::-webkit-details-marker { display: none; }
.hr-form-toggle__summary::after {
	content: "";
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}
.hr-form-toggle[open] .hr-form-toggle__summary::after {
	transform: rotate(-135deg);
}
.hr-form-toggle__summary:hover { color: var(--hr-terracotta-700); }

/* El título original del formulario queda dentro del desplegable. */
.hr-form-toggle > :where(h1, h2, h3, h4) {
	font-size: 1.15rem;
	margin-top: 8px;
}

/* -------------------------------------------------------------------------
   14. Formularios (Gravity Forms)
   ------------------------------------------------------------------------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea,
.gform_wrapper select {
	border-radius: var(--hr-radius-sm) !important;
	border: 1.5px solid rgba(42, 26, 17, 0.15) !important;
	padding: 12px 16px !important;
	font-family: var(--hr-font-body) !important;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
	border-color: var(--hr-terracotta-600) !important;
	outline: none !important;
}

/* -------------------------------------------------------------------------
   15. Utilidades de bloque / accesibilidad
   ------------------------------------------------------------------------- */
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }

/* -------------------------------------------------------------------------
   Layout restringido del contenido.

   La portada (front-page.php) no envuelve el contenido en `.hr-container`,
   para que los fondos de sección puedan llegar de borde a borde. El precio
   de eso es que, sin estas reglas, el TEXTO también se estira hasta el borde
   de la pantalla. Aquí se restringe cada bloque de nivel superior al ancho
   de marca y se centra — el mismo criterio que usa el pie de página — dejando
   que solo los fondos sigan siendo full-bleed.
   ------------------------------------------------------------------------- */
.entry-content > * {
	max-width: var(--hr-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
	box-sizing: border-box;
}

.entry-content > .alignwide {
	max-width: calc(var(--hr-container) + 160px);
}

/* Los elementos a ancho completo mantienen el fondo de borde a borde, pero
   su contenido interior vuelve a centrarse al ancho de marca. Los grupos
   pueden venir anidados a varios niveles desde el editor, así que la regla
   se aplica a cualquier profundidad, no solo a los hijos directos. */
/* "Sangre completa": los bloques con fondo deben llegar de borde a borde
   aunque estén dentro de un contenedor centrado (page.php, single.php).
   Sin esto el fondo se corta al ancho del contenedor y la sección queda
   como una caja suelta en medio de la página. El contenido interior se
   vuelve a centrar con las reglas de abajo. */
.entry-content .alignfull,
.entry-content > .hr-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
}

/* Un alignfull anidado dentro de otro ya está a ancho completo: repetir el
   cálculo lo desplazaría fuera de la pantalla. */
.entry-content .alignfull .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.entry-content .wp-block-columns,
.entry-content .alignfull > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, hr, figure, .wp-block-buttons, .wp-block-image),
.entry-content > .alignfull > .wp-block-group__inner-container > *,
.entry-content > .alignfull > .wp-block-cover__inner-container > * {
	max-width: var(--hr-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
	box-sizing: border-box;
}

/* Las columnas anidadas dentro de otra columna ya heredan el margen del
   contenedor padre: duplicar el padding las estrecharía en cascada. */
.entry-content .wp-block-column .wp-block-columns,
.entry-content .wp-block-column :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
	padding-left: 0;
	padding-right: 0;
}
.entry-content > .wp-block-group.alignfull {
	padding-top: clamp(40px, 6vw, 72px);
	padding-bottom: clamp(40px, 6vw, 72px);
}

/* El hero ya trae su propio contenedor interno. */
.entry-content > .hr-hero > .hr-container { padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }

/* En las plantillas que YA envuelven el contenido en `.hr-container`
   (page.php, single.php) no hace falta duplicar el padding lateral. */
/* Dentro de `.hr-container` el padding lateral ya lo pone el contenedor.
   Se excluyen los bloques a sangre completa: al salirse del contenedor,
   su contenido interior necesita recuperar su propio margen. */
.hr-container .entry-content > *:not(.alignfull) {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 640px) {
	.hr-footer__bottom { flex-direction: column; }
}