/*
 * Layout principal — Layout C: sidebar izquierdo + contenido a la derecha.
 * Marca de la casa: el sidebar es la chrome del editor, la columna derecha el lienzo.
 */

.ayudawp-layout-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	min-height: 100dvh; /* dvh = dynamic viewport: respeta cambios de la barra de URL en iOS */
	gap: 0;
	/* Sin align-items: start — la columna del sidebar se estira a la altura
	   del main para que el fondo gris siga visible toda la página y el logo
	   sticky tenga rango completo donde pegarse. */
}

.ayudawp-sidebar-col {
	background: var(--wp--preset--color--row-alt);
	border-right: 2px solid var(--wp--preset--color--rule);
	padding: 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
	/* Antes: position: sticky; height: 100vh; overflow-y: auto;
	   Eliminado para que el sidebar siga el flujo del documento y todos
	   los widgets sean accesibles al hacer scroll en la página principal.
	   - min-width: 0 permite que la columna se contraiga dentro del grid
	     en lugar de que el contenido la empuje (default min-width: auto).
	   - overflow-x: clip oculta lo que se desborde horizontalmente (tabla
	     ancha, imagen, etc.) sin crear un nuevo contexto de scroll y SIN
	     romper el position:sticky del logo (overflow:hidden sí lo rompería). */
	min-width: 0;
	overflow-x: clip;
}

/* Tablas, imágenes e iframes dentro del sidebar respetan el ancho máximo
   de la columna. Las tablas con celdas muy anchas que aún se desborden,
   las recorta el overflow-x:clip del col. */
.ayudawp-sidebar-col img,
.ayudawp-sidebar-col iframe,
.ayudawp-sidebar-col video,
.ayudawp-sidebar-col table {
	max-width: 100%;
	height: auto;
}

/* IMPORTANTE: sin display:flex aquí — rompe el sticky del nav-sticky. */
.ayudawp-content-col {
	min-width: 0;
	max-width: 100%;
	/* Garantizar altura mínima para que el sticky del nav siempre tenga
	   rango donde pegarse. dvh (dynamic viewport height) reacciona a la
	   barra de URL de Safari/Chrome iOS — sin esto, el sticky se descuelga
	   al scrollear hacia abajo (la barra desaparece y el viewport cambia). */
	min-height: 100dvh;
}

.ayudawp-main {
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	padding: 2rem;
}

/* En single y page bajamos a 1200 para legibilidad y para que la imagen
   destacada de 1200 px no salga estirada. */
.single .ayudawp-main,
.page .ayudawp-main {
	max-width: 1200px;
}

/* Sticky del nav: WordPress envuelve cada template-part en un
   <div class="wp-block-template-part"> que solo es alto como su contenido.
   Aplicamos el sticky al WRAPPER (que pasa a estar dentro del flow de la
   columna larga), no al div interno. Diagnosticado en staging real. */
.ayudawp-content-col > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 100;
	/* will-change: transform pone el sticky en su propia capa de
	   composición. Reduce repaints al cambiar de modo y previene casos
	   raros donde el sticky "se olvida" tras un layout shift. */
	will-change: transform;
}

/* Admin bar: bajar el sticky para que no quede oculto bajo la barra de WP. */
body.admin-bar .ayudawp-content-col > .wp-block-template-part:first-child {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ayudawp-content-col > .wp-block-template-part:first-child {
		top: 46px;
	}
}

/* Sidebar interna — el wp-block-group con flex column de WP por defecto
   aplica align-items:flex-start; lo forzamos a stretch para que el logo y
   demás hijos ocupen todo el ancho disponible. */
.ayudawp-sidebar,
.ayudawp-sidebar.is-layout-flex {
	width: 100%;
	align-items: stretch;
}

.ayudawp-sidebar__logo {
	text-align: left;
	margin-bottom: 0.5rem;
	/* Logo sticky: queda pegado arriba mientras el resto del sidebar
	   (nav + widgets) scrollea con la página. Patrón Wikipedia / MDN. */
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	align-self: stretch;
	box-sizing: border-box;
	background: var(--wp--preset--color--row-alt);
	padding: 0.75rem 0;
	border-bottom: 2px solid var(--wp--preset--color--rule);
}

