/* =====================================================================
   MJ Parfums · base

   La página tiene dos mundos: una franja OSCURA arriba (la portada) y el
   catálogo en BLANCO debajo. El contraste entre los dos es lo que sostiene
   la página; sin él quedaba una maqueta en blanco.

   RENDIMIENTO (importa: casi todo el mundo entra desde el móvil):
   la aurora se PINTA UNA VEZ con radial-gradients. Ni filter:blur, ni
   backdrop-filter sobre capas grandes, ni animaciones de fondo.
   ===================================================================== */
:root{
  /* tinta sobre blanco */
  --tinta:#111110;
  --tinta2:#6B6863;
  --tinta3:#9A958E;

  /* OJO: --marca, --plomo y las cuatro --aurora-N NO se definen aquí.
     Las escribe PHP en la propia página a partir de los colores que el dueño
     eligió en el panel (cssDeColores() en lib.php). Si las pones aquí,
     ganarían a las suyas y el selector de colores dejaría de servir.
     Los valores de abajo son solo el respaldo por si eso fallara. */
  --marca:#C4183C;
  --marca-hover:#A11431;
  --marca-suave:#F9E8EC;
  --marca-texto:#FFFFFF;
  --marca-brillo:rgba(196,24,60,.55);
  --plomo:#4A5058;
  --plomo-hover:#3D4248;
  --plomo-suave:#EDEEEE;
  --plomo-texto:#FFFFFF;
  --plomo-brillo:rgba(74,80,88,.55);
  --aurora-1:rgba(74,80,88,.44);
  --aurora-2:rgba(196,24,60,.34);
  --aurora-3:rgba(74,80,88,.26);
  --aurora-4:rgba(196,24,60,.18);
  --velo-1:rgba(74,80,88,.13);
  --velo-2:rgba(196,24,60,.10);

  /* señales */
  --verde:#2F7D4F;
  --verde-suave:#EAF3ED;
  --rojo:#C0392B;
  --rojo-suave:#FBECEA;

  --hueso:#F6F3EE;
  --gris:#F3F3F6;          /* gris plomo claro, para los bloques tipo bento */
  --carbon:#16171B;        /* negro/carbón, para el contraste puntual */
  --panel:#FFFFFF;
  --panel-borde:rgba(17,17,16,.08);
  --linea:rgba(17,17,16,.08);
  --sombra:0 1px 2px rgba(17,17,16,.04),0 10px 28px -16px rgba(17,17,16,.22);
  --sombra-alta:0 2px 6px rgba(17,17,16,.05),0 22px 46px -22px rgba(17,17,16,.32);

  --r:16px;
  --r-sm:10px;
  --suave:cubic-bezier(.22,1,.36,1);
  --rapido:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--hueso)}

/* La luz de fondo. Va en una capa fija y aparte: si estos degradados
   estuvieran en el body se estirarian a lo largo de toda la pagina (15.000 px
   en el catalogo) y no se verian. Fija ocupa la pantalla y se pinta una vez. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(68% 46% at 92%  6%, var(--velo-2) 0%, transparent 62%),
    radial-gradient(60% 44% at  0% 38%, var(--velo-1) 0%, transparent 60%),
    radial-gradient(74% 38% at 56% 98%, var(--velo-1) 0%, transparent 62%),
    var(--hueso);
}

body{
  margin:0;min-height:100dvh;color:var(--tinta);background:transparent;
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  touch-action:manipulation;          /* mata el zoom por doble toque */
}
/* mientras la bolsa está abierta el fondo no se mueve */
body.quieto{position:fixed;left:0;right:0;overflow:hidden;width:100%}

/* ---------------------------------------------------------------------
   LA FRANJA OSCURA
   Una sola capa: grano finísimo + tres manchas de luz + el degradado base.
   Se pinta una vez y se olvida.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   LA AURORA
   CLARA, como la de Tisha. Este es el punto: una franja que va de oscuro a
   claro siempre deja un manchón gris en medio, por bonitos que sean los
   colores. Se probó negra, con colores y en plomo con amarillo, y las tres
   se veían forzadas.

   Aquí el lienzo es blanco y el color entra por las esquinas, dejando el
   centro claro para que el nombre en oscuro se lea. Se disuelve hacia abajo
   hasta el color exacto de la página.

   RENDIMIENTO: radial-gradients, NO filter:blur. Se pinta una vez.
   --------------------------------------------------------------------- */
