/*
Theme Name: Alberto Yago — Ecommerce UX
Theme URI: https://albertoyago.com
Description: Tema hijo de Twenty Twenty-Five con el sistema visual del Manual de Marca v2.1 (Evidence-based Ecommerce UX). Todos los tokens viven en theme.json; el contenido se edita con bloques nativos de WordPress.
Author: Alberto Yago
Template: twentytwentyfive
Version: 6.7.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: ay-ux
*/

/* --------------------------------------------------------------
   Este archivo es deliberadamente corto.
   El sistema visual (color, tipografía, retícula, espaciado) está
   en theme.json, para que se pueda editar desde el propio WordPress
   (Apariencia → Editor → Estilos) sin tocar código.
   Aquí solo van los detalles que theme.json no cubre.
   -------------------------------------------------------------- */

/* Sin sombras ni radios en ningún elemento (§21). */
* {
	box-shadow: none;
}

/* Regla fina de separación: borde izquierdo terracota de 3px.
   Se aplica añadiendo la clase "ay-enfasis" a un grupo desde el editor. */
.ay-enfasis {
	border-left: 3px solid var(--wp--preset--color--terracotta);
	padding-left: var(--wp--preset--spacing--s3);
}

/* Campo de anotación F·E·P·A: etiqueta + contenido separados por hairline. */
.ay-campo {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--s2);
}

/* Bloque de aviso sobre fondo terracota al 8%. */
.ay-aviso {
	background-color: var(--wp--preset--color--terracotta-08);
	padding: var(--wp--preset--spacing--s4);
}

/* Foco visible: obligatorio (§20). */
:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
}

/* Respeta la preferencia de movimiento reducido (§20). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------
   Escala de espaciado (base 8) publicada como variables CSS.
   WordPress no está emitiendo los presets de spacing de theme.json
   en este entorno, así que las definimos aquí para que plantillas,
   patrones y clases tengan siempre un valor real.
   -------------------------------------------------------------- */
:root {
	--wp--preset--spacing--s1: 8px;
	--wp--preset--spacing--s2: 16px;
	--wp--preset--spacing--s3: 24px;
	--wp--preset--spacing--s4: 40px;
	--wp--preset--spacing--s5: 64px;
	--wp--preset--spacing--s6: 88px;
}

/* --------------------------------------------------------------
   Clases de composición usadas por los patrones.
   Los patrones no llevan estilos en línea: así WordPress nunca
   marca el bloque como "contenido no válido" y todo sigue siendo
   editable desde el editor.
   -------------------------------------------------------------- */

.ay-label {
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ay-lead {
	font-style: italic;
	font-weight: 400;
}

.wp-block-group.ay-seccion {
	padding-block: var(--wp--preset--spacing--s6);
}

.wp-block-group.ay-banda {
	padding-block: var(--wp--preset--spacing--s6);
	padding-inline: var(--wp--preset--spacing--s5);
}

/* Ancho completo real, con independencia del contenedor. */
.wp-site-blocks .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Navegación: separación real entre elementos. */
.wp-block-navigation {
	--wp--style--block-gap: var(--wp--preset--spacing--s4);
	gap: var(--wp--preset--spacing--s4);
}

/* --------------------------------------------------------------
   Jerarquía tipográfica. Twenty Twenty-Five impone sus propios
   tamaños de encabezado por encima de theme.json, así que los
   fijamos aquí según la escala del manual.
   -------------------------------------------------------------- */
.wp-site-blocks main h2 {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.06;
	letter-spacing: -0.018em;
}

.wp-site-blocks main h3 {
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.32;
	letter-spacing: 0;
}

.ay-label {
	font-weight: 500;
}

.ay-lead {
	line-height: 1.24;
}

/* Ritmo vertical: el aire lo pone la sección, no el hueco entre
   bloques. Evita sumar 88 + 40 entre dos secciones seguidas. */
main > .wp-block-group {
	margin-block: 0;
}

.wp-block-group.ay-seccion {
	padding-block: var(--wp--preset--spacing--s5);
}

/* ==============================================================
   RETICULA EDITORIAL (manual §08): etiqueta a la izquierda,
   contenido a la derecha. Es la mitad de la firma visual.
   ============================================================== */
.ay-fila {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
	gap: var(--wp--preset--spacing--s4);
	align-items: start;
}

.ay-fila > * { margin-block: 0; }

@media (max-width: 781px) {
	.ay-fila { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--s2); }
}

.wp-block-group.ay-seccion { padding-block: var(--wp--preset--spacing--s5); }

/* ==============================================================
   ANOTACION (manual §09): captura, marcador, cerco y leyenda.
   ============================================================== */
.ay-captura {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--hairline);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.ay-captura__ui {
	position: absolute;
	inset: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ay-captura__barra { height: 16px; background: #E3DED4; }
.ay-captura__barra--corta { width: 38%; }
.ay-captura__barra--media { width: 62%; }
.ay-captura__bloque { flex: 1; background: #EFEBE3; }

.ay-captura__velo {
	position: absolute;
	inset: 0;
	background: rgba(30, 42, 50, 0.55);
}

.ay-captura__ventana {
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 16%;
	height: 18%;
	box-shadow: 0 0 0 9999px rgba(30, 42, 50, 0.38);
	outline: 4px solid var(--wp--preset--color--terracotta);
}

.ay-marcador {
	position: absolute;
	left: 3%;
	bottom: 28%;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wp--preset--color--terracotta);
	color: #FFFFFF;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 16px;
	z-index: 2;
}

.ay-nota {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	margin-top: var(--wp--preset--spacing--s2);
}

/* Leyenda F·E·P·A en cuatro campos */
.ay-fepa {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s3);
	margin-top: var(--wp--preset--spacing--s4);
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--s3);
}

@media (max-width: 781px) {
	.ay-fepa { grid-template-columns: 1fr 1fr; }
}

.ay-fepa__campo dt {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	margin-bottom: 8px;
}

.ay-fepa__campo--accion dt { color: var(--wp--preset--color--terracotta-deep); }

.ay-fepa__campo dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.45;
}

/* ==============================================================
   FILA DE CASO: miniatura + contexto.
   ============================================================== */
.ay-caso {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--s4);
	align-items: start;
	padding-block: var(--wp--preset--spacing--s4);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.ay-caso:last-of-type { border-bottom: 1px solid var(--wp--preset--color--hairline); }

@media (max-width: 781px) {
	.ay-caso { grid-template-columns: 1fr; }
}

.ay-miniatura {
	aspect-ratio: 4 / 3;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--hairline);
	position: relative;
	overflow: hidden;
}

.ay-miniatura__ui {
	position: absolute;
	inset: 0;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ay-caso__meta {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
}

.ay-caso h3 { margin-block: 8px 12px; }

.ay-enlace {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
}

/* ==============================================================
   SELECTOR DE CASOS · lista a la izquierda, captura a la derecha
   ============================================================== */
.ay-selector {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--wp--preset--spacing--s4);
	align-items: start;
}

@media (max-width: 781px) {
	.ay-selector { grid-template-columns: 1fr; }
}

.ay-tabs { display: flex; flex-direction: column; }

