@import url('fuentes.css');

/* =========================================================================
   Hoja de estilos del sitio /mayoristas/
   Adopta el sistema de diseño de la tienda (variables --tox-* de
   themes/panda/assets/css/toe-modern.css) para que el registro y la tienda se
   lean como una sola marca: fondo blanco, rojo #b20019 como único acento y
   grises para toda la estructura.
   Las tipografías son las mismas que el front (Inter + Plus Jakarta Sans) pero
   AUTOALOJADAS: el sitio no depende de Google Fonts.
   ========================================================================= */

:root {
  --red:        #b20019;
  --red-deep:   #8e0014;
  --red-bright: #cc3333;
  --red-soft:   #fef1f3;
  --red-rgb:    178, 0, 25;

  --ink:        #1a1d24;
  --ink-mute:   #4a5160;
  --ink-faint:  #7a8194;
  --navy:       #252f3d;

  --line:       #e7e9ee;
  --line-soft:  #f1f3f7;
  --bg:         #ffffff;
  --bg-alt:     #fff2f4;
  --bg-grey:    #f6f7f9;

  --shadow-xs: 0 1px 2px rgba(15, 18, 28, .05);
  --shadow-sm: 0 2px 6px -1px rgba(15, 18, 28, .08), 0 1px 2px rgba(15, 18, 28, .04);
  --shadow-md: 0 8px 24px -10px rgba(15, 18, 28, .18), 0 2px 6px -2px rgba(15, 18, 28, .08);
  --shadow-red: 0 8px 24px -10px rgba(var(--red-rgb), .35), 0 2px 6px -2px rgba(var(--red-rgb), .18);

  --r:      14px;
  --r-sm:   10px;
  --r-xs:   6px;
  --r-pill: 999px;
  --ease:   cubic-bezier(.2, .8, .2, 1);

  --f-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --measure: 70ch;
  --wide: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* --- retícula ------------------------------------------------------------ */

.wrap  { width: min(100% - 2.4rem, var(--wide)); margin-inline: auto; }
.prose { max-width: var(--measure); }

/* --- cabecera ------------------------------------------------------------ */

.masthead { background: var(--bg); border-bottom: 1px solid var(--line); }
.masthead__in {
  display: flex; align-items: center; gap: 1.4rem;
  flex-wrap: wrap; padding: 1.05rem 0;
}
.masthead__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.32rem; letter-spacing: -.02em; margin: 0; line-height: 1.1;
}
.masthead__title a { color: var(--ink); text-decoration: none; }
.masthead__title span { color: var(--red); }
.masthead__tag {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0;
}
.nav { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.nav a {
  color: var(--ink-mute); text-decoration: none; font-size: .89rem; font-weight: 600;
  padding: .42rem .85rem; border-radius: var(--r-pill);
  transition: background var(--ease) 160ms, color var(--ease) 160ms;
}
.nav a:hover { background: var(--line-soft); color: var(--ink); }
.nav a[aria-current] { background: var(--red-soft); color: var(--red); }

/* La banda roja bajo la cabecera es la firma del front de la tienda. */
.rule-double { height: 3px; background: var(--red); }

/* --- migas --------------------------------------------------------------- */

.crumbs { font-size: .78rem; color: var(--ink-faint); padding: 1.1rem 0 0; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs span { margin: 0 .4rem; opacity: .45; }

/* --- titulares ----------------------------------------------------------- */

/* Interletrado calcado del tema: h1 -0.025em / h2 -0.02em / resto -0.015em.
   Ir mas cerrado que la tienda hace que los titulares se lean apretados. */
h1, h2, h3 {
  font-family: var(--f-display); line-height: 1.15; color: var(--ink);
  letter-spacing: -.015em;
}
h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.8rem); margin: 1.1rem 0 .55rem; font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); margin: 2.7rem 0 .85rem; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 1.08rem; margin: 1.9rem 0 .45rem; font-weight: 700; }

.dek { font-size: 1.06rem; color: var(--ink-mute); max-width: var(--measure); margin: 0 0 1.5rem; }

.eyebrow {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--red); font-weight: 700; margin: 1.6rem 0 .3rem;
  display: flex; align-items: center; gap: .65rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line); }

a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red-deep); }

/* --- procedencia del dato ------------------------------------------------ */

.sello {
  border: 1px solid var(--line); border-left: 3px solid var(--red);
  background: var(--bg-grey); border-radius: var(--r-sm);
  padding: .85rem 1.1rem; margin: 1.2rem 0 0;
  font-size: .82rem; color: var(--ink-mute); line-height: 1.55;
}
.sello strong { font-weight: 700; color: var(--ink); }
.sello code {
  font-family: var(--f-text); font-weight: 600; font-size: .95em;
  background: var(--red-soft); color: var(--red-deep);
  padding: .08em .42em; border-radius: var(--r-xs);
}
blockquote.sello { font-style: normal; }

/* --- tablas -------------------------------------------------------------- */