.aurora{
  position:relative;
  color:var(--tinta);
  /* SIN fondo propio y SIN capa que lo apague: la portada solo tiñe el velo
     que ya cubre toda la página. Antes tenía su degradado y terminaba en un
     color plano, y justo ahí se marcaba la raya. Ahora los colores se apagan
     solos bastante antes del borde, así que no hay dónde vea el corte. */
  background:
    radial-gradient(58% 62% at  -2%  -8%, var(--aurora-1) 0%, transparent 62%),
    radial-gradient(62% 66% at 102%  -4%, var(--aurora-2) 0%, transparent 60%),
    radial-gradient(44% 46% at  64%   6%, var(--aurora-4) 0%, transparent 62%),
    radial-gradient(52% 44% at  12%  46%, var(--aurora-3) 0%, transparent 64%),
    /* el brillo del centro, para que la marca en oscuro siempre se lea */
    radial-gradient(64% 54% at  50%  26%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 72%);
}

/* El nombre. Ligero y muy separado: en minimalismo la letra fina con aire
   se lee como marca, y la pesada como cartel de rebajas. */
.marca-nombre{
  font-weight:300;text-transform:uppercase;letter-spacing:.42em;
  line-height:1;
}

/* El nombre de la marca en Anton: condensada y pesada, como los rótulos de las
   tiendas de decants. Se probó una Didona (Bodoni) y al dueño le pareció
   rancia. Cuando suba su logo, esto se achica y pasa a segundo plano. */
.marca-titulo{
  margin:0;
  font-family:'Anton',"Arial Narrow",Impact,system-ui,sans-serif;
  font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,10vw,4.4rem);
  letter-spacing:.045em;line-height:1;text-indent:.045em;
  color:var(--tinta);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}

/* ---------- marca ---------- */
.mayus{text-transform:uppercase;letter-spacing:.24em;font-weight:500;font-size:.66rem;color:var(--tinta3)}

/* ---------- superficies ---------- */
.panel{background:var(--panel);border:1px solid var(--panel-borde);
  border-radius:var(--r);box-shadow:var(--sombra)}

/* ---------- botones ---------- */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:999px;cursor:pointer;font-weight:500;
  padding:.8rem 1.5rem;font-size:.95rem;line-height:1;
  transition:transform .2s var(--suave),background-color .18s var(--rapido),
             border-color .18s var(--rapido),color .18s var(--rapido);
}
.b:active{transform:scale(.97)}
.b-marca{background:var(--marca);color:var(--marca-texto);
  box-shadow:0 5px 16px -7px var(--marca-brillo)}
.b-marca:hover{background:var(--marca-hover)}
.b-tinta{background:var(--tinta);color:#fff}
.b-tinta:hover{background:#333029}
.b-claro{background:#fff;color:var(--tinta);border-color:var(--panel-borde);box-shadow:var(--sombra)}
.b-claro:hover{border-color:rgba(17,17,16,.22)}
.b-verde{background:var(--verde);color:#fff}
.b-verde:hover{background:#25663F}
.b-fino{padding:.5rem 1.05rem;font-size:.86rem}
.b-lleno{width:100%}
.b[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- campos ---------- */
.campo{
  width:100%;padding:.72rem .95rem;
  background:#fff;border:1px solid var(--panel-borde);border-radius:var(--r-sm);
  color:var(--tinta);
  transition:border-color .18s var(--rapido);
}
.campo:focus{outline:none;border-color:rgba(17,17,16,.3)}
.campo::placeholder{color:var(--tinta3)}

/* ---------- iconos ---------- */
.ic{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.silueta{width:42%;height:auto;max-width:60px;color:var(--tinta);opacity:.1}

/* ---------- utilidades ---------- */
.caja{width:min(100% - 2.2rem,1180px);margin-inline:auto}
.centro{text-align:center}
.nums{font-variant-numeric:tabular-nums}
.pista{font-size:.82rem;color:var(--tinta3)}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}