*, *::before, *::after { box-sizing: border-box; }

html { background: var(--c-bg); }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--ff-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--ff-heading); font-weight: var(--fw-regular); margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------
 * Header
 * Texto blanco + mix-blend-mode: difference → negro sobre blanco y
 * blanco sobre negro/fotos. El blend va en el header (no en cada hijo)
 * porque position: fixed + z-index crea contexto de apilamiento y el
 * blend de los hijos solo mezclaría dentro del header.
 * ------------------------------------------------------------------ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--header-pad-top) var(--header-pad-right) 0 var(--header-pad-left);
	color: var(--c-white);
	mix-blend-mode: difference;
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	pointer-events: none; /* que no tape los clics de lo que haya debajo */
}

.site-header a { pointer-events: auto; }

.site-header__logo {
	font-weight: var(--fw-extrabold);
	text-transform: uppercase;
}

.site-header__tagline {
	position: absolute;
	top: var(--header-pad-top);
	left: var(--header-tagline-x);
	font-weight: var(--fw-medium);
	white-space: nowrap;
	opacity: 0;
	transition: opacity .4s ease;
}

body:has(.home-split__link:is(:hover, :focus-visible)) .site-header__tagline { opacity: 1; }

.site-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
	font-weight: var(--fw-medium);
}

.site-header__menu a {
	opacity: .2;
	transition: opacity .25s ease;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible,
.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a { opacity: 1; }

.site-header__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Idioma, debajo del menú: "[ ES / EN ]" a 13.23 y en medium, el peso de
 * los enlaces del menú; el activo entero y el otro atenuado, como el menú. */
.site-header__lang {
	margin-top: var(--lang-gap);
	font-size: var(--fs-small);
	line-height: 1.2;
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.site-header__lang button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	pointer-events: auto;
	opacity: .2;
	transition: opacity .25s ease;
}

.site-header__lang button:hover,
.site-header__lang button:focus-visible,
.site-header__lang button[aria-pressed="true"] { opacity: 1; }

/* Traductor de Google: fuera su barra superior, su globo y el resaltado
 * al pasar el ratón; solo se usa nuestro selector. */
body { top: 0 !important; }
.skiptranslate > iframe,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
.goog-text-highlight,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background: none !important; box-shadow: none !important; }

/* ------------------------------------------------------------------
 * Home: pantalla dividida
 * ------------------------------------------------------------------ */
.home-split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

/* Foto de fondo de cada panel, a pantalla completa y oculta hasta el hover. */
.home-split__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}

.home-split__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% var(--focus-y, 50%);
}

.home-split__panel {
	position: relative; /* por encima de las fotos */
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-split__link {
	position: relative;
	display: block;
	text-align: center;
	transition: color .4s ease, filter .4s ease, opacity .4s ease;
}

.home-split__title {
	font-size: var(--fs-display);
	font-weight: var(--fw-medium);
	line-height: 1;
}

/* Fuera del flujo para que el título siga centrado en la pantalla. */
.home-split__more {
	position: absolute;
	top: calc(100% + var(--home-more-gap));
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	line-height: 1;
	opacity: 0;
	transition: opacity .4s ease;
}

/* Hover (o foco con teclado) en un título: su foto, texto en blanco y
 * el otro título desenfocado. */
.home-split:has(.home-split__link[data-panel="0"]:is(:hover, :focus-visible)) .home-split__bg[data-panel="0"],
.home-split:has(.home-split__link[data-panel="1"]:is(:hover, :focus-visible)) .home-split__bg[data-panel="1"] { opacity: 1; }

.home-split:has(.home-split__link:is(:hover, :focus-visible)) .home-split__link { color: var(--c-white); }

.home-split__link:is(:hover, :focus-visible) .home-split__more { opacity: 1; }

.home-split:has(.home-split__link:is(:hover, :focus-visible)) .home-split__link:not(:hover, :focus-visible) {
	filter: blur(var(--home-blur));
	opacity: .5;
}

.home-split__link:focus-visible { outline: none; }

/* ------------------------------------------------------------------
 * Footer: 61px de alto (17 + 27 + 17), contenido centrado; tres columnas con el
 * Instagram centrado en la página independientemente del ancho de los lados.
 * ------------------------------------------------------------------ */
.site-footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--footer-pad-y) var(--footer-pad-x);
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
}

.site-footer__copy { grid-row: 1; margin: 0; }

