/* ============================================================
   FICHA DE PRODUCTO — HERO
   Ficha de producto nativa (plantilla-ficha-producto.php). Se diseñó en
   preview/producto/ desde el 2026-09-28; el preview carga este mismo archivo.

   Fondo claro a propósito: las fotos de catálogo vienen sobre fondo claro
   y en una ficha lo que se compara es el producto, no el ambiente. El azul
   da la jerarquía (marca, título, precio) y el naranja queda reservado para
   la acción principal, como pide el manual de marca. Pocas cajas y sin
   sombras: cada bloque tiene una función.

   Los botones no se estilan aquí: son los de home.css (ver «BOTONES —
   REGLAS DE USO»). Sobre fondo claro, primario + secondary-on-light.
   ============================================================ */

.cb-phero {
	padding: clamp(1.75rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
	background: #ffffff;
	color: var(--cb-dark, #10131c);
	font-family: var(--cb-font, "Poppins", sans-serif);
}

.cb-phero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.75rem, 4.5vw, 4.5rem);
	align-items: center;
}

/* Foto */

.cb-phero__marco {
	margin: 0;
	border: 1px solid #ecebf5;
	border-radius: 20px;
	background: #f8f8fb;
	overflow: hidden;
}

.cb-phero__imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/* Marca y título. Selectores largos para ganarle al CSS global del tema padre. */