.tabla-envoltura {
  overflow-x: auto; margin: 1.3rem 0 .5rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
table.precios { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.precios caption {
  text-align: left; font-weight: 700; font-size: .7rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
  padding: .95rem 1.15rem .35rem;
}
table.precios th {
  text-align: left; font-weight: 700; font-size: .69rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  padding: .6rem 1.15rem; border-bottom: 2px solid var(--line);
  white-space: nowrap; background: var(--bg);
}
table.precios td {
  padding: .58rem 1.15rem; border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline; color: var(--ink);
}
table.precios tbody tr { transition: background var(--ease) 120ms; }
table.precios tbody tr:hover { background: var(--red-soft); }
table.precios tbody tr:last-child td { border-bottom: 0; }

.col-pvp, .col-fecha, .col-delta { text-align: right; white-space: nowrap; }
/* "table.precios th" (0,1,2) gana a ".col-pvp" (0,1,0): sin esto las cabeceras
   numéricas quedan a la izquierda y sus cifras a la derecha. */
table.precios th.col-pvp, table.precios th.col-fecha, table.precios th.col-delta { text-align: right; }

.pvp {
  font-weight: 700; font-size: .97rem; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.005em;
}
.pvp small { font-weight: 500; color: var(--ink-faint); font-size: .78em; margin-left: .12em; }
.fecha { font-size: .81rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.labor .marca { color: var(--ink-faint); }

.delta {
  display: inline-block; font-size: .77rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: .14rem .48rem; border-radius: var(--r-pill);
}
.delta--up   { color: var(--red);      background: var(--red-soft); }
.delta--down { color: var(--navy);     background: var(--line-soft); }
.delta--flat { color: var(--ink-faint); background: transparent; }

/* Aclaracion de vocabulario. "Labores" es el termino del BOE y se mantiene, pero
   en castellano corriente significa otra cosa: a la pagina de precios llega gente
   buscando "precio tabaco" que nunca lo ha leido. */
.nota-termino {
  max-width: var(--measure); margin: 0 0 1.5rem;
  padding: .8rem 1.05rem .8rem 1rem;
  border-left: 3px solid var(--line);
  font-size: .89rem; color: var(--ink-mute); line-height: 1.6;
}
.nota-termino strong { color: var(--ink); font-weight: 700; }

/* --- buscador ------------------------------------------------------------ */

.buscador { margin: 1.7rem 0 .6rem; max-width: 640px; }
.buscador label {
  display: block; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: .45rem;
}
.buscador input {
  width: 100%; font-family: var(--f-text); font-size: 1.02rem; font-weight: 500;
  padding: .82rem 1.05rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--shadow-xs);
  transition: border-color var(--ease) 160ms, box-shadow var(--ease) 160ms;
}
.buscador input::placeholder { color: var(--ink-faint); font-weight: 400; }
.buscador input:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(var(--red-rgb), .12);
}
.buscador__meta { font-size: .82rem; color: var(--ink-faint); margin-top: .5rem; min-height: 1.2em; }
#resultados:empty { display: none; }

/* --- fichas -------------------------------------------------------------- */

.rejilla {
  display: grid; gap: .85rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.ficha {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.05rem 1.15rem; text-decoration: none; color: inherit; display: block;
  box-shadow: var(--shadow-xs);
  transition: transform var(--ease) 180ms, box-shadow var(--ease) 180ms, border-color var(--ease) 180ms;
}
a.ficha:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(var(--red-rgb), .35); }
.ficha__t {
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); display: block; letter-spacing: -.01em;
}
.ficha__m { font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
a.ficha:hover .ficha__t { color: var(--red); }

/* --- llamada al alta ----------------------------------------------------- */

.cta {
  margin: 2.8rem 0 1rem; padding: 1.7rem 1.8rem;
  background: var(--bg-alt); border: 1px solid rgba(var(--red-rgb), .16);
  border-radius: var(--r);
}
.cta h2 { margin: 0 0 .45rem; font-size: 1.3rem; }
.cta p { margin: 0 0 1.1rem; color: var(--ink-mute); max-width: 58ch; }

.boton {
  display: inline-block; background: var(--red); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .93rem;
  padding: .72rem 1.5rem; border-radius: var(--r-pill);
  border: 1px solid transparent; box-shadow: var(--shadow-red);
  transition: transform var(--ease) 160ms, background var(--ease) 160ms, box-shadow var(--ease) 160ms;
}
.boton:hover { background: var(--red-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.boton--sec {
  background: var(--bg); color: var(--red); border-color: var(--line); box-shadow: var(--shadow-xs);
}
.boton--sec:hover { background: var(--red-soft); color: var(--red-deep); }

/* --- avisos -------------------------------------------------------------- */

.aviso {
  font-size: .86rem; color: var(--ink-mute); background: var(--bg-grey);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .95rem 1.15rem; margin: 1.5rem 0;
}
.aviso strong { color: var(--ink); }

/* --- pie ----------------------------------------------------------------- */

.pie { margin-top: 3.8rem; border-top: 1px solid var(--line); background: var(--bg-grey); }
.pie__in {
  padding: 2.1rem 0 2.6rem; font-size: .85rem; color: var(--ink-mute);
  display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pie h3 {
  font-family: var(--f-text); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 .6rem; color: var(--ink-faint); font-weight: 700;
}
.pie a { color: var(--ink-mute); text-decoration: none; }
.pie a:hover { color: var(--red); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .35rem; }
.pie__legal {
  grid-column: 1 / -1; border-top: 1px solid var(--line);
  padding-top: 1.1rem; font-size: .79rem; line-height: 1.65; color: var(--ink-faint);
}

/* --- listas de contenido -------------------------------------------------- */

.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li { margin-bottom: .4rem; }

.letras { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 1.6rem; }
.letras a, .letras span {
  font-size: .82rem; font-weight: 600; padding: .25rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  text-decoration: none; color: var(--ink-mute); background: var(--bg);
}
.letras a:hover { border-color: var(--red); color: var(--red); }
.letras span { opacity: .35; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .masthead__in { padding: .85rem 0; gap: .7rem; }
  .nav { margin-left: 0; width: 100%; gap: .2rem; }
  .nav a { padding: .35rem .6rem; font-size: .84rem; }
  .cta { padding: 1.3rem 1.2rem; }
  table.precios { font-size: .88rem; }
  table.precios td, table.precios th { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto; }
}

@media print {
  body { background: #fff; color: #000; }
  .nav, .cta, .buscador, .pie__in > div { display: none; }
  .tabla-envoltura { box-shadow: none; border: 0; }
}