/*
 * Detrás del Bar — "Barra de competencia".
 * Only what theme.json cannot express. Tokens only (--wp--preset--*, --wp--custom--*).
 * Mobile-first: base rules are for phones; min-width queries grow the layout.
 */

/*
 * Metric-matched fallbacks: until Barlow arrives (font-display: swap) the text is set in a system
 * font scaled to Barlow's width and line box, so the swap does not reflow lines (it caused a
 * 0.045 CLS on posts). "FB A" = Arial (desktop, iOS); "FB R" = Roboto (Android). Widths measured
 * on Spanish text from the hmtx tables; overrides = Barlow's hhea (1000/-200/0) / size-adjust.
 */
@font-face { font-family: "Barlow FB A"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 94.5%; ascent-override: 105.8%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: "Barlow FB A"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 90.5%; ascent-override: 110.5%; descent-override: 22.1%; line-gap-override: 0%; }
@font-face { font-family: "Barlow FB R"; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 96.6%; ascent-override: 103.5%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "Barlow FB R"; font-weight: 600 700; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 96.6%; ascent-override: 103.5%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed FB A"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 75%; ascent-override: 133.3%; descent-override: 26.7%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed FB R"; font-weight: 600 700; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 80%; ascent-override: 125%; descent-override: 25%; line-gap-override: 0%; }

:root {
	--ddb-base: var(--wp--preset--color--base);
	--ddb-surface: var(--wp--preset--color--surface);
	--ddb-steel: var(--wp--preset--color--surface-2);
	--ddb-cream: var(--wp--preset--color--contrast);
	--ddb-muted: var(--wp--preset--color--muted);
	--ddb-gold: var(--wp--preset--color--accent);
	--ddb-risk: var(--wp--preset--color--danger);
	--ddb-display: var(--wp--preset--font-family--display);
	--ddb-text: var(--wp--preset--font-family--text);
	--ddb-gutter: clamp(1rem, 4vw, 3rem);
	--ddb-wide: var(--wp--style--global--wide-size, 87.5rem);
	--ddb-tap: var(--wp--custom--tap-target);
	--ddb-hair: var(--wp--custom--line--hair) solid;
	--ddb-ease: var(--wp--custom--motion--ease-out);
	--ddb-section: clamp(4.5rem, 3rem + 6vw, 7rem);
}

/* ---------- Base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
:where(h1, h2, h3) { text-wrap: balance; overflow-wrap: break-word; }
/* break-word: a pasted URL or e-mail with no spaces wraps instead of running off a 360px screen. */
:where(p, li, td, th, figcaption, dd) { text-wrap: pretty; overflow-wrap: break-word; }
img, video { height: auto; }
:focus-visible { outline: var(--wp--custom--line--focus) solid var(--ddb-gold); outline-offset: 3px; }
.skip-link:focus {
	position: fixed; inset: 1rem auto auto 1rem; z-index: 100000;
	padding: 0.75rem 1rem; background: var(--ddb-cream); color: var(--ddb-base);
}

/* Tap targets (>= 44px). Standalone links become inline-flex; links in running text are exempt. */
:where(button, input, select, textarea, .wp-element-button) { min-height: var(--ddb-tap); }
:where(.wp-block-navigation-item__content, .wp-block-social-link-anchor) {
	display: inline-flex; align-items: center; min-height: var(--ddb-tap);
}
:where(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	display: inline-grid; place-items: center; min-width: var(--ddb-tap); min-height: var(--ddb-tap);
}
:where(input, select, textarea) { font-size: max(16px, 1em); }

/* Buttons: border (default) and solid. */
.wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; transition: background-color var(--wp--custom--motion--fast), color var(--wp--custom--motion--fast); }
.is-style-solid .wp-block-button__link { background: var(--ddb-gold); color: var(--ddb-base); }
@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link:hover { background: var(--ddb-gold); color: var(--ddb-base); }
	.is-style-solid .wp-block-button__link:hover { background: transparent; color: var(--ddb-gold); }
}

/* Sections of the home share width and gutters. */
.wp-block-post-content > :where(section) {
	max-width: var(--ddb-wide);
	margin-inline: auto;
	padding-inline: var(--ddb-gutter);
	margin-block-start: var(--ddb-section);
}
.wp-block-post-content > section.hero { margin-block-start: 0; padding-inline: 0; }
.wp-block-post-content :where(section h2) { max-width: 14ch; }
.wp-block-post-content :where(section p) { color: var(--ddb-muted); }
.wp-block-post-content > section .has-text-align-center { text-align: left; }

/* Below-the-fold home sections are laid out only when they come near the viewport: the first
   layout halves (measured 470 -> 215 ms at 4x CPU). The reserved heights are the measured ones, so
   the scrollbar barely moves. Not on .ultimo (cintillo.js measures it) nor the footer (it holds
   the fixed dock). */
.wp-block-post-content > section:is(.consultado, .curso, .leido, .autor, .razones, .faq) {
	content-visibility: auto;
	contain-intrinsic-size: auto var(--ddb-cv, 800px);
}
.wp-block-post-content > section.consultado { --ddb-cv: 780px; }
.wp-block-post-content > section.curso { --ddb-cv: 760px; }
.wp-block-post-content > section.leido { --ddb-cv: 1265px; }
.wp-block-post-content > section.autor { --ddb-cv: 725px; }
.wp-block-post-content > section.razones { --ddb-cv: 395px; }
.wp-block-post-content > section.faq { --ddb-cv: 1065px; }

/* ---------- Header ---------- */
.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}
.site-header {
	gap: 1rem;
	padding: 0.5rem var(--ddb-gutter);
	padding-top: max(0.5rem, env(safe-area-inset-top));
	background: var(--ddb-base);
	border-bottom: var(--ddb-hair) var(--ddb-steel);
}
.site-header .site-logo { margin: 0; }
.site-header .site-logo a { display: flex; align-items: center; min-height: var(--ddb-tap); }
.site-header .site-logo img { display: block; width: 132px; height: auto; }
.site-header__actions { gap: 0.75rem; }
.site-header .site-header__cta { display: none; }
.site-header__cta .wp-block-button__link { min-height: var(--ddb-tap); font-size: 1rem; padding: 0 1rem; }

/* Menu button and overlay (designed, not the default one). */
.main-nav .wp-block-navigation__responsive-container-open {
	border: var(--ddb-hair) var(--ddb-gold);
	color: var(--ddb-gold);
	padding: 0 0.9rem;
	font: 600 1rem/1 var(--ddb-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.main-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ddb-base);
	color: var(--ddb-cream);
	padding: max(1rem, env(safe-area-inset-top)) var(--ddb-gutter) calc(2rem + env(safe-area-inset-bottom));
}
/* While the menu is open, the course bar and the cookie tab are hidden: on a phone they sat on top
   of the last menu items ("Contacto" was cut off, found on Android at launch, 19-oct). */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .dock { display: none; }
/* Adapta RGPD sets the tab's display inline, so it is hidden with visibility instead. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) #cookies-eu-banner-closed { visibility: hidden; }
.main-nav .wp-block-navigation__responsive-container-close {
	color: var(--ddb-gold);
	border: var(--ddb-hair) var(--ddb-gold);
	padding: 0 0.9rem;
	font: 600 1rem/1 var(--ddb-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.main-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; align-items: stretch; }
.main-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0; align-items: stretch; }
.main-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: var(--ddb-hair) var(--ddb-steel); }
.main-nav .is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.65rem 0 !important;
	font: 700 clamp(1.8rem, 8vw, 2.6rem)/1 var(--ddb-display);
	text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
	.main-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--ddb-gold); }
}

/* The menu comes down like the bar's shutter (same gesture as the pillars) and the links follow
   in order. Replaces core's 0.1s fade. */
