/*
Theme Name: Kai Pilates
Theme URI: https://tenerifepilates.com/
Author: Kai Pilates (con Claude Code)
Description: Tema de bloques a medida para Kai Pilates: bandas a ancho completo, tipografía Outfit + Source Sans 3 alojada en el tema, colores del logo y movimiento suave al hacer scroll. Sin dependencias.
Version: 0.5.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kai-pilates
*/

/* ============================================================
   1. Base
   Colores y fuentes: solo los tokens de theme.json
   (--wp--preset--color--*, --wp--preset--font-family--*).
   ============================================================ */
:root {
	--kai-banda: clamp(4rem, 10vw, 7.5rem);
	--kai-radio: 18px;
	--kai-lectura: 62ch;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
:where(.wp-site-blocks) :where(p, li) { max-width: var(--kai-lectura); }
:where(.has-text-align-center) { margin-inline: auto; }
:focus-visible { outline: 3px solid var(--wp--preset--color--turquesa); outline-offset: 3px; border-radius: 4px; }
img { height: auto; }
.wp-site-blocks { overflow-x: clip; }
/* Sin hueco entre cabecera, contenido y pie: el aire lo ponen las bandas */
.wp-site-blocks > * + * { margin-block-start: 0; }
main.kai-principal > .wp-block-post-content > :first-child.alignfull { margin-block-start: 0; }
main.kai-principal > .wp-block-post-content > :last-child.alignfull { margin-block-end: 0; }
/* Contenido normal (no bandas): aire arriba y abajo */
.kai-principal { padding-block: 0; }
.kai-principal > .wp-block-post-content:not(:has(> .alignfull:first-child)) { padding-block-start: var(--wp--preset--spacing--50); }
.kai-principal > .wp-block-post-content:not(:has(> .alignfull:last-child)) { padding-block-end: var(--wp--preset--spacing--60); }

/* Ritmo en páginas de texto (contenido heredado): más aire antes de cada sección */
.wp-block-post-content > h2:not(:first-child) { margin-block-start: clamp(2.75rem, 6vw, 4.5rem); }
.wp-block-post-content > h3:not(:first-child) { margin-block-start: 2rem; }
.kai-titulo-pagina { margin-block-end: var(--wp--preset--spacing--40); }

/* ============================================================
   2. Cabecera (se compacta al bajar)
   ============================================================ */
.kai-cab {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: rgba(255, 255, 255, .93);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid transparent;
}
.kai-cab > .wp-block-group { padding-block: 1.05rem; }
.kai-cab .wp-block-site-logo img { width: auto; max-height: 48px; }
.kai-cab .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--tinta); }
.kai-cab .wp-block-navigation a:hover { color: var(--wp--preset--color--azul); }
.kai-cab .wp-block-navigation .kai-nav-boton a {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
	border-radius: 999px;
	padding: .55rem 1.1rem;
	font-weight: 500;
}
.kai-cab .wp-block-navigation .kai-nav-boton a:hover { background: var(--wp--preset--color--azul-hondo); color: var(--wp--preset--color--blanco); }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem max(16px, env(safe-area-inset-right, 0px)) 1.5rem max(16px, env(safe-area-inset-left, 0px)); }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; font-size: 1.3rem; }
@media (max-width: 600px) { .kai-cab .wp-block-site-logo img { max-height: 38px; } }

/* ============================================================
   3. Bandas (estilos de bloque del Grupo)
   ============================================================ */
.is-style-banda,
.is-style-banda-niebla,
.is-style-banda-profunda { padding-block: var(--kai-banda); }
.wp-block-group.is-style-banda-niebla { background: var(--wp--preset--color--niebla); }
.wp-block-group.is-style-banda-profunda { background: var(--wp--preset--color--profundo); color: var(--wp--preset--color--blanco); }
.is-style-banda-profunda a:not(.wp-block-button__link) { color: var(--wp--preset--color--blanco); }
.is-style-banda-profunda .is-style-etiqueta { color: var(--wp--preset--color--turquesa); }
.is-style-banda-profunda .has-gris-color { color: #C9DCE2 !important; }
.is-style-banda-profunda .wp-block-button__link { background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--profundo); border-color: var(--wp--preset--color--blanco); }
.is-style-banda-profunda .wp-block-button__link:hover { background: var(--wp--preset--color--niebla); color: var(--wp--preset--color--profundo); }
.is-style-banda-profunda .is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--blanco); }

/* Etiqueta sobre los títulos */
.is-style-etiqueta {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 500;
	font-size: .8rem !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
}
.is-style-entrada { font-size: var(--wp--preset--font-size--entrada); color: var(--wp--preset--color--gris); }

/* Tarjeta */
.wp-block-group.is-style-tarjeta {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--kai-radio);
	padding: 1.6rem;
	transition: transform .25s ease, border-color .25s ease;
	height: 100%;
}
.wp-block-group.is-style-tarjeta:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--azul); }
.wp-block-group.is-style-tarjeta p { color: var(--wp--preset--color--gris); font-size: 1rem; }
.wp-block-group.is-style-tarjeta .kai-ver a { font-family: var(--wp--preset--font-family--titulos); font-weight: 500; text-decoration: none; }

/* Pasos numerados (lista ordenada) */
ol.is-style-pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; }
ol.is-style-pasos > li {
	counter-increment: paso;
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr);
	gap: 1rem;
	padding-block: 1.3rem;
	border-bottom: 1px solid var(--wp--preset--color--linea);
	max-width: none;
	color: var(--wp--preset--color--gris);
}
ol.is-style-pasos > li:first-child { border-top: 1px solid var(--wp--preset--color--linea); }
ol.is-style-pasos > li::before { content: counter(paso); font-family: var(--wp--preset--font-family--titulos); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--wp--preset--color--azul); grid-row: span 2; }
ol.is-style-pasos > li strong { display: block; font-family: var(--wp--preset--font-family--titulos); font-weight: 500; font-size: 1.15rem; color: var(--wp--preset--color--tinta); margin-bottom: .2rem; }