.ay-tab {
	all: unset;
	cursor: pointer;
	display: block;
	padding: var(--wp--preset--spacing--s2) 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--slate-60);
	transition: color .18s ease, padding-left .18s ease;
}

.ay-tab:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.ay-tab:hover { color: var(--wp--preset--color--ink); padding-left: 8px; }

.ay-tab__n {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--slate-40);
	margin-right: 12px;
}

.ay-tab[aria-selected="true"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--terracotta);
	padding-left: 12px;
}

.ay-tab[aria-selected="true"] .ay-tab__n { color: var(--wp--preset--color--terracotta-deep); }
.ay-tab:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 2px; }

.ay-panel { display: none; }
.ay-panel.is-on { display: block; animation: ay-fade .28s ease both; }

@keyframes ay-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ay-panel img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--wp--preset--color--hairline);
}

.ay-panel__meta {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	margin: var(--wp--preset--spacing--s2) 0 8px;
}

.ay-panel h3 { margin: 0 0 8px; }
.ay-panel p { margin: 0; max-width: 62ch; }

/* ==============================================================
   REVELADO AL SCROLL · explica, no decora
   ============================================================== */
.ay-rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.ay-rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ay-rv { opacity: 1; transform: none; transition: none; }
	.ay-panel.is-on { animation: none; }
}

/* Credenciales */
.ay-credenciales {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s3);
}

@media (max-width: 781px) { .ay-credenciales { grid-template-columns: 1fr; } }

.ay-credenciales div { border-top: 1px solid var(--wp--preset--color--hairline); padding-top: 10px; }
.ay-credenciales b { display: block; font-size: var(--wp--preset--font-size--body-sm); }
.ay-credenciales span { font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); }

/* Cómo trabajo con IA */
.ay-ia {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s4) var(--wp--preset--spacing--s3);
	margin-block: var(--wp--preset--spacing--s3);
}

@media (max-width: 781px) { .ay-ia { grid-template-columns: 1fr; } }

.ay-ia div { border-top: 1px solid var(--wp--preset--color--hairline); padding-top: 12px; }
.ay-ia b { display: block; font-size: var(--wp--preset--font-size--body); margin-bottom: 6px; }
.ay-ia span { font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); line-height: 1.5; }

/* ==============================================================
   PAGINA WORK · capitulo por empresa
   ============================================================== */
.ay-empresa {
	border-top: 3px solid var(--wp--preset--color--slate);
	padding-top: var(--wp--preset--spacing--s3);
	margin-top: var(--wp--preset--spacing--s5);
}

.ay-empresa__meta {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
}

.ay-flagship {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--s4);
	align-items: center;
	margin-block: var(--wp--preset--spacing--s4);
}

@media (max-width: 781px) { .ay-flagship { grid-template-columns: 1fr; } }

.ay-flagship img { width: 100%; height: auto; display: block; border: 1px solid var(--wp--preset--color--hairline); }
.ay-flagship h3 { margin: 6px 0 10px; font-size: var(--wp--preset--font-size--lead); font-family: var(--wp--preset--font-family--fraunces); font-weight: 500; line-height: 1.15; }
.ay-flagship p { margin: 0 0 12px; font-size: var(--wp--preset--font-size--body-sm); max-width: 54ch; }

.ay-destacado {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-deep);
}

.ay-mini { display: grid; gap: 0; }
.ay-mini a {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--wp--preset--spacing--s3);
	padding: var(--wp--preset--spacing--s2) 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	text-decoration: none;
	color: inherit;
	transition: padding-left .18s ease;
}

.ay-mini a:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.ay-mini a:hover { padding-left: 8px; }
.ay-mini b { font-size: var(--wp--preset--font-size--body-sm); font-weight: 600; }
.ay-mini span { font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); }

@media (max-width: 781px) { .ay-mini a { grid-template-columns: 1fr; gap: 4px; } }

.ay-historial { display: grid; gap: 0; }
.ay-historial div {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: var(--wp--preset--spacing--s3);
	padding: 10px 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	font-size: var(--wp--preset--font-size--body-sm);
}

.ay-historial b { font-weight: 600; }
.ay-historial span { color: var(--wp--preset--color--slate-60); }

@media (max-width: 781px) { .ay-historial div { grid-template-columns: 1fr; gap: 2px; } }

/* Tira de capacidades bajo el héroe */
.ay-capacidades {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s3);
	margin-top: var(--wp--preset--spacing--s4);
	padding-top: var(--wp--preset--spacing--s3);
	border-top: 1px solid rgba(245, 242, 236, 0.22);
}

@media (max-width: 781px) { .ay-capacidades { grid-template-columns: 1fr 1fr; } }

.ay-capacidades b {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	margin-bottom: 6px;
}

.ay-capacidades span { font-size: var(--wp--preset--font-size--body-sm); line-height: 1.45; }

/* Testimonio */
.ay-testimonio { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,9fr); gap: var(--wp--preset--spacing--s4); align-items: start; }
@media (max-width: 781px) { .ay-testimonio { grid-template-columns: 1fr; } }
.ay-testimonio blockquote { margin: 0; font-family: var(--wp--preset--font-family--fraunces); font-size: var(--wp--preset--font-size--lead); font-style: italic; line-height: 1.28; }
.ay-testimonio cite { display: block; margin-top: var(--wp--preset--spacing--s2); font-style: normal; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); }

/* Retrato */
.ay-retrato { aspect-ratio: 4/5; background: #FFFFFF; border: 1px solid var(--wp--preset--color--hairline); display: grid; place-items: center; }
.ay-retrato span { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--slate-40); text-align: center; padding: 0 16px; }

/* Bloque de contacto */
.ay-contacto { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--s3); margin-top: var(--wp--preset--spacing--s3); }
.ay-contacto a { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.16em; text-transform: uppercase; color: inherit; }

/* ==============================================================
   AJUSTE FINO · consistencia y movimiento con función
   ============================================================== */