@media (prefers-reduced-motion: no-preference) {
	.main-nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: ddb-blind calc(var(--wp--custom--motion--base) * 0.6) var(--ddb-ease) both;
	}
	.main-nav .is-menu-open .wp-block-navigation-item {
		animation: ddb-drop calc(var(--wp--custom--motion--base) * 0.6) var(--ddb-ease) both;
		animation-delay: calc(120ms + var(--i, 0) * 35ms);
	}
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { --i: 1; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { --i: 2; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { --i: 3; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { --i: 4; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(6) { --i: 5; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(7) { --i: 6; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(8) { --i: 7; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(9) { --i: 8; }
	.main-nav .is-menu-open .wp-block-navigation-item:nth-child(n+10) { --i: 9; }
}
@keyframes ddb-blind { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes ddb-drop { from { opacity: 0; transform: translateY(-0.75rem); } }

/* Posts: the header's bottom line fills with gold as you read (scroll-driven, no JS). */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.single .site-header { position: relative; }
		.single .site-header::after {
			content: "";
			position: absolute;
			inset: auto 0 -1px;
			height: var(--wp--custom--line--focus);
			background: var(--ddb-gold);
			transform-origin: 0 50%;
			animation: ddb-read linear both;
			animation-timeline: scroll(root);
		}
	}
}
@keyframes ddb-read { from { transform: scaleX(0); } }

/* ---------- Hero ---------- */
.hero-photo { position: relative; margin: var(--ddb-gutter) var(--ddb-gutter) 0; }
.hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.hero-photo::after,
.entrada-img::after,
.consultoria-foto::after {
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	background:
		linear-gradient(var(--ddb-gold), var(--ddb-gold)) left top / 100% 1px no-repeat,
		linear-gradient(var(--ddb-gold), var(--ddb-gold)) right top / 1px 100% no-repeat,
		linear-gradient(var(--ddb-gold), var(--ddb-gold)) right bottom / 100% 1px no-repeat,
		linear-gradient(var(--ddb-gold), var(--ddb-gold)) left bottom / 1px 100% no-repeat;
}
.hero-text { padding: 1.75rem var(--ddb-gutter) 0; }
.hero-title { margin: 0; }
.hero-title .l { display: block; color: var(--ddb-gold); }
.hero-title .kw {
	display: block;
	margin-top: 1rem;
	color: var(--ddb-cream);
	font-size: clamp(1.3rem, 5.4vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.hero .lead { max-width: 34ch; margin-top: 1.25rem; font-size: 1.125rem; color: var(--ddb-muted); }

.marcador {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 2.25rem var(--ddb-gutter) 0;
	border-top: var(--ddb-hair) var(--ddb-gold);
	border-bottom: var(--ddb-hair) var(--ddb-gold);
}
.marcador > p {
	margin: 0;
	padding: 1rem 0.5rem 1.1rem;
	border-left: var(--ddb-hair) var(--ddb-steel);
	font-size: 0.85rem;
	line-height: 1.3;
	color: var(--ddb-muted);
}
.marcador > p:first-child { border-left: 0; padding-left: 0; }
.marcador strong {
	display: block;
	font: 700 clamp(2.4rem, 11vw, 4.5rem)/1 var(--wp--preset--font-family--figures);
	color: var(--ddb-gold);
	font-variant-numeric: tabular-nums;
}

/* Signature moment on load: the gold frame draws itself and the headline rises line by line.
   Posts repeat the frame over the featured image. The photo itself is painted from the first frame
   (the frame is a pseudo-element on top), so the LCP never waits for it. */
@media (prefers-reduced-motion: no-preference) {
	.hero-photo::after,
	.entrada-img::after,
	.consultoria-foto::after { animation: ddb-draw var(--wp--custom--motion--draw) 0.3s var(--ddb-ease) both; }
	.hero-title .l { animation: ddb-rise var(--wp--custom--motion--base) var(--ddb-ease) both; }
	.hero-title .l:nth-child(2) { animation-delay: 0.12s; }
	.hero-title .l:nth-child(3) { animation-delay: 0.24s; }
}
@keyframes ddb-draw { from { background-size: 0 1px, 1px 0, 0 1px, 1px 0; } }
@keyframes ddb-rise { from { clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { clip-path: inset(0 0 -10% 0); transform: none; } }

/* ---------- Pillars mosaic ---------- */
.pilares-intro p { max-width: 44ch; }
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2rem; }
.mosaico > .wp-block-group { margin: 0; }
.tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 150px;
	padding: 3.75rem 1rem 1rem;
	background: var(--ddb-surface);
	border: var(--ddb-hair) var(--ddb-steel);
}
.tile::before {
	content: "+";
	position: absolute; top: 0.75rem; right: 0.75rem;
	width: var(--ddb-tap); height: var(--ddb-tap);
	display: grid; place-items: center;
	border: var(--ddb-hair) var(--ddb-gold);
	color: var(--ddb-gold);
}
.tile h3 { margin: 0; font-size: clamp(1.55rem, 6.5vw, 2.4rem); line-height: 0.95; font-weight: 700; }
.tile h3 a { text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile p { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.35; }
.tile.p-bar, .tile.p-caf { grid-column: 1 / -1; }
.tile.p-bar { min-height: 300px; border-color: var(--ddb-gold); }
.tile.p-bar .tile-img { position: absolute; inset: 0; z-index: -2; margin: 0; }
.tile.p-bar .tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile.p-bar::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--ddb-base) 90%, transparent) 68%);
}
.tile.p-bar h3 { font-size: clamp(2.6rem, 12vw, 4.2rem); color: var(--ddb-gold); }
.tile.p-bar p { color: var(--ddb-cream); }
@media (hover: hover) and (pointer: fine) {
	.tile:hover { border-color: var(--ddb-gold); }
	.tile:hover::before { background: var(--ddb-gold); color: var(--ddb-base); }
}

/* ---------- Most consulted (fixed shortcuts) ---------- */
.fichas { margin-top: 2rem; border-top: var(--ddb-hair) var(--ddb-steel); }
.ficha {
	position: relative;
	margin: 0;
	padding: 1.15rem calc(var(--ddb-tap) + 1rem) 1.15rem 0;
	border-bottom: var(--ddb-hair) var(--ddb-steel);
}
.ficha::after {
	content: "+";
	position: absolute; right: 0; top: 50%; translate: 0 -50%;
	width: var(--ddb-tap); height: var(--ddb-tap);
	display: grid; place-items: center;
	border: var(--ddb-hair) var(--ddb-gold); color: var(--ddb-gold);
}
.ficha > * { margin: 0; }
.ficha .ficha-kind { font: 600 0.9rem/1 var(--ddb-display); letter-spacing: 0.04em; color: var(--ddb-gold); }
.ficha h3 { margin-top: 0.35rem; font-size: 1.45rem; }
.ficha h3 a { text-decoration: none; }
.ficha h3 a::after { content: ""; position: absolute; inset: 0; }
.ficha p:last-child { font-size: 0.95rem; margin-top: 0.25rem; }
@media (hover: hover) and (pointer: fine) {
	.ficha:hover h3 { color: var(--ddb-gold); }
	.ficha:hover::after { background: var(--ddb-gold); color: var(--ddb-base); }
}

/* Rows and the author block come in from the sides (CSS scroll-driven, no JS). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ficha { animation: ddb-slide linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
		.ficha:nth-child(even) { --from: 18%; }
		.autor > * { animation: ddb-slide linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
		.autor > :first-child { --from: calc(var(--wp--custom--motion--slide-distance) * -1); }
		.autor > :last-child { --from: var(--wp--custom--motion--slide-distance); }
	}
}
@keyframes ddb-slide { from { opacity: 0; transform: translateX(var(--from, -18%)); } }

/* Pillars: "abrir la barra". Each tile is uncovered from the bottom up, like a bar's metal shutter
   going up, in the pillars' order (the ranges are staggered so tiles in the same row do not open
   at once). The Bartender photo settles from a slight zoom. Same gesture as the hero headline. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mosaico .tile { animation: ddb-shutter linear both; animation-timeline: view(); animation-range: var(--open, entry 0% cover 25%); }
		/* Phone: each tile opens as it enters; tiles side by side open one after the other. */
		.mosaico :is(.p-lic, .p-cer) { --open: entry 15% cover 32%; }
		.mosaico .p-bar .tile-img img { animation: ddb-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
	}
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
		/* Desktop: the whole mosaic is on screen at once, so the tiles open in the pillars' order. */
		.mosaico .p-bar { --open: entry 0% cover 20%; }
		.mosaico .p-coc { --open: entry 10% cover 23%; }
		.mosaico .p-lic { --open: entry 20% cover 26%; }
		.mosaico .p-vin { --open: entry 30% cover 29%; }
		.mosaico .p-cer { --open: entry 40% cover 32%; }
		.mosaico .p-caf { --open: entry 50% cover 35%; }
	}
}
/* Pillar pages and the podcast: the post cards open with the same shutter, neighbours one after
   the other. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.pagina .ddb-cluster__item { animation: ddb-shutter linear both; animation-timeline: view(); animation-range: var(--open, entry 0% cover 25%); }
	}
	/* Two columns from here: the right-hand card opens just after its neighbour. */
	@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
		.pagina .ddb-cluster__item:nth-child(even) { --open: entry 12% cover 30%; }
	}
}
/* Ends a little outside the box so the focus outline of the links inside is not clipped. */
@keyframes ddb-shutter { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-12px); } }
@keyframes ddb-settle { from { transform: scale(1.08); } }

