/* ==========================================================================
   Terapias IV — línea de producto dentro de Terapias de Optimización.
   Hereda el lenguaje visual de Medicina Regenerativa (negro, beige de marca,
   ancho de pantalla) para que se lean como la misma familia.
   ========================================================================== */

.tiv {
	/* El beige de marca oscurecido. Sobre marfil, #B8A890 se queda en 2:1
	   de contraste y los rótulos pequeños —que en esta página van casi
	   todos en beige— dejan de leerse. Es el mismo color con la
	   luminosidad bajada, no otro color de marca. */
	--beige: #8A7856;
	--beige-soft: rgba(138, 120, 86, 0.5);
	--beige-faint: rgba(138, 120, 86, 0.22);
	--ink: #0A0A0B;
	--ink-dim: rgba(10, 10, 11, 0.66);
	--ink-50: rgba(10, 10, 11, 0.55);

	position: relative;
	/* El mismo marfil que ya usan Privacidad y Términos (.doc-page), para
	   que las páginas claras del sitio compartan suelo. */
	background: #FCFBF8;
	color: var(--ink);
}

/* Las dos islas oscuras. Debajo hay video o fotografía, así que ahí la
   paleta nocturna sigue siendo la correcta y se vuelve a declarar entera
   en vez de ir corrigiendo regla por regla. */
.tiv-hero,
.tiv-aco__hoja {
	--beige: #B8A890;
	--beige-soft: rgba(184, 168, 144, 0.55);
	--beige-faint: rgba(184, 168, 144, 0.14);
	--ink: #F7F5F0;
	--ink-dim: rgba(247, 245, 240, 0.66);
	color: var(--ink);
}

.tiv__bleed {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.tiv__section {
	position: relative;
	padding: clamp(72px, 11vh, 160px) clamp(24px, 6vw, 104px);
}

.tiv__inner { max-width: 1560px; margin: 0 auto; }

.tiv__eyebrow {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.7rem, 0.9vw, 0.8rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--beige);
	margin: 0 0 clamp(18px, 2.4vw, 34px);
}

.tiv__title {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.94;
	font-size: clamp(2.4rem, 6vw, 5.4rem);
	margin: 0 0 clamp(24px, 3vw, 46px);
}

.tiv__lead {
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	line-height: 1.65;
	font-weight: 300;
	color: var(--ink-dim);
	margin: 0 0 1.25em;
	max-width: 62ch;
}

/* El párrafo del consentimiento no se destaca: el documento pide que la vía
   sin Evaluación de Precisión no se presente como un atajo cómodo. */
.tiv__lead--nota {
	font-size: clamp(0.95rem, 1.1vw, 1.06rem);
	color: rgba(247, 245, 240, 0.52);
	border-left: 1px solid var(--beige-faint);
	padding-left: clamp(16px, 1.6vw, 26px);
}

/* ══════════ Hero ══════════ */
.tiv-hero {
	position: relative;
	min-height: clamp(520px, 88vh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient(120% 90% at 50% 40%, #141414 0%, #000 70%);
}

/* Sin @property el navegador trata --lr como texto y el radio no puede
   animarse; registrarlo como longitud es lo que permite que el área crezca y
   se cierre con suavidad. */
@property --lr {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

/* El líquido está oculto: solo se ve dentro del área que sigue al cursor.
   El radio se declara también como propiedad normal para que, en navegadores
   sin @property, la máscara siga siendo válida y arranque cerrada — si
   quedara sin definir, la máscara sería inválida y el fondo se vería entero,
   justo lo contrario de lo que se busca. */
.tiv-hero__liquid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	--lx: 50%;
	--ly: 50%;
	--lr: 0px;
	-webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.92) 42%, rgba(0, 0, 0, 0.40) 70%, transparent 100%);
	mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, 0.92) 42%, rgba(0, 0, 0, 0.40) 70%, transparent 100%);
	/* Sólo el revelado. El zoom que acompañaba a la máscara —el efecto lupa,
	   un scale con el origen en el cursor— se retiró a pedido del propietario:
	   en este hero el efecto que argumenta es el que descubre el fondo, y dos
	   efectos sobre el mismo elemento se estorbaban. */
	transition: --lr 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Baja el contraste del fondo justo detrás del texto. */