.ayudawp-sidebar__logo .ayudawp-logotype {
	font-size: clamp(28px, 4vw, 36px);
}

/* Admin bar: el logo sticky también baja para no quedar oculto bajo la barra de WP. */
body.admin-bar .ayudawp-sidebar__logo {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ayudawp-sidebar__logo {
		top: 46px;
	}
}

.ayudawp-sidebar__logo .wp-block-site-title {
	margin: 0.5rem 0 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.ayudawp-sidebar__nav .wp-block-navigation__container {
	flex-direction: column;
	gap: 0;
}

.ayudawp-sidebar__nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	padding: 6px 8px !important;
}

.ayudawp-sidebar__nav .wp-block-navigation-item__content::before {
	content: '❯ ';
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.ayudawp-sidebar__nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--paper);
}

.ayudawp-widgets {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.ayudawp-widget__titulo {
	font-size: 0.75rem !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted) !important;
	margin: 0 0 0.6rem !important;
	font-weight: 700;
}

.ayudawp-widget__lista {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ayudawp-widget__lista li {
	padding: 0.2rem 0;
	font-size: 0.9375rem;
}

.ayudawp-widget__lista a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	border-bottom: 0;
}

.ayudawp-widget__lista a:hover {
	color: var(--wp--preset--color--primary);
}

/* Nav sticky — el resto de los estilos (incluido bg sólido sin blur) viven
   en global.css. Aquí solo nos aseguramos de que el sticky funcione bien
   cuando hay sidebar (Layout C), neutralizando cualquier blur heredado. */
.ayudawp-nav-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Visibilidad por viewport — cada variante tiene su HTML óptimo. */
.ayudawp-nav-sticky--mobile {
	display: none !important;
}

@media (max-width: 1023px) {
	.ayudawp-nav-sticky--desktop {
		display: none !important;
	}
	.ayudawp-nav-sticky--mobile {
		display: flex !important;
	}
}

/* Variante MOBILE: padding ultra compacto, sin malgastar altura.
   margin: 0 !important para neutralizar cualquier blockGap heredado del
   theme.json o del wrapper externo wp-block-template-part. */
.ayudawp-nav-sticky--mobile {
	padding: 0.3rem 0.75rem !important;
	gap: 0.4rem;
	margin: 0 !important;
	min-height: 0;
	align-items: center;
}

.ayudawp-nav-sticky--mobile .ayudawp-nav-sticky__tools {
	gap: 0.4rem;
	margin: 0;
}

/* Lupa de búsqueda en móvil — botón cuadrado 36×36 con icono grande,
   visualmente coherente con el kebab y el toggle de tema. */
.ayudawp-nav-sticky--mobile .ayudawp-nav-sticky__buscar--icono {
	width: 36px;
	padding: 0;
	font-size: 1.3rem;
	line-height: 1;
}

/* Hamburguesa de la variante mobile — siempre visible en su contexto. */
.ayudawp-nav-sticky--mobile .ayudawp-nav-sticky__hamburguesa {
	display: inline-block;
}

/* Kebab en su contexto — también siempre visible en mobile. */
.ayudawp-nav-sticky--mobile .ayudawp-nav-sticky__kebab {
	display: inline-flex;
}

/* Menú principal de la variante mobile: oculto por defecto, se despliega
   como dropdown al pulsar el kebab (body.ayudawp-menu-abierto). */
.ayudawp-nav-sticky--mobile .wp-block-navigation {
	display: none;
}

body.ayudawp-menu-abierto .ayudawp-nav-sticky--mobile .wp-block-navigation {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	padding: 0.75rem 1rem;
	z-index: 99;
}

body.ayudawp-menu-abierto .ayudawp-nav-sticky--mobile .wp-block-navigation__container {
	flex-direction: column !important;
	align-items: flex-start;
	gap: 0;
}

body.ayudawp-menu-abierto .ayudawp-nav-sticky--mobile .wp-block-navigation-item {
	width: 100%;
}

body.ayudawp-menu-abierto .ayudawp-nav-sticky--mobile .wp-block-navigation-item__content {
	display: block;
	padding: 0.6rem 0.5rem;
	width: 100%;
	border-radius: 6px;
}

