/* Ficha v3 - iteracion 1 del front de comparadores.
   Regla del proyecto: cero CSS dentro del HTML. Esta hoja se encola solo en
   fichas con el molde nuevo activo.

   Lo que esta hoja tiene que lograr, y es criterio bloqueante: en 1366x768
   entran antes del pliegue el H1, el parrafo visible del resumen, la galeria,
   la nota, las seis senales y el bloque de precio con tienda y version. De ahi
   salen casi todas las decisiones de tamano de abajo. */

:root {
	/* Los tokens salen del mockup (`mockup-ficha-producto-v3-unificado.html`),
	   no de una eleccion propia: el azul de accion es #3483fa y no el navy que
	   tenia, el verde es #00a650, y aparecen un rojo y un ambar que antes
	   resolvia con tonos tierra. */
	--bt-ink: #16181d;
	--bt-ink2: #4a5057;
	--bt-ink3: #8b93a0;
	--bt-line: #e3e6ea;
	--bt-soft: #f6f7f9;
	--bt-surface: #fff;
	--bt-cta: #3483fa;
	--bt-cta-hover: #2a6fd4;
	--bt-cta-oscuro: #0f3f86;
	--bt-cta-fondo: #f4f9ff;
	--bt-ok: #00a650;
	--bt-warn: #f59e0b;
	--bt-bad: #e53935;
	--bt-accent: #ffe600;
	/* Se conserva el nombre viejo para no tocar cada uso; es el rojo del mockup. */
	--bt-flojo: #e53935;
	--bt-radio: 10px;

}

.bt-ficha {
	color: var(--bt-ink);
	font-size: 16px;
	line-height: 1.55;
}

.bt-ficha * { box-sizing: border-box; }
.bt-ficha p { margin: 0 0 10px; }
.bt-ficha ul { margin: 0; padding: 0; list-style: none; }

/* La pila tipografica y los pesos del mockup (`body` y `h1,h2,h3`). La de
   Astra trae Oxygen, Ubuntu y Cantarell, y titulos a 600-650: en la captura se
   lee como otra pagina. Va desde el body porque el H1, el breadcrumb y el
   costado estan fuera de `.bt-ficha`. */
body.bt-ficha-v3,
body.bt-ficha-v3 .entry-title,
body.bt-ficha-v3 .bt-ficha h2,
body.bt-ficha-v3 .bt-ficha h3,
body.bt-ficha-v3 #secondary h2 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.bt-ficha-v3 .entry-title { font-weight: 700 !important; color: var(--bt-ink) !important; }
body.bt-ficha-v3 .bt-ficha h2 {
	font-size: 20px;
	line-height: 1.55;
	font-weight: 700;
	color: var(--bt-ink);
	margin: 0 0 11px;
}
body.bt-ficha-v3 .bt-ficha h3 { font-size: 15.5px; font-weight: 700; color: var(--bt-ink); }

/* Astra le pone borde a toda tabla (#d1d5db, con marco exterior). El mockup
   solo separa filas con `--line`: el borde de cada tabla se declara abajo. */
.bt-ficha table,
.bt-ficha th,
.bt-ficha td { border: 0; border-color: var(--bt-line); }

/* Cada seccion del cuerpo arranca con una linea arriba, como `section` del
   mockup. El hero no: es `section:first-of-type`. */
.bt-directa,
.bt-tabla,
.bt-specs,
.bt-editorial,
.bt-opiniones,
.bt-expertos,
.bt-comparar,
.bt-faq,
.bt-autor,
.bt-seguir {
	border-top: 1px solid var(--bt-line);
	margin: 28px 0 0 !important;
	padding-top: 22px;
}

/* El ancho de las barras de la nota, sin `style=""` en el HTML. */
.bt-w-0 { width: 0%; }
.bt-w-1 { width: 1%; }
.bt-w-2 { width: 2%; }
.bt-w-3 { width: 3%; }
.bt-w-4 { width: 4%; }
.bt-w-5 { width: 5%; }
.bt-w-6 { width: 6%; }
.bt-w-7 { width: 7%; }
.bt-w-8 { width: 8%; }
.bt-w-9 { width: 9%; }
.bt-w-10 { width: 10%; }
.bt-w-11 { width: 11%; }
.bt-w-12 { width: 12%; }
.bt-w-13 { width: 13%; }
.bt-w-14 { width: 14%; }
.bt-w-15 { width: 15%; }
.bt-w-16 { width: 16%; }
.bt-w-17 { width: 17%; }
.bt-w-18 { width: 18%; }
.bt-w-19 { width: 19%; }
.bt-w-20 { width: 20%; }
.bt-w-21 { width: 21%; }
.bt-w-22 { width: 22%; }
.bt-w-23 { width: 23%; }
.bt-w-24 { width: 24%; }
.bt-w-25 { width: 25%; }
.bt-w-26 { width: 26%; }
.bt-w-27 { width: 27%; }
.bt-w-28 { width: 28%; }
.bt-w-29 { width: 29%; }
.bt-w-30 { width: 30%; }
.bt-w-31 { width: 31%; }
.bt-w-32 { width: 32%; }
.bt-w-33 { width: 33%; }
.bt-w-34 { width: 34%; }
.bt-w-35 { width: 35%; }
.bt-w-36 { width: 36%; }
.bt-w-37 { width: 37%; }
.bt-w-38 { width: 38%; }
.bt-w-39 { width: 39%; }
.bt-w-40 { width: 40%; }
.bt-w-41 { width: 41%; }
.bt-w-42 { width: 42%; }
.bt-w-43 { width: 43%; }
.bt-w-44 { width: 44%; }
.bt-w-45 { width: 45%; }
.bt-w-46 { width: 46%; }
.bt-w-47 { width: 47%; }
.bt-w-48 { width: 48%; }
.bt-w-49 { width: 49%; }
.bt-w-50 { width: 50%; }
.bt-w-51 { width: 51%; }
.bt-w-52 { width: 52%; }
.bt-w-53 { width: 53%; }
.bt-w-54 { width: 54%; }
.bt-w-55 { width: 55%; }
.bt-w-56 { width: 56%; }
.bt-w-57 { width: 57%; }
.bt-w-58 { width: 58%; }
.bt-w-59 { width: 59%; }
.bt-w-60 { width: 60%; }
.bt-w-61 { width: 61%; }
.bt-w-62 { width: 62%; }
.bt-w-63 { width: 63%; }
.bt-w-64 { width: 64%; }
.bt-w-65 { width: 65%; }
.bt-w-66 { width: 66%; }
.bt-w-67 { width: 67%; }
.bt-w-68 { width: 68%; }
.bt-w-69 { width: 69%; }
.bt-w-70 { width: 70%; }
.bt-w-71 { width: 71%; }
.bt-w-72 { width: 72%; }
.bt-w-73 { width: 73%; }
.bt-w-74 { width: 74%; }
.bt-w-75 { width: 75%; }
.bt-w-76 { width: 76%; }
.bt-w-77 { width: 77%; }
.bt-w-78 { width: 78%; }
.bt-w-79 { width: 79%; }
.bt-w-80 { width: 80%; }
.bt-w-81 { width: 81%; }
.bt-w-82 { width: 82%; }
.bt-w-83 { width: 83%; }
.bt-w-84 { width: 84%; }
.bt-w-85 { width: 85%; }
.bt-w-86 { width: 86%; }
.bt-w-87 { width: 87%; }
.bt-w-88 { width: 88%; }
.bt-w-89 { width: 89%; }
.bt-w-90 { width: 90%; }
.bt-w-91 { width: 91%; }
.bt-w-92 { width: 92%; }
.bt-w-93 { width: 93%; }
.bt-w-94 { width: 94%; }
.bt-w-95 { width: 95%; }
.bt-w-96 { width: 96%; }
.bt-w-97 { width: 97%; }
.bt-w-98 { width: 98%; }
.bt-w-99 { width: 99%; }
.bt-w-100 { width: 100%; }

