/* Notas de Aren · sistema visual
 * Dirección: «Catálogo claro» (DISENO-MUESTRAS §2.3) vestido con su propia marca. Títulos en Marcellus
 * (romana grabada, de boutique; 11-oct Nico pidió cambiar la Bodoni Moda) y cuerpo en Manrope.
 * v3 (11-oct, «más bonito, con sus colores, más estructurado»): la cabecera y la portada van en el café de su etiqueta
 * («color marca», pidió Nico) con la letra crema; cada sección lleva número y
 * barra café; el catálogo agrupa sus filtros en una sola caja; la colección de cada fragancia se tiñe igual que
 * su tarjeta (Diseñador crema · Árabe café · Nicho tinta).
 *
 * Color (medido con PIL, archivos en fuentes/):
 *   --piedra  #e4e1da  MEDIDO · fondo de su logo (fuentes/logo-facebook-1070.jpg, color dominante)
 *   --tinta   #0e0e0d  MEDIDO · trazo del logo (promedio de píxeles oscuros del mismo archivo)
 *   --cafe    #43291a  MEDIDO · etiqueta «Notas de Aren perfumería» de sus fichas completas (ficha Dreams Moonlight, 843×1192)
 *   --crema   #efe3cc  DERIVADO · letra crema de esa misma etiqueta (antialias, sin píxel limpio)
 *   --marfil  #f7f5f1  DERIVADO · piedra aclarada para la superficie clara
 *   --gris-1 / --gris-2 DERIVADOS de la tinta
 * Contrastes (WCAG, sobre la superficie donde se usan):
 *   tinta / marfil 18.6:1 · tinta / piedra 15.4:1 · gris-1 / marfil 8.9:1 · gris-2 / marfil 5.4:1 · gris-2 / piedra 4.6:1
 *   crema / cafe 11.0:1 · blanco / cafe 13.4:1 · blanco / wa 5.2:1 · crema-2 / cafe 6.6:1
 *   crema / tinta 16.0:1 · crema-2 / tinta 9.8:1 (portada y cabecera) · tinta / crema 16.0:1 (botón principal de la portada)
 */
:root {
  --f-titulo: 'Marcellus', 'Optima', Georgia, serif;
  --f-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-hero: clamp(2.4rem, 7vw, 4.4rem);
  --t-1: clamp(1.8rem, 3.8vw, 2.6rem);
  --t-2: clamp(1.25rem, 2.1vw, 1.5rem);
  --t-3: clamp(1.05rem, 1.3vw, 1.15rem);
  --t-base: 1.0625rem;
  --t-s: .9375rem;
  --t-ceja: .8125rem;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --seccion: clamp(52px, 8vw, 104px);
  --gutter: clamp(16px, 5vw, 48px);
  --max: 1120px;
  --medida: 62ch;

  --r: 10px; --r-2: 14px; --r-3: 20px; --r-full: 999px;

  --piedra: #e4e1da;
  --marfil: #f7f5f1;
  --blanco: #ffffff;
  --tinta: #0e0e0d;
  --cafe: #43291a;
  --cafe-2: #5c3b27;   /* derivado: hover del café */
  --crema: #efe3cc;
  --crema-2: #c9b597;  /* derivado: texto secundario sobre café y sobre tinta */
  --cafe-3: #2a1a10;   /* derivado: café oscurecido, fondo de la portada entre la tinta y el café */
  --velo-crema: rgba(239, 227, 204, .1);   /* derivado: crema translúcida para chips y botones sobre lo oscuro */
  --linea-crema: rgba(239, 227, 204, .22); /* derivado: línea crema sobre lo oscuro */
  --gris-1: #46423c;
  --gris-2: #67625a;
  --linea: #d6d0c5;
  --wa: #0f7a6e;
  --wa-2: #0b6157;

  --sombra-1: 0 1px 2px rgba(67, 41, 26, .07), 0 3px 8px -4px rgba(67, 41, 26, .18);
  --sombra-2: 0 14px 32px -18px rgba(67, 41, 26, .5);
  --sombra-3: 0 30px 64px -30px rgba(14, 14, 13, .55);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 400ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--marfil); color: var(--tinta);
  font: 400 var(--t-base)/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--blanco); padding: var(--e-3) var(--e-4); z-index: 100; }
.saltar:focus { left: var(--e-2); top: var(--e-2); }
:focus-visible { outline: 3px solid var(--cafe); outline-offset: 3px; border-radius: 4px; }
.exclusivos :focus-visible, .pie :focus-visible { outline-color: var(--crema); }

.envoltura { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.ceja { font-size: var(--t-ceja); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cafe); }
.entrada { color: var(--gris-1); max-width: var(--medida); }

