/* ==========================================================================
   Terapias de Optimización

   La página defiende una frase del copy —«Aquí no eliges de un menú»— y todo
   lo de aquí está puesto para que eso se sienta: el hero es una LENTE (mirar
   de cerca antes de indicar nada) y las cuatro tecnologías van en una PILA,
   no en una rejilla de cuatro rectángulos, que es literalmente un menú.

   EL COLOR NO SE FIJA POR SECCIÓN. El fondo lo interpola el JS con el scroll
   —claro, obsidiana en las tecnologías, claro otra vez— y la tinta voltea sola
   por luminancia. Por eso aquí casi no hay colores literales: los tonos que
   tienen que voltear se componen sobre --topt-tinta-rgb, --topt-acento-rgb y
   --topt-filete-rgb, y una sola clase (.es-oscuro) los reescribe. Con colores
   escritos a mano habría que perseguir cada declaración y siempre se queda
   alguna atrás.

   Nada de lo que hay aquí decide si un contenido se ve: los estados ocultos
   viven todos bajo .topt--anim, la clase que pone el JS al arrancar.
   ========================================================================== */

/* Registrada para poder interpolarla; sin registrar, salta. */
@property --topt-iny { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* --------------------------------------------------------------------------
   EL HERO
   -------------------------------------------------------------------------- */
.topt-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(600px, 96vh, 1000px);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	padding: clamp(90px, 12vh, 150px) clamp(24px, 6vw, 104px) clamp(60px, 8vh, 100px);
	/* El plano del vídeo es blanco de estudio; el hero lleva el mismo blanco
	   para que no se vea el canto del vídeo contra el fondo de la página. */
	background: #FBFBFA;
	color: #0A0A0B;
}