/* ---------- breadcrumb ---------- */

/* Arriba y afuera de la tarjeta, a lo ancho de las dos columnas (`.crumbs`). */
.bt-crumbs-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.bt-crumbs {
	font-size: 12.5px;
	color: var(--bt-ink2);
	padding: 12px 0;
	margin: 0;
	/* Una sola linea truncada (fila B01): un breadcrumb de dos renglones le
	   roba altura al primer print sin aportar nada. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bt-crumbs a { color: var(--bt-ink2); text-decoration: none; }
.bt-crumbs a:hover { text-decoration: underline; }
.bt-crumbs__sep { margin: 0 6px; color: var(--bt-line); }
.bt-crumbs strong { color: var(--bt-ink2); font-weight: 700; }

/* ---------- cabecera ---------- */

.bt-hero { margin: 0 0 22px; }

/* El H1 lo pinta Astra fuera de este contenedor y llega con 40 px de aire
   abajo: en el primer print eso es una linea de senales. Se recorta desde el
   body, que es como se le gana al CSS dinamico de Astra. */
body.bt-ficha-v3 .entry-title { margin-bottom: 10px !important; font-size: 30px !important; line-height: 1.2 !important; }
body.bt-ficha-v3 .ast-single-post .entry-header { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* Astra da 40 px de padding arriba del articulo; en el primer print eso es la
   fila de senales entera. */
body.bt-ficha-v3 .ast-article-single { padding-top: 22px !important; }

.bt-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 13px;
	color: var(--bt-ink2);
	font-size: 12.5px;
	gap: 7px 13px;
	margin-bottom: 0;
}
.bt-hero__meta a { color: #0a58ca; }

/* Texto verde, sin pastilla (`.verified`). */
.bt-verificada {
	color: var(--bt-ok);
	font-weight: 600;
}
.bt-verificada::before { content: "\2713\00a0"; }
.bt-hero__meta a { text-decoration: underline; }
.bt-hero__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

/* Una linea de texto chica debajo del H1, no una fila de pastillas: es como la
   escribe el mockup. Las clases `.bt-gama--*` se van con la pastilla; si alguna
   vez se quiere el color de gama, vuelve desde aca y no desde el partial. */
.bt-hero__identidad {
	font-size: 12.5px;
	color: var(--bt-ink2);
	margin: 0 0 10px;
}

/* ---------- resumen ---------- */

/* Es el primer nodo de texto despues del H1, y de eso depende la mitad del
   sentido del rediseno: sin prosa, el primer print son numeros y componentes. */
.bt-resumen { margin: 0 0 13px; }

.bt-resumen { max-width: 74ch; }
.bt-resumen__lead {
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--bt-ink);
	margin: 0 0 8px;
}
.bt-resumen__lead p { margin: 0; }
.bt-resumen__lead strong { font-weight: 650; }

/* Las dos variantes viajan en el HTML y se muestra una. No se trunca por CSS:
   el parrafo corto es OTRO texto, escrito corto, no este cortado. */
.bt-resumen__lead--angosto { display: none; }

/* Con el marcador nativo del navegador, como `.summary details>summary`. */
.bt-resumen__mas > summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: #0a58ca;
	padding: 0;
}
.bt-resumen__mas > summary:hover { text-decoration: underline; }

.bt-resumen__cuerpo {
	font-size: 15.5px;
	color: var(--bt-ink2);
	padding: 8px 0 0;
}
.bt-resumen__cuerpo p:last-child { margin-bottom: 0; }

/* ---------- la grilla del hero ---------- */

/* La galeria a la izquierda, la columna de decision a la derecha. La columna
   izquierda es fija y chica a proposito: hoy la foto ocupa casi todo el primer
   viewport y el usuario ya sabe que equipo busca. */
.bt-hero__grid {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 22px;
	align-items: start;
}

/* El marco es de la galeria y no de la foto (`.gal`): borde, fondo y aire
   alrededor de la imagen y de las miniaturas juntas. */
.bt-galeria {
	margin: 0;
	padding: 10px;
	border: 1px solid var(--bt-line);
	border-radius: var(--bt-radio);
	background: #fafbfc;
	text-align: center;
	box-shadow: none !important;
}
.bt-galeria__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	margin: 0 auto;
	object-fit: contain;
	box-shadow: none !important;
}

.bt-hero__decision { display: grid; gap: 9px; }

/* ---------- nota del sitio ---------- */

/* Fondo gris suave y no blanco: en el mockup la nota es el unico bloque de la
   columna de decision con fondo, y es lo que la separa de las señales. */
.bt-nota {
	background: var(--bt-soft);
	border: 1px solid var(--bt-line);
	border-radius: var(--bt-radio);
	padding: 11px 14px;
}
.bt-precio__h { color: var(--bt-cta-oscuro) !important; }

.bt-precio__h {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bt-ink3);
	margin: 0 0 7px;
}

.bt-nota__cuerpo {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
}

