/* ============================================================
   Categoría de producto (página de marca)
   Plantilla nativa que reemplaza a Elementor 949. Se diseñó en
   preview/categoria/.

   Carga después de home.css (tokens, botones, tarjeta de producto) y de
   servicios.css (hero oscuro cb-vhero, que comparte con las páginas de
   vehículo). Aquí solo va lo propio de la categoría.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

/*
 * Las fotos de categoría son baterías recortadas sobre blanco. En el marco
 * oscuro del hero de vehículo, que recorta la foto a 3:2, quedaban cortadas
 * y con bordes blancos irregulares. Aquí el marco es blanco y la foto entra
 * completa: el marco manda, la foto se acomoda.
 */
.cb-vhero--categoria .cb-vhero__marco {
	background: #ffffff;
}

.cb-vhero--categoria .cb-vhero__imagen {
	aspect-ratio: 3 / 2;
	padding: clamp(1rem, 3vw, 2rem);
	object-fit: contain;
}

/* El precio desde: mismo peso que el número de referencias, pero blanco. */
.cb-vhero__precio {
	color: #ffffff;
	font-weight: 700;
	white-space: nowrap;
}

.cb-vhero--categoria .cb-vhero__acciones {
	margin-bottom: 1rem;
}

/* Enlace al catálogo: texto, no un tercer botón que compita con los dos de contacto. */
.cb-vhero .cb-vhero__contenido .cb-vhero__ir-precios {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 1.35rem;
	color: #fdba74;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(253, 186, 116, 0.45);
	text-underline-offset: 4px;
}

.cb-vhero .cb-vhero__contenido .cb-vhero__ir-precios:hover,
.cb-vhero .cb-vhero__contenido .cb-vhero__ir-precios:focus-visible {
	color: #ffffff;
	text-decoration-color: currentColor;
}

.cb-vhero__ir-precios svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * En tableta y celular el hero de vehículo sube la foto arriba del texto.
 * Aquí no: quien entra a la página de una marca ya sabe cómo se ve una
 * batería y viene por los precios. Primero el título y los botones; la foto,
 * más chica, después.
 */
@media (max-width: 900px) {
	.cb-vhero--categoria .cb-vhero__visual {
		order: 0;
	}

	.cb-vhero--categoria .cb-vhero__marco {
		max-width: 26rem;
		margin-inline: auto;
	}

	.cb-vhero--categoria .cb-vhero__imagen {
		aspect-ratio: 16 / 9;
	}
}

/*
 * En el celular la foto grande sumaba 200 px antes de los precios sin decir
 * nada nuevo. Pasa a una miniatura junto a las dos tarjetas: se sigue viendo
 * la batería de la marca y el hero queda una pantalla más corto.
 */
@media (max-width: 620px) {
	.cb-vhero--categoria .cb-vhero__visual {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 0.75rem;
		align-items: stretch;
	}

	.cb-vhero--categoria.cb-vhero--sin-imagen .cb-vhero__visual {
		grid-template-columns: 1fr;
	}

	.cb-vhero--categoria .cb-vhero__marco {
		max-width: none;
		margin: 0;
		border-radius: 14px;
	}

	.cb-vhero--categoria .cb-vhero__imagen {
		height: 100%;
		aspect-ratio: auto;
		padding: 0.5rem;
	}

	.cb-vhero--categoria .cb-vhero__tarjetas {
		grid-template-columns: 1fr;
		gap: 0.6rem;
		margin-top: 0;
	}

	.cb-vhero--categoria .cb-vhero__tarjeta {
		padding: 0.7rem 0.85rem;
	}
}

/* ============================================================
   PRECIOS
   La sección de productos de la home (.cb-products) con la tarjeta única.
   ============================================================ */

.cb-products.cb-cprecios {
	padding: clamp(2.75rem, 5.5vw, 4.75rem) 0;
	scroll-margin-top: 96px;
}

