/* =====================================================================
   EL TALLER AROMÁTICO
   Dirección tomada de la referencia del cliente: marfil cálido, cacao y
   camel; serif clásica para los nombres, sans neutra para la interfaz;
   tarjetas blancas de esquinas suaves, chips de acordes y botones
   redondeados. El lujo lo carga la fotografía y el aire, no el color.
   ===================================================================== */

/* ---------- 1. Materia ------------------------------------------------ */
:root {
  --marfil:   #f6f2eb;   /* fondo de página */
  --nata:     #fffdfa;   /* tarjetas y superficies */
  --arena:    #f0eae0;   /* planchas de producto, chips, pistas */
  --arena-2:  #e7ded1;

  --tinta:    #2b2621;
  --tinta-2:  #6e6559;
  --tinta-3:  #9a9086;

  --cacao:    #8a6a4b;   /* botones y acentos sólidos */
  --cacao-osc:#6a5643;   /* franjas y hover */
  --camel:    #b08d57;   /* subrayados, barras de acorde, detalles */
  --camel-cl: #c6a87c;

  --linea:    #e8e0d4;
  --linea-2:  #f0e9de;

  --fem: #a06a72;
  --mas: #55707f;
  --uni: #7a6f8c;

  --placa:      #f0eae0;   /* siempre clara: las fotos vienen sobre blanco */
  --placa-tinta:#c9bda9;

  --serie: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r:      12px;
  --r-sm:   9px;
  --r-pill: 999px;

  --sombra:    0 1px 2px rgba(80,60,35,.04), 0 6px 18px -10px rgba(80,60,35,.16);
  --sombra-alt:0 2px 6px rgba(80,60,35,.06), 0 18px 36px -18px rgba(80,60,35,.28);

  --pliego: 1280px;
  --cab: 92px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="marfil"]) {
    --marfil:  #1a1512;
    --nata:    #221c18;
    --arena:   #2c2521;
    --arena-2: #382f28;
    --tinta:   #f3ece1;
    --tinta-2: #b3a696;
    --tinta-3: #8a7f72;
    --cacao:   #b18a5f;
    --cacao-osc:#c6a87c;
    --camel:   #c6a87c;
    --camel-cl:#d8bf98;
    --linea:   #362d26;
    --linea-2: #2a231e;
    --fem: #cf9aa1; --mas: #8fb0c2; --uni: #a99bbd;
    --sombra:    0 1px 2px rgba(0,0,0,.3), 0 8px 22px -12px rgba(0,0,0,.6);
    --sombra-alt:0 2px 8px rgba(0,0,0,.4), 0 22px 44px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

:root[data-tema="cacao"] {
  --marfil:  #1a1512;
  --nata:    #221c18;
  --arena:   #2c2521;
  --arena-2: #382f28;
  --tinta:   #f3ece1;
  --tinta-2: #b3a696;
  --tinta-3: #8a7f72;
  --cacao:   #b18a5f;
  --cacao-osc:#c6a87c;
  --camel:   #c6a87c;
  --camel-cl:#d8bf98;
  --linea:   #362d26;
  --linea-2: #2a231e;
  --fem: #cf9aa1; --mas: #8fb0c2; --uni: #a99bbd;
  --sombra:    0 1px 2px rgba(0,0,0,.3), 0 8px 22px -12px rgba(0,0,0,.6);
  --sombra-alt:0 2px 8px rgba(0,0,0,.4), 0 22px 44px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---------- 2. Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--serie); font-weight: 500; line-height: 1.12; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--camel); outline-offset: 2px; border-radius: 4px; }

.hoja { width: 100%; max-width: var(--pliego); margin-inline: auto; padding-inline: 20px; }

