/* ============================================================================
 * tema-v2 / home.css  —  Fase 7, PR-7.2 (home: hero/carruseles + CARD de producto)
 * ----------------------------------------------------------------------------
 * El centro del demo. Dos piezas:
 *   (A) CARD DE PRODUCTO (.card-item-carousel) — componente REUTILIZABLE: se usa
 *       en home, catálogo/búsqueda (7.3), ficha (7.4), carrito, checkout, wishlist
 *       y FAQ. Restilarla aquí cae en todos esos sitios (consistencia).
 *   (B) HERO (banners Bootstrap-carousel) + títulos de sección de carrusel.
 *
 * OVERRIDE-FIRST: cargado de último (tras tokens/componentes/marco-global) → gana
 * la cascada. BARANDAS: 0 cambios de markup/JS. Hooks intactos — el corazón de
 * wishlist (toggle `fa-heart`/`fa-heart-o` + `text-danger`/`text-black-50` que lee
 * `addWishlistCarousel`), `#wishlist-{id}`, `addToCart`/`registerProductToCart`,
 * `#btn-add-{id}`, Slick (`.slick-*`) y los links a `DetalleProducto`. Sólo forma,
 * sombra y micro-interacción. Logos/imágenes/textos: intactos.
 * ========================================================================== */

/* ===========================================================================
 * (A) CARD DE PRODUCTO reutilizable  (.card-item-carousel)
 * ========================================================================= */

/* Marco moderno: radio de card + borde suave + sombra + elevación al hover.
 * (Hoy `.card-item-carousel` no tiene regla propia → sólo .card de Bootstrap.) */
.card-item-carousel {
	border: 1px solid var(--gris-200);
	border-radius: var(--radio);
	box-shadow: var(--sombra-card);
	background-color: var(--blanco);
	overflow: hidden;
	transition: transform var(--transicion), box-shadow var(--transicion),
		border-color var(--transicion);
}
.card-item-carousel:hover {
	transform: translateY(-4px);
	box-shadow: var(--sombra-card-hover);
	border-color: var(--gris-100);
}

/* Título del producto: hover azul de marca (vence el `.text-bosch !important`). */
.card-item-carousel .text-titulo-producto {
	transition: color var(--transicion);
}
.card-item-carousel .text-titulo-producto:hover {
	color: var(--bosch-azul) !important;
}

/* Corazón de wishlist: micro-interacción al hover. NO se tocan las clases que el
 * JS intercambia (`fa-heart`/`fa-heart-o`, `text-danger`/`text-black-50`). */
.card-item-carousel .btn-wishlist {
	transition: transform var(--transicion), color var(--transicion);
}
.card-item-carousel .btn-wishlist:hover {
	transform: scale(1.18);
}

/* Botón "agregar al carrito" (icono): redondeo consistente + hover relleno suave. */
.card-item-carousel .btn-delete-carrito {
	border-radius: var(--radio-btn);
	transition: background-color var(--transicion), box-shadow var(--transicion);
}
.card-item-carousel .btn-delete-carrito:hover {
	background-color: var(--gris-100);
	box-shadow: var(--sombra-sm);
}

/* ===========================================================================
 * (B) Títulos de sección de carrusel  ("Productos destacados", etc.)
 * ========================================================================= */

/* Divisor bajo el título: groove gris/azul → barra azul de marca RECTA.
 * (No lleva border-radius: al tener sólo borde superior, el radio lo curvaría
 *  en un arco — feedback de Víctor: la línea recta se ve mejor.) */
.border-titulo {
	border-top: 3px solid var(--bosch-azul) !important;
	max-width: 96px !important;
}

/* ===========================================================================
 * (C) HERO — carrusel principal de banners (#carouselExampleControls)
 *     Sólo el marco del banner contenido (no se tocan las imágenes).
 * ========================================================================= */

/* Redondeo + sombra del banner (clip en .carousel-inner para NO recortar los
 * controles prev/next que van por fuera). */
#carouselExampleControls .carousel-inner {
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra-card);
}

/* Indicadores (puntos) como pills de marca. */
#carouselExampleControls .carousel-indicators li {
	border-radius: var(--radio-pill);
	height: 6px;
	transition: background-color var(--transicion), width var(--transicion), opacity var(--transicion);
}
#carouselExampleControls .carousel-indicators li.active {
	background-color: var(--bosch-azul);
	width: 26px;
}