/* ---------- Editorial blocks of the old home (text + most-read lists) ---------- */
.wp-block-post-content > section.editorial p { max-width: 62ch; }
.editorial .ddb-cluster { columns: 1; }
.editorial .ddb-cluster img { display: none; }
.editorial .ddb-cluster__item { break-inside: avoid; border-bottom: var(--ddb-hair) var(--ddb-steel); }
.editorial .ddb-cluster__item a { display: flex; align-items: center; min-height: var(--ddb-tap); padding: 0.6rem 0; text-decoration: none; }
.editorial .ddb-cluster__title { margin: 0; font: 600 1.15rem/1.15 var(--ddb-display); text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
	.editorial .ddb-cluster__item a:hover { color: var(--ddb-gold); }
}

/* "Lo más leído, por pilar": one section, three tabs (old editorial blocks, same text and links). */
.leido > h2 { max-width: 16ch; }
.leido .tab-list { display: flex; gap: 0; margin-top: 1.5rem; border-bottom: var(--ddb-hair) var(--ddb-steel); overflow-x: auto; scrollbar-width: none; }
.leido .tab {
	flex: 1 0 auto;
	min-height: var(--ddb-tap);
	padding: 0 1rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--ddb-muted);
	font: 700 1.15rem/1 var(--ddb-display);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}
.leido .tab[aria-selected="true"] { color: var(--ddb-gold); border-bottom-color: var(--ddb-gold); }
.leido .tab-panel { margin-top: 1.5rem; }
.leido .tab-panel:focus-visible { outline-offset: 6px; }
.leido .tab-label { font: 700 1rem/1 var(--ddb-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ddb-gold); margin-top: 2.5rem; }
.leido .tab-panel h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); max-width: 20ch; }
.leido .tab-panel p { max-width: 62ch; }
.leido .ddb-cluster { display: block; columns: 1; }
.leido .ddb-cluster img { display: none; }
.leido .ddb-cluster__item { break-inside: avoid; border-bottom: var(--ddb-hair) var(--ddb-steel); }
.leido .ddb-cluster__item a { display: flex; align-items: center; min-height: var(--ddb-tap); padding: 0.6rem 0; background: none; text-decoration: none; }
.leido .ddb-cluster__title { margin: 0; padding: 0; font: 600 1.15rem/1.15 var(--ddb-display); text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
	.leido .tab:hover { color: var(--ddb-cream); }
	.leido .ddb-cluster__item a:hover { color: var(--ddb-gold); }
}
@media (min-width: 900px) {
	.leido .tab { flex: 0 0 auto; padding: 0 1.5rem; }
	.leido.tabs-ready .tab-panel:not([hidden]) { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 3rem; align-items: start; }
	.leido .tab-panel > :not(.ddb-cluster) { grid-column: 1; }
	.leido .tab-panel > .ddb-cluster { grid-column: 2; grid-row: 1 / span 6; columns: 2; column-gap: 2rem; margin-top: 0; }
}

/* Cluster lists anywhere else (pillar pages, podcast, posts): cards. */
.ddb-cluster {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 0.75rem;
}
.ddb-cluster__item a { display: block; height: 100%; text-decoration: none; background: var(--ddb-surface); }
.ddb-cluster__item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ddb-cluster__title { margin: 0; padding: 0.8rem 0.9rem 1rem; font-size: 1.2rem; line-height: 1.05; }
.editorial .ddb-cluster { display: block; gap: 0; }
.editorial .ddb-cluster__item a { background: none; }
.editorial .ddb-cluster__title { padding: 0; }

/* ---------- Latest posts ticker ---------- */
.cintillo-head { gap: 1rem; }
.cintillo-head h2 { margin: 0; }
.cintillo-head p { margin: 0.5rem 0 0; font-size: 0.95rem; }
.cintillo-pausa {
	flex: 0 0 var(--ddb-tap);
	height: var(--ddb-tap);
	display: grid; place-items: center;
	background: none; border: var(--ddb-hair) var(--ddb-gold); color: var(--ddb-gold);
	cursor: pointer;
}
.cintillo-pausa svg { width: 16px; height: 16px; fill: currentColor; }
.cintillo-pausa .play, .cintillo-pausa[aria-pressed="true"] .stop { display: none; }
.cintillo-pausa[aria-pressed="true"] .play { display: block; }
.wp-block-post-content > section.ultimo { padding-inline: 0; }
.ultimo > .cintillo-head { padding-inline: var(--ddb-gutter); }
.cinta .wp-block-post-template {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding: 1.5rem var(--ddb-gutter) 1rem;
	margin: 0;
	list-style: none;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.cinta .wp-block-post-template::-webkit-scrollbar { display: none; }
.cinta .wp-block-post {
	position: relative;
	flex: 0 0 clamp(220px, 62vw, 280px);
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--ddb-surface);
	border-top: 2px solid transparent;
}
.cinta .wp-block-post:nth-child(even) { background: var(--ddb-steel); }
.cinta .wp-block-post-featured-image { margin: 0; }
.cinta .wp-block-post-featured-image img { display: block; width: 100%; }
.cinta-meta { gap: 0.5rem; padding: 0.8rem 0.9rem 0; font: 600 0.85rem/1.2 var(--ddb-display); letter-spacing: 0.03em; }
.cinta-meta .wp-block-post-terms a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ddb-gold); text-decoration: none; position: relative; z-index: 2; }
.cinta-meta .wp-block-post-terms a ~ a, .cinta-meta .wp-block-post-terms__separator { display: none; }
.cinta-meta .wp-block-post-date { color: var(--ddb-muted); }
.cinta .wp-block-post-title {
	margin: 0;
	padding: 0.45rem 0.9rem 1rem;
	font-size: 1.3rem;
	line-height: 1.05;
	/* Post titles run to 80+ characters over 3-4 lines: sentence case reads better than capitals here. */
	text-transform: none;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cinta .wp-block-post-title a { text-decoration: none; }
.cinta .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
	.cinta .wp-block-post:hover { border-top-color: var(--ddb-gold); }
	.cinta .wp-block-post:hover .wp-block-post-title { color: var(--ddb-gold); }
}
@media (prefers-reduced-motion: reduce) {
	.cinta .wp-block-post-template { scroll-snap-type: x mandatory; }
	.cinta .wp-block-post { scroll-snap-align: start; }
}

