/* --- ESTILOS DE UI (Independientes del Tema) --- */
/* Estas clases no usan variables de tema, por lo que son seguras de cargar de forma global */

/* Animación para que los botones del carrusel aparezcan con retraso */
@keyframes fade-in-buttons {
  to {
    opacity: 1;
  }
}

/* --- MARQUESINA (MARQUEE) --- */
@keyframes marquee-scroll {
  0% {
    transform: translateX(
      100vw
    ); /* Empieza fuera de la pantalla a la derecha */
  }
  100% {
    transform: translateX(
      -100%
    ); /* Termina cuando todo el texto ha salido por la izquierda */
  }
}

.marquee-content {
  display: inline-block;
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
  animation: marquee-scroll 20s linear
    infinite; /* 20 segundos, velocidad constante, infinito */
  will-change: transform; /* Optimización de rendimiento para el navegador */
  padding-left: 1rem; /* Un pequeño espacio inicial */
}

/* --- ESTILOS PARA PASTILLAS DE COLOR (SWATCHES) --- */
.color-swatch {
  width: 2rem; /* 32px - Más grande que antes (24px) */
  height: 2rem;
  border-radius: 50%; /* Círculo perfecto */
  border: 2px solid
    #ffffff; /* Borde blanco más grueso para resaltar el color interior */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 4px
    rgba(
      0,
      0,
      0,
      0.2
    ); /* Sombra compuesta: anillo fino oscuro + sombra de elevación */
  cursor: pointer;
  /* Blinda contra el "cursor de texto" (caret) y la selección al hacer click */
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: box-shadow 0.2s ease;
}

/* El círculo de color en sí (hereda el color dinámico de Twind: bg-{color}).
   Se separa del contenedor para poder agrandarse en hover SIN escalar el tooltip. */
.color-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease; /* Efecto "rebote" al crecer */
}

.color-swatch:hover::before {
  transform: scale(1.4); /* Crece un 40% al pasar el mouse (más notorio) */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 10; /* Se pone por encima de sus vecinos */
}

/* Tooltip personalizado: reemplaza al atributo `title` nativo del navegador
   (ese tooltip del navegador era el "cursor titilante" que aparecía al hacer
   click en la pastilla). Solo se muestra al pasar el mouse, con el nombre
   del color en español (data-label). */
.color-swatch::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  opacity: 0;
  pointer-events: none; /* El tooltip no bloquea el hover de las vecinas */
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 30; /* Por encima de todo dentro de la tarjeta */
}

.color-swatch:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/*
 * Clase de utilidad para forzar el ajuste de línea en palabras largas.
 * Ideal para URLs, hashes o cualquier texto sin espacios que pueda desbordar su contenedor.
 */
.break-words {
  overflow-wrap: break-word; /* Propiedad estándar */
  word-break: break-word; /* Alternativa/fallback para mayor compatibilidad */
}

/* --- Animación para los enlaces del Nav --- */
.nav-link {
  position: relative; /* Necesario para el pseudo-elemento */
  text-decoration: none; /* Quitamos el subrayado por defecto */
  color: inherit; /* Hereda el color del texto del Nav */
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Posición justo debajo del texto */
  left: 50%; /* Empieza en el centro */
  width: 0; /* Empieza sin ancho */
  height: 2px; /* Grosor del subrayado */
  background-color: currentColor; /* Usa el color del texto actual */
  transition: all 0.3s ease-in-out; /* Animación suave */
  transform: translateX(-50%); /* Mantiene el centrado mientras crece */
}

.nav-link:hover::after {
  width: 100%; /* Al pasar el cursor, el ancho crece al 100% */
}

/* --- Enlace del nombre del modelo (Is1ModelGroup) --- */
.model-name-link {
  text-decoration: none; /* Sin subrayado por defecto */
  color: inherit; /* Hereda el color blanco del título */
  cursor: pointer;
  position: relative;
}

.model-name-link::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Justo debajo del texto */
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.2s ease-in-out;
}

.model-name-link:hover::after,
.model-name-link:focus-visible::after {
  width: 100%;
}

.model-name-link:hover {
  text-decoration: underline;
  text-decoration-color: inherit;
}

/* --- TÍTULOS DE SECCIÓN DE LA HOME (Calzados / Indumentaria / Carteras) --- */
/* Píldora con "frosted glass", texto con gradiente animado (usa variables del
   tema) y un destello (shimmer) que cruza periódicamente. */

.section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  padding: 0.6rem 2rem;
  border-radius: 9999px;
  background: var(--frosted-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--frosted-glass-border);
  box-shadow: var(--frosted-glass-shadow);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.section-title:hover {
  transform: translateY(-3px);
  border-color: var(--ring-color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Texto con gradiente animado construido con colores del tema */
.section-title-text {
  position: relative;
  z-index: 2;
  font-size: 1.875rem; /* text-3xl */
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  background-image: linear-gradient(
    90deg,
    var(--text-primary) 0%,
    var(--btn-primary-bg) 25%,
    var(--ring-color) 50%,
    var(--btn-primary-bg) 75%,
    var(--text-primary) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: section-title-flow 8s linear infinite;
}

@keyframes section-title-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Emoji decorativo con un rebote suave */
.section-title-emoji {
  position: relative;
  z-index: 2;
  font-size: 1.5rem;
  animation: section-title-bounce 2.4s ease-in-out infinite;
}

@keyframes section-title-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Destello que cruza la píldora cada ~5s */
.section-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-160%) skewX(-20deg);
  animation: section-title-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes section-title-shimmer {
  0% {
    transform: translateX(-160%) skewX(-20deg);
  }
  50%,
  100% {
    transform: translateX(320%) skewX(-20deg);
  }
}

/* --- PANEL OSCURO FORZADO (PANELOSCURO) --- */
/* Panel semitransparente oscuro con texto blanco en negrita SIEMPRE,
   sin importar el tema claro/oscuro elegido por el usuario.
   Reemplaza a bg-black/70 (que Twind v0.16 NO entiende). */
.paneloscuro {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-weight: 700;
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1rem; /* p-4 */
}

/* Fuerza el blanco en TODO el contenido interno (títulos, listas, links),
   para que el texto nunca dependa del tema del usuario. */
.paneloscuro * {
  color: #ffffff;
}

/* --- PÍLDORA DE PRECIO (PRICE-PILL) --- */
/* Muestra el precio con peso visual y un fondo OSCURO FIJO: así el verde
   del dinero (green-400) contrasta SIEMPRE, incluso si la dueña cambia
   el fondo del sitio a verde algún día. No depende del tema del usuario. */
.price-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background-color: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 1rem;
  padding: 1rem 2.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* El número en sí: verde dinero, grande y en negrita (peso visual). */
.price-amount {
  color: #4ade80; /* green-400 */
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Etiqueta "(base)": significa que es el precio base ("desde"). */
.price-badge {
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}

/* Línea inferior: aclara la moneda (Pesos Argentinos). */
.price-meta {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}