/* =========================================================
   Carruseles de productos del home (inc/home-carousels.php).
   Bandas de color alternas y cards blancas redondeadas, con la
   paleta del tema. Mobile first.
   ========================================================= */

.home-carousel {
  overflow: hidden;
}

.home-carousel--rosa {
  --carousel-bg: var(--rosa-claro);
  --carousel-media: #ffffff;
}


.home-carousel--lila {
  --carousel-bg: var(--lila);
  --carousel-media: var(--rosa-claro);
}

.home-carousel {
  background: var(--carousel-bg);
}

/* En la banda rosa la imagen va en menta suave, para separarla del fondo. */
.home-carousel--rosa .home-card__media {
  background: #eef7f3;
}

/* ---------- Encabezado ---------- */
.home-carousel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.75rem;
}

.home-carousel__heading {
  min-width: 0;
}

.home-carousel__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--tinta);
}

/* Pincelada rosa debajo del título, alineada a la izquierda. */
.home-carousel__title::after {
  content: "";
  display: block;
  width: 7.5rem;
  height: 0.75rem;
  margin-top: 0.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c18-5 34-6 52-3s36 4 62-3' fill='none' stroke='%23F2A6B6' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M10 10c20-3 44-3 66-1' fill='none' stroke='%23F2A6B6' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Sobre el rosa claro la pincelada rosa casi no se ve: va en lila. */
.home-carousel--rosa .home-carousel__title::after {
  filter: hue-rotate(250deg) saturate(0.8);
}

.home-carousel__subtitle {
  max-width: 34rem;
  margin: 0.5rem 0 0;
  color: var(--texto);
}

.home-carousel__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.home-carousel__all {
  margin-right: 0.5rem;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.home-carousel__all:hover {
  text-decoration-color: var(--tinta);
}

.home-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.home-carousel__arrow svg {
  width: 18px;
  height: 18px;
}

.home-carousel__arrow:hover,
.home-carousel__arrow:focus-visible {
  background: var(--rosa);
}

.home-carousel__arrow:active {
  transform: scale(0.94);
}

.home-carousel__arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Con pocos productos no hay a dónde deslizar: sin flechas. */
.home-carousel__arrow.swiper-button-lock {
  display: none;
}

/* ---------- Carrusel ---------- */
/* Deja ver el borde de la card siguiente y la sombra sin recortarla. */
.home-carousel__swiper {
  overflow: visible;
}

.home-carousel__swiper .swiper-slide {
  height: auto;
}

/* ---------- Card ---------- */
.home-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.08);
}

.home-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin: 0.6rem 0.6rem 0;
  overflow: hidden;
  background: var(--carousel-media);
  border-radius: var(--radius-sm);
}

/* .home-carousel delante por especificidad: WooCommerce le pone height:auto
   a las imágenes de producto. */
.home-carousel .home-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.home-card:hover .home-card__img {
  transform: scale(1.04);
}

.home-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.7rem;
  background: var(--rosa);
  border-radius: 999px;
  color: var(--tinta);
  font-size: 0.75rem;
  font-weight: 800;
}

.home-card__badge--out {
  background: #ffffff;
}

.home-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 1.1rem 1.15rem;
}

.home-card__category {
  align-self: flex-start;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0.65rem;
  background: var(--menta);
  border-radius: 999px;
  color: var(--tinta);
  font-size: 0.72rem;
  font-weight: 700;
}


.home-card__title {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.home-card__title a {
  color: var(--tinta);
  text-decoration: none;
}

/* Toda la card es clickeable a través del título. */
.home-card {
  position: relative;
}

.home-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.home-card__title a:focus-visible {
  outline: none;
}

.home-card:has(.home-card__title a:focus-visible) {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.home-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.home-card__price {
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 800;
}

.home-card__price del {
  margin-right: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.home-card__price ins {
  text-decoration: none;
}

/* Mismo botón rosa del tema (el de rincon.css solo aplica dentro de las
   páginas de WooCommerce). Encima del enlace que cubre la card, para que el
   botón sea su propio clic. */
.home-carousel .home-card__cart {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--rosa);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.home-carousel .home-card__cart:hover,
.home-carousel .home-card__cart:focus-visible {
  background: var(--menta-medio);
  color: var(--tinta);
}

/* WooCommerce agrega "Ver carrito" al lado después de agregar: no entra en la card. */
.home-card .added_to_cart {
  display: none;
}

.home-carousel .home-card__cart.loading {
  opacity: 0.6;
}

.home-carousel .home-card__cart.added::after {
  content: " ✓";
}

@media (min-width: 560px) {
  .home-carousel__header {
    margin-bottom: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-card,
  .home-card__img,
  .home-carousel__arrow {
    transition: none;
  }

  .home-card:hover,
  .home-card:hover .home-card__img {
    transform: none;
  }
}

/* ---------- Barra de sellos (va justo arriba de los carruseles) ----------
   Más angosta: una tarjeta centrada en lugar de la grilla de borde a borde
   de main.css. El padding se ajusta acá porque el de .home-section de
   rincon.css (secciones grandes) le dejaba mucho aire arriba y abajo. */
.home-trust.home-section {
  padding: 2.5rem 0 0;
}

.home-trust .container {
  max-width: 960px;
  padding-inline: 1rem;
}

.home-trust__grid {
  overflow: hidden;
  background: #ffffff;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* Líneas internas suaves entre sellos; sin borde exterior (lo da la tarjeta). */
.home-trust__item {
  padding: 1.4rem 0.75rem;
  border-color: var(--rosa-claro);
}

.home-trust__icon {
  width: 26px;
  height: 26px;
}

.home-trust__label {
  color: var(--texto);
}

/* La sección de abajo tiene el mismo fondo rosa: menos aire entre las dos. */
.home-trust + .home-carousel--rosa {
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .home-trust.home-section {
    padding-top: 3rem;
  }
}

/* ---------- Barra animada (entre Colección destacada y las categorías) ----------
   Franja rosa redondeada del mismo ancho que la tarjeta de sellos, en vez
   de la banda de borde a borde. El texto se recorta en las puntas
   redondeadas (overflow: hidden). */
.home-marquee.home-section {

  padding: 0.85rem 0;
  box-shadow: var(--shadow-soft);
}

@media (min-width: 960px) {
  .home-marquee.home-section {
    margin-inline: auto;
  }
}

/* Debajo de la franja, el carrusel arranca con su propio aire. */
.home-marquee + .home-carousel {
  padding-top: 3rem;
}