/*
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: 1.2.0
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; }