.site-footer__social { grid-row: 1; grid-column: 2; }

.site-footer__legal { grid-row: 1; grid-column: 3; justify-self: end; }

/* Logos del Kit Digital: segunda fila, bajo el copyright, a lo ancho. */
.site-footer__funding {
	grid-row: 2;
	grid-column: 1 / -1;
	display: block;
	width: min(100%, 400px);
	height: auto;
	margin-top: var(--footer-pad-y);
}

.site-footer__menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__menu li + li::before { content: "\00a0/\00a0"; }

.site-footer a { transition: opacity .25s ease; }
.site-footer a:hover,
.site-footer a:focus-visible { opacity: .2; }

/* ------------------------------------------------------------------
 * Carrusel de proyectos (Artistic practice / Visual direction)
 * Como la home: ocupa 100svh y el pie queda debajo. La rueda mueve el
 * carrusel (main.js) hasta el último proyecto y después baja al pie.
 * ------------------------------------------------------------------ */

.carousel {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	touch-action: pan-y; /* vertical = scroll de página; horizontal = carrusel */
}

/* Sin JS: fila simple de fotos apoyadas abajo. */
.carousel__track {
	display: flex;
	align-items: flex-end;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.carousel__item {
	flex: none;
	height: 50%;
	aspect-ratio: 4 / 5;
}

/* Con JS: cada foto se coloca en absoluto desde main.js. */
.carousel.is-ready .carousel__track { display: block; position: relative; }

.carousel.is-ready .carousel__item {
	position: absolute;
	left: 0;
	bottom: 0;
	will-change: transform, width, height;
}

/* overflow: hidden → el zoom del hover queda dentro del marco de la foto. */
.carousel__link { display: block; width: 100%; height: 100%; overflow: hidden; }

.carousel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
	transform: scale(1);
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
	user-select: none;
	-webkit-user-drag: none;
}

/* Ficha del proyecto con el ratón encima: en la línea del logo, donde en la
 * home sale "Creative. Photographer. Director". main.js marca cuál se ve. */
.carousel__infos {
	position: absolute;
	top: var(--header-pad-top);
	left: var(--header-tagline-x);
	width: var(--info-w);
	z-index: 200;
}

.carousel__info {
	position: absolute;
	inset: 0 0 auto 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}

.carousel__info.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease .15s, visibility 0s;
}

.carousel__info-title {
	margin: 0;
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	font-weight: var(--fw-medium);
}

.carousel__info-text {
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	font-weight: var(--fw-regular);
	opacity: var(--o-muted);
}

.carousel__info-title + .carousel__info-text { margin-top: var(--info-gap); }

.carousel__info-text h2,
.carousel__info-text p { margin: 0; font: inherit; }

.carousel__info-text > * + p { margin-top: var(--lh-text); }

/* Etiqueta "• [ Título ]" encima de la foto con el ratón encima. */
.carousel__label {
	position: absolute;
	bottom: calc(100% + var(--label-gap));
	left: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	font-size: var(--fs-small);
	line-height: 1;
	font-weight: var(--fw-regular);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.carousel__label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* La foto con el ratón encima pasa al frente: que su etiqueta no quede
 * tapada por una vecina más alta. */
.carousel.is-ready .carousel__item.is-shown { z-index: 150 !important; }

.carousel__item.is-shown .carousel__label { opacity: 1; }

/* En las fotos que no están en el centro, separada del borde: si no, queda
 * pegada a la foto vecina (más alta) de su izquierda. */
.carousel__item:not(.is-active) .carousel__label { left: var(--label-inset); }

/* Zoom pequeño de la foto con el ratón encima. */
.carousel.has-hover .carousel__item.is-shown .carousel__img { transform: scale(var(--hover-zoom)); }

/* Provisional: páginas interiores sin diseño todavía, que no queden bajo el header fijo. */
body:not(.home):not(.page-template-carrusel):not(.single-proyecto):not(.page-template-about):not(.page-template-legal) .site-main { padding-top: 160px; }

/* ------------------------------------------------------------------
 * Página de proyecto (plantilla de foto)
 * Primera pantalla (100svh): ficha arriba junto al logo, dos fotos y
 * abajo flechas + contador. Debajo, los bloques de información.
 * ------------------------------------------------------------------ */

.project-stage {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 520px;
}

.project-head {
	position: absolute;
	top: var(--header-pad-top);
	left: var(--header-tagline-x);
	z-index: 200; /* por encima del header fijo, como la ficha del carrusel */
	max-width: calc(100% - var(--header-tagline-x) - 260px); /* sin pisar el menú */
	font-size: var(--fs-nav);
	line-height: var(--lh-project);
	font-weight: var(--fw-medium);
}

.project-head__category { margin: 0; }
.project-head__title { font-size: inherit; font-weight: inherit; }

.project-back {
	position: absolute;
	top: var(--stage-top);
	left: var(--header-pad-left);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .3em;
	font-size: var(--fs-small);
	line-height: 1;
	font-weight: var(--fw-regular);
	transition: opacity .25s ease;
}

.project-back:hover,
.project-back:focus-visible { opacity: .2; }

.project-back__icon svg { width: .7em; height: auto; }

/* Zona de las fotos: main.js coloca y anima cada foto (posición y tamaño). */
.gallery {
	position: absolute;
	inset: var(--stage-top) 0 var(--stage-bottom);
	overflow: hidden;
}

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

/* Sin JS: fila de fotos con scroll horizontal. */
.gallery:not(.is-ready) .gallery__track {
	display: flex;
	gap: var(--gallery-gap);
	height: 100%;
	overflow-x: auto;
}

.gallery:not(.is-ready) .gallery__img {
	width: auto;
	height: 100%;
	max-width: none;
}

.gallery.is-ready .gallery__item {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	will-change: transform, width, height;
}

.gallery.is-ready .gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* sin el arrastre nativo de imágenes del navegador */
}