/* ---------- cabecera (cabecera y portada en el café de su etiqueta, pedido de Nico 11-oct; la tira de muestra se quitó el 12-oct) ---------- */
.cabecera { position: sticky; top: 0; z-index: 30; background: rgba(67, 41, 26, .95); color: var(--crema); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea-crema); transition: box-shadow 250ms; }
.cabecera.con-sombra { box-shadow: 0 10px 30px -18px rgba(14, 14, 13, .7); }
.cabecera :focus-visible { outline-color: var(--crema); }
.cabecera-in { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; gap: var(--e-4); min-height: 60px; }
.marca img { height: 44px; width: auto; }
.menu { display: none; gap: var(--e-5); margin-left: auto; font-size: var(--t-s); font-weight: 600; }
.menu a { text-decoration: none; padding: var(--e-2) 0; border-bottom: 1.5px solid transparent; transition: border-color 200ms, color 200ms; }
.menu a:hover { border-color: var(--crema-2); color: var(--blanco); }
.btn-carrito {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4);
  border: 1px solid rgba(239, 227, 204, .4); border-radius: var(--r-full); background: var(--velo-crema); color: var(--crema); cursor: pointer; font-weight: 600; font-size: var(--t-s);
  transition: background-color 200ms, border-color 200ms, transform 200ms;
}
.btn-carrito:hover { background: rgba(239, 227, 204, .2); border-color: var(--crema); transform: translateY(-1px); }
.btn-carrito-txt { display: none; }
.contador { min-width: 24px; height: 24px; border-radius: var(--r-full); background: var(--crema); color: var(--tinta); font-size: var(--t-ceja); font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.contador.pulso { animation: pulso 500ms var(--ease); }
@keyframes pulso { 40% { transform: scale(1.3); } }
@media (min-width: 900px) { .menu { display: flex; } .btn-carrito { margin-left: var(--e-4); } .btn-carrito-txt { display: inline; } }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5);
  border-radius: var(--r-full); border: 1.5px solid transparent; font-weight: 700; font-size: var(--t-s); text-decoration: none; cursor: pointer;
  transition: background-color 200ms, box-shadow 200ms, transform 200ms, color 200ms;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--cafe); color: var(--blanco); box-shadow: var(--sombra-2); }