.cb-phero .cb-phero__info .cb-phero__marca {
	display: inline-block;
	margin: 0 0 0.45rem;
	color: rgba(21, 18, 87, 0.72);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.cb-phero .cb-phero__info .cb-phero__marca:hover,
.cb-phero .cb-phero__info .cb-phero__marca:focus-visible {
	color: var(--cb-primary, #151257);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-phero .cb-phero__info h1.cb-phero__titulo {
	margin: 0 0 1.1rem;
	color: var(--cb-primary, #151257);
	font-size: clamp(1.65rem, 2.9vw, 2.35rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

/* Precio */

.cb-phero__precio-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.cb-phero .cb-phero__precio {
	margin: 0;
	color: var(--cb-primary, #151257);
	font-size: clamp(1.8rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.cb-phero__garantia {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: #ecfdf3;
	color: #15803d;
	font-size: 0.8rem;
	font-weight: 600;
}

.cb-phero__garantia svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Qué incluye el precio */

.cb-phero__incluye {
	display: grid;
	gap: 0.4rem;
	margin: 0.95rem 0 1.4rem;
	padding: 0;
	list-style: none;
}

.cb-phero__incluye li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	color: #374151;
	font-size: 0.93rem;
	line-height: 1.4;
}

.cb-phero__incluye strong {
	color: var(--cb-primary, #151257);
	font-weight: 700;
}

.cb-phero__incluye svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: none;
	stroke: #16a34a;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Especificaciones clave: una sola pieza con divisiones, no cuatro tarjetas.
   El fondo del contenedor hace de línea divisoria (gap de 1px). */

.cb-phero__specs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 1.25rem;
	border: 1px solid #ecebf5;
	border-radius: 14px;
	background: #ecebf5;
	overflow: hidden;
}

.cb-phero__specs--n3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cb-phero__specs--n2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-phero__specs--n1 {
	grid-template-columns: 1fr;
}

.cb-phero__spec {
	margin: 0;
	padding: 0.8rem 0.9rem;
	background: #ffffff;
}

.cb-phero__spec dt {
	color: #6b7280;
	font-size: 0.74rem;
	font-weight: 400;
	line-height: 1.3;
}

.cb-phero__spec dd {
	margin: 0.2rem 0 0;
	color: var(--cb-primary, #151257);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Compatibilidad */

.cb-phero__compat {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border: 1px solid #ecebf5;
	border-left: 3px solid var(--cb-primary, #151257);
	border-radius: 12px;
	background: #f6f5ff;
}

.cb-phero .cb-phero__compat-titulo {
	margin: 0 0 0.25rem;
	color: var(--cb-primary, #151257);
	font-size: 1rem;
	font-weight: 700;
}

.cb-phero .cb-phero__compat-texto {
	margin: 0;
	color: #4b5563;
	font-size: 0.92rem;
	line-height: 1.55;
}

.cb-phero .cb-phero__compat-enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.55rem;
	color: var(--cb-primary, #151257);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-phero__compat-enlace svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Acciones: WhatsApp ocupa el ancho sobrante; la llamada, el suyo. */

.cb-phero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
}

.cb-phero__acciones .cb-button--primary {
	flex: 1 1 15rem;
}

.cb-phero__acciones .cb-button--secondary-on-light {
	flex: 0 1 auto;
	min-width: 9rem;
}

/* Prueba social */

.cb-phero .cb-phero__prueba {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: #4b5563;
	font-size: 0.88rem;
}

.cb-phero__estrella {
	color: #f5a400;
	font-size: 1rem;
}

.cb-phero__separador {
	color: #c8ccd6;
}

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

	.cb-phero__imagen {
		max-height: 320px;
	}
}

@media (max-width: 620px) {
	/* La foto no debe empujar el nombre y el precio fuera de la primera pantalla. */
	.cb-phero__imagen {
		max-height: 240px;
	}

	.cb-phero__specs,
	.cb-phero__specs--n3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Con tres datos, el último ocupa la fila entera en vez de dejar un hueco. */
	.cb-phero__specs--n3 .cb-phero__spec:last-child {
		grid-column: 1 / -1;
	}

	.cb-phero__acciones {
		flex-direction: column;
	}

	/* En columna, el flex-basis de escritorio se volvería altura: se anula. */
	.cb-phero__acciones .cb-button,
	.cb-phero__acciones .cb-button--primary,
	.cb-phero__acciones .cb-button--secondary-on-light {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Migas de pan: la regla que evitaba que se montaran en el celular pasó a
   style.css (2026-10-01), porque las categorías tienen el mismo problema. */

/* ============================================================
   FRANJA DE CONFIANZA
   Es el componente .cb-datos-bar de servicios.css, sin cambios. Solo se
   le agrega la línea superior: aquí viene después de un hero blanco, no
   de uno oscuro, y sin ella las dos piezas se funden.
   ============================================================ */

.cb-datos-bar--producto {
	border-top: 1px solid #eef0f5;
}

/* En cuatro columnas, «Entrega en 30 a 60 min» dejaba «min» sola en la
   segunda línea. Equilibrado, parte como «Entrega en / 30 a 60 min». */
.cb-datos-bar--producto .cb-dato__valor {
	text-wrap: balance;
}

/* En tableta, servicios.css las apila en una columna desde 768 px y, por
   encima, cuatro columnas dejan el texto en 130 px. Dos por fila en ese tramo. */
@media (min-width: 621px) and (max-width: 1080px) {
	.cb-datos-bar--producto .cb-datos-bar__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem;
	}
}

/* En el celular, cuatro cajas apiladas medían más de 500 px entre el hero y
   la compatibilidad. Aquí pasan a una sola tarjeta con filas divididas. */
@media (max-width: 620px) {
	.cb-datos-bar--producto {
		padding: 1.25rem 0;
	}

	.cb-datos-bar--producto .cb-datos-bar__grid {
		gap: 0;
		border: 1px solid #eef0f5;
		border-radius: 16px;
		background: #f8fafc;
		overflow: hidden;
	}

	.cb-datos-bar--producto .cb-dato {
		align-items: flex-start;
		gap: 0.85rem;
		padding: 0.9rem 1rem;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.cb-datos-bar--producto .cb-dato + .cb-dato {
		border-top: 1px solid #eef0f5;
	}

	.cb-datos-bar--producto .cb-dato__icono {
		width: 40px;
		height: 40px;
	}

	.cb-datos-bar--producto .cb-dato__icono svg {
		width: 20px;
		height: 20px;
	}

	.cb-datos-bar--producto .cb-dato__valor {
		margin-bottom: 0.1rem;
		font-size: 0.98rem;
	}

	.cb-datos-bar--producto .cb-dato__texto {
		display: block;
		font-size: 0.84rem;
		line-height: 1.45;
	}
}

/* Compatibilidad (.cb-pcompat): pasó a servicios.css el 2026-10-01, porque
   la usa también la página de categoría. */

/* ============================================================
   FICHA TÉCNICA
   Es el componente .cb-ficha de servicios.css (páginas de vehículo), sin
   cambios de diseño. Aquí solo va lo que la ficha de producto agrega: el
   pie de aclaraciones, el enlace de WhatsApp del consejo y el ancla.
   ============================================================ */

.cb-ficha--producto {
	scroll-margin-top: 96px;
}

.cb-ficha--producto .cb-ficha__tabla tfoot td {
	padding-top: 12px;
	padding-bottom: 14px;
	background: #ffffff;
	color: #6b7280;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.5;
}

/* El pie no debe crecer cuando la tabla se estira a la altura de la columna. */
.cb-ficha--producto .cb-ficha__tabla tfoot tr {
	height: 1px;
}

.cb-ficha--producto .cb-pficha__enlace {
	color: var(--cb-primary, #151257);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-ficha--producto .cb-pficha__foto {
	margin-top: 12px;
}

@media (max-width: 620px) {
	/* servicios.css deja 24 px a los lados: en el celular la etiqueta se partía en tres líneas. */
	.cb-ficha--producto .cb-ficha__tabla th,
	.cb-ficha--producto .cb-ficha__tabla td {
		padding: 13px 16px;
		font-size: 0.9rem;
	}
}

/* Instalación (.cb-pinstal): pasó a servicios.css el 2026-10-01, porque
   la usa también la página de categoría. */

/* ============================================================
   DESCRIPCIÓN
   Texto largo del catálogo, ya limpio (lib/descripcion.php): solo trae
   párrafos, títulos h3-h6, listas, tablas, énfasis y enlaces. Columna de
   lectura de unos 70 caracteres; el título va a la izquierda, como en la
   ficha técnica, para no romper la grilla de la página.
   ============================================================ */

.cb-pdesc {
	padding: clamp(2.75rem, 5.5vw, 4.75rem) 0;
	background: #ffffff;
	color: var(--cb-dark, #10131c);
	font-family: var(--cb-font, "Poppins", sans-serif);
	scroll-margin-top: 96px;
}

.cb-pdesc__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr);
	gap: clamp(1rem, 4.5vw, 4.5rem);
	align-items: start;
}

.cb-pdesc .cb-pdesc__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-pdesc__texto {
	max-width: 70ch;
	color: #374151;
	font-size: 1rem;
	line-height: 1.75;
}

.cb-pdesc .cb-pdesc__texto > * {
	margin: 1rem 0 0;
}

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

.cb-pdesc .cb-pdesc__texto h3,
.cb-pdesc .cb-pdesc__texto h4,
.cb-pdesc .cb-pdesc__texto h5,
.cb-pdesc .cb-pdesc__texto h6 {
	margin-top: 1.75rem;
	color: var(--cb-primary, #151257);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.cb-pdesc .cb-pdesc__texto h3 {
	font-size: 1.2rem;
}

.cb-pdesc .cb-pdesc__texto h4 {
	font-size: 1.05rem;
}

.cb-pdesc .cb-pdesc__texto h5,
.cb-pdesc .cb-pdesc__texto h6 {
	margin-top: 1.25rem;
	font-size: 0.98rem;
}

/* Un título pegado al siguiente bloque: se lee como su encabezado. */
.cb-pdesc .cb-pdesc__texto :is(h3, h4, h5, h6) + * {
	margin-top: 0.5rem;
}

.cb-pdesc .cb-pdesc__texto strong {
	color: #1f2937;
	font-weight: 600;
}

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

.cb-pdesc .cb-pdesc__texto ul,
.cb-pdesc .cb-pdesc__texto ol {
	padding-left: 1.2rem;
}

.cb-pdesc .cb-pdesc__texto li + li {
	margin-top: 0.4rem;
}

.cb-pdesc .cb-pdesc__texto li::marker {
	color: var(--cb-accent, #ff3b12);
}

/* Las tablas que traen algunas descripciones: mismo aspecto que la ficha. */
.cb-pdesc .cb-pdesc__texto table {
	width: 100%;
	border: 1px solid rgba(21, 18, 87, 0.1);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 0.92rem;
	line-height: 1.5;
}

.cb-pdesc .cb-pdesc__texto th,
.cb-pdesc .cb-pdesc__texto td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid rgba(21, 18, 87, 0.07);
	text-align: left;
	vertical-align: top;
}

.cb-pdesc .cb-pdesc__texto thead th {
	background: #f6f5ff;
	color: var(--cb-primary, #151257);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cb-pdesc .cb-pdesc__texto tbody tr:last-child td,
.cb-pdesc .cb-pdesc__texto tbody tr:last-child th {
	border-bottom: 0;
}

.cb-pdesc .cb-pdesc__texto tbody td:first-child {
	width: 42%;
	color: #5b6270;
	font-weight: 600;
}

/* «Ver descripción completa»: el mismo patrón que «Ver los otros N vehículos». */

.cb-pdesc__mas {
	margin-top: 1rem;
}

.cb-pdesc__mas > .cb-pdesc__texto {
	margin-top: 1.25rem;
}

.cb-pdesc__mas-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--cb-primary, #151257);
	font-size: 0.95rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-pdesc__mas-boton::-webkit-details-marker {
	display: none;
}

.cb-pdesc__mas-boton svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.cb-pdesc__mas-cerrar,
.cb-pdesc__mas[open] .cb-pdesc__mas-abrir {
	display: none;
}

.cb-pdesc__mas[open] .cb-pdesc__mas-cerrar {
	display: inline;
}

.cb-pdesc__mas[open] .cb-pdesc__mas-boton svg {
	transform: rotate(180deg);
}

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

@media (max-width: 620px) {
	.cb-pdesc__texto {
		font-size: 0.96rem;
		line-height: 1.7;
	}

	.cb-pdesc .cb-pdesc__texto th,
	.cb-pdesc .cb-pdesc__texto td {
		padding: 0.6rem 0.75rem;
		font-size: 0.88rem;
	}
}

/* ============================================================
   ALTERNATIVAS — «Otras baterías de caja X»
   Sección y tarjetas de la home (.cb-products, .cb-product-card). Aquí solo
   se iguala el ritmo de la ficha (espaciado y tamaño del título, que en la
   home es de portada). La línea de datos de la tarjeta (.cb-product-card__specs)
   está en home.css desde el 2026-10-01, junto al resto de la tarjeta.
   ============================================================ */

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

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

/* En el celular, la home apila las tarjetas: tres medían casi 1.900 px al
   final de la ficha. Aquí pasan a un carrusel que se desliza con el dedo; la
   siguiente tarjeta se asoma para que se note que hay más. Llega de borde a
   borde de la pantalla (el contenedor deja 14 px a cada lado). */
@media (max-width: 620px) {
	.cb-palt .cb-products__grid {
		grid-auto-columns: 78%;
		grid-auto-flow: column;
		grid-template-columns: none;
		gap: 14px;
		margin-inline: -14px;
		padding: 2px 14px 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 14px;
		scroll-snap-type: x mandatory;
	}

	.cb-palt .cb-product-card {
		scroll-snap-align: start;
	}

	/* Deslizando, la tarjeta no debe saltar como en el hover de escritorio. */
	.cb-palt .cb-product-card:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cb-pdesc__mas-boton svg,
	.cb-pcompat .cb-pcompat__chip,
	.cb-pcompat__mas-boton svg {
		transition: none;
	}

	.cb-pcompat .cb-pcompat__chip:hover,
	.cb-pcompat .cb-pcompat__chip:focus-visible {
		transform: none;
	}
}