/* Se arrastra con el ratón o el dedo (main.js); el gesto vertical sigue
 * siendo scroll de página. */
.gallery.is-ready {
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.gallery.is-dragging { cursor: grabbing; }

.gallery__nav {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 var(--header-pad-right) var(--footer-pad-y) var(--header-pad-left);
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	font-weight: var(--fw-medium);
}

.gallery__count {
	position: absolute;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	font-variant-numeric: tabular-nums;
}

.gallery__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: -12px; /* área de clic más grande sin mover el icono */
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: opacity .25s ease;
}

.gallery__arrow:hover,
.gallery__arrow:focus-visible { opacity: .2; }

.gallery__arrow svg { width: 15px; }
.gallery__arrow--next svg { transform: scaleX(-1); }

/* Plantilla «Foto y vídeo»: los dos a la misma altura y a todo el ancho de
 * la página (márgenes y hueco = margen lateral de la página). Cada uno crece
 * en proporción a su relación de aspecto, así las alturas coinciden. */
.project-stage--media {
	height: auto;
	min-height: 0;
	padding: var(--media-top) var(--header-pad-right) 0 var(--header-pad-left);
}

/* Distancia fija de la foto y el vídeo a los textos (no depende del alto
 * de la ventana). */
.project-stage--media + .project-info { padding-top: var(--media-info-gap); }

.media-pair {
	display: flex;
	align-items: flex-start;
	gap: var(--header-pad-left);
}

.media-pair__item {
	flex: var(--ratio) 1 0;
	min-width: 0;
	aspect-ratio: var(--ratio);
	margin: 0;
	overflow: hidden;
}

.media-pair__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Vídeo de proyecto (template-parts/project-video.php). */
.project-video {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--c-black);
}

.project-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* no se puede pausar ni tocar: solo el botón de sonido */
}

/* Controles del vídeo: blancos en modo diferencia (se ven sobre claro y
 * oscuro), a la misma distancia del borde que el margen de la página. */
.video-ui__sound,
.video-ui__timeline {
	position: absolute;
	color: var(--c-white);
	mix-blend-mode: difference;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}

/* Solo se ven con el ratón encima del vídeo (o mientras se arrastra la
 * línea o se navega con teclado). Aparecen y desaparecen con fundido. */
.project-video:hover :is(.video-ui__sound, .video-ui__timeline),
.project-video:has(:focus-visible) :is(.video-ui__sound, .video-ui__timeline),
.project-video.is-seeking :is(.video-ui__sound, .video-ui__timeline) {
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease, visibility 0s;
}

/* En pantallas táctiles (sin hover) se ven siempre. */
@media (hover: none) and (pointer: coarse) {
	.video-ui__sound,
	.video-ui__timeline {
		opacity: 1;
		visibility: visible;
	}
}