/* Un solo tratamiento de enlace en todo el contenido */
.wp-site-blocks main a:not(.wp-element-button):not(.ay-tab):not(.ay-mini a) {
	color: var(--wp--preset--color--terracotta-deep);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Enlace de acción con flecha que avanza */
.ay-enlace a { text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; }
.ay-enlace a::after { content: "\2192"; transition: transform .18s ease; }
.ay-enlace a:hover::after { transform: translateX(4px); }
.ay-enlace a:hover { text-decoration: underline; }

/* Todas las etiquetas Mono, exactamente iguales */
.ay-label,
.ay-nota,
.ay-panel__meta,
.ay-empresa__meta,
.ay-caso__meta,
.ay-destacado,
.ay-capacidades b,
.ay-contacto a,
.ay-retrato span {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Revelado escalonado dentro de las rejillas */
.ay-capacidades > div,
.ay-ia > div,
.ay-credenciales > div,
.ay-mini > a,
.ay-historial > div {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .45s ease, transform .45s ease;
	transition-delay: calc(var(--i, 0) * 60ms);
}

.is-in .ay-capacidades > div,
.is-in .ay-ia > div,
.is-in .ay-credenciales > div,
.is-in .ay-mini > a,
.is-in .ay-historial > div,
.ay-capacidades.is-in > div,
.ay-ia.is-in > div {
	opacity: 1;
	transform: none;
}

/* El héroe entra al cargar, sin esperar al scroll */
.ay-banda .wp-block-heading,
.ay-banda .ay-lead,
.ay-banda .ay-label {
	animation: ay-entrada .6s cubic-bezier(.22,.61,.36,1) both;
}

.ay-banda .ay-label { animation-delay: .05s; }
.ay-banda .wp-block-heading { animation-delay: .12s; }
.ay-banda .ay-lead { animation-delay: .22s; }

@keyframes ay-entrada {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* El marcador llama la atención una sola vez: dice dónde mirar */
.ay-captura.is-in .ay-marcador { animation: ay-pulso 1.6s ease-out 1 .3s; }

@keyframes ay-pulso {
	0% { box-shadow: 0 0 0 0 rgba(196, 100, 60, .55); }
	70% { box-shadow: 0 0 0 16px rgba(196, 100, 60, 0); }
	100% { box-shadow: 0 0 0 0 rgba(196, 100, 60, 0); }
}

/* Fundido cruzado entre capturas del selector */
.ay-panel img { transition: opacity .3s ease; }

/* Imagenes sin salto de maquetacion */
.ay-panel img, .ay-flagship img { aspect-ratio: auto; }

@media (prefers-reduced-motion: reduce) {
	.ay-capacidades > div,
	.ay-ia > div,
	.ay-credenciales > div,
	.ay-mini > a,
	.ay-historial > div { opacity: 1; transform: none; transition: none; }
	.ay-banda .wp-block-heading,
	.ay-banda .ay-lead,
	.ay-banda .ay-label,
	.ay-captura.is-in .ay-marcador { animation: none; }
}

/* ==============================================================
   HÉROE · texto a la izquierda, trabajo real a la derecha
   ============================================================== */
.ay-hero {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--s5);
	align-items: center;
}

@media (max-width: 899px) {
	.ay-hero { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--s4); }
}

.ay-hero__visual { position: relative; }

.ay-hero__visual img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid rgba(245, 242, 236, 0.18);
}

.ay-hero__pie {
	margin-top: 10px;
	color: var(--wp--preset--color--slate-40);
}

/* El titular, más contenido en móvil */
.ay-banda .has-display-font-size {
	font-size: clamp(34px, 5.2vw, 64px);
	line-height: 1.03;
	letter-spacing: -0.02em;
}

.ay-banda .ay-lead {
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.3;
	max-width: 34ch;
}

/* Tira de capacidades: fuera del héroe, sobre papel y compacta */
.ay-tira {
	border-block: 1px solid var(--wp--preset--color--hairline);
	padding-block: var(--wp--preset--spacing--s3);
}

.ay-tira .ay-capacidades {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	gap: var(--wp--preset--spacing--s3);
}

.ay-tira .ay-capacidades span { font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); }

/* ==============================================================
   AJUSTE HERO V2 · densidad, alineación y huecos muertos
   ============================================================== */

/* Sin banda vacía entre cabecera y héroe */
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > main > .alignfull:first-child { margin-block-start: 0; }
main > .wp-block-group:first-child { margin-top: 0; }

/* El héroe alinea arriba: se acaba el vacío bajo la imagen */
.ay-hero { align-items: start; }

.ay-banda {
	padding-block: var(--wp--preset--spacing--s5);
}

/* Titular más contenido y con medida controlada */
.ay-banda .has-display-font-size {
	font-size: clamp(30px, 3.4vw, 50px);
	line-height: 1.05;
	max-width: 15ch;
	margin-block: var(--wp--preset--spacing--s2) 0;
}

.ay-banda .ay-lead {
	font-size: clamp(18px, 1.5vw, 21px);
	margin-top: var(--wp--preset--spacing--s3);
	max-width: 32ch;
}

/* El pie de la captura, en la misma escala que el resto de etiquetas */
.ay-hero__pie {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-top: var(--wp--preset--spacing--s2);
}

/* Acción y disponibilidad */
.ay-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--s3);
	margin-top: var(--wp--preset--spacing--s4);
}

.ay-hero__acciones .ay-enlace a { color: var(--wp--preset--color--paper); }

.ay-disponible {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
}

.ay-disponible::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--terracotta);
	border-radius: 999px;
}

/* La tira de capacidades, sin vacío sobrante debajo */
.ay-tira { padding-block: var(--wp--preset--spacing--s3); margin-block: 0; }

/* ==============================================================
   AJUSTE HERO V3 · retrato, navegación y movimiento
   ============================================================== */

/* Firma con retrato: identidad sin robarle sitio al trabajo */
.ay-firma { display: flex; align-items: center; gap: var(--wp--preset--spacing--s2); margin-bottom: var(--wp--preset--spacing--s3); }

.ay-firma__foto {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(245, 242, 236, 0.08);
	border: 1px solid rgba(245, 242, 236, 0.22);
	display: grid;
	place-items: center;
	text-align: center;
}

.ay-firma__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter .4s ease;
}

.ay-firma:hover .ay-firma__foto img { filter: grayscale(0); }

.ay-firma__foto span {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	line-height: 1.2;
	padding: 4px;
}

/* Navegación: subrayado que crece */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

/* La captura del héroe responde al puntero */
.ay-hero__visual img { transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.ay-hero__visual:hover img { transform: translateY(-6px); }

/* Pista de scroll */
.ay-scroll {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--s4);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
}

.ay-scroll::after {
	content: "\2193";
	animation: ay-baja 1.9s ease-in-out infinite;
}

@keyframes ay-baja {
	0%, 100% { transform: translateY(0); opacity: .6; }
	50% { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ay-scroll::after { animation: none; }
	.ay-hero__visual img { transition: none; }
	.wp-block-navigation .wp-block-navigation-item__content::after { transition: none; }
}

/* ==============================================================
   AJUSTE HERO V4 · menos texto, más aire
   ============================================================== */
.ay-banda .has-display-font-size {
	font-size: clamp(30px, 2.9vw, 44px);
	line-height: 1.08;
	max-width: 18ch;
}

.ay-banda .ay-lead {
	font-size: clamp(17px, 1.3vw, 19px);
	max-width: 28ch;
	margin-top: var(--wp--preset--spacing--s2);
}

.ay-firma__foto { width: 48px; height: 48px; flex-basis: 48px; }

/* ==============================================================
   AJUSTE HERO V5 · densidad y huecos muertos
   ============================================================== */
.ay-banda { padding-block: var(--wp--preset--spacing--s4); }

.ay-hero { align-items: start; gap: var(--wp--preset--spacing--s4); }

.ay-hero > div:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
}

.ay-banda .has-display-font-size { margin-block: var(--wp--preset--spacing--s2) 0; }
.ay-banda .ay-lead { margin-top: var(--wp--preset--spacing--s2); }

.ay-hero__acciones { margin-top: var(--wp--preset--spacing--s3); }
.ay-hero__acciones .ay-enlace { margin: 0; }

.ay-hero__pie { margin-top: var(--wp--preset--spacing--s2); }

/* La cabecera, menos aire */
.wp-site-blocks > header { padding-block: var(--wp--preset--spacing--s3); }

/* ==============================================================
   CABECERA FIJA · compacta y siempre disponible
   ============================================================== */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--paper);
	padding-block: var(--wp--preset--spacing--s2);
	transition: padding .25s ease, box-shadow .25s ease;
}

