@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Bruno+Ace+SC&display=swap");

:root {
  --negro: #0a0a0a;
  --blanco: #ffffff;
  --gris-claro: #f4f4f4;
  --gris-borde: #e2e2e2;
  --gris-texto: #8a8a8a;
  --rojo: #e10600;
  --rojo-oscuro: #b30500;
  --error: #b3261e;
  --exito: #2e7d32;
  --radio: 8px;
  --radio-chico: 4px;
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fuente-titulo: "Bruno Ace SC", var(--fuente);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--blanco);
  color: var(--negro);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- Banner deslizante --- */

.marquee {
  background: var(--blanco);
  overflow: hidden;
  white-space: nowrap;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--gris-borde);
}

.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marquee-scroll 23.4s linear infinite;
}

.marquee-item {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  color: var(--negro);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0 1.5rem;
  flex-shrink: 0;
}

.marquee-sep {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  color: var(--negro);
  opacity: 0.6;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* --- Nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--negro);
  color: var(--blanco);
  border-bottom: 1px solid #222;
}

.nav-interior {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-links a:hover {
  color: var(--rojo);
}

.nav-carrito {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-carrito-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* --- Hero --- */

.hero {
  position: relative;
  background: var(--negro);
  color: var(--blanco);
  padding: 7.8rem 1.25rem;
  text-align: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.35);
  z-index: 1;
}

/* Tapa la marca de agua que dejan los videos generados por IA, típicamente
   en la esquina inferior derecha. Mismo color que el fondo del hero para
   que no se note el recuadro. Achicado al mínimo necesario para tapar solo
   el logo, no un cuadro grande. */
.hero-marca-agua-tapa {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 20px;
  background: var(--negro);
  z-index: 1;
}

.hero-contenido {
  position: relative;
  z-index: 2;
}

.hero-logo {
  width: min(180px, 40vw);
  margin: 0 auto 1.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: 1rem;
}

.hero p {
  color: #ddd;
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto 2rem;
}

.boton-cta {
  display: inline-block;
  background: var(--rojo);
  color: var(--blanco);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.9rem 2rem;
  border-radius: var(--radio-chico);
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.boton-cta:hover {
  background: var(--rojo-oscuro);
}

/* --- Confianza --- */

.confianza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 3rem 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.confianza-item strong {
  display: block;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.confianza-item span {
  color: var(--gris-texto);
  font-size: 0.85rem;
}

/* --- Grilla de productos --- */

.seccion {
  padding: 2rem 1.25rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.producto-card {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.producto-card-imagenes {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--gris-claro);
  overflow: hidden;
}

.producto-card-imagenes img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.producto-card-imagenes img:nth-child(2) {
  opacity: 0;
}

.producto-card-imagenes:hover img:nth-child(2) {
  opacity: 1;
}

.producto-card-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.producto-card-info h3 {
  font-size: 0.95rem;
  margin: 0;
}

.producto-precio {
  font-weight: 800;
  font-size: 1.1rem;
}

/* --- Muestras de color disponibles --- */

.producto-colores {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 0 2px #fff;
}

.producto-detalle-colores {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem;
}

.producto-detalle-colores .color-swatch {
  width: 26px;
  height: 26px;
}

.color-swatch-boton {
  background: none;
  border: none;
  padding: 3px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.15s ease;
}

.color-swatch-boton:hover {
  box-shadow: 0 0 0 2px var(--gris-borde);
}

.color-swatch-boton--activo {
  box-shadow: 0 0 0 2px var(--negro);
}

.producto-detalle-colores-titulo {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  width: 100%;
  margin-bottom: 0.15rem;
}

/* Selector de colores en el formulario del panel admin */
.paleta-colores-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 0.5rem;
}

.color-swatch-opcion {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  cursor: pointer;
}

.color-swatch-opcion input {
  width: auto;
}

.badge-sin-stock {
  display: inline-block;
  background: var(--gris-claro);
  color: var(--gris-texto);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-chico);
  width: fit-content;
}

.producto-card-info button,
.producto-card-info a.boton-secundario {
  margin-top: auto;
  background: var(--negro);
  color: var(--blanco);
  border: none;
  padding: 0.7rem 1rem;
  border-radius: var(--radio-chico);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: center;
}

.producto-card-info button:hover,
.producto-card-info a.boton-secundario:hover {
  background: var(--rojo);
}

.producto-card-info button:disabled {
  background: var(--gris-borde);
  color: var(--gris-texto);
  cursor: not-allowed;
}

/* --- Footer --- */

.footer {
  background: var(--negro);
  color: #999;
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: 0.85rem;
}

/* --- Pantalla de carga: logo "dibujándose" con un barrido --- */

.pantalla-carga {
  position: fixed;
  inset: 0;
  background: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.pantalla-carga.pantalla-carga--lista {
  opacity: 0;
  pointer-events: none;
}

/* clip-path en vez de animar el gradient de una máscara: se anima con
   consistencia en todos los navegadores modernos. Arranca completamente
   tapado (inset derecho al 100%) y se va revelando de izquierda a derecha,
   dando el efecto de que el logo se "dibuja" solo. */
.pantalla-carga-logo {
  width: min(260px, 60vw);
  clip-path: inset(0 100% 0 0);
  animation: pantalla-carga-dibujar 2.925s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes pantalla-carga-dibujar {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* --- Formularios genéricos (checkout, admin) --- */

label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin: 1rem 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

input,
textarea,
select {
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--gris-borde);
  border-radius: var(--radio-chico);
  font-size: 1rem;
  width: 100%;
  font-family: var(--fuente);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--negro);
}

button {
  font-family: var(--fuente);
}

.mensaje {
  padding: 0.75rem 1rem;
  border-radius: var(--radio-chico);
  margin: 0.75rem 0;
  font-size: 0.9rem;
}

.mensaje.error {
  background: #fbeceb;
  color: var(--error);
  border-left: 3px solid var(--error);
}

.mensaje.exito {
  background: #e9f5ea;
  color: var(--exito);
  border-left: 3px solid var(--exito);
}

.oculto {
  display: none !important;
}

/* --- Carrito / checkout --- */

.carrito-fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gris-borde);
}

.carrito-fila img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radio-chico);
  background: var(--gris-claro);
}

.carrito-fila-info {
  flex: 1;
}

.carrito-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: 800;
  padding-top: 1rem;
}

.metodo-pago-opcion {
  border: 1.5px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 1rem;
  margin-top: 0.75rem;
  cursor: pointer;
}

.metodo-pago-opcion.activo {
  border-color: var(--negro);
  background: var(--gris-claro);
}

/* --- Panel admin (mismo espíritu que el resto de mis proyectos) --- */

.admin-body {
  background: var(--gris-claro);
}

.admin-header {
  background: var(--negro);
  color: var(--blanco);
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gris-borde);
}

.card h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.tabla-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla-admin th,
.tabla-admin td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--gris-borde);
}

.tabla-admin-wrap {
  overflow-x: auto;
}

.boton-secundario {
  background: var(--blanco);
  color: var(--negro);
  border: 1.5px solid var(--negro);
}

.boton-secundario:hover {
  background: var(--gris-claro);
}

.boton-peligro {
  background: var(--blanco);
  color: var(--error);
  border: 1.5px solid var(--error);
}

.boton-peligro:hover {
  background: #fbeceb;
}

.login-card {
  max-width: 340px;
  margin: 4rem auto;
}

/* --- Responsive --- */

@media (max-width: 640px) {
  .nav-links {
    display: none;
  }

  .hero {
    padding: 5.4rem 1.25rem;
  }
}