.video-ui__sound {
	top: var(--header-pad-left);
	left: var(--header-pad-left);
	display: grid;
	width: 40px;
	height: 40px;
	margin: -12px; /* área de clic más grande sin mover el icono */
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	place-items: center;
}

.project-video .video-ui__sound:is(:hover, :focus-visible) { opacity: .5; }

.video-ui__icon { grid-area: 1 / 1; }
.video-ui__icon svg { width: 15px; }
.video-ui__sound[aria-pressed="false"] .video-ui__icon--on,
.video-ui__sound[aria-pressed="true"] .video-ui__icon--off { visibility: hidden; }

/* Línea de tiempo: 2px de alto, con 20px de zona para pulsar o arrastrar y
 * saltar a otro momento (el vídeo sigue reproduciéndose). */
.video-ui__timeline {
	right: var(--header-pad-right);
	bottom: calc(var(--header-pad-left) - 9px);
	left: var(--header-pad-left);
	height: 20px;
	cursor: pointer;
	touch-action: none;
}

.video-ui__timeline::before,
.video-ui__progress {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	height: 2px;
	background: currentColor;
}

.video-ui__timeline::before {
	right: 0;
	opacity: .3;
}

.video-ui__progress {
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
}

/* Plantilla «Grid de fotos y vídeos»: filas centradas de 1333px en 1920
 * (proporcional al ancho) con 20px de hueco. En cada fila las piezas crecen
 * en proporción a su relación de aspecto: misma altura y todo el ancho. */
.project-stage--grid {
	height: auto;
	min-height: 0;
	padding-top: var(--grid-top);
}

.project-grid {
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
	width: var(--grid-w);
	margin: 0 auto;
}

.project-grid__row {
	display: flex;
	align-items: flex-start;
	gap: var(--grid-gap);
}

.project-grid__item {
	flex: var(--ratio) 1 0;
	min-width: 0;
	aspect-ratio: var(--ratio);
	margin: 0;
}

.project-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-stage--grid + .project-info { padding-top: var(--grid-info-gap); }

@media (max-width: 800px) {
	.project-grid { width: calc(100% - var(--header-pad-left) * 2); }
}

/* Bloques de información: título pequeño entre corchetes y texto centrado. */
.project-info {
	max-width: calc(var(--project-text-w) + var(--header-pad-left) * 2);
	margin: 0 auto;
	padding: 125px var(--header-pad-left) 220px;
	text-align: center;
}

.project-info__block + .project-info__block { margin-top: 52px; }

.project-info__title {
	margin-bottom: 7px;
	font-size: var(--fs-small);
	line-height: 1.2;
	font-weight: var(--fw-regular);
}

.project-info__text {
	font-size: var(--fs-nav);
	line-height: var(--lh-project);
	font-weight: var(--fw-medium);
}

.project-info__text p { margin: 0; }

.project-info__text a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
	transition: opacity .25s ease;
}

.project-info__text a:hover,
.project-info__text a:focus-visible { opacity: .2; }
.project-info__text p + p { margin-top: 27px; }

/* «Carrusel de 1 foto»: título del proyecto encima de los bloques y todo
 * más junto (medidas de su diseño). */
.project-info--compact { padding-top: 46px; padding-bottom: 140px; }

.project-info__heading {
	margin-bottom: 37px;
	font-size: var(--fs-nav);
	line-height: var(--lh-project);
	font-weight: var(--fw-medium);
}

.project-info--compact .project-info__block + .project-info__block { margin-top: 31px; }

/* ------------------------------------------------------------------
 * About: texto alineado con la frase de arriba (junto al logo), foto a la
 * derecha y, debajo del texto, Instagram y correo. Medidas del diseño
 * (1920): texto 826px, foto 313px a 202px del borde derecho.
 * ------------------------------------------------------------------ */
.about {
	position: relative;
	padding: var(--about-top) var(--header-pad-right) var(--about-bottom) var(--header-tagline-x);
	font-size: var(--fs-nav);
	line-height: var(--lh-project);
	font-weight: var(--fw-medium);
}

.about__text { max-width: var(--about-text-w); }
.about__text p { margin: 0; }
.about__text p + p { margin-top: var(--lh-project); } /* una línea en blanco */

.about__photo {
	position: absolute;
	top: var(--about-photo-top);
	right: var(--about-photo-right);
	width: var(--about-photo-w);
	margin: 0;
}