.admin-bar .wp-site-blocks > header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header { top: 46px; }
}

.wp-site-blocks > header.is-compact {
	padding-block: 10px;
	box-shadow: 0 1px 0 var(--wp--preset--color--hairline);
}

/* Nombre y bajada, más contenidos */
.wp-site-blocks > header .wp-block-site-title a {
	font-size: 20px;
	line-height: 1.1;
}

.wp-site-blocks > header .ay-label { font-size: 10px; letter-spacing: 0.18em; }

.wp-site-blocks > header.is-compact .ay-label {
	opacity: 0;
	height: 0;
	margin: 0;
	overflow: hidden;
	transition: opacity .2s ease;
}

.wp-block-navigation { font-size: var(--wp--preset--font-size--body-sm); }

/* ==============================================================
   RETRATO EN EL HÉROE
   ============================================================== */
.ay-retrato-hero {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(245, 242, 236, 0.06);
	border: 1px solid rgba(245, 242, 236, 0.16);
	display: grid;
	place-items: center;
}

.ay-retrato-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.06) brightness(.98);
	transition: filter .6s ease;
}

.ay-retrato-hero:hover img { filter: grayscale(.55) contrast(1.02); }

.ay-retrato-hero > span {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	text-align: center;
	padding: 0 24px;
	line-height: 1.6;
}

@media (max-width: 899px) {
	.ay-retrato-hero { aspect-ratio: 3 / 2; }
}

/* ==============================================================
   AJUSTE CABECERA V2 · sin banda intermedia, sin borde doble
   ============================================================== */
.wp-site-blocks { gap: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

.wp-site-blocks > header {
	padding-block: 14px;
	border-bottom: 0;
}

.wp-site-blocks > header.is-compact { padding-block: 8px; }

.wp-site-blocks > header .wp-block-site-title a { font-size: 19px; }
.wp-site-blocks > header .ay-label { font-size: 10px; margin-top: 2px; }

/* El héroe empieza justo debajo y cabe en pantalla */
.ay-banda { padding-block: var(--wp--preset--spacing--s4); }
.ay-hero__visual { max-height: 62vh; }
.ay-retrato-hero { max-height: 62vh; }
.ay-banda .has-display-font-size { font-size: clamp(30px, 2.6vw, 40px); }

/* ==============================================================
   AJUSTE RETRATO V2 · el retrato acompaña, no compite
   ============================================================== */
.ay-hero {
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	align-items: center;
}

@media (max-width: 899px) {
	.ay-hero { grid-template-columns: 1fr; }
}

.ay-hero__visual {
	max-width: 300px;
	max-height: none;
	margin-left: auto;
}

.ay-retrato-hero {
	aspect-ratio: 4 / 5;
	max-height: 380px;
}

@media (max-width: 899px) {
	.ay-hero__visual { max-width: 220px; margin-left: 0; }
	.ay-retrato-hero { aspect-ratio: 4 / 5; max-height: 280px; }
}

/* Con más sitio, el titular recupera presencia */
.ay-banda .has-display-font-size {
	font-size: clamp(32px, 3.2vw, 48px);
	max-width: 16ch;
}

/* ==============================================================
   AJUSTE MOVIL V2 · credenciales en una línea y menos aire muerto
   ============================================================== */
@media (max-width: 599px) {
	.ay-hero .ay-label {
		white-space: nowrap;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	.ay-banda .has-display-font-size { font-size: 29px; max-width: none; }
	.ay-banda { padding-block: var(--wp--preset--spacing--s4) var(--wp--preset--spacing--s3); }
}

/* Escritorio: fuera el hueco muerto bajo el enlace */
@media (min-width: 900px) {
	.ay-banda { padding-block: var(--wp--preset--spacing--s4); }
	.ay-hero { align-items: center; }
	.ay-hero > div:first-child { min-height: 0; }
}

/* ==============================================================
   TIRA V2 · cinco columnas, sin cortes y sin vacío alrededor
   ============================================================== */
.ay-tira {
	padding-block: var(--wp--preset--spacing--s4);
	margin-block: 0;
}

.ay-tira .ay-capacidades {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s3);
}

.ay-capacidades span { text-wrap: pretty; hyphens: none; }

/* La credencial, la única con señal */
.ay-capacidades__cred b { color: var(--wp--preset--color--terracotta-deep); }
.ay-capacidades__cred { box-shadow: inset 2px 0 0 var(--wp--preset--color--terracotta); padding-left: 12px; }

@media (max-width: 1099px) {
	.ay-tira .ay-capacidades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Móvil: etiqueta arriba, contenido debajo, apilado y compacto */
@media (max-width: 720px) {
	.ay-tira .ay-capacidades { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--s2); }
	.ay-capacidades > div { border-top: 1px solid var(--wp--preset--color--hairline); padding-top: 10px; }
	.ay-capacidades__cred { box-shadow: none; padding-left: 0; border-top-color: var(--wp--preset--color--terracotta); }
	.ay-capacidades span { font-size: var(--wp--preset--font-size--body-sm); }
}

/* El héroe deja de reservar aire de más por debajo */
@media (min-width: 900px) {
	.ay-banda { padding-block: var(--wp--preset--spacing--s4) var(--wp--preset--spacing--s4); }
	.ay-hero { align-items: center; }
}

/* ==============================================================
   TIRA V3 · cuatro columnas que respiran + credencial a lo ancho
   ============================================================== */
.ay-tira .ay-capacidades {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s4);
}

.ay-capacidades > div { min-width: 0; }

.ay-capacidades span {
	display: block;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.ay-capacidades__cred { box-shadow: none; padding-left: 0; }

/* Credencial: una línea, a lo ancho, con la regla de señal */
.ay-cred-line {
	margin: var(--wp--preset--spacing--s4) 0 0;
	padding: 12px 0 12px 14px;
	border-left: 3px solid var(--wp--preset--color--terracotta);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--slate-60);
}

.ay-cred-line b {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-deep);
	margin-right: 12px;
}

@media (max-width: 1099px) {
	.ay-tira .ay-capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.ay-tira .ay-capacidades { grid-template-columns: 1fr; }
	.ay-cred-line { margin-top: var(--wp--preset--spacing--s3); }
}

/* ==============================================================
   SINGLE PAGE · anclas y desplazamiento suave
   ============================================================== */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* La cabecera fija no debe tapar el inicio de cada sección */
#work, #ai, #about, #contact { scroll-margin-top: 90px; }

@media (max-width: 720px) {
	#work, #ai, #about, #contact { scroll-margin-top: 76px; }
}

/* Trayectoria dentro de About */
.ay-historial { margin-top: var(--wp--preset--spacing--s4); }
.ay-historial + .ay-enlace { margin-top: var(--wp--preset--spacing--s2); }

/* El testimonio, ya dentro de About */
.ay-testimonio { margin-top: var(--wp--preset--spacing--s5); }

/* ==============================================================
   WORK V2 · bloques por empresa con highlights, sin pestañas
   ============================================================== */
.ay-bloque { margin-top: var(--wp--preset--spacing--s5); }

.ay-bloque__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px var(--wp--preset--spacing--s3);
	border-top: 2px solid var(--wp--preset--color--slate);
	padding-top: 12px;
}

