/* ==========================================================================
   pages.css — portada, blog y glosario (rediseño 2026-11)
   Usa las variables del plugin (cwcomposer.css).
   ========================================================================== */

.cw-page,
.cw-home {
	font-family: var(--ff-body);
	color: var(--color-text);
	padding-bottom: 56px;
}

.cw-page a,
.cw-home a {
	text-decoration: none;
}

/* ── Cabecera de página ── */
.cw-page__head {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 32px var(--px) 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cw-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	color: var(--color-text-muted);
}

.cw-crumbs li + li::before {
	content: "/";
	margin-right: 6px;
	color: #9aa8b6;
}

.cw-crumbs a { color: var(--color-link); }

.cw-page__title {
	margin: 0;
	font-family: var(--ff-head);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.08;
	color: var(--color-text);
}

.cw-page__lead {
	margin: 0;
	max-width: 720px;
	font-size: 19px;
	line-height: 1.55;
	color: #24384d;
}

.cw-page__meta {
	margin: 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

.cw-page__empty {
	max-width: var(--max-width);
	margin: 32px auto;
	padding: 0 var(--px);
}

.cw-pill {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--color-primary-bg);
	color: var(--color-navy);
	font-size: 13px;
	font-weight: 600;
}

/* ── Tarjetas genéricas ── */
.cw-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cw-card--navy {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: #fff;
}

.cw-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: inherit;
	font-family: var(--ff-body);
}

.cw-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw-linklist li + li { border-top: 1px solid var(--color-border); }

.cw-linklist a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	color: var(--color-text);
}

.cw-linklist strong { color: var(--color-link); font-weight: 600; }
.cw-linklist span { font-size: 14px; color: var(--color-text-muted); line-height: 1.45; }

/* ── Texto largo ── */
.cw-prose {
	font-size: 18px;
	line-height: 1.75;
	color: #24384d;
}

.cw-prose > * + * { margin-top: 18px; }
.cw-prose p { margin: 0; }
.cw-prose p + p { margin-top: 18px; }

.cw-prose h2 {
	margin: 36px 0 0;
	font-family: var(--ff-head);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.2;
	color: var(--color-text);
	scroll-margin-top: 90px;
}

.cw-prose h3 {
	margin: 26px 0 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text);
}

.cw-prose ul,
.cw-prose ol { padding-left: 22px; }
.cw-prose li + li { margin-top: 6px; }
.cw-prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cw-prose img { max-width: 100%; height: auto; border-radius: 14px; }

.cw-prose blockquote {
	margin: 24px 0 0;
	padding: 18px 22px;
	border-left: 4px solid var(--color-navy);
	background: var(--color-white);
	border-radius: 0 14px 14px 0;
}

.cw-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	background: var(--color-white);
}

.cw-prose th,
.cw-prose td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-align: left; }

/* Enlaces automáticos del glosario */
.cw-prose a.cw-term-link,
a.cw-term-link {
	color: inherit;
	text-decoration: underline dotted var(--color-link);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.cw-prose a.cw-term-link:hover { color: var(--color-link); }

/* ==========================================================================
   Glosario
   ========================================================================== */

.cw-gloss__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 6px;
}

.cw-gloss__search {
	width: 340px;
	max-width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #8fa5bd;
	border-radius: 10px;
	font: 400 16px var(--ff-body);
	background: #fff;
	box-sizing: border-box;
}

.cw-gloss__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cw-gloss__letters a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--color-border);
	font-weight: 600;
	color: var(--color-text);
}

.cw-gloss__letters a:hover { border-color: var(--color-navy); }

