/*
Theme Name: Daniel Noguero
Description: Tema hijo de Twenty Twenty-Five para danielnoguero.com. Fondo blanco y soporte discreto para la obra.
Template: twentytwentyfive
Version: 0.10.5
Requires at least: 6.7
Text Domain: dn-tema
License: GNU General Public License v2 or later
*/

/* ---------- Base ---------- */

:root {
	/* Margen lateral: el 2 % del ancho de la ventana, como en Pure (mínimo 16 px). */
	--dn-gutter: max(16px, 2vw);
	--dn-gap: 24px;
	--dn-max: 1800px;
}
@media (max-width: 600px) {
	:root { --dn-gap: 16px; }
}

a { transition: color .15s ease, opacity .15s ease; -webkit-tap-highlight-color: transparent; }
a:hover, a:focus { text-decoration: none !important; }
/* Sin recuadro al hacer clic con el ratón o el dedo; se mantiene al navegar con el teclado. */
.wp-site-blocks :focus:not(:focus-visible) { outline: none; }

/* ---------- Cabecera ---------- */

.dn-header { text-align: center; }
.dn-header .dn-logo { margin: 0 auto !important; }
.dn-header .dn-logo img { width: 238px; max-width: 60vw; height: auto; }
.dn-header .wp-block-navigation { margin-top: 1.25rem; }
.dn-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); padding: .25em .9em; }
.dn-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.dn-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.single-port .dn-header .dn-nav-portfolio > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--suave);
}
/* Iconos de redes: los mismos de Pure (sprite de 13 px). */
.dn-socials { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; justify-content: center; gap: 22px; line-height: 13px; }
.dn-socials li { margin: 0; }
.dn-social { display: block; width: 13px; height: 13px; background: url(assets/img/icons_sprite.png) no-repeat; }
.dn-social--instagram { background-position: -42px 0; }
.dn-social--facebook { background-position: -70px 0; }
.dn-social:hover { opacity: .7; }
/* En pantallas de alta densidad (retina), Pure usaba la misma imagen a mitad de tamaño para que se vea nítida. */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
	.dn-social { background-size: 166px 21px; }
	.dn-social--instagram { background-position: -42px -7px; }
	.dn-social--facebook { background-position: -70px -7px; }
}
@media (max-width: 600px) {
	.dn-header { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
	/* En móvil solo se ve el logotipo (sin el isotipo): se recorta la parte inferior de la imagen. */
	.dn-header .dn-logo img {
		width: 180px !important;
		max-width: 60vw;
		aspect-ratio: 476 / 152;
		object-fit: cover;
		object-position: center bottom;
	}
	.dn-header .wp-block-navigation { margin-top: .9rem; }
	.dn-header .wp-block-navigation { gap: .25rem 0; font-size: 12px; }
	.dn-header .wp-block-navigation .wp-block-navigation-item__content { padding: .25em .6em; }
}

/* ---------- Páginas (About, Process, Contact…) ---------- */

.page:not(.home) main.wp-block-group { margin-top: 0 !important; }
/* Sin título, el contenido empieza justo bajo la cabecera, como en las páginas de proyecto. */
.page:not(.home) main > .wp-block-group:first-child { padding-top: 0 !important; }
.page:not(.home) main .wp-block-post-content { margin-top: 0 !important; }

/* Sin título visible en las páginas; se mantiene oculto para buscadores y lectores de pantalla. */
.page:not(.home) main .wp-block-post-title,
.dn-oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0 !important;
}

/* About y Process: imágenes a su tamaño real. */
/* Páginas: como mucho 800 px de ancho, lo mismo que una columna de imágenes de los proyectos. */
.page:not(.home) main.wp-block-group { --wp--style--global--content-size: 800px; }
:is(.page-id-6, .page-id-692) main .wp-block-columns .wp-block-column[style*="flex-basis:20%"] { flex: 0 0 auto !important; width: auto; }
:is(.page-id-6, .page-id-692) main .wp-block-columns .wp-block-column[style*="flex-basis:80%"] { flex: 1 1 0 !important; }
:is(.page-id-6, .page-id-692) main .wp-block-image.alignright { float: none; margin: 0; }
/* Cada imagen usa el ancho real indicado en su atributo width (200 px). */
:is(.page-id-6, .page-id-692) main .wp-block-image img { max-width: 100%; height: auto !important; }
@media (max-width: 781px) {
	:is(.page-id-6, .page-id-692) main .wp-block-columns .wp-block-column[style*="flex-basis:80%"] { flex: 1 1 100% !important; }
}

