/* OBV Blog — portado de bus-turistico.pages.dev (tokens.css + styles.css + blog.css + post.css).
   Todo va con prefijo obvb- y bajo .obvb para no chocar con Bricks/Woo; el header, el footer y la barra
   "Comprar tickets" son los del sitio. */

.obvb {
	--obvb-red-500: #e30623;
	--obvb-red-600: #b3051c;
	--obvb-red-50: #fdecee;
	--obvb-yellow-400: #ffc200;
	--obvb-n0: #ffffff;
	--obvb-n50: #f8f9fa;
	--obvb-n200: #e0e0e0;
	--obvb-n500: #757575;
	--obvb-n700: #4a4a4a;
	--obvb-n900: #1a1a1a;

	--obvb-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--obvb-s4: 4px; --obvb-s8: 8px; --obvb-s12: 12px; --obvb-s16: 16px; --obvb-s20: 20px;
	--obvb-s24: 24px; --obvb-s32: 32px; --obvb-s48: 48px; --obvb-s64: 64px;
	--obvb-r-sm: 8px; --obvb-r-md: 10px; --obvb-r-lg: 16px; --obvb-r-full: 50px;
	--obvb-shadow-card: 0 2px 12px rgba(0, 0, 0, .08);
	--obvb-shadow-float: 0 4px 16px rgba(0, 0, 0, .25);

	--obvb-bg-page: var(--obvb-n0);
	--obvb-bg-surface: var(--obvb-n50);
	--obvb-border: var(--obvb-n200);
	--obvb-text-primary: var(--obvb-n900);
	--obvb-text-body: var(--obvb-n700);
	--obvb-text-secondary: var(--obvb-n500);
	--obvb-text-inverse: var(--obvb-n0);
	--obvb-brand: var(--obvb-red-500);
	--obvb-action: var(--obvb-red-500);
	--obvb-action-hover: var(--obvb-red-600);
	--obvb-action-soft: var(--obvb-red-50);
	--obvb-overlay: rgba(0, 0, 0, .45);

	--obvb-text-display: 48px; --obvb-text-display-m: 32px;
	--obvb-text-h2: 32px; --obvb-text-h2-m: 24px;
	--obvb-text-h3: 24px;
	--obvb-text-h4: 18px;
	--obvb-text-body-lg: 17px;
	--obvb-text-body: 15px;
	--obvb-text-small: 13px;

	font-family: var(--obvb-font);
	font-size: var(--obvb-text-body);
	line-height: 1.7;
	color: var(--obvb-text-body);
	background: var(--obvb-bg-page);
}
.obvb *, .obvb *::before, .obvb *::after { box-sizing: border-box; }
.obvb img { display: block; max-width: 100%; height: auto; }
.obvb a { color: inherit; }
.obvb h1, .obvb h2, .obvb h3, .obvb h4 { margin: 0; color: var(--obvb-text-primary); line-height: 1.3; font-family: var(--obvb-font); letter-spacing: normal; text-transform: none; }
.obvb p { margin: 0; }
.obvb [hidden] { display: none !important; }

.obvb-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--obvb-s24); }
@media (max-width: 767px) { .obvb-container { padding: 0 var(--obvb-s16); } }

/* Botones */
.obvb .obvb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--obvb-s8);
	min-height: 44px; padding: 14px 28px; margin: 0;
	font: 600 16px/1 var(--obvb-font);
	border: 1px solid transparent; border-radius: var(--obvb-r-full);
	text-decoration: none; cursor: pointer; box-shadow: none; transform: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.obvb .obvb-btn--primary { background: var(--obvb-action); color: var(--obvb-text-inverse); }
.obvb .obvb-btn--primary:hover { background: var(--obvb-action-hover); color: var(--obvb-text-inverse); transform: none; }
.obvb .obvb-btn--ghost { background: transparent; color: var(--obvb-text-primary); padding-left: 0; padding-right: 0; }
.obvb .obvb-btn--ghost:hover { color: var(--obvb-brand); }
.obvb .obvb-btn--sm { min-height: 36px; padding: 8px 16px; font-size: 14px; font-weight: 500; }

