/* ══════════════════════════════════════════════════════
   COSA NOVA · CAPA ELEGANTE (minimalista)
   Se carga después de styles.css y solo ajusta la apariencia.
   Para volver al diseño anterior basta con quitar el <link> de este archivo.
   ══════════════════════════════════════════════════════ */

:root {
  --el-tinta:  #141414;
  --el-texto:  #2b2b2b;
  --el-suave:  #77736d;
  --el-linea:  #e7e4de;
  --el-fondo:  #ffffff;
  --el-papel:  #f6f4f0;
  --el-serif:  'Cormorant Garamond', Georgia, serif;
}

/* ── Base ─────────────────────────────────────────── */
body {
  background: var(--el-fondo) !important;
  color: var(--el-texto);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body::before { display: none !important; }        /* sin patrón de rombos */
section { background: transparent; }
section::before, section::after { background-image: none !important; }

.reveal { transform: translateY(12px); }

/* ── Barra de anuncios y navegación ───────────────── */
#anuncio-bar {
  background: var(--el-tinta) !important;
  border-bottom: 0 !important;
}
#anuncio-bar, #anuncio-bar * { color: #f4f1ea !important; font-weight: 400 !important; letter-spacing: .06em; }

#navbar {
  background: rgba(255,255,255,0.96) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--el-linea) !important;
}
.nav-hamburger {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.nav-user-btn { letter-spacing: .14em; font-weight: 400; }

/* ── Portada ──────────────────────────────────────── */
.hero-panel-cn-texto { background: var(--el-fondo) !important; }
.hero-panel-cn-texto .hero-titulo,
.hero-titulo {
  font-family: var(--el-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.02 !important;
  color: var(--el-tinta) !important;
}
.hero-panel-cn-texto .gold,
.hero-titulo .gold { color: var(--el-suave) !important; font-weight: 500 !important; font-style: italic; }
.hero-sub { color: var(--el-suave) !important; font-weight: 300; }

.hero-trust-cn { gap: 0 !important; border-top: 1px solid var(--el-linea); }
.hero-trust-cn .hero-badge,
.hero-badge {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--el-linea) !important;
  border-radius: 0 !important;
  padding: 14px 8px 14px 0 !important;
}
.hero-badge strong { color: var(--el-tinta) !important; font-weight: 500 !important; letter-spacing: .02em; }
.hero-badge span { color: var(--el-suave) !important; }
.hero-badge-icon { opacity: .7; }

.hero-pedido-custom { border-color: var(--el-linea) !important; color: var(--el-suave) !important; }
.hero-pedido-custom strong { color: var(--el-tinta) !important; font-weight: 500; }

/* ── Botones ──────────────────────────────────────── */
.btn-primary,
.hero-panel-cn-texto .hero-btns .btn-primary,
.btn-carrito,
.btn-pagar,
.btn-co {
  background: var(--el-tinta) !important;
  color: #fff !important;
  border: 1px solid var(--el-tinta) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  transform: none !important;
}
.btn-primary:hover,
.btn-carrito:hover:not(:disabled),
.btn-pagar:hover,
.btn-co:hover { background: #fff !important; color: var(--el-tinta) !important; opacity: 1 !important; }
.btn-carrito svg { width: 15px; height: 15px; }
.btn-carrito:disabled,
.btn-talla-pendiente {
  background: #fff !important;
  color: var(--el-suave) !important;
  border-color: var(--el-linea) !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
}
.btn-wa {
  background: transparent !important;
  color: var(--el-tinta) !important;
  border: 1px solid var(--el-tinta) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
.btn-wa:hover { background: var(--el-tinta) !important; color: #fff !important; }

/* ── Buscador y filtros ───────────────────────────── */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  border-radius: 0 !important;
  border-color: var(--el-linea) !important;
  box-shadow: none !important;
  background: #fff !important;
}
.cat-btn {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--el-suave) !important;
  font-weight: 400 !important;
  letter-spacing: .08em;
}
.cat-btn.activo, .cat-btn.active, .cat-btn:hover {
  color: var(--el-tinta) !important;
  border-bottom-color: var(--el-tinta) !important;
  background: transparent !important;
}

/* ── Tarjetas de producto ─────────────────────────── */
.producto-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.producto-card:hover { transform: none !important; box-shadow: none !important; }
.producto-img-wrap { background: var(--el-papel); overflow: hidden; position: relative; }
.producto-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: var(--el-papel) !important;
  mix-blend-mode: multiply;               /* los fondos blancos de las fotos se funden */
  padding: 6%;
  transition: transform .6s ease;
}
.producto-card:hover .producto-img { transform: scale(1.03); }
.producto-img-placeholder { aspect-ratio: 1 / 1 !important; background: var(--el-papel) !important; color: var(--el-linea) !important; }
.producto-img-overlay { display: none !important; }

.producto-body { padding: 16px 2px 8px !important; text-align: left; }
.producto-cat {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--el-suave) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  margin-bottom: 6px !important;
}
.producto-nom {
  font-family: var(--el-serif);
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--el-tinta) !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}
.producto-precios { margin-bottom: 14px !important; }
.precio-usd {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--el-texto) !important;
  letter-spacing: .02em;
}
.precio-usd span { font-size: 15px !important; font-weight: 400 !important; color: var(--el-texto) !important; }
.precio-usd span:last-child { font-size: 11px !important; color: var(--el-suave) !important; letter-spacing: .1em; }
.producto-card .btn-carrito { padding: 12px !important; margin-top: auto; }