.bt-nota__global { white-space: nowrap; }
.bt-nota__cifra { margin: 0; font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.bt-nota__escala { font-size: 12px; color: var(--bt-ink2); font-weight: 600; }
/* El rotulo va debajo de la cifra y es lo que la nombra, ahora que el bloque
   no tiene titulo propio. */
.bt-nota__rotulo-global { margin: 2px 0 0; font-size: 11.5px; color: var(--bt-ink2); }

.bt-nota__barras {
	display: grid;
	/* La columna de rotulos se dimensiona con el rotulo mas largo que tenga el
	   equipo. Con los 84 px fijos de antes "Almacenamiento" no entraba y Astra,
	   que pone `word-wrap: break-word` global, lo partia a la mitad de la
	   palabra: se leia "Almacenamien / to". `display: contents` en cada barra
	   hace que las tres columnas sean las mismas para todas las filas, asi que
	   el ancho sale del contenido y no de un numero adivinado. */
	grid-template-columns: minmax(56px, max-content) 1fr 26px;
	align-items: center;
	row-gap: 3px;
	column-gap: 8px;
	font-size: 11.5px;
	line-height: 1.35;
}

.bt-nota__barra {
	display: contents;
}
/* Y por las dudas: ningun rotulo se parte adentro de la palabra. */
.bt-nota__rotulo { color: var(--bt-ink); overflow-wrap: normal; word-break: normal; }
.bt-nota__pista { height: 6px; background: #e1e5ea; border-radius: 99px; overflow: hidden; }
.bt-nota__relleno { display: block; height: 100%; background: var(--bt-ink3); }
.bt-nota__relleno--alto { background: var(--bt-ok); }
.bt-nota__relleno--medio { background: var(--bt-warn); }
.bt-nota__relleno--bajo { background: var(--bt-flojo); }
.bt-nota__valor { text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- senales de decision ---------- */

/* Tarjetas con borde y cuatro columnas, como el mockup. Antes era una grilla de
   texto suelto dentro de una caja con titulo; el mockup no lleva titulo arriba
   de las señales —el rotulo de cada tarjeta ya dice que es— y cada dato va en
   su propia tarjeta, que es lo que las vuelve escaneables de un vistazo. */
.bt-senales { margin-top: 11px; }

.bt-senales__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px;
}

.bt-senal {
	min-width: 0;
	border: 1px solid var(--bt-line);
	border-radius: 8px;
	padding: 9px 11px;
	background: var(--bt-surface);
}
.bt-senal__k {
	display: block;
	font-size: 11px;
	color: var(--bt-ink2);
	line-height: 1.3;
}
.bt-senal__v {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 2px;
	/* Un chipset largo no puede romper la grilla. */
	overflow-wrap: anywhere;
}
.bt-senal__pct {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.3;
	margin-top: 2px;
	color: var(--bt-ok);
}
.bt-senal__pct--flojo { color: var(--bt-bad); }

/* ---------- bloque de precio ---------- */

/* El bloque de precio es el unico con borde de color del layout: 2 px del azul
   de accion sobre fondo celeste. Es lo que lo despega de la nota y de las
   señales, que comparten la columna, y lo que lo vuelve lo primero que se mira
   en la captura del primer print. */
.bt-precio {
	background: var(--bt-cta-fondo);
	border: 2px solid var(--bt-cta);
	border-radius: var(--bt-radio);
	padding: 13px 15px;
}
.bt-precio__cifra {
	font-size: 29px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.bt-precio__quien { font-size: 13px; color: var(--bt-ink2); margin: 3px 0 0; }
.bt-precio__pais { display: block; font-size: 12px; color: var(--bt-ink3); }

/* En fila y sin separador: el mockup los pone como tres datos sueltos debajo
   de la tienda, no como una tabla con linea arriba. */
.bt-precio__refs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 8px 0 0;
}
.bt-precio__refs li { display: flex; flex-direction: column; gap: 1px; }
.bt-precio__refs span {
	font-size: 11.5px;
	color: var(--bt-ink2);
}
.bt-precio__refs b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.bt-precio__una { font-size: 12px; color: var(--bt-ink3); margin: 8px 0 0; }

.bt-precio__cta {
	/* Boton al ancho de su texto, no a todo el ancho de la columna: el que ocupa
	   la columna entera es el del costado, que es el atajo permanente. */
	display: inline-block;
	margin: 9px 0 0;
	padding: 10px 17px;
	background: var(--bt-cta);
	color: #fff !important;
	text-align: center;
	font-weight: 650;
	font-size: 14.5px;
	border-radius: 8px;
	text-decoration: none !important;
	/* 44 px de alto minimo: el objetivo tactil de la especificacion movil. */
	min-height: 44px;
}
.bt-precio__cta { font-weight: 700; border-radius: 7px; }
.bt-precio__cta:hover { background: var(--bt-cta-hover); }

/* El aviso de precio de referencia sube del pie del sitio al pie del bloque,
   que es donde hace falta (fila B05c). */
.bt-precio__aviso {
	font-size: 11px;
	line-height: 1.45;
	color: var(--bt-ink3);
	margin: 7px 0 0;
}
.bt-precio__aviso--corto { display: none; }

/* El estado vacio no puede llevar el marco azul del precio: el marco significa
   «aca esta la cifra», y aca justamente no la hay. */
/* `.empty-state` del mockup: borde punteado, centrado y sin fondo. */
.bt-precio--vacio {
	background: transparent;
	border: 1px dashed var(--bt-line);
	border-radius: 8px;
	padding: 14px;
	text-align: center;
}
.bt-precio__vacio { font-size: 13px; color: var(--bt-ink2); margin: 0; }

/* ---------- respuesta directa (B07) ----------
   Primer bloque despues del pliegue. Va con fondo propio porque es el unico
   bloque que dictamina: tiene que leerse como algo distinto del detalle que
   viene abajo, no como otra seccion mas. */

/* El titulo va afuera y la caja amarilla envuelve solo la respuesta (`.answer`). */
.bt-directa__caja {
	padding: 13px 15px;
	background: #fffdf0;
	border-left: 4px solid var(--bt-accent);
	border-radius: 0 8px 8px 0;
}
.bt-directa__caja p { margin: 0; font-size: 16px; color: var(--bt-ink); }
.bt-directa__caja p + p { margin-top: 10px; }

/* ---------- navegacion ancla (B08) ----------
   La UNICA navegacion de la ficha. Horizontal y en una sola linea de chips:
   vertical gasta la altura de siete filas para hacer lo mismo. */

/* La barra de anclas acompaña el scroll, como en el layout: es la unica
   navegacion interna de la ficha y arriba de ella hay nueve bloques de
   alto. El header del sitio no esta fijo —ni Astra ni el addon tienen el
   modulo sticky activo—, asi que `top: 0` no queda tapado por nada.
   El fondo es casi opaco y no transparente: con el contenido pasando por
   debajo, las pastillas se vuelven ilegibles. */
.bt-nav {
	margin: 28px 0 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--bt-line);
}

@media (min-width: 768px) {
	/* Desde aca las siete pastillas entran en un renglon y la barra mide
	   63 px: ahi si conviene que acompañe el scroll. */
	.bt-nav {
		position: sticky;
		top: 0;
		z-index: 5;
		background: rgba(255, 255, 255, .97);
	}
}

/* Fuera de la vista, no fuera del documento: el layout no tiene titulo
   arriba de las pastillas, pero siete enlaces sueltos sin nombre no se
   anuncian como una navegacion. */
.bt-solo-lector {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* `.jump a`: sin fondo y sin subrayado. Astra subraya todo enlace del
   contenido, por eso la especificidad desde el body. */
.bt-nav__lista { display: flex; flex-wrap: wrap; gap: 6px; }
body.bt-ficha-v3 .bt-nav__lista a {
	display: inline-block;
	padding: 4px 11px;
	font-size: 12.5px;
	color: var(--bt-ink2);
	background: transparent;
	border: 1px solid var(--bt-line);
	border-radius: 99px;
	text-decoration: none;
}
.bt-nav__lista a:hover { color: var(--bt-cta); border-color: var(--bt-cta); }

/* El salto de ancla tiene que dejar el titulo visible y no debajo de la
   barra de anclas. En movil la barra no esta fija, asi que no hay nada
   que esquivar y el margen seria aire de mas. */
.bt-ficha [id] { scroll-margin-top: 12px; }

@media (min-width: 768px) {
	.bt-ficha [id] { scroll-margin-top: 66px; }
}

/* ---------- tabla de precios (B09) ---------- */



/* La tabla desborda antes que la pagina: el scroll horizontal vive en su
   propio contenedor (seccion 7) y nunca lo hace el body. */
.bt-tabla__scroll,
.bt-versiones__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bt-tabla__t {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	min-width: 420px;
}
.bt-tabla__t th,
.bt-tabla__t td {
	padding: 8px 9px;
	text-align: left;
	border-bottom: 1px solid var(--bt-line);
	vertical-align: middle;
}
.bt-tabla__t thead th {
	background: var(--bt-soft);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--bt-ink2);
	white-space: nowrap;
}
.bt-tabla__tienda { font-weight: 700; color: var(--bt-ink); }
.bt-tabla__precio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-tabla__precio b { font-weight: 700; }
/* La fila mas baja en celeste (`tr.hi`), no en verde. */
.bt-tabla__fila--bajo { background: var(--bt-cta-fondo); }

.bt-tabla__badge {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	color: #fff;
	background: var(--bt-ok);
	border-radius: 4px;
	vertical-align: 1px;
}

/* La tienda existe, el precio no. Se nota sin desaparecer. */
.bt-tabla__fila--sinprecio { color: var(--bt-ink3); }
.bt-tabla__fila--sinprecio .bt-tabla__tienda { font-weight: 500; color: var(--bt-ink2); }
.bt-tabla__nd { font-size: 12.5px; color: var(--bt-ink3); }

.bt-tabla__cta { text-align: right; white-space: nowrap; }
/* `.btn.ghost.sm` del mockup. */
body.bt-ficha-v3 .bt-tabla__cta a {
	display: inline-block;
	padding: 6px 11px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bt-cta-oscuro);
	background: #fff;
	border: 1.5px solid var(--bt-cta);
	border-radius: 7px;
	text-decoration: none;
}
body.bt-ficha-v3 .bt-tabla__cta a:hover { background: var(--bt-cta); color: #fff; }

/* El renglon de arriba de la tabla: criterio, metodo y afiliacion (`p.tiny`). */
.bt-tabla__pie {
	margin: 0 0 10px;
	font-size: 11.5px;
	color: var(--bt-ink2);
}
.bt-tabla__como { color: #0a58ca; }
.bt-tabla__aviso { font-size: 11px; line-height: 1.45; color: var(--bt-ink3); margin: 7px 0 0; }

/* ---------- ficha tecnica (B10) ---------- */

/* Debajo de los acordeones, como `.vertable`: sin caja propia. */
.bt-versiones { margin: 0; }
body.bt-ficha-v3 .bt-ficha .bt-versiones__h { margin: 16px 0 7px; }
.bt-versiones__t {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}
.bt-versiones__t th,
.bt-versiones__t td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--bt-line); }
.bt-versiones__t thead th {
	background: var(--bt-soft);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--bt-ink2);
	white-space: nowrap;
}