/* Chips de filtro */
.obvb-chips { display: flex; gap: var(--obvb-s8); flex-wrap: wrap; }
.obvb .obvb-chip {
	display: inline-flex; align-items: center;
	font: 500 14px/1 var(--obvb-font); padding: 10px 16px; min-height: 38px;
	border: 1px solid var(--obvb-border); border-radius: var(--obvb-r-full);
	background: var(--obvb-bg-page); color: var(--obvb-text-body); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.obvb .obvb-chip:hover { border-color: var(--obvb-text-secondary); }
.obvb .obvb-chip.is-active { background: var(--obvb-text-primary); border-color: var(--obvb-text-primary); color: var(--obvb-text-inverse); }
@media (max-width: 767px) {
	.obvb-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--obvb-s16)); padding: 0 var(--obvb-s16); }
	.obvb-chips--scroll::-webkit-scrollbar { display: none; }
}

/* Badge de categoría (etiqueta) */
.obvb .obvb-tag {
	display: inline-block; font: 600 12px/1 var(--obvb-font); letter-spacing: .5px; text-transform: uppercase;
	padding: 6px 10px; border-radius: var(--obvb-r-full);
	background: var(--obvb-action-soft); color: var(--obvb-brand); text-decoration: none;
}
.obvb .obvb-tag--on-image { background: var(--obvb-action); color: var(--obvb-text-inverse); }

/* Buscador */
.obvb .obvb-field {
	display: flex; align-items: center; gap: var(--obvb-s8); margin: 0;
	height: 44px; padding: 0 var(--obvb-s16);
	border: 1px solid var(--obvb-border); border-radius: var(--obvb-r-full); background: var(--obvb-bg-page);
}
.obvb .obvb-field:focus-within { border-color: var(--obvb-text-primary); }
.obvb .obvb-field svg { flex: none; color: var(--obvb-text-secondary); }
.obvb .obvb-field input {
	flex: 1; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none;
	font: 400 15px var(--obvb-font); color: var(--obvb-text-primary); background: transparent;
}
.obvb .obvb-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.obvb .obvb-field__clear { display: inline-flex; border: 0; background: none; padding: 4px; margin: 0 -6px 0 0; color: var(--obvb-text-secondary); cursor: pointer; border-radius: 50%; }
.obvb .obvb-field__clear:hover { color: var(--obvb-text-primary); background: var(--obvb-bg-surface); }
.obvb .obvb-field__clear svg { color: inherit; }

/* Tarjeta de entrada */
.obvb .obvb-post-card { display: flex; flex-direction: column; border-radius: var(--obvb-r-md); background: var(--obvb-bg-page); box-shadow: var(--obvb-shadow-card); overflow: hidden; text-decoration: none; color: var(--obvb-text-body); }
.obvb-post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--obvb-bg-surface); }
/* La foto se posiciona dentro del recuadro para que su proporción no lo estire: todas las cards miden lo mismo. */
.obvb .obvb-post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obvb-post-card__media .obvb-tag { position: absolute; top: var(--obvb-s12); left: var(--obvb-s12); }
.obvb-post-card__body { display: flex; flex-direction: column; gap: var(--obvb-s8); padding: var(--obvb-s16) var(--obvb-s20) var(--obvb-s20); }
.obvb .obvb-post-card__title { font-size: var(--obvb-text-h4); font-weight: 700; line-height: 1.35; }
.obvb .obvb-post-card:hover .obvb-post-card__title { color: var(--obvb-brand); }
.obvb-post-card__excerpt { font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.obvb .obvb-meta { font-size: var(--obvb-text-small); color: var(--obvb-text-secondary); display: flex; gap: var(--obvb-s8); align-items: center; }
.obvb-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* Paginación */
.obvb-pagination { display: flex; gap: var(--obvb-s4); align-items: center; justify-content: center; }
.obvb-pagination a, .obvb-pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--obvb-s8);
	border-radius: var(--obvb-r-full); font: 500 15px/1 var(--obvb-font); text-decoration: none; color: var(--obvb-text-body);
}
.obvb-pagination span span { min-width: 0; height: auto; padding: 0; }
.obvb-pagination a span { min-width: 0; height: auto; padding: 0; }
.obvb-pagination a:hover { background: var(--obvb-bg-surface); }
.obvb-pagination .is-current { background: var(--obvb-action); color: var(--obvb-text-inverse); }
.obvb-pagination .is-disabled { opacity: .35; }
.obvb .obvb-pagination__step { gap: var(--obvb-s4); padding: 0 var(--obvb-s12); }
@media (max-width: 767px) { .obvb .obvb-pagination__step span { display: none; } }