.about__photo img {
	width: 100%;
	transform: rotate(var(--about-photo-rotate)); /* la polaroid va algo girada en el diseño */
}

.about__contact {
	margin: var(--about-contact-gap) 0 0;
	padding: 0;
	list-style: none;
}

.about__contact li + li { margin-top: var(--lh-project); }

.about__contact a { transition: opacity .25s ease; }
.about__contact a:hover,
.about__contact a:focus-visible { opacity: .2; }

/* Pantallas estrechas: sin sitio a la derecha, la foto va encima del texto. */
@media (max-width: 1400px) {
	.about { padding-left: var(--header-pad-left); }
	.about__photo {
		position: static;
		width: min(313px, 60%);
		margin: 0 auto 60px;
	}
}

/* ------------------------------------------------------------------
 * Páginas legales: como About (texto alineado con el título de arriba),
 * con apartados en medium 20.23 y el texto en 15.23 para leerlo mejor.
 * ------------------------------------------------------------------ */
.legal {
	padding: var(--about-top) var(--header-pad-right) var(--about-bottom) var(--header-tagline-x);
}

.legal .project-head__category { font-size: inherit; font-weight: inherit; }

.legal__text {
	max-width: var(--about-text-w);
	font-size: var(--fs-text);
	line-height: var(--lh-text);
	font-weight: var(--fw-regular);
}

.legal__text > * { margin: 0; }
.legal__text > * + * { margin-top: var(--lh-text); }

.legal__text h2 {
	margin-top: 52px;
	font-size: var(--fs-nav);
	line-height: var(--lh-project);
	font-weight: var(--fw-medium);
}

.legal__text h2 + * { margin-top: 12px; }
.legal__text h2:first-child { margin-top: 0; }

.legal__text ul { padding-left: 1.1em; }
.legal__text li + li { margin-top: 4px; }
.legal__text strong { font-weight: var(--fw-medium); }

.legal__text a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
}

.legal__text a:hover,
.legal__text a:focus-visible { opacity: .2; }

.legal__text .wp-block-table { margin-left: 0; margin-right: 0; overflow-x: auto; }

.legal__text table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
	line-height: 1.4;
}

.legal__text th,
.legal__text td {
	padding: 10px 12px 10px 0;
	border: 0; /* sin la rejilla del bloque Tabla de WordPress: solo líneas horizontales */
	border-bottom: 1px solid var(--c-black);
	text-align: left;
	vertical-align: top;
}

.legal__text th { font-weight: var(--fw-medium); }
.legal__text thead { border: 0; }
.legal__text .legal__updated { font-size: var(--fs-small); }

@media (max-width: 1000px) {
	.legal { padding-left: var(--header-pad-left); }
}

/* ==================================================================
 * Responsive (portátil, tablet y móvil)
 * Todo va en media queries de max-width o de pantallas sin hover: la
 * versión escritorio (Figma a 1920) no cambia. De más ancho a más estrecho.
 * ================================================================== */

/* Pantallas táctiles: sin hover, en la home se ve siempre la foto de cada
 * sección en su mitad (la foto se coloca en la celda de su panel), con el
 * título y el "[ Ver proyectos ]" en blanco encima. */
@media (hover: none) and (pointer: coarse) {
	.home-split__bg { opacity: 1; }
	.home-split__bg[data-panel="0"] { grid-area: 1 / 1; }
	.home-split__bg[data-panel="1"] { grid-area: 1 / 2; }

	.home-split__link { color: var(--c-white); }
	.home-split__more { opacity: 1; }
}

/* Portátiles pequeños y tablets: la ficha del carrusel se estrecha para no
 * meterse debajo del menú (en 1100 ya mide sus 492px). */
@media (max-width: 1100px) {
	.carousel { --carousel-fit: 1; } /* main.js: las fotos no pisan la ficha */

	.carousel__infos { width: min(var(--info-w), 100vw - var(--header-tagline-x) - 220px); }
}

/* Tablet en vertical: las fotos del carrusel, más grandes (con la escala
 * de escritorio la central no llega a un tercio del ancho y sobra media
 * pantalla en blanco); la ficha, a la izquierda bajo el logo. */
@media (max-width: 1100px) and (orientation: portrait) {
	.carousel { --carousel-scale: 1.9; }

	.carousel__infos {
		top: calc(var(--header-pad-top) + var(--lh-nav) * 2);
		left: var(--header-pad-left);
		width: min(var(--info-w), 100vw - var(--header-pad-left) - 240px);
	}
}