.cw-gloss__index {
	max-width: var(--max-width);
	margin: 32px auto 0;
	padding: 0 var(--px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.cw-gloss__group {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	padding: 20px 22px;
	scroll-margin-top: 90px;
}

.cw-gloss__letter {
	margin: 0 0 4px;
	font-family: var(--ff-head);
	font-weight: 400;
	font-size: 32px;
	color: var(--color-navy);
}

.cw-gloss__list { list-style: none; margin: 0; padding: 0; }
.cw-gloss__item + .cw-gloss__item { border-top: 1px solid var(--color-border); }

.cw-gloss__item a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
}

.cw-gloss__name { font-weight: 600; color: var(--color-link); }
.cw-gloss__def { font-size: 14px; color: var(--color-text-muted); line-height: 1.45; }
.cw-gloss__empty { grid-column: 1 / -1; }

/* Ficha de término */
.cw-term__layout,
.cw-post__layout {
	max-width: var(--max-width);
	margin: 28px auto 0;
	padding: 0 var(--px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

.cw-term__article {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}

.cw-term__def {
	background: var(--color-navy);
	color: #fff;
	border-radius: 20px;
	padding: 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cw-term__def-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-on-navy-muted);
}

.cw-term__def p {
	margin: 0;
	font-family: var(--ff-head);
	font-size: 24px;
	line-height: 1.4;
}

.cw-term__aside,
.cw-post__aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 96px;
}

.cw-backlink { color: var(--color-link); font-weight: 600; }

/* ==========================================================================
   Blog
   ========================================================================== */

.cw-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.cw-tabs a {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	font-size: 15px;
	font-weight: 500;
}

.cw-tabs a[aria-current] {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: #fff;
}

.cw-blog__grid {
	max-width: var(--max-width);
	margin: 28px auto 0;
	padding: 0 var(--px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.cw-post__more .cw-blog__grid { padding: 0; margin-top: 0; }

.cw-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	overflow: hidden;
	color: var(--color-text);
	transition: border-color .15s, transform .15s;
}

.cw-post-card:hover { border-color: #9fb3c8; transform: translateY(-2px); }

.cw-post-card__img {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--color-primary-bg);
	overflow: hidden;
}

.cw-post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cw-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 22px;
}

.cw-post-card__body small { font-size: 13px; color: var(--color-text-muted); }
.cw-post-card__body b { font-size: 19px; line-height: 1.3; font-weight: 700; }
.cw-post-card__body span { font-size: 16px; line-height: 1.55; color: #24384d; }

.cw-post-card.is-main {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
}

.cw-post-card.is-main:not(:has(.cw-post-card__img)) { grid-template-columns: 1fr; }
.cw-post-card.is-main .cw-post-card__img { aspect-ratio: auto; min-height: 300px; }
.cw-post-card.is-main .cw-post-card__body { justify-content: center; padding: 32px 36px; }
.cw-post-card.is-main b { font-family: var(--ff-head); font-weight: 400; font-size: 34px; line-height: 1.15; }

.cw-blog__cta {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr minmax(0, 420px);
	gap: 24px;
	align-items: center;
	padding: 26px 30px;
	border-radius: 18px;
	background: var(--color-navy);
	color: #fff;
}

.cw-blog__cta b { display: block; font-family: var(--ff-head); font-weight: 400; font-size: 26px; }
.cw-blog__cta span { color: var(--color-on-navy-muted); }

.cw-inline-search { position: relative; }

.cw-inline-search .search-input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #8fa5bd;
	border-radius: 10px;
	font: 400 16px var(--ff-body);
	box-sizing: border-box;
	background: #fff;
	color: var(--color-text);
}

.cw-inline-search .cities,
.cw-hero__search .cities {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	max-height: 360px;
	overflow: auto;
	background: #fff;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(11, 31, 51, .16);
}

.cw-pager {
	max-width: var(--max-width);
	margin: 32px auto 0;
	padding: 0 var(--px);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cw-pager .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: #fff;
	color: var(--color-text);
	box-sizing: border-box;
}

.cw-pager .page-numbers.current { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* Artículo */
.cw-post__head .cw-page__title { max-width: 900px; }

.cw-post__hero {
	margin: 10px 0 0;
	border-radius: 20px;
	overflow: hidden;
}

.cw-post__hero img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; }
.cw-post__article { max-width: 760px; }

.cw-toc ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.cw-toc li + li { margin-top: 8px; }
.cw-toc a { color: var(--color-link); }

.cw-post__more {
	max-width: var(--max-width);
	margin: 56px auto 0;
	padding: 0 var(--px);
	box-sizing: border-box;
}

/* ==========================================================================
   Portada
   ========================================================================== */

.cw-hero {
	background: var(--color-navy);
	color: #fff;
}

.cw-hero__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 48px var(--px) 56px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.cw-hero__kicker {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-on-navy-muted);
}

.cw-hero__title {
	margin: 0;
	font-family: var(--ff-head);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.05;
	color: #fff;
}

.cw-hero__lead {
	margin: 14px 0 22px;
	font-size: 19px;
	line-height: 1.55;
	color: #d7e2ee;
	max-width: 560px;
}

.cw-hero__search { position: relative; max-width: 560px; }

.cw-hero__search .searcher {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 16px;
	background: #fff;
	border-radius: 14px;
	color: var(--color-text-muted);
}

.cw-hero__search .search-input {
	flex: 1;
	height: 100%;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	font: 400 17px var(--ff-body);
	color: var(--color-text);
	padding: 0 !important;
}

.cw-hero__search-icon { display: flex; }

.cw-hero__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.cw-hero__quick a {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--color-navy-line);
	color: #fff;
	font-size: 15px;
}

.cw-hero__quick a:hover { background: var(--color-navy-2); }