.ay-bloque__head h3 { margin: 0; font-size: var(--wp--preset--font-size--h3); }

.ay-bloque__shot { margin-top: var(--wp--preset--spacing--s3); }
.ay-bloque__shot img { width: 100%; height: auto; display: block; border: 1px solid var(--wp--preset--color--hairline); }

.ay-hl { margin-top: var(--wp--preset--spacing--s3); }

.ay-hl a {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--s3);
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	text-decoration: none;
	color: inherit;
	transition: padding-left .18s ease;
}

.ay-hl a:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.ay-hl a:hover { padding-left: 8px; }

.ay-hl__n {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--slate-40);
	padding-top: 3px;
}

.ay-hl b { display: block; font-size: var(--wp--preset--font-size--body); font-weight: 600; }
.ay-hl span { display: block; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); margin-top: 3px; }

.ay-full {
	margin-top: var(--wp--preset--spacing--s5);
	border-left: 3px solid var(--wp--preset--color--terracotta);
	padding-left: var(--wp--preset--spacing--s3);
}

.ay-full h3 { margin: 6px 0 8px; font-family: var(--wp--preset--font-family--fraunces); font-weight: 500; font-size: var(--wp--preset--font-size--lead); line-height: 1.15; }
.ay-full p { margin: 0 0 10px; font-size: var(--wp--preset--font-size--body-sm); max-width: 60ch; }

.ay-enlace a::after { content: "\2192"; }

@media (min-width: 900px) {
	.ay-banda { padding-block: var(--wp--preset--spacing--s3); }
	.ay-retrato-hero { max-height: 320px; }
	.ay-banda .has-display-font-size { font-size: clamp(30px, 2.9vw, 44px); }
}

/* ==============================================================
   TARJETAS DE TRABAJO · tres, misma jerarquía
   ============================================================== */
.ay-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s4);
	margin-top: var(--wp--preset--spacing--s4);
}

@media (max-width: 899px) { .ay-cards { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--s5); } }

.ay-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }

.ay-card__shot {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--hairline);
	display: grid;
	place-items: center;
}

.ay-card__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

.ay-card:hover .ay-card__shot img { transform: scale(1.03); }

.ay-card__shot span {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	text-align: center;
	padding: 0 20px;
}

.ay-card__meta { margin: var(--wp--preset--spacing--s2) 0 6px; }

.ay-card h3 {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--h3);
	line-height: 1.2;
}

.ay-card p { margin: 0 0 12px; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); }

.ay-card__cta {
	margin-top: auto;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--terracotta-deep);
	display: inline-flex;
	gap: 6px;
}

.ay-card__cta::after { content: "\2192"; transition: transform .18s ease; }
.ay-card:hover .ay-card__cta::after { transform: translateX(4px); }

/* ==============================================================
   TARJETAS V2 · encuadre, color y alineación
   ============================================================== */
.ay-cards { align-items: stretch; }

.ay-card { color: var(--wp--preset--color--ink); }

.ay-card__shot {
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--white);
}

.ay-card__shot img {
	object-fit: cover;
	object-position: center top;
}

/* La ficha, en una línea y sin partirse en tres */
.ay-card__meta {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: var(--wp--preset--color--slate-40);
	margin: 12px 0 6px;
}

/* El titular, en tinta: el color de señal se reserva al enlace */
.ay-card h3 { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--lead); }
.ay-card p { color: var(--wp--preset--color--slate-60); }
.wp-site-blocks main a.ay-card { text-decoration: none; }

/* ==============================================================
   CABECERA FIJA · que no flote en móvil
   ============================================================== */
.wp-site-blocks > header {
	top: 0;
	background: var(--wp--preset--color--paper);
	box-shadow: 0 1px 0 var(--wp--preset--color--hairline);
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header { top: 46px; }
}

@media (min-width: 783px) {
	.admin-bar .wp-site-blocks > header { top: 32px; }
}

/* ==============================================================
   TARJETAS V3 · jerarquía interna y aire tras la imagen
   ============================================================== */
.ay-card p.ay-card__meta {
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 1.5;
	color: var(--wp--preset--color--slate-40);
	margin: 0 0 var(--wp--preset--spacing--s2);
	text-transform: uppercase;
}

/* El titular manda: va justo debajo de la imagen */
.ay-card h3 {
	order: -1;
	margin: var(--wp--preset--spacing--s3) 0 8px;
	font-size: var(--wp--preset--font-size--h3);
	line-height: 1.25;
}

.ay-card { display: flex; flex-direction: column; }
.ay-card__shot { order: -2; }
.ay-card p:not(.ay-card__meta) { margin: 0 0 var(--wp--preset--spacing--s3); }

/* ==============================================================
   TARJETAS EN FILA · una por proyecto, lado alterno
   ============================================================== */
.ay-cards {
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: var(--wp--preset--spacing--s3);
}

.ay-card {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--s5);
	align-items: center;
	padding-block: var(--wp--preset--spacing--s5);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.ay-card:last-child { border-bottom: 1px solid var(--wp--preset--color--hairline); }

/* Alterna el lado de la imagen */
.ay-card:nth-child(even) .ay-card__shot { order: 2; }

.ay-card__shot {
	order: 0;
	aspect-ratio: 16 / 10;
	margin: 0;
}

/* Columna de texto: se agrupa para que el orden no la rompa */
.ay-card h3 {
	order: 0;
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.18;
}

.ay-card p.ay-card__meta { order: 1; margin: 0 0 12px; }
.ay-card p:not(.ay-card__meta) { order: 2; margin: 0 0 var(--wp--preset--spacing--s3); max-width: 46ch; }
.ay-card__cta { order: 3; margin-top: 0; }

/* Sin imagen: la tarjeta ocupa el ancho de lectura */
.ay-card--sin-imagen { grid-template-columns: minmax(0, 8fr); }

@media (max-width: 899px) {
	.ay-card { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--s3); padding-block: var(--wp--preset--spacing--s4); }
	.ay-card:nth-child(even) .ay-card__shot { order: 0; }
}

/* ==============================================================
   TARJETAS V4 · imagen + bloque de texto, sin elementos sueltos
   ============================================================== */
.ay-card {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--wp--preset--spacing--s4);
	align-items: center;
	padding-block: var(--wp--preset--spacing--s4);
}

.ay-card__body { display: block; }

.ay-card__body h3 { margin: 0 0 6px; font-size: var(--wp--preset--font-size--lead); line-height: 1.18; }
.ay-card__body p.ay-card__meta { margin: 0 0 12px; }
.ay-card__body p:not(.ay-card__meta) { margin: 0 0 14px; max-width: 42ch; }
.ay-card__body .ay-card__cta { margin: 0; }

.ay-card__shot { aspect-ratio: 16 / 10; margin: 0; }
.ay-card:nth-child(even) .ay-card__shot { order: 2; }

@media (max-width: 899px) {
	.ay-card { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--s3); }
	.ay-card:nth-child(even) .ay-card__shot { order: 0; }
}

/* ==============================================================
   TARJETAS V5 · misma medida de imagen en todas las filas
   ============================================================== */
