@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg-cream: #FAF7F2;
  --bg-card: #F3EDE2;
  --gold: #C5A059;
  --gold-dark: #AD8741;
  --gold-light: #DFC286;
  --text-black: #111111;
  --text-muted: #5A554C;
}

html,
body {
  scroll-behavior: smooth;
  background-color: var(--bg-cream);
  color: var(--text-black);
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
}

.font-serif-luxury {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Scrollbar elegante */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #FAF7F2;
}

::-webkit-scrollbar-thumb {
  background: #D5C7B2;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #C5A059;
}

/* Encuadre limpio del banner principal sin marcas en las esquinas */
.hero-banner-img {
  object-fit: cover;
  object-position: 82% 20%;
  transform: scale(1.03);
}

/* Video del banner principal: totalmente responsivo con el rostro enfocado */
.hero-banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* En móvil, recorta el lado izquierdo del video para ocultar la marca de agua
   (Kling AI) sobre el hombro de la modelo, manteniendo el rostro anclado al
   lado derecho. No se modifica el encuadre de escritorio. */
@media (max-width: 639px) {
  .hero-banner-video {
    object-position: 100% 50%;
    transform: scale(1.12);
    transform-origin: 100% 50%;
  }

  /* Aclara la zona central/derecha del overlay oscuro para que el rostro de la
     modelo no quede en sombra en móvil, conservando el lado izquierdo oscuro
     para mantener la legibilidad del texto. Solo aplica en pantallas pequeñas. */
  #inicio .bg-gradient-to-r {
    background-image: linear-gradient(to right,
        #0f0d0c 0%,
        rgba(15, 13, 12, 0.7) 32%,
        rgba(15, 13, 12, 0.25) 50%,
        rgba(15, 13, 12, 0) 70%);
  }
}

/* Menú desplegable */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-group:hover .dropdown-menu,
.dropdown-group:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Tarjetas de categoría */
.category-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(17, 17, 17, 0.12);
}

.category-card.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 10px 22px -6px rgba(197, 160, 89, 0.28);
}

/* Tarjetas de producto */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(17, 17, 17, 0.1);
}

.product-card:hover .product-img {
  transform: scale(1.04);
}

.product-img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animación de carrito lateral */
.cart-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.open {
  transform: translateX(0);
}

/* Modales (Producto e Información Legal) */
.modal-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  transform: scale(0.95) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.open .modal-card {
  transform: scale(1) translateY(0);
}

/* Acordeón de Preguntas Frecuentes */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding-bottom 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 360px;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

/* Estados de error del formulario de compra */
.campo-error {
  display: none;
  font-size: 11px;
  line-height: 1.35;
  color: #B42318;
  margin-top: 4px;
}

.campo-error.visible {
  display: block;
}

input.campo-invalido,
select.campo-invalido,
textarea.campo-invalido {
  border-color: #C0392B !important;
  background-color: #FDF3F2 !important;
}