.btn-principal:hover { background: var(--cafe-2); transform: translateY(-2px); }
.btn-wa { background: var(--wa); color: var(--blanco); box-shadow: var(--sombra-1); }
.btn-wa:hover { background: var(--wa-2); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.btn-borde { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.btn-borde:hover { background: var(--tinta); color: var(--blanco); }
.btn-ancho { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- 1 · portada (partida, en el café de su etiqueta; degradado que baja y se funde con la página: pedido de Nico) ---------- */
.portada {
  padding: var(--e-4) 0 0; color: var(--crema); background-color: var(--cafe);
  background-image: radial-gradient(70% 60% at 100% 0%, rgba(239, 227, 204, .14), transparent 70%), linear-gradient(180deg, var(--cafe-2) 0%, var(--cafe) 45%);
}
.portada :focus-visible { outline-color: var(--crema); }
/* remate: el café se disuelve en crema y luego en el blanco de la siguiente sección, con una flecha que invita a bajar */
.portada-fin { height: 72px; margin-top: var(--e-5); background: linear-gradient(180deg, var(--cafe) 0%, var(--crema) 70%, var(--blanco) 100%); display: grid; place-items: end center; padding-bottom: 4px; }
.indicio { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; font: 700 var(--t-ceja)/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--cafe); text-decoration: none; border-radius: var(--r); }
.indicio span { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: invita 1.8s var(--ease) infinite; }
@keyframes invita { 0%, 100% { transform: translateY(-2px) rotate(45deg); opacity: .55; } 50% { transform: translateY(4px) rotate(45deg); opacity: 1; } }
.portada-in { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: var(--e-6); align-items: center; }
.portada-texto { display: grid; gap: var(--e-3); }
.portada .ceja { color: var(--crema-2); }
.portada h1 { font-size: var(--t-hero); font-weight: 400; color: var(--blanco); }
.bajada { font-size: var(--t-base); color: var(--crema); max-width: 46ch; }
.bajada q { font-style: italic; quotes: '«' '»'; }
.portada-botones { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--e-2); margin-top: var(--e-1); }
.portada-botones .btn { padding: 0 var(--e-3); }
.portada .btn-principal { background: var(--crema); color: var(--cafe); box-shadow: 0 14px 32px -14px rgba(14, 14, 13, .6); }
.portada .btn-principal:hover { background: var(--blanco); }
@media (min-width: 520px) { .portada-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); } .portada-botones .btn { padding: 0 var(--e-5); } }
.chips { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
.chips li { flex: none; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; } }
.chips li { font-size: 14px; font-weight: 600; padding: 6px var(--e-3); border-radius: var(--r-full); background: var(--velo-crema); border: 1px solid var(--linea-crema); color: var(--crema); white-space: nowrap; }
.chips li b { color: var(--blanco); }
/* cada chip lleva el punto de color de una familia de acordes (colores medidos de sus fichas; los pone app.js) */
.chips .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--crema-2)); margin-right: 8px; vertical-align: 1px; }
.portada-foto { margin: 0; position: relative; }
.vitrina { background: var(--crema); padding: 10px; border-radius: var(--r-3); box-shadow: 0 30px 64px -24px rgba(14, 14, 13, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.vitrina img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.portada-foto figcaption { margin-top: var(--e-3); font: 400 var(--t-s)/1.45 var(--f-titulo); color: var(--crema-2); padding-left: var(--e-3); border-left: 2px solid var(--crema-2); }
.portada-foto figcaption q { quotes: '«' '»'; }
@media (min-width: 900px) {
  .portada { padding-top: var(--e-8); }
  .portada-in { grid-template-columns: 1.15fr .85fr; gap: var(--e-8); }
  .portada-foto { max-width: 560px; margin-left: auto; }
  .portada-fin { height: 128px; margin-top: var(--e-6); }
}

/* ---------- 2 · colecciones ---------- */
.colecciones { background: var(--blanco); padding: var(--seccion) 0; }
@media (max-width: 899px) { .colecciones { padding: var(--e-7) 0; } .colecciones .encabezado { margin-bottom: var(--e-4); } }
.cols { display: grid; gap: var(--e-3); }
.col { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-4); align-items: center; width: 100%; text-align: left; padding: var(--e-4); border-radius: var(--r-3); border: 1px solid var(--linea); background: var(--marfil); cursor: pointer; box-shadow: var(--sombra-1); transition: box-shadow 250ms var(--ease), transform 250ms var(--ease), border-color 250ms; color: var(--tinta); }
.col:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); border-color: var(--cafe); }
.col-nombre { font: 400 var(--t-1)/1.05 var(--f-titulo); }
.col-n { font-size: var(--t-s); font-weight: 700; color: var(--cafe); }
.col-lema { grid-column: 1 / -1; font-size: var(--t-s); color: var(--gris-1); display: none; }
.col-fotos { display: flex; }
.col-fotos img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--blanco); margin-left: -14px; box-shadow: var(--sombra-1); }
.col-fotos img:first-child { margin-left: 0; }
/* en celular: [nombre | fotos] y debajo [cuántas | Ver →] en un solo renglón */
.col-ir { justify-self: end; font-size: var(--t-s); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.col.crema { background: var(--crema); border-color: #dccbab; }
.col.crema .col-fotos img { border-color: var(--crema); }
.col.oscura { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.col.oscura .col-n { color: var(--crema-2); }
.col.oscura .col-lema { color: var(--crema); }
.col.oscura .col-fotos img { border-color: var(--tinta); }
.col.cafe { background: var(--cafe); border-color: var(--cafe); color: var(--crema); }
.col.cafe .col-n { color: var(--crema-2); }
.col.cafe .col-lema { color: var(--crema); }
.col.cafe .col-fotos img { border-color: var(--cafe); }
@media (min-width: 900px) {
  .cols { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
  .col { padding: var(--e-6) var(--e-5); align-content: start; grid-template-columns: 1fr; }
  .col-fotos { order: -1; }
  .col-lema { display: block; }
  .col-ir { justify-self: start; }
  .col-fotos img { width: 64px; height: 64px; }
}
.pestanas { display: grid; grid-template-columns: repeat(4, auto); gap: 0; border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.pestanas button { min-height: 48px; padding: 0 var(--e-3); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font: 400 var(--t-3)/1 var(--f-titulo); color: var(--gris-1); white-space: nowrap; transition: color 200ms, border-color 200ms; }
.pestanas button small { font: 700 13px/1 var(--f-texto); color: var(--gris-2); margin-left: 4px; }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-checked="true"] { color: var(--tinta); border-bottom-color: var(--cafe); }
@media (min-width: 720px) { .pestanas { display: flex; gap: var(--e-4); } .pestanas button { font-size: var(--t-2); padding: 0 var(--e-2); } }

/* ---------- encabezados de sección: barra café + número de sección + ceja + título ---------- */
main { counter-reset: seccion; }
main > section:not(.portada) { counter-increment: seccion; }
.encabezado { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); max-width: 720px; }
.encabezado::before { content: ''; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--cafe); }
.encabezado .ceja { display: flex; align-items: center; gap: 10px; }
.encabezado .ceja::before { content: counter(seccion, decimal-leading-zero); font: 400 1.1em/1 var(--f-titulo); letter-spacing: .04em; padding-right: 10px; border-right: 1px solid currentColor; }
.encabezado h2 { font-size: var(--t-1); }
.encabezado-fila { max-width: none; }
.encabezado-fila::before { grid-column: 1 / -1; }
.encabezado-fila > div { display: grid; gap: var(--e-3); }
.exclusivos .encabezado::before { background: var(--crema-2); }
@media (min-width: 900px) { .encabezado-fila { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--e-3) var(--e-6); } }

/* ---------- 2 · encontrar por acordes ---------- */
.aroma { background: var(--piedra); padding: var(--seccion) 0; }
.aroma .entrada { color: var(--gris-1); }
.aroma-caja { background: var(--blanco); border-radius: var(--r-3); box-shadow: var(--sombra-2); padding: clamp(var(--e-4), 3vw, var(--e-6)); display: grid; gap: var(--e-6); }
.aroma-n { display: flex; align-items: center; gap: var(--e-3); font-weight: 700; margin-bottom: var(--e-3); }
.aroma-n > span:first-child { width: 30px; height: 30px; border-radius: 50%; background: var(--cafe); color: var(--crema); display: grid; place-items: center; font: 400 var(--t-s)/1 var(--f-titulo); flex: none; }
.segmentos { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--marfil); border: 1px solid var(--linea); border-radius: var(--r-full); }
.segmentos button { min-height: 44px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-full); background: transparent; cursor: pointer; font-weight: 600; font-size: var(--t-s); color: var(--gris-1); transition: background-color 200ms, color 200ms, box-shadow 200ms; }
.segmentos button:hover { color: var(--tinta); }
.segmentos button[aria-checked="true"] { background: var(--tinta); color: var(--blanco); box-shadow: var(--sombra-1); }
.familias { display: grid; gap: var(--e-3); }
.familia { background: color-mix(in srgb, var(--c) 14%, #ffffff); border-radius: var(--r-2); padding: var(--e-3); }
.familia .nota-btn { background: var(--blanco); }
.familia h3 { display: flex; align-items: center; gap: 8px; font: 700 var(--t-ceja)/1.3 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-1); margin-bottom: var(--e-2); }
.familia h3::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.familia .nota-btn[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--tinta); }
.familia[style*="#731731"] .nota-btn[aria-pressed="true"], .familia[style*="#814d28"] .nota-btn[aria-pressed="true"] { color: var(--blanco); }
.notas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.nota-btn {
  min-height: 44px; padding: 0 var(--e-4); border-radius: var(--r-full); border: 1px solid var(--linea); background: var(--marfil);
  cursor: pointer; font-size: var(--t-s); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: all 200ms var(--ease);
}
.nota-btn small { font-size: 14px; color: var(--gris-2); font-weight: 600; }
.nota-btn:hover { border-color: var(--cafe); }
.nota-btn[aria-pressed="true"] { background: var(--cafe); border-color: var(--cafe); color: var(--blanco); box-shadow: var(--sombra-1); }
.nota-btn[aria-pressed="true"] small { color: inherit; opacity: .85; }
.nota-btn[disabled] { opacity: .45; cursor: not-allowed; }
.aroma-resultado { border-top: 1px solid var(--linea); padding-top: var(--e-5); }
.aroma-lista { display: grid; gap: var(--e-3); }
.aroma-vacio { color: var(--gris-2); font-size: var(--t-s); }
.aroma-item { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--e-3); align-items: center; padding: var(--e-2); border-radius: var(--r-2); background: var(--marfil); border: 1px solid var(--linea); }
.aroma-item img { width: 72px; height: 72px; border-radius: var(--r); object-fit: cover; }
.aroma-item b { font: 400 var(--t-3)/1.2 var(--f-titulo); display: block; }
.aroma-item span { font-size: 14px; color: var(--gris-2); }
.aroma-item .coin { color: var(--cafe); font-weight: 700; }
.aroma-item button { min-width: 44px; min-height: 44px; }
@media (min-width: 900px) {
  .aroma-caja { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .aroma-caja > .aroma-paso:first-child { grid-column: 1 / -1; }
  .aroma-resultado { border-top: 0; border-left: 1px solid var(--linea); padding: 0 0 0 var(--e-6); position: sticky; top: 90px; }
  .familias { grid-template-columns: 1fr 1fr; }
}

/* ---------- 3 · catálogo ---------- */
.catalogo { padding: var(--seccion) 0; background: var(--marfil); }
.filtros { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
/* todos los filtros en una sola caja: buscador, acorde y orden arriba; para quién y colecciones abajo */
.herramientas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-3); padding: var(--e-3); box-shadow: var(--sombra-1); }
.herramientas > * { grid-column: 1 / -1; } /* en celular, cada control en su renglón: «Todos los acordes» no cabe partido en dos columnas */
@media (min-width: 560px) { .herramientas .campo:not(.campo-buscar) { grid-column: auto; } }
.herramientas .segmentos { display: flex; }
.herramientas .segmentos button { flex: 1 1 auto; padding: 0 var(--e-3); }
.campo-buscar input { padding-left: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367625a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 20px; }
@media (min-width: 900px) {
  .herramientas { grid-template-columns: 2fr 1fr 1fr; gap: var(--e-3); padding: var(--e-4); align-items: center; }
  .herramientas .campo-buscar { grid-column: auto; }
  .herramientas .segmentos { grid-column: 1 / 2; display: inline-flex; justify-self: start; }
  .herramientas .segmentos button { flex: none; padding: 0 var(--e-4); }
  .herramientas .pastillas { grid-column: 2 / -1; justify-content: flex-end; }
}
.campo { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { font-size: var(--t-s); font-weight: 700; padding: 0; }
input, select {
  width: 100%; min-height: 48px; font-size: 16px; padding: 0 var(--e-4); border-radius: var(--r); border: 1px solid var(--linea);
  background: var(--blanco); color: var(--tinta); transition: border-color 200ms, box-shadow 200ms;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris-1) 50%), linear-gradient(135deg, var(--gris-1) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus { border-color: var(--cafe); box-shadow: 0 0 0 3px rgba(67, 41, 26, .15); outline: none; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #a3261b; }
.error { color: #a3261b; font-size: var(--t-ceja); font-weight: 600; min-height: 0; }
.error:empty { display: none; }
.pastillas { display: flex; flex-wrap: nowrap; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.pastilla { flex: none; min-height: 44px; padding: 0 var(--e-4); border-radius: var(--r-full); border: 1px dashed var(--gris-2); background: transparent; font-size: var(--t-s); font-weight: 600; cursor: pointer; color: var(--gris-1); transition: all 200ms; }
.pastilla:hover { border-style: solid; border-color: var(--cafe); color: var(--cafe); }
.pastilla[aria-pressed="true"] { border-style: solid; background: var(--crema); border-color: var(--cafe); color: var(--cafe); }
@media (min-width: 900px) { .pastillas { flex-wrap: wrap; overflow: visible; } }
.resultado { font-size: var(--t-s); color: var(--gris-2); margin-bottom: var(--e-4); display: flex; align-items: center; gap: var(--e-3); }
.resultado::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.resultado b { color: var(--tinta); }

.rejilla { display: grid; gap: var(--e-3); }
.tarjeta {
  position: relative; display: grid; grid-template-columns: 112px 1fr; gap: var(--e-3); align-items: start; padding: var(--e-3);
  background: var(--blanco); border-radius: var(--r-2); box-shadow: var(--sombra-1); border: 1px solid rgba(214, 208, 197, .6);
  transition: box-shadow 250ms var(--ease), transform 250ms var(--ease);
}
.tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.tarjeta-foto { position: relative; border: 0; padding: 0; background: var(--piedra); border-radius: var(--r); overflow: hidden; cursor: zoom-in; aspect-ratio: 1; display: block; width: 100%; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.04); }
.tarjeta-cuerpo { display: grid; gap: 4px; min-width: 0; }
.tarjeta-marca { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-2); }
.tarjeta-nombre { font: 400 var(--t-3)/1.15 var(--f-titulo); }
.tarjeta-acordes { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--t-s); color: var(--gris-1); line-height: 1.4; }
.ac { display: inline-flex; align-items: center; gap: 6px; }
.ac::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(14,14,13,.12); flex: none; }
.tarjeta-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-2); }
.precio { font-weight: 700; font-size: var(--t-s); }
.precio.sin { color: var(--gris-2); font-weight: 600; }
.agregar { min-height: 44px; min-width: 44px; padding: 0 var(--e-4); border-radius: var(--r-full); border: 0; background: var(--tinta); color: var(--blanco); font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color 200ms, transform 200ms; }
.agregar:hover { background: var(--cafe); transform: translateY(-1px); }
.agregar.listo { background: var(--wa); }
.agregar[disabled] { background: var(--linea); color: var(--gris-2); cursor: not-allowed; }
.sello { position: absolute; top: 6px; left: 6px; z-index: 1; font-size: var(--t-ceja); font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-full); background: var(--cafe); color: var(--crema); box-shadow: var(--sombra-1); }
.sello.agot { background: var(--tinta); color: var(--blanco); }
.sello.pocas { background: var(--crema); color: var(--cafe); }
.mini { display: inline-block; font-size: var(--t-ceja); font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: var(--piedra); color: var(--gris-1); margin-right: 4px; }
/* la colección se tiñe igual que su tarjeta de arriba: Diseñador crema · Árabe café · Nicho tinta */
.mini-disenador { background: var(--crema); color: var(--cafe); }
.mini-arabe { background: var(--cafe); color: var(--crema); }
.mini-nicho { background: var(--tinta); color: var(--crema); }
.mini-sets { background: var(--crema); color: var(--cafe); }
/* Tester o sellado: siempre a la vista en la tarjeta y en la ficha (pedido del negocio, 12-oct) */
.tarjeta-tipo { font-size: var(--t-ceja); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cafe); margin: 2px 0 0; }
.tarjeta-tipo.tipo-tester { color: var(--tinta); }
.tarjeta-tipo.tipo-tester::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tinta); margin-right: 6px; vertical-align: 1px; }
.tarjeta-tipo.tipo-sellado::before, .tarjeta-tipo.tipo-set::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cafe); margin-right: 6px; vertical-align: 1px; }
.ficha-tipo { font-size: var(--t-s); color: var(--gris-1); background: var(--piedra); border-radius: var(--r-2); padding: var(--e-2) var(--e-3); margin: 0; }
.ficha-tipo b { color: var(--tinta); }
.opcion-off { opacity: .45; cursor: not-allowed; }
.cumple { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--e-2); }
.campo .etiqueta { font-size: var(--t-s); font-weight: 700; }
.campo .etiqueta small { font-weight: 500; color: var(--gris-1); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mas { display: flex; justify-content: center; margin-top: var(--e-5); }
@media (min-width: 640px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .rejilla { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
  .tarjeta { grid-template-columns: 1fr; padding: var(--e-3) var(--e-3) var(--e-4); }
}

/* ---------- 4 · exclusivos (oscura) ---------- */
.exclusivos { background: var(--cafe); color: var(--crema); padding: var(--seccion) 0; }
.exclusivos .ceja { color: var(--crema-2); }
.exclusivos h2 { color: var(--blanco); }
.exclusivos .entrada { color: var(--crema); }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 240px); gap: var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--e-2) var(--e-1) var(--e-5); scrollbar-color: var(--crema-2) transparent; }
.carrusel li { scroll-snap-align: start; }
.ex { background: #f7efe1; color: var(--tinta); border-radius: var(--r-2); padding: var(--e-3); box-shadow: var(--sombra-3); display: grid; gap: var(--e-2); height: 100%; transition: transform 250ms var(--ease); }
.ex:hover { transform: translateY(-3px); }
.ex img { border-radius: var(--r); aspect-ratio: 1; object-fit: cover; width: 100%; }
.ex .ex-sello { font-size: 14px; font-weight: 700; color: var(--cafe); }
.ex .ex-nombre { font: 400 var(--t-3)/1.15 var(--f-titulo); color: var(--tinta); }
.ex p { font-size: var(--t-s); color: var(--gris-1); }
.ex button { margin-top: auto; }

/* ---------- 5 · cómo comprar ---------- */
.comprar { background: var(--piedra); padding: var(--seccion) 0; }
.pasos { display: grid; gap: var(--e-4); counter-reset: paso; margin-bottom: var(--e-5); }
.paso { background: var(--blanco); border-radius: var(--r-2); border-top: 3px solid var(--cafe); padding: var(--e-5); box-shadow: var(--sombra-1); display: grid; gap: var(--e-2); position: relative; }
.paso::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); font: 400 2.2rem/1 var(--f-titulo); color: var(--cafe); }
.paso h3 { font-size: var(--t-2); }
.paso p { color: var(--gris-1); font-size: var(--t-s); }
@media (max-width: 899px) { /* en celular el número va a la izquierda y el texto a la derecha: tres pasos en media pantalla */
  .paso { grid-template-columns: auto 1fr; column-gap: var(--e-4); row-gap: 4px; padding: var(--e-4); }
  .paso::before { grid-row: 1 / span 2; font-size: 1.9rem; align-self: start; }
}
.entregas { display: grid; gap: var(--e-4); }
.entrega { border: 1px solid var(--linea); border-left: 4px solid var(--cafe); background: var(--marfil); border-radius: 0 var(--r-2) var(--r-2) 0; padding: var(--e-4) var(--e-5); }
.entrega b { display: block; font: 400 var(--t-3)/1.3 var(--f-titulo); margin-bottom: 4px; }
.entrega p { font-size: var(--t-s); color: var(--gris-1); }
.entrega cite { font-style: normal; font-size: 14px; color: var(--gris-2); display: block; margin-top: 6px; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); } .entregas { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 6 · opiniones y contacto ---------- */
.opiniones { background: var(--marfil); padding: var(--seccion) 0; }
.citas { display: grid; gap: var(--e-4); margin-bottom: var(--e-5); }
.cita { margin: 0; background: var(--blanco); border-radius: var(--r-2); padding: var(--e-5); box-shadow: var(--sombra-1); display: grid; gap: var(--e-3); align-content: start; }
.cita blockquote { margin: 0; font: 400 var(--t-3)/1.5 var(--f-titulo); }
.cita blockquote::before { content: '«'; color: var(--cafe); }
.cita blockquote::after { content: '»'; color: var(--cafe); }
.cita figcaption { font-size: 14px; color: var(--gris-2); }
.cita figcaption b { color: var(--tinta); font-size: var(--t-s); display: block; }
.contacto { background-color: var(--tinta); background-image: radial-gradient(60% 80% at 100% 50%, rgba(92, 59, 39, .55), transparent 70%); color: var(--crema); border-radius: var(--r-3); border-top: 3px solid var(--cafe); padding: clamp(var(--e-5), 4vw, var(--e-7)); display: grid; gap: var(--e-5); box-shadow: var(--sombra-3); }
.contacto-texto { display: grid; gap: var(--e-3); }
.contacto h3 { color: var(--blanco); font-size: var(--t-1); }
.contacto p { color: var(--crema); max-width: 52ch; }
.contacto .btns { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.contacto .btn-borde { border-color: var(--crema); color: var(--crema); }
.contacto .btn-borde:hover { background: var(--crema); color: var(--tinta); }
.contacto :focus-visible { outline-color: var(--crema); }
@media (min-width: 900px) {
  .citas { grid-template-columns: repeat(3, 1fr); }
  .contacto { grid-template-columns: 1fr auto; align-items: center; gap: var(--e-7); }
  .contacto .btns { flex-direction: column; align-items: stretch; min-width: 260px; }
}

/* ---------- pie ---------- */
.pie { background: var(--tinta); color: var(--crema); padding: var(--e-7) 0 calc(var(--e-8) + env(safe-area-inset-bottom)); border-top: 3px solid var(--cafe); }
.pie-in { display: grid; gap: var(--e-5); }
.pie-logo { height: 64px; width: auto; }
.pie-datos { display: grid; gap: var(--e-2); font-size: var(--t-s); }
.pie-datos a { color: var(--blanco); }
.pie-sistema { color: var(--crema-2); font-size: var(--t-ceja); white-space: nowrap; }
@media (min-width: 900px) { .pie { padding-bottom: var(--e-7); } .pie-in { grid-template-columns: auto 1fr; align-items: center; } }

/* ---------- barra fija (móvil) ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); padding: var(--e-2) var(--gutter) calc(var(--e-2) + env(safe-area-inset-bottom)); background: rgba(247, 245, 241, .96); border-top: 1px solid var(--linea); box-shadow: 0 -8px 24px -16px rgba(67, 41, 26, .4); transform: translateY(110%); transition: transform 300ms var(--ease); }
.barra.visible { transform: none; }
.barra .btn { min-height: 48px; }
@media (min-width: 900px) { .barra { display: none; } }

/* ---------- diálogos ---------- */
.dlg { border: 0; padding: 0; border-radius: var(--r-3); background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-3); width: min(560px, 100% - 24px); max-height: calc(100dvh - 24px); }
.dlg::backdrop { background: rgba(14, 14, 13, .55); backdrop-filter: blur(3px); }
.dlg[open] { animation: entra 300ms var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }
.cerrar { position: absolute; top: var(--e-2); right: var(--e-2); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--marfil); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; transition: background-color 200ms; }
.cerrar:hover { background: var(--piedra); }
:focus-visible { outline-color: var(--cafe); }
.dlg :focus-visible { outline: 3px solid var(--cafe); outline-offset: 2px; }