.tiv-hero__veil {
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 42% at 50% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.26) 58%, transparent 100%);
	pointer-events: none;
}

/* A la derecha y por debajo de la cabecera: .hdr es fija y mide entre 45 y
   73px (su relleno más el logo), así que arrancar en 88px la deja libre en
   cualquier tamaño de pantalla. */
.tiv-hero__isotipo {
	position: absolute;
	top: clamp(88px, 9vh, 132px);
	right: clamp(22px, 3.4vw, 52px);
	width: clamp(64px, 7vw, 118px);
	height: auto;
	z-index: 3;
	opacity: 0;
	animation: tiv-iso 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}

@keyframes tiv-iso {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: none; }
}

.tiv-hero__content {
	position: relative;
	z-index: 2;
	width: min(1400px, 92vw);
	text-align: center;
}

/* Mismas señas que el título de Medicina Regenerativa —familia, grosor y caja
   salen de aquí, no del JS— para que los dos se lean como la misma tipografía.
   El efecto de partículas lo añade vapor-title.js sobre este mismo elemento. */
.tiv-hero__title {
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(2.6rem, 12vw, 12rem);
	line-height: 0.94;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #F7F5F0;
	margin: 0;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.75);
}

.tiv-hero__sub {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.82rem, 1.05vw, 1rem);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(247, 245, 240, 0.62);
	margin: clamp(16px, 2vw, 28px) auto 0;
	opacity: 0;
	animation: tiv-sub 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms forwards;
}

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

/* ══════════ Intro ══════════ */
.tiv-intro {
	background: radial-gradient(1100px 520px at 50% 0%, rgba(138, 120, 86, 0.10), transparent 70%), #FCFBF8;
}

.tiv-intro__inner { max-width: 1100px; margin: 0 auto; }

.tiv-cta {
	display: inline-flex;
	align-items: center;
	margin-top: clamp(22px, 3vw, 40px);
	padding: 17px 34px;
	border: 1px solid var(--beige-soft);
	border-radius: 2px;
	color: var(--ink);
	text-decoration: none;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	transition: color 400ms ease, border-color 400ms ease;
}

.tiv-cta span { position: relative; z-index: 1; }

.tiv-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--beige);
	transform: translateY(101%);
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tiv-cta:hover { color: #FCFBF8; border-color: var(--beige); }
.tiv-cta:hover::before { transform: translateY(0); }

/* ══════════ Qué son — declaración palabra a palabra ══════════ */
.tiv__title--intro { margin-bottom: clamp(28px, 3.4vw, 52px); }

.tiv-declara {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.35rem, 2.5vw, 2.5rem);
	font-weight: 400;
	line-height: 1.28;
	color: var(--ink);
	margin: 0 0 clamp(26px, 3vw, 44px);
	max-width: 24ch;
}

/* Cada palabra entra por separado, escalonada por su índice. El retraso sale
   de --k, que escribe el PHP: así el escalonado no depende de JS. */
.tiv-declara__p {
	display: inline-block;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--k) * 55ms);
}

/* Como el resto: el estado oculto solo existe si hay JS. */
.tiv--anim .tiv-in.is-in .tiv-declara__p,
.tiv:not(.tiv--anim) .tiv-declara__p {
	opacity: 1;
	transform: none;
}

/* ══════════ Los siete protocolos — acordeón horizontal ══════════ */
.tiv-aco {
	display: flex;
	gap: 10px;
	height: clamp(440px, 66vh, 660px);
	margin-top: clamp(26px, 3vw, 46px);
}