/* Tablet y móvil: el pie no cabe en tres columnas; va en una columna,
 * alineado a la izquierda, con el Kit Digital al final. */
@media (max-width: 900px) {
	.site-footer {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}

	.site-footer__copy,
	.site-footer__social,
	.site-footer__legal,
	.site-footer__funding { grid-row: auto; grid-column: 1; justify-self: start; }

	.site-footer__funding { order: 1; }
}

/* Móvil en vertical: las dos mitades de la home, una encima de la otra,
 * dejando arriba y abajo el alto del menú para que los títulos no lo pisen
 * y queden agrupados en el centro. Las fotos siguen a pantalla completa.
 * En el pie, los enlaces legales uno por línea (en una no caben). */
@media (max-width: 700px) {
	:root { --home-pad-y: 170px; }

	.home-split {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		padding-block: var(--home-pad-y);
	}

	/* Pie en dos columnas: copyright e Instagram a la izquierda, legales
	 * a la derecha alineados al borde; el Kit Digital debajo, a lo ancho. */
	.site-footer {
		grid-template-columns: 1fr auto;
		align-items: start;
		font-size: var(--fs-text);
		line-height: var(--lh-text);
	}

	.site-footer__copy { grid-row: 1; }
	.site-footer__social { grid-row: 2; }
	.site-footer__legal { grid-row: 1 / span 3; grid-column: 2; justify-self: end; text-align: right; }
	.site-footer__funding { grid-row: 4; grid-column: 1 / -1; }

	.site-footer__menu { flex-direction: column; row-gap: 4px; }
	.site-footer__menu li + li::before { content: none; }

	/* Carrusel: la central ocupa algo más de la mitad del ancho y la ficha
	 * va debajo del menú, a todo el ancho. */
	.carousel { --carousel-scale: 2; }

	.carousel__infos {
		top: 190px;
		left: var(--header-pad-left);
		right: var(--header-pad-right);
		width: auto;
	}
}

/* Móvil en horizontal (poco alto): de la ficha solo la categoría y el
 * título; la descripción no cabe sin pisar las fotos. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
	.carousel__info-text > p { display: none; }
}

/* Móviles muy estrechos (320-360): logo y menú más pequeños para que
 * quepan en la misma línea. */
@media (max-width: 360px) {
	:root { --fs-nav: 17px; --lh-nav: 23px; --fs-display: 32px; }

	:root { --home-pad-y: 150px; }
}

/* Móvil táctil: cada foto llena su mitad de pantalla entera; el hueco del
 * menú pasa de la home a los paneles para que los títulos sigan sin pisarlo. */
@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
	.home-split { padding-block: 0; }
	.home-split__bg[data-panel="1"] { grid-area: 2 / 1; }
	.home-split__panel:nth-last-child(2) { padding-top: var(--home-pad-y); }
	.home-split__panel:last-child { padding-bottom: var(--home-pad-y); }
}

/* ------------------------------------------------------------------
 * Responsive: páginas de proyecto (las 4 plantillas).
 * En escritorio la ficha va absoluta junto al logo y las fotos en una
 * caja absoluta; en tablet en vertical y en móvil no hay sitio al lado
 * del logo, así que la primera pantalla pasa a columna: ficha, "Volver",
 * fotos (lo que sobre de alto) y flechas + contador.
 * ------------------------------------------------------------------ */

/* Tablet en vertical y móvil: ficha en el flujo, bajo el logo y sin pisar
 * el menú; 1 foto por vista en los carruseles; grid a todo el ancho. */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 700px) {
	.project-stage {
		display: flex;
		flex-direction: column;
		padding-top: var(--project-m-top);
	}

	.project-head {
		position: static;
		max-width: none;
		margin-right: var(--project-m-menu); /* deja libre la columna del menú */
		padding-left: var(--header-pad-left);
	}

	.project-back {
		position: static;
		align-self: flex-start;
		margin: var(--project-m-gap) 0 0 var(--header-pad-left);
	}

	[data-gallery] { --gallery-per-view: 1; } /* main.js */

	.gallery {
		position: relative;
		inset: auto;
		flex: 1 1 auto;
		min-height: 0;
		margin-top: var(--project-m-gap);
	}

	.gallery__nav {
		position: relative;
		flex: none;
		padding-top: var(--project-m-gap);
	}

	/* Foto y vídeo / grid: la ficha y el "Volver" también van en el flujo,
	 * así que el margen de arriba ya no tiene que dejarles sitio. */
	.project-stage--media,
	.project-stage--grid {
		padding-top: var(--project-m-top);
		padding-right: 0;
		padding-left: 0;
	}

	.media-pair,
	.project-grid {
		width: auto;
		margin: var(--project-m-gap) var(--header-pad-right) 0 var(--header-pad-left);
	}

	.project-stage--media + .project-info { padding-top: 120px; }
	.project-stage--grid + .project-info { padding-top: 90px; }
}