/* ---------- Course block: gold frame + order ticket ---------- */
.wp-block-post-content > section.curso,
section.curso {
	max-width: 1100px;
	padding: 6px;
	margin-inline: var(--ddb-gutter);
	border: var(--ddb-hair) var(--ddb-gold);
}
.curso-in {
	display: grid;
	gap: 1.25rem;
	padding: 2rem 1.25rem 1.5rem;
	background: var(--ddb-surface);
	border: var(--ddb-hair) var(--ddb-gold);
}
.curso-in > * { margin: 0; }
.curso .curso-tag { font: 600 0.95rem/1 var(--ddb-display); color: var(--ddb-gold); letter-spacing: 0.04em; }
.curso h2 { max-width: 14ch; }
.curso .curso-text { max-width: 38ch; }
.impresora { width: 100%; max-width: 340px; }
.impresora .slot {
	height: 14px;
	margin: 0;
	position: relative;
	z-index: 2;
	border: 0;
	border-top: var(--ddb-hair) var(--ddb-gold);
	background: var(--ddb-base);
	opacity: 1;
}
.salida { overflow: clip; margin: 0 10px; padding-bottom: 16px; }
.ticket {
	padding: 1.1rem 1rem 1.5rem;
	background: var(--ddb-cream);
	color: var(--ddb-base);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	-webkit-mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat;
	mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat;
}
.ticket > * { margin: 0; }
.ticket p { color: inherit; }
.ticket .ticket-title { text-align: center; font: 700 1.5rem/1 var(--ddb-display); letter-spacing: 0.08em; text-transform: uppercase; }
.ticket .ticket-sub {
	text-align: center;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--ddb-base) 75%, var(--ddb-cream));
	padding-bottom: 0.7rem;
	border-bottom: 1px dashed color-mix(in srgb, var(--ddb-base) 65%, var(--ddb-cream));
}
.ticket-items { margin: 0; }
.ticket-items table { width: 100%; border-collapse: collapse; }
.ticket-items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ticket-items td { border: 0; padding: 0.2rem 0; }
.ticket-items td:first-child { width: 1.6rem; }
.ticket-items td:last-child { text-align: right; }
.ticket-items tbody tr:first-child td { padding-top: 0.7rem; }
.ticket-items tbody tr:last-child td { padding-bottom: 0.7rem; }
.ticket-items tfoot { border-top: 1px dashed color-mix(in srgb, var(--ddb-base) 65%, var(--ddb-cream)); }
.ticket-items tfoot td { padding: 0.7rem 0 0.9rem; font-weight: 600; }
.ticket-items tfoot td:last-child { font: 700 1.5rem/1 var(--ddb-display); text-transform: uppercase; }
.ticket .wp-block-button__link { width: 100%; background: var(--ddb-base); color: var(--ddb-gold); border-color: var(--ddb-base); }
.ticket .ticket-note { margin-top: 0.55rem; text-align: center; font-size: 0.8rem; color: color-mix(in srgb, var(--ddb-base) 75%, var(--ddb-cream)); }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ticket { animation: ddb-print linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
	}
}
@keyframes ddb-print { from { transform: translateY(-101%); } }

/* ---------- Author ---------- */
.autor { display: grid; gap: 1.25rem; }
.autor-img { margin: 0; }
.autor-img img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.autor-text > * { margin-block: 0 1rem; }
.autor .autor-h { font-size: 1.1rem; letter-spacing: 0.06em; color: var(--ddb-gold); max-width: none; }
.autor .wp-block-quote { margin: 0 0 1rem; font-size: clamp(1.8rem, 7vw, 3rem); }
.autor .wp-block-quote p { color: var(--ddb-cream); }
.autor-text p a { color: var(--ddb-gold); }

/* ---------- "Por qué aprender aquí" and FAQ ---------- */
.razones ul { padding-left: 1.1rem; max-width: 62ch; }
.razones li { color: var(--ddb-muted); margin-bottom: 0.6rem; }
.razones li::marker { color: var(--ddb-gold); }
.razones strong { color: var(--ddb-cream); }

.faq .rank-math-list { list-style: none; padding: 0; margin-top: 2rem; border-top: var(--ddb-hair) var(--ddb-steel); }
.faq .rank-math-list-item { border-bottom: var(--ddb-hair) var(--ddb-steel); }
.faq .rank-math-question { margin: 0; font: 600 1.15rem/1.25 var(--ddb-text); text-transform: none; }
.faq .faq-toggle {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr var(--ddb-tap);
	gap: 1rem;
	align-items: center;
	padding: 1rem 0;
	background: none;
	border: 0;
	color: var(--ddb-cream);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.faq .faq-toggle::after {
	content: "+";
	box-sizing: border-box;
	width: var(--ddb-tap); height: var(--ddb-tap);
	display: grid; place-items: center;
	border: var(--ddb-hair) var(--ddb-gold);
	color: var(--ddb-gold);
	font: 600 1.4rem/1 var(--ddb-display);
	transition: transform var(--wp--custom--motion--fast) var(--ddb-ease);
}
.faq .faq-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq .rank-math-answer { padding: 0 3.5rem 1.25rem 0; max-width: 62ch; color: var(--ddb-muted); }
.faq .rank-math-answer a { color: var(--ddb-gold); }
@media (hover: hover) and (pointer: fine) {
	.faq .faq-toggle:hover { color: var(--ddb-gold); }
}

/* ---------- Footer + mobile course bar ---------- */
.site-footer {
	display: grid;
	gap: 2rem;
	margin-top: var(--ddb-section);
	padding: 2.5rem var(--ddb-gutter) 2rem;
	border-top: var(--ddb-hair) var(--ddb-gold);
}
.site-footer > * { margin: 0; }
.site-footer__logo img { display: block; width: 180px; height: auto; }
.footer-nav .wp-block-navigation__container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; width: 100%; }
.footer-nav .wp-block-navigation-item { border-bottom: var(--ddb-hair) var(--ddb-steel); }
.footer-nav .wp-block-navigation-item__content { font: 600 1.05rem/1.1 var(--ddb-display); text-transform: uppercase; letter-spacing: 0.03em; }
.site-footer__legal p { margin: 0; font-size: 0.85rem; color: var(--ddb-muted); }
.legal-nav { font-family: var(--ddb-text); text-transform: none; letter-spacing: 0; font-size: 0.85rem; font-weight: 400; }
.legal-nav .wp-block-navigation-item__content { color: var(--ddb-muted); text-decoration: underline; }

