/* ============================================================================
   CATÁLOGO ZAFIRA — sistema visual "revista de revistas"   (solo el catálogo)
   NO aplica al visor de revistas (revista.css queda cerrado) ni a
   zafiraperfumes.cl, que conserva el look esmeralda/oro.

   1) FONDO: los 5 colores de marca en diagonal, difuminándose uno con otro
      (malla de gradientes tipo Google), con deriva lenta.
   2) TIPOGRAFÍA: la de las revistas — Playfair Display en titulares y precios,
      sans legible en el cuerpo.
   3) PALETA: el fucsia de Cyzone como acción, equilibrado con neutros cálidos
      y los colores de cada marca como acentos. Fuera el dorado y el verde.

   CÓMO CAMBIA TANTO SIN TOCAR EL HTML: el catálogo venía pintado con las
   variables --zc-* (carrito.css) y las clases .btn-oro / .btn-borde / .btn-wa.
   Aquí se redefinen esas variables y esas clases: todo el sitio hereda el
   sistema nuevo de una sola vez.
   ============================================================================ */

:root {
  /* ---- colores de marca (base del fondo y de los acentos) ----
     Natura = naranjo · Ésika = rojo (así se leen en la vida real) */
  --mk-natura: #E8730C;
  --mk-avon:   #D81B60;
  --mk-esika:  #C4122F;
  --mk-cyzone: #E5007E;
  --mk-lbel:   #2C4BB0;
  --mk-hnd:    #2F7D6B;
  --mk-lattafa:#8E6A2E;
  --mk-risque: #9B1B45;

  /* el color de la marca de cada tarjeta se resuelve con [data-marca] más abajo */
  --m-color: #C1006B;

  /* ---- sistema del catálogo ---- */
  --cat-tinta:        #201A22;
  --cat-tinta-suave:  #5C5560;
  --cat-linea:        #EFE7EE;
  --cat-papel:        #FFFFFF;
  --cat-fondo:        #FFFBFD;
  --cat-fucsia:       #C1006B;
  --cat-fucsia-osc:   #8E0049;
  --cat-fucsia-tinte: #FFF0F7;

  --cat-display: "Playfair Display", Georgia, serif;
  --cat-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cat-radio: 18px;
  --cat-sombra: 0 1px 2px rgba(32, 26, 34, .04), 0 10px 30px rgba(32, 26, 34, .06);

  /* ---- puente con las variables que ya usaba el catálogo (--zc-*) ---- */
  --zc-esmeralda:      var(--cat-tinta);
  --zc-esmeralda-prof: #14101B;
  --zc-oro:            var(--cat-fucsia);
  --zc-oliva:          var(--cat-fucsia-osc);
  --zc-verde:          var(--cat-fucsia);
  --zc-tinta:          var(--cat-tinta);
  --zc-suave:          rgba(32, 26, 34, .68);
  --zc-linea:          rgba(32, 26, 34, .10);
  --zc-marfil:         rgba(255, 251, 253, .72);
  --zc-marfil-alt:     #FDF6FA;
  --zc-sombra:         0 18px 40px -18px rgba(32, 26, 34, .30);
}

/* ---------------------------------------------------------------- fondo malla
   Capas de gradientes radiales (uno por marca) que se deslizan en diagonal y se
   funden entre sí. Las opacidades se mantienen bajas para que el texto se lea. */
.mesh {
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30% 36% at 8% 4%,   rgba(232, 115, 12, .62), transparent 60%),
    radial-gradient(32% 38% at 94% 10%, rgba(229, 0, 126, .60), transparent 62%),
    radial-gradient(36% 40% at 0% 46%,  rgba(216, 27, 96, .50), transparent 64%),
    radial-gradient(34% 40% at 100% 52%, rgba(196, 18, 47, .54), transparent 62%),
    radial-gradient(44% 48% at 44% 106%, rgba(44, 75, 176, .50), transparent 66%),
    var(--cat-fondo);
  filter: blur(38px) saturate(126%);
  animation: mesh-deriva 52s ease-in-out infinite alternate;
}
.mesh span {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(26% 30% at 76% 86%, rgba(229, 0, 126, .48), transparent 64%),
    radial-gradient(28% 32% at 24% 90%, rgba(196, 18, 47, .42), transparent 62%),
    radial-gradient(24% 28% at 60% 14%, rgba(44, 75, 176, .42), transparent 64%);
  animation: mesh-deriva2 64s ease-in-out infinite alternate;
}
@keyframes mesh-deriva {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-1.2deg); }
  50%  { transform: translate3d(1.5%, 1.5%, 0) scale(1.06) rotate(.6deg); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.03) rotate(1.4deg); }
}
@keyframes mesh-deriva2 {
  0%   { transform: translate3d(2%, 2%, 0) scale(1.05) rotate(1deg); opacity: .8; }
  100% { transform: translate3d(-2%, -2%, 0) scale(1) rotate(-1.5deg); opacity: 1; }
}