/* Tabla */
.wp-block-table.is-style-kai { border: 1px solid var(--wp--preset--color--linea); border-radius: var(--kai-radio); overflow-x: auto; background: var(--wp--preset--color--blanco); }
.wp-block-table.is-style-kai table { border-collapse: collapse; min-width: 520px; width: 100%; font-variant-numeric: tabular-nums; }
.wp-block-table.is-style-kai :is(th, td) { border: 0; border-bottom: 1px solid var(--wp--preset--color--linea); padding: .95rem 1.25rem; text-align: left; vertical-align: top; }
.wp-block-table.is-style-kai th { font-family: var(--wp--preset--font-family--titulos); font-weight: 500; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gris); background: var(--wp--preset--color--niebla); }
.wp-block-table.is-style-kai tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-kai thead { border-bottom: 0; }
/* Tablas antiguas (rayas de GeneratePress) */
.wp-block-table.is-style-stripes { border-bottom: 0; }
.wp-block-table :is(th, td) { padding: .75rem 1rem; border: 1px solid var(--wp--preset--color--linea); }
.wp-block-table thead { border-bottom: 2px solid var(--wp--preset--color--linea); }
.wp-block-table th { font-family: var(--wp--preset--font-family--titulos); font-weight: 500; background: var(--wp--preset--color--niebla); }
.wp-block-table { overflow-x: auto; }

/* ============================================================
   4. Componentes de los patrones
   ============================================================ */
