/* =========================================================
   Bloques Home Pro — estilos (front + editor)
   Todas las secciones exponen estas variables, sobreescribibles
   desde "Apariencia > Personalizar > CSS adicional":
     --bhp-accent, --bhp-accent-soft, --bhp-ink, --bhp-muted,
     --bhp-card-bg, --bhp-radius
   ========================================================= */

.bhp-section {
	--bhp-accent: #8a6d3b;
	--bhp-accent-soft: #f5efe4;
	--bhp-ink: #1d1d1f;
	--bhp-muted: #7a7a80;
	--bhp-card-bg: #ffffff;
	--bhp-radius: 14px;
	margin: 2.75rem 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--bhp-ink);
}
.bhp-section *, .bhp-section *::before, .bhp-section *::after { box-sizing: border-box; }
.bhp-section a { text-decoration: none; color: inherit; }
.bhp-section img { display: block; max-width: 100%; border: 0; }

/* ---- Cabecera kicker + titulo ---- */
.bhp-head { margin: 0 0 1.4rem; }
.bhp-kicker {
	display: inline-flex; align-items: center; gap: .55rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--bhp-accent); margin-bottom: .45rem;
}
.bhp-kicker::before { content: ""; width: 26px; height: 2px; background: var(--bhp-accent); border-radius: 2px; }
.bhp-title {
	font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 700;
	line-height: 1.2; margin: 0; color: var(--bhp-ink);
}

/* ---- Grid ---- */
.bhp-grid {
	display: grid; gap: 1.4rem;
	grid-template-columns: repeat(var(--bhp-cols, 3), minmax(0, 1fr));
}
@media (max-width: 900px) { .bhp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bhp-grid { grid-template-columns: 1fr; } }

/* ---- Placeholder sin imagen ---- */
.bhp-ph {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--bhp-accent-soft), color-mix(in srgb, var(--bhp-accent) 22%, #fff));
	font-weight: 700; color: var(--bhp-accent); font-size: 2.2rem; opacity: .9;
}

/* ---- Tarjeta estilo "tarjetas" ---- */
.bhp-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--bhp-card-bg); border-radius: var(--bhp-radius); overflow: hidden;
	border: 1px solid rgba(15, 15, 20, .06);
	box-shadow: 0 1px 2px rgba(15, 15, 20, .05), 0 8px 24px rgba(15, 15, 20, .06);
	transition: transform .28s ease, box-shadow .28s ease;
}
.bhp-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 15, 20, .06), 0 16px 40px rgba(15, 15, 20, .12); }
.bhp-card .bhp-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.bhp-card .bhp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.bhp-card:hover .bhp-media img { transform: scale(1.05); }
.bhp-card .bhp-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.25rem; flex: 1; }
.bhp-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bhp-accent); }
.bhp-card h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--bhp-ink); }
.bhp-card h3 a {
	background-image: linear-gradient(var(--bhp-accent), var(--bhp-accent));
	background-repeat: no-repeat; background-size: 0 2px; background-position: 0 100%;
	transition: background-size .3s ease;
}
.bhp-card:hover h3 a { background-size: 100% 2px; }
.bhp-card h3 a::after { content: ""; position: absolute; inset: 0; }
.bhp-meta { margin-top: auto; display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--bhp-muted); }
.bhp-meta .bhp-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ---- Tarjeta estilo "overlay" ---- */
.bhp-ov {
	position: relative; display: block; border-radius: var(--bhp-radius); overflow: hidden;
	aspect-ratio: 16 / 10; background: #20222a;
	box-shadow: 0 1px 2px rgba(15, 15, 20, .05), 0 8px 24px rgba(15, 15, 20, .06);
	transition: transform .28s ease, box-shadow .28s ease;
}
.bhp-ov:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 15, 20, .06), 0 16px 40px rgba(15, 15, 20, .12); }
.bhp-ov img, .bhp-ov .bhp-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.bhp-ov img { object-fit: cover; opacity: .92; transition: transform .7s cubic-bezier(.2, .6, .2, 1); }
.bhp-ov:hover img { transform: scale(1.06); }
.bhp-ov::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 14, .85) 0%, rgba(8, 9, 14, .35) 45%, rgba(8, 9, 14, 0) 70%); }
.bhp-ov-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.2rem 1.25rem 1.3rem; color: #fff; }
.bhp-ov .bhp-eyebrow { color: #fff; background: var(--bhp-accent); display: inline-block; padding: .28em .7em; border-radius: 100px; margin-bottom: .55rem; }
.bhp-ov h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.3; margin: 0; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.bhp-ov .bhp-meta { color: rgba(255, 255, 255, .75); margin-top: .45rem; }

/* ---- Slider ---- */
.bhp-slider { position: relative; }
.bhp-track {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--bhp-cols, 3) - 1) * 1.4rem) / var(--bhp-cols, 3));
	gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding-bottom: .4rem;
	scrollbar-width: none; -ms-overflow-style: none;
	cursor: grab;
}
.bhp-track::-webkit-scrollbar { display: none; }
.bhp-track.bhp-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.bhp-track > * { scroll-snap-align: start; }
@media (max-width: 900px) { .bhp-track { grid-auto-columns: calc((100% - 1.4rem) / 2); } }
@media (max-width: 560px) { .bhp-track { grid-auto-columns: 85%; } }