.tiv-aco__hoja {
	position: relative;
	/* Se anima flex-grow y no el ancho: es el único número que el navegador
	   interpola sin recalcular la caja de las siete hojas en cada fotograma. */
	flex: 0 0 78px;
	min-width: 0;
	border-radius: 3px;
	overflow: hidden;
	background: #0F0F10;
	transition: flex-grow 620ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.tiv-aco__hoja.es-abierta { flex-grow: 1; }

.tiv-aco__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	filter: grayscale(.86) brightness(.42) contrast(1.06);
	transform: scale(1.06);
	transition: filter 600ms ease, transform 1100ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.tiv-aco__hoja.es-abierta .tiv-aco__foto { filter: none; transform: scale(1); }
.tiv-aco__hoja:not(.es-abierta):hover .tiv-aco__foto { filter: grayscale(.5) brightness(.62) contrast(1.06); }

/* Velo bajo el texto. Es lo que garantiza el contraste con CUALQUIER imagen:
   afinar un color de texto por foto se rompería en cuanto se cambie una. */
/* El velo ocupa toda la hoja y se escala desde abajo en vez de crecer de alto:
   una caja del 48% con este degradado y una del 100% escalada a 0.48 dan
   exactamente lo mismo, pero animar la altura recalcularía el layout en cada
   fotograma, y esto ocurre en cada apertura de hoja. */
.tiv-aco__hoja::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 6, 7, 0.97), rgba(6, 6, 7, 0.72) 44%, rgba(6, 6, 7, 0));
	pointer-events: none;
	z-index: 1;
	transform: scaleY(0.48);
	transform-origin: bottom;
	transition: transform 620ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.tiv-aco__hoja.es-abierta::after { transform: scaleY(0.82); }

/* Filete beige que marca cuál manda. */
.tiv-aco__hoja::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	z-index: 4;
	background: var(--beige);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.tiv-aco__hoja.es-abierta::before { transform: scaleX(1); }

.tiv-aco__destello {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
}

.tiv-aco__hoja.es-abierta .tiv-aco__destello { opacity: 1; }

.tiv-aco__destello::before {
	content: "";
	position: absolute;
	top: -20%; bottom: -20%;
	width: 30%;
	background: linear-gradient(100deg, transparent, rgba(184, 168, 144, 0.20) 38%, rgba(255, 255, 255, 0.30) 50%, rgba(184, 168, 144, 0.20) 62%, transparent);
	transform: translateX(-180%) skewX(-14deg);
}

@media (prefers-reduced-motion: no-preference) {
	.tiv-aco__hoja.es-abierta .tiv-aco__destello::before {
		animation: tiv-destello 1s cubic-bezier(0.3, 0.7, 0.25, 1) 80ms both;
	}
}

@keyframes tiv-destello {
	from { transform: translateX(-180%) skewX(-14deg); }
	to   { transform: translateX(460%) skewX(-14deg); }
}

.tiv-aco__tirador {
	position: absolute;
	inset: 0;
	z-index: 5;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.tiv-aco__hoja.es-abierta .tiv-aco__tirador { cursor: default; }
.tiv-aco__tirador:focus-visible { outline: 2px solid var(--beige); outline-offset: -4px; }

.tiv-aco__n {
	position: absolute;
	top: 18px; left: 0; right: 0;
	text-align: center;
	font-family: var(--font-display, Butler, serif);
	font-size: 0.86rem;
	letter-spacing: 0.1em;
	color: rgba(247, 245, 240, 0.55);
	transition: color 400ms ease;
}

.tiv-aco__hoja.es-abierta .tiv-aco__n {
	text-align: left;
	padding-left: 28px;
	color: var(--beige);
}

.tiv-aco__lomo {
	position: absolute;
	left: 29px; bottom: 26px;
	transform-origin: left bottom;
	transform: rotate(-90deg);
	white-space: nowrap;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(247, 245, 240, 0.9);
	transition: opacity 340ms ease;
}

.tiv-aco__hoja.es-abierta .tiv-aco__lomo { opacity: 0; pointer-events: none; }

.tiv-aco__panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: 0 clamp(22px, 2.2vw, 34px) clamp(20px, 2.2vw, 30px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s 400ms;
}

.tiv-aco__hoja.es-abierta .tiv-aco__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s;
}

.tiv-aco__titulo {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.4rem, 2.1vw, 2.1rem);
	font-weight: 400;
	line-height: 1.12;
	margin: 0 0 0.28em;
	color: #FFF;
}

.tiv-aco__cat {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--beige);
	margin: 0 0 0.9em;
}

.tiv-aco__cuerpo {
	margin: 0 0 1em;
	font-size: clamp(0.9rem, 1vw, 1rem);
	line-height: 1.6;
	font-weight: 300;
	color: rgba(247, 245, 240, 0.88);
	max-width: 52ch;
}