/* Process: una sola columna de 800 px; cada imagen alineada con su título, a 24 px de su texto,
   y 64 px entre un paso y el siguiente. */
.page-id-692 main .wp-block-columns .wp-block-columns > .wp-block-column { align-self: flex-start !important; }
.page-id-692 main .wp-block-column .wp-block-columns { gap: 24px !important; }
.page-id-692 main .wp-block-post-content > .wp-block-columns > .wp-block-column > * { margin: 0 0 64px !important; }
.page-id-692 main .wp-block-post-content > .wp-block-columns > .wp-block-column > .adjust-title:not(:first-child) { margin-bottom: 24px !important; }
.page-id-692 main .wp-block-post-content > .wp-block-columns > .wp-block-column > :last-child { margin-bottom: 0 !important; }
/* El espaciador que había antes de «Billing» sumaba espacio extra: se oculta para que haya 64 px, como entre pasos. */
.page-id-692 main .wp-block-post-content > .wp-block-columns > .wp-block-column > .wp-block-spacer { display: none; }

/* About: 48 px entre la imagen y el texto (el doble de los 24 px de Process). */
.page-id-6 main .wp-block-columns { column-gap: 48px !important; }
/* About (prueba): imagen + dos columnas de texto, cada una del ancho que tenía el texto (552 px): 200 + 48 + 552 + 48 + 552. */
.page.page-id-6:not(.home) main.wp-block-group { --wp--style--global--content-size: 1400px; }
/* About entre 782 y 1149 px: la imagen a la izquierda y los dos textos en una sola columna de 552 px,
   uno debajo del otro (así la columna de texto no baja de unos 400 px). Por debajo de 782 px todo va en una columna. */
@media (min-width: 782px) and (max-width: 1149px) {
	.page-id-6 main .wp-block-post-content > .wp-block-columns {
		display: grid !important;
		grid-template-columns: auto minmax(0, 552px);
		justify-content: center;
		column-gap: 48px !important;
		row-gap: 48px !important;
		align-items: start;
	}
	.page-id-6 main .wp-block-post-content > .wp-block-columns > .wp-block-column:first-child { grid-column: 1; grid-row: 1 / span 2; }
	.page-id-6 main .wp-block-post-content > .wp-block-columns > .wp-block-column:nth-child(2) { grid-column: 2; grid-row: 1; }
	.page-id-6 main .wp-block-post-content > .wp-block-columns > .wp-block-column:nth-child(3) { grid-column: 2; grid-row: 2; }
}

/* Contact: el pie repetiría la misma información. */
.page-id-8 .dn-footer { display: none; }

/* ---------- Pie ---------- */

.dn-footer a { color: inherit; }
.dn-footer a:hover { color: var(--wp--preset--color--suave); }

/* ---------- Mosaico de la portada ---------- */

.dn-home { padding-inline: var(--dn-gutter); }
.dn-mosaico { max-width: none; }

.dn-mosaico__grid {
	--dn-tile-min: 220px;
	--dn-max-cols: 5;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Columnas de al menos 220 px, con un máximo de --dn-max-cols columnas. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--dn-tile-min), calc((100% - (var(--dn-max-cols) - 1) * var(--dn-gap)) / var(--dn-max-cols)))), 1fr));
	column-gap: var(--dn-gap);
	row-gap: 0;
	align-items: start;
}
@media (max-width: 600px) {
	.dn-mosaico__grid { --dn-tile-min: 120px; --dn-max-cols: 2; }
}
/* Con JavaScript, cada proyecto ocupa tantas filas de 4 px como mide: mosaico de alturas variables
   que se rellena de izquierda a derecha, como el actual. Sin JavaScript queda una cuadrícula normal. */
.dn-mosaico__grid.is-masonry { grid-auto-rows: 4px; }
.dn-mosaico__grid > li { margin: 0 !important; }

.dn-tile { padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem); text-align: center; }
.dn-tile .wp-block-post-featured-image {
	margin: 0;
	position: relative;
	transform-origin: 50% 100%;
	transition: transform .12s ease-out;
}
.dn-tile .wp-block-post-featured-image img,
.dn-tile .dn-tile-video { display: block; width: 100%; height: auto; }
/* Al pasar el ratón la imagen entera crece y se "levanta" un poco, hacia arriba, sin tocar el texto
   de debajo (los vídeos, además, se ponen en marcha: ver mosaico.js). */
