/* ==========================================================================
   MÓDULOS de NUTA: el estilo viaja con el módulo, no con el tema.
   Este archivo se carga en la web y DENTRO del editor de bloques, de modo
   que quien maqueta una página no tiene que pensar en estilos: inserta el
   módulo y se ve exactamente como en la web.

   Lo usan: el bloque «Cursos de NUTA», la página de Cursos y las
   páginas de los pilares (comparten el parcial _servicios-lista.php).
   ========================================================================== */

:root {
	--nuta-ink: #304254;
	--nuta-lima: #FF6D4D;
	--nuta-suave: #6E6E6A;
	--nuta-linea: #EEE4DB;
}

/* La letra de la casa también dentro del editor (ahí el tema no carga).
   .editor-styles-wrapper es el lienzo del editor: así lo que se maqueta se ve
   con la misma tipografía y color que la web. */
.nuta-serv-modulo, .nuta-catalogo, .nuta-cal-publico, .nuta-gal-publica,
.nuta-hero, .nuta-sobre,
.editor-styles-wrapper {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--nuta-ink);
}
.nuta-serv-modulo, .nuta-cal-modulo, .nuta-gal-modulo { margin: 1.5rem 0; }

/* ------------------------------------------------------------ piezas comunes */
.nuta-web-vacio { color: var(--nuta-suave); }
.nuta-web-vacio a { color: var(--nuta-ink); text-decoration-color: var(--nuta-lima); text-decoration-thickness: 2px; }

.nuta-web-rotulo {
	margin: 0 0 1rem; padding-bottom: .55rem;
	font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	border-bottom: 2px solid var(--nuta-ink);
	display: flex; align-items: center; gap: .6rem;
}
.nuta-web-nota { margin: -.4rem 0 1rem; font-size: .9rem; color: var(--nuta-suave); }
.nuta-serv-modulo > .nuta-web-nota { margin: 0 0 1rem; }
.nuta-web-cta {
	display: inline-block; margin-top: auto;
	font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--nuta-ink);
	text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 3px;
}
.nuta-web-cta:hover { background: var(--nuta-lima); text-decoration-color: var(--nuta-ink); }

/* ------------------------------------------ cursos: rejilla de cartas */
.nuta-cat-bloque { margin: 0 0 2.8rem; }
.nuta-cat-rejilla {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.6rem;
}
/* La card tiene DOS zonas: arriba lo que es (título, frase, chips) y abajo,
   ancladas al pie, la ficha y el CTA — así todas las cards alinean. */