.bt-specs__grupo {
	border: 1px solid var(--bt-line);
	border-radius: 8px;
	margin-bottom: 7px;
	background: #fff;
}
.bt-specs__grupo:last-child { margin-bottom: 0; }
.bt-specs__grupo[open] > .bt-specs__titulo { border-bottom: 1px solid var(--bt-line); }

.bt-specs__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 13px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bt-ink);
	background: transparent;
	cursor: pointer;
	list-style: none;
	/* 44 px de alto minimo, igual que el resto de los objetivos tactiles. */
	min-height: 44px;
}
.bt-specs__titulo::-webkit-details-marker { display: none; }
.bt-specs__titulo::after {
	content: "\002B";
	font-size: 16px;
	font-weight: 400;
	color: var(--bt-ink3);
	flex: 0 0 auto;
}
.bt-specs__grupo[open] > .bt-specs__titulo::after { content: "\2212"; }

/* `.spec` del mockup: la tabla con 13 px de aire a los costados y filas
   separadas por `--line`. */
.bt-specs__t { width: calc(100% - 26px); margin: 0 13px 6px; border-collapse: collapse; font-size: 13.5px; }
.bt-specs__t th,
.bt-specs__t td { padding: 8px 9px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bt-line); }
.bt-specs__t th { width: 50%; font-weight: 400; color: var(--bt-ink2); }
.bt-specs__t td { color: var(--bt-ink); }

/* ---------- nuestra opinion (B11) ---------- */


.bt-editorial__sub {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 650;
	color: var(--bt-ink);
}
.bt-editorial__quien { margin: 0 0 16px; }
.bt-editorial__quien p { font-size: 16px; line-height: 1.55; color: var(--bt-ink); }

/* A favor y en contra, lado a lado. Es la unica forma de que se lean como un
   balance y no como dos listas que alguien dejo una abajo de la otra. */
.bt-balance {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0 0 16px;
}
.bt-balance__col {
	padding: 13px 15px;
	border: 1px solid #e3e6ea;
	border-radius: 10px;
}
.bt-balance__col--pro { border-left: 3px solid var(--bt-ok); }
.bt-balance__col--con { border-left: 3px solid var(--bt-flojo); }
.bt-balance__h {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.bt-balance__col--pro .bt-balance__h { color: var(--bt-ok); }
.bt-balance__col--con .bt-balance__h { color: var(--bt-flojo); }
.bt-balance ul { display: grid; gap: 6px; }
.bt-balance li {
	position: relative;
	padding-left: 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bt-ink2);
}
.bt-balance li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.bt-balance__col--pro li::before { content: "+"; color: var(--bt-ok); }
.bt-balance__col--con li::before { content: "\2212"; color: var(--bt-flojo); }

.bt-editorial__alt {
	margin: 0 0 16px;
	padding: 11px 14px;
	background: var(--bt-soft);
	border-radius: var(--bt-radio);
	font-size: 14.5px;
}
.bt-editorial__alt span { color: var(--bt-ink3); margin-right: 5px; }
.bt-editorial__alt a { color: var(--bt-cta); font-weight: 600; }

/* El analisis que ya trae la ficha. Sus encabezados son todos `h3` —un titulo,
   una seccion y una subseccion al mismo nivel— y hay once por ficha: achicarlos
   es lo que evita que compitan con el `h2` del bloque y que la pagina parezca
   un indice. La jerarquia plana es deuda del generador. */
.bt-editorial__analisis {
	padding-top: 14px;
	border-top: 1px solid var(--bt-line);
}
.bt-editorial__analisis h3 {
	margin: 18px 0 6px;
	font-size: 15.5px;
	font-weight: 650;
	line-height: 1.3;
	color: var(--bt-ink);
}
.bt-editorial__analisis h3:first-child { margin-top: 0; }
.bt-editorial__analisis h4 { margin: 14px 0 5px; font-size: 14.5px; font-weight: 600; }
.bt-editorial__analisis p { font-size: 16px; line-height: 1.55; color: var(--bt-ink); }
.bt-editorial__analisis ul { margin: 0 0 10px; padding-left: 18px; list-style: disc; }
.bt-editorial__analisis li { font-size: 15px; line-height: 1.55; color: var(--bt-ink); }
.bt-editorial__analisis img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---------- opiniones de usuarios (B12) ---------- */

