/* ============ RESET & BASE ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Paleta de marca (04. Paleta de colores):
     #BC969B rosa malva · #CBB9B1 taupe · #A27F6F terracota
     #DFA8AF rosa suave · #1A1A1A negro · #F7F5F2 / #FFFFEF blancos cálidos.
     Se mantienen los MISMOS nombres de variable que antes (--gold, --charcoal…)
     para que todo el CSS existente (admin, mayorista, producto) herede el
     cambio de paleta automáticamente sin tocar cada regla una por una. */
  --charcoal: #1a1a1a;
  --charcoal-light: #2b2a29;
  --charcoal-lighter: #403d3b;
  --cream: #f7f5f2;
  --cream-soft: #ffffef;
  --cream-dark: #cbb9b1;
  --white: #ffffef;
  --gold: #bc969b;
  --gold-light: #dfa8af;
  --gold-dark: #a27f6f;
  --text-dark: #1a1a1a;
  --text-mute: #7d716c;
  --text-cream-dim: #cbb9b1;
  --line: rgba(26, 26, 26, 0.1);
  --line-dark: rgba(223, 168, 175, 0.16);
  --gold-grad: linear-gradient(135deg, #dfa8af 0%, #bc969b 45%, #a27f6f 100%);
  --shadow-gold: 0 6px 18px rgba(162, 127, 111, 0.2);
  --shadow-soft: 0 14px 36px -20px rgba(26, 26, 26, 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--text-dark);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.6;
  /* Evita los flecos de color (rojo/azul) en el texto claro sobre fondo
     oscuro: en Windows, Chrome usa ClearType (suavizado por subpíxel) para
     dibujar el texto, lo cual separa los colores rojo/verde/azul en los
     bordes de las letras delgadas. -webkit-font-smoothing no tiene efecto
     en Windows (solo en Mac), así que se usa un text-shadow casi invisible:
     esto obliga a Chrome a dibujar el texto por GPU con suavizado gris en
     vez de ClearType, eliminando los flecos de color en todo el sitio. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 0 0 0.01px rgba(0, 0, 0, 0.01);
}

h1, h2, h3, .brand-name, .cat-label, .product-name, .product-price {
  font-family: 'Cormorant Garamond', serif;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
img[hidden] { display: none; }
button, input, select, textarea { font-family: inherit; border: none; outline: none; background: none; color: inherit; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 1.3rem;
  font-weight: 500;
}
.eyebrow.center { display: block; text-align: center; }

.section-title {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 1.7rem;
  color: var(--text-dark);
}
.section-title.center { text-align: center; }

.section-head { max-width: 720px; margin: 0 auto 4.5rem; padding: 0 1.5rem; }

/* ============ PILL BUTTONS ============ */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s, border-color 0.3s, color 0.3s;
  white-space: nowrap;
}
.pill-gold {
  background: var(--gold-grad);
  color: #201705;
  box-shadow: var(--shadow-gold);
}
.pill-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(162,127,111,0.3); }
.pill-outline {
  border: 1px solid var(--line-dark);
  color: var(--text-cream-dim);
  background: rgba(255,255,255,0.03);
}
.pill-outline-light {
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
}
.pill-outline-light:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }
.pill-outline-dark {
  border: 1px solid rgba(26,26,26,0.28);
  color: var(--text-dark);
}
.pill-outline-dark:hover { border-color: var(--gold-dark); color: var(--gold-dark); transform: translateY(-2px); }

/* ============ LOADER ============ */
.loader {
  position: fixed; inset: 0; background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader-inner { position: relative; width: 90px; height: 90px; }
.loader-ring { width: 100%; height: 100%; transform: rotate(-90deg); animation: loaderSpin 1.6s linear infinite; }
.loader-ring circle {
  fill: none; stroke: var(--gold); stroke-width: 2.5;
  stroke-dasharray: 264; stroke-dashoffset: 200;
  stroke-linecap: round;
}
.loader-n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--gold); font-weight: 600;
}
@keyframes loaderSpin { to { transform: rotate(270deg); } }

/* ============ CURSOR GLOW ============ */
.cursor-glow {
  position: fixed; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(188,150,155,0.12) 0%, transparent 70%);
  pointer-events: none; z-index: 1; transform: translate(-50%, -50%);
  transition: opacity 0.3s; left: 0; top: 0; opacity: 0;
}

/* ============ NAVBAR ============ */
.navbar {
  position: relative; z-index: 500; background: var(--charcoal);
  padding: 1.1rem 0;
}
.nav-shell {
  max-width: 1400px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
}

.brand { display: flex; align-items: center; gap: 0.8rem; }
.brand-mark { display: inline-flex; position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 1.15rem; letter-spacing: 0.22em; font-weight: 500; color: var(--white); }
.brand-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 500; color: var(--gold); margin-top: 0.2rem; }

.nav-links { display: flex; align-items: center; gap: 2rem; }
/* Hijos directos únicamente (Inicio / Ver todo / Contacto): con selector "a"
   genérico esto también le agregaba position:relative + un subrayado que
   crece al hover a los links anidados dentro del mega-menú (categorías,
   título de marca), dibujando una línea dorada fantasma bajo ellos. */