/* El efecto se activa solo sobre la imagen o sobre el texto del título, no en el espacio que los rodea. */
@media (hover: hover) {
	.dn-tile .wp-block-post-featured-image:hover,
	.dn-tile:has(.dn-tile__title a:hover) .wp-block-post-featured-image { transform: translateY(-4px) scale(1.035); z-index: 1; }
}
.dn-tile .dn-tile__title {
	margin: .9rem 0 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
}
.dn-tile .dn-tile__title a { color: var(--wp--preset--color--contrast); }
.dn-tile .dn-tile__cats { margin-top: .2rem; font-size: 11px; color: var(--wp--preset--color--suave); }
.dn-tile .dn-tile__cats a { color: inherit; }
@media (max-width: 600px) {
	.dn-tile .dn-tile__title { font-size: 11px; }
	.dn-tile .dn-tile__cats { display: none; }
}

/* ---------- Páginas de proyecto ---------- */

.dn-proyecto {
	--dn-text-col: clamp(240px, 22vw, 360px);
	--dn-side-gap: clamp(2rem, 4vw, 5rem);
	display: grid;
	max-width: none;
	margin-inline: auto !important;
	padding-inline: var(--dn-gutter);
	column-gap: var(--dn-side-gap);
	row-gap: 1.5rem;
	box-sizing: border-box;
	width: 100%;
}
/* Separación entre las imágenes de un proyecto: 48 px en horizontal y en vertical (en móvil, la general de 16 px).
   El ancho máximo de cada composición se calcula con esta medida, así que las columnas siguen midiendo 800 px. */
@media (min-width: 601px) {
	.dn-proyecto { --dn-gap: 48px; }
}
/* El contenido del proyecto se reparte en la cuadrícula: el grupo "dn-texto" con la descripción
   y el grupo "dn-media" con imágenes y vídeos. */
.dn-proyecto .dn-proyecto__contenido { display: contents; }
.dn-proyecto > *,
.dn-proyecto .dn-proyecto__contenido > * { margin-block: 0 !important; max-width: none; }
.dn-proyecto__cabecera { grid-area: cab; }
.dn-proyecto .dn-texto { grid-area: texto; }
.dn-proyecto .dn-media { grid-area: media; }
.dn-proyecto__nav { grid-area: nav; }
.dn-proyecto .dn-proyecto__contenido > :not(.dn-texto):not(.dn-media) { grid-column: 1 / -1; }

.dn-proyecto__cabecera h1 { margin: 0; }
.dn-proyecto__cabecera .wp-block-post-terms { margin-top: .4rem; font-size: 12px; color: var(--wp--preset--color--suave); }
.dn-proyecto__cabecera .wp-block-post-terms a { color: inherit; }
.dn-proyecto .dn-texto > * + * { margin-top: 1em; }
.dn-proyecto .dn-texto p { margin-bottom: 0; }
.dn-proyecto .dn-texto > p:first-child { margin-top: 0; }

.dn-media > * + * { margin-top: var(--dn-gap) !important; }
.dn-media .wp-block-image,
.dn-media .wp-block-embed,
.dn-media .wp-block-video,
.dn-media .wp-block-gallery { margin-inline: 0; width: 100%; }
.dn-media .wp-block-image img,
.dn-media video { display: block; width: 100%; height: auto; }
.dn-media .wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.dn-proyecto__nav { margin-top: 2rem !important; font-size: 12px; }
.dn-proyecto__nav a { color: var(--wp--preset--color--suave); }
.dn-proyecto__nav a:hover { color: var(--wp--preset--color--contrast); }
.dn-proyecto__nav .post-navigation-link-next a::before { content: "‹\00a0"; }
.dn-proyecto__nav .post-navigation-link-previous { margin-left: auto; }
.dn-proyecto__nav .post-navigation-link-previous a::after { content: "\00a0›"; }

/* Las imágenes de un proyecto se colocan en un mosaico de dos columnas. Los vídeos ocupan una
   columna, como una imagen más; solo lo marcado como "ancho completo" ocupa las dos. */