.topt-hero__video,
.topt-hero__lente {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.topt-hero__video {
	z-index: 0;
	object-fit: cover;
	/* El encuadre se ancla al 62 % horizontal: ella vive en la mitad derecha
	   del plano y el texto ocupa la izquierda, así que al recortar hay que
	   sacrificar aire por la izquierda, nunca su cara por la derecha. */
	object-position: 62% 50%;
}

/* El lienzo es TRANSPARENTE: sólo pinta la lente. Todo lo demás que se ve en
   el hero es el vídeo, sin intermediarios. */
.topt-hero__lente {
	z-index: 1;
	opacity: 0;
	transition: opacity 700ms ease;
}

.topt-hero.es-lente .topt-hero__lente { opacity: 1; }

/* El velo va SÓLO por la izquierda. Uno plano apagaría el plano entero, que
   es lo único que la página tiene de luz; éste sostiene el texto y deja
   limpia la mitad derecha, que es donde está ella. */
.topt-hero__velo {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(100deg,
			rgba(251, 251, 250, 0.94) 0%,
			rgba(251, 251, 250, 0.86) 22%,
			rgba(251, 251, 250, 0.42) 44%,
			rgba(251, 251, 250, 0) 62%),
		linear-gradient(180deg, rgba(251, 251, 250, 0.7) 0%, rgba(251, 251, 250, 0) 16%);
}

.topt-hero__marca {
	position: absolute;
	z-index: 3;
	top: clamp(84px, 10vh, 124px);
	right: clamp(24px, 6vw, 104px);
	width: clamp(126px, 13vw, 208px);
	height: auto;
	opacity: 0.9;
}

.topt-hero__contenido {
	position: relative;
	z-index: 3;
	width: min(660px, 52vw);
	margin-right: auto;
	text-align: left;
}

.topt-hero__eyebrow {
	margin: 0 0 clamp(20px, 3vh, 34px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #6C6252;
}

.topt-hero__titulo {
	margin: 0;
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-size: clamp(2.9rem, 6.6vw, 5.6rem);
	line-height: 1.02;
	letter-spacing: -0.028em;
	color: #0A0A0B;
}

.topt-hero__sub {
	margin: clamp(22px, 3.2vh, 36px) 0 0;
	max-width: 30ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(1.06rem, 1.5vw, 1.34rem);
	line-height: 1.55;
	color: #2A2A2E;
}

/* El beige de marca no se lee sobre blanco: #B5A58E da 2,3:1. Este es el
   beige oscuro de la casa para superficies claras — medido, 4,60:1. */
.topt-hero__kicker {
	margin: clamp(14px, 2vh, 22px) 0 0;
	max-width: 34ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.92rem;
	line-height: 1.6;
	color: #7C6B4E;
}

/* La pista. Un efecto que se gobierna con el ratón no se descubre solo; en
   cuanto se usa, sobra. */
.topt-hero__pista {
	position: absolute;
	z-index: 3;
	left: clamp(24px, 6vw, 104px);
	bottom: clamp(52px, 7vh, 78px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.66rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #7C6B4E;
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.topt-hero__pista.es-ido { opacity: 0; transform: translateY(8px); }

@media (hover: none), (pointer: coarse) { .topt-hero__pista { display: none; } }

.topt-hero__pie {
	position: absolute;
	z-index: 3;
	right: clamp(24px, 6vw, 104px);
	bottom: clamp(24px, 3.4vh, 38px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(10, 10, 11, 0.64);
}

@media (max-width: 860px) {
	.topt-hero { min-height: 82vh; align-items: flex-end; }
	.topt-hero__contenido { width: 100%; }
	.topt-hero__velo {
		background:
			linear-gradient(180deg, rgba(251, 251, 250, 0.72) 0%, rgba(251, 251, 250, 0) 26%),
			/* El velo sube hasta cubrir el titular. En vertical el bloque de
			   texto arranca a media pantalla, y con la caída anterior —que se
			   apagaba en el 34 %— "Optimización" quedaba sobre la boca de la
			   figura, que es la zona de más detalle del plano. */
			linear-gradient(0deg, rgba(251, 251, 250, 0.97) 0%, rgba(251, 251, 250, 0.92) 46%, rgba(251, 251, 250, 0.55) 60%, rgba(251, 251, 250, 0) 78%);
	}
	.topt-hero__marca { top: clamp(72px, 9vh, 96px); width: clamp(104px, 24vw, 132px); }

	/* En vertical el encuadre se centra. El 62 % existe para dejarle sitio al
	   bloque de texto a la izquierda, y ahí el texto ya no va al lado sino
	   debajo: manteniéndolo, ella se iba contra el borde izquierdo. Medido a
	   375 px, con el 62 % la ventana caía en el tramo 457–800 del plano, y su
	   cara vive alrededor del 540. */
	.topt-hero__video { object-position: 50% 50%; }
}

/* --------------------------------------------------------------------------
   EL CUERPO — el arco de color

   .topt lleva el fondo que escribe el JS y las tres variables de tinta. Todo
   lo demás las compone. La clase .es-oscuro la pone el JS cuando la
   luminancia del fondo calculado baja del umbral (0,55), el mismo de la
   portada: así el volteo ocurre exactamente donde el fondo deja de sostener
   tinta oscura, y no un poco antes o un poco después.
   -------------------------------------------------------------------------- */
.topt {
	--topt-fondo: #FBFBFA;
	--topt-tinta-rgb: 10, 10, 11;
	--topt-acento-rgb: 124, 107, 78;   /* #7C6B4E — 4,98:1 sobre el #FBFBFA de la página */
	--topt-filete-rgb: 10, 10, 11;
	--topt-e: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	background: var(--topt-fondo);
	color: rgb(var(--topt-tinta-rgb));
	/* El fondo no se anima con transition: lo escribe el JS en cada cuadro y
	   una transición encima lo dejaría siempre un paso por detrás del scroll. */
}

.topt.es-oscuro {
	--topt-tinta-rgb: 243, 238, 227;
	--topt-acento-rgb: 181, 165, 142;  /* #B5A58E — sobre obsidiana, 7,1:1 */
	--topt-filete-rgb: 243, 238, 227;
}

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

.topt__seccion { padding: clamp(88px, 13vh, 176px) clamp(24px, 6vw, 104px); }
.topt__seccion--rabo { padding-top: 0; padding-bottom: clamp(56px, 8vh, 96px); }

.topt__inner {
	max-width: 1180px;
	margin-inline: auto;
}

.topt__eyebrow {
	margin: 0 0 clamp(26px, 4vh, 44px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgb(var(--topt-acento-rgb));
}

.topt__titulo {
	margin: 0 0 clamp(30px, 4.5vh, 54px);
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-size: clamp(2.1rem, 4.4vw, 3.9rem);
	line-height: 1.08;
	letter-spacing: -0.024em;
	color: rgb(var(--topt-tinta-rgb));
}

.topt__titulo--ancho { max-width: 20ch; }
.topt__titulo--medio { max-width: 22ch; }

.topt__lead {
	margin: 0 0 1.1em;
	max-width: 62ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(1.02rem, 1.32vw, 1.22rem);
	line-height: 1.68;
	color: rgba(var(--topt-tinta-rgb), 0.82);
}

.topt__lead--ancho { max-width: 68ch; }
.topt__lead:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   01 · QUÉ ES
   -------------------------------------------------------------------------- */
.topt-que__cuerpo { max-width: 62ch; }

/* El remate del copy —«Aquí no eliges de un menú. Se indica lo que tus datos
   justifican.»— va en tamaño de titular y con el filete a la izquierda. Es la
   tesis de la página; el resto del texto la sostiene. */
.topt-que__remate {
	margin: clamp(40px, 6vh, 76px) 0 0;
	padding-left: clamp(20px, 2.6vw, 34px);
	border-left: 1px solid rgba(var(--topt-acento-rgb), 0.5);
	max-width: 26ch;
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.5vw, 3.05rem);
	line-height: 1.16;
	letter-spacing: -0.022em;
	color: rgb(var(--topt-tinta-rgb));
}

/* --------------------------------------------------------------------------
   02 · CÓMO LO HACEMOS — los tres criterios

   Son tarjetas, pero no fichas de catálogo: sin relleno de color, sin sombra,
   apoyadas en un filete de un píxel. Lo que las hace objeto es que se inclinan
   siguiendo al cursor y llevan un brillo que se mueve con él — la misma
   mecánica de la pila de abajo, en pequeño, para que las dos se lean como el
   mismo material.
   -------------------------------------------------------------------------- */
.topt-criterios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(18px, 2.2vw, 30px);
	perspective: 1400px;
}

.topt-criterio {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(30px, 3vw, 44px) clamp(26px, 2.8vw, 38px) clamp(26px, 2.8vw, 36px);
	border: 0;
	background: rgba(var(--topt-tinta-rgb), 0.032);
	/* La esquina cortada. Es lo que hace que no se lea como una caja por
	   defecto: una ficha, con un canto biselado como el de un documento
	   clínico. Nada más que geometría — ni sombra, ni radio, ni relleno de
	   color, que es por donde una tarjeta se vuelve corriente. */
	clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	transition: transform 240ms ease-out, background-color 380ms ease;
}

.topt-criterio:hover,
.topt-criterio:focus-within { background: rgba(var(--topt-tinta-rgb), 0.058); }

/* El filete de oro se TRAZA de izquierda a derecha al pasar por encima. Un
   borde que sólo cambia de color no se percibe; uno que se dibuja, sí. */
.topt-criterio::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	width: 100%;
	background: rgb(var(--topt-acento-rgb));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 640ms var(--topt-e);
}

.topt-criterio:hover::before,
.topt-criterio:focus-within::before { transform: scaleX(1); }

/* El brillo especular: es lo que convence de que hay superficie. */
.topt-criterio__brillo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
		rgba(var(--topt-acento-rgb), 0.2), rgba(var(--topt-acento-rgb), 0.05) 42%, transparent 68%);
	transition: opacity 340ms ease;
}

.topt-criterio:hover .topt-criterio__brillo { opacity: 1; }

.topt-criterio__n {
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-size: clamp(2.6rem, 3.6vw, 3.5rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: rgba(var(--topt-acento-rgb), 0.8);
	font-variant-numeric: tabular-nums;
	transition: color 460ms ease;
}

.topt-criterio:hover .topt-criterio__n { color: rgb(var(--topt-acento-rgb)); }

.topt-criterio__t {
	margin: clamp(18px, 2.4vh, 26px) 0 0;
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-size: clamp(1.22rem, 1.7vw, 1.52rem);
	line-height: 1.2;
	letter-spacing: -0.018em;
	color: rgb(var(--topt-tinta-rgb));
}

.topt-criterio__d {
	margin: clamp(12px, 1.6vh, 16px) 0 clamp(24px, 3vh, 32px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.94rem;
	line-height: 1.65;
	color: rgba(var(--topt-tinta-rgb), 0.78);
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   LOS BOTONES

   Dos registros. El de WhatsApp es el que abre conversación y va en sólido
   sobre la tinta de la sección; el fantasma es secundario y sólo aparece en la
   tarjeta de sueroterapia, que es la única con página propia detrás.
   -------------------------------------------------------------------------- */
.topt-boton {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 13px 20px;
	border: 1px solid transparent;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.005em;
	text-decoration: none;
	transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms var(--topt-e);
}

.topt-boton__i { flex: none; width: 17px; height: 17px; }

.topt-boton--wa {
	background: rgb(var(--topt-tinta-rgb));
	color: var(--topt-fondo);
	align-self: flex-start;
}

.topt-boton--wa:hover,
.topt-boton--wa:focus-visible {
	background: rgb(var(--topt-acento-rgb));
	color: #0A0A0B;
	transform: translateY(-2px);
}

/* La variante fina, para las tarjetas de método: el mismo destino con menos
   peso visual, porque ahí el protagonista es el criterio, no el botón. */
.topt-boton--fino {
	padding: 11px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid rgba(var(--topt-filete-rgb), 0.2);
	color: rgb(var(--topt-tinta-rgb));
	width: 100%;
	justify-content: space-between;
	transform: none;
}

.topt-boton--fino:hover,
.topt-boton--fino:focus-visible {
	background: none;
	border-top-color: rgba(var(--topt-acento-rgb), 0.7);
	color: rgb(var(--topt-acento-rgb));
	transform: none;
}

.topt-boton--ghost {
	background: none;
	border-color: rgba(243, 238, 227, 0.28);
	color: #F3EEE3;
}

.topt-boton--ghost:hover,
.topt-boton--ghost:focus-visible {
	border-color: #B5A58E;
	color: #B5A58E;
}

/* --------------------------------------------------------------------------
   03 · LAS TECNOLOGÍAS — la pila

   Adaptación del componente 07-tarjetas-apiladas-3d. Las tres piezas del
   original se mantienen intactas porque son las que hacen el efecto:

   1. EL APILADO sale de `position: sticky` con un `top` distinto por tarjeta:
      la que viene se detiene un canto más abajo que la anterior, así que el
      borde de las de atrás sigue a la vista. El margin-bottom da el recorrido
      de scroll.
   2. LA ESCALA no se reparte por tramos fijos: el JS mide cuánto cubre la
      siguiente tarjeta a la actual, así el encogido va al ritmo del scroll
      aunque las tarjetas no midan lo mismo.
   3. LA INCLINACIÓN sólo se aplica a la de delante. Si se inclinaran todas, la
      pila dejaría de leerse como pila.

   Lo que cambia respecto al componente: la paleta es la de la casa, la foto
   pesa casi la mitad de la tarjeta, y las tarjetas son SUPERFICIES OSCURAS
   FIJAS. No voltean con el arco de color como el resto de la página, y es a
   propósito: son objetos apoyados encima, no fondo. Así se leen igual cuando
   la sección todavía está entrando en obsidiana.
   -------------------------------------------------------------------------- */
.topt-tec { padding-bottom: clamp(40px, 6vh, 80px); }

.topt-pila {
	--topt-desnivel: 16px;
	--topt-recorrido: 56vh;
	max-width: 1180px;
	margin: clamp(30px, 5vh, 60px) auto 0;
	perspective: 1600px;
	perspective-origin: 50% 42%;
}

.topt-carta {
	position: sticky;
	/* 88px deja sitio al encabezado fijo del tema. */
	top: calc(88px + var(--i) * var(--topt-desnivel));
	margin-bottom: var(--topt-recorrido);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	/* Un alto mínimo, porque el alto de la tarjeta lo dicta la columna de
	   texto y ésta es corta: sin él salían bandas de 363 px y la fotografía
	   se quedaba en una franja apaisada. Con el mínimo, la columna de imagen
	   es casi un retrato y la tecnología se ve, que es de lo que va la
	   sección. */
	min-height: min(58vh, 560px);
	overflow: hidden;
	border: 1px solid rgba(243, 238, 227, 0.14);
	background: #131315;
	color: #F3EEE3;
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
	/* La escala la escribe el JS según cuánto la cubre la siguiente; el giro,
	   según dónde está el cursor. Van juntas en una sola transformación para
	   no pelearse entre ellas. */
	transform: scale(var(--s, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	transition: transform 180ms linear, box-shadow 400ms ease;
}

.topt-carta:last-child { margin-bottom: 0; }

.topt-carta.es-frente {
	box-shadow: 0 40px 90px -48px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(181, 165, 142, 0.3);
	transition: transform 120ms ease-out, box-shadow 400ms ease;
}

/* El velo que hunde a las de atrás. */
.topt-carta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #05070A;
	opacity: calc(var(--t, 0) * 0.55);
	pointer-events: none;
	z-index: 4;
}

.topt-carta__brillo {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
		rgba(181, 165, 142, 0.16), rgba(181, 165, 142, 0.05) 42%, transparent 68%);
	transition: opacity 350ms ease;
}

.topt-carta.es-frente .topt-carta__brillo { opacity: 1; }

.topt-carta__foto {
	position: relative;
	margin: 0;
	grid-column: 2;
	grid-row: 1;
	min-height: 100%;
	overflow: hidden;
}

.topt-carta__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 46%;
	filter: grayscale(0.3) brightness(0.86);
	transform: scale(1.05);
	transition: filter 700ms ease, transform 1200ms var(--topt-e);
}

/* La foto sólo se enciende del todo cuando la tarjeta llega al frente: en la
   pila, la que se está leyendo es la única con color pleno. */
.topt-carta.es-frente .topt-carta__foto img { filter: none; transform: scale(1); }

/* La foto se funde con la tarjeta por su canto izquierdo: pegada en seco se
   vería como una estampilla encima. */
.topt-carta__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to right,
		#131315 0%, rgba(19, 19, 21, 0.55) 6%, rgba(19, 19, 21, 0.14) 16%, rgba(19, 19, 21, 0) 30%);
}

.topt-carta__cuerpo {
	position: relative;
	z-index: 2;
	padding: clamp(28px, 3.4vw, 48px);
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.topt-carta__cab {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	margin-bottom: clamp(20px, 2.6vh, 28px);
	border-bottom: 1px solid rgba(243, 238, 227, 0.14);
}

.topt-carta__n {
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #B5A58E;
	font-variant-numeric: tabular-nums;
}

.topt-carta__glifo { display: inline-flex; color: #B5A58E; }
.topt-glifo { width: 26px; height: 26px; }

.topt-carta__via {
	margin-left: auto;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(243, 238, 227, 0.56);
}

.topt-carta__t {
	margin: 0;
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.8vw, 2.5rem);
	line-height: 1.08;
	letter-spacing: -0.024em;
	color: #F3EEE3;
}

.topt-carta__d {
	margin: clamp(14px, 2vh, 20px) 0 clamp(26px, 3.4vh, 38px);
	max-width: 42ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(0.96rem, 1.1vw, 1.06rem);
	line-height: 1.65;
	color: rgba(243, 238, 227, 0.76);
}

.topt-carta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Dentro de la pila los botones no heredan el arco de color de la página: la
   tarjeta es siempre oscura, así que su botón es siempre marfil sobre negro. */
.topt-carta .topt-boton--wa {
	background: #F3EEE3;
	color: #0A0A0B;
}

.topt-carta .topt-boton--wa:hover,
.topt-carta .topt-boton--wa:focus-visible {
	background: #B5A58E;
	color: #0A0A0B;
}

.topt-pila__pie {
	margin: clamp(28px, 4vh, 44px) 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--topt-tinta-rgb), 0.62);
}

/* El contenido de la tarjeta entra cuando llega al frente. */
@media (prefers-reduced-motion: no-preference) {
	.topt-carta .topt-carta__t,
	.topt-carta .topt-carta__d,
	.topt-carta .topt-carta__acciones {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 550ms ease, transform 550ms var(--topt-e);
	}
	.topt-carta.es-frente .topt-carta__t,
	.topt-carta.es-frente .topt-carta__d,
	.topt-carta.es-frente .topt-carta__acciones { opacity: 1; transform: none; }
	.topt-carta.es-frente .topt-carta__t { transition-delay: 60ms; }
	.topt-carta.es-frente .topt-carta__d { transition-delay: 160ms; }
	.topt-carta.es-frente .topt-carta__acciones { transition-delay: 280ms; }
}

@media (max-width: 900px) {
	.topt-carta { grid-template-columns: 1fr; --topt-recorrido: 34vh; min-height: 0; }
	.topt-carta__foto { grid-column: 1; grid-row: 1; height: clamp(220px, 34vw, 280px); min-height: 0; }
	.topt-carta__foto::after {
		background: linear-gradient(to bottom, rgba(19, 19, 21, 0) 28%, rgba(19, 19, 21, 0.72) 74%, #131315 100%);
	}
	.topt-carta__cuerpo { grid-column: 1; grid-row: 2; }
	.topt-carta__acciones { flex-direction: column; align-items: stretch; }
	.topt-carta .topt-boton { justify-content: center; }
}

/* Por debajo de 620px las tarjetas se sueltan: con una tarjeta casi tan alta
   como el visor, apilar deja de funcionar. */
@media (max-width: 620px) {
	.topt-pila { perspective: none; }
	.topt-carta { position: static; transform: none !important; margin-bottom: 16px; }
	.topt-carta::after, .topt-carta__brillo { display: none; }
	.topt-carta .topt-carta__t,
	.topt-carta .topt-carta__d,
	.topt-carta .topt-carta__acciones { opacity: 1; transform: none; }
	.topt-carta__foto img { filter: none; transform: none; }
}

/* --------------------------------------------------------------------------
   04 · POR QUÉ — el destino
   -------------------------------------------------------------------------- */
.topt-porque__texto { margin-bottom: clamp(34px, 5vh, 58px); }

.topt-cta {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 18px 30px;
	background: rgb(var(--topt-tinta-rgb));
	color: var(--topt-fondo);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.94rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 320ms ease, color 320ms ease, transform 320ms var(--topt-e), gap 320ms var(--topt-e);
}

.topt-cta:hover,
.topt-cta:focus-visible {
	background: rgb(var(--topt-acento-rgb));
	color: #0A0A0B;
	transform: translateY(-2px);
	gap: 22px;
}

.topt-cta__flecha { display: inline-flex; }
.topt-cta__flecha svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   LAS APARICIONES

   El estado oculto vive bajo .topt--anim, que pone el JS. Sin script no falta
   nada: el contenido se ve tal cual llega del servidor.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.topt--anim [data-topt-in] {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 760ms ease, transform 760ms var(--topt-e);
	}
	.topt--anim [data-topt-in].es-dentro { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.topt-criterio, .topt-carta { transition: none; transform: none !important; }
	.topt-carta::after, .topt-carta__brillo, .topt-criterio__brillo { display: none; }
}