.nav-links > a {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-cream-dim);
  position: relative; padding-bottom: 4px; transition: color 0.3s; font-weight: 500;
}
.nav-links > a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold); transition: width 0.4s var(--ease);
}
.nav-links > a:hover, .nav-links > a.active { color: var(--white); }
.nav-links > a:hover::after, .nav-links > a.active::after { width: 100%; }
.nav-links > a.active::after { background: var(--gold); width: 100%; }
.nav-contact-mobile { display: none; }

/* ---------- Menú mega desplegable (Marcas / Categorías) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 0.35rem; cursor: pointer;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-cream-dim);
  font-weight: 500; transition: color 0.3s;
}
.nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger { color: var(--white); }
.nav-dropdown-caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }

.nav-mega-panel {
  display: none; position: absolute; top: calc(100% + 1.4rem); left: 0;
  background: var(--charcoal); border: 1px solid rgba(188,150,155,0.18); border-radius: 8px;
  padding: 1.7rem 1.8rem 1.4rem; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.5); z-index: 550;
  min-width: 460px; max-width: 760px;
}
.nav-dropdown.open .nav-mega-panel { display: block; }

.nav-mega-head {
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600;
  color: var(--text-mute); margin-bottom: 1.1rem; padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(188,150,155,0.15);
}

/* Columnas tipo "mampostería" (CSS columns, no grid): cada marca ocupa un
   bloque de alto variable y fluye al siguiente sin dejar huecos enormes
   cuando una marca tiene muchas más categorías que sus vecinas. */
.nav-mega-grid { column-count: 2; column-gap: 2.2rem; max-height: 48vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(188,150,155,0.4) transparent; }
@media (min-width: 900px) { .nav-mega-grid { column-count: 3; } }
.nav-mega-grid::-webkit-scrollbar { width: 6px; }
.nav-mega-grid::-webkit-scrollbar-thumb { background: rgba(188,150,155,0.35); border-radius: 4px; }
.nav-mega-grid::-webkit-scrollbar-track { background: transparent; }

/* Marcas y categorías se listan como links sueltos (sin agrupar/anidar):
   cada uno fluye libre entre columnas y puede partirse donde haga falta. */
.nav-mega-link { display: block; font-size: 0.84rem; color: var(--text-cream-dim); padding: 0.32rem 0; break-inside: avoid; transition: color 0.25s, transform 0.25s; }
.nav-mega-link:hover { color: var(--white); transform: translateX(3px); }
.nav-mega-empty { color: var(--text-mute); font-size: 0.85rem; padding: 0.5rem 0; }

.nav-mega-foot {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(188,150,155,0.15); text-align: center;
}
.nav-mega-foot a {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600; color: var(--gold); transition: color 0.25s, gap 0.25s;
}
.nav-mega-foot a:hover { color: var(--gold-light); gap: 0.6rem; }

.nav-utils { display: flex; align-items: center; gap: 0.7rem; }
.nav-utils-label { display: none; }
@media (min-width: 1140px) { .nav-utils-label { display: inline-flex; } }

.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: center;
  padding: 10px; color: var(--white); transition: all 0.35s var(--ease); flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.icon-badge {
  position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--gold); color: #201705; font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif;
}
.icon-badge[hidden] { display: none; }

/* ============ CUENTA (login con Google) ============ */
.account-btn-wrap { position: relative; }
.account-avatar {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.account-initial {
  width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--gold-grad); color: #201705; font-weight: 700; font-size: 0.95rem; font-family: 'Montserrat', sans-serif;
}
#accountBtn svg { display: block; }
#accountBtn[data-signed-in="true"] svg { display: none; }
#accountBtn:not([data-signed-in="true"]) .account-avatar,
#accountBtn:not([data-signed-in="true"]) .account-initial { display: none; }

.account-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 230px; background: var(--charcoal);
  border: 1px solid var(--line-dark); border-radius: 14px; padding: 1rem 1.1rem; z-index: 400;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.account-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.account-dropdown-name { color: var(--white); font-weight: 600; font-size: 0.9rem; margin: 0 0 0.15rem; }
.account-dropdown-email { color: var(--text-mute); font-size: 0.76rem; margin: 0 0 0.9rem; word-break: break-word; }
.account-dropdown-link {
  display: block; width: 100%; box-sizing: border-box; text-align: left; background: none;
  border: 1px solid var(--line-dark); border-radius: 8px; color: var(--text-cream-dim);
  font-size: 0.78rem; padding: 0.55rem 0.8rem; margin-bottom: 0.5rem; text-decoration: none;
  transition: all 0.3s;
}
.account-dropdown-link:hover { border-color: var(--gold); color: var(--gold); }
.account-dropdown-signout {
  width: 100%; text-align: left; background: none; border: 1px solid var(--line-dark); border-radius: 8px;
  color: var(--text-cream-dim); font-size: 0.78rem; padding: 0.55rem 0.8rem; cursor: pointer; transition: all 0.3s;
}
.account-dropdown-signout:hover { border-color: var(--gold); color: var(--gold); }