.ay-card:nth-child(even) {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.ay-card:nth-child(even) .ay-card__shot { order: 2; }
.ay-card:nth-child(even) .ay-card__body { order: 1; }

@media (max-width: 899px) {
	.ay-card:nth-child(even) { grid-template-columns: 1fr; }
	.ay-card:nth-child(even) .ay-card__shot { order: 0; }
	.ay-card:nth-child(even) .ay-card__body { order: 1; }
}

/* ==============================================================
   CABECERA MOVIL FIX · sin hueco arriba
   La barra de administración de WordPress no es fija por debajo
   de 600px: se va con el scroll y dejaba un hueco de 46px.
   ============================================================== */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header { top: 0; }
}

/* Zigzag fuera: todas las imágenes al mismo lado, más fácil de escanear */
.ay-card:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ay-card:nth-child(even) .ay-card__shot { order: 0; }
.ay-card:nth-child(even) .ay-card__body { order: 1; }

/* ==============================================================
   MOVIL UNA COLUMNA · todas las tarjetas igual, sin excepciones
   Va al final a propósito: las reglas de nth-child anteriores
   volvían a poner dos columnas en las filas pares.
   ============================================================== */
@media (max-width: 899px) {
	.ay-card,
	.ay-card:nth-child(even) {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--s3);
	}

	.ay-card .ay-card__shot,
	.ay-card:nth-child(even) .ay-card__shot { order: 0; }

	.ay-card .ay-card__body,
	.ay-card:nth-child(even) .ay-card__body { order: 1; }
}

/* ==============================================================
   SEPARACION SECCIONES · menos hueco muerto, más contraste
   ============================================================== */
#work { padding-top: var(--wp--preset--spacing--s5); }
.ay-tira { padding-bottom: var(--wp--preset--spacing--s4); }

/* Fuera la regla bajo el titular: la separación la marca el aire */
#work .ay-fila + *,
#work hr { display: none; }

/* Entradilla de la sección */
.ay-intro {
	margin: var(--wp--preset--spacing--s2) 0 0;
	max-width: 62ch;
	font-style: italic;
	line-height: 1.35;
	color: var(--wp--preset--color--slate-60);
}

/* La primera tarjeta no necesita tanto aire por encima */
.ay-cards { margin-top: var(--wp--preset--spacing--s4); }
.ay-card:first-child { padding-top: 0; border-top: 0; }

/* ==============================================================
   INTRO V2 · entradilla más contenida, línea de la tira intacta
   ============================================================== */
.ay-tira { border-bottom: 1px solid var(--wp--preset--color--hairline); }

.ay-intro {
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.45;
	max-width: 58ch;
	font-style: italic;
	color: var(--wp--preset--color--slate-60);
	margin-top: var(--wp--preset--spacing--s2);
}

/* ==============================================================
   INTRO V3 · entradilla más ligera y menos hueco hasta la 1ª ficha
   ============================================================== */
.ay-intro {
	font-family: var(--wp--preset--font-family--inter);
	font-style: normal;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	max-width: 64ch;
	color: var(--wp--preset--color--slate-60);
	margin-top: var(--wp--preset--spacing--s2);
}

.ay-cards { margin-top: var(--wp--preset--spacing--s3); }

/* ==============================================================
   INTRO V4 · aire real entre la entradilla y el primer proyecto
   ============================================================== */
.ay-intro { margin-bottom: 0; }
.ay-cards { margin-top: var(--wp--preset--spacing--s6); }
.ay-card:first-child { padding-top: 0; }

/* ==============================================================
   RETRATOS V2 · la foto ya viene en B/N, sin filtro encima
   ============================================================== */
.ay-retrato-hero {
	background: transparent;
	border: 0;
	overflow: hidden;
}

.ay-retrato-hero img {
	filter: none;
	object-fit: cover;
	object-position: center top;
}

.ay-retrato-hero:hover img { filter: none; }

/* About: retrato en color, alineado con el texto */
.ay-retrato {
	aspect-ratio: 4 / 5;
	border: 0;
	background: transparent;
	overflow: hidden;
	max-width: 300px;
	margin-bottom: var(--wp--preset--spacing--s4);
}

.ay-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==============================================================
   RETRATO RECORTADO · desvanecido inferior y alineación
   ============================================================== */
.ay-retrato-hero {
	max-height: none;
	aspect-ratio: 4 / 5;
	margin-top: var(--wp--preset--spacing--s3);
}

.ay-retrato-hero img {
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* ==============================================================
   RETRATO SIN HOVER · el retrato no es pulsable, no se mueve
   Se queda solo la entrada al cargar, escalonada con el texto.
   ============================================================== */
.ay-hero__visual:hover img,
.ay-retrato-hero:hover img {
	transform: none;
	filter: none;
}

.ay-hero__visual img { transition: none; }

.ay-retrato-hero {
	animation: ay-entrada-retrato .7s cubic-bezier(.22,.61,.36,1) .3s both;
}

@keyframes ay-entrada-retrato {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ay-retrato-hero { animation: none; }
}

/* ==============================================================
   IA BINARIA · dos columnas enfrentadas, no seis párrafos
   ============================================================== */
.ay-ia2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s5);
	margin-top: var(--wp--preset--spacing--s4);
}

@media (max-width: 781px) {
	.ay-ia2 { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--s4); }
}

.ay-ia2__col { border-top: 2px solid var(--wp--preset--color--slate); padding-top: 14px; }
.ay-ia2__col--no { border-top-color: var(--wp--preset--color--terracotta); }

.ay-ia2__head {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--s2);
	color: var(--wp--preset--color--slate-40);
}

.ay-ia2__col--no .ay-ia2__head { color: var(--wp--preset--color--terracotta-deep); }

.ay-ia2 ul { list-style: none; margin: 0; padding: 0; }

.ay-ia2 li {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.ay-ia2 li:first-child { border-top: 0; padding-top: 0; }

.ay-ia2__prueba {
	margin-top: var(--wp--preset--spacing--s4);
	padding-top: var(--wp--preset--spacing--s3);
	border-top: 1px solid var(--wp--preset--color--hairline);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--slate-60);
	max-width: 64ch;
}

/* ==============================================================
   IA SOBRE SLATE · banda oscura a mitad de página
   ============================================================== */
.ay-seccion--oscura {
	padding-block: var(--wp--preset--spacing--s6);
	padding-inline: var(--wp--preset--spacing--s5);
}

@media (max-width: 781px) {
	.ay-seccion--oscura { padding-inline: var(--wp--preset--spacing--s3); }
}