.cb-cprecios .cb-products__title {
	font-size: clamp(1.55rem, 2.6vw, 2.05rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/*
 * En el celular, las tarjetas en columna medían unos 560 px cada una: MAC,
 * con 38 referencias, pasaba de 20 pantallas. Aquí pasan a filas compactas
 * (foto a la izquierda, datos a la derecha), el patrón de listado de tienda
 * en el celular: se comparan precios bajando, sin abrir cada ficha. Es la
 * misma pieza y el mismo marcado; solo cambia la disposición.
 */
@media (max-width: 620px) {
	.cb-cprecios .cb-products__grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 24px;
	}

	.cb-cprecios .cb-product-card {
		display: grid;
		grid-template-columns: 6rem minmax(0, 1fr);
		border-radius: 14px;
	}

	.cb-cprecios .cb-product-card:hover {
		transform: none;
	}

	.cb-cprecios .cb-product-card__image-link {
		height: auto;
		padding: 10px;
		border-right: 1px solid rgba(21, 18, 87, 0.07);
		border-bottom: 0;
	}

	.cb-cprecios .cb-product-card__delivery {
		display: none;
	}

	.cb-cprecios .cb-product-card__image {
		max-width: 100%;
		max-height: 88px;
	}

	.cb-cprecios .cb-product-card__body {
		padding: 12px 14px 12px;
	}

	.cb-cprecios .cb-product-card__brand {
		margin-bottom: 4px;
	}

	.cb-cprecios h3.cb-product-card__title,
	.cb-cprecios .cb-product-card__title {
		min-height: 0;
		font-size: 15px !important;
		line-height: 1.35 !important;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.cb-cprecios .cb-product-card__price {
		margin-top: 6px;
		font-size: 19px;
	}

	.cb-cprecios .cb-product-card__specs {
		margin-top: 2px;
		font-size: 12px;
	}

	.cb-cprecios .cb-product-card__actions {
		justify-items: start;
		padding-top: 4px;
	}

	/*
	 * «Ver batería» no cabía junto a «Consultar compatibilidad» y partía cada
	 * fila en dos (207 px por tarjeta). En la fila, la foto y el nombre ya
	 * llevan a la ficha, así que el botón sobra; queda la consulta por
	 * WhatsApp, que es la acción que no tiene otro camino.
	 */
	.cb-cprecios .cb-product-card__button {
		display: none;
	}

	/* Texto, pero con alto de toque suficiente. */
	.cb-cprecios .cb-product-card__whatsapp {
		min-height: 40px;
		font-size: 13px;
	}
}

/* ============================================================
   ¿CUÁL LE SIRVE A TU CARRO?
   La sección de compatibilidad de la ficha (.cb-pcompat, servicios.css).
   Aquí solo se agrega el número de referencias en cada chip.
   ============================================================ */

/* Cuántas referencias de la marca le sirven a ese vehículo. */
.cb-ccompat__n {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: rgba(255, 59, 18, 0.1);
	color: var(--cb-accent, #ff3b12);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
}

/* ============================================================
   LÍNEAS DE LA MARCA — el corte visual
   Franja oscura entre dos secciones claras, con el gradiente y la luz del
   hero (cb-vhero) para que se lea como de la misma familia. Las tarjetas son
   de vidrio, como las del hero. El naranja sólido sigue reservado al botón
   principal: aquí el acento va en filos y textos.
   ============================================================ */

.cb-clineas {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 6vw, 5rem) 0;
	background: linear-gradient(160deg, #151257 0%, #1e1b4b 50%, #0f172a 100%);
	color: #ffffff;
	isolation: isolate;
	scroll-margin-top: 96px;
}

.cb-clineas__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 12% 20%, rgba(234, 88, 12, 0.22), transparent 40%),
		radial-gradient(circle at 90% 85%, rgba(37, 99, 235, 0.28), transparent 45%);
}

.cb-clineas__cabecera {
	max-width: 46rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.cb-clineas .cb-clineas__eyebrow {
	margin: 0 0 0.6rem;
	color: #fdba74;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cb-clineas .cb-clineas__titulo {
	margin: 0 0 0.75rem;
	color: #ffffff;
	font-size: clamp(1.55rem, 2.6vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-wrap: balance;
}

.cb-clineas .cb-clineas__texto {
	margin: 0;
	color: rgba(255, 255, 255, 0.76);
	font-size: 0.98rem;
	line-height: 1.65;
}

.cb-clineas__grid {
	display: grid;
	grid-template-columns: repeat(var(--cb-clineas-n, 3), minmax(0, 1fr));
	gap: 1rem;
}

.cb-clineas__grid--n2 { --cb-clineas-n: 2; }
.cb-clineas__grid--n3 { --cb-clineas-n: 3; }
.cb-clineas__grid--n4 { --cb-clineas-n: 4; }

.cb-clinea {
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.35rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: 3px solid #ea580c;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	box-shadow: 0 18px 40px rgba(3, 7, 18, 0.3);
	transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.cb-clinea:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.22);
	border-top-color: #fb923c;
	transform: translateY(-2px);
}

.cb-clineas .cb-clinea__nombre {
	margin: 0 0 0.4rem;
	color: #ffffff;
	font-size: 1.15rem !important;
	font-weight: 700;
	line-height: 1.3 !important;
}

.cb-clineas .cb-clinea__texto {
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.88rem;
	line-height: 1.55;
}

/* Cuatro datos en dos columnas, divididos por líneas finas: una pieza, no cuatro cajas. */
.cb-clinea__datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cb-clinea__dato {
	padding: 0.65rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cb-clinea__dato:nth-child(odd) {
	padding-right: 0.75rem;
}

.cb-clinea__dato dt {
	margin: 0 0 0.15rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cb-clinea__dato dd {
	margin: 0;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
}

.cb-clinea__dato--precio dd {
	color: #fdba74;
	font-size: 1.1rem;
	font-weight: 800;
}

.cb-clinea__productos {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-clinea__productos li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.cb-clineas .cb-clinea__productos a {
	min-width: 0;
	padding: 0.3rem 0;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 3px;
}

.cb-clineas .cb-clinea__productos a:hover,
.cb-clineas .cb-clinea__productos a:focus-visible {
	color: #ffffff;
	text-decoration-color: #fdba74;
}

.cb-clinea__productos span {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
	white-space: nowrap;
}

.cb-clineas .cb-clinea__mas {
	margin-top: auto;
	padding-top: 0.6rem;
	color: #fdba74;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 1100px) {
	.cb-clineas__grid--n4 {
		--cb-clineas-n: 2;
	}
}

@media (max-width: 900px) {
	.cb-clineas__grid--n3 {
		--cb-clineas-n: 2;
	}
}

/* En el celular, una columna. Un carrusel escondería líneas que justamente
   se están comparando. */
@media (max-width: 620px) {
	.cb-clineas__grid,
	.cb-clineas__grid--n2,
	.cb-clineas__grid--n3,
	.cb-clineas__grid--n4 {
		--cb-clineas-n: 1;
	}

	.cb-clinea:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cb-clinea {
		transition: none;
	}

	.cb-clinea:hover {
		transform: none;
	}
}

/* ============================================================
   INSTALACIÓN Y GARANTÍA
   La sección de la ficha (.cb-pinstal, servicios.css). Aquí van los puntos
   de la caja (garantía y horario) y la variante clara: si la marca tiene la
   franja oscura de líneas, esta caja va en blanco para que la página tenga
   un solo corte oscuro.
   ============================================================ */

.cb-cinstal__puntos {
	display: grid;
	gap: 0.85rem;
	margin: 1.4rem 0 0;
	padding: 1.2rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	list-style: none;
}

.cb-cinstal__puntos li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	color: #d0d3dc;
	font-size: 0.92rem;
	line-height: 1.55;
}

.cb-cinstal__puntos strong {
	color: #ffffff;
	font-weight: 700;
}

.cb-cinstal__puntos svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 0.15rem;
	fill: none;
	stroke: var(--cb-accent, #ff3b12);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Variante clara */
.cb-pinstal--clara .cb-pinstal__intro {
	border: 1px solid #ecebf5;
	background: #ffffff;
	box-shadow: 0 18px 40px rgba(21, 18, 87, 0.07);
	color: var(--cb-dark, #10131c);
}

.cb-pinstal.cb-pinstal--clara .cb-pinstal__titulo {
	color: var(--cb-primary, #151257);
}

.cb-pinstal.cb-pinstal--clara .cb-pinstal__texto,
.cb-pinstal--clara .cb-cinstal__puntos li {
	color: #4b5563;
}

.cb-pinstal--clara .cb-cinstal__puntos {
	border-top-color: #ecebf5;
}

.cb-pinstal--clara .cb-cinstal__puntos strong {
	color: var(--cb-primary, #151257);
}

/* ============================================================
   OTRAS MARCAS
   Las tarjetas de marca de la home (home/brands.php) con el modificador
   cb-brands--compacta. En el celular, a 2 columnas, 7 logos más el pie
   medían 1.336 px para cerrar la página; a 3 columnas y con logos más bajos
   la sección se acorta sin perder ninguna marca.
   ============================================================ */

@media (max-width: 620px) {
	.cb-brands--compacta .cb-brands__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		margin-top: 24px;
	}

	.cb-brands--compacta .cb-brand-card__image-wrapper {
		min-height: 76px;
		padding: 12px;
		border-radius: 14px;
	}

	.cb-brands--compacta .cb-brand-card__image {
		max-width: 100%;
	}

	.cb-brands--compacta .cb-brand-card__name {
		font-size: 0.8rem;
	}
}

/* ============================================================
   SOBRE LA MARCA
   Título a la izquierda y texto a la derecha, el mismo ritmo de la
   descripción de la ficha. El texto va completo: el estándar es corto.
   ============================================================ */

.cb-csobre {
	padding: clamp(2.75rem, 5.5vw, 4.75rem) 0;
	background: #f6f5ff;
	scroll-margin-top: 96px;
}

.cb-csobre__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}

.cb-csobre .cb-csobre__titulo {
	margin: 0;
	color: var(--cb-primary, #151257);
	font-size: clamp(1.55rem, 2.6vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-wrap: balance;
}

.cb-csobre__texto {
	max-width: 68ch;
	color: #374151;
	font-size: 1rem;
	line-height: 1.75;
}

.cb-csobre__texto > :first-child {
	margin-top: 0;
}

.cb-csobre__texto p {
	margin: 0 0 1rem;
}

.cb-csobre .cb-csobre__texto h3 {
	margin: 1.75rem 0 0.5rem;
	color: var(--cb-primary, #151257);
	font-size: 1.15rem !important;
	font-weight: 700;
	line-height: 1.35 !important;
}

.cb-csobre__texto ul {
	margin: 0 0 1rem;
	padding-left: 1.2rem;
}

.cb-csobre__texto li {
	margin-bottom: 0.35rem;
}

.cb-csobre .cb-csobre__texto a {
	color: var(--cb-primary, #151257);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--cb-accent, #ff3b12);
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.cb-csobre__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* ============================================================
   PREGUNTAS FRECUENTES: recuadro de WhatsApp
   El de home.css (.cb-faq__help) dibujaba el logo de WhatsApp sin relleno
   y con un trazo grueso (fill: none; stroke: 1.8), cuando el logo es un
   dibujo relleno: se veía tosco. Además repetía el ícono dentro del
   enlace. Aquí: recuadro más amplio, un solo ícono, relleno y más grande,
   y el enlace como botón. La home y las páginas de vehículo siguen con el
   recuadro anterior (pendiente aparte).
   ============================================================ */

/*
 * Las preguntas son h3. El CSS global de Elementor (.elementor-kit-277 h3,
 * 24 px) le gana a .cb-faq-item__question de home.css, que tiene menos
 * especificidad: en vivo salían enormes (en el preview no carga Elementor).
 * Mismos valores de home.css, con un selector más fuerte.
 */
.cb-faq .cb-faq-item .cb-faq-item__question {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.45;
	text-transform: none;
}

@media (max-width: 620px) {
	.cb-faq .cb-faq-item .cb-faq-item__question {
		font-size: 0.9rem;
	}
}

.cb-faq--categoria .cb-faq__help {
	gap: 18px;
	align-items: start;
	margin-top: 32px;
	padding: 24px;
	border-radius: 20px;
}

.cb-faq--categoria .cb-faq__help-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(255, 59, 18, 0.1);
	color: var(--cb-accent, #ff3b12);
}

.cb-faq--categoria .cb-faq__help-icon svg,
.cb-faq--categoria .cb-faq__help-icon svg path {
	width: 30px;
	height: 30px;
	fill: currentColor;
	stroke: none;
}

.cb-faq--categoria .cb-faq__help-content strong {
	font-size: 1.05rem;
}

.cb-faq--categoria .cb-faq__help-content p {
	margin-top: 6px;
	font-size: 0.92rem;
	line-height: 1.55;
}

.cb-faq--categoria .cb-faq__help-content a.cb-faq__help-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 16px;
	padding: 10px 20px;
	border-radius: 12px;
	background: var(--cb-primary, #151257);
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cb-faq--categoria .cb-faq__help-content a.cb-faq__help-boton:hover,
.cb-faq--categoria .cb-faq__help-content a.cb-faq__help-boton:focus-visible {
	background: var(--cb-accent, #ff3b12);
	color: #ffffff;
}

@media (max-width: 620px) {
	.cb-faq--categoria .cb-faq__help {
		padding: 20px;
	}

	.cb-faq--categoria .cb-faq__help-content a.cb-faq__help-boton {
		width: 100%;
	}
}

/* ============================================================
   RITMO DE FONDOS
   Tres tonos de la marca que se alternan para que nunca queden dos
   secciones iguales seguidas (pedido de Steven, 2026-10-01: «muchas
   secciones blancas sin cortes visuales»):

     hero ......................... oscuro
     precios ...................... blanco
     ¿cuál le sirve? .............. lavanda (#f6f5ff, el de las migas)
     líneas (si hay) .............. oscuro
     instalación .................. blanco (caja oscura si no hay líneas)
     sobre la marca ............... lavanda
     reseñas ...................... oscuro
     preguntas .................... blanco
     otras marcas ................. lavanda

   Así cada marca tiene dos o tres cortes oscuros separados por secciones
   claras, y nunca dos oscuros seguidos.
   ============================================================ */

.cb-pcompat--categoria {
	background: #f6f5ff;
}

.cb-pinstal--categoria {
	background: #ffffff;
}

.cb-faq--categoria {
	background: #ffffff;
}

.cb-brands--compacta {
	background: #f6f5ff;
}

/* Sobre lavanda, las cajas de los logos van en blanco para no fundirse. */
.cb-brands--compacta .cb-brand-card__image-wrapper {
	background: #ffffff;
}

/* Reseñas sobre fondo oscuro: el gradiente y la luz del hero. Las tarjetas
   de reseña siguen blancas: sobre oscuro se leen como tarjetas de verdad. */
.cb-reviews.cb-reviews--oscura {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(circle at 85% 15%, rgba(234, 88, 12, 0.22), transparent 40%),
		radial-gradient(circle at 10% 90%, rgba(37, 99, 235, 0.26), transparent 45%),
		linear-gradient(160deg, #151257 0%, #1e1b4b 50%, #0f172a 100%);
}

.cb-reviews--oscura .cb-reviews__eyebrow {
	color: #fdba74;
}

.cb-reviews--compacta.cb-reviews--oscura .cb-reviews__title {
	color: #ffffff;
}

.cb-reviews--oscura .cb-reviews__resumen-dato {
	color: rgba(255, 255, 255, 0.75);
}

.cb-reviews--oscura .cb-reviews__resumen-dato strong {
	color: #ffffff;
}

.cb-reviews--oscura .cb-reviews__resumen-enlace {
	color: #ffffff;
}

.cb-reviews--compacta.cb-reviews--oscura .cb-reviews__disclaimer {
	color: rgba(255, 255, 255, 0.6);
}