.dock {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 30;
	gap: 0.75rem;
	margin: 0 !important;
	padding: 0.6rem var(--ddb-gutter) calc(0.6rem + env(safe-area-inset-bottom));
	background: var(--ddb-base);
	border-top: var(--ddb-hair) var(--ddb-gold);
	transition: transform var(--wp--custom--motion--fast) var(--ddb-ease);
}
.dock.is-hidden { transform: translateY(100%); }
.dock p { margin: 0; font: 600 1rem/1.1 var(--ddb-display); text-transform: uppercase; }
.dock .wp-block-button__link { min-height: 46px; padding: 0 1rem; font-size: 1rem; }
body:has(.dock) { padding-bottom: calc(var(--wp--custom--dock-height) + env(safe-area-inset-bottom)); }

/* ---------- Long read: posts and pages (idea PUNCH: careful reading) ---------- */
:root { --ddb-measure: 42rem; }
.entrada-head, .entrada-body > *, .pagina > *, .pagina .wp-block-post-content > *, .landing .wp-block-post-content > * {
	max-width: var(--ddb-measure);
	margin-inline: auto;
}
/* Running text is narrower than the column: Barlow is a narrow face and 42rem gave ~88 characters
   per line on desktop. 38rem gives ~78. Text keeps the column's left edge; title, images, tables
   and the author box keep the full 42rem. Lists with their own layout (cluster cards) are left alone. */
:root { --ddb-text: 38rem; }
.entrada-body > :where(p, ul.wp-block-list, ol.wp-block-list, ul:not([class]), ol:not([class])),
.pagina .wp-block-post-content > :where(p, ul.wp-block-list, ol.wp-block-list, ul:not([class]), ol:not([class])) {
	/* Done with end padding, not a narrower box: core's constrained layout centres every child, and
	   a narrower box would sit 32px in from the title's edge. */
	box-sizing: border-box;
	padding-inline-end: max(0px, min(var(--ddb-measure) - var(--ddb-text), 100% - var(--ddb-text)));
}
.entrada-head, .entrada-body, .pagina, .archivo-head { padding-inline: var(--ddb-gutter); }
.entrada-body > .alignwide, .pagina .alignwide { max-width: var(--ddb-wide); }
.entrada-body > .alignfull, .pagina .alignfull { max-width: none; margin-inline: calc(var(--ddb-gutter) * -1); }

.entrada-head { padding-top: clamp(2rem, 1.5rem + 3vw, 4rem); }
/* Breadcrumbs (Rank Math) above the post title: "Inicio › Cócteles", same look as the old category label. */
.migas { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; margin: 0; font: 600 0.95rem/1 var(--ddb-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ddb-muted); }
.migas a { display: inline-flex; align-items: center; min-height: var(--ddb-tap); color: var(--ddb-gold); text-decoration: none; }
.migas .separator { color: var(--ddb-muted); }
@media (hover: hover) and (pointer: fine) {
	.migas a:hover { color: var(--ddb-cream); }
}
.entrada-head .wp-block-post-title { margin: 0.5rem 0 1rem; font-size: clamp(2.3rem, 1.6rem + 3.6vw, 4.4rem); line-height: 0.95; }
.entrada-meta { gap: 0.25rem 1rem; padding-bottom: 1.25rem; border-bottom: var(--ddb-hair) var(--ddb-steel); color: var(--ddb-muted); font-size: 0.95rem; }
.entrada-meta > * { margin: 0; }
.entrada-img { position: relative; max-width: 60rem; margin: 2rem auto 0; }
/* Featured images that are not 16:9 (most old ones are square) are shown whole: the figure hugs the
   image, so the gold frame still fits it; height capped so a square never fills a laptop screen. */
.entrada-img.is-natural { width: min(100%, var(--ddb-measure), 75svh * var(--r, 1)); }
.entrada-img.is-natural img { width: 100%; height: auto; }
.entrada-img img { display: block; width: 100%; }

/* Podcast episodes use the browser's own player (inc/compat.php): dark controls to match the page.
   Fixed height: without it the player grows when its controls load and pushes the post down (CLS). */
.wp-audio-shortcode { display: block; width: 100%; height: 54px; color-scheme: dark; }

.single .wp-block-post-content, .pagina .wp-block-post-content { font-size: 1.125rem; line-height: 1.75; }
.single .wp-block-post-content :where(p, li), .pagina .wp-block-post-content :where(p, li) { color: var(--ddb-cream); }
.single .wp-block-post-content :where(h2), .page:not(.home) .wp-block-post-content :where(h2) {
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: var(--ddb-hair) var(--ddb-gold);
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
	scroll-margin-top: 5rem;
}
.single .wp-block-post-content :where(h3), .page:not(.home) .wp-block-post-content :where(h3) {
	margin-top: 2rem;
	font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem);
	scroll-margin-top: 5rem;
}
.single .wp-block-post-content a:not(.wp-element-button), .page:not(.home) .wp-block-post-content a:not(.wp-element-button) {
	text-decoration-color: var(--ddb-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}
.single .wp-block-post-content :where(ul, ol) { padding-left: 1.2rem; }
.single .wp-block-post-content li::marker { color: var(--ddb-gold); }
.single .wp-block-post-content :where(strong, b) { color: var(--ddb-cream); font-weight: 600; }
.single .wp-block-post-content .wp-block-quote, .single .wp-block-post-content blockquote {
	margin-block: 2.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
}
.single .wp-block-post-content figure:not(.wp-block-table, .wp-block-embed) img { display: block; width: 100%; height: auto; }
.single .wp-block-post-content :where(figcaption) { color: var(--ddb-muted); font-size: 0.9rem; }
.single .wp-block-post-content table, .pagina .wp-block-post-content table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.single .wp-block-post-content :where(th, td), .pagina .wp-block-post-content :where(th, td) { padding: 0.6rem 0.5rem; border-bottom: var(--ddb-hair) var(--ddb-steel); text-align: left; }
.single .wp-block-post-content th, .pagina .wp-block-post-content th { font: 600 1rem/1.2 var(--ddb-display); text-transform: uppercase; color: var(--ddb-gold); }
.wp-block-table { overflow-x: auto; }
.wp-block-embed iframe, .wp-block-post-content iframe { max-width: 100%; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-block-embed.is-type-video iframe { width: 100%; height: 100%; }

/* Old post images: transparent PNGs were made for a white page (dark text). */
.single .wp-block-post-content img[src*=".png"] { background: var(--ddb-cream); }

/* Measures table (unidades de medida): same look as its image, readable on a phone. */
.single .wp-block-post-content .tabla-medidas table { font-size: 1.1rem; font-variant-numeric: tabular-nums; border: var(--ddb-hair) var(--ddb-gold); }
.single .wp-block-post-content .tabla-medidas th { background: var(--ddb-gold); color: var(--ddb-base); text-align: center; padding: 0.75rem 0.5rem; }
.single .wp-block-post-content .tabla-medidas :where(td, th) { border: var(--ddb-hair) var(--ddb-steel); }
.single .wp-block-post-content .tabla-medidas td { text-align: center; }
.single .wp-block-post-content .tabla-medidas td:first-child { font-weight: 600; color: var(--ddb-gold); }
.single .wp-block-post-content .tabla-medidas tbody tr:nth-child(even) { background: var(--ddb-surface); }

/* Table of contents ("En este artículo"), collapsible. */
.toc { margin: 2rem auto; border: var(--ddb-hair) var(--ddb-gold); background: var(--ddb-surface); }
.toc__title {
	display: flex; align-items: center; justify-content: space-between;
	min-height: var(--ddb-tap);
	padding: 0.4rem 1rem;
	cursor: pointer;
	list-style: none;
	font: 700 1.1rem/1 var(--ddb-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ddb-gold);
}
.toc__title::-webkit-details-marker { display: none; }
.toc__title::after { content: "+"; transition: transform var(--wp--custom--motion--fast) var(--ddb-ease); }
.toc[open] .toc__title::after { transform: rotate(45deg); }
/* Podcast episode, folded after the introduction (inc/compat.php). Quieter than the table of
   contents: steel border, and it sits right on top of it. */
.toc.podcast { margin-bottom: -1rem; border-color: var(--ddb-steel); }
.toc.podcast .toc__title { color: var(--ddb-cream); }
.podcast__body { padding: 0.25rem 1rem 1rem; }
.single .wp-block-post-content .podcast__body p { margin: 0.75rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--ddb-muted); }
.toc__list { list-style: none; margin: 0; padding: 0 1rem 0.75rem; }
.single .wp-block-post-content .toc__list li { margin: 0; }
.toc__item a { display: flex; align-items: center; min-height: var(--ddb-tap); padding: 0.45rem 0; border-top: var(--ddb-hair) var(--ddb-steel); font-size: 1rem; line-height: 1.35; text-decoration: none !important; color: var(--ddb-cream); }
.toc__item--h3 a { padding-left: 1rem; font-size: 0.95rem; color: var(--ddb-muted); }
@media (hover: hover) and (pointer: fine) {
	.toc__item a:hover { color: var(--ddb-gold); }
}

.wp-block-post-content :where(details) > summary { display: flex; align-items: center; min-height: var(--ddb-tap); cursor: pointer; }


/* Content made for the old light theme: blocks with a cream background keep dark text. */
.wp-block-post-content [style*="background-color:#F2EDE8" i],
.wp-block-post-content .has-contrast-background-color { color: var(--ddb-base); }
.wp-block-post-content [style*="background-color:#F2EDE8" i] :where(p, li, summary, td, th),
.wp-block-post-content .has-contrast-background-color :where(p, li, summary, td, th) { color: inherit; }
.wp-block-post-content [style*="background-color:#F2EDE8" i] a { color: var(--wp--preset--color--accent-dark); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--ddb-surface); }
.wp-block-table.is-style-stripes { border-bottom-color: var(--ddb-steel); }

