/*
 * Kukinas — Novedades: piezas compartidas por el listado, los detalles y
 * las entradas similares (componentes "Novedades — Componentes
 * reutilizables" de Pencil). Tokens = variables del sistema visual Kukinas.
 */

.kk-nov-list,
.kk-recipe,
.kk-note,
.kk-related {
	--kk-canvas: #fff8ee;
	--kk-subtle: #fffcf7;
	--kk-surface: #ffffff;
	--kk-brand: #e52b2f;
	--kk-brand-text: #c91f28;
	--kk-ink: #171717;
	--kk-ink-2: #665f58;
	--kk-border: #e8ded2;
	--kk-border-strong: #b5ada5;
	--kk-focus: #123a74;
	--kk-cocoa: #4a2a22;
	--kk-oat-50: #fbf5e6;
	--kk-pink-50: #fff0f8;
	--kk-font-display: "Bricolage Grotesque", system-ui, sans-serif;
	--kk-font-body: "Montserrat", system-ui, sans-serif;
	--kk-font-hand: "Patrick Hand", cursive;
	--kk-gutter: 80px;

	font-family: var(--kk-font-body);
	color: var(--kk-ink);
	-webkit-font-smoothing: antialiased;
}

.kk-nov-list *,
.kk-recipe *,
.kk-note *,
.kk-related * {
	box-sizing: border-box;
}

.kk-nov-wrap,
.kk-nov-list__inner {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--kk-gutter);
}

@media (max-width: 1024px) {
	.kk-nov-list,
	.kk-recipe,
	.kk-note,
	.kk-related {
		--kk-gutter: 40px;
	}
}

@media (max-width: 767px) {
	.kk-nov-list,
	.kk-recipe,
	.kk-note,
	.kk-related {
		--kk-gutter: 20px;
	}
}

.kk-nov-list .screen-reader-text,
.kk-recipe .screen-reader-text,
.kk-note .screen-reader-text,
.kk-related .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kk-icon {
	width: 18px;
	height: 18px;
	flex: none;
}

.kk-nov-list :focus-visible,
.kk-recipe :focus-visible,
.kk-note :focus-visible,
.kk-related :focus-visible {
	outline: 3px solid var(--kk-focus);
	outline-offset: 3px;
}

/* ---------- Tipografía editorial ---------- */