.etq { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.sub { font-size: 15px; color: var(--tinta-2); }

/* ---------- 3. Cabecera ------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--marfil) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; gap: 16px; height: var(--cab); }
.cabecera__marca { display: flex; align-items: center; gap: 12px; min-width: 0; }

.sello { width: 72px; height: 72px; flex: none; object-fit: contain; }
.sello--oro { display: none; }
:root[data-tema="cacao"] .sello--tinta { display: none; }
:root[data-tema="cacao"] .sello--oro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="marfil"]) .sello--tinta { display: none; }
  :root:not([data-tema="marfil"]) .sello--oro { display: block; }
}

.rotulo { display: none; flex-direction: column; gap: 1px; min-width: 0; }
.rotulo__nombre { font-family: var(--serie); font-size: 23px; font-weight: 600;
  letter-spacing: .005em; white-space: nowrap; line-height: 1.1; }
.rotulo__pie { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-3); white-space: nowrap; }

.indice { display: none; margin-left: 28px; gap: 30px; }
.indice a {
  font-size: 13.5px; color: var(--tinta-2); padding-bottom: 4px;
  border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s;
}
.indice a:hover { color: var(--tinta); }
.indice a.aqui { color: var(--tinta); border-bottom-color: var(--camel); }

.cabecera__util { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tecla { width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--tinta-2); transition: background .2s, color .2s; }
.tecla:hover { background: var(--arena); color: var(--tinta); }
.tecla svg { width: 18px; height: 18px; }

.bolsa { position: relative; }
.bolsa__n {
  position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--cacao); color: #fff9f0; font-size: 10px; font-weight: 600; line-height: 1;
}

/* ---------- 4. Portada --------------------------------------------------- */
.frontis { padding-block: 8px 0; }
.frontis__caja {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--nata); border: 1px solid var(--linea);
  display: grid; gap: 0; grid-template-columns: 1fr;
}
.frontis__texto { padding: 40px 28px 44px; }
.frontis__sello { width: 180px; height: 180px; object-fit: contain; margin: 0 auto 24px; display: block; }
.frontis h1 { font-size: clamp(38px, 9vw, 62px); font-weight: 500; letter-spacing: -.01em; line-height: 1.02; }
.frontis__lema { font-family: var(--serie); font-size: clamp(21px, 4.6vw, 29px);
  font-weight: 400; color: var(--tinta-2); margin: 14px 0 0; line-height: 1.25; }
.frontis__nota { max-width: 46ch; color: var(--tinta-2); margin: 18px 0 0; }
.frontis__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }

.frontis__lamina {
  position: relative; min-height: 240px; background: var(--arena);
  display: grid; place-items: center; overflow: hidden;
}
.frontis__lamina img { width: 100%; height: 100%; object-fit: cover; }
.frontis__lamina::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--linea);
}
.frontis__lamina img.frontis__marca-agua {
  width: 56%; max-width: 230px; height: auto; object-fit: contain; opacity: .34;
}

.frontis__datos {
  display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 26px;
}
.dato {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--arena); font-size: 13px; color: var(--tinta-2);
}
.dato b { font-family: var(--serie); font-size: 17px; font-weight: 600; color: var(--tinta); }