/* Author box after the post. */
.autor-entrada {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 1rem 1.25rem;
	max-width: var(--ddb-measure);
	margin: 3.5rem auto 0;
	padding: 1.5rem var(--ddb-gutter) 0;
	border-top: var(--ddb-hair) var(--ddb-gold);
}
.autor-entrada__img { margin: 0; }
.autor-entrada__img img { width: 88px; height: 88px; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.1); }
.autor-entrada__text > * { margin: 0 0 0.75rem; color: var(--ddb-muted); font-size: 1rem; }
.autor-entrada__text .autor-entrada__label { font: 700 1.1rem/1 var(--ddb-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ddb-gold); }
.autor-entrada__text a { color: var(--ddb-gold); }

/* Course block in posts: same frame and ticket, smaller title. */
section.curso--entrada { margin-top: 3rem; margin-inline: var(--ddb-gutter); }
.curso .curso-title { font: 700 clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem)/0.92 var(--ddb-display); text-transform: uppercase; color: var(--ddb-cream); max-width: 14ch; }

/* Comments. */
.comentarios { max-width: var(--ddb-measure); margin: 4rem auto 0; padding-inline: var(--ddb-gutter); }
.comentarios .wp-block-comments-title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.comentario { padding: 1rem 0; border-bottom: var(--ddb-hair) var(--ddb-steel); }
.comentario .wp-block-comment-author-name { font-weight: 600; }
.comentario .wp-block-comment-date { color: var(--ddb-muted); font-size: 0.9rem; }
.comentarios :where(input, textarea) { width: 100%; padding: 0.7rem; background: var(--ddb-surface); color: var(--ddb-cream); border: var(--ddb-hair) var(--ddb-steel); border-radius: 0; }
.comentarios .comment-reply-title { font-size: 1.4rem; }

/* Pages, landing, 404, archives. */
.pagina > .wp-block-post-title { padding-top: clamp(2rem, 1.5rem + 3vw, 4rem); font-size: clamp(2.3rem, 1.6rem + 3.6vw, 4.4rem); }
.landing { padding-block: var(--ddb-gutter); }
/* Landing header: only the wordmark, linked home (no menu: the page has one goal). */
/* Not sticky like the main header: on a landing it stays at the top and does not follow. */
.wp-site-blocks > header.landing-cabecera { position: static; }
.landing-cabecera {
	padding: 0.5rem var(--ddb-gutter);
	padding-top: max(0.5rem, env(safe-area-inset-top));
	border-bottom: var(--ddb-hair) var(--ddb-steel);
}
.landing-cabecera .site-logo { margin: 0; }
.landing-cabecera .site-logo a { display: inline-flex; align-items: center; min-height: var(--ddb-tap); }
.landing-cabecera .site-logo img { display: block; width: 132px; height: auto; }
@media (min-width: 900px) {
	.landing-cabecera .site-logo img { width: 160px; }
}

/* ---------- Consultancy motion (decision of Eleazar, 08-oct) ----------
   For bar owners: few movements, slow and precise, telling "una barra que puedes medir".
   1. Hero: the brand's gold frame draws over the photo (shared with the home and posts) and the
      headline lifts. The headline only moves, it is never hidden (it can be the LCP). */
.consultoria-foto { position: relative; }
@media (prefers-reduced-motion: no-preference) {
	.landing h1 { animation: ddb-lift var(--wp--custom--motion--base) var(--ddb-ease) both; }
}
@keyframes ddb-lift { from { transform: translateY(0.3em); } }

/* 2. Figures (13, +800, 3) count up when they come into view (assets/js/cifras.js). */
.consultoria-cifras p { font-variant-numeric: tabular-nums; }