.ay-seccion--oscura .ay-label { color: var(--wp--preset--color--slate-40); }
.ay-seccion--oscura h2 { color: var(--wp--preset--color--paper); }
.ay-seccion--oscura p { color: #C6CFD5; }

/* Reglas: gris claro para lo que hace, terracota para lo que no */
.ay-seccion--oscura .ay-ia2__col { border-top-color: rgba(245, 242, 236, 0.35); }
.ay-seccion--oscura .ay-ia2__col--no { border-top-color: var(--wp--preset--color--terracotta); }

.ay-seccion--oscura .ay-ia2__head { color: var(--wp--preset--color--slate-40); }
.ay-seccion--oscura .ay-ia2__col--no .ay-ia2__head { color: var(--wp--preset--color--terracotta); }

.ay-seccion--oscura .ay-ia2 li {
	color: var(--wp--preset--color--paper);
	border-top-color: rgba(245, 242, 236, 0.16);
}

.ay-seccion--oscura .ay-ia2__prueba {
	border-top-color: rgba(245, 242, 236, 0.16);
	color: #C6CFD5;
}

/* Filas alineadas entre columnas */
.ay-ia2 li { min-height: 3.4em; display: flex; align-items: center; }

/* ==============================================================
   RESUME PROPIO · trayectoria a ancho completo, sin columnas rotas
   ============================================================== */
#resume { scroll-margin-top: 90px; }

.ay-historial {
	margin-top: 0;
	display: block;
}

.ay-historial div {
	grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr);
	gap: var(--wp--preset--spacing--s3);
	padding: 12px 0;
}

.ay-historial b { white-space: normal; }

@media (max-width: 781px) {
	.ay-historial div { grid-template-columns: 1fr; gap: 2px; }
}

.ay-credenciales { margin-top: var(--wp--preset--spacing--s5); }

.ay-cv { margin-top: var(--wp--preset--spacing--s4); }

/* El testimonio vive ahora dentro de About */
.ay-testimonio { margin-top: var(--wp--preset--spacing--s5); }

/* ==============================================================
   CITA CON FOTO · caja sutil, separada del cuerpo de About
   ============================================================== */
.ay-quote {
	margin: var(--wp--preset--spacing--s3) 0 0;
	padding: var(--wp--preset--spacing--s4);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--hairline);
	position: relative;
}

.ay-quote__foto {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	display: block;
	margin-bottom: var(--wp--preset--spacing--s2);
	border: 1px solid var(--wp--preset--color--hairline);
}

.ay-quote blockquote {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.3;
	max-width: 46ch;
}

.ay-quote figcaption {
	margin-top: var(--wp--preset--spacing--s2);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
}

/* ==============================================================
   CITA V2 · foto al lado, la caja usa el ancho disponible
   ============================================================== */
.ay-testimonio {
	display: block;
	margin-top: var(--wp--preset--spacing--s5);
}

.ay-quote {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--s3);
	align-items: start;
	padding: var(--wp--preset--spacing--s4);
}

.ay-quote__foto { margin: 0; width: 72px; height: 72px; }

.ay-quote blockquote {
	max-width: none;
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.32;
}

.ay-quote figcaption { grid-column: 2; margin-top: var(--wp--preset--spacing--s2); }

@media (max-width: 599px) {
	.ay-quote { grid-template-columns: 1fr; }
	.ay-quote figcaption { grid-column: 1; }
}

/* ==============================================================
   PIE LEGAL · enlaces discretos, sin raya sobrante
   ============================================================== */
.wp-site-blocks > footer { border-top: 0; margin-top: 0; }

.ay-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s3);
	margin: 0;
}

.ay-legal a {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	text-decoration: none;
}

.ay-legal a:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }

/* Páginas legales: medida de lectura cómoda */
.ay-seccion h1 { font-size: var(--wp--preset--font-size--h-1); line-height: 1.1; margin-bottom: var(--wp--preset--spacing--s4); }

/* ==============================================================
   FORMULARIO · sobre fondo Slate, dentro del sistema
   ============================================================== */
.wpcf7 { max-width: 560px; margin-top: var(--wp--preset--spacing--s4); }

.wpcf7 label {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
	margin-bottom: 6px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	background: rgba(245, 242, 236, 0.06);
	border: 1px solid rgba(245, 242, 236, 0.28);
	border-radius: 0;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
	border-color: transparent;
}

.wpcf7 .ay-f { margin-bottom: var(--wp--preset--spacing--s3); }

.wpcf7 .ay-consent,
.wpcf7 .ay-consent .wpcf7-list-item-label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	text-transform: none;
	letter-spacing: 0;
	color: #C6CFD5;
}

.wpcf7 .ay-consent .wpcf7-list-item { margin: 0; }
.wpcf7 .ay-consent a { color: var(--wp--preset--color--terracotta); }

.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--terracotta);
	color: #FFFFFF;
	border: 0;
	border-radius: 0;
	padding: 14px 26px;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	cursor: pointer;
	transition: background .2s ease;
}

.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--terracotta-deep); }

.wpcf7 .wpcf7-response-output {
	border-color: rgba(245, 242, 236, 0.3);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--body-sm);
	margin: var(--wp--preset--spacing--s3) 0 0;
}

.wpcf7-not-valid-tip { color: #E8A48A; font-size: var(--wp--preset--font-size--body-sm); }

/* El honeypot no se ve nunca */
.wpcf7 input[name="website-url"] { position: absolute; left: -9999px; }

.ay-contacto { margin-top: var(--wp--preset--spacing--s4); }

/* ==============================================================
   PIE SIN RAYA · el cambio de fondo ya separa; nada más hace falta
   ============================================================== */
.wp-site-blocks > footer,
.wp-site-blocks > footer > .wp-block-group {
	border-top: 0 !important;
	margin-top: 0 !important;
	padding-block: var(--wp--preset--spacing--s4);
}

.wp-site-blocks > footer hr,
.wp-site-blocks > footer .wp-block-separator { display: none; }

/* ==============================================================
   PIE V3 · mismos márgenes laterales que el resto de la página
   ============================================================== */
.ay-pie {
	padding-block: var(--wp--preset--spacing--s4);
	padding-inline: var(--wp--preset--spacing--s5);
	border-top: 0;
}

@media (max-width: 781px) {
	.ay-pie { padding-inline: var(--wp--preset--spacing--s3); }
}

.ay-pie > .wp-block-group { gap: var(--wp--preset--spacing--s3); }
.ay-pie .ay-label { margin: 0; }

/* Formulario alineado con el resto del cierre */
#contact .wpcf7 { margin-left: 0; }

/* ==============================================================
   FORM ALINEADO · a la izquierda, como el titular y los enlaces
   ============================================================== */
#contact > .wpcf7 {
	margin-left: max(0px, calc((100% - 1180px) / 2)) !important;
	margin-right: auto !important;
}

/* PIE V4 · más aire arriba y abajo */
.ay-pie { padding-block: var(--wp--preset--spacing--s5) !important; }

/* ==============================================================
   RESUME AIRE · el titular respira antes de la lista
   ============================================================== */
#resume h2 { margin-bottom: var(--wp--preset--spacing--s4); }
#resume .ay-historial div:first-child { padding-top: 14px; }

/* ==============================================================
   PAGINA DE CASO · imágenes grandes, texto con medida de lectura
   ============================================================== */
.ay-caso-img { margin: var(--wp--preset--spacing--s4) 0; }
.ay-caso-img img { width: 100%; height: auto; display: block; border: 1px solid var(--wp--preset--color--hairline); }

.ay-seccion h3.wp-block-heading {
	margin: var(--wp--preset--spacing--s4) 0 var(--wp--preset--spacing--s2);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
}

.ay-seccion .ay-fila p { max-width: 64ch; }