/* La fuente en una caja celeste arriba del bloque (`.src`). */
.bt-opiniones__fuente {
	font-size: 12.5px;
	background: #eef6ff;
	border: 1px solid #9dc2f0;
	border-radius: 7px;
	padding: 8px 11px;
	margin: 0 0 11px;
	color: #14456e;
}
.bt-opiniones__fuente a { color: #0a58ca; }

/* Apiladas en una columna, como `.rv`. */
.bt-opinion {
	padding: 12px 14px;
	margin-bottom: 9px;
	border: 1px solid var(--bt-line);
	border-radius: 8px;
}
.bt-opinion__titulo { margin: 5px 0 4px; font-size: 14.5px; font-weight: 700; line-height: 1.3; }

/* Cita, no parrafo: el texto es de otro y el marcado lo dice. Sin comillas
   decorativas, que con texto que ya trae las suyas quedan dobles. */
.bt-opinion__texto {
	margin: 0 0 7px;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--bt-ink);
	font-style: normal;
	/* Una palabra larga sin cortes no puede empujar la pagina: en la 1169 una
	   opinion de «aaaa…» daba 4 px de scroll horizontal a 320 px. */
	overflow-wrap: anywhere;
}
.bt-opinion__pie { margin: 0; font-size: 11.5px; color: var(--bt-ink2); }
/* La version como pastilla, `.vbadge`. */
.bt-opinion__version {
	background: #e7f1ff;
	color: var(--bt-cta-oscuro);
	border-radius: 4px;
	padding: 1px 6px;
	font-size: 10.5px;
	font-weight: 700;
}

/* 5 visibles en escritorio y 3 en movil; el script pone el recorte. */
.bt-opiniones--recortado .bt-opinion--mas { display: none; }
.bt-opiniones__todas { margin: 0; font-size: 11.5px; }
.bt-opiniones__todas[hidden],
.bt-opiniones__todas--movil { display: none; }
.bt-opiniones__boton {
	padding: 0;
	font: inherit;
	color: #0a58ca;
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

/* ---------- preguntas frecuentes (B15) ---------- */

.bt-faq__item {
	border: 1px solid var(--bt-line);
	border-radius: 8px;
	margin-bottom: 7px;
	background: #fff;
}
.bt-faq__item:last-child { margin-bottom: 0; }
.bt-faq__item[open] > .bt-faq__p { border-bottom: 1px solid var(--bt-line); }
.bt-faq__p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bt-ink);
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}
.bt-faq__p::-webkit-details-marker { display: none; }
.bt-faq__p::after { content: "\002B"; font-size: 16px; font-weight: 400; color: var(--bt-ink3); flex: 0 0 auto; }
.bt-faq__item[open] > .bt-faq__p::after { content: "\2212"; }
.bt-faq__p:hover { background: var(--bt-soft); }
.bt-faq__r { padding: 0 16px 14px; }
.bt-faq__r p { font-size: 14.5px; line-height: 1.6; color: var(--bt-ink2); }
.bt-faq__r p:last-child { margin-bottom: 0; }

/* ---------- opinion de los especialistas (B13) ---------- */

.bt-expertos__bajada { font-size: 11.5px; color: var(--bt-ink2); margin: 0 0 10px; }

/* La portada no se lleva el ancho completo: al lado entra el resumen, que es
   lo que de verdad se lee. El video es la fuente, no el contenido. */