/* 3. "Lo que cambia cuando la barra tiene sistema": each ✓ turns gold, one line after another. */
.consultoria-sistema ul { list-style: none; padding-left: 0; }
.consultoria-sistema li { position: relative; padding-left: 2rem; margin-bottom: 0.6rem; }
.consultoria-sistema .tick { position: absolute; left: 0; top: 0; color: var(--ddb-gold); font-weight: 700; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.consultoria-sistema li { animation: ddb-row linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
		.consultoria-sistema .tick { animation: ddb-tick linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
	}
}
@keyframes ddb-row { from { opacity: 0; transform: translateX(-0.75rem); } }
@keyframes ddb-tick { from { color: var(--ddb-muted); transform: scale(0.6); } }

/* 4. "Cómo trabajo" as a method line (signature moment of the page): the four steps on one
      vertical line on every screen size; the gold line fills step by step as you scroll and each
      number lights up when it is reached. */
.consultoria-metodo .wp-block-columns { display: block; margin: 0; }
.consultoria-metodo h2 + .wp-block-columns { margin-top: 2rem; }
.consultoria-metodo .wp-block-column {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	column-gap: 1.25rem;
	margin: 0;
	padding-bottom: 2.25rem;
}
.consultoria-metodo .wp-block-column > * { grid-column: 2; margin-block: 0 0.6rem; }
/* The step title sits level with its number (headings carry a top margin elsewhere). */
.consultoria-metodo .wp-block-column > h3.wp-block-heading { margin-top: 0.35rem; }
.consultoria-metodo .wp-block-column > p:first-child {
	grid-column: 1;
	grid-row: 1 / span 3;
	margin: 0;
	line-height: 1;
	text-align: center;
	font-family: var(--wp--preset--font-family--figures);
	font-variant-numeric: tabular-nums;
}
/* The line: a steel track and a gold fill, from under the number to the next step. */
.consultoria-metodo .wp-block-column::before,
.consultoria-metodo .wp-block-column::after {
	content: "";
	position: absolute;
	left: 1.75rem;
	top: 3.25rem;
	bottom: 0.75rem;
	width: 1px;
	background: var(--ddb-steel);
}
.consultoria-metodo .wp-block-column::after { background: var(--ddb-gold); transform-origin: top; }
.consultoria-metodo .wp-block-columns:last-child .wp-block-column:last-child::before,
.consultoria-metodo .wp-block-columns:last-child .wp-block-column:last-child::after { content: none; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.consultoria-metodo .wp-block-column::after { animation: ddb-fill linear both; animation-timeline: view(); animation-range: cover 25% cover 65%; }
		.consultoria-metodo .wp-block-column > p:first-child { animation: ddb-light linear both; animation-timeline: view(); animation-range: entry 80% cover 35%; }
	}
}
@keyframes ddb-fill { from { transform: scaleY(0); } }
@keyframes ddb-light { from { color: var(--ddb-muted); opacity: 0.55; } }

.error-86 { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 2rem + 4vw, 5rem) var(--ddb-gutter) 0; }
.error-86 .error-86__cifra {
	display: inline-block;
	margin: 0;
	padding: 0.2rem 1rem;
	font: 700 clamp(4rem, 3rem + 6vw, 7rem)/1 var(--wp--preset--font-family--figures);
	color: var(--ddb-cream);
	background: var(--ddb-risk);
}
.error-86 h1 { margin: 1.25rem 0 1rem; font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); }
.error-86 p { color: var(--ddb-muted); }
/* .pilares-enlaces: the same six links as a way out of an empty search (patterns/pilares-enlaces.php). */
.error-86 .error-86__pilares, .rejilla .pilares-enlaces { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 6px; }
.rejilla .pilares-enlaces { max-width: 46rem; } /* 3 + 3 on desktop, as on the 404, not 5 + 1 */
.error-86 .error-86__pilares a, .rejilla .pilares-enlaces a { display: flex; align-items: center; min-height: 3.5rem; padding: 0 1rem; border: var(--ddb-hair) var(--ddb-steel); background: var(--ddb-surface); font: 600 1.2rem/1.1 var(--ddb-display); text-transform: uppercase; text-decoration: none; }
.error-86 .error-86__cierre a { color: var(--ddb-gold); }
@media (hover: hover) and (pointer: fine) {
	.error-86 .error-86__pilares a:hover, .rejilla .pilares-enlaces a:hover { border-color: var(--ddb-gold); color: var(--ddb-gold); }
}

.wp-block-search__inside-wrapper { gap: 6px; }
.wp-block-search__input { min-height: var(--ddb-tap); padding: 0 0.8rem; background: var(--ddb-surface); color: var(--ddb-cream); border: var(--ddb-hair) var(--ddb-steel); border-radius: 0; }
.wp-block-search__button { margin: 0; border-radius: 0; }

.archivo-head { max-width: var(--ddb-wide); margin-inline: auto; padding-top: clamp(2rem, 1.5rem + 3vw, 4rem); }
.archivo-head .wp-block-query-title { font-size: clamp(2.6rem, 1.8rem + 4vw, 5.5rem); }
.archivo-head .wp-block-term-description { max-width: 44ch; color: var(--ddb-muted); }
.rejilla { max-width: var(--ddb-wide); margin: 2rem auto 0; padding-inline: var(--ddb-gutter); }
.rejilla .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0.75rem; }
.rejilla .wp-block-post { position: relative; margin: 0; padding-bottom: 1rem; background: var(--ddb-surface); }
.rejilla .wp-block-post > :not(.wp-block-post-featured-image) { margin-inline: 1rem; }
.rejilla .wp-block-post-featured-image { margin: 0 0 0.9rem; }
.rejilla .rejilla-fecha { font: 600 0.85rem/1 var(--ddb-display); color: var(--ddb-muted); letter-spacing: 0.03em; }
.rejilla .wp-block-post-title { margin-top: 0.4rem; font-size: 1.45rem; line-height: 1; }
.rejilla .wp-block-post-title a { text-decoration: none; }
.rejilla .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.rejilla .wp-block-post-excerpt { color: var(--ddb-muted); font-size: 0.95rem; }
.rejilla .wp-block-query-pagination { margin-top: 2rem; font-family: var(--ddb-display); text-transform: uppercase; }
.rejilla .wp-block-query-pagination a, .rejilla .page-numbers { display: inline-flex; align-items: center; min-height: var(--ddb-tap); min-width: var(--ddb-tap); justify-content: center; }
@media (hover: hover) and (pointer: fine) {
	.rejilla .wp-block-post:hover .wp-block-post-title { color: var(--ddb-gold); }
}

.site-footer__social { gap: 0.5rem; }
.site-footer__social .wp-block-social-link { background: transparent !important; color: var(--ddb-gold) !important; border: var(--ddb-hair) var(--ddb-steel); }
.site-footer__social .wp-social-link a { min-width: var(--ddb-tap); min-height: var(--ddb-tap); justify-content: center; }

/* ---------- Tablet and desktop ---------- */
@media (min-width: 600px) {
	.site-header .site-header__cta { display: flex; }
}
@media (min-width: 900px) {
	body:has(.dock) { padding-bottom: 0; }
	.dock { display: none !important; }
	.site-header .site-logo img { width: 160px; }
	.wp-block-post-content > section.consultado { --ddb-cv: 450px; }
	.wp-block-post-content > section.curso { --ddb-cv: 480px; }
	.wp-block-post-content > section.leido { --ddb-cv: 610px; }
	.wp-block-post-content > section.autor { --ddb-cv: 420px; }
	.wp-block-post-content > section.razones { --ddb-cv: 280px; }
	.wp-block-post-content > section.faq { --ddb-cv: 915px; }

	.hero {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		align-items: end;
		max-width: var(--ddb-wide);
		margin-inline: auto;
	}
	.hero-photo { grid-column: 2; grid-row: 1 / 3; margin: var(--ddb-gutter) var(--ddb-gutter) 0 0; }
	.hero-photo img { aspect-ratio: 5 / 6; }
	.hero-text { grid-column: 1; padding-bottom: 0; }
	.marcador { grid-column: 1; margin-right: 0; }

	.pilares, .consultado { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
	.consultado { grid-template-columns: 1fr 1.6fr; }
	.mosaico, .fichas { margin-top: 0; }
	.mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); }
	.tile.p-bar { grid-column: span 2; grid-row: span 2; }
	.tile.p-coc, .tile.p-cer, .tile.p-caf { grid-column: span 2; }

	.editorial { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 3rem; align-items: start; }
	.editorial > :not(.wp-block-orbital-cluster, .ddb-cluster) { grid-column: 1; }
	.editorial > .ddb-cluster { grid-column: 2; grid-row: 1 / span 6; columns: 2; column-gap: 2rem; margin-top: 0; }

	.cinta .wp-block-post { flex-basis: 260px; }

	.wp-block-post-content > section.curso, section.curso { margin-inline: auto; }
	.curso-in { grid-template-columns: 1.3fr 1fr; column-gap: 3rem; padding: 3rem; }
	.curso-in > * { grid-column: 1; }
	.curso .impresora { grid-column: 2; grid-row: 1 / 4; justify-self: end; }

	.autor { grid-template-columns: 420px 1fr; align-items: center; gap: 3rem; }
	.razones, .faq { display: grid; grid-template-columns: 1fr 2fr; gap: 0 3rem; align-items: start; }
	.razones > *, .faq > * { grid-column: 2; }
	.razones > h2, .faq > h2 { grid-column: 1; grid-row: 1 / span 4; }
	.faq .rank-math-list { margin-top: 0; }

	.site-footer { grid-template-columns: 1fr 2fr 1fr; align-items: start; max-width: var(--ddb-wide); margin-inline: auto; }
}