/* Migas de pan */
.obvb-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--obvb-s8); font-size: var(--obvb-text-small); color: var(--obvb-text-secondary); }
.obvb-breadcrumb a { text-decoration: none; }
.obvb-breadcrumb a:hover { color: var(--obvb-brand); }
.obvb-breadcrumb--inverse { color: rgba(255, 255, 255, .85); }
.obvb-breadcrumb--inverse a:hover { color: #fff; text-decoration: underline; }

/* Héroe con foto. El header de Bricks mide 90px y queda encima (igual que en las paradas). */
.obvb-hero { position: relative; margin-top: -90px; min-height: 420px; display: flex; align-items: center; color: var(--obvb-text-inverse); text-align: center; overflow: hidden; background: var(--obvb-n900); }
.obvb .obvb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.obvb-hero::after { content: ""; position: absolute; inset: 0; background: var(--obvb-overlay); }
.obvb-hero__content { position: relative; z-index: 1; padding-top: 90px; padding-bottom: var(--obvb-s24); display: flex; flex-direction: column; align-items: center; gap: var(--obvb-s12); }
.obvb .obvb-hero__eyebrow { font-size: var(--obvb-text-h3); font-weight: 400; }
.obvb.obvb-hero h1 { color: inherit; font-size: var(--obvb-text-display); font-weight: 700; line-height: 1.4; }
@media (max-width: 767px) {
	.obvb-hero { min-height: 320px; }
	.obvb .obvb-hero__eyebrow { font-size: 18px; }
	.obvb.obvb-hero h1 { font-size: var(--obvb-text-display-m); }
}
.obvb-hero--compact { min-height: 360px; }
@media (max-width: 767px) { .obvb-hero--compact { min-height: 280px; } }
.obvb-hero--post { min-height: 480px; }
.obvb-hero--post .obvb-hero__content { max-width: 880px; }
.obvb.obvb-hero--post h1 { line-height: 1.25; }
.obvb-hero__meta { font-size: 15px; opacity: .9; }
@media (max-width: 767px) {
	.obvb-hero--post { min-height: 380px; }
	.obvb.obvb-hero--post h1 { font-size: 28px; }
	.obvb-hero__meta { font-size: 13px; }
}

/* Títulos de sección (patrón del home: eyebrow oscuro + H2 rojo) */
.obvb-section-title { display: flex; flex-direction: column; gap: var(--obvb-s4); }
.obvb .obvb-section-title__eyebrow { font-size: var(--obvb-text-h3); font-weight: 500; color: var(--obvb-text-primary); }
.obvb .obvb-section-title h2 { font-size: var(--obvb-text-h2); font-weight: 700; color: var(--obvb-brand); }
@media (max-width: 767px) {
	.obvb .obvb-section-title__eyebrow { font-size: 18px; }
	.obvb .obvb-section-title h2 { font-size: var(--obvb-text-h2-m); }
}

/* ---------- Listado ---------- */
.obvb-archive { padding-top: var(--obvb-s48); padding-bottom: var(--obvb-s64); }
@media (max-width: 767px) { .obvb-archive { padding-top: var(--obvb-s24); padding-bottom: var(--obvb-s48); } }

.obvb-toolbar { display: flex; flex-direction: column; gap: var(--obvb-s20); margin-bottom: var(--obvb-s24); }
.obvb-toolbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--obvb-s16); }
.obvb .obvb-toolbar__row .obvb-field { width: 320px; flex: none; }
.obvb-toolbar .obvb-chips { flex: 1; min-width: 0; }
@media (max-width: 1023px) {
	.obvb-toolbar__row { flex-direction: column-reverse; align-items: stretch; }
	.obvb .obvb-toolbar__row .obvb-field { width: 100%; }
}