.burger { display: none; flex-direction: column; gap: 5px; width: 26px; cursor: pointer; z-index: 600; }
.burger span { width: 100%; height: 1.5px; background: var(--white); transition: all 0.4s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============ ORNAMENTOS ============ */
/* Divisor decorativo (línea + destello) reutilizado en el footer y donde
   haga falta un cierre elegante entre secciones. */
.hero-ornament {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem;
  max-width: 260px; margin: 2.6rem auto 0;
}
.hero-ornament span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(188,150,155,0.5)); }
.hero-ornament span:last-child { background: linear-gradient(90deg, rgba(188,150,155,0.5), transparent); }
.hero-ornament svg { width: 14px; height: 14px; fill: var(--gold); stroke: none; flex-shrink: 0; }

/* Mismo pequeño destello dorado arriba de cualquier "eyebrow" centrado del
   sitio (Marcas, Selección Nathéa, Contacto...) — un detalle ornamental
   que ata visualmente todas las secciones sin agregar imágenes nuevas. */
.eyebrow.center::before {
  content: ''; display: block; width: 7px; height: 7px; margin: 0 auto 0.9rem;
  background: var(--gold); transform: rotate(45deg);
}

/* ============ TILE GRID ============ */

/* ============ CARRUSEL DE PUBLICIDAD ============ */
.ad-carousel { position: relative; padding: 0; background: var(--cream); }
.ad-carousel[hidden] { display: none; }
.ad-carousel-viewport {
  position: relative; width: 100%; aspect-ratio: 21 / 7; overflow: hidden;
  background: var(--cream-soft);
}
.ad-carousel-track { position: relative; width: 100%; height: 100%; }
.ad-carousel-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0.6s;
  display: block;
}
.ad-carousel-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.ad-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,253,249,0.85); color: var(--text-dark); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; transition: all 0.3s var(--ease); padding: 10px;
}
.ad-carousel-arrow:hover { background: var(--white); color: var(--gold-dark); }
.ad-carousel-arrow-prev { left: 1rem; }
.ad-carousel-arrow-next { right: 1rem; }
/* Los puntos van ENCIMA de la foto (esquina inferior centrada), no debajo
   en una franja aparte — así la foto no queda con espacio muerto alrededor. */
.ad-carousel-dots {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  display: flex; justify-content: center; gap: 0.5rem; z-index: 3;
}
.ad-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer;
  padding: 0; border: none; transition: all 0.3s var(--ease); box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.ad-carousel-dot.active { background: var(--white); width: 22px; border-radius: 4px; }

@media (max-width: 760px) {
  /* Los banners reales suelen traer texto/información repartida por TODO
     el ancho (no centrada), así que recortar con "cover" en una pantalla
     angosta corta contenido importante sin importar la proporción. En
     móvil se usa "contain" para que el banner completo sea siempre
     visible (con el fondo de .ad-carousel-viewport rellenando arriba/abajo
     si sobra espacio), en vez de recortarlo. */
  .ad-carousel-viewport { aspect-ratio: 16 / 9; }
  .ad-carousel-slide img { object-fit: contain; }
  .ad-carousel-arrow { width: 34px; height: 34px; padding: 8px; }
}

/* ============ CONFIANZA / AUTENTICIDAD ============ */
/* Esta sección va justo después de "Contacto" (que ya trae su propio
   padding grande de sección) — sin este ajuste, los dos espacios se
   sumaban y dejaban un salto de casi 180px sin nada, se sentía como un
   hueco vacío en vez de una transición limpia. */
.trust-bar { background: var(--cream); padding: 0 1.5rem 5rem; }
.trust-grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.2rem;
}
.trust-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.trust-icon {
  width: 52px; height: 52px; border-radius: 50%; background: transparent; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; padding: 13px;
  color: var(--gold-dark); flex-shrink: 0; transition: background 0.3s, color 0.3s;
}
.trust-item:hover .trust-icon { background: var(--gold); color: #201705; }
.trust-item h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--text-dark); letter-spacing: 0.01em; }
.trust-item p { font-size: 0.84rem; color: var(--text-mute); max-width: 260px; line-height: 1.6; }

.brands { background: var(--cream-soft); padding-top: 5rem; padding-bottom: 3rem; }
.categories { padding-top: 3rem; padding-bottom: 3rem; }
.section-desc { color: var(--text-mute); font-size: 0.95rem; max-width: 560px; margin: 1rem auto 0; }
.section-desc.center { text-align: center; }

.tile-grid {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 1.1rem; justify-items: center;
}

/* Marcas: dos filas (7 arriba, 6 abajo) centradas de forma independiente,
   para que la fila de abajo quede angosta y centrada bajo la de arriba
   (efecto pirámide suave). */
.brand-rows {
  max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 1.1rem;
}
.brand-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1rem; }
.brand-row .cat-tile { flex: 0 0 auto; }


