/* Home Builder Pro — frontend */

.hbp-home {
	--hbp-max: 1200px;
	--hbp-gap: 64px;
	--hbp-font: inherit;
	--hbp-font-size: inherit;
	--hbp-heading-size: 28px;
	--hbp-primary: #111827;
	--hbp-accent:  #2563eb;
	--hbp-text:    #1f2937;
	--hbp-bg:      #ffffff;
	font-family: var(--hbp-font);
	font-size:   var(--hbp-font-size);
	color:       var(--hbp-text);
	background:  var(--hbp-bg);

	/* Romper el contenedor del tema para forzar el ancho completo (edge-to-edge) */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
}

/* Evitar scroll horizontal provocado por el 100vw y resetear el espaciado superior que añaden los temas (ej: Asap Theme) */
html, body { overflow-x: hidden !important; }
.site-content, #content, .site-inner, .site-main, .content-page { 
	padding-top: 0 !important; 
	margin-top: 0 !important; 
	max-width: 100% !important;
}
.site-header { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.hbp-home--inherit-fonts  { --hbp-font: inherit; }
.hbp-home--inherit-sizes  { --hbp-font-size: inherit; --hbp-heading-size: inherit; }
.hbp-home--inherit-colors { --hbp-primary: inherit; --hbp-text: inherit; --hbp-bg: transparent; }

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

/* Hero */
.hbp-hero {
	position: relative;
	background-size: cover; background-position: center;
	display:flex; align-items:center; color:#fff;
}
.hbp-hero__overlay { position:absolute; inset:0; z-index:1; }
.hbp-hero__inner { position:relative; z-index:2; text-align:center; width:100%; }
.hbp-hero__title { font-size: clamp(32px, 5vw, 64px); margin:0 0 12px; color:#fff; }
.hbp-hero__subtitle { font-size: clamp(16px, 2vw, 22px); opacity:.9; margin:0 0 24px; }
.hbp-hero__cta {
	font-size: 18px; /* Bigger than default card buttons */
	padding: 14px 32px;
}
.hbp-hero--split .hbp-hero__inner { text-align:left; max-width:640px; }

/* Section */
.hbp-section { padding: calc(var(--hbp-gap) / 2) 0; }
.hbp-section[style*="background-image"] { background-size:cover; background-position:center; }

/* Strong H2 — beat the theme. Sizes never collapse to body text. */
.hbp-home .hbp-section__title,
.hbp-home h2.hbp-section__title {
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 10px !important;
	padding: 0 !important;
	color: var(--hbp-primary);
}
.hbp-home--inherit-sizes .hbp-section__title { font-size: clamp(26px, 3.2vw, 40px); }
.hbp-section__desc  { color:inherit; opacity:.85; margin:0 0 20px; font-size: clamp(15px, 1.2vw, 17px); line-height:1.55; }
.hbp-section__desc p, .hbp-section__desc a, .hbp-section__desc span, .hbp-section__desc strong { color: inherit !important; font-size: inherit !important; }

/* Para la descripción de Recientes que no usa la franja de cabecera */
.hbp-section__desc-wrap { padding-top: 8px; padding-bottom: 24px; text-align: center; }
.hbp-section__desc-wrap .hbp-section__desc { max-width: 920px; margin: 0 auto; text-align: center; opacity: .9; }

.hbp-section__more  { margin-top:24px; }
.hbp-more-btn_solid {
	display:inline-block; padding:10px 24px; background:var(--btn-bg, var(--hbp-accent));
	color:var(--btn-text, #fff) !important; border-radius:999px; text-decoration:none; font-weight:600;
	transition: opacity .2s; border: 1px solid var(--btn-border, var(--hbp-accent)); font-size: 15px;
}
.hbp-more-btn_solid:hover { opacity: .85; }

.hbp-more-btn_outline {
	display:inline-block; padding:10px 24px; border:2px solid var(--btn-border, var(--hbp-accent));
	color:var(--btn-text, var(--hbp-accent)) !important; border-radius:999px; text-decoration:none; font-weight:600;
	transition: background .2s, color .2s; background: transparent; font-size: 15px;
}
.hbp-more-btn_outline:hover { background: var(--btn-bg, var(--hbp-accent)); color:#fff !important; }

.hbp-more-link {
	display:inline-block; color:var(--btn-text, var(--hbp-accent)) !important; text-decoration:underline; font-weight:600;
	padding: 10px 0; font-size: 16px;
}
.hbp-more-link:hover { text-decoration:none; opacity:.8; }

/* ==== Section header strip ("franja") ====
   Parallax/gradient bg + frosted-glass overlay + H2/desc on top. */
.hbp-sec-head {
	position: relative;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 28px;
	isolation: isolate; /* keep backdrop-filter scoped here */
}
.hbp-sec-head--plain { min-height: 0; margin-bottom: 6px; }
.hbp-sec-head--none  { background: transparent; color: inherit; min-height: 0; }
.hbp-sec-head--none .hbp-section__title { color: var(--hbp-primary); }
.hbp-sec-head--none .hbp-section__desc  { color: #6b7280; }

.hbp-sec-head--fixed { background-attachment: fixed; }
@media (max-width: 768px) {
	.hbp-sec-head--fixed { background-attachment: scroll; }
}

/* Glass overlay: sits above the bg, below the text. Inline styles carry
   backdrop-filter, blur amount and the rgba tint/opacity. */
.hbp-sec-head__glass {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.hbp-sec-head--glass .hbp-sec-head__glass {
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Text container — sits above the glass. */
.hbp-sec-head__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--hbp-max);
	padding: 24px;
	margin: 0 auto;
}
/* Asegurar centrado vertical perfecto quitando el margen inferior del último elemento */
.hbp-sec-head__inner > *:last-child { margin-bottom: 0 !important; }

.hbp-sec-head--align-left   .hbp-sec-head__inner { text-align: left; }
.hbp-sec-head--align-center .hbp-sec-head__inner { text-align: center; }
.hbp-sec-head--align-right  .hbp-sec-head__inner { text-align: right; }

/* H2 on a strip: BIG and legible regardless of theme. */
.hbp-home .hbp-sec-head:not(.hbp-sec-head--none) .hbp-section__title,
.hbp-home .hbp-sec-head:not(.hbp-sec-head--none) h2.hbp-section__title {
	color: inherit;
	font-size: clamp(34px, 5vw, 60px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 14px;
	text-shadow: 0 2px 18px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.25);
}

.hbp-btn {
	display:inline-block; padding:10px 22px; border:1px solid var(--hbp-accent);
	color:var(--hbp-accent); border-radius:999px; text-decoration:none; font-weight:600;
	transition: background .2s, color .2s;
}
.hbp-btn:hover { background: var(--hbp-accent); color:#fff; }

/* Dual Layout */
.hbp-dual-layout { display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width: 768px) {
	.hbp-dual-layout { grid-template-columns:repeat(2, 1fr); gap:48px; }
}
.hbp-dual-title {
	font-size: 26px; font-weight: 800; letter-spacing:-0.02em;
	margin: 0 0 24px 0; padding-bottom: 12px;
	border-bottom: 3px solid var(--hbp-accent); display:inline-block;
}
.hbp-dual-title a { color: inherit !important; text-decoration: none; }
.hbp-home--dark .hbp-dual-title { border-color: var(--hbp-accent); }

/* Grid */
.hbp-grid {
	display:grid;
	grid-template-columns: repeat(var(--cols-m, 1), 1fr);
	gap:20px;
}
@media (min-width: 768px) {
	.hbp-grid { grid-template-columns: repeat(var(--cols-d, 3), 1fr); }
}

/* 1. Base / Classic Card */
.hbp-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; position:relative; transition: transform .3s, box-shadow .3s; }
.hbp-card__img { display:block; aspect-ratio: 16/10; overflow:hidden; background:#f3f4f6; flex-shrink:0; position:relative; }
.hbp-card__img img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.hbp-card:hover .hbp-card__img img { transform: scale(1.05); }
.hbp-card__noimg { display:block; width:100%; height:100%; background:linear-gradient(135deg,#e5e7eb,#f3f4f6); }
.hbp-card__body { padding:14px 16px; display:flex; flex-direction:column; flex-grow:1; }
.hbp-card__title { font-size:18px; margin:0 0 6px; line-height:1.3; }
.hbp-card__title a { color: var(--card-title-color, var(--hbp-primary)); text-decoration:none; }
.hbp-card__title a:hover { color: var(--hbp-accent); }
.hbp-card__excerpt { margin:0; color:#4b5563; font-size:14px; line-height:1.5; }

/* 2. Shadow (Flotante) */
.hbp-section--style-shadow .hbp-card { border:none; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.hbp-section--style-shadow .hbp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(0,0,0,0.12); }

/* 3. Overlay */
.hbp-section--style-overlay .hbp-card { border:none; border-radius: 12px; min-height:280px; background:#111827; }
.hbp-section--style-overlay .hbp-card__img { position:absolute; inset:0; width:100%; height:100%; opacity:0.75; }
.hbp-section--style-overlay .hbp-card:hover .hbp-card__img { opacity:0.85; }
.hbp-section--style-overlay .hbp-card__body { position:relative; z-index:2; margin-top:auto; padding:20px; background:linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%); pointer-events:none; }
.hbp-section--style-overlay .hbp-card__title a { color:#fff !important; pointer-events:auto; }
.hbp-section--style-overlay .hbp-card__excerpt { color:rgba(255,255,255,0.85) !important; pointer-events:auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 4. Minimalista */
.hbp-section--style-minimal .hbp-card { background:transparent; border:none; border-radius:0; }
.hbp-section--style-minimal .hbp-card__img { border-radius:8px; }
.hbp-section--style-minimal .hbp-card__body { padding:14px 0 0 0; }

/* 5. Horizontal */
@media (min-width: 600px) {
	.hbp-section--style-horizontal .hbp-card { flex-direction:row; align-items:stretch; }
	.hbp-section--style-horizontal .hbp-card__img { width:40%; aspect-ratio:4/3; }
	.hbp-section--style-horizontal .hbp-card__body { width:60%; padding:20px; justify-content:center; }
}

/* 6. Newspaper (Periódico compacta) */
.hbp-section--style-newspaper .hbp-card { flex-direction:row; align-items:center; background:transparent; border:none; border-bottom:1px solid #e5e7eb; border-radius:0; padding:16px 0; }
.hbp-section--style-newspaper .hbp-card:last-child { border-bottom:none; }
.hbp-section--style-newspaper .hbp-card__img { width:90px; height:90px; min-width:90px; border-radius:6px; aspect-ratio:auto; flex-shrink:0; }
.hbp-section--style-newspaper .hbp-card__body { width:auto; flex:1; padding:0 0 0 16px; justify-content:center; }
.hbp-section--style-newspaper .hbp-card__title { margin:0; font-size:16px; }

/* 7. Featured (Grid: Primero grande) */
@media (min-width: 768px) {
	.hbp-section--style-featured .hbp-grid { grid-auto-flow: dense; }
	.hbp-section--style-featured .hbp-card:first-child { grid-column: span 2; border:none; background:#111827; min-height:300px; }
	.hbp-section--style-featured .hbp-card:first-child .hbp-card__img { position:absolute; inset:0; width:100%; height:100%; opacity:0.7; aspect-ratio:auto; }
	.hbp-section--style-featured .hbp-card:first-child:hover .hbp-card__img { opacity:0.85; }
	.hbp-section--style-featured .hbp-card:first-child .hbp-card__body {
		position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
		padding:32px 40px; min-height:100%; background:linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%); pointer-events:none;
	}
	.hbp-section--style-featured .hbp-card:first-child .hbp-card__title { margin:0 0 10px; }
	.hbp-section--style-featured .hbp-card:first-child .hbp-card__title a { color:#fff !important; font-size:28px; pointer-events:auto; line-height:1.25; }
	.hbp-section--style-featured .hbp-card:first-child .hbp-card__excerpt { color:rgba(255,255,255,0.9) !important; font-size:17px; line-height:1.6; pointer-events:auto; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
}

/* 8. Magazine (Editorial premium) */
.hbp-section--style-magazine .hbp-card {
	border:none; border-radius:12px; background:#fff; overflow:visible;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: transform .35s ease, box-shadow .35s ease;
}
.hbp-section--style-magazine .hbp-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.hbp-section--style-magazine .hbp-card__img {
	aspect-ratio: 3/2; border-radius:12px 12px 0 0; overflow:hidden;
}
.hbp-section--style-magazine .hbp-card__body {
	padding:20px 22px 24px; position:relative;
}
.hbp-section--style-magazine .hbp-card__body::before {
	content:''; position:absolute; top:0; left:22px; width:40px; height:3px;
	background: linear-gradient(90deg, var(--hbp-accent, #2563eb), #8b5cf6);
	border-radius:2px;
}
.hbp-section--style-magazine .hbp-card__title {
	font-size:20px; font-weight:800; letter-spacing:-0.025em;
	line-height:1.25; margin:14px 0 10px;
}
.hbp-section--style-magazine .hbp-card__excerpt {
	font-size:14px; line-height:1.65; color:#64748b; margin:0;
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hbp-section--style-magazine .hbp-card__title a::after { display:none; }
.hbp-section--style-magazine .hbp-card:hover .hbp-card__img img { transform:scale(1.06); }
/* Dark mode magazine */
.hbp-home--dark .hbp-section--style-magazine .hbp-card { background:#1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.hbp-home--dark .hbp-section--style-magazine .hbp-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
.hbp-home--dark .hbp-section--style-magazine .hbp-card__excerpt { color:#94a3b8; }

/* 9. Glass (Cristal esmerilado / Glassmorphism) */
.hbp-section--style-glass .hbp-card {
	background: rgba(255,255,255,0.45); border:1px solid rgba(255,255,255,0.5); border-radius:16px;
	backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
	transition: transform .3s, box-shadow .3s;
}
.hbp-section--style-glass .hbp-card:hover { transform:translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.12); }
.hbp-section--style-glass .hbp-card__img { border-radius:14px 14px 0 0; }
.hbp-section--style-glass .hbp-card__body { padding:18px 20px; }
.hbp-section--style-glass .hbp-card__title a { color:#1e293b; }
.hbp-section--style-glass .hbp-card__excerpt { color:#475569; }
/* Dark mode glass */
.hbp-home--dark .hbp-section--style-glass .hbp-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.hbp-home--dark .hbp-section--style-glass .hbp-card__title a { color:#f1f5f9; }
.hbp-home--dark .hbp-section--style-glass .hbp-card__excerpt { color:#94a3b8; }

/* 10. Gradient Border (Borde con degradado) */
.hbp-section--style-gradient-border .hbp-card {
	border:none; border-radius:14px; background:#fff; position:relative;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.hbp-section--style-gradient-border .hbp-card::before {
	content:''; position:absolute; inset:-2px; border-radius:16px; z-index:-1;
	background:linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899, #f43f5e);
	opacity:0.5; transition:opacity .3s;
}
.hbp-section--style-gradient-border .hbp-card:hover::before { opacity:1; }
.hbp-section--style-gradient-border .hbp-card__img { border-radius:12px 12px 0 0; }
.hbp-section--style-gradient-border .hbp-card__body { padding:16px 18px; }
.hbp-section--style-gradient-border .hbp-card:hover { transform:translateY(-3px); }
.hbp-home--dark .hbp-section--style-gradient-border .hbp-card { background:#1f2937; }

/* 11. Compact (Compacto: miniatura + título apretados) */
.hbp-section--style-compact .hbp-card { flex-direction:row; align-items:center; border-radius:8px; padding:10px; gap:12px; background:#f9fafb; border:1px solid #e5e7eb; }
.hbp-section--style-compact .hbp-card__img { width:64px; height:64px; min-width:64px; border-radius:6px; aspect-ratio:auto; flex-shrink:0; }
.hbp-section--style-compact .hbp-card__body { padding:0; flex:1; min-width:0; }
.hbp-section--style-compact .hbp-card__title { font-size:14px; margin:0; line-height:1.35; }
.hbp-section--style-compact .hbp-card__excerpt { display:none; }
.hbp-section--style-compact .hbp-card:hover { background:#f1f5f9; }
.hbp-home--dark .hbp-section--style-compact .hbp-card { background:#1f2937; border-color:#374151; }
.hbp-home--dark .hbp-section--style-compact .hbp-card:hover { background:#283548; }

/* Responsive hiding by count */
@media (max-width: 767px) {
	.hbp-card--hide-mobile { display:none; }
}
@media (min-width: 768px) {
	.hbp-card--hide-desktop { display:none; }
}

/* Other categories */
.hbp-other-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size: var(--oc-link-size, 16px); }
.hbp-other-list a { color: var(--oc-link, var(--hbp-primary)); text-decoration:none; }
.hbp-other-list a:hover { color: var(--hbp-accent); }
.hbp-other-list span { color: var(--oc-count, #9ca3af); }

.hbp-other-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.hbp-other-chip {
	display:flex; flex-direction:column; padding:12px 14px;
	background: var(--oc-chip-bg, #f9fafb); border:1px solid var(--oc-chip-border, #e5e7eb); border-radius:8px;
	text-decoration:none; color: var(--oc-link, var(--hbp-primary)); font-size: var(--oc-link-size, 16px);
}
.hbp-other-chip small { color: var(--oc-count, #9ca3af); font-size:12px; margin-top:2px; }
.hbp-other-chip:hover { border-color: var(--hbp-accent); }

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */
.hbp-home--dark {
	--hbp-bg: #111827 !important;
	--hbp-text: #f3f4f6 !important;
}
body.hbp-no-theme-header.hbp-home--dark, 
.hbp-home--dark {
	background-color: var(--hbp-bg);
	color: var(--hbp-text);
}

.hbp-home--dark .hbp-card {
	background-color: #1f2937;
	border-color: #374151;
}
.hbp-home--dark .hbp-card__img {
	background-color: #374151;
}
.hbp-home--dark .hbp-card__noimg {
	background: linear-gradient(135deg, #374151, #1f2937);
}
.hbp-home--dark .hbp-card__excerpt {
	color: #9ca3af;
}

/* Minimal / Newspaper borders */
.hbp-home--dark .hbp-section--style-minimal .hbp-card,
.hbp-home--dark .hbp-section--style-newspaper .hbp-card {
	background-color: transparent;
}
.hbp-home--dark .hbp-section--style-newspaper .hbp-card {
	border-bottom-color: #374151;
}

/* Other chips */
.hbp-home--dark .hbp-other-chip {
	--oc-chip-bg: #1f2937;
	--oc-chip-border: #374151;
}
.hbp-home--dark .hbp-other-list a { color: var(--oc-link, #93c5fd); }
.hbp-home--dark .hbp-other-list span { color: var(--oc-count, #6b7280); }