.bt-expertos__cuerpo {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 16px;
	align-items: start;
	margin: 0;
	/* La tarjeta `.rv` del mockup. */
	padding: 12px 14px;
	border: 1px solid var(--bt-line);
	border-radius: 8px;
}
.bt-expertos__marco { border-radius: var(--bt-radio); overflow: hidden; }
.bt-expertos__titulo { margin: 5px 0 4px; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.bt-expertos__meta {
	margin: 0;
	font-size: 11.5px;
	color: var(--bt-ink2);
}
/* «▶ Canal · 14:20»: los datos van separados por un punto medio. */
.bt-expertos__meta > span + span::before { content: "\00a0\00b7\00a0"; }
.bt-expertos__canal,
body.bt-ficha-v3 .bt-expertos__canal a { font-weight: 700; color: var(--bt-ink); }
.bt-expertos__resumen { font-size: 14px; line-height: 1.55; color: var(--bt-ink); margin: 0 0 7px; }
.bt-expertos__ir { margin: 0; font-size: 11.5px; }
body.bt-ficha-v3 .bt-expertos__ir a { color: #0a58ca; text-decoration: underline; }

/* ---------- comparativas (B14) ---------- */


/* Tres columnas de igual ancho: si la del medio fuera mas ancha, la ficha
   actual pareceria la respuesta y el bloque existe justamente para que no lo
   parezca de antemano. */
.bt-comparar__tira {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 11px;
	align-items: stretch;
}
/* `.cmp .col` del mockup: alineado a la izquierda, 12,5 px. */
.bt-comparar__col {
	display: flex;
	flex-direction: column;
	padding: 11px;
	border: 1px solid var(--bt-line);
	border-radius: 9px;
	font-size: 12.5px;
}
.bt-comparar__col--esta { border-color: var(--bt-cta); background: var(--bt-cta-fondo); }
.bt-comparar__rotulo {
	margin: 0 0 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bt-ink);
}
.bt-comparar__col--esta .bt-comparar__rotulo { font-size: 11.5px; font-weight: 400; color: var(--bt-ink2); }
.bt-comparar__foto { height: 108px; display: grid; place-items: center; margin: 0 0 6px; }
.bt-comparar__img { max-height: 108px; width: auto; max-width: 100%; object-fit: contain; }
.bt-comparar__nombre { margin: 0; font-size: 12.5px; line-height: 1.35; }
body.bt-ficha-v3 .bt-comparar__nombre a { color: var(--bt-ink); text-decoration: none; }
body.bt-ficha-v3 .bt-comparar__nombre a:hover { color: var(--bt-cta); text-decoration: underline; }
.bt-comparar__precio {
	margin: 5px 0;
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.bt-comparar__datos { margin: 0 0 auto; }
.bt-comparar__datos dt { color: var(--bt-ink2); font-size: 10.5px; margin-top: 5px; }
.bt-comparar__datos dd { margin: 0; font-weight: 600; font-size: 12px; }
/* `.btn.ghost.sm` a lo ancho; el de esta ficha, lleno. */
body.bt-ficha-v3 .bt-comparar__cta {
	display: block;
	margin-top: 8px;
	padding: 6px 11px;
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
	color: var(--bt-cta-oscuro);
	background: #fff;
	border: 1.5px solid var(--bt-cta);
	border-radius: 7px;
	text-decoration: none;
}
body.bt-ficha-v3 .bt-comparar__cta:hover { background: var(--bt-cta); color: #fff; }
body.bt-ficha-v3 .bt-comparar__cta--esta { background: var(--bt-cta); color: #fff; }
body.bt-ficha-v3 .bt-comparar__cta--esta:hover { background: var(--bt-cta-hover); }
.bt-comparar__elegir { margin: 11px 0 0; font-size: 11.5px; color: var(--bt-ink2); }
.bt-comparar__elegir a { color: #0a58ca; }

/* ---------- sobre esta ficha (B16) ---------- */

/* Un parrafo a 16 px, sin caja: avatar, nombre, bio y enlace en linea (`#autor > p`). */
.bt-autor__p { font-size: 16px; color: var(--bt-ink); }
.bt-autor__img { display: inline-block; width: 42px; height: 42px; border-radius: 50%; vertical-align: middle; margin-right: 5px; }
.bt-autor__p a { color: #0a58ca; }
body.bt-ficha-v3 .bt-ficha .bt-autor__como-h { margin: 16px 0 7px; }
.bt-ficha .bt-autor__como { font-size: 14px; padding-left: 19px; list-style: disc; }
.bt-autor__como li { margin-bottom: 3px; }
.bt-autor__meto { margin: 7px 0 0; font-size: 13px; }
.bt-autor__meto a { color: #0a58ca; }

/* ---------- seguir explorando (B17) ---------- */

/* Cada grupo es un subtitulo y una fila de cuatro tarjetas (`.links`). */
body.bt-ficha-v3 .bt-ficha .bt-seguir__sub {
	margin: 13px 0 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bt-ink2);
}
body.bt-ficha-v3 .bt-ficha .bt-seguir__grupo:first-child .bt-seguir__sub { margin-top: 0; }
.bt-seguir__grupo ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
body.bt-ficha-v3 .bt-seguir__grupo a {
	display: block;
	height: 100%;
	padding: 9px;
	border: 1px solid var(--bt-line);
	border-radius: 8px;
	font-size: 12.5px;
	color: var(--bt-ink);
	text-decoration: none;
}
body.bt-ficha-v3 .bt-seguir__grupo a:hover { border-color: var(--bt-cta); }
.bt-seguir__nombre { display: block; line-height: 1.35; }
.bt-seguir__dato { display: block; font-size: 10.5px; color: var(--bt-ink2); }

/* ---------- utilidad del contenido (B12b) ----------
   Sin contador: la fila B12b lo pide asi, y mostrar "al 87 % le sirvio" invita
   a votar lo que ya voto la mayoria. */

/* Un renglon chico al pie de las opiniones, con linea arriba: «¿Te resulto
   util esta ficha? Si · No» (`#review p.tiny`). */
.bt-util {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 14px 0 0;
	padding-top: 11px;
	border-top: 1px solid var(--bt-line);
	font-size: 11.5px;
	color: var(--bt-ink2);
}
.bt-util__h { margin: 0; font-weight: 700; color: var(--bt-ink2); }
.bt-util__opciones { display: flex; gap: 0; }
body.bt-ficha-v3 .bt-util__boton {
	padding: 0;
	font: inherit;
	color: #0a58ca;
	text-decoration: underline;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}
.bt-util__boton + .bt-util__boton::before { content: "\00a0\00b7\00a0"; color: var(--bt-ink2); display: inline-block; }
.bt-util__gracias { margin: 0; font-weight: 600; color: var(--bt-ok); }
.bt-util__gracias[hidden] { display: none; }

/* ---------- tableta ---------- */

@media (max-width: 1100px) {
	.bt-hero__grid { grid-template-columns: 200px 1fr; gap: 16px; }
	.bt-nota__cifra { font-size: 30px; }
	.bt-precio__cifra { font-size: 26px; }
}

/* ---------- movil ----------
   No es consecuencia del CSS responsive: es una especificacion propia
   (seccion 7). Orden del primer viewport: H1 -> resumen -> imagen reducida ->
   nota -> senales -> precio -> respuesta directa. */

@media (max-width: 782px) {
	.bt-ficha { font-size: 15.5px; }

	/* El parrafo visible pasa a la version de ~45 palabras: lo que en
	   escritorio son tres lineas, en un telefono son seis. */
	.bt-resumen__lead--ancho { display: none; }
	.bt-resumen__lead--angosto { display: block; }
	.bt-resumen__lead { font-size: 15.5px; }

	.bt-hero__grid { grid-template-columns: 1fr; gap: 14px; }

	/* La foto no puede comerse el viewport: queda centrada y chica. */
	.bt-galeria__img { max-height: 190px; width: auto; max-width: 100%; margin: 0 auto; }

	/* La nota se compacta: 3 barras alcanzan para dar la forma. */
	.bt-nota__cuerpo { grid-template-columns: auto 1fr; gap: 12px; }
	.bt-nota__barra:nth-child(n+4) { display: none; }
	.bt-nota__barras { column-gap: 7px; grid-template-columns: minmax(48px, max-content) 1fr 24px; }
	.bt-nota__cifra { font-size: 28px; }

	.bt-senales__grid { gap: 8px 12px; }
	.bt-precio__cifra { font-size: 25px; }

	/* «✓ Ficha verificada · Actualizada el …» en un renglon (`.phonebox`). */
	.bt-hero__meta { gap: 4px 10px; }

	/* Los titulos de seccion siguen en 18 px en movil, como antes del cambio de
	   pila tipografica: la regla de 20 px de arriba entra por el body y le
	   ganaba a la de cada bloque. */
	body.bt-ficha-v3 .bt-ficha h2 { font-size: 18px; }
}

/* Las señales en dos columnas por debajo de 900 px, como el mockup
   (`@media(max-width:900px) .keys`) y la fila B05b para movil. En cuatro
   columnas de 77 px los valores se partian a mitad de palabra. */
@media (max-width: 900px) {
	.bt-senales__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mientras existe la barra fija, la caja de precio del hero va sin CTA, sin
   el conteo de tiendas y con el aviso corto, como la de `.phonebox`: el CTA
   ya lo tiene la barra, que no se va. */
@media (max-width: 921px) {
	.bt-precio .bt-precio__cta,
	.bt-precio__ref-tiendas,
	.bt-precio__aviso:not(.bt-precio__aviso--corto) { display: none; }
	.bt-precio__aviso--corto { display: block; }
}

/* Con el resumen corto ausente, en movil hay que mostrar el largo igual: es
   preferible un parrafo de seis lineas a ningun resumen. */
@media (max-width: 782px) {
	.bt-resumen:not(:has(.bt-resumen__lead--angosto)) .bt-resumen__lead--ancho { display: block; }
}

/* ---------- movil: los bloques del cuerpo ---------- */

@media (max-width: 782px) {
	.bt-directa__caja { padding: 12px 14px; }

	/* La tabla de precios se desplaza en horizontal adentro de su contenedor y
	   el CTA se achica a texto: en 360 px no caben cuatro columnas con boton. */
	.bt-tabla__t { font-size: 13px; min-width: 340px; }
	.bt-tabla__t th,
	.bt-tabla__t td { padding: 10px 9px; }
	.bt-tabla__cta a { padding: 7px 10px; font-size: 12.5px; }

	/* La etiqueta de la especificacion deja de comerse casi la mitad del ancho. */
	.bt-specs__t th { width: 46%; }
	.bt-specs__t th,
	.bt-specs__t td { padding: 9px 13px; font-size: 13px; }
	.bt-specs__titulo { padding: 10px 12px; font-size: 14px; }
}

/* ---------- movil: opinion, opiniones y FAQ ---------- */

@media (max-width: 782px) {
	/* El balance se apila: en 360 px dos columnas dan 160 px cada una y las
	   frases quedan en cuatro renglones de dos palabras. */
	.bt-balance { grid-template-columns: 1fr; gap: 10px; }

	.bt-editorial__analisis h3 { font-size: 15px; }
	.bt-editorial__analisis p,
	.bt-editorial__analisis li { font-size: 14.5px; }

	/* 3 opiniones visibles en movil, y el boton aunque haya 5 o menos. */
	.bt-opiniones--recortado .bt-opinion--mas-movil { display: none; }
	.bt-opiniones__todas--movil { display: block; }
	.bt-opiniones__todas[hidden] { display: none; }
	.bt-opinion { padding: 10px 12px; }

	.bt-faq__p { padding: 13px 14px; font-size: 14.5px; }
	.bt-faq__r { padding: 0 14px 13px; }
}

/* ---------- movil: especialistas, comparativas, autor y enlaces ---------- */

@media (max-width: 782px) {
	/* La portada pasa arriba y a lo ancho: en una columna de 360 px, 300 px de
	   video al lado del resumen no dejan lugar para el resumen. */
	.bt-expertos__cuerpo { grid-template-columns: 1fr; gap: 12px; }

	/* Las tres columnas se van a scroll horizontal en vez de apilarse: apiladas
	   dejan de ser una comparacion, que es todo el punto del bloque. */
	.bt-comparar__tira {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		grid-auto-columns: minmax(168px, 1fr);
		padding-bottom: 4px;
	}
	.bt-comparar__foto { height: 86px; }
	.bt-comparar__img { max-height: 86px; }
	.bt-comparar__precio { font-size: 15.5px; }

	/* Dos tarjetas por fila, como `.links` por debajo de 900 px. */
	.bt-seguir__grupo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- barra fija de precio (B05c, columna movil) ----------

   Solo existe en movil. En escritorio el bloque de precio vive en la columna
   de decision, que acompana el scroll: una barra ademas seria el mismo dato
   dos veces en pantalla.

   Sale oculta y la enciende el script cuando el bloque de precio se va de
   pantalla, que es lo que pide la fila: "desde el primer scroll". Sin
   JavaScript no aparece y no se pierde nada —todo lo que dice ya esta en la
   pagina—; al reves, mostrarla siempre y esconderla al cargar seria un
   parpadeo en cada visita. */

.bt-barra { display: none; }

/* El corte es 921 y no 782, que es el de los demas bloques de movil: a 922 px
   la ficha pasa a dos columnas y el precio queda fijo en el costado. Entre 783
   y 921 la columna ya se apilo pero la barra todavia no entraba, asi que en
   toda esa franja —una tablet en vertical— no habia ni una cosa ni la otra. */
@media (max-width: 921px) {

	.bt-barra {
		display: flex;
		align-items: center;
		gap: 10px;
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 9px 14px;
		/* El respiro de abajo es el de la barra del sistema en iOS. Sin esto, el
		   CTA queda debajo del indicador de inicio y no se puede tocar. */
		padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
		background: var(--bt-surface, #fff);
		border-top: 1px solid var(--bt-line, #e3e6ea);
		box-shadow: 0 -6px 18px rgba(16, 24, 40, .1);

		/* Entra y sale deslizando, no apareciendo: un bloque que aparece de
		   golpe sobre el texto que se esta leyendo se lee como un error. */
		transform: translateY(0);
		transition: transform .18s ease-out;
	}

	/* El estado de reposo. `hidden` no alcanza para animar, asi que el atributo
	   se saca al cargar y el estado pasa a esta clase: sin ella el lector sin
	   JavaScript veria la barra fija tapando el pie desde el primer pixel. */
	.bt-barra[hidden] { display: none; }
	.bt-barra--guardada { transform: translateY(110%); }

	.bt-barra__dato {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 6px;
		line-height: 1.25;
	}
	.bt-barra__cifra {
		font-size: 17px;
		font-weight: 800;
		letter-spacing: -.02em;
		font-variant-numeric: tabular-nums;
		color: var(--bt-ink, #16181d);
	}
	/* La tienda baja a su propio renglon y se trunca: es el dato que mas varia
	   de largo —"Mercado Libre" contra "Compra Gamers"— y es lo unico que puede
	   ceder ancho sin que la barra deje de responder "cuanto y donde". */
	.bt-barra__tienda {
		flex: 1 0 100%;
		font-size: 12.5px;
		color: var(--bt-ink2, #4a5057);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bt-barra__cta {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* 44 px, el objetivo tactil de la especificacion movil, igual que el CTA
		   del bloque. */
		min-height: 44px;
		padding: 0 16px;
		background: var(--bt-cta, #1a59ad);
		color: #fff !important;
		font-weight: 650;
		font-size: 14.5px;
		border-radius: 8px;
		text-decoration: none !important;
	}
	.bt-barra__cta:hover { background: var(--bt-cta-hover, #12437f); }

	/* El ultimo bloque de la ficha no puede quedar debajo de la barra. Se
	   reserva el alto de la franja mas el respiro del sistema; el pie del sitio
	   queda despues y tampoco se tapa. */
	body.bt-ficha-v3 .site-footer { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

	/* La flecha de "volver arriba" de Astra es `position: fixed` abajo a la
	   derecha con el mismo `z-index` que la barra, asi que se montaba justo
	   encima del CTA: en la captura de 390 px tapaba la palabra "precios".
	   Sube mientras la barra esta a la vista y vuelve a su lugar cuando se
	   guarda. La especificidad (1 id + 1 clase + 1 elemento) le gana al
	   `#ast-scroll-top` del CSS dinamico sin necesidad de `!important`. */
	/* La clase va en <html> y se llama `bt-precio-fijo`, no `bt-con-barra`:
	   ese nombre ya existe en este tema con otro significado —"el body tiene
	   barra lateral"— y es lo que arma las dos columnas en `aside.css`. Dos
	   cosas distintas con el mismo nombre terminan en una regla escrita sin
	   elemento que pega en las dos. */
	html.bt-precio-fijo #ast-scroll-top {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}
	#ast-scroll-top { transition: bottom .18s ease-out; }
}

/* Quien pidio menos movimiento no ve el deslizamiento: aparece y desaparece. */
@media (prefers-reduced-motion: reduce) {
	.bt-barra { transition: none; }
}

/* ---------- el costado (B18) ----------

   Tres cajas `.box` —precio, fichas relacionadas y sello— en un envoltorio que
   acompaña el scroll entero, como `aside.side{position:sticky;top:12px}` del
   mockup. Antes solo la caja de precio era sticky y las otras dos se iban.

   Por debajo de 922 px el costado se apila al final de la ficha (fila B18 en
   movil: «el costado se apila al final»), sin sticky. Antes desaparecia. */

.bt-costado {
	display: grid;
	gap: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.bt-costado * { box-sizing: border-box; }

.bt-aside-precio,
.bt-rel,
.bt-sello {
	margin: 0;
	padding: 15px;
	background: var(--bt-surface, #fff);
	border: 1px solid var(--bt-line);
	border-radius: var(--bt-radio);
}

/* El titulo de cada caja es `h4` en el mockup: 13,5 px, 700, `--ink2`. Son H2
   en el documento —el costado no cuelga de ninguna seccion— y Astra les ponia
   27 px, casi el tamaño del H1. */
body.bt-ficha-v3 #secondary .bt-rel__h,
body.bt-ficha-v3 #secondary .bt-sello__h {
	margin: 0 0 5px;
	font-size: 13.5px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--bt-ink2);
}

@media (min-width: 922px) {

	.bt-costado {
		position: sticky;
		/* Nada del sitio es `sticky` ni `fixed` —medido—, asi que no hay
		   cabecera que esquivar y alcanza con el aire del borde. */
		top: 12px;
	}
}

@media (max-width: 921px) {
	.bt-costado { margin-top: 24px; }
}


.bt-aside-precio__h {
	margin: 0;
	color: var(--bt-cta-oscuro);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Mas chica que la del hero a proposito: el precio de la ficha lo da el
   bloque, y esta caja es el atajo, no la respuesta. */
.bt-aside-precio__cifra {
	margin: 2px 0 0;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--bt-ink, #16181d);
}

.bt-aside-precio__quien {
	margin: 2px 0 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--bt-ink2, #4a5057);
}
.bt-aside-precio__version { display: block; font-size: 12px; color: var(--bt-ink3, #7b8492); }


/* Boton lleno y al ancho de la caja, como el mockup: es el unico CTA del
   costado y el que acompaña todo el scroll. */
.bt-aside-precio__cta {
	display: block;
	width: 100%;
	margin: 9px 0 0;
	padding: 10px 14px;
	background: var(--bt-cta);
	color: #fff !important;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	border-radius: 7px;
	text-decoration: none !important;
	min-height: 42px;
}
.bt-aside-precio__cta:hover { background: var(--bt-cta-hover); }

/* Las tres cifras en un renglon, chiquitas: informan, no compiten. */
.bt-aside-precio__refs {
	margin: 7px 0 0;
	font-size: 11.5px;
	color: var(--bt-ink2);
}

.bt-aside-precio__aviso {
	margin: 7px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--bt-ink3, #7b8492);
}

/* Para que la caja siga pegada hasta el final del articulo, su contenedor
   tiene que ser tan alto como el contenido: un `sticky` solo se despega
   dentro del padre, y no mas alla.

   Estirar `#secondary` no alcanzaba —medido: 6476 px—, porque entre el y
   la caja hay un `.sidebar-main` que Astra deja del alto de su contenido,
   1378 px. La caja quedaba pegada hasta ahi y despues se iba con el scroll,
   que es exactamente lo que el bloque viene a evitar. Por eso se estira el
   contenedor de adentro y no solo el de afuera.

   Solo en fichas v3: las notas comparten `aside.css` y no tienen por que
   cambiar. */

@media (min-width: 922px) {
	body.bt-ficha-v3 #secondary {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}
	body.bt-ficha-v3 .sidebar-main { flex: 1 1 auto; }
}

/* ---------- la tabla de precios en pantallas angostas ----------

   Medido: a 390 px entra justa (345 de tabla en 345 de contenedor), pero a 360
   —el ancho de media gama Android, que es medio catalogo de este sitio—
   desborda 25 px, y a 320, 65. La fila B09 pide para movil "scroll horizontal
   con la columna de precio fija"; antes de pegar una columna conviene que no
   haga falta scrollear, que es mejor respuesta a la misma pregunta.

   El precio no se parte nunca —ya tiene `white-space: nowrap`—; lo que cede es
   el nombre de la tienda, que puede ocupar dos renglones, y el CTA. */

@media (max-width: 400px) {
	.bt-tabla__t { min-width: 0; font-size: 12.5px; }
	.bt-tabla__t th,
	.bt-tabla__t td { padding: 9px 6px; }
	.bt-tabla__cta a { padding: 6px 8px; font-size: 12px; }

	/* Y si aun asi desborda —un nombre de tienda muy largo, una cifra de siete
	   digitos—, el precio queda fijo al scrollear, que es lo que pide la fila.
	   El fondo es obligatorio: sin el, las celdas de abajo se transparentan por
	   encima al desplazarse. */
	.bt-tabla__precio {
		position: sticky;
		left: 0;
		background: var(--bt-surface);
	}
	.bt-tabla__fila--bajo .bt-tabla__precio { background: #f1f8f3; }
}

/* ---------- miniaturas de la galeria ---------- */

/* Cuatro al pie de la foto grande, como el mockup. No son un visor: no cambian
   la foto de arriba, porque eso pediria JavaScript y la ficha no depende de el
   para nada esencial. Lo que aportan es mostrar que hay mas de una vista. */
.bt-galeria__minis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
	margin-top: 8px;
}
.bt-galeria__mini {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border: 1px solid var(--bt-line);
	border-radius: 5px;
	background: #fff;
	padding: 3px;
}

/* ---------- costado: fichas relacionadas (B18) ---------- */

.bt-rel__lista { list-style: none; margin: 0; padding: 0; }
.bt-rel__lista li { border-bottom: 1px solid var(--bt-line); }
.bt-rel__lista li:last-child { border-bottom: 0; }

body.bt-ficha-v3 .bt-rel__lista a {
	display: flex;
	gap: 9px;
	align-items: center;
	padding: 7px 0;
	font-size: 12.5px;
	color: var(--bt-ink);
	text-decoration: none;
}
.bt-rel__lista a:hover .bt-rel__nombre { text-decoration: underline; }

.bt-rel__foto { flex: 0 0 26px; }
.bt-rel__img {
	width: 26px;
	height: auto;
	display: block;
}

.bt-rel__cuerpo { min-width: 0; }
.bt-rel__nombre { display: block; line-height: 1.3; }
.bt-rel__dato { display: block; color: var(--bt-ink2); font-size: 10.5px; }

.bt-rel__todas { margin: 8px 0 0; font-size: 11.5px; }

/* ---------- el marco de la pagina (layout) ----------
   El layout pone el contenido en una tarjeta blanca con borde sobre un
   fondo gris. Astra ya arma la tarjeta en `.ast-article-single`, asi que
   solo hay que darle el borde y el radio y pintar el fondo de atras.
   Acotado a `body.bt-ficha-v3`: el resto del sitio no cambia de fondo por
   una decision que se tomo para la ficha. */
body.bt-ficha-v3 { --bt-fondo: #fafbfc; background-color: #fafbfc; }
body.bt-ficha-v3.ast-separate-container .ast-article-single {
	background-color: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 10px;
}

/* ---------- el sello del costado (layout) ----------
   Tercera caja del aside, con el mismo patron `.box` que las otras dos.
   Solo en escritorio, igual que `.bt-rel`: en movil el costado cae debajo
   de la ficha entera y una caja de confianza a 4.000 px del H1 no cumple
   ninguna funcion. */
.bt-sello__p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--bt-ink2); }