/*
Theme Name: Taqué-Taqué
Theme URI: https://taquetaque.com/
Author: Ana Reboredo
Description: Tema acogedor para inspiranDIYme, inspirado en el Yoko de siempre: azules, letra manuscrita y banners que se cambian cuando apetece. Portada tipo revista, barra lateral, se ve bien en móvil, tableta y ordenador, y las letras van dentro del tema (no se piden a Google).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taquetaque
Tags: blog, two-columns, right-sidebar, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ------------------------------------------------------------------
   1. Letras (incluidas en el tema, licencia SIL OFL)
------------------------------------------------------------------- */
@font-face { font-family: "Love Ya Like A Sister"; src: url("assets/fonts/love-ya-like-a-sister-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Architects Daughter"; src: url("assets/fonts/architects-daughter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neucha"; src: url("assets/fonts/neucha-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("assets/fonts/nunito-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------
   2. Colores y medidas
------------------------------------------------------------------- */
:root {
	--blue: #009bc2;          /* el azul de Yoko: títulos y adornos */
	--blue-ink: #00728f;      /* versión más oscura para enlaces en texto (se lee mejor) */
	--blue-soft: #d9f0f7;
	--blue-mist: #eef6f9;
	--pink: #f49ac1;
	--pink-soft: #fde6ef;
	--yellow: #ffd66b;
	--yellow-soft: #fff4d1;
	--green: #8fd1a8;
	--ink: #2d3a40;
	--ink-soft: #5b6b72;
	--paper: #ffffff;
	--line: #cfe8f0;

	--font-title: "Love Ya Like A Sister", "Comic Sans MS", cursive;
	--font-hand: "Architects Daughter", "Comic Sans MS", cursive;
	--font-label: "Neucha", "Architects Daughter", cursive;
	--font-text: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

	--radius: 18px;
	--radius-sm: 12px;
	--shadow: 0 2px 0 rgba(0, 114, 143, .06), 0 10px 30px -12px rgba(0, 80, 110, .22);
	--shadow-hover: 0 4px 0 rgba(0, 114, 143, .08), 0 18px 40px -14px rgba(0, 80, 110, .32);
	--gap: clamp(16px, 3vw, 32px);
	--page: 1180px;
}

/* ------------------------------------------------------------------
   3. Base
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-text);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
	background-color: var(--blue-mist);
	/* papel con lunarcitos */
	background-image: radial-gradient(rgba(0, 155, 194, .13) 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	overflow-x: hidden;
}

img, video, iframe, embed, object, svg { max-width: 100%; }
img { height: auto; border-style: none; }

/* Las entradas antiguas traen anchos fijos (width="650" style="width:650px"): que se adapten. */
.entry-content img,
.entry-content [style*="width"] img { max-width: 100% !important; height: auto !important; }
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video { max-width: 100% !important; }
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="vimeo"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.entry-content [style*="width:"]:not(img):not(iframe),
.entry-content [style*="width: "]:not(img):not(iframe) { max-width: 100% !important; }
.entry-content .wp-caption { max-width: 100% !important; }

a { color: var(--blue-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }

:focus-visible { outline: 3px dashed var(--pink); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-title);
	font-weight: 400;
	line-height: 1.25;
	color: var(--blue);
	margin: 1.6em 0 .6em;
	letter-spacing: .01em;
}

p, ul, ol, dl, blockquote, figure, table, pre { margin: 0 0 1.2em; }

hr {
	border: 0;
	height: 14px;
	margin: 2.4em auto;
	max-width: 240px;
	background: radial-gradient(circle, var(--pink) 3px, transparent 3.5px) center / 28px 14px repeat-x;
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	left: 12px; top: 12px; z-index: 100000;
	background: var(--paper); color: var(--blue-ink); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow);
}

/* ------------------------------------------------------------------
   4. Banderines y contenedor
------------------------------------------------------------------- */
.bunting {
	height: 34px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='34' viewBox='0 0 176 34'%3E%3Cpath d='M0 4 Q44 10 88 4 T176 4' fill='none' stroke='%237fb6c6' stroke-width='1.5'/%3E%3Cpath d='M6 5.5 L38 6.8 L22 30Z' fill='%23009bc2'/%3E%3Cpath d='M50 7.5 L82 5.2 L66 30Z' fill='%23f49ac1'/%3E%3Cpath d='M94 5.2 L126 7.5 L110 30Z' fill='%23ffd66b'/%3E%3Cpath d='M138 6.8 L170 5.5 L154 30Z' fill='%238fd1a8'/%3E%3C/svg%3E") left top / 176px 34px repeat-x;
}

.site {
	max-width: var(--page);
	margin: 0 auto 40px;
	padding: 0 var(--gap);
}

/* ------------------------------------------------------------------
   5. Cabecera
------------------------------------------------------------------- */
.site-header { padding-top: 8px; }

.branding {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 6px 0 10px;
}
.site-titles { flex: 1; min-width: 0; }
.site-logo img { max-height: 90px; width: auto; }
.site-title {
	font-family: var(--font-title);
	font-size: clamp(2rem, 6vw, 3.4rem);
	line-height: 1.05;
	margin: 0;
	transform: rotate(-1.2deg);
	transform-origin: left center;
}
.site-title a { color: var(--blue); text-decoration: none; }
.site-title a:hover { color: var(--blue-ink); }
.site-description {
	font-family: var(--font-hand);
	color: var(--ink-soft);
	margin: 4px 0 0;
	font-size: clamp(.95rem, 2.4vw, 1.15rem);
}
/* Con banner, el título ya va dibujado en la imagen: se oculta a la vista
   pero se mantiene para buscadores y lectores de pantalla. */
.has-header-image .branding { justify-content: flex-end; }
.has-header-image .site-titles {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

.has-header-image .branding { padding: 0; }
.main-nav { padding-right: 62px !important; }
.search-toggle {
	position: absolute; right: 12px; top: 50%; margin-top: -22px; z-index: 3;
	display: inline-grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 2px dashed var(--line);
	background: var(--paper);
	color: var(--blue-ink);
	cursor: pointer;
	transition: transform .2s ease, border-color .2s ease;
}
.search-toggle:hover { transform: rotate(-8deg); border-color: var(--blue); }
.search-toggle[aria-expanded="true"] { border-style: solid; border-color: var(--blue); }

.header-search { padding: 14px 0 0; }
.header-search .search-form { max-width: 560px; margin-left: auto; }

/* Banner: el de siempre, con esquinas suaves y «cinta washi» */
.header-banner {
	position: relative;
	margin: 14px 0 0;
	border-radius: var(--radius);
	background: var(--paper);
	padding: 8px;
	box-shadow: var(--shadow);
}
.header-banner::before,
.header-banner::after {
	content: "";
	position: absolute;
	top: -12px;
	width: 110px; height: 28px;
	background: repeating-linear-gradient(45deg, rgba(244, 154, 193, .75) 0 8px, rgba(253, 230, 239, .75) 8px 16px);
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	z-index: 2;
}
.header-banner::before { left: 24px; transform: rotate(-5deg); }
.header-banner::after { right: 24px; transform: rotate(4deg); background: repeating-linear-gradient(-45deg, rgba(255, 214, 107, .8) 0 8px, rgba(255, 244, 209, .8) 8px 16px); }
.header-banner a { display: block; }
.header-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius) - 6px);
}

/* Menú */
.main-nav {
	position: relative;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 4px 10px;
}
.main-nav::after { /* puntada */
	content: "";
	position: absolute; inset: 5px;
	border: 1.5px dashed var(--line);
	border-radius: calc(var(--radius) - 5px);
	pointer-events: none;
}
.main-nav .menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 2px 6px;
}
.main-nav li { position: relative; }
.main-nav a {
	display: block;
	padding: 12px 14px;
	font-family: var(--font-hand);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--blue);
	text-decoration: none;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a { color: var(--blue-ink); background: var(--blue-soft); }