.dn-media > * { break-inside: avoid; }
.dn-media > .alignwide,
.dn-media > .alignfull { column-span: all; }
@media (min-width: 900px) {
	.dn-proyecto--derecha .dn-media,
	.dn-proyecto--izquierda .dn-media,
	.dn-proyecto--arriba .dn-media { columns: 2; column-gap: var(--dn-gap); }
	.dn-proyecto--derecha .dn-media > *,
	.dn-proyecto--izquierda .dn-media > *,
	.dn-proyecto--arriba .dn-media > * { margin-top: 0 !important; margin-bottom: var(--dn-gap) !important; }
}

/* Ancho máximo: cada columna de imágenes mide como mucho 800 px. */
.dn-proyecto--arriba,
.dn-proyecto--columna { max-width: calc(1600px + var(--dn-gap) + 2 * var(--dn-gutter)); }
.dn-proyecto--derecha,
.dn-proyecto--izquierda { max-width: calc(1600px + var(--dn-gap) + var(--dn-text-col) + var(--dn-side-gap) + 2 * var(--dn-gutter)); }

/* Bloques de texto intercalados entre las imágenes (párrafos, títulos o listas dentro del grupo de imágenes). */
.dn-media > :is(p, h2, h3, h4, ul, ol, .wp-block-quote) { font-size: 14px; line-height: 1.65; }
.dn-media > :is(h2, h3, h4) { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }

/* Composición por defecto · Texto a la derecha. */
.dn-proyecto--derecha {
	grid-template-columns: minmax(0, 1fr) var(--dn-text-col);
	grid-template-areas: "media cab" "media texto" "media ." "nav nav";
	grid-template-rows: auto auto 1fr auto;
}

/* Texto a la izquierda, alineado a la derecha (junto a las imágenes). */
.dn-proyecto--izquierda {
	grid-template-columns: var(--dn-text-col) minmax(0, 1fr);
	grid-template-areas: "cab media" "texto media" ". media" "nav nav";
	grid-template-rows: auto auto 1fr auto;
}
.dn-proyecto--izquierda .dn-proyecto__cabecera,
.dn-proyecto--izquierda .dn-texto { text-align: right; }

/* Texto arriba, centrado, con el mosaico debajo. */
.dn-proyecto--arriba {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "cab" "texto" "media" "nav";
}
.dn-proyecto--arriba .dn-proyecto__cabecera,
.dn-proyecto--arriba .dn-texto {
	width: 100%;
	max-width: 680px;
	justify-self: center;
	text-align: center;
}
.dn-proyecto--arriba .dn-texto { margin-bottom: 1.5rem !important; }

/* Texto en la primera columna: título y texto son el primer elemento del mosaico. */
.dn-proyecto--columna { display: block; }
.dn-proyecto--columna .dn-media { display: contents; }
.dn-proyecto--columna > *,
.dn-proyecto--columna .dn-proyecto__contenido > *,
.dn-proyecto--columna .dn-media > * { break-inside: avoid; margin-top: 0 !important; margin-bottom: var(--dn-gap) !important; }
.dn-proyecto--columna > .dn-proyecto__cabecera { margin-bottom: 1rem !important; }
/* 64 px entre el final del texto y la imagen que le sigue (relleno + la separación entre elementos). */
.dn-proyecto--columna .dn-texto { padding-bottom: calc(64px - var(--dn-gap)); }
/* El título ocupa todo el ancho, así las dos columnas empiezan a la altura del primer párrafo. */
.dn-proyecto--columna > .dn-proyecto__cabecera,
.dn-proyecto--columna > .dn-proyecto__nav,
.dn-proyecto--columna .dn-media > .alignwide,
.dn-proyecto--columna .dn-media > .alignfull { column-span: all; }
@media (min-width: 900px) {
	.dn-proyecto--columna { columns: 2; column-gap: var(--dn-gap); }
}

/* Columnas elegidas a mano: si el grupo de imágenes contiene un bloque "Columnas", cada elemento va
   en la columna en la que se ha colocado en el editor, en lugar de repartirse automáticamente. */
