@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=JetBrains+Mono:wght@500;700&display=swap");
/* ═══════════════════════════════════════════════════════════════════════
   PERFUMES MAYORISTA · tokens de la marca "M Punto" (guía de marca v1)
   Versión clara pedida por el dueño: contenido sobre HUESO con tarjetas
   blancas y texto negro; NEGRO solo en cabecera, héroe y pie; LIMA solo en
   detalles (botón principal, pastillas, nivel +24) y siempre con texto negro.
   Nunca blanco sobre lima ni lima como texto sobre blanco/hueso.
   Se enlaza al final del <head> de todas las páginas públicas (después de
   marca-gabby.css, gabby-tipo.css y tema_css()). Usar var(--pm-*).
   Nombres viejos (--pm-bosque, --pm-verde, --pm-amarillo…) = su equivalente.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Paleta M Punto */
  --pm-negro:#0D0D0D;
  --pm-lima:#D4FF3A;
  --pm-lima-2:#C4F01E;
  --pm-grafito:#2A2A2A;
  --pm-hueso:#F4F4EF;
  --pm-foto:#FFFFFF;
  --pm-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* Nombres de siempre, ya en M Punto */
  --pm-bosque:#0D0D0D;
  --pm-verde:#0D0D0D;
  --pm-verde-2:#2A2A2A;
  --pm-amarillo:#D4FF3A;
  --pm-amarillo-2:#C4F01E;
  --pm-tinta:#0D0D0D;
  --pm-fondo:#F4F4EF;
  --pm-blanco:#FFFFFF;
  --pm-gris:#5C5C5C;
  --pm-linea:#E0E0D8;
  --pm-menta:#EEEEE8;
  --pm-rojo:#C8361D;
  --pm-gris-suave:#ECECE6;

  /* Letra: Archivo de ancho variable (wdth 62–125). Titulares 900 condensados. */
  --pm-letra:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pm-ancho-titulo:66%;
  --pm-ancho-sub:75%;
  --pm-ancho-logo:62%;
  --pm-peso-titulo:900;

  /* Forma */
  --pm-radio:8px;
  --pm-radio-card:12px;
  --pm-radio-logo:8px;
  --pm-borde:1px solid var(--pm-linea);
  --pm-borde-suave:1px solid var(--pm-linea);
  --pm-sombra:0 18px 40px -28px rgba(13,13,13,.35);

  /* Medidas */
  --pm-ancho:1320px;
  --pm-gutter:40px;
  --pm-gutter-m:16px;
  --pm-cab-alto:84px;
  --pm-cinta-alto:36px;

  /* Alias del diseño estático */
  --fondo:var(--pm-fondo);--blanco:var(--pm-blanco);--tinta:var(--pm-tinta);--gris:var(--pm-gris);
  --linea:var(--pm-linea);--verde:var(--pm-verde);--verde2:var(--pm-verde-2);--bosque:var(--pm-bosque);
  --amarillo:var(--pm-amarillo);--amarillo2:var(--pm-amarillo-2);--menta:var(--pm-menta);--rojo:var(--pm-rojo);
  color-scheme:light;
}
@media (max-width:760px){:root{--pm-gutter:var(--pm-gutter-m)}}

/* La letra base del motor (gabby-tipo.css usa --gt): Archivo en toda la tienda. */
:root,html body,html body *{--gt:var(--pm-letra)}

html body{background:var(--pm-fondo);color:var(--pm-tinta);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}

/* Fotos de producto sobre blanco, sin marco ni sombra (fondo blanco = foto limpia). */
.pm-foto{background:var(--pm-blanco);border:0;box-shadow:none}
.pm-foto img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* Utilidades compartidas */
.pm-cond{font-family:var(--pm-letra);font-stretch:var(--pm-ancho-titulo);font-weight:var(--pm-peso-titulo);text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
.pm-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--pm-lima);color:var(--pm-negro);padding:3px 8px;border-radius:4px;white-space:nowrap}
.pm-wrap{max-width:var(--pm-ancho);margin:0 auto;padding:0 var(--pm-gutter)}

/* Celular angosto: el logo no se corta junto al botón "Catálogo" (2026-11-09). */
@media (max-width:400px){
  html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body header a.pmh-logo>span{overflow:visible!important;flex:none!important}
  html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body header a.pmh-logo .pm-lt2{font-size:23px!important}
  html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body header a.pmh-logo .pm-lt1{font-size:7.5px!important}
}

/* Etiquetas de las tarjetas (portada, relacionados): adhesivo pegado a la esquina de arriba a la izquierda, como .com.co (2026-11-09). */
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins{top:0!important;left:0!important;right:auto!important;gap:0!important;display:flex!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span{font-size:8.5px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:6px 11px 6px 12px!important;border-radius:13px 0 10px 0!important;background:#0D0D0D!important;color:#fff!important;box-shadow:none!important;border:0!important;outline:0!important;line-height:1.2!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span::before{display:none!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span.pm-nv{background:var(--pm-lima)!important;color:#0D0D0D!important}
html:not(#q1):not(#q2):not(#q3):not(#q4):not(#q5):not(#q6):not(#q7):not(#q8) body .pm-card .pm-ins>span+span{display:none!important}