.wishlist-heart {
  background: rgba(255,255,255,.9) !important;
  box-shadow: none !important;
  border: 1px solid var(--el-linea) !important;
  filter: grayscale(1);
}
.wishlist-heart.activo { filter: none; }

.talla-btn, .color-btn {
  border-radius: 0 !important;
  border: 1px solid var(--el-linea) !important;
  background: #fff !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.talla-btn.activo, .talla-btn.active, .talla-btn.seleccionada,
.color-btn.activo, .color-btn.active, .color-btn.seleccionado {
  border-color: var(--el-tinta) !important;
  color: var(--el-tinta) !important;
}

/* ── Ficha de producto (modal) ────────────────────── */
.modal-producto { background: rgba(20,20,20,.55) !important; backdrop-filter: blur(2px) !important; }
.modal-producto-box {
  border-radius: 0 !important;
  max-width: 960px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.18) !important;
}
.modal-producto-close {
  background: transparent !important;
  color: var(--el-tinta) !important;
  font-weight: 300;
  font-size: 28px !important;
  border-radius: 0 !important;
}
.mp-img-wrap { border-radius: 0 !important; background: var(--el-papel) !important; }
.mp-img { mix-blend-mode: multiply; padding: 6%; }
.mp-thumbnails { background: var(--el-papel) !important; padding: 10px 14px !important; gap: 8px !important; }
.mp-thumb { border-radius: 0 !important; border: 1px solid transparent !important; opacity: .6; mix-blend-mode: multiply; }
.mp-thumb.activo, .mp-thumb.active, .mp-thumb:hover { opacity: 1; border-color: var(--el-tinta) !important; }
.mp-info { padding: 48px 44px !important; }
.mp-nom {
  font-family: var(--el-serif) !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--el-tinta) !important;
  margin-bottom: 14px !important;
}
.mp-precios {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--el-linea) !important;
  border-radius: 0 !important;
  padding: 18px 0 0 !important;
  margin: 0 0 22px !important;
}
.mp-precios .precio-usd, .mp-precios .precio-usd span { font-size: 22px !important; color: var(--el-tinta) !important; }
.mp-precios .precio-usd span#mp-moneda { font-size: 12px !important; color: var(--el-suave) !important; letter-spacing: .12em; }
.mp-desc {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--el-suave) !important;
  font-weight: 300;
  white-space: pre-line;
  margin-bottom: 26px !important;
}
.mp-actions { gap: 10px !important; }
.mp-actions .btn-carrito { flex: 1; padding: 16px !important; }
.mp-actions .wishlist-heart { border-radius: 0 !important; }