/* ---------- Forms (WPForms, classic markup): same language as the rest of the site ----------
   Dark field, steel hairline, gold on focus; the button is the site's bordered button. */
.wpforms-container .wpforms-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 52px;
	padding: 0.8rem 1rem;
	background: var(--ddb-surface);
	border: var(--ddb-hair) var(--ddb-steel);
	border-radius: 0;
	color: var(--ddb-cream);
	font: 400 max(16px, 1rem)/1.4 var(--ddb-text);
}
.wpforms-container .wpforms-form textarea { min-height: 9rem; resize: vertical; }
.wpforms-container .wpforms-form :is(input, textarea)::placeholder { color: var(--ddb-muted); opacity: 1; }
.wpforms-container .wpforms-form :is(input, textarea, select):focus { border-color: var(--ddb-gold); }
.wpforms-container .wpforms-form .wpforms-field { padding: 0 0 0.9rem; }
.wpforms-container .wpforms-form .wpforms-field-checkbox ul { margin: 0; padding: 0; list-style: none; }
.wpforms-container .wpforms-form .wpforms-field-checkbox li { display: flex; align-items: flex-start; gap: 0.6rem; }
.wpforms-container .wpforms-form input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--ddb-gold); flex: none; margin: 0.2em 0 0; }
.wpforms-container .wpforms-form .wpforms-field-label-inline { color: var(--ddb-muted); }
.wpforms-container .wpforms-form .wpforms-submit {
	min-height: 52px;
	padding: 0 2rem;
	background: transparent;
	border: var(--ddb-hair) var(--ddb-gold);
	border-radius: 0;
	color: var(--ddb-gold);
	font: 700 1.1rem/1 var(--ddb-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.wpforms-container .wpforms-form .wpforms-submit:hover { background: var(--ddb-gold); color: var(--ddb-base); }
}
/* Errors: the red of the 86 marks the field; the message stays in cream for contrast. */
.wpforms-container .wpforms-form :is(input, textarea).wpforms-error { border-color: var(--ddb-risk); }
.wpforms-container .wpforms-form label.wpforms-error { display: block; margin-top: 0.35rem; color: var(--ddb-cream); font-size: 0.9rem; }
.wpforms-confirmation-container-full, .wpforms-confirmation-container {
	padding: 1.25rem;
	background: var(--ddb-surface);
	border: var(--ddb-hair) var(--ddb-gold);
	color: var(--ddb-cream);
}

/* ---------- Cookie banner (Adapta RGPD, "classic" theme) in the brand ----------
   "Rechazar" and "Aceptar" are the same button, same size and weight (GDPR: rejecting must be as
   easy as accepting); "Más información" is a text link. The ids double the plugin's selectors so
   these rules win whatever the CSS order; !important only where the plugin itself uses it. */
#cookies-eu-wrapper #cookies-eu-banner {
	box-sizing: border-box;
	inset: auto 0 0;
	display: grid;
	gap: 0.9rem;
	padding: 1rem var(--ddb-gutter) max(1rem, env(safe-area-inset-bottom));
	background: var(--ddb-surface);
	border-top: var(--ddb-hair) var(--ddb-gold);
	color: var(--ddb-cream);
	font: 400 0.95rem/1.45 var(--ddb-text);
	text-align: left;
}
#cookies-eu-wrapper #cookies-eu-label { max-width: 60ch; }
#cookies-eu-wrapper #cookies-eu-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* The plugin sets its <form> to display: contents, so the link button itself is the grid item. */
#cookies-eu-wrapper #cookies-eu-buttons #cookies-eu-settings { grid-column: 1 / -1; order: 2; justify-self: start; }
#cookies-eu-wrapper #cookies-eu-reject,
#cookies-eu-wrapper #cookies-eu-accept {
	min-height: var(--ddb-tap);
	margin: 0;
	padding: 0 1rem;
	background: transparent;
	border: var(--ddb-hair) var(--ddb-gold);
	color: var(--ddb-gold);
	font: 700 1.05rem/1 var(--ddb-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
#cookies-eu-wrapper #cookies-eu-banner #cookies-eu-settings {
	min-height: var(--ddb-tap);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ddb-cream) !important;
	font: 400 0.95rem/1 var(--ddb-text);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: var(--ddb-gold);
	text-underline-offset: 0.25em;
}
@media (hover: hover) and (pointer: fine) {
	#cookies-eu-wrapper #cookies-eu-reject:hover,
	#cookies-eu-wrapper #cookies-eu-accept:hover { background: var(--ddb-gold); border-color: var(--ddb-gold); color: var(--ddb-base); }
	#cookies-eu-wrapper #cookies-eu-banner #cookies-eu-settings:hover { background: none; color: var(--ddb-gold) !important; }
}
#cookies-eu-wrapper #cookies-eu-reject:focus-visible,
#cookies-eu-wrapper #cookies-eu-accept:focus-visible { background: var(--ddb-gold); color: var(--ddb-base); }
/* "Privacidad" tab to change the choice later; above the phone dock. */
body #cookies-eu-banner-closed {
	inset: auto var(--ddb-gutter) calc(var(--wp--custom--dock-height) + 0.75rem + env(safe-area-inset-bottom)) auto;
	min-height: 0;
	min-width: var(--ddb-tap);
	padding: 0.95rem 0.9rem;
	background: var(--ddb-surface);
	border: var(--ddb-hair) var(--ddb-steel);
	color: var(--ddb-muted);
	font: 600 0.85rem/1 var(--ddb-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* The plugin swaps the word for a "↩" on phones; keep the word, it says what the tab is. */
body #cookies-eu-banner-closed span { display: inline; border: 0; }
body #cookies-eu-banner-closed::after { content: none; }
@media (min-width: 700px) {
	#cookies-eu-wrapper #cookies-eu-banner { grid-template-columns: 1fr auto; align-items: center; column-gap: 2rem; }
	#cookies-eu-wrapper #cookies-eu-buttons { grid-template-columns: auto 10rem 10rem; align-items: center; }
	#cookies-eu-wrapper #cookies-eu-buttons #cookies-eu-settings { grid-column: auto; order: 0; }
}
@media (min-width: 900px) {
	body #cookies-eu-banner-closed { bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}