.nuta-serv-carta {
	display: flex; flex-direction: column;
	border: 2px solid var(--nuta-ink); background: #FFFBF5; padding: 1.4rem 1.5rem 1.35rem;
}
.nuta-serv-meta { margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.nuta-serv-pilar {
	background: var(--nuta-lima); color: var(--nuta-ink); padding: .2rem .5rem;
	font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.nuta-serv-disc {
	color: var(--nuta-suave);
	font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.nuta-serv-carta h3 {
	margin: 0 0 .35rem; font-size: 1.22rem; line-height: 1.2; font-weight: 800;
	letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance;
}
.nuta-serv-claim {
	margin: 0 0 .2rem; font-size: .92rem; font-weight: 500;
	line-height: 1.5; color: var(--nuta-suave);
}
.nuta-serv-texto { font-size: .92rem; line-height: 1.55; color: var(--nuta-suave); }
.nuta-serv-texto p { margin: 0 0 .5rem; }
.nuta-serv-pie { margin: .2rem 0 0; display: flex; flex-direction: column; gap: .15rem; }
.nuta-serv-precio { font-size: 1.02rem; }
.nuta-serv-duracion, .nuta-pack-ahorro { font-size: .82rem; color: var(--nuta-suave); }
.nuta-pack-lista { margin: 0 0 .4rem; padding: 0 0 0 1.1rem; font-size: .9rem; line-height: 1.6; }

/* La tabla de la card empuja hacia abajo: es la zona anclada al pie. */
.nuta-serv-carta .nuta-serv-tabla { margin-top: auto; padding-top: .7rem; }
.nuta-serv-carta:has(.nuta-serv-tabla) .nuta-web-cta { margin-top: 1rem; }

/* Rotulito de cada sección de la tabla («La clase», «Precios»). */
.nuta-ficha-sec {
	margin: .9rem 0 .1rem; display: inline-block;
	background: var(--nuta-lima); padding: .16rem .55rem;
	font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.nuta-serv-tabla > .nuta-ficha-sec:first-child { margin-top: 0; }

/* --------- calendario: controles (vistas, navegación y filtro) */
.nuta-cal-controles {
	display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
	margin: 0 0 1.1rem;
}
.nuta-cal-vistas { display: flex; border: 2px solid var(--nuta-ink); border-radius: 5px; overflow: hidden; }
.nuta-cal-vistas a {
	padding: .4rem .9rem; font-size: .72rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--nuta-ink); text-decoration: none; background: #FFFBF5;
}
.nuta-cal-vistas a + a { border-left: 2px solid var(--nuta-ink); }
.nuta-cal-vistas a.nuta-cal-vista-activa { background: var(--nuta-lima); }

/* Los interruptores de días del repetir (L·M·X·J·V·S·D) */
.nuta-dias-switches { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .6rem; }
.nuta-dia-chip { position: relative; }
.nuta-dia-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nuta-dia-chip span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.2rem; height: 2.2rem; border: 2px solid var(--nuta-ink); border-radius: 999px;
	font-weight: 700; font-size: .85rem; background: #FFFBF5; color: var(--nuta-ink);
}
.nuta-dia-chip input:checked + span { background: var(--nuta-lima); }
.nuta-dia-chip input:focus-visible + span { outline: 3px solid var(--nuta-ink); outline-offset: 2px; }

.nuta-cal-nav { display: flex; align-items: center; gap: .6rem; }
.nuta-cal-flecha {
	display: grid; place-items: center; width: 32px; height: 32px;
	border: 2px solid var(--nuta-ink); border-radius: 5px;
	color: var(--nuta-ink); text-decoration: none; font-weight: 700;
	background: #FFFBF5;
}
.nuta-cal-flecha:hover, .nuta-cal-flecha:focus-visible { background: var(--nuta-lima); }
.nuta-cal-rotulo {
	font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	min-width: 10ch; text-align: center;
}
.nuta-cal-hoy-btn {
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--nuta-ink);
	text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 3px;
}

.nuta-cal-filtro { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nuta-cal-filtro select {
	padding: .4rem .6rem; font: inherit; font-size: .85rem;
	border: 2px solid var(--nuta-ink); border-radius: 5px; background: #FFFBF5;
	color: var(--nuta-ink); max-width: 260px;
}
.nuta-cal-filtrar {
	padding: .45rem .8rem; font-size: .72rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	border: 2px solid var(--nuta-ink); border-radius: 5px;
	background: var(--nuta-lima); color: var(--nuta-ink); cursor: pointer;
}
@media (max-width: 700px) {
	.nuta-cal-filtro { margin-left: 0; width: 100%; flex-wrap: wrap; }
	.nuta-cal-filtro select { flex: 1 1 140px; min-width: 0; max-width: none; }
}

/* --------- calendario: la vista MES (rejilla mensual clásica) */
.nuta-cal-mes-envoltura { overflow-x: auto; }
.nuta-cal-mes {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
	min-width: 640px; border: 2px solid var(--nuta-ink); background: #FFFBF5;
}
.nuta-cal-mes-cab {
	padding: .45rem .5rem; text-align: center;
	font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	border-bottom: 2px solid var(--nuta-ink); background: #FFFBF5;
}
.nuta-cal-mes-dia {
	min-height: 92px; padding: .35rem .4rem .5rem;
	border-top: 1px solid var(--nuta-linea); border-left: 1px solid var(--nuta-linea);
	display: flex; flex-direction: column; gap: .25rem;
}
.nuta-cal-mes-dia:nth-child(7n + 1) { border-left: 0; }
.nuta-cal-mes-num { font-size: .74rem; font-weight: 700; color: var(--nuta-suave); }
.nuta-cal-mes-dia.nuta-cal-hoy .nuta-cal-mes-num {
	display: inline-grid; place-items: center; width: 22px; height: 22px;
	background: var(--nuta-lima); color: var(--nuta-ink); border-radius: 50%;
}
.nuta-cal-fuera { background: #FFFBF5; }
.nuta-cal-fuera > * { opacity: .45; }
.nuta-cal-mes-item {
	display: block; font-size: .7rem; line-height: 1.25;
	border-left: 3px solid var(--nuta-serv, var(--nuta-lima)); padding-left: .35rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nuta-cal-mes-item b { font-weight: 800; }
/* El lugar en la rejilla del mes va en la misma línea: la celda es estrecha y
   ya recorta con puntos suspensivos lo que no cabe. */
.nuta-cal-mes-lugar { font-style: normal; color: var(--nuta-suave); }
.nuta-cal-mes-lugar::before { content: "· "; }
/* El grupo de la clase, cuando el curso está repartido en varios. */
.nuta-cal-mes-grupo { font-style: normal; font-weight: 600; color: var(--nuta-suave); }
.nuta-cal-mes-grupo::before { content: "· "; font-weight: 400; }
.nuta-cal-mes-item.nuta-cal-cancelada {
	border-left-color: var(--nuta-linea);
	text-decoration: line-through; color: var(--nuta-suave);
}

/* --------------------- calendario: la semana en curso, como un horario */
.nuta-cal-semana {
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
	border: 2px solid var(--nuta-ink); background: #FFFBF5;
}
.nuta-cal-dia {
	display: flex; flex-direction: column; gap: .7rem;
	padding: .85rem .7rem 1rem; min-height: 230px;
	border-left: 1px solid var(--nuta-linea);
}
.nuta-cal-dia:first-child { border-left: 0; }

.nuta-cal-dia-cab {
	display: flex; flex-direction: column; gap: .1rem;
	padding-bottom: .5rem; border-bottom: 2px solid var(--nuta-ink);
}
.nuta-cal-dia-nombre {
	font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.nuta-cal-dia-fecha { font-size: .76rem; color: var(--nuta-suave); }
.nuta-cal-badge {
	background: var(--nuta-lima); padding: .12rem .45rem;
	font-size: .62rem; letter-spacing: .1em;
}

/* Hoy se enciende; lo ya pasado se apaga un poco. */
.nuta-cal-hoy { background: #FFECE6; }
.nuta-cal-hoy .nuta-cal-dia-cab { border-bottom: 4px solid var(--nuta-lima); }
.nuta-cal-pasado > * { opacity: .5; }

/* --------- landings de pilar: cartel editorial, marquee y cierre en lima -- */
/* El título del tema sobra en estas tres: manda la palabra-cartel. */
.page-id-128 h1.wp-block-post-title,
.page-id-129 h1.wp-block-post-title,
.page-id-130 h1.wp-block-post-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* El díptico: palabra gigante partida a un lado, foto alta al otro. */
.nuta-cartel { margin: .5rem 0 0; gap: 3rem; }
.nuta-cartel-palabra {
	margin: 0 0 1.4rem;
	font-size: clamp(3.6rem, 10vw, 8rem); font-weight: 900;
	line-height: .88; letter-spacing: -.03em; text-transform: uppercase;
}
.nuta-cartel-claim { margin: 0 0 1.8rem; max-width: 30ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.55; }
.nuta-cartel-claim mark {
	background: var(--nuta-lima); color: var(--nuta-ink); padding: .1em .25em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.nuta-cartel-foto { margin: 0 14px 14px 0; }
.nuta-cartel-foto img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
	border: 2px solid var(--nuta-ink); box-shadow: 14px 14px 0 0 var(--nuta-lima);
}
@media (max-width: 781px) {
	.nuta-cartel-foto img { box-shadow: 8px 8px 0 0 var(--nuta-lima); }
}

/* El marquee: la tira de disciplinas entre dos rayas de tinta. */
.nuta-marquee {
	overflow: hidden; margin: 2.6rem 0 0; padding: .6rem 0;
	border-top: 2px solid var(--nuta-ink); border-bottom: 2px solid var(--nuta-ink);
}
.nuta-marquee-tira {
	display: flex; width: max-content; margin: 0; white-space: nowrap;
	font-weight: 800; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase;
	animation: nuta-marquee 28s linear infinite;
}
.nuta-marquee-tira span { padding-right: 2.4rem; }
@keyframes nuta-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nuta-marquee-tira { animation: none; } }

/* El manifiesto: una frase grande centrada con lo importante en lima. */
.nuta-manifiesto {
	margin: 3rem auto; max-width: 28ch; text-align: center;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.3;
	text-wrap: balance;
}
.nuta-manifiesto mark {
	background: var(--nuta-lima); color: var(--nuta-ink); padding: 0 .16em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Los botones del cartel y del cierre: el mismo lenguaje que el CTA del vídeo. */
.nuta-pilar-hero-ctas { display: flex; gap: .9rem; flex-wrap: wrap; margin: 0; }
.nuta-pilar-boton {
	display: inline-block; background: var(--nuta-lima); color: var(--nuta-ink);
	border: 2px solid var(--nuta-lima); padding: .85rem 1.7rem; text-decoration: none;
	font-weight: 700; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
	transition: background .15s, color .15s, border-color .15s;
}
.nuta-pilar-boton:hover, .nuta-pilar-boton:focus-visible { background: var(--nuta-ink); border-color: var(--nuta-ink); color: #FFFBF5; }
.nuta-pilar-boton-borde { background: transparent; border-color: var(--nuta-ink); color: var(--nuta-ink); }
.nuta-pilar-boton-borde:hover, .nuta-pilar-boton-borde:focus-visible { background: var(--nuta-ink); color: #FFFBF5; }

/* El cierre de conversión: banda en lima a todo el ancho. */
.nuta-pilar-final {
	background: var(--nuta-lima); color: var(--nuta-ink);
	margin-top: 3rem; padding: 3.2rem 1.4rem 3.6rem; text-align: center;
}
.nuta-pilar-final-titulo {
	margin: 0 0 .5rem; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900;
	text-transform: uppercase; letter-spacing: -.01em;
}
.nuta-pilar-final p { margin: .3rem auto 0; max-width: 52ch; }
.nuta-pilar-final .nuta-pilar-ctas { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.nuta-pilar-final .nuta-pilar-boton { background: var(--nuta-ink); border-color: var(--nuta-ink); color: #FFFBF5; }
.nuta-pilar-final .nuta-pilar-boton:hover, .nuta-pilar-final .nuta-pilar-boton:focus-visible { background: transparent; color: var(--nuta-ink); }

/* La banda de fotos: dos imágenes a la misma altura, enmarcadas como el cartel. */
.nuta-banda { margin-bottom: 2.4rem; }
.nuta-banda .wp-block-image { margin: 0 10px 10px 0; }
.nuta-banda .wp-block-image img {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
	border: 2px solid var(--nuta-ink); box-shadow: 10px 10px 0 0 var(--nuta-lima);
}

/* La parte plegada de la descripción de la card («Leer más») */
.nuta-serv-mas summary {
	cursor: pointer; list-style: none; margin: .2rem 0 .4rem;
	font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
	text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 2px;
}
.nuta-serv-mas summary::-webkit-details-marker { display: none; }
.nuta-serv-mas[open] summary { margin-bottom: .5rem; }
.nuta-serv-texto h4 {
	font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	margin: .95rem 0 .35rem;
}
.nuta-serv-texto ul { margin: 0 0 .6rem 1.1rem; padding: 0; }
.nuta-serv-texto li { margin: .18rem 0; }

/* Cada clase, una tarjetita con la barra del color de su curso */
.nuta-cal-tarjeta {
	display: flex; flex-direction: column; gap: .12rem;
	border-left: 3px solid var(--nuta-serv, var(--nuta-lima)); padding-left: .55rem;
}
.nuta-cal-hora { font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; }
.nuta-cal-tarjeta strong { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.nuta-cal-tarjeta small { color: var(--nuta-suave); font-size: .76rem; line-height: 1.35; }
/* El grupo va justo bajo el nombre del curso: es lo que distingue una franja
   de otra del mismo curso, así que pesa más que la sala o el profesor. */
.nuta-cal-tarjeta .nuta-cal-grupo {
  font-size: .74rem; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em; color: var(--nuta-suave);
}
.nuta-cal-cancelada { border-left-color: var(--nuta-linea); }
.nuta-cal-cancelada .nuta-cal-hora,
.nuta-cal-cancelada strong { text-decoration: line-through; color: var(--nuta-suave); }
.nuta-cal-nota { font-style: normal; font-size: .76rem; color: var(--nuta-suave); }
.nuta-cal-nada { margin: auto 0; font-size: .78rem; color: var(--nuta-suave); }
.nuta-cal-pie { margin: 2.2rem 0 0; display: flex; gap: 1rem; align-items: baseline; font-weight: 600; }

/* En estrecho, la semana se apila día a día (los vacíos, compactos). */
@media (max-width: 1100px) {
	.nuta-cal-semana { grid-template-columns: 1fr; }
	.nuta-cal-dia { min-height: 0; border-left: 0; border-top: 1px solid var(--nuta-linea); }
	.nuta-cal-dia:first-child { border-top: 0; }
	.nuta-cal-nada { margin: 0; }
}

/* --------------------------------------- vídeo de portada: pantalla completa y fijo
   El truco no lleva JavaScript: el héroe se queda pegado arriba (sticky) y lo
   que viene detrás sube POR ENCIMA. Para eso, lo de detrás necesita fondo
   propio y quedar en una capa superior; si una sección quiere otro color, se
   lo pone ella. */
/* OJO: la capa 0 es imprescindible. La banda blanca de abajo también va en la
   capa 0 y la gana por ir DESPUÉS en el documento; si se sube el vídeo a la 1,
   la banda deja de taparlo y el vídeo se ve a través de todo el contenido. */
.nuta-vid-modulo { position: sticky; top: 0; z-index: 0; line-height: 0; }
/* De borde a borde de verdad: dentro del contenido, «alignfull» se queda en el
   ancho grande (1340) y esto es una pantalla entera. La clase va repetida
   porque la regla del tema para .alignfull tiene dos clases y ganaría. */
.nuta-vid-modulo.nuta-vid-modulo.nuta-vid-modulo {
	width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
	/* Pegado a lo de arriba: el vídeo abre la página, sin franja blanca. */
	margin-block-start: 0;
}
/* …y el hueco que el tema deja entre la cabecera y el contenido. */
body:has( .nuta-vid-modulo ) .wp-site-blocks > main { margin-block-start: 0; }
/* 100vw incluye la barra de scroll: `clip` se come esos píxeles sin crear un
   contenedor de scroll, que es lo que rompería el `sticky` (a diferencia de
   overflow:hidden). Solo en las páginas que llevan el vídeo. */
body:has( .nuta-vid-modulo ) .wp-site-blocks { overflow-x: clip; }
/* Lo que viene detrás sube POR ENCIMA del vídeo. Para que no se asome por los
   lados ni por los huecos entre secciones, el contenedor pinta UNA banda
   blanca continua desde donde acaba el vídeo hasta el final del contenido. */
body:has( .nuta-vid-modulo ) .wp-block-post-content { position: relative; }
body:has( .nuta-vid-modulo ) .wp-block-post-content::after {
	content: ''; position: absolute; z-index: 0;
	left: 50%; transform: translateX(-50%); width: 100vw;
	/* Justo donde acaba el héroe (nuta.js afina la variable con lo que mide
	   de verdad la cabecera; sin JavaScript vale la pantalla entera). */
	top: var(--nuta-vid-alto, max(100svh, 26rem)); bottom: 0; background: #FFFBF5;
}
.nuta-vid-modulo ~ * { position: relative; z-index: 1; }
/* La pantalla entera DE VERDAD: el héroe empieza debajo de la cabecera, así
   que 100svh se salía por abajo (y la flecha de «sigue bajando» no se veía
   nunca). nuta.js mide lo que hay encima y afina la variable. */
.nuta-vid-hero { height: var(--nuta-vid-alto, max(100svh, 26rem)); }
.nuta-vid-marco {
	position: relative; width: 100%; height: 100%; overflow: hidden;
	background: var(--nuta-ink); display: grid; place-items: center;
}
.nuta-vid-media, .nuta-vid-poster {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; border: 0; display: block;
}
/* El iframe no sabe recortarse: se agranda al ancho o al alto que haga falta
   (16/9) y se centra, que es lo que hace `cover` con un vídeo propio. */
/* Un 25 % más grande que el marco: así el título y la barra de YouTube quedan
   fuera de lo que se ve y el vídeo se lee como un fondo, no como un reproductor. */
.nuta-vid-embed {
	inset: 50% auto auto 50%; transform: translate(-50%, -50%);
	width: max(125vw, 222svh); height: max(70.4vw, 125svh);
	pointer-events: none;
}
/* Sin JavaScript el iframe se queda sin src: mejor no ocupar ni anunciarse. */
.nuta-vid-embed:not([src]) { display: none; }
/* La foto NO es el telón del vídeo: nace escondida y solo la enseña nuta.js a
   quien pidió quietud o ahorro de datos, que no va a ver el vídeo. Así, al
   cambiar el vídeo no queda una imagen vieja delante. */
.nuta-vid-poster { z-index: 1; }
.nuta-vid-poster[hidden] { display: none; }

/* Poder pararlo (WCAG 2.2.2). Discreto abajo a la derecha, encima de todo. */
/* Los dos mandos del vídeo, juntos y a la IZQUIERDA: abajo a la derecha vive
   la burbuja de chat, que es fija, y les caía justo encima. Parar el vídeo no
   puede quedar tapado —es lo que exige poder frenar algo que se mueve solo— y
   el chat no se va a mover de su esquina. */
.nuta-vid-mandos {
	position: absolute; z-index: 4; left: 1.2rem; bottom: 1.6rem;
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.nuta-vid-parar, .nuta-vid-ver {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(48, 66, 84, .55); color: #FFFBF5; border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px; padding: .5rem .9rem; cursor: pointer;
	font-family: inherit; font-size: .7rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; line-height: 1;
	backdrop-filter: blur(4px); transition: background .15s, color .15s;
}
.nuta-vid-parar:hover, .nuta-vid-parar:focus-visible,
.nuta-vid-ver:hover, .nuta-vid-ver:focus-visible { background: var(--nuta-lima); color: var(--nuta-ink); border-color: var(--nuta-lima); }
.nuta-vid-parar:focus-visible, .nuta-vid-ver:focus-visible { outline: 2px solid #FFFBF5; outline-offset: 2px; }
/* El triángulo de «ver»: dibujado con bordes, sin traerse ningún icono. */
.nuta-vid-ver-icono {
	width: 0; height: 0; flex: none; margin-left: 1px;
	border-top: 6px solid transparent; border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
}
.nuta-vid-parar-icono {
	width: 10px; height: 12px; flex: none;
	border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
/* Parado: el icono pasa a ser un «play». */
.nuta-vid-parado .nuta-vid-parar-icono {
	border: 0; width: 0; height: 0;
	border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
@media (max-width: 600px) {
	.nuta-vid-parar { right: .8rem; bottom: 1rem; padding: .45rem .7rem; font-size: .65rem; }
}
.nuta-vid-velo {
	position: absolute; inset: 0; z-index: 2;
	/* El texto va encima de lo que sea (vídeo oscuro o foto clara): el velo
	   tiene que dar contraste en los dos casos. */
	background: linear-gradient(180deg, rgba(48, 66, 84, .5) 0%, rgba(48, 66, 84, .32) 40%, rgba(48, 66, 84, .7) 100%);
}
.nuta-vid-texto {
	position: relative; z-index: 3; text-align: center; color: #FFFBF5;
	padding: 2rem 1.4rem; line-height: 1.3; max-width: min(90vw, 56rem);
}
/* El tope va en el propio claim: puesto en el contenedor, las «ch» se medían
   con la letra normal y la palabra grande se salía de su caja (descuadrada
   respecto al botón). */
.nuta-vid-claim { max-width: 15ch; margin-inline: auto; }
.nuta-vid-claim {
	margin: 0 auto; font-size: clamp(2.2rem, 7vw, 5.5rem); font-weight: 900;
	text-transform: uppercase; letter-spacing: -.01em; line-height: .95;
	text-wrap: balance;
	/* El vídeo cambia: el fotograma puede salir claro justo detrás del texto. */
	text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.nuta-vid-linea {
	margin: 1rem 0 0; font-size: clamp(.95rem, 1.6vw, 1.15rem);
	font-weight: 500; letter-spacing: .02em; line-height: 1.5; color: #FFFBF5;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .6);
}
.nuta-vid-cta { margin: 1.8rem 0 0; }
.nuta-vid-cta a {
	display: inline-block; background: var(--nuta-lima); color: var(--nuta-ink);
	border: 2px solid var(--nuta-lima); padding: .85rem 1.7rem; text-decoration: none;
	font-weight: 700; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
	transition: background .15s, color .15s;
}
.nuta-vid-cta a:hover, .nuta-vid-cta a:focus-visible { background: transparent; color: #FFFBF5; }
/* La flecha de «sigue bajando» */
.nuta-vid-flecha {
	position: absolute; z-index: 3; left: 50%; bottom: 2.2rem;
	width: 14px; height: 14px; margin-left: -7px;
	border-right: 2px solid #FFFBF5; border-bottom: 2px solid #FFFBF5;
	transform: rotate(45deg); animation: nuta-vid-baja 1.9s ease-in-out infinite;
}
@keyframes nuta-vid-baja {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
	50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}
.nuta-vid-sin {
	position: relative; z-index: 3; color: #FFFBF5; text-align: center;
	line-height: 1.5; padding: 2rem;
}
/* En el editor: ni fijo ni pantalla completa, que si no no se puede maquetar.
   El claim se mide en vw, y en el lienzo eso se va de madre: aquí se acota. */
.nuta-vid-previa { height: min(60vh, 380px); }
.nuta-vid-previa .nuta-vid-texto { max-width: 46ch; }
.nuta-vid-previa .nuta-vid-claim { font-size: clamp(1.5rem, 3vw, 2.6rem); }
.nuta-vid-previa .nuta-vid-linea { font-size: .9rem; margin-top: .6rem; }
.nuta-vid-previa .nuta-vid-cta { margin-top: 1rem; }
.nuta-vid-previa .nuta-vid-flecha { display: none; }
.editor-styles-wrapper .nuta-vid-modulo { position: static; }
/* La banda blanca que en la web tapa el vídeo al hacer scroll, en el lienzo
   del editor tapaba LA PÁGINA ENTERA a partir de la primera pantalla (y se
   comía los clics): en la web los hermanos del módulo suben de capa
   (.nuta-vid-modulo ~ *), pero en el editor cada bloque va envuelto y esa
   regla no los alcanza. Aquí, ni banda ni desparrame de 100vw. */
body.editor-styles-wrapper:has( .nuta-vid-modulo ) .wp-block-post-content { position: static; }
body.editor-styles-wrapper:has( .nuta-vid-modulo ) .wp-block-post-content::after { content: none; }
.editor-styles-wrapper .nuta-vid-modulo.nuta-vid-modulo.nuta-vid-modulo {
	width: 100%; max-width: 100%; margin-inline: 0;
}
@media (prefers-reduced-motion: reduce) {
	.nuta-vid-flecha { animation: none; }
	/* Sin movimiento: manda la imagen de respaldo (el JS también para el vídeo). */
	.nuta-vid-poster { opacity: 1 !important; }
}

/* ------------------------------------------------ contacto: tarjeta partida + mapa */
.nuta-cont-modulo { margin: 1.5rem 0; }
.nuta-cont-carta {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	border: 2px solid var(--nuta-ink); background: #FFFBF5;
	/* En pantallas muy anchas la tarjeta no se estira sin fin. */
	max-width: 1200px; margin-inline: auto;
}
/* El lado oscuro: los datos reales de la escuela. El espacio sobrante se
   reparte entre el texto y los datos (columna flexible), no al fondo. */
.nuta-cont-lado {
	background: var(--nuta-ink); color: #FFFBF5;
	padding: 2.6rem 2.5rem; font-size: .95rem; line-height: 1.65;
	display: flex; flex-direction: column;
}
.nuta-cont-titulo {
	margin: 0 0 1rem; color: #FFFBF5; font-size: 1.8rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .02em; border: 0; padding: 0;
}
.nuta-cont-lado p { margin: 0 0 1.4rem; color: rgba(255, 255, 255, .92); }
.nuta-cont-raya {
	border: 0; border-top: 1px solid rgba(255, 255, 255, .25);
	width: 100%; margin: auto 0 1.8rem;
}
.nuta-cont-lineas { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1.1rem; }
.nuta-cont-lineas li { display: flex; align-items: center; gap: .9rem; }
.nuta-cont-ico {
	flex: none; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%; display: grid; place-items: center;
}
.nuta-cont-ico svg { width: 19px; height: 19px; }
.nuta-cont-lado a { color: #FFFBF5; text-decoration: none; }
.nuta-cont-lado a:hover { text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 2px; }
.nuta-cont-redes {
	display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0;
	font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
}
.nuta-cont-redes a { text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 2px; }
.nuta-cont-redes a:hover { text-decoration-color: #FFFBF5; }

/* El lado claro: el formulario en líneas bajas. Se replica lo necesario de
   nuta.css (que no carga en el lienzo del editor) y se pisa su estilo de
   cajas: aquí cada campo es solo una línea inferior. */
.nuta-cont-form { padding: 2.6rem 2.5rem; }
.nuta-cont-form .nuta-form { display: grid; gap: 1.5rem; max-width: none; margin: 0; }
.nuta-cont-form .nuta-form label {
	font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
	font-size: .72rem; color: var(--nuta-suave); display: block; margin-bottom: .15rem;
}
.nuta-cont-form .nuta-form input[type=text], .nuta-cont-form .nuta-form input[type=email],
.nuta-cont-form .nuta-form textarea {
	width: 100%; font-family: inherit; font-size: .95rem; color: var(--nuta-ink);
	background: transparent; border: 0; border-bottom: 1.5px solid var(--nuta-linea);
	border-radius: 0; padding: .55rem 0;
}
.nuta-cont-form .nuta-form textarea { resize: vertical; min-height: 9rem; }
/* Ojo: solo los campos de línea. Si se escribe `input:focus` a secas, la
   casilla del RGPD se queda SIN indicador de foco (no tiene borde inferior). */
.nuta-cont-form .nuta-form input[type=text]:focus, .nuta-cont-form .nuta-form input[type=email]:focus,
.nuta-cont-form .nuta-form textarea:focus {
	outline: none; box-shadow: none; border-bottom: 2px solid var(--nuta-ink);
}
.nuta-cont-form .nuta-form input[type=checkbox]:focus-visible {
	outline: 2px solid var(--nuta-ink); outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--nuta-lima);
}
.nuta-cont-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.8rem; }
.nuta-cont-form .nuta-checks label {
	text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 500; color: var(--nuta-ink);
}
.nuta-cont-form .nuta-checks a { color: var(--nuta-ink); }
.nuta-cont-form .nuta-form button {
	font-family: inherit; font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
	border: 2px solid var(--nuta-ink); border-radius: 0; padding: .85rem 1.6rem;
	background: var(--nuta-ink); color: #FFFBF5; cursor: pointer;
	display: inline-flex; align-items: center; line-height: 1; transition: background .15s, color .15s;
}
.nuta-cont-form .nuta-form button:hover, .nuta-cont-form .nuta-form button:focus-visible {
	background: var(--nuta-lima); color: var(--nuta-ink);
}
.nuta-cont-form .nuta-hp {
	position: absolute !important; left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}
.nuta-cont-modulo .nuta-flash {
	padding: .85rem 1.1rem; margin: 0 0 1.4rem; border-radius: 5px;
	font-weight: 600; font-size: .92rem; border: 1px solid var(--nuta-ink);
}
/* Mismos colores que los flashes de nuta.css (turquesa/rosa de marca). */
.nuta-cont-modulo .nuta-flash-ok { background: color-mix(in srgb, #76C2B4 24%, #FFFBF5); }
.nuta-cont-modulo .nuta-flash-error { background: color-mix(in srgb, #F4B4B4 40%, #FFFBF5); }
@media (max-width: 900px) {
	.nuta-cont-carta { grid-template-columns: 1fr; }
	.nuta-cont-lado, .nuta-cont-form { padding: 1.8rem 1.4rem; }
}
@media (max-width: 560px) {
	.nuta-cont-grid2 { grid-template-columns: 1fr; }
}

/* ------------------------- galería: miniaturas uniformes + caja de luz */
/* La rejilla va JUSTIFICADA, como en Google Fotos: cada fila se completa de
   lado a lado y cada foto ocupa el ancho que le pide su forma. Lo hace el
   flex-grow, que reparte el hueco sobrante en proporción a --r (ancho/alto de
   la foto, que pone el PHP). Todas las de una fila comparten alto, así que no
   queda ni un hueco de fondo a la vista. */
.nuta-galp-rejilla {
	display: flex; flex-wrap: wrap; gap: 6px;
	--alto: 230px;
}
.nuta-galp-item {
	position: relative; margin: 0; overflow: hidden;
	height: var(--alto);
	flex: 1 1 calc(var(--r, 1.333) * var(--alto));
	background: var(--nuta-ink);
}
/* Los rellenos de la última fila: se comen el hueco para que las últimas fotos
   no salgan estiradas a lo ancho de la página. No ocupan alto ni se ven. */
.nuta-galp-relleno {
	flex: 1 1 calc(1.4 * var(--alto)); height: 0; margin: 0; padding: 0;
}
.nuta-galp-abre {
	position: absolute; inset: 0; display: block; overflow: hidden; border: 0;
}
.nuta-galp-abre img, .nuta-galp-abre video {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .25s ease;
}
.nuta-galp-abre:hover img, .nuta-galp-abre:focus-visible img,
.nuta-galp-abre:hover video, .nuta-galp-abre:focus-visible video { transform: scale(1.04); }
.nuta-galp-play {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: rgba(20, 20, 18, .22);
}
.nuta-galp-play span {
	display: grid; place-items: center; width: 58px; height: 58px; padding-left: 5px;
	background: var(--nuta-lima); color: var(--nuta-ink);
	border: 2px solid var(--nuta-ink); border-radius: 50%; font-size: 1.15rem;
}
/* El mural va sin pies: la descripción de cada foto sale al abrirla en la caja
   de luz. (Antes se asomaba encima de la imagen al pasar por ella.) */

@media (max-width: 900px) { .nuta-galp-rejilla { --alto: 180px; } }
@media (max-width: 560px) {
	.nuta-galp-rejilla { --alto: 140px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.nuta-galp-abre img, .nuta-galp-abre video { transition: none; }
	.nuta-galp-abre:hover img, .nuta-galp-abre:hover video { transform: none; }
}

/* La caja de luz NO hace scroll: la foto se encoge hasta caber entera con su
   pie debajo. Antes la foto podía medir 84vh y el pie sumaba lo suyo, así que
   entre los dos se pasaban de pantalla y aparecía la barra. */
.nuta-luz {
	padding: 0; border: 2px solid var(--nuta-ink); background: #FFFBF5;
	max-width: min(1100px, 94vw); max-height: 92vh; overflow: hidden;
}
.nuta-luz[open] { display: flex; flex-direction: column; }
.nuta-luz::backdrop { background: rgba(20, 20, 18, .85); }
.nuta-luz-cerrar {
	position: absolute; top: .5rem; right: .5rem; z-index: 1;
	width: 38px; height: 38px; display: grid; place-items: center;
	background: var(--nuta-lima); color: var(--nuta-ink);
	border: 2px solid var(--nuta-ink); border-radius: 50%;
	font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.nuta-luz-cerrar:hover, .nuta-luz-cerrar:focus-visible { background: var(--nuta-ink); color: #FFFBF5; }
/* El cuerpo se queda con el alto que sobre y la foto se ajusta dentro. El
   min-height:0 es lo que permite que un hijo de flex ENCOJA por debajo de su
   tamaño natural; sin él, la foto empujaría la caja y volvería el scroll. */
.nuta-luz-cuerpo { flex: 1 1 auto; min-height: 0; display: flex; }
.nuta-luz-cuerpo.nuta-luz-foto img {
	display: block; margin: auto;
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	object-fit: contain;
}
.nuta-luz-cuerpo.nuta-luz-video {
	position: relative; width: min(1060px, 94vw); aspect-ratio: 16 / 9;
	background: var(--nuta-ink);
}
.nuta-luz-cuerpo.nuta-luz-video iframe,
.nuta-luz-cuerpo.nuta-luz-video video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.nuta-luz-titulo {
	flex: 0 0 auto;
	margin: 0; padding: .6rem .9rem; font-size: .72rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--nuta-suave);
	border-top: 2px solid var(--nuta-ink);
}

/* ------------------------------------------------ portada: héroe de pilares y «La escuela» */
/* Texto solo para lectores de pantalla (los temas de bloques no traen la clase). */
.nuta-oculto-lector {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

.nuta-hero { border-bottom: 2px solid var(--nuta-ink); }
.nuta-hero-cols {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	min-height: calc(100svh - 96px);
}
.nuta-hero-col {
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 1.4rem; padding: clamp(1.4rem, 3vw, 2.4rem);
	color: var(--nuta-ink); text-decoration: none;
	transition: background .18s ease;
}
.nuta-hero-col + .nuta-hero-col { border-left: 2px solid var(--nuta-ink); }
.nuta-hero-col:hover, .nuta-hero-col:focus-visible { background: var(--nuta-lima); }
@media (prefers-reduced-motion: reduce) {
	.nuta-hero-col { transition: none; }
}

/* La zona alta: palabra vertical y, a su lado, la foto llenando la columna. */
.nuta-hero-alto {
	display: flex; align-items: stretch; gap: clamp(.8rem, 1.4vw, 1.3rem);
	flex: 1; min-height: 0;
}
.nuta-hero-foto { display: block; flex: 1; min-width: 0; overflow: hidden; }
.nuta-hero-foto img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	border: 2px solid var(--nuta-ink);
	transition: transform .25s ease;
}
.nuta-hero-col:hover .nuta-hero-foto img,
.nuta-hero-col:focus-visible .nuta-hero-foto img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.nuta-hero-foto img { transition: none; }
	.nuta-hero-col:hover .nuta-hero-foto img,
	.nuta-hero-col:focus-visible .nuta-hero-foto img { transform: none; }
}

/* La palabra, gigante y en vertical, de abajo arriba: cartel de galería. */
.nuta-hero-palabra {
	writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start;
	font-size: clamp(3rem, 9vh, 5.6rem); line-height: .95;
	font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
}
.nuta-hero-pie { display: flex; flex-direction: column; gap: .8rem; max-width: 30ch; }
.nuta-hero-desc { font-size: .95rem; line-height: 1.5; color: var(--nuta-suave); }
.nuta-hero-col:hover .nuta-hero-desc,
.nuta-hero-col:focus-visible .nuta-hero-desc { color: var(--nuta-ink); }
.nuta-hero-cta {
	font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 3px;
}
.nuta-hero-col:hover .nuta-hero-cta,
.nuta-hero-col:focus-visible .nuta-hero-cta { text-decoration-color: var(--nuta-ink); }

/* En estrecho las columnas se apilan y la palabra vuelve a la horizontal. */
@media (max-width: 820px) {
	.nuta-hero-cols { grid-template-columns: 1fr; min-height: 0; }
	.nuta-hero-col { gap: .9rem; padding: 1.6rem 1.2rem; }
	.nuta-hero-col + .nuta-hero-col { border-left: 0; border-top: 2px solid var(--nuta-ink); }
	.nuta-hero-alto { flex-direction: column; gap: .8rem; }
	.nuta-hero-foto { aspect-ratio: 3 / 2; }
	.nuta-hero-palabra {
		writing-mode: horizontal-tb; transform: none;
		font-size: clamp(2.2rem, 9vw, 3rem);
	}
}

/* La sección "La escuela": qué es NUTA y de dónde viene, con las fotos reales. */
.nuta-sobre { margin-top: 3.5rem; margin-bottom: 1.5rem; }
.nuta-sobre-cols {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 3rem; align-items: start;
}
.nuta-sobre .nuta-web-rotulo { max-width: 14rem; }
.nuta-sobre h2 {
	margin: 1.1rem 0 1.2rem; font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	font-weight: 800; letter-spacing: -.01em; text-transform: uppercase;
	text-wrap: balance; max-width: 22ch;
}
.nuta-sobre-texto > p { margin: 0 0 1rem; max-width: 58ch; line-height: 1.65; }
.nuta-sobre-texto a {
	color: var(--nuta-ink);
	text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 2px;
}
.nuta-sobre blockquote {
	margin: 1.4rem 0; padding: .25rem 0 .25rem 1.1rem;
	border-left: 6px solid var(--nuta-lima);
	font-weight: 600; font-size: 1.05rem; max-width: 48ch;
}
.nuta-sobre-quien { display: flex; gap: .9rem; align-items: center; margin: 1.5rem 0 0; }
.nuta-sobre-quien img {
	flex: none; width: 64px; height: 64px; object-fit: cover;
	/* La cara queda a un cuarto de la foto (arriba está la mano alzada). */
	object-position: 50% 28%;
	border: 2px solid var(--nuta-ink);
}
.nuta-sobre-quien p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--nuta-suave); }
.nuta-sobre-quien strong { color: var(--nuta-ink); }
.nuta-sobre-cta { margin: 1.6rem 0 0; }
.nuta-sobre-foto { margin: 0; }
.nuta-sobre-foto img { display: block; width: 100%; border: 2px solid var(--nuta-ink); }
.nuta-sobre-foto figcaption {
	margin-top: .5rem; font-size: .72rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--nuta-suave);
}
@media (max-width: 900px) {
	.nuta-sobre-cols { grid-template-columns: 1fr; gap: 2rem; }
}


/* El héroe hecho con BLOQUES NATIVOS: cada pilar es un grupo editable
   (título, imagen de la mediateca, textos), y la columna entera sigue
   siendo clicable gracias al enlace estirado del CTA. */
.nuta-hero-col { position: relative; }
h2.nuta-hero-palabra { margin: 0; }
.nuta-hero-foto.wp-block-image { margin: 0; flex: 1; min-width: 0; overflow: hidden; }
.nuta-hero-foto.wp-block-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	border: 2px solid var(--nuta-ink); transition: transform .25s ease;
}
p.nuta-hero-desc, p.nuta-hero-cta { margin: 0; }
.nuta-hero-cta a {
	color: inherit; font-weight: 700;
	text-decoration: underline; text-decoration-color: var(--nuta-lima); text-decoration-thickness: 3px;
}
.nuta-hero-col:hover .nuta-hero-cta a,
.nuta-hero-col:focus-within .nuta-hero-cta a { text-decoration-color: var(--nuta-ink); }
/* El enlace del CTA se estira: toda la columna lleva a su página. */
.nuta-hero-cta a::after { content: ""; position: absolute; inset: 0; }
.nuta-hero-col:focus-within { background: var(--nuta-lima); }
.nuta-hero-col:focus-within .nuta-hero-desc { color: var(--nuta-ink); }
@media (prefers-reduced-motion: reduce) {
	.nuta-hero-foto.wp-block-image img { transition: none; }
}

/* La sección «La escuela» hecha con bloques nativos: los mismos estilos
   sobre el marcado que genera el editor. */
.nuta-sobre-quien .wp-block-image { margin: 0; flex: none; }
.nuta-sobre-quien .wp-block-image img { width: 64px; height: 64px; }
.nuta-sobre .wp-block-quote { border-left: 6px solid var(--nuta-lima); font-style: normal; }
.nuta-sobre-foto.wp-block-image { margin: 0; }

/* ==========================================================================
   Catálogo público: los bloques Adultos/Niños, la ficha de cada card y el
   modal de «cómo apuntarse» (puntos 1, 2 y 3 del cuaderno).
   ========================================================================== */
.nuta-publico-rotulo {
  font-size: 1.6rem; letter-spacing: .1em;
  border-bottom: 3px solid var(--nuta-ink, #304254); padding-bottom: .5rem;
  margin: 2.6rem 0 1.2rem;
}
.nuta-cat-rotulo { font-size: 1rem; }
/* La info de la card como TABLA: etiqueta a la izquierda, valor a la derecha,
   una raya por fila. */
.nuta-serv-fichas { margin: .4rem 0 0; padding: 0; font-size: .88rem; }
.nuta-serv-fichas > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
  padding: .42rem 0;
  border-top: 1px solid var(--nuta-linea, #EEE4DB);
}
.nuta-serv-fichas > div:last-child { border-bottom: 1px solid var(--nuta-linea, #EEE4DB); }
.nuta-serv-fichas dt {
  flex: none; margin: 0;
  font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--nuta-suave, #6E6E6A);
}
/* El valor se pega a la derecha de la fila (lo hace el space-between), pero su
   TEXTO se lee de izquierda a derecha. Con text-align:right, todo lo que
   ocupaba más de una línea —«Para quién», o «fecha aún sin especificar…»—
   quedaba con el borde izquierdo en zigzag y costaba de leer. En los valores
   de una sola línea no cambia nada: su caja mide lo que el texto. */
.nuta-serv-fichas dd { margin: 0; text-align: left; font-variant-numeric: tabular-nums; }
.nuta-serv-fichas dd strong { font-weight: 800; }
/* Filas de valor LARGO (el horario semanal): en fila quedaban como un fleco
   alineado a la derecha; mejor la etiqueta arriba y el texto a la izquierda. */
.nuta-serv-fichas > div.nuta-ficha-larga { display: block; }
.nuta-serv-fichas > div.nuta-ficha-larga dd { text-align: left; margin-top: .15rem; line-height: 1.55; }

/* El horario, en LISTA: una franja por línea, que se lee de arriba abajo. */
.nuta-horario-lista {
	list-style: none; margin: .2rem 0 0; padding: 0;
	font-variant-numeric: tabular-nums;
}
.nuta-horario-lista li { padding: .16rem 0; }
.nuta-horario-lista li + li { border-top: 1px solid var(--nuta-linea, #EEE4DB); }

.nuta-insc-modal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(35, 46, 58, .55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.nuta-insc-caja {
  position: relative; background: #FFFBF5; max-width: 480px; width: 100%;
  border: 2px solid var(--nuta-ink, #304254); box-shadow: 0 8px 0 0 var(--nuta-lima, #FF6D4D);
  padding: 1.6rem 1.8rem 1.8rem;
}
.nuta-insc-caja h3 { margin: 0 0 1rem; font-size: 1.15rem; }

/* El modal de «Leer más» de las cards: mismo lenguaje que el de apuntarse,
   pero con sitio para el documento entero (scroll dentro de la caja). */
.nuta-leer-modal {
	position: fixed; inset: 0; z-index: 400;
	background: rgba(35, 46, 58, .55);
	display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.nuta-leer-caja {
	position: relative; background: #FFFBF5; max-width: 640px; width: 100%;
	max-height: min(85svh, 85vh); overflow-y: auto;
	border: 2px solid var(--nuta-ink, #304254); box-shadow: 0 8px 0 0 var(--nuta-lima, #FF6D4D);
	padding: 1.6rem 1.8rem 1.8rem;
}
.nuta-leer-caja h3 { margin: 0 0 .8rem; font-size: 1.3rem; }
.nuta-leer-cuerpo .nuta-serv-tabla { margin-top: 1rem; }
.nuta-leer-cuerpo .nuta-serv-ctas { margin: 1.2rem 0 0; }

/* Todos los modales públicos entran con la misma animación: velo que aparece
   y caja que sube. Quien pidió quietud en su sistema, los ve al instante. */
@keyframes nuta-modal-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes nuta-modal-sube {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.nuta-insc-modal:not([hidden]), .nuta-leer-modal:not([hidden]) {
	animation: nuta-modal-velo .2s ease;
}
.nuta-insc-modal:not([hidden]) .nuta-insc-caja,
.nuta-leer-modal:not([hidden]) .nuta-leer-caja {
	animation: nuta-modal-sube .24s cubic-bezier(.2, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.nuta-insc-modal:not([hidden]), .nuta-leer-modal:not([hidden]),
	.nuta-insc-modal:not([hidden]) .nuta-insc-caja,
	.nuta-leer-modal:not([hidden]) .nuta-leer-caja { animation: none; }
}
.nuta-insc-pasos { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.nuta-insc-pasos li { margin: .55rem 0; }
.nuta-insc-botones { display: flex; align-items: center; gap: 1.2rem; margin: 0; }
.nuta-insc-entrar { font-size: .9rem; }
.nuta-insc-cerrar {
  position: absolute; top: .5rem; right: .6rem; border: 0; background: none;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--nuta-soft, #6E6E6A);
}

/* En la web, el [hidden]{display:none!important} de nuta.css se encarga de que
   nada tapado se vea. Pero en el EDITOR DE BLOQUES solo carga esta hoja, y ahí
   el display:flex de los modales le ganaba al atributo hidden: al abrir una
   página con el catálogo, el modal salía abierto encima de todo y no dejaba
   maquetar. Así que aquí se repite, para todo lo que nace tapado. */
.nuta-insc-modal[hidden],
.nuta-leer-modal[hidden] { display: none !important; }
.nuta-serv-modulo [hidden],
.nuta-catalogo [hidden],
.nuta-cal-publico [hidden],
.nuta-gal-publica [hidden] { display: none !important; }

/* ==========================================================================
   «Quiénes somos»: la biografía de Arantza en la home. Foto a la izquierda
   (fija mientras se lee), texto con entrada destacada y los hitos como línea
   de tiempo. Habla el mismo idioma que .nuta-sobre: tinta, lima y aire.
   ========================================================================== */
.nuta-bio { margin-top: 4rem; margin-bottom: 2.5rem; }
.nuta-bio-cols {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 2.5rem 3.5rem; align-items: start; margin-top: 1.2rem;
}
.nuta-bio-figura { margin: 0; position: sticky; top: 96px; }
.nuta-bio-figura img {
	display: block; width: 100%; height: auto;
	border: 2px solid var(--nuta-ink);
	box-shadow: 12px 12px 0 0 var(--nuta-lima);
}
.nuta-bio-figura figcaption {
	margin-top: 1rem; font-size: .82rem; color: var(--nuta-suave);
}
.nuta-bio h2 {
	margin: .2rem 0 .2rem; font-size: clamp(1.9rem, 3vw, 2.7rem);
	font-weight: 800; letter-spacing: -.01em; text-transform: uppercase;
}
.nuta-bio-rol {
	margin: 0 0 1.4rem; font-size: .8rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--nuta-suave);
}
.nuta-bio-texto > p { margin: 0 0 1rem; max-width: 58ch; line-height: 1.65; }
.nuta-bio-entrada {
	font-size: 1.18rem; line-height: 1.6; font-weight: 500; max-width: 52ch;
}
.nuta-bio-texto em { font-style: italic; }
.nuta-bio-hitos { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 58ch; }
.nuta-bio-hitos li {
	display: flex; gap: 1.2rem; align-items: baseline;
	padding: .6rem 0; border-top: 1px solid var(--nuta-linea);
}
.nuta-bio-hitos li:last-child { border-bottom: 1px solid var(--nuta-linea); }
.nuta-bio-hitos .nuta-bio-ano {
	flex: none; width: 3.2rem; font-weight: 800; font-variant-numeric: tabular-nums;
	box-shadow: inset 0 -.45em 0 var(--nuta-lima);
}
@media (max-width: 880px) {
	.nuta-bio-cols { grid-template-columns: 1fr; }
	.nuta-bio-figura { position: static; max-width: 420px; }
}

/* Chips de las cards de curso: público, duración y precios de un vistazo. */
.nuta-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.nuta-chip {
	display: inline-flex; align-items: baseline; gap: .35rem;
	border: 1.5px solid var(--nuta-ink); border-radius: 999px;
	padding: .18rem .65rem; font-size: .72rem; font-weight: 600; line-height: 1.35;
	background: #FFFBF5; color: var(--nuta-ink); white-space: nowrap;
}
.nuta-chip strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.nuta-chip-pub { background: var(--nuta-lima); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; }
.nuta-chip-tiempo { border-style: dashed; }

/* Las pestañas Adultos / Niños de la página de Cursos (enlaces reales). */
/* Pestañas en formato CHIP: compactas, que no se coman media pantalla. */
.nuta-tabs-publico { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.8rem; }
.nuta-tabs-publico a {
	display: inline-block; padding: .32rem .85rem;
	border: 2px solid var(--nuta-ink); border-radius: 999px;
	font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--nuta-ink); text-decoration: none;
}
.nuta-tabs-publico a:hover { background: var(--nuta-linea); }
.nuta-tabs-publico a.nuta-tab-viva { background: var(--nuta-lima); }

/* ------------------------------------------ cursos: la TABLA del catálogo */
.nuta-tabla-envoltura { overflow-x: auto; border: 2px solid var(--nuta-ink); background: #FFFBF5; }
.nuta-tabla-servicios { width: 100%; border-collapse: collapse; min-width: 760px; font-size: .92rem; }
.nuta-tabla-servicios th {
	padding: .65rem .9rem; text-align: left;
	font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--nuta-suave); border-bottom: 2px solid var(--nuta-ink); white-space: nowrap;
}
.nuta-tabla-servicios td {
	padding: .8rem .9rem; vertical-align: top;
	border-bottom: 1px solid var(--nuta-linea);
}
.nuta-tabla-servicios tbody tr:last-child td { border-bottom: 0; }
.nuta-tabla-servicios tbody tr:hover td { background: #FFFBF5; }
.nuta-tabla-servicio strong { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.nuta-tabla-servicio small { display: block; margin-top: .15rem; color: var(--nuta-suave); line-height: 1.45; max-width: 34ch; }
.nuta-tabla-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nuta-tabla-nada { color: var(--nuta-linea); }
.nuta-tabla-cta { white-space: nowrap; text-align: right; }
.nuta-tabla-cta .nuta-web-cta { margin-top: 0; }

/* La raya de «sin dato» en las tablas de card: visible, sin gritar. */
.nuta-serv-fichas .nuta-tabla-nada { color: var(--nuta-suave); }

/* Los dos CTAs del pie de card: Inscríbete y Ver calendario. */
.nuta-serv-ctas { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.nuta-serv-ctas .nuta-web-cta { margin-top: 0; }
.nuta-cta-suave { text-decoration-color: var(--nuta-linea); }

/* El numerito de cada pestaña del catálogo. */
.nuta-tabs-publico .nuta-tab-n {
	display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem;
	margin-left: .3rem; padding: 0 .25rem; border-radius: 999px;
	background: var(--nuta-ink); color: #FFFBF5; font-size: .62rem; letter-spacing: 0;
}
.nuta-tabs-publico a.nuta-tab-viva .nuta-tab-n { background: var(--nuta-ink); color: var(--nuta-lima); }

/* ========================================================= APARICIONES
   Que las cosas entren al llegar a ellas. Se anima SOLO opacidad y
   desplazamiento: las dos las resuelve la tarjeta gráfica sin recalcular la
   página. Nada de alto, márgenes ni posiciones, que obligarían al navegador a
   rehacer el diseño en cada fotograma.

   El estado invisible cuelga de .nuta-anima, que pone el JavaScript. Si el JS
   no llega, esta regla no se aplica y la página se ve entera: nunca se queda
   nada escondido por una animación que no ha podido arrancar. */
.nuta-anima .nuta-aparece {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
	            transform .55s cubic-bezier(.22, .61, .36, 1);
}
.nuta-anima .nuta-aparece.nuta-visto {
	opacity: 1;
	transform: none;
}

/* En las rejillas, cada pieza entra un pelín después que la anterior. El
   retardo va por CSS y no por JavaScript: así no hay ni un temporizador. */
.nuta-anima .nuta-galp-item.nuta-aparece,
.nuta-anima .nuta-serv-carta.nuta-aparece { transition-delay: 0s; }
.nuta-anima .nuta-galp-item.nuta-aparece:nth-child(3n + 2),
.nuta-anima .nuta-serv-carta.nuta-aparece:nth-child(3n + 2) { transition-delay: .07s; }
.nuta-anima .nuta-galp-item.nuta-aparece:nth-child(3n + 3),
.nuta-anima .nuta-serv-carta.nuta-aparece:nth-child(3n + 3) { transition-delay: .14s; }

/* Quien pide menos movimiento no ve ninguno. El JS ya ni arranca, pero la
   regla se queda por si alguien cambia el ajuste con la página abierta. */
@media (prefers-reduced-motion: reduce) {
	.nuta-anima .nuta-aparece {
		opacity: 1; transform: none; transition: none;
	}
}