.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  width: 100%; max-width: 148px; perspective: 1000px;
}
.cat-tile-inner {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 18px;
  background: var(--white); border: 1px solid rgba(188,150,155,0.28);
  display: flex; align-items: center; justify-content: center; padding: 14%;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.cat-tile-inner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(188,150,155,0.35), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.cat-tile:hover .cat-tile-inner::before { opacity: 1; }
.cat-tile:hover .cat-tile-inner {
  position: relative; z-index: 2; transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 20px 32px -14px rgba(26,26,26,0.3);
}
.cat-tile-logo {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  transform: translateZ(35px);
}
.cat-icon-circle {
  position: relative; z-index: 1; width: 60%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--gold-grad); display: flex; align-items: center; justify-content: center;
  color: #201705; transform: translateZ(35px);
  box-shadow: 0 10px 20px -10px rgba(162,127,111,0.4);
}
.cat-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dark);
  display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.3;
}
.cat-label small { font-family: 'Montserrat', sans-serif; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-top: 0.15rem; }

/* ============ PRODUCTS ============ */
.featured { background: var(--cream); padding-top: 3rem; }
.products { background: var(--cream-soft); padding-top: 1.6rem; }
.filter-group-label {
  text-align: center; font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600; margin-bottom: 0.6rem;
}
.search-info {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  text-align: center; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 1.6rem;
}
.search-info-clear {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dark);
  text-decoration: underline; cursor: pointer; background: none; border: none;
}
.search-info-clear:hover { color: var(--text-dark); }
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 0.1rem; justify-content: center;
  max-width: 1100px; margin: 0 auto 1.6rem;
}
.filter-chips:last-of-type { margin-bottom: 2.2rem; }
.chip {
  padding: 0.4rem 0.85rem; border-radius: 50px; border: 1px solid transparent;
  background: transparent; color: var(--text-mute); font-size: 0.66rem; letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.25s var(--ease);
}
.chip:hover { color: var(--gold-dark); }
.chip.active { background: var(--white); color: var(--text-dark); border-color: rgba(188,150,155,0.4); }

.products-grid {
  max-width: 1300px; margin: 0 auto; display: grid; justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px)); gap: 1.8rem;
}
.product-card {
  position: relative; background: var(--white); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(26,26,26,0.08); box-shadow: 0 2px 8px rgba(26,26,26,0.04);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease); display: flex; flex-direction: column;
  /* min-width: 0 evita el bug clásico de grid/flex donde una palabra larga
     en la descripción (ej. "Dermatológicamente") empuja la tarjeta más
     ancha que su columna y se desborda del viewport en mobile.
     overflow-wrap se hereda a todo el texto de adentro (título, marca,
     descripción, precio) por si aparece otra palabra larga en cualquiera. */
  min-width: 0; overflow-wrap: break-word;
}
/* Filete dorado que se revela arriba de la tarjeta al pasar el mouse — el
   mismo detalle de boutique que ya usan los pills y el hero. */