.dlg-ficha { width: min(760px, 100% - 24px); }
.ficha { display: grid; }
.ficha-foto { background: var(--piedra); }
.ficha-foto img { width: 100%; max-width: 400px; margin-inline: auto; aspect-ratio: 1; object-fit: cover; }
.ficha-info { padding: var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
.ficha-info h2 { font-size: var(--t-1); }
.ficha-acordes { display: grid; gap: 6px; }
.ficha-acordes li { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2); align-items: center; font-size: var(--t-s); padding: 6px 0; border-bottom: 1px solid var(--linea); }
.ficha-acordes li span { font-size: var(--t-ceja); color: var(--gris-2); }
.ficha-meta { font-size: var(--t-s); color: var(--gris-1); }
.ficha-acciones { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
.paso-cant { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--r-full); }
.paso-cant button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; border-radius: 50%; }
.paso-cant button:hover { background: var(--marfil); }
.paso-cant output { min-width: 28px; text-align: center; font-weight: 700; }
@media (min-width: 720px) { .ficha { grid-template-columns: 1fr 1fr; } .ficha-foto { display: grid; place-items: center; border-radius: var(--r-3) 0 0 var(--r-3); } .ficha-info { padding: var(--e-6) var(--e-5); } }

.dlg-carrito { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(440px, 100%); border-radius: 0; }
.dlg-carrito[open] { animation: lado 320ms var(--ease); }
@keyframes lado { from { transform: translateX(40px); opacity: 0; } }
.carrito { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.carrito-cab { display: flex; align-items: center; justify-content: space-between; padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); }
.carrito-cab h2 { font-size: var(--t-2); }
.carrito-cab .cerrar { position: static; }
.carrito-lista { overflow-y: auto; padding: var(--e-3) var(--e-5); display: grid; gap: var(--e-3); align-content: start; }
.linea { display: grid; grid-template-columns: 64px 1fr; gap: var(--e-3); padding-bottom: var(--e-3); border-bottom: 1px solid var(--linea); }
.linea img { width: 64px; height: 64px; border-radius: var(--r); object-fit: cover; }
.linea b { font: 400 var(--t-s)/1.25 var(--f-titulo); display: block; }
.linea small { font-size: var(--t-ceja); color: var(--gris-2); }
.linea-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: 4px; }
.quitar { min-height: 44px; border: 0; background: transparent; color: var(--gris-1); text-decoration: underline; cursor: pointer; font-size: var(--t-ceja); padding: 0 var(--e-2); }
.carrito-vacio { text-align: center; color: var(--gris-2); padding: var(--e-7) 0; display: grid; gap: var(--e-4); justify-items: center; }
.carrito-pie { padding: var(--e-4) var(--e-5) calc(var(--e-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); display: grid; gap: var(--e-3); background: var(--marfil); }
.totales { display: grid; gap: 4px; font-size: var(--t-s); }
.totales div { display: flex; justify-content: space-between; gap: var(--e-3); }
.totales .grande { font-size: var(--t-3); font-weight: 700; }
.totales .porque { font-size: var(--t-ceja); color: var(--gris-2); }

.dlg-pago { padding: var(--e-6) var(--e-5) var(--e-5); overflow-y: auto; }
.pago-titulo { font-size: var(--t-2); margin-bottom: var(--e-4); padding-right: 48px; }
.pasos-pago { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-bottom: var(--e-5); counter-reset: pp; }
.pasos-pago li { font-size: var(--t-ceja); font-weight: 700; color: var(--gris-2); border-top: 3px solid var(--linea); padding-top: 6px; }
.pasos-pago li::before { counter-increment: pp; content: counter(pp) ' · '; }
.pasos-pago li.activo { color: var(--cafe); border-color: var(--cafe); }
.pasos-pago li.hecho { color: var(--tinta); border-color: var(--tinta); }
.pago-paso { display: grid; gap: var(--e-4); }
.envio-extra { display: grid; gap: var(--e-4); }
.opciones { display: grid; gap: var(--e-2); }
.opcion { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; padding: var(--e-3) var(--e-4); border: 1.5px solid var(--linea); border-radius: var(--r-2); cursor: pointer; min-height: 52px; transition: border-color 200ms, background-color 200ms; }
.opcion:hover { border-color: var(--gris-2); }
.opcion:has(input:checked) { border-color: var(--cafe); background: #fbf6ee; }
.opcion input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--cafe); }
.opcion b { display: block; font-size: var(--t-s); }
.opcion span { font-size: var(--t-ceja); color: var(--gris-1); }
.pago-aviso { background: var(--marfil); border: 1px dashed var(--gris-2); border-radius: var(--r-2); padding: var(--e-4); font-size: var(--t-s); color: var(--gris-1); display: grid; gap: 6px; }
.pago-aviso b { color: var(--tinta); }
.pago-resumen { background: var(--marfil); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); font-size: var(--t-s); }
.pago-botones { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); }
.comprobante { text-align: center; justify-items: center; }
.comprobante:focus { outline: none; }
.comp-sello { display: inline-block; font-size: var(--t-ceja); font-weight: 700; color: var(--cafe); background: var(--crema); border-radius: var(--r-full); padding: 4px var(--e-3); }
.comp-folio { font: 400 clamp(2rem, 8vw, 2.6rem)/1 var(--f-titulo); letter-spacing: .04em; }
.comp-qr { width: 168px; height: 168px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); padding: var(--e-2); box-shadow: var(--sombra-1); }
.comp-qr svg, .comp-qr img { width: 100%; height: 100%; }
.comp-qr .qr-texto { font: 400 1.1rem/1.2 var(--f-titulo); }
.comp-lista { text-align: left; width: 100%; font-size: var(--t-s); background: var(--marfil); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); display: grid; gap: 4px; }
.comp-botones { display: grid; gap: var(--e-2); width: 100%; }

/* ---------- toast ---------- */
.aviso-flotante { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); background: var(--tinta); color: var(--blanco); padding: var(--e-3) var(--e-5); border-radius: var(--r-full); font-size: var(--t-s); font-weight: 600; box-shadow: var(--sombra-3); opacity: 0; pointer-events: none; transition: all 300ms var(--ease); z-index: 60; max-width: calc(100% - 32px); text-align: center; }
.aviso-flotante.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- revelado al scroll ---------- */
html.js .revela { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .revela { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}