/* ---------------------------------------------------------------- lienzo y texto
   El color base vive en <html>; el div .mesh (z-index -1) se pinta encima del
   lienzo y debajo del contenido. */
html { background: var(--cat-fondo); }
body.cat {
  background: transparent;
  color: var(--cat-tinta);
  font-family: var(--cat-sans);
  -webkit-font-smoothing: antialiased;
}
body.cat h1, body.cat h2, body.cat h3, body.cat .font-display {
  font-family: var(--cat-display);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--cat-tinta);
}
body.cat .text-esmeralda   { color: var(--cat-tinta) !important; }
body.cat .text-tinta-suave { color: var(--cat-tinta-suave) !important; }
body.cat .text-oro         { color: var(--cat-fucsia) !important; }
/* .text-oliva (rotulos del pie: "Pedidos", "Nuestra boutique", "Redes") seguia con el oliva
   viejo; .zc-menu-btn conservaba su borde oliva. Ambos pasan a la paleta del catalogo. */
body.cat .text-oliva       { color: var(--cat-fucsia) !important; }
body.cat .zc-menu-btn      { border-color: rgba(32, 26, 34, .16) !important; }
body.cat .border-linea     { border-color: var(--cat-linea) !important; }
body.cat .bg-marfil-alt    { background-color: #FDF6FA !important; }
body.cat .bg-marfil\/95    { background-color: rgba(255, 251, 253, .80) !important; }

body.cat .eyebrow {
  font-family: var(--cat-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--m-color, var(--cat-fucsia));
}

/* ---------------------------------------------------------------- cabecera */
body.cat header {
  background: rgba(255, 251, 253, .74) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--cat-linea) !important;
}
body.cat .zc-nav { background: transparent !important; border-color: var(--cat-linea) !important; }
body.cat .zc-nav a {
  font-family: var(--cat-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cat-tinta);
}
body.cat .zc-nav a:hover { color: var(--cat-fucsia); }

/* ---------------------------------------------------------------- botones
   .btn-oro (acción principal), .btn-borde (secundario), .btn-wa, .btn-encargo,
   .btn-carrito. Todos heredan el fucsia, salvo cuando la tarjeta declara
   --m-color (zonas de marca: el botón toma el color de ESA marca). */
body.cat .btn-oro,
body.cat .btn-carrito,
body.cat .btn-encargo,
body.cat .btn-wa-principal {
  background: var(--m-color, var(--cat-fucsia)) !important;
  border: 1px solid var(--m-color, var(--cat-fucsia)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--cat-sans);
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 8px 22px rgba(193, 0, 107, .18);
}
body.cat .btn-oro:hover,
body.cat .btn-carrito:hover,
body.cat .btn-encargo:hover { filter: brightness(.9); }
body.cat .btn-borde,
body.cat .btn-pedir-wa {
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid var(--cat-linea) !important;
  color: var(--cat-tinta) !important;
  border-radius: 999px !important;
  font-weight: 600;
}
body.cat .btn-borde:hover,
body.cat .btn-pedir-wa:hover {
  border-color: var(--m-color, var(--cat-fucsia)) !important;
  color: var(--m-color, var(--cat-fucsia)) !important;
  background: #fff !important;
}
/* WhatsApp se mantiene verde para que se reconozca como WhatsApp */
body.cat .btn-wa {
  background: #128C4A !important;
  border: 1px solid #128C4A !important;
  color: #fff !important;
  border-radius: 999px !important;
}
body.cat .btn-wa:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------- "cómo comprar" */
body.cat .zop {
  background: rgba(255, 255, 255, .84);
  border: 1px solid var(--cat-linea);
  border-radius: var(--cat-radio);
  box-shadow: var(--cat-sombra);
  backdrop-filter: blur(8px);
}
body.cat .zop--destacado { border-color: rgba(193, 0, 107, .35) !important; }
body.cat .zop-num { color: var(--cat-fucsia); }
body.cat .zop h3 { color: var(--cat-tinta); }
body.cat .zop p { color: var(--cat-tinta-suave); }

/* ---------------------------------------------------------------- color por marca
   Cada tarjeta lleva el color de la marca del producto que representa: el color llega por
   el atributo data-marca, así que borde, insignia, botón, eyebrow y precio se tiñen solos. */