/* Huecos pendientes: visibles para ti, imposibles de pasar por alto */
.ay-pendiente {
	padding: 12px 16px;
	border-left: 3px solid var(--wp--preset--color--terracotta);
	background: var(--wp--preset--color--terracotta-08, #FBF3EF);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--terracotta-deep);
}

/* ==============================================================
   INDICE DE CASO · resumen arriba y anclas a cada proyecto
   ============================================================== */
#loyalty, #compare, #orders { scroll-margin-top: 90px; }
.ay-indice { margin-top: var(--wp--preset--spacing--s5); }
.ay-seccion .ay-credenciales { margin-top: var(--wp--preset--spacing--s4); }
.ay-seccion .ay-intro + .ay-pendiente { margin-top: var(--wp--preset--spacing--s2); }

/* ==============================================================
   GALERIAS DE CASO · una o dos columnas, con pie en Mono
   ============================================================== */
.ay-galeria { display: grid; gap: var(--wp--preset--spacing--s3); margin: var(--wp--preset--spacing--s4) 0; }
.ay-galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 781px) { .ay-galeria--2 { grid-template-columns: 1fr; } }

.ay-fig { margin: 0; display: flex; flex-direction: column; }

.ay-fig img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
	display: block;
	border: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--white);
}

.ay-galeria--1 .ay-fig img { aspect-ratio: auto; }
/* Huertapp (page 1028): imágenes completas, sin recorte — storyboards, mapas y capturas tienen texto en los bordes */
.page-id-1028 .ay-galeria--2 { align-items: start; }
.page-id-1028 .ay-fig img { aspect-ratio: auto; height: auto; object-fit: contain; }

.ay-fig figcaption {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-40);
}

/* Huecos de imagen: dicen qué va ahí */
.ay-ph {
	aspect-ratio: 16 / 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: var(--wp--preset--spacing--s3);
	border: 1px dashed var(--wp--preset--color--terracotta);
	background: var(--wp--preset--color--terracotta-08, #FBF3EF);
}

.ay-ph b { font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--terracotta-deep); }
.ay-ph span { font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--slate-60); max-width: 40ch; }
.ay-fig--ph figcaption { color: var(--wp--preset--color--terracotta-deep); }

/* ==============================================================
   RAIL DE CASO · la columna izquierda pasa a ser navegación
   Solo en páginas que llevan .ay-rail
   ============================================================== */
.ay-rail { display: none; }
#also { scroll-margin-top: 90px; }

@media (min-width: 1100px) {
	/* Columna izquierda más estrecha: las imágenes ganan ancho */
	body:has(.ay-rail) .ay-fila {
		grid-template-columns: 170px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--s5);
	}

	/* Las etiquetas de sección se ocultan: el rail ya dice dónde estás */
	body:has(.ay-rail) .ay-seccion[id] .ay-fila > .wp-block-group:first-child { visibility: hidden; }

	.ay-rail {
		display: flex;
		flex-direction: column;
		gap: 10px;
		position: fixed;
		top: 140px;
		left: max(64px, calc((100vw - 1180px) / 2));
		width: 170px;
		z-index: 20;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}

	.ay-rail.is-visible { opacity: 1; pointer-events: auto; }

	.ay-rail__t {
		margin: 0 0 6px;
		font-family: var(--wp--preset--font-family--ibm-plex-mono);
		font-size: var(--wp--preset--font-size--label);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--wp--preset--color--slate-40);
	}

	body .ay-rail a {
		font-size: var(--wp--preset--font-size--body-sm);
		color: var(--wp--preset--color--slate-60);
		text-decoration: none;
		padding-left: 12px;
		border-left: 2px solid var(--wp--preset--color--hairline);
		transition: color .2s ease, border-color .2s ease;
	}

	.ay-rail a span {
		font-family: var(--wp--preset--font-family--ibm-plex-mono);
		font-size: var(--wp--preset--font-size--label);
		color: var(--wp--preset--color--slate-40);
		margin-right: 6px;
	}

	body .ay-rail a.is-on,
	body .ay-rail a:hover {
		color: var(--wp--preset--color--ink);
		border-left-color: var(--wp--preset--color--terracotta);
	}
}

@media (prefers-reduced-motion: reduce) { .ay-rail { transition: none; } }

/* ==============================================================
   BORRADORES · texto que YO he redactado y tú tienes que validar
   ============================================================== */
#checkout { scroll-margin-top: 90px; }

.ay-borrador {
	border: 1px dashed var(--wp--preset--color--terracotta);
	background: var(--wp--preset--color--terracotta-08, #FBF3EF);
	padding: var(--wp--preset--spacing--s3);
	margin: var(--wp--preset--spacing--s2) 0;
}

.ay-borrador b {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-deep);
}

.ay-borrador p { margin: 0; font-size: var(--wp--preset--font-size--body-sm); max-width: 64ch; }

/* ==============================================================
   MOVIL DE CASO · barra de accesos fija y galerías plegadas
   ============================================================== */
@media (max-width: 1099px) {
	.ay-rail {
		display: flex;
		flex-direction: row;
		gap: 8px;
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		z-index: 40;
		padding: 10px var(--wp--preset--spacing--s3);
		background: var(--wp--preset--color--paper);
		box-shadow: 0 1px 0 var(--wp--preset--color--hairline);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
	}

	.admin-bar .ay-rail { top: 102px; }
	.ay-rail::-webkit-scrollbar { display: none; }
	.ay-rail.is-visible { opacity: 1; pointer-events: auto; }
	.ay-rail__t { display: none; }

	body .ay-rail a {
		flex: 0 0 auto;
		padding: 7px 12px;
		border: 1px solid var(--wp--preset--color--hairline);
		border-radius: 999px;
		font-size: var(--wp--preset--font-size--body-sm);
		color: var(--wp--preset--color--slate-60);
		text-decoration: none;
		white-space: nowrap;
	}

	body .ay-rail a.is-on {
		background: transparent;
		border-color: var(--wp--preset--color--terracotta);
		color: var(--wp--preset--color--ink);
	}

	body .ay-rail a.is-on span { color: var(--wp--preset--color--terracotta-deep); }

	#loyalty, #compare, #orders, #checkout, #also,
	#form, #bundles, #quickview, #also-hp { scroll-margin-top: 130px; }

	/* Galerías secundarias plegadas tras un botón */
	.ay-oculta { display: none; }

	.ay-vermas {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: var(--wp--preset--spacing--s2) 0 var(--wp--preset--spacing--s3);
		padding: 10px 16px;
		background: transparent;
		border: 1px solid var(--wp--preset--color--hairline);
		font-family: var(--wp--preset--font-family--ibm-plex-mono);
		font-size: var(--wp--preset--font-size--label);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--wp--preset--color--terracotta-deep);
		cursor: pointer;
	}
}

/* ==============================================================
   COLAPSO POR PROYECTO · móvil: primera pantalla visible, resto a un toque
   ============================================================== */
@media (max-width: 1099px) {
	.ay-mas { display: none; }
	.ay-mas.is-open { display: block; }
	.ay-vermas { width: 100%; justify-content: center; }
}

#form, #bundles, #quickview, #also-hp { scroll-margin-top: 90px; }

/* Anclas del caso de estudio */
#research, #define, #ideate, #test, #ui, #learned { scroll-margin-top: 90px; }
@media (max-width: 1099px) { #research, #define, #ideate, #test, #ui, #learned { scroll-margin-top: 130px; } }