.product-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold-grad); transform: scaleX(0); transition: transform 0.4s var(--ease); z-index: 3;
}
.product-card:hover {
  border-color: rgba(188,150,155,0.5); box-shadow: 0 22px 40px -20px rgba(26,26,26,0.25);
  transform: translateY(-5px);
}
.product-card:hover::before { transform: scaleX(1); }
.product-image-link { display: block; }
.product-image {
  aspect-ratio: 1 / 1; background: var(--cream-soft); display: flex;
  align-items: center; justify-content: center; overflow: hidden; position: relative;
  touch-action: pan-y;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.product-card:hover .product-image img { transform: scale(1.06); }
.product-image-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.5rem; color: var(--text-mute); opacity: 0.55;
}
.product-image-empty svg { width: 30px; height: 30px; stroke-width: 1.3; }
.product-image-empty span { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.product-image-dots {
  position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: 50px;
  background: rgba(38,34,31,0.35); backdrop-filter: blur(2px);
}
.product-image-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5);
  cursor: pointer; transition: all 0.25s var(--ease); padding: 0;
}
.product-image-dot.active { background: var(--gold); width: 16px; border-radius: 4px; }
.product-image-dot:hover { background: var(--gold-light); }
.product-badge-original {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(255,253,249,0.92); color: var(--gold-dark); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 0.32rem 0.6rem 0.32rem 0.5rem;
  border-radius: 50px; box-shadow: 0 4px 10px rgba(26,26,26,0.15);
}
.product-badge-original svg { width: 12px; height: 12px; flex-shrink: 0; }
.product-wishlist-btn {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255,253,249,0.92); color: var(--text-mute);
  display: flex; align-items: center; justify-content: center; padding: 7px;
  cursor: pointer; box-shadow: 0 4px 10px rgba(26,26,26,0.15); transition: all 0.25s var(--ease);
}
.product-wishlist-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.product-wishlist-btn:hover { color: var(--gold-dark); transform: scale(1.08); }
.product-wishlist-btn.active { color: #d9556b; }
.product-wishlist-btn.active svg { fill: currentColor; }
.product-detail-wishlist {
  position: static; top: auto; right: auto; z-index: auto;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(26,26,26,0.15);
  background: var(--white); color: var(--text-mute); display: flex; align-items: center;
  justify-content: center; padding: 13px; flex-shrink: 0; cursor: pointer; transition: all 0.25s var(--ease);
  box-shadow: none;
}
.product-detail-wishlist svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.product-detail-wishlist:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.product-detail-wishlist.active { color: #d9556b; border-color: rgba(217,85,107,0.4); }
.product-detail-wishlist.active svg { fill: currentColor; }
.product-body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.product-brand { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
.product-name { font-size: 1.3rem; font-weight: 500; color: var(--text-dark); }
.product-desc { font-size: 0.85rem; color: var(--text-mute); flex: 1; overflow-wrap: break-word; }
.product-wholesale-hint { font-size: 0.72rem; color: var(--gold-dark); font-weight: 600; }
.product-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 0.8rem; gap: 0.6rem; }
.product-price { font-size: 1.25rem; font-weight: 500; color: var(--text-dark); }
.pill-sm { padding: 0.6rem 1.1rem; font-size: 0.66rem; white-space: normal; text-align: center; }
.pill-sm .cta-label-short { display: none; }
.products-empty { text-align: center; color: var(--text-mute); font-size: 0.95rem; max-width: 1300px; margin: 0 auto; }

/* ============ BUSCADOR ============ */
.search-overlay {
  position: fixed; inset: 0; background: rgba(38,34,31,0.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
  z-index: 900;
}
.search-overlay.open { opacity: 1; visibility: visible; }

.search-panel {
  position: fixed; top: 8vh; left: 50%; width: min(560px, 92vw); max-height: 78vh;
  transform: translate(-50%, -16px); opacity: 0; visibility: hidden;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), visibility 0.35s;
  z-index: 901; display: flex; flex-direction: column;
}
.search-panel.open { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.search-panel-inner {
  background: var(--cream-soft); border-radius: 18px; box-shadow: 0 40px 90px -20px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; overflow: hidden; max-height: 78vh;
}
.search-input-wrap { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.search-input-icon { width: 20px; height: 20px; color: var(--text-mute); flex-shrink: 0; }
.search-input-wrap input {
  flex: 1; border: none; background: none; font-size: 1rem; color: var(--text-dark);
  font-family: 'Montserrat', sans-serif; outline: none;
}
.search-input-wrap input::placeholder { color: var(--text-mute); }
.search-close {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--text-mute); cursor: pointer; flex-shrink: 0; transition: all 0.3s;
}
.search-close:hover { color: var(--text-dark); background: var(--white); }

.search-results { overflow-y: auto; padding: 0.6rem; }
.search-result-item {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0.7rem; border-radius: 12px;
  cursor: pointer; transition: background 0.2s;
}
.search-result-item:hover, .search-result-item.active { background: var(--white); }
.search-result-thumb {
  width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: var(--white); display: flex; align-items: center; justify-content: center;
}
.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name { font-size: 0.88rem; color: var(--text-dark); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-brand { font-size: 0.72rem; color: var(--gold-dark); text-transform: uppercase; letter-spacing: 0.06em; }
.search-result-price { font-size: 0.85rem; color: var(--text-dark); font-weight: 600; flex-shrink: 0; }

.search-state { padding: 2.2rem 1.4rem; text-align: center; color: var(--text-mute); font-size: 0.9rem; }
.search-view-all {
  display: block; text-align: center; padding: 0.9rem; margin: 0.3rem 0.6rem 0.6rem; border-radius: 10px;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--gold-dark); background: var(--white); cursor: pointer; transition: all 0.3s;
}
.search-view-all:hover { color: var(--text-dark); }

@media (max-width: 640px) {
  .search-panel { top: 0; left: 0; width: 100%; height: 100%; transform: none; max-height: none; }
  .search-panel.open { transform: none; }
  .search-panel-inner { border-radius: 0; height: 100%; max-height: none; }
}

/* ============ CARRITO ============ */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(38,34,31,0.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
  z-index: 900;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 100%);
  background: var(--cream-soft); box-shadow: -20px 0 50px rgba(0,0,0,0.25);
  z-index: 901; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.45s var(--ease);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.6rem; background: var(--charcoal); flex-shrink: 0;
}
.cart-drawer-header h2 { font-size: 1.3rem; font-weight: 600; color: var(--white); }
.cart-close {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  color: var(--white); font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease);
}
.cart-close:hover { border-color: var(--gold); color: var(--gold); }

.cart-items { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-empty { text-align: center; color: var(--text-mute); font-size: 0.9rem; padding: 2.5rem 1.6rem; }

.cart-item { display: flex; gap: 0.9rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(26,26,26,0.1); }
.cart-item-image { width: 60px; height: 60px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--cream); }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cart-item-name { font-size: 0.9rem; font-weight: 600; color: var(--text-dark); }
.cart-item-brand { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
.cart-item-stepper { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.2rem; }
.cart-item-stepper button {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(26,26,26,0.2);
  color: var(--text-dark); cursor: pointer; font-size: 0.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all 0.25s var(--ease);
}
.cart-item-stepper button:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.cart-item-stepper span { font-size: 0.85rem; font-weight: 600; min-width: 1.2rem; text-align: center; }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex-shrink: 0; }
.cart-item-subtotal { font-size: 0.9rem; font-weight: 600; color: var(--text-dark); }
.cart-item-remove { font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); text-decoration: underline; cursor: pointer; }
.cart-item-remove:hover { color: #a13a3a; }
.cart-item-wholesale-badge {
  display: inline-block; margin-top: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 50px;
  background: rgba(140,180,110,0.15); color: #4c7a35; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; width: fit-content;
}
.cart-item-wholesale-hint { display: block; margin-top: 0.4rem; font-size: 0.68rem; color: var(--gold-dark); }

.cart-footer { flex-shrink: 0; padding: 1.4rem 1.6rem 1.8rem; border-top: 1px solid rgba(26,26,26,0.1); background: var(--cream-soft); }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.1rem; font-size: 1rem; font-weight: 600; color: var(--text-dark); }
.cart-total-row span:last-child { font-size: 1.4rem; color: var(--gold-dark); }
.cart-checkout-form .form-group { margin-bottom: 1.1rem; }
.cart-checkout-form .form-row { margin-bottom: 1.1rem; gap: 1rem; }
.checkout-section-label {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-dark); font-weight: 700; margin: 0 0 0.9rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
}
.checkout-section-label:not(:first-child) { margin-top: 1.5rem; }
.checkout-section-label svg { width: 15px; height: 15px; flex-shrink: 0; }
.cart-checkout-btn { width: 100%; }
.cart-checkout-error {
  text-align: center; color: #a33d3d; font-size: 0.85rem; margin-top: 1rem; line-height: 1.5;
  background: rgba(211,90,90,0.1); border: 1px solid rgba(211,90,90,0.3);
  border-radius: 8px; padding: 0.8rem 1rem;
}
.cart-checkout-btn:disabled { opacity: 0.65; cursor: not-allowed; }