.bhp-nav {
	position: absolute; top: calc(50% - 1.4rem); transform: translateY(-50%);
	z-index: 5; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid rgba(15, 15, 20, .1); background: #fff; color: var(--bhp-ink);
	font-size: 1.5rem; line-height: 1; cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .14); display: flex; align-items: center; justify-content: center;
	transition: background .2s, transform .15s, opacity .2s;
}
.bhp-nav:hover { background: var(--bhp-accent); color: #fff; }
.bhp-nav:disabled { opacity: 0; pointer-events: none; }
.bhp-prev { left: -12px; }
.bhp-next { right: -12px; }
@media (max-width: 560px) { .bhp-prev { left: 2px; } .bhp-next { right: 2px; } }

.bhp-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.bhp-dot-btn {
	width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0;
	background: rgba(15, 15, 20, .2); cursor: pointer; transition: background .2s, transform .2s;
}
.bhp-dot-btn.is-active { background: var(--bhp-accent); transform: scale(1.35); }

/* =========================================================
   Tamano GRANDE — apariencia tipo slider clasico de noticias
   (usar con 1 o 2 columnas y estilo overlay para el efecto hero)
   ========================================================= */
.bhp-tamano-grande .bhp-ov { aspect-ratio: 16 / 9; }
@media (min-width: 901px) { .bhp-tamano-grande .bhp-ov { min-height: 440px; } }
.bhp-tamano-grande .bhp-ov::after { background: linear-gradient(to top, rgba(8, 9, 14, .9) 0%, rgba(8, 9, 14, .4) 45%, rgba(8, 9, 14, 0) 75%); }
.bhp-tamano-grande .bhp-ov-body { padding: 2rem 2.2rem 2.1rem; }
.bhp-tamano-grande .bhp-ov h3 { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.22; }
.bhp-tamano-grande .bhp-ov .bhp-eyebrow { font-size: .8rem; padding: .35em .95em; margin-bottom: .7rem; }
.bhp-tamano-grande .bhp-ov .bhp-meta { font-size: .88rem; margin-top: .6rem; }

.bhp-tamano-grande .bhp-card .bhp-media { aspect-ratio: 16 / 9; }
.bhp-tamano-grande .bhp-card .bhp-body { padding: 1.4rem 1.5rem 1.6rem; gap: .6rem; }
.bhp-tamano-grande .bhp-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
.bhp-tamano-grande .bhp-card .bhp-meta { font-size: .85rem; }

.bhp-tamano-grande .bhp-nav { width: 52px; height: 52px; font-size: 2rem; }
.bhp-tamano-grande .bhp-title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
@media (max-width: 560px) { .bhp-tamano-grande .bhp-ov { aspect-ratio: 4 / 3; } }

/* ---- Categorias: tarjetas con imagen ---- */
.bhp-cat-card {
	position: relative; display: block; border-radius: var(--bhp-radius); overflow: hidden;
	aspect-ratio: 4 / 3; background: #20222a;
	box-shadow: 0 1px 2px rgba(15, 15, 20, .05), 0 8px 24px rgba(15, 15, 20, .06);
	transition: transform .28s ease, box-shadow .28s ease;
}
.bhp-cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 15, 20, .16); }
.bhp-cat-card img, .bhp-cat-card .bhp-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bhp-cat-card:hover img { transform: scale(1.06); }
.bhp-cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 14, .82), rgba(8, 9, 14, .1) 65%); }
.bhp-cat-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.1rem; color: #fff; }
.bhp-cat-name { display: block; font-size: 1.1rem; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.bhp-cat-num { display: block; font-size: .78rem; color: rgba(255, 255, 255, .8); margin-top: .15rem; }

/* ---- Categorias: chips ---- */
.bhp-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.bhp-chip {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .5rem .95rem; border-radius: 100px;
	background: var(--bhp-accent-soft); color: var(--bhp-ink);
	font-size: .9rem; font-weight: 600; border: 1px solid transparent;
	transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.bhp-chip:hover { background: var(--bhp-accent); color: #fff; transform: translateY(-2px); }
.bhp-chip-num {
	font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .55);
	color: var(--bhp-accent); border-radius: 100px; padding: .05rem .45rem;
}
.bhp-chip:hover .bhp-chip-num { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---- Aviso de vacio ---- */
.bhp-vacio {
	padding: 1.2rem; border: 1px dashed rgba(15, 15, 20, .2); border-radius: 12px;
	color: #7a7a80; font-size: .92rem; text-align: center;
}

/* ---- Ajuste dentro del editor (previsualizacion) ---- */
.editor-styles-wrapper .bhp-nav { display: none; }
.editor-styles-wrapper .bhp-track { overflow-x: auto; }