/* Portada */
.kai-portada { padding-block: clamp(3rem, 8vw, 6rem) var(--kai-banda); }
.kai-arco {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50% 50% var(--kai-radio) var(--kai-radio);
	background: var(--wp--preset--color--niebla);
	display: grid;
	place-items: center;
	max-width: 460px;
	margin-inline: auto;
	width: 100%;
}
.kai-arco::before {
	content: "";
	position: absolute;
	inset: -6% -6% auto;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--turquesa);
	clip-path: inset(0 0 52% 0);
	pointer-events: none;
}
.kai-arco img { width: 58%; height: auto; }
@media (max-width: 781px) { .kai-arco { max-width: 300px; } }
.kai-arco.tiene-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Datos clave */
.kai-datos { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.kai-datos > * { margin: 0 !important; }
.kai-dato { border-top: 2px solid var(--wp--preset--color--turquesa); padding-top: 1rem; }
.kai-dato > * { margin: 0; }
.kai-dato .kai-cifra { font-family: var(--wp--preset--font-family--titulos); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; color: var(--wp--preset--color--azul); font-variant-numeric: tabular-nums; }
.kai-dato p:not(.kai-cifra) { color: var(--wp--preset--color--gris); font-size: .98rem; margin-top: .3rem; }
@media (max-width: 781px) { .kai-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Rejilla de tarjetas */
.kai-rejilla { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.kai-rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kai-rejilla > * { margin: 0 !important; }
@media (max-width: 960px) { .kai-rejilla, .kai-rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kai-rejilla, .kai-rejilla.tres { grid-template-columns: minmax(0, 1fr); } }

/* Cita de Kai, con el arco del logo */
.kai-cita blockquote, .kai-cita .wp-block-quote { margin: 0; padding: 0; border: 0; }
.kai-cita .wp-block-quote p { font-family: var(--wp--preset--font-family--titulos); font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.3; max-width: 34ch; }
.kai-cita .wp-block-quote::before { content: ""; display: block; width: 3.5rem; height: 1.75rem; border: 3px solid var(--wp--preset--color--turquesa); border-bottom: 0; border-radius: 3.5rem 3.5rem 0 0; margin-bottom: 1.25rem; }
.kai-cita .wp-block-quote cite { font-family: var(--wp--preset--font-family--texto); font-style: normal; font-size: 1rem; color: var(--wp--preset--color--gris); }

/* Columnas apiladas con hueco limpio en móvil */
@media (max-width: 781px) { .wp-block-columns.kai-apila { gap: 2.5rem; } }

/* ============================================================
   5. Pie
   ============================================================ */
.kai-pie { background: #082836; border-top: 1px solid rgba(255, 255, 255, .08); color: #C9DCE2; font-size: .98rem; }
.kai-pie a { color: var(--wp--preset--color--blanco); text-decoration: none; }
.kai-pie a:hover { text-decoration: underline; color: var(--wp--preset--color--blanco); }
.kai-pie h2, .kai-pie h3 { color: var(--wp--preset--color--blanco); font-size: .85rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.kai-pie .kai-pie-logo img { max-width: 190px; height: auto; }
.kai-pie .kai-legal { border-top: 1px solid rgba(255, 255, 255, .14); font-size: .88rem; }
.kai-pie .wp-block-column > * + * { margin-block-start: .9rem; }
.kai-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }

/* Botón flotante de WhatsApp (mismo marcado que en la web anterior) */
#wp-whatsapp { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); z-index: 9999; }
#wp-whatsapp a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; padding: 8px 10px; background: var(--wp--preset--color--azul); border-radius: 16px; box-shadow: 0 12px 28px rgba(12, 52, 69, .22); transition: transform .2s ease, background .2s ease; }
#wp-whatsapp a:hover { background: var(--wp--preset--color--azul-hondo); transform: translateY(-3px); text-decoration: none; }
#wp-whatsapp img { width: 44px; height: 44px; display: block; object-fit: contain; }
#wp-whatsapp span { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; }
@media (max-width: 600px) { #wp-whatsapp span { display: none; } #wp-whatsapp a { padding: 8px; border-radius: 50%; } }
/* La landing /clases/ trae su propio botón flotante (#kp-wa-float): no mostrar dos */
body:has(#kp-wa-float) #wp-whatsapp { display: none; }

/* ============================================================
   6. Entradas del blog
   ============================================================ */
.kai-entrada-cabecera { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.kai-entrada-cabecera .wp-block-post-title { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
.kai-entrada-meta { color: var(--wp--preset--color--gris); font-size: .95rem; }
.wp-block-post-featured-image img { border-radius: var(--kai-radio); }
.kai-lista-entradas .wp-block-post { border-top: 1px solid var(--wp--preset--color--linea); padding-block: 1.75rem; }
.kai-lista-entradas .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--tinta); }
.kai-lista-entradas .wp-block-post-title a:hover { color: var(--wp--preset--color--azul); }

/* ============================================================
   7. Contenido heredado (páginas y formularios de antes)
   ============================================================ */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--linea); padding-block: .9rem; }
.wp-block-details summary { cursor: pointer; font-family: var(--wp--preset--font-family--titulos); font-weight: 500; font-size: 1.08rem; }
.wp-block-details[open] summary { margin-bottom: .6rem; }
.wp-block-image img { border-radius: var(--kai-radio); }
.map iframe, .wp-block-html iframe[src*="google.com/maps"] { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--kai-radio); }
.muted { color: var(--wp--preset--color--gris); }
.cta { display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--azul); color: #fff; border-radius: 999px; padding: .85rem 1.5rem; font-family: var(--wp--preset--font-family--titulos); font-weight: 500; text-decoration: none; }
.cta:hover { background: var(--wp--preset--color--azul-hondo); color: #fff; }

/* Formulario de contacto (Contact Form 7, clases tp7-*) */
.tp7-form { display: grid; gap: 20px; }
.tp7-form .row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.tp7-form .field label { font-weight: 600; margin-bottom: 6px; display: block; }
.tp7-input, .wpcf7 select { width: 100%; padding: 12px 14px; border: 1px solid var(--wp--preset--color--linea); border-radius: 12px; background: #fff; font: inherit; color: inherit; }
.tp7-input:focus, .wpcf7 select:focus { outline: none; border-color: var(--wp--preset--color--azul); box-shadow: 0 0 0 3px rgba(3, 119, 163, .15); }
.tp7-submit, .wpcf7 input[type="submit"] { background: var(--wp--preset--color--azul); color: #fff; border: 0; border-radius: 999px; padding: .9rem 1.8rem; font-family: var(--wp--preset--font-family--titulos); font-weight: 500; font-size: 1rem; cursor: pointer; }
.tp7-submit:hover, .wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--azul-hondo); }
.privacy { font-size: .9rem; color: var(--wp--preset--color--gris); }
@media (max-width: 760px) { .tp7-form .row { grid-template-columns: 1fr; } }

/* ============================================================
   8. Movimiento: poco y suave
   - Solo en navegadores que lo admiten (si no, la web se ve estática).
   - Nada si el visitante pide «reducir movimiento».
   - Lo que está en pantalla al cargar se ve completo.
   ============================================================ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.aparece,
		.kai-rejilla > *,
		.kai-datos > *,
		ol.is-style-pasos > li {
			animation: kai-aparece linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		.kai-cab { animation: kai-compacta linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
		.kai-cab > .wp-block-group { animation: kai-compacta-dentro linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
	}
}
@keyframes kai-aparece { from { opacity: .15; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes kai-compacta { to { border-bottom-color: var(--wp--preset--color--linea); background: rgba(255, 255, 255, .97); } }
@keyframes kai-compacta-dentro { to { padding-block: .55rem; } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

/* ============================================================
   9. Ritmo de color (0.2.0)
   Más color sin tocar el contenido: todo cuelga de las clases
   que ya usan las páginas. Contrastes AA comprobados.
   ============================================================ */
/* Bandas claras: alternan niebla (azulada) y agua (turquesa) */
.wp-block-post-content > .wp-block-group.is-style-banda-niebla:nth-child(even of .is-style-banda-niebla) { background: var(--wp--preset--color--agua); }
.is-style-banda-niebla:nth-child(even of .is-style-banda-niebla) .is-style-etiqueta { color: var(--wp--preset--color--azul-hondo); }

/* Etiqueta con trazo turquesa */
.is-style-etiqueta::before { content: ""; display: inline-block; width: 1.6rem; height: 2px; background: var(--wp--preset--color--turquesa); vertical-align: middle; margin-right: .6rem; margin-top: -2px; }
.has-text-align-center.is-style-etiqueta::before { display: none; }

/* Portada: luz turquesa suave detrás del arco */
.kai-portada { background: radial-gradient(60rem 34rem at 92% 30%, rgba(80, 188, 183, .16), transparent 70%), linear-gradient(180deg, var(--wp--preset--color--blanco), var(--wp--preset--color--niebla)); }
.kai-arco { background: linear-gradient(160deg, var(--wp--preset--color--agua), var(--wp--preset--color--niebla) 70%); }

/* Datos clave: la banda pasa a azul del logo */
.wp-block-group.is-style-banda-niebla:has(> .kai-datos) { background: var(--wp--preset--color--azul); color: var(--wp--preset--color--blanco); }
.is-style-banda-niebla:has(> .kai-datos) .kai-dato { border-top-color: rgba(255, 255, 255, .45); }
.is-style-banda-niebla:has(> .kai-datos) .kai-dato .kai-cifra,
.is-style-banda-niebla:has(> .kai-datos) .kai-dato p:not(.kai-cifra) { color: var(--wp--preset--color--blanco); }
.is-style-banda-niebla:has(> .kai-datos) .kai-dato .kai-cifra { font-weight: 400; }

/* Tarjetas: franja de color arriba, del turquesa al azul profundo */
.wp-block-group.is-style-tarjeta { border-top: 4px solid var(--kai-acento, var(--wp--preset--color--turquesa)); }
.kai-rejilla > .is-style-tarjeta:nth-child(4n+2) { --kai-acento: var(--wp--preset--color--azul); }
.kai-rejilla > .is-style-tarjeta:nth-child(4n+3) { --kai-acento: var(--wp--preset--color--azul-hondo); }
.kai-rejilla > .is-style-tarjeta:nth-child(4n+4) { --kai-acento: var(--wp--preset--color--profundo); }
.wp-block-group.is-style-tarjeta:hover { border-color: var(--wp--preset--color--linea); border-top-color: var(--kai-acento, var(--wp--preset--color--turquesa)); box-shadow: 0 14px 30px rgba(12, 52, 69, .10); }

/* Pasos: círculos que se oscurecen fase a fase (como la progresión) */
ol.is-style-pasos > li::before { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.15rem; font-weight: 500; color: var(--wp--preset--color--blanco); background: var(--kai-paso, var(--wp--preset--color--azul)); }
ol.is-style-pasos > li:nth-child(1) { --kai-paso: #257F7B; }
ol.is-style-pasos > li:nth-child(2) { --kai-paso: var(--wp--preset--color--azul); }
ol.is-style-pasos > li:nth-child(3) { --kai-paso: var(--wp--preset--color--azul-hondo); }
ol.is-style-pasos > li:nth-child(n+4) { --kai-paso: var(--wp--preset--color--profundo); }

/* Cita de Kai: banda turquesa */
.wp-block-group.is-style-banda:has(> .kai-cita) { background: var(--wp--preset--color--turquesa); color: var(--wp--preset--color--profundo); }
.is-style-banda:has(> .kai-cita) .wp-block-quote::before { border-color: var(--wp--preset--color--blanco); }
.is-style-banda:has(> .kai-cita) .wp-block-quote cite,
.is-style-banda:has(> .kai-cita) a { color: var(--wp--preset--color--profundo); }

/* Tablas: cabecera azul */
.wp-block-table.is-style-kai th,
.wp-block-table thead th { background: var(--wp--preset--color--azul-hondo); color: var(--wp--preset--color--blanco); border-color: var(--wp--preset--color--azul-hondo); }
.wp-block-table.is-style-kai tbody tr:nth-child(even) td { background: rgba(226, 242, 241, .55); }

/* Preguntas: marcador turquesa */
.wp-block-details summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--wp--preset--color--turquesa); transition: transform .2s ease; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }

/* Llamada final: arco turquesa de fondo */
.wp-block-group.is-style-banda-profunda { position: relative; overflow: clip; isolation: isolate; }
.wp-block-group.is-style-banda-profunda::after { content: ""; position: absolute; z-index: -1; width: 36rem; aspect-ratio: 1; right: -12rem; bottom: -24rem; border-radius: 50%; border: 3px solid rgba(80, 188, 183, .35); box-shadow: 0 0 0 3.5rem rgba(80, 188, 183, .06); pointer-events: none; }

/* ============================================================
   10. Blog (0.2.2)
   ============================================================ */
.kai-banda-entradas { padding-block: var(--kai-banda); }
.kai-rejilla-entradas { gap: 1.25rem !important; }
.kai-lista-entradas .kai-rejilla-entradas > li { margin: 0; max-width: none; border-top: 0; padding-block: 0; }
.kai-rejilla-entradas .is-style-tarjeta { display: flex; flex-direction: column; gap: .6rem; }
.kai-rejilla-entradas .is-style-tarjeta > * { margin: 0; }
.kai-rejilla-entradas .wp-block-post-featured-image { margin: -1.6rem -1.6rem .4rem; }
.kai-rejilla-entradas .wp-block-post-featured-image img { border-radius: calc(var(--kai-radio) - 4px) calc(var(--kai-radio) - 4px) 0 0; }
.kai-rejilla-entradas .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--tinta); }
.kai-rejilla-entradas .wp-block-post-title a:hover { color: var(--wp--preset--color--azul); }
.kai-rejilla-entradas .wp-block-post-excerpt { color: var(--wp--preset--color--gris); font-size: 1rem; }
.kai-rejilla-entradas .wp-block-post-excerpt__more-link { font-family: var(--wp--preset--font-family--titulos); font-weight: 500; text-decoration: none; }
.kai-rejilla-entradas > li:nth-child(4n+2) .is-style-tarjeta { --kai-acento: var(--wp--preset--color--azul); }
.kai-rejilla-entradas > li:nth-child(4n+3) .is-style-tarjeta { --kai-acento: var(--wp--preset--color--azul-hondo); }
.kai-rejilla-entradas > li:nth-child(4n+4) .is-style-tarjeta { --kai-acento: var(--wp--preset--color--profundo); }
@media (min-width: 600px) and (max-width: 960px) { .kai-rejilla-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.kai-lista-entradas .wp-block-query-pagination { margin-top: 2.5rem; }
/* Entrada: volver al blog; sin caja final si la entrada ya trae sus botones */
.kai-volver { padding-block-end: var(--wp--preset--spacing--50); }
.kai-volver a { font-family: var(--wp--preset--font-family--titulos); font-weight: 500; text-decoration: none; }
.kai-llamada-entrada > * { margin-block: 0; }
.kai-principal:has(.wp-block-post-content .wp-block-buttons) .kai-llamada-entrada { display: none; }

/* ============================================================
   11. Todos los dispositivos (0.3.0, Fase 8)
   La interacción se decide por el puntero, no por el aparato:
   (hover: hover) and (pointer: fine) = ratón · (hover: none) = dedo.
   ============================================================ */

/* Cabecera en el móvil: «Reservar» siempre a la vista, junto al menú */
.kai-cab-derecha { gap: .75rem; }
.kai-cab .kai-cab-reservar { display: none; margin: 0; }
.kai-cab-reservar .wp-block-button__link { padding: .55rem 1.05rem; font-size: .95rem; }
@media (max-width: 599px) { .kai-cab .kai-cab-reservar { display: flex; } }

/* Zonas táctiles de 44 px como mínimo */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.wp-block-details summary { min-height: 44px; padding-block: .35rem; }

/* WhatsApp flotante: redondo con dedo o pantalla de hasta 1024 px (no tapa texto con la etiqueta) */
@media (max-width: 1024px), (hover: none) {
	#wp-whatsapp span { display: none; }
	#wp-whatsapp a { padding: 8px; border-radius: 50%; }
	#wp-whatsapp img { width: 40px; height: 40px; }
}

/* Portada de las páginas interiores: la introducción alineada con el H1 */
.kai-portada > :not(.alignwide):not(.alignfull) { margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important; margin-right: auto !important; }

/* Landing /clases/: portada más compacta para que el botón se vea antes */
.kai-principal:has(#kp-wa-float) .kai-portada { padding-block-start: clamp(1.5rem, 4vw, 3rem); }
.kai-principal:has(#kp-wa-float) .kai-portada h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }

/* Ordenador: secciones de texto a dos columnas (título a la izquierda, fijo al bajar) */
@media (min-width: 1080px) {
	.wp-block-post-content > :is(.is-style-banda, .is-style-banda-niebla):has(> h2:first-child) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 330px) minmax(0, 720px) minmax(0, 1fr);
		column-gap: 4rem;
		align-items: start;
	}
	.wp-block-post-content > :is(.is-style-banda, .is-style-banda-niebla):has(> h2:first-child) > * {
		grid-column: 3;
		max-width: none !important;
		margin-inline: 0 !important;
		margin-block-start: 0;
	}
	.wp-block-post-content > :is(.is-style-banda, .is-style-banda-niebla):has(> h2:first-child) > * + * { margin-block-start: 1.2rem; }
	.wp-block-post-content > :is(.is-style-banda, .is-style-banda-niebla):has(> h2:first-child) > h2:first-child {
		grid-column: 2;
		grid-row: 1 / span 40;
		position: sticky;
		top: 6.5rem;
		margin: 0 !important;
	}
}

/* Ratón: las cosas reaccionan al pasar por encima */
.wp-block-group.is-style-tarjeta:hover { transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
	.wp-block-group.is-style-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(12, 52, 69, .12); }
	.is-style-tarjeta .kai-ver a, .kai-rejilla-entradas .wp-block-post-excerpt__more-link { display: inline-block; transition: transform .2s ease; }
	.is-style-tarjeta:hover .kai-ver a, .kai-rejilla-entradas .is-style-tarjeta:hover .wp-block-post-excerpt__more-link { transform: translateX(4px); }
	.wp-element-button, .wp-block-button__link { transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
	.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(12, 52, 69, .14); }
	.wp-block-post-content :is(p, li) a:not(.wp-block-button__link) { text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .2s ease, color .2s ease; }
	.wp-block-post-content :is(p, li) a:not(.wp-block-button__link):hover { text-decoration-color: var(--wp--preset--color--turquesa); text-decoration-thickness: 2px; }
	.wp-block-table.is-style-kai tbody tr { transition: background-color .15s ease; }
	.wp-block-table.is-style-kai tbody tr:hover td { background: var(--wp--preset--color--agua); }
	.wp-block-details summary:hover { color: var(--wp--preset--color--azul); }
}

/* Dedo: respuesta al tocar, como en una app */
@media (hover: none) {
	.wp-block-button__link, .wp-block-group.is-style-tarjeta, #wp-whatsapp a, .wp-block-details summary { -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
	.wp-block-button__link:active, #wp-whatsapp a:active { transform: scale(.96); }
	.wp-block-group.is-style-tarjeta:active { transform: scale(.98); }
	.wp-block-details summary:active { color: var(--wp--preset--color--azul); }
}

/* Método por fases: una línea que se rellena al bajar */
ol.is-style-pasos { position: relative; isolation: isolate; }
ol.is-style-pasos::before,
ol.is-style-pasos::after { content: ""; position: absolute; left: calc(1.3rem - 1px); top: 2.6rem; bottom: 2.6rem; width: 2px; border-radius: 2px; pointer-events: none; z-index: -1; }
ol.is-style-pasos::before { background: var(--wp--preset--color--linea); }
ol.is-style-pasos::after { background: linear-gradient(#257F7B, var(--wp--preset--color--azul), var(--wp--preset--color--profundo)); transform-origin: top; }
ol.is-style-pasos > li::before { position: relative; z-index: 1; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		ol.is-style-pasos::after { animation: kai-relleno linear both; animation-timeline: view(); animation-range: entry 30% cover 65%; }
	}
}
@keyframes kai-relleno { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ============================================================
   12. Menú con más contenido (0.3.1)
   ============================================================ */
/* Desplegable de «Clases» en ordenador y tablet */
.kai-cab .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
	border-top: 3px solid var(--wp--preset--color--turquesa);
	border-radius: 0 0 14px 14px;
	box-shadow: 0 14px 32px rgba(14, 42, 58, .12);
	padding: .5rem 0;
	min-width: 230px;
}
.kai-cab .wp-block-navigation .wp-block-navigation__submenu-container a { padding: .6rem 1.2rem; font-size: .95rem; }
.kai-cab .wp-block-navigation .wp-block-navigation__submenu-container li:last-child { border-top: 1px solid var(--wp--preset--color--linea); margin-top: .3rem; }
.kai-cab .wp-block-navigation .wp-block-navigation__submenu-container li:last-child a { color: var(--wp--preset--color--azul); font-weight: 600; }
.kai-cab .wp-block-navigation .wp-block-navigation__submenu-icon { width: 10px; height: 10px; margin-left: .3rem; }
@media (hover: hover) and (pointer: fine) {
	.kai-cab .wp-block-navigation .wp-block-navigation__submenu-container a:hover { background: var(--wp--preset--color--agua); color: var(--wp--preset--color--azul-hondo); }
}
/* Entre 600 y 900 px el menú completo no cabe con holgura: algo más compacto */
@media (min-width: 600px) and (max-width: 900px) {
	.kai-cab .wp-block-navigation { --kai-hueco: 1rem; gap: 1rem !important; font-size: .95rem; }
	.kai-cab .wp-block-navigation .wp-block-navigation__container { gap: 1rem !important; }
	.kai-cab .wp-block-site-logo img { width: 160px !important; }
}
/* Menú del móvil: subapartados visibles, más pequeños y sangrados */
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0; box-shadow: none; padding: .4rem 0 0 1rem !important; gap: .7rem; font-size: 1.05rem;
	border-left: 2px solid var(--wp--preset--color--turquesa) !important; margin-top: .6rem;
}
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li:last-child { border-top: 0; margin-top: 0; }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { padding: .2rem 0; min-height: 40px; display: flex; align-items: center; }
/* El desplegable se abre hacia la derecha, bajo «Clases» */
.kai-cab .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { left: 0 !important; right: auto !important; }
/* El desenfoque de la cabecera convierte la cabecera en el marco del menú del móvil
   y lo recorta a su altura: se quita mientras el menú está abierto. */
.kai-cab:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Menú del móvil abierto: alineado a la izquierda, subapartados juntos y sin el WhatsApp flotante encima */
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { gap: .15rem !important; }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { padding: 0 !important; }
body:has(.wp-block-navigation__responsive-container.is-menu-open) :is(#wp-whatsapp, #kp-wa-float) { display: none; }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { box-sizing: border-box; padding: .3rem 0 !important; min-height: 44px !important; line-height: 1.3; font-size: 1.05rem; }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border-radius: 0; }
.kai-cab .wp-block-navigation__responsive-container.is-menu-open .kai-nav-boton a { padding: .6rem 1.6rem !important; margin-top: .4rem; }

/* ============================================================
   13. Accesibilidad, comprobación final (0.3.2, Fase 8.6)
   ============================================================ */
/* Enlaces del texto en azul hondo: el azul se quedaba en 4,4:1 sobre las bandas claras (mínimo 4,5) */
.wp-block-post-content :is(p, li, td, dd, figcaption) a:not(.wp-block-button__link):not(:is(.is-style-banda-profunda, .is-style-banda, .is-style-banda-niebla:has(> .kai-datos), .has-background) *) { color: var(--wp--preset--color--azul-hondo); }
.wp-block-post-content .is-style-banda-niebla:not(:has(> .kai-datos)) :is(p, li, td, dd, figcaption) a:not(.wp-block-button__link) { color: var(--wp--preset--color--azul-hondo); }
/* Verde de WhatsApp más oscuro: el verde original con texto blanco solo da 2:1; este, 5,2:1 */
.wp-block-button__link[style*="25D366" i], #kp-wa-float { background-color: #167C43 !important; }
@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link[style*="25D366" i]:hover, #kp-wa-float:hover { background-color: #0F5F33 !important; }
}
/* Aviso de Complianz sobre el mapa bloqueado: gris más oscuro para que se lea */
.cmplz-blocked-content-notice { background-color: #5E5E5E !important; color: #fff !important; }
/* Tablas que se desplazan en horizontal: se ve el foco al llegar con el teclado */
figure.wp-block-table:focus-visible { outline: 3px solid var(--wp--preset--color--turquesa); outline-offset: 3px; }
/* Letra de reserva con las medidas de la definitiva: al llegar Outfit o Source Sans el texto no se recoloca (CLS) */
@font-face { font-family: "Outfit Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 97.95%; ascent-override: 102.1%; descent-override: 26.5%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 92.29%; ascent-override: 110.5%; descent-override: 43.3%; line-gap-override: 0%; }

/* ============================================================
   14. Coreografía (0.4.0)
   En Pilates se valora la coordinación y el cuidado del detalle:
   los elementos entran en cascada, con la misma curva y el mismo
   ritmo. Todo se desactiva con «reducir movimiento».
   ============================================================ */
:root { --kai-curva: cubic-bezier(.22, .61, .36, 1); }

/* 1. Cifras del inicio: la línea se dibuja y la cifra sube, una tras otra */
.kai-dato { position: relative; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kai-datos > .kai-dato { border-top-color: transparent; animation: none; }
		.kai-datos > .kai-dato::before {
			content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
			background: var(--wp--preset--color--turquesa); transform-origin: left;
			animation: kai-linea linear both; animation-timeline: view(); animation-range: entry 10% entry 70%;
		}
		.is-style-banda-niebla:has(> .kai-datos) .kai-dato::before { background: rgba(255, 255, 255, .45); }
		.kai-datos > .kai-dato > * { animation: kai-aparece linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
		/* cascada: cada cifra un poco después que la anterior */
		.kai-datos > .kai-dato:nth-child(2)::before, .kai-datos > .kai-dato:nth-child(2) > * { animation-range: entry 22% entry 88%; }
		.kai-datos > .kai-dato:nth-child(3)::before, .kai-datos > .kai-dato:nth-child(3) > * { animation-range: entry 34% entry 96%; }
		.kai-datos > .kai-dato:nth-child(4)::before, .kai-datos > .kai-dato:nth-child(4) > * { animation-range: entry 46% cover 52%; }
		.kai-datos > .kai-dato > p:not(.kai-cifra) { animation-name: kai-funde; }

		/* 2. Tarjetas en ordenador y tablet: misma cascada */
		.kai-rejilla > :nth-child(4n+2) { animation-range: entry 8% entry 55%; }
		.kai-rejilla > :nth-child(4n+3) { animation-range: entry 16% entry 65%; }
		.kai-rejilla > :nth-child(4n+4) { animation-range: entry 24% entry 75%; }

		/* 3. Fotos: se revelan de abajo arriba con un leve acercamiento, como un telón */
		.wp-block-post-content .wp-block-image:not(.kai-portada *) { overflow: clip; }
		.wp-block-post-content .wp-block-image:not(.kai-portada *) img {
			animation: kai-telon linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
		}
	}
}
@keyframes kai-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kai-funde { from { opacity: 0; } to { opacity: 1; } }
@keyframes kai-telon { from { clip-path: inset(18% 0 0 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* 4. Zoom muy leve al pasar el ratón por las fotos que llevan a otra página (tarjetas del blog, imágenes con enlace) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.wp-block-post-featured-image, .wp-block-image:has(> a) { overflow: clip; }
	.wp-block-post-featured-image img, .wp-block-image > a img { transition: transform .9s var(--kai-curva); }
	.wp-block-post:hover .wp-block-post-featured-image img,
	.wp-block-image > a:hover img { transform: scale(1.03); }
	/* tarjetas sin foto: la línea de color de arriba se alarga desde el centro */
	.kai-rejilla > .is-style-tarjeta { background-image: linear-gradient(var(--kai-acento, var(--wp--preset--color--turquesa)), var(--kai-acento, var(--wp--preset--color--turquesa))); background-repeat: no-repeat; background-position: 50% 100%; background-size: 0 3px; transition: transform .25s ease, border-color .25s ease, background-size .6s var(--kai-curva); }
	.kai-rejilla > .is-style-tarjeta:hover { background-size: 100% 3px; }
}

/* 5. Móvil: las clases del inicio en un carrusel que se desliza con el dedo.
   La tarjeta siguiente asoma por el borde para que se entienda que hay más,
   y unos puntos debajo marcan por dónde vas (assets/js/carrusel.js). */
@media (max-width: 560px) {
	.kai-rejilla:has(.kai-ver) {
		display: flex !important; gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
		margin-inline: calc(var(--wp--style--root--padding-left, 16px) * -1) calc(var(--wp--style--root--padding-right, 16px) * -1) !important;
		padding: .4rem var(--wp--style--root--padding-right, 16px) 1.2rem var(--wp--style--root--padding-left, 16px);
		scroll-padding-inline: var(--wp--style--root--padding-left, 16px);
	}
	.kai-rejilla:has(.kai-ver)::-webkit-scrollbar { display: none; }
	.kai-rejilla:has(.kai-ver) > * { flex: 0 0 82%; scroll-snap-align: start; }
	@supports (animation-timeline: view(inline)) {
		@media (prefers-reduced-motion: no-preference) {
			/* las tarjetas que asoman se ven algo más pequeñas y tenues; al llegar, toman su sitio */
			.kai-rejilla:has(.kai-ver) > * { animation: kai-foco linear both; animation-timeline: view(inline); animation-range: entry 0% entry 70%; }
		}
	}
}
@keyframes kai-foco { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* Puntos del carrusel (los crea carrusel.js; sin JavaScript no aparecen y el carrusel funciona igual) */
.kai-puntos { display: none; }
@media (max-width: 560px) {
	.kai-puntos { display: flex; justify-content: center; gap: .15rem; margin-top: .2rem !important; }
	.kai-puntos button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
	.kai-puntos button::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--wp--preset--color--linea); transition: width .45s var(--kai-curva), background-color .45s var(--kai-curva); }
	.kai-puntos button[aria-current="true"]::before { width: 22px; background: var(--wp--preset--color--turquesa); }
	.kai-puntos button:focus-visible { outline: 2px solid var(--wp--preset--color--azul); outline-offset: 2px; border-radius: 8px; }
}

/* ============================================================
   15. Coreografía en toda la web (0.5.0)
   Lo mismo que el inicio, en cada página: la cabecera entra en
   secuencia al cargar, el arco turquesa de la marca se dibuja, y al
   bajar cada pieza aparece a su tiempo (las columnas y botones,
   uno tras otro). Misma curva, mismo ritmo. Nada con «reducir movimiento».
   ============================================================ */

/* 1. Arco de la marca en la cabecera de las páginas (el inicio ya tiene el suyo) */
.kai-portada:not(:has(.kai-arco)) { position: relative; overflow: clip; isolation: isolate; }
.kai-portada:not(:has(.kai-arco))::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: clamp(15rem, 34vw, 30rem); aspect-ratio: 1; right: clamp(-9rem, -7vw, -4rem); top: clamp(1.5rem, 6vw, 4rem);
	border-radius: 50%; border: 3px solid rgba(80, 188, 183, .35);
	clip-path: inset(0 0 52% 0);
}
@media (max-width: 600px) { .kai-portada:not(:has(.kai-arco))::after { width: 11rem; right: -5rem; top: .5rem; opacity: .7; } }

@media (prefers-reduced-motion: no-preference) {
	/* 2. Cabecera al cargar: etiqueta (su trazo se dibuja), título, entradilla, botones y foto, en secuencia */
	.kai-portada :is(.is-style-etiqueta, h1, p, .wp-block-buttons):not(.kai-arco *),
	.kai-entrada-cabecera > * { animation: kai-entra 1s var(--kai-curva) both; }
	.kai-portada .is-style-etiqueta::before,
	.kai-entrada-cabecera .is-style-etiqueta::before { transform-origin: left; animation: kai-linea .9s var(--kai-curva) .15s both; }
	.kai-portada h1, .kai-entrada-cabecera > h1 { animation-delay: .12s; }
	.kai-portada p:not(.is-style-etiqueta), .kai-entrada-cabecera > :nth-child(n+3) { animation-delay: .26s; }
	.kai-portada .wp-block-buttons { animation-delay: .38s; }
	.kai-portada .wp-block-image:not(.kai-arco *) { overflow: clip; }
	.kai-portada .wp-block-image:not(.kai-arco *) img { animation: kai-telon 1.4s var(--kai-curva) .3s both; }
	/* el arco: se dibuja de izquierda a derecha; en el inicio, el círculo de la foto se asienta */
	.kai-portada:not(:has(.kai-arco))::after,
	.kai-arco::before { animation: kai-arco-dibuja 1.6s var(--kai-curva) .35s both; }
	.kai-arco { animation: kai-asienta 1.2s var(--kai-curva) .15s both; }

	/* 3. Preguntas: el contenido aparece con suavidad al abrir */
	.wp-block-details[open] > :not(summary) { animation: kai-entra .5s var(--kai-curva) both; }
	.wp-block-details summary::after { transition: transform .45s var(--kai-curva); }
	@supports (interpolate-size: allow-keywords) {
		.wp-block-details { interpolate-size: allow-keywords; }
		.wp-block-details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--kai-curva), content-visibility .5s allow-discrete; }
		.wp-block-details[open]::details-content { block-size: auto; }
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* 4. Al bajar: cada pieza sube y se aclara cuando entra.
		   Lo que ya se ve entero al cargar está completo (el tramo acaba 90 px después de entrar del todo). */
		.wp-block-post-content :is(h2, h3, h4, p, .wp-block-list > li, .wp-block-details, .wp-block-button, .wp-block-quote, figure.wp-block-table, .wp-block-embed):not(:is(.kai-portada, .aparece, .kai-datos, .kai-rejilla, .is-style-pasos, .kai-cita, .wp-block-details, li, blockquote, td, th, .is-style-tarjeta, .map, form, figcaption) *) {
			animation: kai-sube linear both; animation-timeline: view(); animation-range: entry 0% entry calc(100% + 90px);
		}
		/* columnas y botones lado a lado: uno tras otro */
		.wp-block-post-content .wp-block-column:nth-child(2) :is(h2, h3, h4, p, .wp-block-list > li, .wp-block-details, .wp-block-button, .wp-block-quote, figure.wp-block-table):not(:is(.kai-portada, .aparece, .kai-datos, .kai-rejilla, .is-style-pasos, .kai-cita, .wp-block-details, li, blockquote, td, th, .is-style-tarjeta, .map, form, figcaption) *),
		.wp-block-post-content .wp-block-button:nth-child(2):not(.kai-portada *) { animation-range: entry 0% entry calc(100% + 120px); }
		.wp-block-post-content .wp-block-column:nth-child(3) :is(h2, h3, h4, p, .wp-block-list > li, .wp-block-details, .wp-block-button):not(:is(.kai-portada, .aparece, .kai-datos, .kai-rejilla, .is-style-pasos, .kai-cita, .wp-block-details, li, blockquote, td, th, .is-style-tarjeta, .map, form, figcaption) *) { animation-range: entry 0% entry calc(100% + 150px); }

		/* 5. El trazo de cada etiqueta se dibuja al llegar */
		.wp-block-post-content .is-style-etiqueta:not(.kai-portada *)::before {
			transform-origin: left; animation: kai-linea linear both; animation-timeline: view(); animation-range: entry 0% entry calc(100% + 140px);
		}

		/* 6. Blog: las tarjetas de las entradas en cascada, como las clases del inicio */
		.kai-rejilla-entradas > li { animation: kai-aparece linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
		.kai-rejilla-entradas > li:nth-child(3n+2) { animation-range: entry 8% entry 55%; }
		.kai-rejilla-entradas > li:nth-child(3n+3) { animation-range: entry 16% entry 65%; }

		/* 7. El arco de la llamada final se desliza despacio mientras bajas */
		.wp-block-group.is-style-banda-profunda::after { animation: kai-gira linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	}
}

/* 8. Artículos del blog: una línea turquesa arriba marca cuánto llevas leído */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		body.single-post::after {
			content: ""; position: fixed; z-index: 10000; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
			background: var(--wp--preset--color--turquesa); transform-origin: left;
			animation: kai-linea linear both; animation-timeline: scroll(root);
		}
	}
}

@keyframes kai-entra { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kai-sube { from { opacity: .15; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kai-arco-dibuja { from { clip-path: inset(0 100% 52% 0); } to { clip-path: inset(0 0 52% 0); } }
@keyframes kai-asienta { from { opacity: .01; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kai-gira { from { transform: translate(2rem, 3rem) scale(.94); } to { transform: translate(-1rem, -3rem) scale(1.04); } }