/* ---------- 5. Botones ---------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding-inline: 26px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 500; letter-spacing: .01em;
  background: var(--cacao); color: #fff9f0; border: 1px solid var(--cacao);
  transition: background .2s, border-color .2s, transform .2s;
}
.boton:hover { background: var(--cacao-osc); border-color: var(--cacao-osc); transform: translateY(-1px); }
:root[data-tema="cacao"] .boton, :root:not([data-tema="marfil"]) .boton { color: #1d1611; }
.boton svg { width: 15px; height: 15px; flex: none; }
.boton--hueco { background: none; color: var(--tinta); border-color: var(--linea); }
.boton--hueco:hover { background: var(--arena); border-color: var(--arena-2); color: var(--tinta); transform: none; }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: .4; pointer-events: none; }

.enlace svg { width: 15px; height: 15px; flex: none; }
.enlace {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: var(--cacao);
  transition: gap .2s, color .2s;
}
.enlace:hover { gap: 11px; color: var(--cacao-osc); }

/* ---------- 6. Familias en portada ---------------------------------------- */
.aromas { padding-block: 46px 8px; }
.aromas__cab { text-align: center; margin-bottom: 26px; }
.aromas__cab h2 { font-size: clamp(26px, 5vw, 34px); font-weight: 500; }
.aromas__cab p { margin: 8px 0 0; color: var(--tinta-2); }
.aromas__fila {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.aroma { display: flex; flex-direction: column; gap: 9px; text-align: center; }
.aroma__tinte {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  border: 1px solid var(--linea); display: grid; place-items: center; overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.aroma:hover .aroma__tinte { transform: translateY(-3px); box-shadow: var(--sombra); }
/* el dibujo es el respaldo: si la foto no carga, queda el tinte con el trazo */
.aroma__tinte svg { width: 46%; height: 46%; opacity: .85; }
.aroma__tinte img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.aroma:hover .aroma__tinte img { transform: scale(1.06); }
.aroma span { font-size: 12.5px; color: var(--tinta-2); }
.aroma:hover span { color: var(--tinta); }

/* ---------- 7. Filtros ----------------------------------------------------- */
.cajonera { padding-block: 30px 0; scroll-margin-top: calc(var(--cab) + 14px); }
.cajonera__cab { margin-bottom: 20px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cajonera__cab h2 { font-size: clamp(28px, 5.4vw, 38px); font-weight: 500; }
.cajonera__cab p { margin: 6px 0 0; color: var(--tinta-2); }
.cajonera__cab .conteo { margin-left: auto; }

.mandos { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 22px; }

.busca {
  display: flex; align-items: center; gap: 11px; height: 46px; padding-inline: 16px;
  background: var(--nata); border: 1px solid var(--linea); border-radius: var(--r-pill);
}
.busca svg { width: 16px; height: 16px; color: var(--tinta-3); flex: none; }
.busca input { flex: 1; min-width: 0; background: none; border: 0; padding: 0; font-size: 14.5px; }
.busca input::placeholder { color: var(--tinta-3); }
.busca input:focus { outline: none; }
.busca:focus-within { border-color: var(--camel); }
.borrar { font-size: 12px; color: var(--tinta-3); }
.borrar:hover { color: var(--cacao); }

.mando {
  appearance: none; height: 46px; padding: 0 38px 0 16px; border-radius: var(--r-pill);
  background: var(--nata); border: 1px solid var(--linea); color: var(--tinta-2);
  font-size: 13.5px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9086' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px;
}
.mando:focus { outline: none; border-color: var(--camel); }

.mini {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 18px;
  border-radius: var(--r-pill); border: 1px solid var(--linea); background: var(--nata);
  font-size: 13.5px; color: var(--tinta-2);
}
.mini:hover { border-color: var(--arena-2); color: var(--tinta); }
.mini.puesta { border-color: var(--cacao); color: var(--cacao); }
.mini svg { width: 16px; height: 16px; flex: none; }

.conteo { font-size: 13px; color: var(--tinta-3); white-space: nowrap; }
.conteo b { color: var(--tinta); font-weight: 600; }

.gaveta { padding: 20px; margin-bottom: 22px; background: var(--nata);
  border: 1px solid var(--linea); border-radius: var(--r); }
.gaveta__grupo + .gaveta__grupo { margin-top: 20px; }
.gaveta__titulo { margin: 0 0 11px; }
.notas-nube { display: flex; flex-wrap: wrap; gap: 7px; max-height: 168px; overflow-y: auto; }
.nota-btn {
  font-size: 12px; padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--linea); background: var(--marfil); color: var(--tinta-2);
  transition: border-color .2s, color .2s, background .2s;
}
.nota-btn:hover { border-color: var(--camel); color: var(--tinta); }
.nota-btn.puesta { background: var(--cacao); border-color: var(--cacao); color: #fff9f0; }
:root[data-tema="cacao"] .nota-btn.puesta { color: #1d1611; }

/* ---------- 8. Tarjetas ----------------------------------------------------- */
.vitrina {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  padding-block: 4px 56px;
}
.lamina {
  display: flex; flex-direction: column; background: var(--nata);
  border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden;
  transition: box-shadow .28s, transform .28s, border-color .28s;
}
.lamina:hover { box-shadow: var(--sombra-alt); transform: translateY(-3px); border-color: var(--arena-2); }

.lamina__estampa {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--placa); overflow: hidden;
}
.lamina__estampa img { width: 100%; height: 100%; object-fit: contain; padding: 16px;
  mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.lamina:hover .lamina__estampa img { transform: scale(1.05); }
.inicial { font-family: var(--serie); font-size: 46px; color: var(--placa-tinta); }

/* las pocas fotos que no vienen sobre blanco: sin multiply y con esquinas
   suaves, para que se lean como una foto y no como una mancha en la placa */
img.estampa--propia { mix-blend-mode: normal !important; border-radius: var(--r-sm); }

.lamina__sexo { position: absolute; top: 10px; right: 12px; font-size: 13px; opacity: .8; }
.lamina__estampa .sexo-femenino { color: #a06a72; }
.lamina__estampa .sexo-masculino { color: #55707f; }
.lamina__estampa .sexo-unisex { color: #7a6f8c; }

.lamina__pie { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.lamina__nombre { font-family: var(--serie); font-size: 20px; font-weight: 600; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lamina:hover .lamina__nombre { color: var(--cacao); }
.lamina__meta { font-size: 12.5px; color: var(--tinta-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  font-size: 10.5px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--arena); color: var(--tinta-2); white-space: nowrap;
}

.lamina__linea { margin-top: auto; padding-top: 13px; display: flex; align-items: center; gap: 10px; }
.precio { font-family: var(--serie); font-size: 20px; font-weight: 600; }
.lamina__add { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--cacao);
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; white-space: nowrap; }
.lamina__add svg { width: 14px; height: 14px; flex: none; }
.lamina__add:hover { gap: 10px; }

/* ---------- 9. Lista --------------------------------------------------------- */
.registro { padding-block: 4px 56px; display: flex; flex-direction: column; gap: 10px; }
.reg-fila {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 52px minmax(0,1fr) auto;
  padding: 12px 16px; background: var(--nata);
  border: 1px solid var(--linea); border-radius: var(--r);
  transition: box-shadow .2s, border-color .2s;
}
.reg-fila:hover { box-shadow: var(--sombra); border-color: var(--arena-2); }
.reg-fila__estampa {
  width: 52px; height: 64px; display: grid; place-items: center; overflow: hidden;
  background: var(--placa); border-radius: var(--r-sm);
}
.reg-fila__estampa img {
  width: 100%; height: 100%; object-fit: contain; padding: 5px;
  mix-blend-mode: multiply;
}
.inicial--mini { font-size: 24px; }
.reg-fila__nombre { font-family: var(--serie); font-size: 20px; font-weight: 600; line-height: 1.2; }
.reg-fila:hover .reg-fila__nombre { color: var(--cacao); }
.reg-fila__casa { display: block; margin-top: 2px; font-family: var(--sans);
  font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
.reg-fila__fam { display: none; font-size: 12.5px; color: var(--tinta-2); }
.reg-fila__sexo { display: none; font-size: 13px; }
.reg-fila__fin { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.reg-fila__add { font-size: 12.5px; font-weight: 500; color: var(--cacao); display: none; }

@media (min-width: 820px) {
  .reg-fila { grid-template-columns: 58px minmax(0,1fr) 210px 40px 190px; }
  .reg-fila__estampa { width: 58px; height: 72px; }
  .reg-fila__fam, .reg-fila__sexo, .reg-fila__add { display: block; }
  .reg-fila__sexo { text-align: center; }
}

/* ---------- 10. Ficha --------------------------------------------------------- */
.ficha { padding-block: 26px 64px; }
.rastro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; font-size: 12.5px; color: var(--tinta-3); }
.rastro a:hover { color: var(--cacao); }

.ficha__reja { display: grid; gap: 32px; }
.ficha__plancha { margin: 0; background: var(--nata); border: 1px solid var(--linea);
  border-radius: var(--r); overflow: hidden; }
.ficha__estampa { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: var(--placa); }
.ficha__estampa img { width: 100%; height: 100%; object-fit: contain; padding: 40px; mix-blend-mode: multiply; }
.ficha__estampa .inicial { font-size: 104px; }
.ficha__leyenda { display: flex; gap: 16px; padding: 13px 18px; font-size: 12.5px;
  color: var(--tinta-3); border-top: 1px solid var(--linea); }
.ficha__leyenda span:last-child { margin-left: auto; }

.ficha h1 { font-size: clamp(32px, 6.6vw, 46px); font-weight: 500; letter-spacing: -.01em; margin: 0; }
.ficha__meta { margin: 10px 0 0; font-size: 14px; color: var(--tinta-2); }
.ficha__origen { margin: 18px 0 0; color: var(--tinta-2); max-width: 56ch; }
.ficha__origen b { color: var(--tinta); font-weight: 600; }

.seccion { margin-top: 34px; }
.seccion__titulo { font-family: var(--serie); font-size: 22px; font-weight: 600; margin: 0 0 16px; }

.acordes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acordes li { display: grid; grid-template-columns: minmax(86px, 132px) minmax(0,1fr); align-items: center; gap: 16px; }
.acordes__nom { font-size: 13.5px; color: var(--tinta-2); }
.acordes__barra { height: 9px; border-radius: var(--r-pill); background: var(--arena); min-width: 50px; }
.acordes__barra i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--camel), var(--camel-cl)); }

.notas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.nota { margin: 0; text-align: center; }
.nota img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm);
  border: 1px solid var(--linea); background: var(--arena);
}
.nota figcaption { margin-top: 7px; font-size: 12px; color: var(--tinta-2); line-height: 1.25; }

.huele { margin-top: 26px; padding: 20px 22px; background: var(--arena); border-radius: var(--r); }
.huele h3 { font-family: var(--serie); font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.huele p { margin: 0; color: var(--tinta-2); font-size: 14.5px; }

.medidas { display: flex; flex-wrap: wrap; gap: 12px; }
.medida {
  flex: 0 1 216px; padding: 16px 20px; text-align: left;
  background: var(--nata); border: 1px solid var(--linea); border-radius: var(--r);
  transition: border-color .2s;
}
.medida:hover { border-color: var(--arena-2); }
.medida.puesta { border-color: var(--cacao); box-shadow: 0 0 0 1px var(--cacao) inset; }
.medida__t { display: block; margin-bottom: 4px; }
.medida__p { font-family: var(--serie); font-size: 28px; font-weight: 600; }

.promo-sello {
  margin: 16px 0 0; padding: 14px 18px; border-radius: var(--r);
  background: var(--arena); font-size: 13.5px; color: var(--tinta-2);
}
.promo-sello b { color: var(--cacao); font-weight: 600; }

/* ---------- 11. Pedido -------------------------------------------------------- */
.telon { position: fixed; inset: 0; z-index: 80; background: rgba(45,32,20,.42);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .28s; }
.telon.abierto { opacity: 1; pointer-events: auto; }

.pedido {
  position: fixed; z-index: 90; inset: 0 0 0 auto; width: min(430px, 100%);
  display: flex; flex-direction: column; background: var(--marfil);
  transform: translateX(100%); transition: transform .34s cubic-bezier(.32,.72,0,1);
  box-shadow: -20px 0 50px -30px rgba(45,32,20,.6);
}
.pedido.abierto { transform: none; }
.pedido__cab { display: flex; align-items: center; gap: 14px; height: 66px;
  padding-inline: 22px; border-bottom: 1px solid var(--linea); }
.pedido__cab h2 { font-size: 23px; font-weight: 600; margin-right: auto; }
.pedido__cuerpo { flex: 1; overflow-y: auto; padding-inline: 22px; }
.pedido__pie { padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea); background: var(--nata); }

.renglon { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea-2); }
.renglon__estampa { width: 58px; height: 70px; flex: none; background: var(--placa);
  border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; }
.renglon__estampa img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.renglon__cuerpo { flex: 1; min-width: 0; }
.renglon__nombre { font-family: var(--serie); font-size: 18px; font-weight: 600; margin: 0; }
.renglon__meta { margin: 2px 0 0; font-size: 11.5px; letter-spacing: .04em;
  text-transform: none; color: var(--tinta-3); }
.renglon__linea { display: flex; align-items: center; gap: 14px; margin-top: 11px; }
.cuenta { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--r-pill); }
.cuenta button { width: 27px; height: 27px; display: grid; place-items: center;
  border-radius: var(--r-pill); font-size: 14px; color: var(--tinta-2); }
.cuenta button:hover { background: var(--arena); color: var(--tinta); }
.cuenta span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 600; }
.renglon__quitar { font-size: 11.5px; color: var(--tinta-3); }
.renglon__quitar:hover { color: var(--cacao); text-decoration: underline; }

.suma { display: flex; align-items: baseline; gap: 14px; padding: 4px 0; font-size: 13.5px; color: var(--tinta-2); }
.suma > :last-child { margin-left: auto; }
.suma--total { padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--linea); }
.suma--total b { font-family: var(--serie); font-size: 30px; font-weight: 600; color: var(--tinta); }
.suma--promo, .suma--promo > :last-child { color: var(--cacao); font-weight: 500; }