@media (max-width: 480px) {
  .cart-drawer { width: 100%; }
}

/* ============ MARQUEE ============ */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; overflow: hidden; background: var(--cream-dark);
  position: relative; z-index: 2;
}
.marquee-track { display: flex; gap: 2.5rem; white-space: nowrap; width: max-content; animation: marqueeScroll 34s linear infinite; }
.marquee-track span { font-size: 0.78rem; letter-spacing: 0.18em; color: var(--text-mute); font-weight: 600; }
.marquee-track span:nth-child(2n) { color: var(--gold-dark); font-size: 0.65rem; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ SECTIONS GENERIC ============ */
section { padding: 8.5rem 1.5rem; position: relative; }

/* ============ CONTACT ============ */
.contact { background: var(--cream); }
.contact-inner {
  max-width: 1250px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 5rem;
}
.contact-desc { color: var(--text-mute); margin: 1.4rem 0 2.2rem; max-width: 440px; }
.contact-list { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.2rem; }
.contact-list li { display: flex; align-items: center; gap: 1rem; color: var(--text-mute); font-size: 0.92rem; }
.contact-list li a { transition: color 0.3s; }
.contact-list li a:hover { color: var(--gold-dark); }
.contact-list svg { width: 20px; height: 20px; color: var(--gold-dark); flex-shrink: 0; }
.social-links { display: flex; gap: 1rem; }
.social-links a {
  width: 42px; height: 42px; border: 1px solid rgba(26,26,26,0.15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 11px;
  color: var(--gold-dark); transition: all 0.35s var(--ease);
}
.social-links a:hover { background: var(--gold); color: #201705; border-color: var(--gold); transform: translateY(-4px); }

.contact-form {
  background: var(--white);
  border-radius: 8px; padding: 2.8rem; box-shadow: var(--shadow-soft);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-group { position: relative; margin-bottom: 1.6rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.9rem 0.2rem; border-bottom: 1px solid rgba(26,26,26,0.15);
  color: var(--text-dark); font-size: 0.95rem; transition: border-color 0.3s; resize: none;
}
.form-group select { appearance: none; cursor: pointer; padding-right: 1.6rem; }
.form-group select:invalid { color: transparent; }
.form-group:has(select)::after {
  content: ''; position: absolute; right: 0.3rem; top: 1.15rem; pointer-events: none;
  width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.55;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold-dark); }
.form-group label {
  position: absolute; left: 0.2rem; top: 0.9rem; color: var(--text-mute); font-size: 0.95rem;
  pointer-events: none; transition: all 0.25s var(--ease);
}
.form-group input:focus + label, .form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label, .form-group textarea:not(:placeholder-shown) + label {
  top: -0.6rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark);
}
.select-label { top: -0.6rem !important; font-size: 0.68rem !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark) !important; }
.form-submit { width: 100%; margin-top: 0.6rem; }
.form-success {
  text-align: center; color: var(--gold-dark); font-size: 0.85rem; margin-top: 1rem;
  opacity: 0; height: 0; overflow: hidden; transition: opacity 0.4s;
}
.form-success.show { opacity: 1; height: auto; margin-top: 1rem; }

/* ============ FOOTER ============ */
.footer { position: relative; background: var(--charcoal); border-top: 1px solid var(--line-dark); padding: 4.5rem 1.5rem 2rem; text-align: center; overflow: hidden; }
.footer-glow {
  position: absolute; top: -60%; left: 50%; width: 700px; height: 700px; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(188,150,155,0.14) 0%, transparent 65%);
}
.footer-inner { position: relative; max-width: 640px; margin: 0 auto; }
.footer-brand { justify-content: center; display: inline-flex; margin-bottom: 1.2rem; }
.footer-tagline { color: var(--text-cream-dim); font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 1.8rem; }
.footer-inner .hero-ornament { margin: 0 auto 2rem; }
.footer-links { display: flex; justify-content: center; gap: 2.2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.footer-links a { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-cream-dim); transition: color 0.3s; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 0.75rem; color: var(--text-mute); }
.footer-admin-link { color: var(--text-mute); text-decoration: underline; text-underline-offset: 2px; }
.footer-admin-link:hover { color: var(--gold); }