.obvb-results { display: flex; align-items: center; justify-content: space-between; gap: var(--obvb-s12); flex-wrap: wrap; min-height: 36px; margin-bottom: var(--obvb-s16); font-size: 14px; }
.obvb-results strong { color: var(--obvb-text-primary); }
.obvb .obvb-results .obvb-btn { min-height: 32px; padding: 6px 0; font-size: 14px; }

.obvb-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--obvb-s24); }
@media (max-width: 1023px) { .obvb-posts { grid-template-columns: repeat(2, 1fr); gap: var(--obvb-s20); } }
@media (max-width: 767px) { .obvb-posts { grid-template-columns: 1fr; gap: var(--obvb-s16); } }

.obvb-archive .obvb-pagination { margin-top: var(--obvb-s48); }
@media (max-width: 767px) { .obvb-archive .obvb-pagination { margin-top: var(--obvb-s32); } }

.obvb mark { background: rgba(255, 194, 0, .35); color: inherit; border-radius: 2px; padding: 0; }

.obvb-empty { text-align: center; padding: var(--obvb-s64) var(--obvb-s16); border-radius: var(--obvb-r-lg); background: var(--obvb-bg-surface); display: flex; flex-direction: column; align-items: center; gap: var(--obvb-s12); }
.obvb .obvb-empty h3 { font-size: 20px; }
.obvb-empty p { max-width: 420px; }
.obvb .obvb-empty .obvb-btn { margin-top: var(--obvb-s8); }

/* ---------- Ficha ---------- */
.obvb-post-top { padding-top: var(--obvb-s24); }

.obvb-post-layout { display: grid; grid-template-columns: minmax(0, 720px) 260px; justify-content: space-between; gap: var(--obvb-s48); padding-top: var(--obvb-s32); padding-bottom: var(--obvb-s64); }
.obvb-post-aside__sticky { position: sticky; top: var(--obvb-s24); display: flex; flex-direction: column; gap: var(--obvb-s32); }
@media (max-width: 1023px) {
	.obvb-post-layout { grid-template-columns: minmax(0, 1fr); padding-top: var(--obvb-s20); padding-bottom: var(--obvb-s48); }
	.obvb-post-aside { display: none; }
}

/* Cuerpo del artículo (lo que sale del editor de bloques) */
.obvb-prose { font-size: var(--obvb-text-body-lg); line-height: 1.75; max-width: 720px; min-width: 0; }
.obvb .obvb-prose > * { margin-top: 0; margin-bottom: 0; }
.obvb .obvb-prose > * + * { margin-top: var(--obvb-s20); }
.obvb .obvb-prose h2 { font-size: 28px; font-weight: 700; margin-top: var(--obvb-s48); scroll-margin-top: var(--obvb-s24); }
.obvb .obvb-prose h3 { font-size: 21px; font-weight: 700; margin-top: var(--obvb-s32); }
.obvb-prose a { color: var(--obvb-brand); }
.obvb-prose strong { color: var(--obvb-text-primary); font-weight: 700; }
.obvb .obvb-prose blockquote p, .obvb .obvb-prose blockquote { font-family: var(--obvb-font); font-size: inherit; line-height: 1.75; font-style: normal; }
.obvb-prose blockquote { margin-left: 0; margin-right: 0; padding: 0 0 0 var(--obvb-s20); border: 0; border-left: 3px solid var(--obvb-action); color: var(--obvb-text-primary); font-weight: 500; font-style: normal; background: none; }
.obvb-prose blockquote p + p { margin-top: var(--obvb-s12); }
.obvb-prose blockquote cite { display: block; margin-top: var(--obvb-s8); font-size: var(--obvb-text-small); font-style: normal; font-weight: 400; color: var(--obvb-text-secondary); }
.obvb-prose ul, .obvb-prose ol { padding-left: var(--obvb-s20); }
.obvb-prose li + li { margin-top: var(--obvb-s8); }
.obvb .obvb-prose figure { margin: var(--obvb-s32) 0; }
.obvb-prose figure img { width: 100%; border-radius: var(--obvb-r-md); aspect-ratio: 16 / 9; object-fit: cover; }
.obvb-prose figcaption { font-size: var(--obvb-text-small); color: var(--obvb-text-secondary); margin-top: var(--obvb-s8); text-align: left; }
.obvb-prose hr { border: 0; border-top: 1px solid var(--obvb-border); margin: var(--obvb-s32) 0; }
.obvb-prose a.obvb-btn { text-decoration: none; }
.obvb-prose .obvb-lead strong { color: var(--obvb-text-primary); }