.empuje { padding: 11px 15px; border-radius: var(--r-sm); background: var(--arena);
  margin-bottom: 14px; font-size: 12.5px; color: var(--tinta-2); }
.empuje b { color: var(--cacao); }
.apunte { margin: 12px 0 0; font-size: 12px; color: var(--tinta-3); }
.nota-campo {
  width: 100%; padding: 11px 15px; margin: 14px 0; border-radius: var(--r-pill);
  background: var(--marfil); border: 1px solid var(--linea); color: var(--tinta); font-size: 14px;
}
.nota-campo:focus { outline: none; border-color: var(--camel); }

/* ---------- 12. Cuestionario --------------------------------------------------- */
.cuest { max-width: 620px; margin-inline: auto; padding-block: 44px 64px; }
.cuest__paso { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.cuest__paso .etq:last-child { margin-left: auto; }
.cuest h2 { font-size: clamp(28px, 6vw, 40px); font-weight: 500; margin-bottom: 26px; }
.cuest__ops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cuest__op {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 17px 20px; background: var(--nata); border: 1px solid var(--linea);
  border-radius: var(--r); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cuest__op:hover { border-color: var(--cacao); box-shadow: var(--sombra); transform: translateX(3px); }
.cuest__op .etq { flex: none; width: 22px; }
.cuest__op b { font-family: var(--serie); font-size: 21px; font-weight: 600; display: block; }
.cuest__op span { font-size: 13.5px; color: var(--tinta-2); }
.cuest__atras { margin-top: 22px; }

/* ---------- 13. Colofón ---------------------------------------------------------- */
.franja__foto {
  width: 100%; max-width: 190px; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-sm); flex: none;
}
.franja {
  margin-block: 12px 0; padding: 28px; border-radius: var(--r);
  background: var(--cacao-osc); color: #f7efe4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
}
:root[data-tema="cacao"] .franja, :root:not([data-tema="marfil"]) .franja { color: #241b13; }
.franja h2 { font-size: clamp(23px, 4.4vw, 31px); font-weight: 500; margin: 0; }
.franja p { margin: 6px 0 0; opacity: .82; font-size: 14.5px; max-width: 52ch; }
.franja .boton { margin-left: auto; background: #f7efe4; color: #4a3a29; border-color: #f7efe4; }
.franja .boton:hover { background: #fff; border-color: #fff; color: #3a2c1e; }

.colofon { margin-top: 46px; border-top: 1px solid var(--linea); background: var(--nata);
  padding-block: 44px calc(44px + env(safe-area-inset-bottom)); }
.colofon__reja { display: grid; gap: 30px; }
.colofon h3 { margin: 0 0 12px; font-family: var(--sans); }
.colofon p, .colofon li { color: var(--tinta-2); font-size: 14px; margin: 0 0 7px; }
.colofon ul { list-style: none; padding: 0; margin: 0; }
.colofon a:hover { color: var(--cacao); }
.colofon__cierre { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--linea-2);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }

.wa-fijo {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70;
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-pill);
  background: #25a35a; color: #fff; box-shadow: 0 10px 26px -10px rgba(37,163,90,.7);
  transition: transform .2s, background .2s;
}
.wa-fijo:hover { transform: scale(1.06); background: #1e8a4b; }
.wa-fijo svg { width: 25px; height: 25px; }

.recado {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 10px);
  z-index: 95; padding: 12px 22px; border-radius: var(--r-pill);
  background: var(--tinta); color: var(--marfil); font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  max-width: calc(100% - 36px); text-align: center; box-shadow: var(--sombra-alt);
}
.recado.visible { opacity: 1; transform: translate(-50%, 0); }

.nada { padding-block: 76px; text-align: center; }
.nada h3 { font-size: 27px; font-weight: 500; margin-bottom: 10px; }
.nada p { color: var(--tinta-2); margin: 0 0 20px; }

/* ---------- 14. Pliegos anchos ----------------------------------------------------- */
@media (min-width: 560px) {
  .rotulo { display: flex; }
  .vitrina { grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); gap: 20px; }
  .mandos { grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; }
  .aromas__fila { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px; }
}

@media (min-width: 900px) {
  .hoja { padding-inline: 32px; }
  .indice { display: flex; }
  .frontis__caja { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .frontis__texto { padding: 58px 52px 62px; display: flex; flex-direction: column; justify-content: center; }
  .frontis__sello { width: 210px; height: 210px; }
  .frontis__lamina { min-height: 420px; }
  .ficha__reja { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 52px; align-items: start; }
  .vitrina { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 24px; }
}

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