/* ── Carrito ──────────────────────────────────────── */
.cart-overlay { background: rgba(20,20,20,.35) !important; backdrop-filter: none !important; }
/* La sombra solo con el panel abierto: cerrado se asomaba como una franja
   blanca en el borde derecho de la pantalla. */
.cart-drawer, .mobile-menu { box-shadow: none !important; }
.cart-drawer.abierto, .mobile-menu.activo { box-shadow: -20px 0 60px rgba(0,0,0,.08) !important; }
.cart-header {
  background: #fff !important;
  color: var(--el-tinta) !important;
  border-bottom: 1px solid var(--el-linea) !important;
  padding: 26px 28px !important;
}
.cart-header h3 {
  font-family: var(--el-serif);
  font-weight: 500 !important;
  font-size: 26px !important;
}
.cart-close { color: var(--el-tinta) !important; font-weight: 300; }
.cart-items-list { padding: 8px 28px !important; }
.cart-item { border-bottom: 1px solid var(--el-linea) !important; padding: 20px 0 !important; }
.ci-nom { font-family: var(--el-serif); font-size: 18px !important; font-weight: 500 !important; color: var(--el-tinta) !important; }
.ci-precio { color: var(--el-suave) !important; font-size: 12px !important; }
.ci-btn { border-radius: 0 !important; border-color: var(--el-linea) !important; width: 26px !important; height: 26px !important; font-size: 14px !important; }
.ci-btn:hover { border-color: var(--el-tinta) !important; color: var(--el-tinta) !important; }
.ci-qty { font-weight: 400 !important; }
.ci-total { font-weight: 400 !important; color: var(--el-tinta) !important; }
.cart-footer { background: #fff !important; border-top: 1px solid var(--el-linea) !important; padding: 24px 28px 28px !important; }
.cart-totales div { color: var(--el-suave) !important; letter-spacing: .04em; }
.cart-totales strong { color: var(--el-tinta) !important; font-weight: 500 !important; font-size: 20px !important; }
.cart-totales div:not(:first-child),
.cart-totales div:not(:first-child) * { color: var(--el-suave) !important; font-weight: 400 !important; font-size: 12px !important; }
.btn-pagar { padding: 18px !important; border-bottom-width: 1px !important; }
.cart-badge { background: var(--el-tinta) !important; color: #fff !important; }

/* ── Avisos y botón flotante ──────────────────────── */
.toast {
  background: var(--el-tinta) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
}
.wa-float {
  width: 52px !important; height: 52px !important;
  animation: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}

/* ── Pie de página ────────────────────────────────── */
footer { background: var(--el-tinta) !important; }

/* ── Celular ──────────────────────────────────────── */
@media (max-width: 640px) {
  .producto-nom { font-size: 17px !important; }
  .precio-usd, .precio-usd span { font-size: 14px !important; }
  .producto-card .btn-carrito { font-size: 11px !important; letter-spacing: .12em !important; padding: 11px 6px !important; }
  .mp-info { padding: 28px 22px 32px !important; }
  .mp-nom { font-size: 28px !important; }
  .cart-items-list { padding: 4px 20px !important; }
  .cart-header, .cart-footer { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── Ajustes finos ────────────────────────────────── */
/* Números normales (la serif usa números antiguos y el "1" parece una "ı"). */
body, .producto-nom, .mp-nom, .ci-nom, .hero-titulo, .cart-header h3 { font-variant-numeric: lining-nums; }

/* El corazón de la ficha va junto al botón, no encima de la ×. */
.mp-actions { display: flex; align-items: stretch; }
.mp-actions .wishlist-heart {
  position: static !important;
  width: 54px; height: auto;
  display: flex; align-items: center; justify-content: center;
}

/* Filtro de precio: en Colombia está en USD y confunde; se oculta. */
body.pais-colombia .precio-rango { display: none !important; }
.precio-rango input[type="range"] { accent-color: var(--el-tinta); }
#precio-display { color: var(--el-tinta) !important; font-weight: 400 !important; }
.busqueda-input-wrap input { border-radius: 0 !important; }

/* En el celular la ficha ocupa toda la pantalla y el botón de compra queda siempre a la vista. */
@media (max-width: 640px) {
  .modal-producto { padding: 0 !important; }
  .modal-producto-box { max-height: 100vh !important; height: 100%; }
  .mp-actions {
    position: sticky; bottom: 0; z-index: 5;
    background: #fff;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--el-linea);
  }
}

/* ── Menú lateral ─────────────────────────────────── */
/* Se abría detrás de la barra superior y tapaba Carrito y Productos: ahora va encima. */
.mobile-menu-overlay { z-index: 1150 !important; }
.mobile-menu { z-index: 1200 !important; }
.mobile-menu .mm-icon { display: none !important; }
.mobile-menu a, .mobile-menu-toggle-sub, .mobile-menu-cart-link {
  font-family: var(--el-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--el-tinta) !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px;
}
.mobile-menu-toggle-sub .mobile-menu-chevron { margin-left: auto; }
.mobile-menu a:hover { color: var(--el-suave) !important; padding-left: 0 !important; }
.mobile-menu-submenu a { font-size: 17px !important; color: var(--el-suave) !important; }
.mobile-menu-submenu .mm-generos a { font-family: 'Inter', sans-serif !important; font-size: 12px !important; letter-spacing: .08em; }
.mobile-menu .mobile-menu-wa {
  background: var(--el-tinta) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  justify-content: center !important;
}

/* ── Carga de productos: logo que se llena y palpita ─ */
.loading-productos .loader-spin, .loading-productos p { display: none !important; }
.cargando-logo {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.cl-logo { position: relative; width: 170px; animation: cl-palpita 1.1s ease-in-out .75s infinite; }
.cl-logo img { display: block; width: 100%; height: auto; }
.cl-base { opacity: .12; filter: grayscale(1); }
.cl-lleno {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  animation: cl-llenar .7s cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes cl-llenar { to { clip-path: inset(0 0 0 0); } }
@keyframes cl-palpita { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .cl-logo { animation: none; }
  .cl-lleno { animation: none; clip-path: none; }
}
@media (max-width: 640px) { .cl-logo { width: 130px; } .cargando-logo { min-height: 240px; } }

/* ── Filtro por sexo, mensaje vacío y recuadro final ─ */
.subcat-label { color: var(--el-suave) !important; font-weight: 400 !important; letter-spacing: .18em; font-size: 10px !important; }
.subcat-btn {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  color: var(--el-suave) !important;
  font-weight: 400 !important;
  letter-spacing: .06em;
  padding: 6px 10px !important;
}
.subcat-btn:hover, .subcat-btn.activa {
  background: transparent !important;
  color: var(--el-tinta) !important;
  border-bottom-color: var(--el-tinta) !important;
}
.sin-productos p { font-family: var(--el-serif); font-size: 22px; color: var(--el-suave); }
.patron-rombos { background-image: none !important; }
.cta-box {
  background: var(--el-papel) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cta-box h2 { font-family: var(--el-serif); font-weight: 500 !important; color: var(--el-tinta) !important; }
.cta-box p { color: var(--el-suave) !important; font-weight: 300; }

/* ── Barra de anuncios por país ───────────────────── */
/* <html data-pais> lo fija un script en <head> antes de pintar la página. */
html[data-pais="CO"] #anuncio-bar { display: block !important; }
html[data-pais="CO"] .anuncio-track-ve,
html:not([data-pais="CO"]) .anuncio-track-co { display: none !important; }

/* ── Portada: foto inicial ────────────────────────── */
.hero-img-inicial { opacity: 1; }

/* ── Preguntas frecuentes (solo Colombia) ─────────── */
html:not([data-pais="CO"]) #faq { display: none !important; }
.faq-co { padding: 80px 0 40px; }
.faq-inner { max-width: 760px; }
.faq-co .section-title {
  font-family: var(--el-serif); font-weight: 500; color: var(--el-tinta);
  font-size: 36px; text-align: center; margin-bottom: 32px;
}
.faq-co details { border-top: 1px solid var(--el-linea); }
.faq-co details:last-of-type { border-bottom: 1px solid var(--el-linea); }
.faq-co summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px;
  font-family: var(--el-serif); font-size: 21px; font-weight: 500; color: var(--el-tinta);
}
.faq-co summary::-webkit-details-marker { display: none; }
.faq-co summary::after { content: '+'; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 22px; color: var(--el-suave); transition: transform .25s; }
.faq-co details[open] summary::after { transform: rotate(45deg); }
.faq-co details p { padding: 0 2px 22px; color: var(--el-suave); font-weight: 300; line-height: 1.75; font-size: 15px; }
.faq-mas { text-align: center; margin-top: 28px; color: var(--el-suave); font-size: 14px; }
.faq-mas a { color: var(--el-tinta); font-weight: 500; border-bottom: 1px solid var(--el-tinta); text-decoration: none; }
@media (max-width: 640px) {
  .faq-co { padding: 56px 0 24px; }
  .faq-co .section-title { font-size: 30px; }
  .faq-co summary { font-size: 18px; }
}

/* Titular de portada: el texto de Colombia es largo, se modera el tamaño. */
.hero-panel-cn-texto .hero-titulo { font-size: clamp(32px, 3.6vw, 52px) !important; line-height: 1.08 !important; }
/* Las fotos llevan width/height en el HTML (reserva el espacio y evita saltos);
   la altura real la manda el aspect-ratio. */
.producto-img { height: auto !important; }

/* Rendimiento en celular: el desenfoque detrás de la barra superior es costoso
   y la barra ya es casi opaca. */
#navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.footer-logo { height: auto; }

/* ── Pie de página sobre negro ────────────────────── */
footer .footer-col h4 { color: #f4f1ea !important; font-weight: 500 !important; letter-spacing: .2em !important; font-size: 11px !important; }
footer .footer-logo { filter: brightness(0) invert(1); opacity: .92; max-width: 190px !important; }
footer .footer-col a, footer .footer-brand p, footer .footer-bottom p { color: #b9b4ab !important; }
footer .footer-col a:hover { color: #fff !important; }
.credits-logo { filter: brightness(0) invert(1); opacity: .75; }

/* ── Barra de categorías bajo el encabezado ───────── */
.nav-cats {
  display: flex; justify-content: center; gap: 34px;
  border-top: 1px solid var(--el-linea);
  padding: 0 20px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav-cats::-webkit-scrollbar { display: none; }
.nav-cats a {
  flex-shrink: 0;
  padding: 13px 0 11px;
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--el-texto); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-cats a:hover, .nav-cats a.activa { color: var(--el-tinta); border-bottom-color: var(--el-tinta); }
.nav-cats a.vacia { display: none; }
/* Antes de saber qué hay en stock, Colombia no muestra las secciones que hoy
   están vacías allí (evita que aparezcan y desaparezcan). */
html[data-pais="CO"]:not(.cats-listas) .nav-cats a[data-cat="Perfumes"],
html[data-pais="CO"]:not(.cats-listas) .nav-cats a[data-cat="Ropa"],
html[data-pais="CO"]:not(.cats-listas) .nav-cats a[data-cat="Calzado"] { display: none; }
@media (max-width: 640px) {
  .nav-cats { justify-content: flex-start; gap: 26px; }
  .nav-cats a { padding: 11px 0 9px; font-size: 10.5px; letter-spacing: .16em; }
}

/* Páginas de categoría: el catálogo empieza debajo del encabezado fijo
   (antes el título y el buscador quedaban tapados). */
body:not(:has(#hero)) #catalogo { padding-top: calc(var(--nav-total-h, 249px) + 36px) !important; }
@media (max-width: 640px) {
  body:not(:has(#hero)) #catalogo { padding-top: calc(var(--nav-total-h, 160px) + 48px) !important; }
}

/* Títulos de sección en la misma serif del resto. */
.section-title {
  font-family: var(--el-serif) !important;
  font-weight: 500 !important;
  color: var(--el-tinta) !important;
  letter-spacing: 0 !important;
}
.section-sub { color: var(--el-suave) !important; font-weight: 300 !important; }