.tiv-aco__chips {
	list-style: none;
	margin: 0 0 1.1em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tiv-aco__chips li {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	color: rgba(247, 245, 240, 0.82);
	border: 1px solid rgba(184, 168, 144, 0.4);
	border-radius: 999px;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.3);
}

.tiv-aco__precio {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.tiv-aco__precio span {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(247, 245, 240, 0.5);
}

.tiv-aco__precio strong {
	font-family: var(--font-display, Butler, serif);
	font-size: clamp(1.1rem, 1.4vw, 1.5rem);
	font-weight: 400;
	color: var(--beige);
}

@media (prefers-reduced-motion: no-preference) {
	.tiv-aco__hoja.es-abierta .tiv-aco__panel > * {
		animation: tiv-sube 620ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
	}
	.tiv-aco__hoja.es-abierta .tiv-aco__titulo { animation-delay: 160ms; }
	.tiv-aco__hoja.es-abierta .tiv-aco__cat    { animation-delay: 220ms; }
	.tiv-aco__hoja.es-abierta .tiv-aco__cuerpo { animation-delay: 280ms; }
	.tiv-aco__hoja.es-abierta .tiv-aco__chips  { animation-delay: 340ms; }
	.tiv-aco__hoja.es-abierta .tiv-aco__precio { animation-delay: 400ms; }
}

@keyframes tiv-sube {
	from { opacity: 0; transform: translateY(16px); filter: blur(7px); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}

.tiv-aco__nota {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.42);
}

/* Apilado: siete lomos no dejan sitio para nada. */
@media (max-width: 1000px) {
	.tiv-aco {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;
		height: auto;
	}
	.tiv-aco__hoja { flex: none; border: 1px solid rgba(138, 120, 86, 0.28); }
	.tiv-aco__foto {
		position: relative;
		inset: auto;
		height: 210px;
		filter: none;
		transform: none;
	}
	/* Apilado el velo cubre solo la franja de la foto, sin escalar. */
	.tiv-aco__hoja::after { inset: 0 0 auto 0; height: 210px; transform: none; }
	.tiv-aco__hoja::before { transform: scaleX(1); }
	.tiv-aco__destello, .tiv-aco__tirador, .tiv-aco__lomo { display: none; }
	.tiv-aco__n { position: static; text-align: left; padding: 16px 22px 0; color: var(--beige); }
	.tiv-aco__panel,
	.tiv-aco__hoja.es-abierta .tiv-aco__panel {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		padding: 14px 22px 22px;
	}
	.tiv-aco__hoja.es-abierta .tiv-aco__panel > * { animation: none; }
}

/* ══════════ Aparición ══════════
   Igual que en Medicina Regenerativa: el estado oculto solo existe bajo la
   clase que añade el JS, para que sin JS nada quede invisible. */
.tiv--anim .tiv-in {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tiv--anim .tiv-in.is-in { opacity: 1; transform: none; }

/* ══════════ La huella del cursor ══════════

   Un lienzo fijo del tamaño de la ventana donde se pinta el rastro. Todo el
   trabajo está en el JS; aquí sólo se le da sitio.
   ────────────────────────────────────────────────────────────────────── */
.tiv-huella {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 60;
	pointer-events: none;
	background: transparent;
}

/* Sin cursor no hay huella. */
@media (hover: none), (pointer: coarse) {
	.tiv-huella { display: none; }
}

/* ══════════ Responsive ══════════ */
@media (max-width: 760px) {
	.tiv-hero { min-height: clamp(540px, 80vh, 720px); }
}

/* En táctil no hay cursor al que seguir: se retira la máscara y el fondo se
   ve completo, que es el equivalente razonable del efecto en esos aparatos. */
@media (hover: none), (pointer: coarse) {
	.tiv-hero__liquid {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tiv--anim .tiv-in { opacity: 1; transform: none; transition: none; }
	.tiv-hero__isotipo,
	.tiv-hero__sub { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   EL ACORDEÓN, TAMBIÉN PLEGABLE EN EL TELÉFONO

   Apilado, las siete fichas se mostraban abiertas de par en par: 555 px cada
   una, casi 3 900 px de recorrido para una sola sección, y sin nada que tocar.
   Quien llega buscando "Neuro Focus" tiene que bajar por los seis protocolos
   que no le interesan para llegar al que sí.

   Ahora se pliegan: se ve la lámina, el número y el nombre, y el cuerpo llega
   al tocar. Es el mismo acordeón del escritorio traducido al gesto que hay en
   un teléfono — un toque en vez de apuntar con el ratón.

   LA CLASE .es-plegable LA PONE EL JS, y ese es el orden correcto: sin
   JavaScript el CSS de arriba sigue mandando y las siete fichas se ven
   enteras. Nunca hay contenido plegado esperando a un script que no llegó.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	/* El tirador deja de ser una capa invisible sobre la ficha y pasa a ser
	   la barra que se toca: número, nombre y flecha, en el flujo. */
	.tiv-aco.es-plegable .tiv-aco__tirador {
		display: flex;
		align-items: center;
		gap: 14px;
		position: static;
		inset: auto;
		width: 100%;
		padding: 15px 22px;
		text-align: left;
		/* 48 px de alto mínimo: es el objetivo táctil que un dedo acierta sin
		   apuntar, y aquí es el único control de la ficha. */
		min-height: 48px;
	}

	.tiv-aco.es-plegable .tiv-aco__n {
		position: static;
		padding: 0;
		flex: none;
		color: var(--beige);
	}

	/* El lomo vertical del escritorio se endereza y pasa a ser el título de
	   la barra. Es el mismo elemento: no hace falta un rótulo más. */
	.tiv-aco.es-plegable .tiv-aco__lomo {
		display: block;
		position: static;
		transform: none;
		flex: 1;
		min-width: 0;
		white-space: normal;
		font-family: var(--font-display, Butler, serif);
		font-size: 1.04rem;
		letter-spacing: 0.01em;
		text-transform: none;
		opacity: 1;
		color: #F7F5F0;
	}
	.tiv-aco.es-plegable .tiv-aco__hoja.es-abierta .tiv-aco__lomo { opacity: 1; pointer-events: auto; }

	/* La flecha. Se dibuja con dos filetes en un pseudoelemento —no es un
	   glifo de texto— y gira 180° al abrir. */
	.tiv-aco.es-plegable .tiv-aco__tirador::after {
		content: "";
		flex: none;
		width: 9px;
		height: 9px;
		margin-right: 2px;
		border-right: 1px solid var(--beige);
		border-bottom: 1px solid var(--beige);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.tiv-aco.es-plegable .tiv-aco__hoja.es-abierta .tiv-aco__tirador::after {
		transform: rotate(225deg) translate(-2px, -2px);
	}

	/* El pliegue. Se anima `max-height` y no una fila de rejilla porque el
	   panel no tiene contenedor propio que convertir en grid, y meterle uno
	   obligaría a rehacer el panel del escritorio, que funciona. El techo de
	   900 px va holgado sobre el panel más largo (medido: 578 px), así que
	   ninguno se corta. */
	.tiv-aco.es-plegable .tiv-aco__panel {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		padding-top: 0;
		padding-bottom: 0;
		transition: max-height 460ms cubic-bezier(0.22, 1, 0.36, 1),
		            opacity 260ms ease,
		            padding 460ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.tiv-aco.es-plegable .tiv-aco__hoja.es-abierta .tiv-aco__panel {
		max-height: 900px;
		opacity: 1;
		padding-top: 4px;
		padding-bottom: 22px;
	}

	/* El nombre ya está en la barra que se acaba de tocar: repetirlo dos
	   líneas más abajo no informa. */
	.tiv-aco.es-plegable .tiv-aco__titulo { display: none; }

	.tiv-aco.es-plegable .tiv-aco__hoja { cursor: pointer; }
	.tiv-aco.es-plegable .tiv-aco__hoja.es-abierta .tiv-aco__tirador { cursor: pointer; }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
	.tiv-aco.es-plegable .tiv-aco__panel,
	.tiv-aco.es-plegable .tiv-aco__tirador::after { transition: none; }
}