.cw-feat {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 28px;
	border-radius: 22px;
	background: #fff;
	color: var(--color-text) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.cw-feat__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cw-feat__kicker { display: block; font-size: 13px; color: var(--color-text-muted); }
.cw-feat__place { display: block; font-size: 18px; font-weight: 700; }
.cw-feat__now { display: flex; align-items: baseline; gap: 14px; }
.cw-feat__temp { font-family: var(--ff-head); font-size: 72px; line-height: 1; }
.cw-feat__cond { font-size: 17px; color: #24384d; }

.cw-feat__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.cw-feat__stats > span { padding: 12px 0; display: flex; flex-direction: column; gap: 2px; }
.cw-feat__stats > span + span { padding-left: 14px; border-left: 1px solid var(--color-border); }
.cw-feat__stats small { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.cw-feat__stats b { font-size: 20px; }
.cw-feat .is-max { color: var(--color-temp-max); }
.cw-feat .is-min { color: var(--color-temp-min); }
.cw-feat__cta { color: var(--color-link); font-weight: 600; }

.cw-home__section {
	max-width: var(--max-width);
	margin: 40px auto 0;
	padding: 0 var(--px);
	box-sizing: border-box;
}

.cw-home__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.cw-home__more { color: var(--color-link); font-weight: 600; white-space: nowrap; }

/* Hoy en el país */
.cw-high {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.cw-high__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	color: var(--color-text);
}

.cw-high__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	flex: none;
}

.cw-high__item.is-hot .cw-high__icon { background: #fbe9e5; color: var(--color-temp-max); }
.cw-high__item.is-cold .cw-high__icon { background: #e6f0fb; color: var(--color-temp-min); }
.cw-high__item.is-wet .cw-high__icon { background: #e6f0fb; color: #1d6fb8; }
.cw-high__item small { display: block; font-size: 13px; color: var(--color-text-muted); }
.cw-high__item b { font-size: 17px; }

/* Ciudades */
.cw-cities {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.cw-city {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	color: var(--color-text);
}

.cw-city:hover { border-color: #9fb3c8; }
.cw-city__head { display: flex; justify-content: space-between; gap: 8px; }
.cw-city__name { display: block; font-size: 17px; }
.cw-city__head small { display: block; font-size: 13px; color: var(--color-text-muted); }
.cw-city__temps { display: flex; align-items: baseline; gap: 10px; }
.cw-city__temps .is-max { font-family: var(--ff-head); font-weight: 400; font-size: 36px; color: var(--color-temp-max); }
.cw-city__temps .is-min { color: var(--color-temp-min); font-weight: 600; }
.cw-city__rain { font-size: 14px; color: var(--color-text-muted); }

/* Regiones */
.cw-regions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	background: #fff;
	border-radius: var(--radius-xl);
	padding: 30px 32px;
}

.cw-regions.has-map { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.cw-regions__filter {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #8fa5bd;
	border-radius: 10px;
	font: 400 16px var(--ff-body);
	box-sizing: border-box;
	margin-bottom: 14px;
}

.cw-regions__cols {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3 180px;
	column-gap: 24px;
}

.cw-regions.has-map .cw-regions__cols { columns: 2 160px; }

.cw-regions__cols li { break-inside: avoid; }

.cw-regions__cols a {
	display: block;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-link);
	font-weight: 500;
}

/* Blog + glosario en portada */
.cw-learn {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	margin-top: 4px;
}

.cw-learn .cw-post-card.is-main { grid-column: auto; grid-row: span 2; display: flex; }
.cw-learn .cw-post-card.is-main .cw-post-card__img { min-height: 220px; }
.cw-learn .cw-post-card.is-main b { font-size: 28px; }

.cw-learn__gloss {
	grid-column: span 2;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cw-learn__gloss-title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--color-navy);
}

.cw-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cw-chips a {
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--color-primary-bg);
	color: var(--color-navy);
	font-size: 15px;
	font-weight: 500;
}

.cw-home__about p {
	max-width: 860px;
	font-size: 16px;
	line-height: 1.7;
	color: #24384d;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.cw-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cw-learn { grid-template-columns: 1fr 1fr; }
	.cw-learn .cw-post-card.is-main { grid-column: 1 / -1; grid-row: auto; }
	.cw-learn__gloss { grid-column: 1 / -1; }
	.cw-gloss__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.cw-hero__inner,
	.cw-regions.has-map,
	.cw-term__layout,
	.cw-post__layout { grid-template-columns: 1fr; }
	.cw-term__aside,
	.cw-post__aside { position: static; }
	.cw-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cw-post-card.is-main { grid-template-columns: 1fr; }
	.cw-blog__cta { grid-template-columns: 1fr; }
	.cw-high { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.cw-page__head,
	.cw-home__section,
	.cw-gloss__index,
	.cw-term__layout,
	.cw-post__layout,
	.cw-blog__grid,
	.cw-post__more,
	.cw-hero__inner { padding-left: 16px; padding-right: 16px; }
	.cw-page__title { font-size: 36px; }
	.cw-hero__title { font-size: 38px; }
	.cw-hero__inner { padding-top: 32px; padding-bottom: 36px; gap: 28px; }
	.cw-feat__temp { font-size: 56px; }
	.cw-cities { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cw-city { padding: 14px; }
	.cw-city__temps .is-max { font-size: 30px; }
	.cw-blog__grid,
	.cw-learn,
	.cw-gloss__index { grid-template-columns: 1fr; }
	.cw-regions { padding: 22px 18px; }
	.cw-regions__cols { columns: 2 140px; }
	.cw-post-card.is-main b { font-size: 26px; }
	.cw-term__def p { font-size: 20px; }
	.cw-prose { font-size: 17px; }
}