/* ============ PÁGINA LEGAL (Términos, privacidad, cookies) ============ */
.legal-crumb { max-width: 1300px; margin: 0 auto; padding: 1.8rem 1.5rem 0; }
.legal-back {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;
  color: var(--text-mute); transition: color 0.25s;
}
.legal-back:hover { color: var(--gold-dark); }
.legal { background: var(--cream); }
.legal-page { max-width: 820px; margin: 0 auto; }
.legal-updated { color: var(--text-mute); font-size: 0.85rem; margin-top: 0.6rem; }
.legal-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 2.2rem 0 0; padding-bottom: 2rem; border-bottom: 1px solid rgba(26,26,26,0.12); }
.legal-nav a {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark);
  border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color 0.25s;
}
.legal-nav a:hover { color: var(--text-dark); }
.legal-block { margin-top: 3rem; }
.legal-block h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; color: var(--text-dark); margin-bottom: 1rem; }
.legal-block h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--gold-dark); margin: 1.6rem 0 0.6rem; }
.legal-block p { color: var(--text-mute); font-size: 0.92rem; line-height: 1.8; }
.legal-block ul { margin: 0.6rem 0 0.6rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.legal-block li { color: var(--text-mute); font-size: 0.92rem; line-height: 1.8; }
.legal-block strong { color: var(--text-dark); }
.legal-block a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ============ MIS PEDIDOS (mis-pedidos.html) ============ */
.myorders-page { padding-top: 0.5rem; }
.myorders-state {
  margin-top: 2.4rem; padding: 2.2rem 1.5rem; text-align: center; background: var(--cream-soft);
  border: 1px solid var(--line); border-radius: 14px; color: var(--text-mute); font-size: 0.92rem;
}
.myorders-state p { margin-bottom: 1rem; }
.myorders-state p:last-child { margin-bottom: 0; }
.myorders-empty { margin-top: 2.4rem; text-align: center; color: var(--text-mute); font-size: 0.92rem; }

.myorders-list { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.myorder-card {
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.4rem 1.6rem; box-shadow: var(--shadow-soft);
}
.myorder-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.myorder-num { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--text-dark); }
.myorder-date { font-size: 0.78rem; color: var(--text-mute); margin-top: 0.2rem; text-transform: capitalize; }
.myorder-badge {
  flex-shrink: 0; padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.myorder-badge.neutral { background: rgba(125,113,108,0.12); color: var(--text-mute); }
.myorder-badge.success { background: rgba(120,165,95,0.16); color: #5c8a45; }
.myorder-badge.warning { background: rgba(211,150,90,0.16); color: #b3742c; }
.myorder-badge.info { background: rgba(162,127,111,0.18); color: var(--gold-dark); }
.myorder-badge.danger { background: rgba(200,80,80,0.14); color: #b64545; }

.myorder-items { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.myorder-items li {
  display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--text-dark);
}
.myorder-shipping { font-size: 0.8rem; color: var(--text-mute); line-height: 1.6; margin-bottom: 1rem; }
.myorder-total-row {
  display: flex; justify-content: space-between; align-items: center; padding-top: 1rem;
  border-top: 1px solid var(--line); font-weight: 600; color: var(--text-dark);
}
.myorder-total-row span:last-child { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--gold-dark); }

/* ============ RESULTADO DE PAGO (pago-confirmacion.html) ============ */
.payment-result-page { padding: 2rem 1.5rem 1rem; }
.payment-result { display: flex; flex-direction: column; align-items: center; text-align: center; }
.payment-result-icon {
  width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; padding: 18px; margin-bottom: 1.6rem; border: 1px solid currentColor;
}
.payment-result--success .payment-result-icon { color: #4a8c5e; background: rgba(74,140,94,0.1); }
.payment-result--pending .payment-result-icon { color: var(--gold-dark); background: rgba(162,127,111,0.1); }
.payment-result--failed .payment-result-icon { color: #a33d3d; background: rgba(211,90,90,0.1); }
.payment-result--unknown .payment-result-icon { color: var(--text-mute); background: rgba(26,26,26,0.06); }
.payment-result-desc { color: var(--text-mute); font-size: 0.95rem; line-height: 1.7; max-width: 480px; margin: 0 auto; }
.payment-result-order {
  display: flex; align-items: center; gap: 0.6rem; margin: 1.6rem 0 0; padding: 0.7rem 1.3rem;
  background: var(--cream-soft); border: 1px solid rgba(26,26,26,0.08); border-radius: 50px;
  font-size: 0.82rem; color: var(--text-mute);
}
.payment-result-order[hidden] { display: none; }
.payment-result-order strong { color: var(--text-dark); font-family: 'Cormorant Garamond', serif; font-size: 1rem; }
.payment-result-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.4rem; }

/* ============ AVISO DE COOKIES ============ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--charcoal); border-top: 1px solid var(--line-dark);
  padding: 1.3rem 1.5rem; transform: translateY(100%); opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner-inner {
  max-width: 1150px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
}
.cookie-banner p { color: var(--text-cream-dim); font-size: 0.82rem; line-height: 1.6; margin: 0; flex: 1; min-width: 240px; }
.cookie-banner a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
/* En desktop se ve el texto completo; en mobile (ver media query de 480px)
   se cambia a la versión corta para que el aviso no tape media pantalla. */
.cookie-banner .cookie-text-short { display: none; }
.cookie-banner-actions { flex-shrink: 0; }

/* ============ SCROLL REVEAL ============ */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .contact-inner { grid-template-columns: 1fr; gap: 3.5rem; }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 760px) {
  /* La barra de categoría, con hasta 12 chips, se veía apretada y despareja
     envolviendo en varias filas centradas angostas. En mobile pasa a una
     sola fila con scroll horizontal (deslizable), como en Shopify. */
  .filter-chips {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.2rem 1.2rem;
    margin-left: -1.2rem; margin-right: -1.2rem; width: calc(100% + 2.4rem);
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; white-space: nowrap; }

  .nav-links { display: none; }
  .burger { display: flex; }
  /* El botón de "Contacto" ya está duplicado dentro del menú hamburguesa
     (.nav-contact-mobile); en el header angosto solo dejamos visibles
     deseos/carrito para que siempre queden a la mano, como en Shopify. */
  .nav-utils { gap: 0.5rem; }
  .nav-utils .pill-gold { display: none; }
  .nav-links.open {
    display: flex; position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center;
    background: rgba(38,34,31,0.98); backdrop-filter: blur(10px); gap: 2.4rem; z-index: 550;
    overflow-y: auto; padding: 5rem 1.5rem;
  }
  /* Hijos directos únicamente (Inicio / Ver todo / Contacto): un selector
     "a" genérico también agrandaba, por especificidad, los links anidados
     del mega-menú (categorías, "Ver todo →", título de marca). */
  .nav-links.open > a { font-size: 1.2rem; }
  .nav-links.open .nav-contact-mobile {
    display: inline-flex; margin-top: 0.6rem; padding: 0.85rem 2rem; font-size: 0.78rem;
    background: var(--gold-grad); color: #201705; border-radius: 50px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
  }

  .nav-links.open .nav-dropdown { display: flex; flex-direction: column; align-items: center; }
  .nav-links.open .nav-dropdown-trigger { font-size: 1.2rem; }
  .nav-links.open .nav-mega-panel {
    position: static; margin-top: 1.4rem; width: 100%; max-width: 320px;
    min-width: 0; max-height: 40vh; overflow-y: auto;
  }
  .nav-links.open .nav-mega-grid { column-count: 1; max-height: none; text-align: center; }
  .nav-links.open .nav-mega-link:hover { transform: none; }
  .form-row { grid-template-columns: 1fr; }
  section { padding: 5.5rem 1.2rem; }
}

@media (max-width: 480px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* En móvil las dos filas de marcas se aplanan a una cuadrícula pareja
     de 2 columnas (en vez de 3) para que las tarjetas queden más grandes
     y con más aire, en vez de verse amontonadas. */
  .brand-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .brand-row { display: contents; }

  /* En tarjetas angostas (2 columnas) "Agregar al carrito" quedaba muy
     apretado al lado del precio y se partía feo en dos líneas: se apilan
     y el botón usa todo el ancho de la tarjeta para tener más espacio. */
  .product-footer { flex-direction: column; align-items: stretch; }
  /* Aun a lo ancho, "Agregar al carrito" no entraba en una sola línea
     dentro de la tarjeta angosta de 2 columnas: se usa "Agregar" nomás. */
  .product-footer .pill-sm .cta-label-full { display: none; }
  .product-footer .pill-sm .cta-label-short { display: inline; }

  /* El aviso de cookies con su texto completo + botón apilado ocupaba casi
     media pantalla en mobile, tapando el contenido de abajo. Se compacta:
     texto más corto y pequeño, menos relleno, botón de ancho completo. */
  .cookie-banner { padding: 1rem 1.1rem; }
  .cookie-banner-inner { gap: 0.9rem; }
  .cookie-banner p { font-size: 0.74rem; line-height: 1.5; min-width: 0; }
  .cookie-banner .cookie-text-full { display: none; }
  .cookie-banner .cookie-text-short { display: inline; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .pill-btn { width: 100%; }
}