.kk-nov-eyebrow {
	margin: 0;
	color: var(--kk-brand-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kk-nov-title {
	margin: 0;
	color: var(--kk-ink);
	font-family: var(--kk-font-display);
	font-size: clamp(40px, 5.2vw, 66px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -1.5px;
	overflow-wrap: break-word;
}

.kk-nov-lead {
	max-width: 960px;
	margin: 0;
	color: var(--kk-ink-2);
	font-size: 18px;
	line-height: 1.6;
}

.kk-nov-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0;
	padding: 7px 14px;
	background: var(--kk-oat-50);
	border-radius: 999px;
	color: var(--kk-brand-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Botones y chips ---------- */

.kk-nov-btn,
.kk-nov-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 14px 22px;
	border: 1px solid var(--kk-border);
	border-radius: 999px;
	background: var(--kk-surface);
	color: var(--kk-ink);
	font-family: var(--kk-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kk-nov-btn:hover,
.kk-nov-chip:hover {
	border-color: var(--kk-brand);
	color: var(--kk-brand-text);
}

.kk-nov-btn--primary,
.kk-nov-chip.is-active {
	background: var(--kk-brand);
	border-color: var(--kk-brand);
	color: #fff;
}

.kk-nov-btn--primary:hover,
.kk-nov-chip.is-active:hover {
	background: var(--kk-brand-text);
	border-color: var(--kk-brand-text);
	color: #fff;
}

.kk-nov-btn:active {
	transform: translateY(1px);
}

/* ---------- Volver + acciones ---------- */

.kk-nov-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.kk-nov-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--kk-brand-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
}

.kk-nov-back:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.kk-nov-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 767px) {
	.kk-nov-actions {
		width: 100%;
	}

	.kk-nov-actions .kk-nov-btn {
		flex: 1 1 0;
		min-height: 48px;
		padding: 12px 16px;
		font-size: 16px;
	}

	.kk-nov-back {
		min-height: 44px;
		font-size: 16px;
	}
}

.kk-nov-btn.is-copied {
	border-color: #247a4b;
	color: #247a4b;
}

/* ---------- Imagen principal de los detalles ---------- */

.kk-nov-hero-img {
	margin: 0;
	overflow: hidden;
	border-radius: 24px 72px 24px 72px;
	background: var(--kk-oat-50);
}

.kk-nov-wrap .kk-nov-hero-img img {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.kk-nov-wrap .kk-nov-hero-img img {
		height: 420px;
	}
}

@media (max-width: 767px) {
	.kk-nov-hero-img {
		border-radius: 16px 40px 16px 40px;
	}

	.kk-nov-wrap .kk-nov-hero-img img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Grilla y tarjetas ---------- */

.kk-nov-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 28px;
	align-items: start;
}

@media (max-width: 1024px) {
	.kk-nov-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}
}

@media (max-width: 767px) {
	.kk-nov-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

.kk-nov-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.kk-nov-card > * {
	margin: 0;
}

.kk-nov-card__media {
	display: block;
	height: 270px;
	overflow: hidden;
	border-radius: 28px 28px 8px 8px;
	background: var(--kk-oat-50);
}

.kk-nov-card .kk-nov-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.kk-nov-card:hover .kk-nov-card__media img {
	transform: scale(1.04);
}

.kk-nov-card__cat {
	color: var(--kk-brand-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Títulos y resúmenes crecen con el contenido: sin recortes ni alturas fijas. */
.kk-nov-card__title {
	font-family: var(--kk-font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.8px;
	overflow-wrap: break-word;
}

.kk-nov-card__title a {
	color: var(--kk-ink);
	text-decoration: none;
}

.kk-nov-card__title a:hover {
	color: var(--kk-brand-text);
}

.kk-nov-card__excerpt {
	color: var(--kk-ink-2);
	font-size: 14px;
	line-height: 1.6;
}

.kk-nov-card__meta {
	color: var(--kk-ink-2);
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
}

.kk-nov-card__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	color: var(--kk-brand-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
}

.kk-nov-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 767px) {
	.kk-nov-card__media {
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.kk-nov-card__title {
		font-size: 26px;
	}

	.kk-nov-card__excerpt,
	.kk-nov-card__meta,
	.kk-nov-card__link {
		font-size: 16px;
	}
}

/* ---------- Aviso de "enlace copiado" ---------- */

.kk-nov-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 9999;
	padding: 12px 20px;
	border-radius: 999px;
	background: #171717;
	color: #fff;
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Acciones secundarias compactas; el título y la lectura tienen prioridad. */
@media (max-width: 767px) {
	.kk-nov-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
	.kk-nov-actions { width: auto; gap: 8px; flex-wrap: nowrap; }
	.kk-nov-actions .kk-nov-btn { flex: none; width: 44px; min-height: 44px; padding: 10px; }
	.kk-nov-actions .kk-nov-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.kk-nov-back { min-width: 0; font-size: 16px; line-height: 1.35; }
	.kk-note .kk-nov-title, .kk-recipe .kk-nov-title { font-size: clamp(32px, 9vw, 38px); line-height: 1.08; letter-spacing: -.8px; }
	.kk-note .kk-note__header { padding-block: 24px; gap: 16px; }
}

/* Avances de cocina: el estado es local y la receta sigue siendo imprimible. */
.kk-recipe__start { align-self: flex-start; }
.kk-recipe__progress { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 20px; border: 1px solid var(--kk-border); border-radius: 999px; background: var(--kk-surface); box-shadow: 0 6px 28px rgba(74, 42, 34, .12); }
.kk-recipe__progress[hidden] { display: none; }
.kk-recipe__progress p { margin: 0; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.kk-recipe__progress .kk-nov-btn { min-height: 44px; padding: 8px 12px; font-size: 13px; }
.has-cooking-checks :is(.kk-recipe__ing-list li, .kk-recipe__step) { scroll-margin-bottom: 96px; }
.has-cooking-checks .kk-recipe__ing-list li { padding-left: 0; }
.has-cooking-checks .kk-recipe__ing-list li::before { display: none; }
.kk-recipe__ing-list label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; font-size: inherit; line-height: 1.65; }
.kk-recipe__ing-list input { width: 20px; height: 20px; margin: 4px 0 0; flex: none; accent-color: var(--kk-brand-text); }
.kk-recipe__ing-list .is-done label > span { text-decoration: line-through; color: var(--kk-ink-2); }
.kk-recipe__step-check { position: relative; flex: none; width: 40px; height: 44px; cursor: pointer; }
.kk-recipe__step-check input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.kk-recipe__step-check:has(:focus-visible) { outline: 3px solid var(--kk-focus); outline-offset: 3px; border-radius: 50%; }
.kk-recipe__step-check:has(:checked) .kk-recipe__step-num { background: #23724a; }
.kk-recipe__step-check:has(:checked)::after { content: '✓'; position: absolute; top: -3px; right: -4px; width: 18px; height: 18px; border: 1px solid #23724a; border-radius: 50%; background: #fff; color: #23724a; font-size: 12px; text-align: center; line-height: 16px; pointer-events: none; }
.kk-recipe__step.is-done .kk-recipe__step-title { color: #23724a; }
.kk-recipe__step.is-done .kk-recipe__step-text { color: var(--kk-ink-2); }
.kk-nov-card__media picture { display: block; width: 100%; height: 100%; }

.kk-latest { padding-block: 64px; background: var(--kk-subtle); }
.kk-latest__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.kk-latest__heading > div { display: grid; gap: 16px; }
.kk-latest__heading h2 { margin: 0; font-family: var(--kk-font-display); font-size: 42px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }
.kk-latest .kk-nov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kk-latest .kk-nov-card__media { height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 767px) {
	.kk-recipe .kk-recipe__header { padding-block: 24px; gap: 16px; }
	.kk-recipe__heading { position: relative; }
	.kk-recipe__note { position: absolute; right: 0; bottom: 0; font-size: 20px; gap: 0; max-width: 110px; }
	.kk-recipe__note-arrow { width: 24px; height: 24px; }
	.kk-recipe__start { font-size: 16px; padding: 10px 16px; min-height: 44px; }
	.kk-recipe__progress { right: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(50%); gap: 12px; padding-left: 16px; }
	.kk-recipe__step-check { width: 36px; }
	.kk-recipe__jump a { min-width: 0; padding-inline: 8px; gap: 6px; }
	.kk-recipe__jump svg { width: 16px; height: 16px; }
	.kk-latest { padding-block: 40px; }
	.kk-latest__heading { flex-direction: column; align-items: flex-start; gap: 20px; }
	.kk-latest__heading h2 { font-size: 32px; }
	.kk-latest .kk-nov-grid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
	.kk-recipe__start, .kk-recipe__progress, .kk-recipe__ing-list input, .kk-recipe__step-check::after { display: none !important; }
	.kk-recipe__ing-list label { display: block; min-height: 0; }
	.kk-recipe__ing-list .is-done label > span { text-decoration: none; color: #000; }
	.kk-recipe__step-check input { display: none; }
}

/* Evita que los estilos globales de botones del tema cambien su contraste. */
:is(.kk-recipe, .kk-note, .kk-nov-list, .kk-latest) .kk-nov-btn { background: var(--kk-surface); color: var(--kk-ink); }
:is(.kk-recipe, .kk-note, .kk-nov-list, .kk-latest) .kk-nov-btn:hover,
:is(.kk-recipe, .kk-note, .kk-nov-list, .kk-latest) .kk-nov-btn:focus { background: var(--kk-surface); color: var(--kk-brand-text); border-color: var(--kk-brand-text); }
:is(.kk-recipe, .kk-note, .kk-nov-list, .kk-latest) .kk-nov-btn--primary { background: var(--kk-brand); color: #fff; }
:is(.kk-recipe, .kk-note, .kk-nov-list, .kk-latest) .kk-nov-btn--primary:hover,
:is(.kk-recipe, .kk-note, .kk-nov-list, .kk-latest) .kk-nov-btn--primary:focus { background: var(--kk-brand-text); color: #fff; }
.kk-recipe .kk-nov-btn:disabled { background: var(--kk-surface); color: var(--kk-ink-2); border-color: var(--kk-border); cursor: default; opacity: .65; }

.kk-nov-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.kk-nov-placeholder {
	padding: 24px;
	border: 1px dashed #b5ada5;
	border-radius: 12px;
	font-family: "Montserrat", system-ui, sans-serif;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.kk-nov-card__img,
	.kk-nov-btn,
	.kk-nov-chip,
	.kk-nov-toast {
		transition: none;
	}

	.kk-nov-card:hover .kk-nov-card__media img {
		transform: none;
	}
}