body.ayudawp-menu-abierto .ayudawp-nav-sticky--mobile .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

body.ayudawp-menu-abierto .ayudawp-nav-sticky--mobile .ayudawp-nav-sticky__kebab {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

.ayudawp-nav-sticky .wp-block-navigation {
	flex: 1;
}

/* Tools del nav-sticky (toggle tema + lupa juntos) */
.ayudawp-nav-sticky__tools {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
}

/* Botones de tools del nav-sticky — todos con la misma altura para que se vean uniformes. */
.ayudawp-nav-sticky .ayudawp-tema,
.ayudawp-nav-sticky__buscar {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 36px;
	padding: 0 0.75rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	box-sizing: border-box;
}

.ayudawp-nav-sticky .ayudawp-tema:hover,
.ayudawp-nav-sticky__buscar:hover {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

/* Toggle de tema en variante DESKTOP — con texto ("☀ Claro" / "☾ Oscuro" /
   "◐ Auto"), ancho variable, padding cómodo. */
.ayudawp-nav-sticky--desktop .ayudawp-tema--texto {
	padding: 0 0.75rem;
}

/* Toggle de tema en variante MOBILE — solo icono, cuadrado fijo igual que
   los demás botones (kebab, lupa). Ancho constante: no cambia al alternar. */
.ayudawp-nav-sticky--mobile .ayudawp-tema {
	width: 36px;
	padding: 0;
	font-size: 1.3rem;
	line-height: 1;
}

.ayudawp-nav-sticky__hamburguesa {
	display: none;
	background: transparent;
	border: 0;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--wp--preset--color--foreground);
	padding: 0.4rem 0.6rem;
}

/* Botón kebab del menú principal en móvil — oculto en desktop, visible
   en mobile breakpoint. Mismo tamaño/estilo que ⌘K y toggle tema. */
.ayudawp-nav-sticky__kebab {
	display: none;
	align-items: center;
	justify-content: center;
	height: 36px;
	width: 36px;
	padding: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.ayudawp-nav-sticky__kebab:hover {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

/* Footer — los estilos visuales viven en global.css (always-dark). Aquí solo
   reservamos el slot. */

/* Post meta */
.ayudawp-meta {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 1rem 0 2rem;
}

.ayudawp-meta__sep {
	margin: 0 !important;
	color: var(--wp--preset--color--border);
}

/* ──────────────────────────────────────────────────────────────────────
 * Cards en post-template grid (selector amplio que cubre is-layout-grid
 * y casos en los que WP no añade la clase auxiliar).
 * ──────────────────────────────────────────────────────────────────────*/

.wp-block-post-template {
	list-style: none !important;
	padding: 0 !important;
	margin: 2rem 0 !important;
	gap: 2rem !important;
}

.wp-block-post-template.is-layout-grid {
	display: grid !important;
}

.wp-block-post-template.columns-2,
.wp-block-post-template.is-layout-grid.columns-2 {
	grid-template-columns: repeat(2, 1fr) !important;
}

.wp-block-post-template.columns-3,
.wp-block-post-template.is-layout-grid.columns-3 {
	grid-template-columns: repeat(3, 1fr) !important;
}

.wp-block-post-template.columns-4,
.wp-block-post-template.is-layout-grid.columns-4 {
	grid-template-columns: repeat(4, 1fr) !important;
}

.wp-block-post-template > li {
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--rule);
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	transition: background 0.15s;
}

.wp-block-post-template > li:hover {
	background: var(--wp--preset--color--primary-soft);
}

.wp-block-post-template > li .wp-block-post-featured-image {
	margin: 0 !important;
}

.wp-block-post-template > li .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.wp-block-post-template > li .wp-block-post-title {
	margin: 1rem 1.25rem 0.25rem !important;
	line-height: 1.3;
}

.wp-block-post-template > li .wp-block-post-title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	border-bottom: 0;
}

.wp-block-post-template > li .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-post-template > li .wp-block-post-date {
	margin: 0 1.25rem 0.5rem !important;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.wp-block-post-template > li .wp-block-post-excerpt {
	flex: 1 !important;
	margin: 0 !important;
	padding: 0 1.25rem 1.25rem !important;
	display: flex !important;
	flex-direction: column !important;
}

.wp-block-post-template > li .wp-block-post-excerpt p,
.wp-block-post-template > li .wp-block-post-excerpt__excerpt {
	margin: 0 0 0.5rem !important;
}

.wp-block-post-template > li .wp-block-post-excerpt__more-text {
	margin: auto 0 0 !important;
	padding-top: 0.75rem;
}

.wp-block-post-template > li .wp-block-post-excerpt__more-link {
	display: inline-block;
	background: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	padding: 0 !important;
	text-decoration: none !important;
	border: 0 !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-weight: 600;
	font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Galerías — bloque core/gallery moderno y [gallery] del editor clásico.
 * ──────────────────────────────────────────────────────────────────────*/

/* core/gallery (bloque moderno) */
.wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
	margin: 0;
}

.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image { flex-basis: calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image { flex-basis: calc(33.33% - 0.67rem); max-width: calc(33.33% - 0.67rem); }
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image { flex-basis: calc(25% - 0.75rem); max-width: calc(25% - 0.75rem); }
.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image { flex-basis: calc(20% - 0.8rem); max-width: calc(20% - 0.8rem); }

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* [gallery] shortcode del editor clásico */
.gallery {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	margin: 1.5rem 0 !important;
	clear: both;
}

.gallery::before,
.gallery::after {
	display: none !important;
}

.gallery-item {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	max-width: none;
}

.gallery-columns-2 .gallery-item { flex-basis: calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
.gallery-columns-3 .gallery-item { flex-basis: calc(33.33% - 0.67rem); max-width: calc(33.33% - 0.67rem); }
.gallery-columns-4 .gallery-item { flex-basis: calc(25% - 0.75rem); max-width: calc(25% - 0.75rem); }
.gallery-columns-5 .gallery-item { flex-basis: calc(20% - 0.8rem); max-width: calc(20% - 0.8rem); }
.gallery-columns-6 .gallery-item { flex-basis: calc(16.66% - 0.84rem); max-width: calc(16.66% - 0.84rem); }
.gallery-columns-7 .gallery-item { flex-basis: calc(14.28% - 0.86rem); max-width: calc(14.28% - 0.86rem); }
.gallery-columns-8 .gallery-item { flex-basis: calc(12.5% - 0.875rem); max-width: calc(12.5% - 0.875rem); }
.gallery-columns-9 .gallery-item { flex-basis: calc(11.11% - 0.89rem); max-width: calc(11.11% - 0.89rem); }

.gallery-icon {
	margin: 0 !important;
}

.gallery-item img,
.gallery-icon img {
	width: 100% !important;
	height: auto !important;
	display: block;
	border: 0 !important;
}

.gallery-caption {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.25rem;
}

/* ──────────────────────────────────────────────────────────────────────
 * Author card (archive de autor — EEAT)
 * ──────────────────────────────────────────────────────────────────────*/

.ayudawp-author-card {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin: 1rem 0 2.5rem;
	padding: 2rem;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--rule);
}

.ayudawp-author-card__avatar img {
	border-radius: 0 !important;
	display: block;
	width: 96px;
	height: 96px;
}

.ayudawp-author-card__name {
	margin: 0 0 0.75rem !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem !important;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1;
}

.ayudawp-author-card__name::before {
	content: '@';
	color: var(--wp--preset--color--primary);
}

.ayudawp-author-card__bio {
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.ayudawp-author-card__bio p {
	margin: 0 0 0.75rem;
}

.ayudawp-author-card__bio p:last-child {
	margin-bottom: 0;
}

/* Author box (final del single) — los estilos viven en global.css. */

/* Imagen destacada en single y page: tamaño natural, centrada, sin recorte.
   Si la imagen es más pequeña que el contenedor, queda centrada con margen
   a los lados (no se estira ni se pixela). En listados las cards siguen
   con aspect-ratio uniforme — esto solo aplica a vistas de single. */
body.single .wp-block-post-featured-image,
body.page .wp-block-post-featured-image {
	text-align: center;
	margin: 0 auto 2rem;
}

body.single .wp-block-post-featured-image img,
body.page .wp-block-post-featured-image img {
	max-width: 100%;
	width: auto;
	height: auto;
	display: inline-block;
	margin: 0 auto;
}

/* Submenús del bloque core/navigation — fondo coherente con cards y sidebar. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--rule) !important;
	padding: 0.5rem !important;
	box-shadow: 4px 4px 0 var(--wp--preset--color--ink);
	min-width: 220px;
}

[data-theme="dark"] .wp-block-navigation .wp-block-navigation__submenu-container {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item {
	margin: 0;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.4rem 0.75rem !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--primary-soft) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* Submenús anidados: misma capa para mantener consistencia */
.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-left: 0.25rem;
}

/* Posts relacionados */
.ayudawp-relacionados {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 2px solid var(--wp--preset--color--rule);
}

/* Margen del título "Puede que también te ayude…" — ahora es un párrafo
   con clase .ayudawp-relacionados__titulo (sin peso heading SEO).
   El estilo base (font-size, weight, color) lo da global.css. */
.ayudawp-relacionados__titulo {
	margin-bottom: 1.5rem !important;
}

.ayudawp-relacionados__lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.ayudawp-relacionado {
	margin: 0;
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--rule);
	overflow: hidden;
	transition: background 0.15s;
}

.ayudawp-relacionado:hover {
	background: var(--wp--preset--color--primary-soft);
}

.ayudawp-relacionado__link {
	display: block;
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}

.ayudawp-relacionado__img img {
	width: 100%;
	height: auto;
	display: block;
}

.ayudawp-relacionado__titulo {
	margin: 1rem 1.25rem 0.4rem !important;
	font-size: 1.125rem !important;
	line-height: 1.3;
}

.ayudawp-relacionado__fecha {
	display: block;
	margin: 0 1.25rem 1.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/* Primer post del grid 3 cols ocupa 2 columnas — destaca el más reciente sin
 * romper el flujo del grid (estaba como dos queries y la imagen quedaba forzada).
 */
.wp-block-post-template.is-layout-grid.columns-3 > li:first-child {
	grid-column: span 2;
}

.wp-block-post-template.is-layout-grid.columns-3 > li:first-child .wp-block-post-title {
	line-height: 1.25;
}

/* Chrome del sitio en monospace — sidebar, nav sticky, footer, metadatos,
   author box, TOC y zona de comentarios. Distingue visualmente las "piezas
   del sitio" del contenido editorial. */
.ayudawp-sidebar-col,
.ayudawp-nav-sticky,
.ayudawp-footer,
.ayudawp-meta,
.wp-block-post-template > li .wp-block-post-date,
.ayudawp-relacionado__fecha,
.ayudawp-author-box,
.ayudawp-author-card,
.ayudawp-toc,
.wp-block-comments,
.wp-block-post-comments,
.wp-block-post-comments-form,
.comments-area,
#comments,
.comment-respond,
.comment-meta,
.comment-author,
.comment-metadata {
	font-family: monospace;
}

/* Excepciones: solo lo editorial puro se queda en sans. */
.wp-block-post-template > li .wp-block-post-title,
.wp-block-post-template > li .wp-block-post-excerpt,
.ayudawp-sidebar__logo .wp-block-site-title,
.ayudawp-sidebar__widgets .wp-block-button {
	font-family: var(--wp--preset--font-family--sans);
}

/* Tamaños uniformes en el chrome. El menú principal del sidebar y la nav
   sticky salían a 1.25rem (20 px) por defecto y los widgets a 0.9375rem
   (15 px). Unificamos a 1rem (16 px). */
.ayudawp-sidebar-col,
.ayudawp-sidebar-col .wp-block-navigation-item__content,
.ayudawp-widget__lista li,
.ayudawp-widget__lista a,
.ayudawp-nav-sticky .wp-block-navigation-item__content,
.ayudawp-footer,
.ayudawp-footer__creditos,
.ayudawp-meta {
	font-size: 1rem !important;
}

/* Logo del sitio un pelín mayor para que destaque */
.ayudawp-sidebar__logo .wp-block-site-title {
	font-size: 1.125rem !important;
}

/* Título de widget como label sutil */
.ayudawp-widget__titulo {
	font-size: 0.875rem !important;
}

/* Logo dual claro/oscuro (shortcode [ayudawp_logo light=... dark=...]) */
.ayudawp-logo {
	display: inline-block;
	border-bottom: 0;
}

.ayudawp-logo img {
	max-width: 100%;
	height: auto;
	display: block;
}

:root[data-theme="light"] .ayudawp-logo--dark,
:root:not([data-theme="dark"]) .ayudawp-logo--dark {
	display: none;
}

:root[data-theme="dark"] .ayudawp-logo--light {
	display: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * Responsive: drawer en tablet/móvil
 * ──────────────────────────────────────────────────────────────────────*/

@media (max-width: 1023px) {
	.ayudawp-layout-grid {
		grid-template-columns: 1fr;
	}

	.wp-block-post-template.is-layout-grid.columns-3 > li:first-child {
		grid-column: span 1;
	}

	.ayudawp-relacionados__lista {
		grid-template-columns: 1fr;
	}

	.ayudawp-sidebar-col {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
		width: 280px;
		max-width: 80vw;
		height: 100dvh;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
		/* Drawer scrolleable: si los widgets exceden la altura del viewport,
		   el usuario puede hacer scroll dentro del propio drawer.
		   overscroll-behavior: contain evita que el scroll "se escape" al
		   body cuando llegas al final/inicio del drawer. */
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	body.ayudawp-drawer-abierto .ayudawp-sidebar-col {
		transform: translateX(0);
	}

	body.ayudawp-drawer-abierto::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 150;
	}

	/* Reset agresivo del aire vertical superior en móvil. WP genera una
	   cadena de wrappers (.wp-site-blocks > .ayudawp-layout-grid > columna >
	   template-part > nav-sticky) y cualquiera puede heredar margin-block-start
	   o blockGap del theme.json (1.5rem). Forzamos 0 en TODOS para que el
	   nav-sticky pegue al borde del viewport (o a la admin bar si la hay). */
	.wp-site-blocks,
	.wp-site-blocks > *:first-child,
	.ayudawp-layout-grid,
	.ayudawp-content-col,
	.ayudawp-content-col > .wp-block-template-part:first-child,
	.ayudawp-content-col > .wp-block-template-part:first-child > * {
		padding-top: 0 !important;
		margin-top: 0 !important;
		margin-block-start: 0 !important;
	}

	/* Y nos aseguramos de que el nav-sticky--mobile mantenga su padding
	   interno (la regla anterior podría haberlo neutralizado). */
	.ayudawp-nav-sticky--mobile {
		padding: 0.3rem 0.75rem !important;
	}

	.ayudawp-main {
		padding: 1rem;
	}

	.wp-block-post-template.columns-3,
	.wp-block-post-template.is-layout-grid.columns-3,
	.wp-block-post-template.columns-4,
	.wp-block-post-template.is-layout-grid.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.ayudawp-author-card,
	.ayudawp-author-box .wp-block-post-author {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image,
	.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image,
	.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image,
	.gallery-columns-3 .gallery-item,
	.gallery-columns-4 .gallery-item,
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item,
	.gallery-columns-7 .gallery-item,
	.gallery-columns-8 .gallery-item,
	.gallery-columns-9 .gallery-item {
		flex-basis: calc(50% - 0.5rem) !important;
		max-width: calc(50% - 0.5rem) !important;
	}
}

@media (max-width: 600px) {
	.wp-block-post-template.columns-2,
	.wp-block-post-template.is-layout-grid.columns-2,
	.wp-block-post-template.columns-3,
	.wp-block-post-template.is-layout-grid.columns-3,
	.wp-block-post-template.columns-4,
	.wp-block-post-template.is-layout-grid.columns-4 {
		grid-template-columns: 1fr !important;
	}

	.gallery-columns-2 .gallery-item,
	.gallery-columns-3 .gallery-item,
	.gallery-columns-4 .gallery-item,
	.gallery-columns-5 .gallery-item,
	.gallery-columns-6 .gallery-item,
	.gallery-columns-7 .gallery-item,
	.gallery-columns-8 .gallery-item,
	.gallery-columns-9 .gallery-item {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}