/* Tablet y móvil en horizontal: la ficha cabe junto al logo, como en
 * escritorio, pero con poco ancho la foto puede llegar al margen izquierdo
 * y tapar el "Volver": las fotos empiezan por debajo de él. */
@media (max-width: 1100px) and (orientation: landscape) {
	.gallery { top: calc(var(--stage-top) + 28px); }
}

/* Tablet en vertical: la ficha empieza en la segunda línea del menú (junto
 * a la primera está el logo) y se para antes de la columna del menú. */
@media (max-width: 1100px) and (orientation: portrait) {
	:root {
		--project-m-top: calc(var(--header-pad-top) + var(--lh-nav) * 2);
		--project-m-menu: 240px;
		--project-m-gap: 28px;
	}
}

/* Móvil: la ficha va debajo del menú (y del selector de idioma), a todo
 * el ancho. La foto y el vídeo, uno encima del otro. En el grid, las filas
 * de 3 o más piezas pasan a 2 por línea (con 4 por línea no se ven). */
@media (max-width: 700px) {
	:root {
		--project-m-top: 190px;
		--project-m-menu: var(--header-pad-right);
		--project-m-gap: 24px;
	}

	.media-pair { flex-direction: column; }
	.media-pair__item { flex: none; width: 100%; }

	.project-grid__row:has(> :nth-child(3)) {
		flex-wrap: wrap;
		justify-content: center;
	}

	.project-grid__row:has(> :nth-child(3)) > .project-grid__item {
		flex: 0 0 calc((100% - var(--grid-gap)) / 2);
	}

	.project-info { padding-top: 90px; padding-bottom: 140px; }
	.project-info--compact { padding-top: 40px; padding-bottom: 110px; }
}

/* Móvil: los textos de contenido que en escritorio van a 20.23px (los del
 * proyecto, la ficha de los carruseles, el contador, About y los títulos
 * de las legales) bajan a 15.23px, como el pie. --lh-project solo lo usan
 * estos textos. La cabecera (logo y menú) no cambia. */
@media (max-width: 700px) {
	:root { --lh-project: var(--lh-text); }

	.project-head,
	.project-info__text,
	.project-info__heading,
	.gallery__nav,
	.carousel__info-title,
	.about,
	.legal__text h2 {
		font-size: var(--fs-text);
	}

	.gallery__nav { line-height: var(--lh-text); }
	.carousel__info-title { line-height: var(--lh-text); }

	.project-info__text p + p { margin-top: var(--lh-text); }
	.project-info__block + .project-info__block { margin-top: 36px; }
	.project-info__heading { margin-bottom: 26px; }
	.project-info--compact .project-info__block + .project-info__block { margin-top: 24px; }
	.legal__text h2 { margin-top: 40px; }
}

/* ------------------------------------------------------------------
 * Responsive: About. En portátil (≤1400, regla de arriba) y en horizontal
 * la frase va junto al logo y la foto encima del texto. En tablet en
 * vertical y en móvil la frase va en el flujo (como la ficha de los
 * proyectos): se alinea con el texto, con aire hasta la polaroid, y los
 * espacios de escritorio (texto → Instagram, final de página) se acortan.
 * ------------------------------------------------------------------ */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 700px) {
	.about .project-head {
		padding-left: 0; /* .about ya tiene el margen de la página */
		margin-bottom: 40px;
	}

	/* La frase empieza donde la ficha de los proyectos (--project-m-top). */
	.about { padding-top: var(--project-m-top); padding-bottom: 180px; }
	.about__contact { margin-top: 110px; }
}

@media (max-width: 700px) {
	.about { padding-bottom: 130px; }

	.about .project-head { margin-bottom: 32px; }
	.about__photo { margin-bottom: 44px; }
	.about__contact { margin-top: 70px; }
}