/* Índice */
.obvb .obvb-toc__title, .obvb .obvb-share__label { font-size: var(--obvb-text-small); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--obvb-text-secondary); margin-bottom: var(--obvb-s12); }
.obvb-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--obvb-s4); border-left: 1px solid var(--obvb-border); }
.obvb-toc li + li { margin-top: 0; }
.obvb .obvb-toc a { display: block; padding: 6px 0 6px var(--obvb-s16); margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; text-decoration: none; color: var(--obvb-text-body); }
.obvb .obvb-toc a:hover { color: var(--obvb-text-primary); }
.obvb .obvb-toc a.is-active { color: var(--obvb-brand); border-left-color: var(--obvb-action); font-weight: 600; }

.obvb-toc-mobile { display: none; border: 1px solid var(--obvb-border); border-radius: var(--obvb-r-md); }
.obvb-toc-mobile summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px var(--obvb-s16); font-size: 15px; font-weight: 600; color: var(--obvb-text-primary); }
.obvb-toc-mobile summary::-webkit-details-marker { display: none; }
.obvb-toc-mobile summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.obvb-toc-mobile[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.obvb-toc-mobile .obvb-toc { padding: 0 var(--obvb-s16) var(--obvb-s16); }
.obvb-toc-mobile .obvb-toc__title { display: none; }
@media (max-width: 1023px) { .obvb-toc-mobile { display: block; } }

/* Compartir */
.obvb-share__buttons { display: flex; gap: var(--obvb-s8); }
.obvb .obvb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--obvb-border); background: var(--obvb-bg-page); color: var(--obvb-text-primary); cursor: pointer; text-decoration: none; }
.obvb .obvb-icon-btn:hover { border-color: var(--obvb-action); color: var(--obvb-brand); }
.obvb-prose .obvb-post-end { margin-top: var(--obvb-s48); padding-top: var(--obvb-s24); border-top: 1px solid var(--obvb-border); }
@media (min-width: 1024px) { .obvb-prose .obvb-post-end { display: none; } }

/* Llamado a comprar dentro del artículo (bloque "Tickets Hop On Hop Off") */
.obvb-inline-cta { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--obvb-s16); align-items: center; margin: var(--obvb-s32) 0; padding: var(--obvb-s16); border-radius: var(--obvb-r-lg); background: var(--obvb-action-soft); }
.obvb-prose > .obvb-inline-cta { margin-top: var(--obvb-s32); margin-bottom: var(--obvb-s32); }
.obvb .obvb-inline-cta img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--obvb-r-sm); }
.obvb .obvb-inline-cta p { font-size: 14px; line-height: 1.5; margin: 0; }
.obvb .obvb-inline-cta .obvb-inline-cta__title { font-size: 16px; font-weight: 700; color: var(--obvb-text-primary); margin-bottom: 2px; }
@media (max-width: 767px) {
	.obvb-inline-cta { grid-template-columns: 72px 1fr; }
	.obvb .obvb-inline-cta img { width: 72px; height: 72px; }
	.obvb-inline-cta .obvb-btn { grid-column: 1 / -1; }
}

/* Relacionados */
.obvb-related { background: var(--obvb-bg-surface); padding: var(--obvb-s64) 0; }
.obvb-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--obvb-s16); margin-bottom: var(--obvb-s24); }
@media (max-width: 767px) {
	.obvb-related { padding: var(--obvb-s48) 0; }
	.obvb-related__head { flex-direction: column; align-items: flex-start; }
}

/* Aviso "Enlace copiado" (sobre la barra fija de compra) */
.obvb-toast { position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 12px); z-index: 1000; padding: 10px 18px; border-radius: var(--obvb-r-full); background: var(--obvb-text-primary); color: var(--obvb-text-inverse); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.obvb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }