/* ====================================================================
   CANBER — Blog
   Archivo aparte para no tocar canber.css. Usa las mismas variables del
   theme (--navy, --blue, --line, --ff-display…) y los mismos componentes
   (.wrap, .cathero, .catalog, .btn), así el blog se ve como el resto.
   ==================================================================== */

/* ===== RECORRIDO (breadcrumb) ===== */
.bcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; font-size:12.5px; color:#a8b6d0; }
.bcrumb a{ color:#cdd6ea; }
.bcrumb a:hover{ color:#fff; text-decoration:underline; }
.bcrumb span[aria-current]{ color:#fff; }
.bcrumb span[aria-hidden]{ color:#69789a; }

.cathero--nota .wrap{ padding-bottom:30px; }
.cathero--nota h1{ max-width:20ch; font-size:clamp(26px,3.4vw,38px); }
.bnota__meta{ margin:16px 0 0 !important; font-size:13px; color:#a8b6d0 !important; }

/* ===== BARRA DE CATEGORÍAS ===== */
.bcats{ background:#fff; border-bottom:1px solid var(--line); }
.bcats__in{ display:flex; gap:8px; overflow-x:auto; padding-top:14px; padding-bottom:14px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.bcats__in::-webkit-scrollbar{ display:none; }
.bcats__item{ flex:none; font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; padding:8px 15px; border:1px solid var(--line); border-radius:999px; color:var(--body); background:#fff; transition:background .2s, color .2s, border-color .2s; }
.bcats__item:hover{ border-color:var(--blue); color:var(--blue); }
.bcats__item.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ===== GRILLA DE NOTAS ===== */
.catalog .bwrap{ padding:40px 24px 16px; }
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.bpost{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.bpost:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.bpost__media{ display:block; aspect-ratio:16/9; background:linear-gradient(135deg,#eef1f6,#fbfcfe); overflow:hidden; }
.bpost__media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.bpost:hover .bpost__media img{ transform:scale(1.04); }
.bpost__ph{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#93a2bd; }
.bpost__ph svg{ width:40px; height:40px; }

.bpost__body{ padding:16px 17px 18px; display:flex; flex-direction:column; flex:1; }
.bpost__cat{ align-self:flex-start; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:10.5px; color:var(--blue); background:#eef4fd; border:1px solid #d7e4f8; border-radius:999px; padding:4px 10px; margin-bottom:10px; }
.bpost__cat:hover{ background:var(--blue); color:#fff; }
.bpost__title{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:16px; color:var(--ink); margin:0 0 8px; line-height:1.22; overflow-wrap:anywhere; }
.bpost__title a:hover{ color:var(--blue); }
.bpost__desc{ font-size:13.5px; margin:0 0 16px; flex:1; }
.bpost__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:12px; }
.bpost__foot time{ font-size:12px; color:#94a0b8; }
.bpost__link{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; color:var(--blue-link); display:inline-flex; align-items:center; gap:5px; }
.bpost__link svg{ width:13px; height:13px; transition:transform .2s; }
.bpost:hover .bpost__link svg{ transform:translateX(3px); }

/* ===== PAGINACIÓN ===== */
.bwrap .navigation.pagination{ margin:36px 0 8px; }
.bwrap .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.bwrap .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 13px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; font-family:var(--ff-display); font-size:14px; color:var(--body); transition:background .2s, color .2s, border-color .2s; }
.bwrap a.page-numbers:hover{ border-color:var(--blue); color:var(--blue); }
.bwrap .page-numbers.current{ background:var(--blue); border-color:var(--blue); color:#fff; }
.bwrap .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===== ESTADO VACÍO ===== */
.catalog .bwrap .bempty, .bempty{ max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:42px 32px; text-align:center; box-shadow:var(--shadow-sm); }
.bempty__ic{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#eef4fd; color:var(--blue); margin-bottom:16px; }
.bempty__ic svg{ width:24px; height:24px; }
.bempty h2{ font-size:19px; text-transform:uppercase; margin:0 0 9px; }
.bempty p{ margin:0 auto 20px; max-width:46ch; font-size:14px; line-height:1.6; }
.bempty__acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ===== NOTA ===== */
.bnota{ max-width:760px; margin:0 auto; padding:40px 0 0; }
.bnota__foto{ margin:0 0 28px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.bnota__foto img{ width:100%; height:auto; }

.bnota__body{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 36px; box-shadow:var(--shadow-sm); }
.bnota__body > *:first-child{ margin-top:0; }
.bnota__body > *:last-child{ margin-bottom:0; }
.bnota__body p{ font-size:15.5px; line-height:1.75; margin:0 0 18px; }
.bnota__body h2{ font-size:22px; text-transform:uppercase; letter-spacing:.01em; margin:34px 0 12px; }
.bnota__body h3{ font-size:17px; margin:26px 0 10px; }
.bnota__body h4{ font-size:15px; margin:22px 0 8px; }
.bnota__body a{ color:var(--blue-link); text-decoration:underline; text-underline-offset:2px; }
.bnota__body a:hover{ color:var(--blue-dark); }
.bnota__body ul, .bnota__body ol{ margin:0 0 18px; padding-left:22px; font-size:15.5px; line-height:1.75; }
.bnota__body li{ margin-bottom:7px; }
.bnota__body img{ border-radius:var(--radius); margin:22px 0; }
.bnota__body figure{ margin:24px 0; }
.bnota__body figcaption{ font-size:12.5px; color:#94a0b8; text-align:center; margin-top:8px; }
.bnota__body blockquote{ margin:24px 0; padding:16px 20px; border-left:3px solid var(--blue); background:#f6f9fc; border-radius:0 var(--radius) var(--radius) 0; }
.bnota__body blockquote p{ margin:0; font-size:15px; color:var(--ink); }
.bnota__body table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:14px; }
.bnota__body th, .bnota__body td{ border:1px solid var(--line); padding:9px 12px; text-align:left; }
.bnota__body th{ background:#f6f9fc; font-family:var(--ff-display); text-transform:uppercase; font-size:12.5px; letter-spacing:.04em; color:var(--ink); }
.bnota__pages{ margin-top:20px; font-size:13.5px; }

/* ===== COMPARTIR ===== */
.bshare{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:26px 0 0; }
.bshare__label{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; color:#94a0b8; margin-right:4px; }
.bshare__btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--body); font-family:var(--ff-body); font-size:12.5px; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.bshare__btn:hover{ border-color:var(--blue); color:var(--blue); background:#f6f9fc; }
.bshare__btn svg{ width:15px; height:15px; flex:none; }
.bshare__btn.is-copiado{ border-color:var(--green); color:var(--green); }

/* ===== CTA ===== */
.bcta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin:30px 0 0; padding:26px 30px; border-radius:var(--radius); background:linear-gradient(118deg,#1f3056 0%,#2c4470 70%,#365084 100%); color:#fff; }
.bcta h2{ color:#fff; font-size:20px; text-transform:uppercase; margin:0 0 6px; }
.bcta p{ margin:0; color:#cdd6ea; font-size:14px; max-width:52ch; }
.bcta .btn{ flex:none; }

/* ===== RELACIONADAS ===== */
.brel{ max-width:1200px; margin:56px auto 0; }
.brel__title{ font-size:20px; text-transform:uppercase; letter-spacing:.02em; margin:0 0 20px; }

.bvolver{ text-align:center; margin:40px 0 8px; }
.bvolver a{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:13px; color:var(--blue-link); }
.bvolver a:hover{ color:var(--blue-dark); }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width:1024px){
	.bgrid{ grid-template-columns:repeat(2,1fr); gap:18px; }
	.bnota__body{ padding:28px 26px; }
}

@media (max-width:760px){
	.bgrid{ grid-template-columns:1fr; }
	.catalog .bwrap{ padding:28px 20px 12px; }
	.bnota{ padding-top:26px; }
	.bnota__body{ padding:22px 20px; border-radius:var(--radius); }
	.bnota__body p, .bnota__body ul, .bnota__body ol{ font-size:15px; line-height:1.7; }
	.bnota__body h2{ font-size:19px; margin-top:28px; }
	.bnota__body h3{ font-size:16px; }
	.bnota__body table{ display:block; overflow-x:auto; white-space:nowrap; }

	.bcta{ flex-direction:column; align-items:flex-start; padding:22px 20px; }
	.bcta .btn{ width:100%; }

	.bempty{ padding:32px 20px; }
	.bempty h2{ font-size:17px; }
	.bempty__acts .btn{ width:100%; }

	.bshare{ gap:6px; }
	.bshare__btn span{ display:none; }
	.bshare__btn{ padding:9px 11px; }
	.bshare__btn svg{ width:16px; height:16px; }

	.cathero--nota h1{ font-size:23px; }
	.bcrumb{ font-size:11.5px; gap:6px; }
	.bcrumb span[aria-current]{ display:none; }
	.bcrumb span[aria-hidden]:last-of-type{ display:none; }
}