.main-nav .sub-menu,
.main-nav .children {
	list-style: none; margin: 0; padding: 8px;
	position: absolute; left: 0; top: 100%;
	min-width: 230px;
	background: var(--paper);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-hover);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 20;
}
.main-nav .sub-menu .sub-menu { left: 100%; top: 0; }
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu,
.main-nav li.is-open > .sub-menu,
.main-nav li:hover > .children,
.main-nav li:focus-within > .children,
.main-nav li.is-open > .children { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { text-transform: none; font-size: 1rem; padding: 8px 12px; }

.submenu-toggle {
	display: none;
	background: none; border: 0; color: var(--blue-ink);
	width: 44px; height: 44px; cursor: pointer;
}
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.menu-toggle {
	display: none;
	align-items: center; gap: 10px;
	background: none; border: 0;
	font-family: var(--font-hand); font-size: 1.15rem; color: var(--blue);
	padding: 10px 8px; cursor: pointer; width: 100%;
	position: relative; z-index: 1;
}
.burger { display: inline-grid; gap: 5px; width: 24px; }
.burger span { display: block; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------------------------------------------------
   6. Estructura con barra lateral
------------------------------------------------------------------- */
.site-content { padding-top: var(--gap); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.has-sidebar .layout:not(.layout--wide) { grid-template-columns: minmax(0, 1fr) 320px; }
.content-area { min-width: 0; }

/* Títulos de sección con subrayado de rotulador */
.section-title {
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	margin: 1.4em 0 .8em;
	color: var(--blue);
}
.section-title span {
	background: linear-gradient(transparent 62%, var(--yellow-soft) 62%, var(--yellow-soft) 92%, transparent 92%);
	padding: 0 .15em;
}
.home-magazine > .section-title:first-child,
.home-magazine > .card:first-child + .section-title { margin-top: 0; }

/* ------------------------------------------------------------------
   7. Tarjetas
------------------------------------------------------------------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: var(--gap);
}
.card-grid--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

.card {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-hover); }
.card:nth-child(even):hover { transform: translateY(-4px) rotate(.4deg); }

.card-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--blue-soft);
	overflow: hidden;
}
.card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.card:hover .card-media img { transform: scale(1.04); }
.card-media--empty {
	display: grid; place-items: center;
	background:
		radial-gradient(rgba(255,255,255,.7) 2px, transparent 2.5px) 0 0 / 18px 18px,
		linear-gradient(135deg, var(--blue-soft), var(--pink-soft));
}
.card-placeholder { font-family: var(--font-title); font-size: 4rem; color: var(--blue); opacity: .55; }

.card-body {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 18px 20px 20px;
	flex: 1;
}
.card-body::before { /* puntada interior */
	content: ""; position: absolute; inset: 8px;
	border: 1.5px dashed var(--line); border-top: 0;
	border-radius: 0 0 calc(var(--radius) - 8px) calc(var(--radius) - 8px);
	pointer-events: none;
}
.card-title {
	font-size: 1.32rem;
	margin: 10px 0 8px;
	line-height: 1.3;
}
.card-title a { color: var(--blue); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toda la tarjeta es clicable */
.card-title a:hover { color: var(--blue-ink); }
.card-excerpt { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
.card-excerpt p { margin: 0 0 12px; }
.card-meta { margin: auto 0 0; font-size: .85rem; color: var(--ink-soft); }
.meta-sep { margin: 0 .45em; color: var(--pink); }
.chip, .card .button { position: relative; z-index: 2; }

.chip {
	display: inline-block;
	font-family: var(--font-label);
	font-size: .95rem;
	line-height: 1.2;
	padding: 4px 12px 5px;
	border-radius: 999px;
	background: var(--pink-soft);
	color: #a33b6b;
	text-decoration: none;
	transition: background .2s ease;
}
.chip:hover { background: var(--pink); color: #fff; }
.chip--big { font-size: 1.08rem; padding: 7px 16px 8px; background: var(--paper); color: var(--blue-ink); box-shadow: var(--shadow); }
.chip--big:hover { background: var(--blue); color: #fff; }
.corner-list li:nth-child(3n+2) .chip--big:hover { background: var(--pink); }
.corner-list li:nth-child(3n) .chip--big:hover { background: #e3a400; }

/* Destacada */
.card--featured { margin-bottom: 8px; }
.card--featured .card-media { aspect-ratio: 16 / 9; }
.card--featured .card-title { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.card--featured .card-excerpt { font-size: 1.05rem; }
.card-kicker { font-family: var(--font-hand); color: var(--ink-soft); margin: 10px 0 0; font-size: 1rem; }
.card--featured .card-meta { margin: 0 0 16px; }
@media (min-width: 760px) {
	.card--featured { display: grid; grid-template-columns: 1.25fr 1fr; }
	.card--featured .card-media { aspect-ratio: auto; height: 100%; min-height: 360px; }
	.card--featured .card-body { padding: 30px 30px 28px; justify-content: center; }
	.card--featured .card-body::before { border-top: 1.5px dashed var(--line); border-left: 0; border-radius: 0 calc(var(--radius) - 8px) calc(var(--radius) - 8px) 0; }
}

/* Rincones y baúl */
.corner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trunk {
	margin-top: calc(var(--gap) * 1.6);
	padding: clamp(18px, 3vw, 30px);
	border-radius: var(--radius);
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, transparent 2px 26px),
		var(--yellow-soft);
}
.trunk .section-title { margin-top: 0; }
.trunk .section-title span { background: linear-gradient(transparent 62%, #fff 62%, #fff 92%, transparent 92%); }
.trunk-intro { font-family: var(--font-hand); color: var(--ink-soft); margin-top: -8px; }

/* Botones */
.button,
button.button,
input[type="submit"],
.search-submit,
.wpcf7-submit {
	display: inline-flex; align-items: center; gap: .4em;
	font-family: var(--font-hand);
	font-size: 1.05rem;
	line-height: 1.2;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 3px 0 var(--blue-ink);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover,
input[type="submit"]:hover,
.search-submit:hover,
.wpcf7-submit:hover { color: #fff; background: var(--blue-ink); transform: translateY(-1px); }
.button:active,
input[type="submit"]:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blue-ink); }

/* Paginación */
.pagination { margin: calc(var(--gap) * 1.2) 0 0; }
.pagination .nav-links,
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	border-radius: 999px;
	background: var(--paper);
	box-shadow: var(--shadow);
	text-decoration: none;
	font-weight: 700;
	color: var(--blue-ink);
}
.pagination .page-numbers.current { background: var(--blue); color: #fff; }
.pagination .page-numbers.dots { background: none; box-shadow: none; }
.pagination a.page-numbers:hover { background: var(--blue-soft); }

/* ------------------------------------------------------------------
   8. Entrada y página
------------------------------------------------------------------- */
.entry {
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(20px, 4.5vw, 52px);
	position: relative;
}
.entry::before {
	content: ""; position: absolute; inset: 10px;
	border: 1.5px dashed var(--line);
	border-radius: calc(var(--radius) - 8px);
	pointer-events: none;
}
.entry-header { text-align: center; margin-bottom: 1.6em; position: relative; }
.entry-title {
	font-size: clamp(1.9rem, 5vw, 2.9rem);
	margin: .35em 0 .3em;
}
.entry-meta { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.entry-meta a { color: inherit; }
.entry-thumb { margin: 0 0 1.8em; }
.entry-thumb img { border-radius: var(--radius-sm); display: block; width: 100%; }

.entry-content {
	max-width: 720px;
	margin: 0 auto;
	font-size: 1.1rem;
	position: relative;
	overflow-wrap: break-word;
}
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { font-size: 1.85rem; }
.entry-content h3 { font-size: 1.5rem; }
.entry-content h4 { font-size: 1.25rem; }
.entry-content h5, .entry-content h6 { font-family: var(--font-label); font-size: 1.15rem; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content img.wp-smiley,
.entry-content img.emoji { border-radius: 0; display: inline; width: 1em !important; height: 1em !important; vertical-align: -0.1em; }
.entry-content ul li::marker { color: var(--pink); }
.entry-content ol li::marker { color: var(--blue); font-weight: 700; }
.entry-content li { margin-bottom: .35em; }

.entry-content blockquote {
	position: relative;
	margin: 1.8em 0;
	padding: 22px 24px 18px 64px;
	background: var(--blue-mist);
	border-radius: var(--radius-sm);
	font-family: var(--font-hand);
	font-size: 1.2rem;
	color: var(--ink);
}
.entry-content blockquote::before {
	content: "“";
	position: absolute; left: 16px; top: -4px;
	font-family: var(--font-title); font-size: 4.2rem; line-height: 1; color: var(--pink);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; font-size: .95rem; color: var(--ink-soft); margin-top: .5em; font-style: normal; }

.entry-content pre, .entry-content code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: var(--blue-mist); border-radius: 6px; }
.entry-content code { padding: .1em .35em; }
.entry-content pre { padding: 16px; overflow-x: auto; }

.entry-content table { border-collapse: collapse; width: 100%; font-size: .98rem; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.entry-content th { background: var(--blue-soft); font-weight: 700; }

/* Alineaciones y pies de foto (editor clásico) */
.alignleft { float: left; margin: .3em 1.6em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.6em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignnone { margin: .3em 0 1em; }
.entry-content::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin: 1em auto; display: block; }
}
.wp-caption { max-width: 100%; margin-bottom: 1.4em; }
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption-text,
.wp-element-caption,
figcaption {
	font-family: var(--font-hand);
	font-size: .98rem;
	color: var(--ink-soft);
	text-align: center;
	margin-top: .5em;
}

/* Galerías clásicas [gallery] */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); margin-bottom: 1.4em; }
.gallery-columns-1 { --cols: 1; } .gallery-columns-2 { --cols: 2; } .gallery-columns-3 { --cols: 3; }
.gallery-columns-4 { --cols: 4; } .gallery-columns-5 { --cols: 5; } .gallery-columns-6 { --cols: 6; }
.gallery-columns-7 { --cols: 7; } .gallery-columns-8 { --cols: 8; } .gallery-columns-9 { --cols: 9; }
@media (max-width: 600px) { .gallery { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
.gallery-item { margin: 0; }
.gallery-icon img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.gallery br { display: none; }
.gallery-caption { font-size: .85rem; }

/* Bloques (por si alguna entrada nueva se escribe con bloques) */
.wp-block-image img { border-radius: var(--radius-sm); }
.wp-block-button__link { font-family: var(--font-hand); border-radius: 999px; background: var(--blue); }
.wp-block-separator { border: 0; }
.alignwide { margin-left: calc(-1 * clamp(0px, 3vw, 40px)); margin-right: calc(-1 * clamp(0px, 3vw, 40px)); }

/* Etiquetas y pie de entrada */
.entry-footer { max-width: 720px; margin: 2.2em auto 0; position: relative; }
.tags-label { font-family: var(--font-label); font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 .5em; }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a {
	display: inline-block; padding: 3px 12px; border-radius: 6px;
	background: var(--yellow-soft); color: #7a5a00; text-decoration: none; font-size: .9rem;
	transform: rotate(-1deg);
}
.tag-list li:nth-child(even) a { transform: rotate(1deg); background: var(--blue-soft); color: var(--blue-ink); }
.tag-list a:hover { background: var(--yellow); }

/* Relacionadas (plugin Related Posts Thumbnails) */
.relpost-thumb-wrapper, .relpost_content { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
.relpost-block-single { border-radius: var(--radius-sm) !important; overflow: hidden; }

/* Anterior / siguiente */
.post-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap); margin: var(--gap) 0; }
.post-nav-link {
	display: block; padding: 18px 22px;
	background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
	text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.post-nav-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.post-nav-next { text-align: right; }
.post-nav-label { display: block; font-family: var(--font-hand); color: var(--ink-soft); font-size: .95rem; }
.post-nav-title { display: block; font-family: var(--font-title); color: var(--blue); font-size: 1.2rem; line-height: 1.3; margin-top: 4px; }

/* Cabecera de archivos */
.archive-header {
	text-align: center;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(20px, 4vw, 36px);
	margin-bottom: var(--gap);
}
.archive-kicker { font-family: var(--font-hand); color: var(--ink-soft); margin: 0; }
.archive-title { margin: .1em 0 .2em; font-size: clamp(1.9rem, 5vw, 2.7rem); }
.archive-description { color: var(--ink-soft); max-width: 640px; margin: 0 auto; }
.archive-header .search-form { max-width: 520px; margin: 16px auto 0; }

.empty-state { text-align: center; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(28px, 6vw, 64px) 20px; }
.empty-state .search-form { max-width: 480px; margin: 0 auto 1.4em; }
.empty-emoji { font-size: 3rem; color: var(--pink); margin: 0; }
.big-404 { font-family: var(--font-title); font-size: clamp(5rem, 18vw, 9rem); line-height: 1; margin: 0; color: var(--blue-soft); -webkit-text-stroke: 2px var(--blue); }

/* ------------------------------------------------------------------
   9. Comentarios
------------------------------------------------------------------- */
.comments {
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(20px, 4vw, 44px);
}
.comments > .section-title:first-child { margin-top: 0; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin-left: clamp(14px, 5vw, 56px); }
.comment-body { display: flex; gap: 14px; margin-bottom: 18px; }
.comment-avatar img { border-radius: 50%; border: 3px solid var(--blue-soft); display: block; }
.comment-bubble {
	position: relative; flex: 1; min-width: 0;
	background: var(--blue-mist);
	border-radius: 4px var(--radius) var(--radius) var(--radius);
	padding: 12px 18px 10px;
}
.bypostauthor > .comment-body .comment-bubble { background: var(--pink-soft); }
.bypostauthor > .comment-body .comment-author::after { content: " ♥"; color: var(--pink); }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 4px; }
.comment-author { font-weight: 700; color: var(--ink); }
.comment-author a { color: inherit; }
.comment-date { font-size: .82rem; color: var(--ink-soft); text-decoration: none; }
.comment-content { font-size: 1rem; overflow-wrap: anywhere; }
.comment-content p { margin-bottom: .6em; }
.comment-actions { font-size: .88rem; }
.comment-actions a { font-family: var(--font-hand); text-decoration: none; }
.comment-awaiting { font-style: italic; color: var(--ink-soft); }
.pingback .comment-body, .trackback .comment-body { font-size: .9rem; }

/* Formularios */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], input[type="tel"], input[type="number"], textarea, select {
	width: 100%;
	font: inherit; font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
textarea { min-height: 150px; resize: vertical; }
.comment-form label { display: block; font-family: var(--font-hand); color: var(--ink-soft); margin-bottom: 4px; }
.comment-form .comment-form-cookies-consent label { display: inline; }
.comment-form p { margin-bottom: 14px; }
.comment-notes, .logged-in-as { font-size: .92rem; color: var(--ink-soft); }

.search-form { display: flex; gap: 8px; }
.search-form .search-field { flex: 1; min-width: 0; border-radius: 999px; padding-left: 18px; }
.search-form .search-submit { flex: none; }

/* ------------------------------------------------------------------
   10. Barra lateral y widgets
------------------------------------------------------------------- */
.sidebar { min-width: 0; }
.sidebar .widget {
	position: relative;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 30px 22px 22px;
	margin: 0 0 var(--gap);
	font-size: .98rem;
}
.sidebar .widget:nth-child(3n+1) { --tape: rgba(0, 155, 194, .35); --tape-rot: -3deg; }
.sidebar .widget:nth-child(3n+2) { --tape: rgba(244, 154, 193, .55); --tape-rot: 2deg; }
.sidebar .widget:nth-child(3n) { --tape: rgba(255, 214, 107, .7); --tape-rot: -1.5deg; }
.sidebar .widget::before { /* cinta washi */
	content: "";
	position: absolute; top: -11px; left: 50%;
	width: 120px; height: 24px; margin-left: -60px;
	background: var(--tape, rgba(0, 155, 194, .35));
	transform: rotate(var(--tape-rot, -2deg));
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.widget-title,
.widget .wp-block-heading {
	font-family: var(--font-label);
	font-size: 1.45rem;
	color: var(--blue);
	text-align: center;
	margin: 0 0 .7em;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 7px 0; border-bottom: 1.5px dashed var(--line); }
.widget li:last-child { border-bottom: 0; }
.widget li a { text-decoration: none; }
.widget li a:hover { text-decoration: underline; }
.widget select { margin-top: 4px; }
.widget img { border-radius: var(--radius-sm); }
.widget_tag_cloud a, .wp-block-tag-cloud a {
	display: inline-block; margin: 0 4px 6px 0; padding: 2px 10px;
	border-radius: 999px; background: var(--blue-mist); text-decoration: none;
	font-size: .92rem !important;
}
.widget_tag_cloud a:hover, .wp-block-tag-cloud a:hover { background: var(--blue); color: #fff; }
.widget .search-form { flex-direction: column; }
.widget .search-form .search-submit { justify-content: center; }
.widget_text p:last-child, .widget_block p:last-child { margin-bottom: 0; }
.widget_calendar table { width: 100%; text-align: center; }
.widget_calendar caption { font-family: var(--font-label); color: var(--blue); }

/* ------------------------------------------------------------------
   11. Pie
------------------------------------------------------------------- */
.site-footer {
	margin-top: calc(var(--gap) * 2);
	position: relative;
	background: var(--blue);
	color: #e9fbff;
	border-radius: var(--radius);
	padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 44px) 24px;
}
.site-footer::before { /* festón */
	content: "";
	position: absolute; left: 0; right: 0; top: -13px; height: 14px;
	background: radial-gradient(circle at 12px 14px, var(--blue) 12px, transparent 12.5px) 0 0 / 24px 14px repeat-x;
}
.site-footer a { color: #fff; }
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); margin-bottom: 24px; }
.site-footer .widget { margin-bottom: 18px; }
.site-footer .widget-title { color: #fff; text-align: left; }
.site-footer .widget li { border-color: rgba(255,255,255,.3); }
.footer-nav .menu { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.footer-nav a { font-family: var(--font-hand); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.site-info { text-align: center; font-family: var(--font-hand); margin: 0; font-size: 1rem; }
.heart { color: var(--pink); display: inline-block; animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }

.to-top {
	position: fixed; right: 18px; bottom: 18px; z-index: 50;
	display: grid; place-items: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--pink); color: #fff;
	box-shadow: var(--shadow-hover);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: #fff; background: #e57aa8; }

/* ------------------------------------------------------------------
   12. Pantallas medianas y móviles
------------------------------------------------------------------- */
@media (max-width: 980px) {
	.has-sidebar .layout:not(.layout--wide) { grid-template-columns: minmax(0, 1fr); }
	.sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap); margin-top: calc(var(--gap) * .6); }
	.sidebar .widget { margin: 0; }
}

@media (max-width: 760px) {
	body { font-size: 1rem; }
	.bunting { height: 26px; background-size: 132px 26px; }
	.site { padding: 0 14px; }
	.header-banner { padding: 5px; margin-top: 12px; }
	.header-banner::before, .header-banner::after { width: 70px; height: 20px; top: -8px; }

	.menu-toggle { display: flex; }
	.search-toggle { top: 8px; margin-top: 0; right: 8px; }
	.main-nav { padding-right: 8px !important; }
	.menu-toggle { width: calc(100% - 52px); }
	.main-nav { padding: 2px 8px; }
	.main-nav .menu-wrap { display: none; padding-bottom: 8px; position: relative; z-index: 1; }
	.main-nav .menu-wrap.is-open { display: block; }
	.main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav li { display: flex; flex-wrap: wrap; align-items: center; border-top: 1.5px dashed var(--line); }
	.main-nav li > a { flex: 1; padding: 12px 10px; }
	.submenu-toggle { display: inline-grid; place-items: center; }
	.main-nav .sub-menu,
	.main-nav .children {
		position: static; width: 100%; min-width: 0;
		box-shadow: none; padding: 0 0 6px 16px;
		opacity: 1; visibility: visible; transform: none;
		display: none;
	}
	.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu,
	.main-nav li:hover > .children, .main-nav li:focus-within > .children { display: none; }
	.main-nav li.is-open > .sub-menu, .main-nav li.is-open > .children { display: block; }

	.card-grid { gap: 18px; }
	.entry { padding: 22px 18px 26px; }
	.entry::before { inset: 6px; }
	.entry-content { font-size: 1.04rem; }
	.entry-content blockquote { padding: 18px 16px 14px 48px; }
	.entry-content blockquote::before { left: 10px; font-size: 3.4rem; }
	.comment-avatar { display: none; }
	.to-top { right: 12px; bottom: 12px; }
}

@media (min-width: 761px) and (max-width: 980px) {
	.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menos movimiento si la persona lo ha pedido en su dispositivo */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Impresión: solo el contenido */
@media print {
	.bunting, .main-nav, .header-banner, .sidebar, .comments, .post-nav, .site-footer, .to-top, .search-toggle { display: none !important; }
	body { background: #fff; }
	.entry { box-shadow: none; padding: 0; }
	.entry::before { display: none; }
}