.dn-proyecto .dn-media:has(> .wp-block-columns) { columns: auto !important; }
.dn-media > .wp-block-columns { display: flex; flex-wrap: nowrap !important; align-items: flex-start; gap: var(--dn-gap) !important; margin: 0 !important; }
.dn-media > .wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; }
.dn-media > .wp-block-columns > .wp-block-column > * { margin: 0 0 var(--dn-gap) !important; }
.dn-media > .wp-block-columns > .wp-block-column > :last-child { margin-bottom: 0 !important; }
/* Con texto en la primera columna, el texto encabeza la columna izquierda. */
@media (min-width: 900px) {
	.dn-proyecto--columna:has(.dn-media > .wp-block-columns) {
		display: grid;
		columns: auto;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--dn-gap);
		row-gap: 0;
		grid-template-rows: auto auto 1fr auto;
		align-items: start;
	}
	.dn-proyecto--columna:has(.dn-media > .wp-block-columns) > .dn-proyecto__cabecera { grid-column: 1 / -1; grid-row: 1; }
	.dn-proyecto--columna:has(.dn-media > .wp-block-columns) .dn-texto { grid-column: 1; grid-row: 2; }
	.dn-proyecto--columna .dn-media > .wp-block-columns { display: contents; }
	.dn-proyecto--columna .dn-media > .wp-block-columns > .wp-block-column:first-child { grid-column: 1; grid-row: 3; }
	.dn-proyecto--columna .dn-media > .wp-block-columns > .wp-block-column:last-child { grid-column: 2; grid-row: 2 / span 2; }
	.dn-proyecto--columna:has(.dn-media > .wp-block-columns) > .dn-proyecto__nav { grid-column: 1 / -1; grid-row: 4; }
}

/* En pantallas estrechas todas las composiciones pasan a una sola columna, con el texto arriba. */
@media (max-width: 899px) {
	.dn-proyecto--derecha,
	.dn-proyecto--izquierda {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "cab" "texto" "media" "nav";
		grid-template-rows: none;
	}
	.dn-proyecto--izquierda .dn-proyecto__cabecera,
	.dn-proyecto--izquierda .dn-texto { text-align: left; }
	.dn-proyecto .dn-texto { margin-bottom: 1rem !important; }
	/* En móvil, 48 px entre el final del texto y la primera imagen (relleno + 16 px de margen). */
	.dn-proyecto--columna .dn-texto { padding-bottom: calc(48px - 1rem); }
	.dn-media > .wp-block-columns { flex-direction: column; }
	.dn-media > .wp-block-columns > .wp-block-column { flex-basis: auto; width: 100%; }
	.dn-media > .wp-block-columns > .wp-block-column:last-child { margin-top: 0 !important; }
}

/* Orden de lectura en móvil (ver mosaico.js). Copia invisible con la composición de escritorio,
   solo para medir en qué columna cae cada imagen. */
.dn-proyecto.dn-medir {
	--dn-gap: 48px;
	position: absolute !important;
	left: -99999px !important;
	top: 0 !important;
	visibility: hidden !important;
	display: block !important;
	columns: 2 !important;
	column-gap: 48px !important;
	width: 1648px !important;
	max-width: none !important;
	padding: 0 !important;
}
.dn-proyecto.dn-medir .dn-proyecto__contenido,
.dn-proyecto.dn-medir .dn-media { display: contents !important; }
.dn-proyecto.dn-medir > *,
.dn-proyecto.dn-medir .dn-proyecto__contenido > *,
.dn-proyecto.dn-medir .dn-media > * { margin: 0 0 48px !important; break-inside: avoid; }
.dn-proyecto.dn-medir > .dn-proyecto__cabecera,
.dn-proyecto.dn-medir > .dn-proyecto__nav { column-span: all; }
.dn-proyecto.dn-medir .dn-texto { padding-bottom: 16px !important; }
@media (max-width: 899px) {
	.dn-proyecto--columna.dn-orden-movil { display: flex; flex-direction: column; row-gap: 0; }
	.dn-orden-movil .dn-proyecto__contenido,
	.dn-orden-movil .dn-media,
	.dn-orden-movil .dn-media > .wp-block-columns,
	.dn-orden-movil .dn-media > .wp-block-columns > .wp-block-column { display: contents; }
	.dn-orden-movil .dn-media > :not(.wp-block-columns),
	.dn-orden-movil .dn-media > .wp-block-columns > .wp-block-column > * { margin: 0 0 var(--dn-gap) !important; }
}

/* Enlaces al proyecto anterior y siguiente: 24 px por debajo de la imagen más baja. */
.dn-proyecto > .dn-proyecto__nav { margin-top: 24px !important; margin-bottom: 0 !important; }
@media (max-width: 899px) {
	/* En móvil la última imagen ya deja su separación debajo: se compensa para que queden 24 px. */
	.dn-orden-movil > .dn-proyecto__nav { margin-top: calc(24px - var(--dn-gap)) !important; }
}