body.cat [data-marca="natura"] { --m-color: var(--mk-natura); }
body.cat [data-marca="avon"]   { --m-color: var(--mk-avon); }
body.cat [data-marca="esika"]  { --m-color: var(--mk-esika); }
body.cat [data-marca="cyzone"] { --m-color: var(--mk-cyzone); }
body.cat [data-marca="lbel"]   { --m-color: var(--mk-lbel); }
body.cat [data-marca="hnd"]    { --m-color: var(--mk-hnd); }
body.cat [data-marca="lattafa"]{ --m-color: var(--mk-lattafa); }
body.cat [data-marca="risque"] { --m-color: var(--mk-risque); }

/* ---------------------------------------------------------------- tarjetas */
body.cat .tarjeta {
  background: var(--cat-papel);
  border: 1px solid var(--cat-linea);
  border-radius: var(--cat-radio);
  box-shadow: var(--cat-sombra);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.cat .tarjeta:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(32, 26, 34, .10); }
body.cat .tarjeta-media { background: #fff; }

/* la tarjeta de un producto de marca: filo superior de color + tinte suave del mismo tono */
body.cat .tarjeta[data-marca] {
  border-top: 4px solid var(--m-color);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 34%);
}
body.cat .tarjeta[data-marca] .tarjeta-media {
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-color) 9%, #fff) 0%, #fff 68%);
}
/* los packs de la casa no son de marca: filo del fucsia de Zafira */
body.cat .tarjeta:not([data-marca]) { border-top: 4px solid var(--cat-fucsia); }

@supports not (background: color-mix(in srgb, red 10%, #fff)) {
  body.cat .tarjeta[data-marca] .tarjeta-media { background: #fff; }
}
body.cat .precio {
  font-family: var(--cat-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cat-tinta);
  line-height: 1.15;
}
body.cat .etiqueta-precio {
  display: block;
  font-family: var(--cat-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--m-color, var(--cat-fucsia));
  margin-top: 3px;
}
body.cat .badge {
  font-family: var(--cat-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

/* ---------------------------------------------------------------- ítems de marca */
body.cat .st-item {
  position: relative;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(32, 26, 34, .09);
  border-radius: var(--cat-radio);
  box-shadow: var(--cat-sombra);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
body.cat .st-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--m-color, var(--cat-fucsia)), transparent 92%);
}
body.cat .st-item::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--m-color, var(--cat-fucsia)), transparent 70%);
  opacity: .16;
  pointer-events: none;
}
body.cat .st-item-marca { font-family: var(--cat-display); color: var(--m-color, var(--cat-fucsia)); }
body.cat .st-item-n { color: var(--cat-tinta); }
body.cat .st-item-fotos { color: var(--cat-tinta-suave); }
body.cat .st-item-cta { color: var(--m-color, var(--cat-fucsia)); }

/* ---------------------------------------------------------------- visibilidad
   IMPORTANTE: .tarjeta trae su propio display (flex), y eso anula el [hidden] del
   navegador. Sin esta regla los filtros "ocultan" con el atributo pero las tarjetas
   se siguen viendo (pasó con el filtro por marca de las zonas). */
body.cat [hidden] { display: none !important; }

/* ---------------------------------------------------------------- secciones */
body.cat section h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.1; }
body.cat .cuenta { color: var(--cat-tinta-suave); font-size: 12.5px; }

/* ---------------------------------------------------------------- movimiento */
@media (prefers-reduced-motion: reduce) {
  .mesh, .mesh span { animation: none !important; }
  body.cat .tarjeta, body.cat .st-item { transition: none; }
}

/* ---------------------------------------------------------------- banner cruzado (boutique)
   .banner-cruzado se define en zafira.css con el look viejo (fondo esmeralda #113E21 + borde
   dorado rgba(194,153,71,.4)) y el catalogo no lo redefinia: el recuadro de la boutique seguia
   verde. Ademas su parrafo lleva .font-display, que body.cat pinta en tinta, asi que el texto
   quedaba oscuro sobre verde. Aqui pasa al sistema del catalogo. */
body.cat .banner-cruzado {
  background: linear-gradient(135deg, var(--cat-fucsia-tinte) 0%, #FFFFFF 62%) !important;
  border: 1px solid var(--cat-linea) !important;
  border-top: 4px solid var(--cat-fucsia) !important;
  border-radius: var(--cat-radio);
  color: var(--cat-tinta);
  box-shadow: var(--cat-sombra);
}
body.cat .banner-cruzado .font-display,
body.cat .banner-cruzado .text-marfil { color: var(--cat-tinta) !important; }
body.cat .banner-cruzado .etiqueta { color: var(--cat-fucsia) !important; }

/* el enlace a la web de Natura va con el naranjo de Natura (no con el verde de WhatsApp) */
body.cat .btn-natura { background: var(--mk-natura) !important; border: 1px solid var(--mk-natura) !important; color: #fff !important; }
body.cat .btn-natura:hover { background: #C95F05 !important; border-color: #C95F05 !important; }