/* Sibariteca · dos casas con un mismo motor.
   La tienda: selección gourmet. Oloroso, marfil y filete de oro, Bodoni.
   El panel: claro y tranquilo, letra grande y frases en vez de siglas. */
:root {
  /* tienda */
  --oloroso: #3A1A14;
  --oloroso-2: #522519;
  --oro: #C29B5E;
  --oro-tinta: #86642F;
  --marfil: #FAF6EE;
  --lino: #EEE6D7;
  --tinta: #21160F;
  --piedra: #6F6052;
  --lacre: #A3291E;

  /* panel */
  --monte: #1D281A;
  --monte-2: #2B3A26;
  --hueso: #ECDFC4;
  --oro-p: #E0B25A;
  --fondo-p: #F1EEE6;
  --blanco: #FFFDF8;
  --texto-p: #1B2318;
  --gris-p: #5B6356;
  --linea-p: #E2DDD0;
  --bien: #2C6A27;   --bien-f: #E2EFD8;
  --flojo: #8E5600;  --flojo-f: #F7E8CB;
  --mal: #B3261E;    --mal-f: #F8E0DC;

  --bodoni: "Bodoni Moda", "Didot", Georgia, serif;
  --gloock: "Gloock", Georgia, serif;
  --texto: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --alto-cab: 58px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--alto-cab); }
body {
  margin: 0;
  font: 400 16px/1.5 var(--texto);
  color: var(--tinta);
  background: var(--lino);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
body[data-tema="panel"] { background: var(--fondo-p); color: var(--texto-p); font-size: 17px; }
body.con-hoja { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
body[data-tema="panel"] :focus-visible { outline-color: var(--monte); }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }

.boton {
  border: 0; border-radius: 2px; padding: 15px 22px; min-height: 52px;
  background: var(--oloroso); color: var(--marfil); font-weight: 600; letter-spacing: .01em;
  transition: transform .16s var(--curva), background .2s;
}
.boton:active:not(:disabled) { transform: scale(.97); }
.boton.ancho { width: 100%; }
.nota { font-size: 14px; color: var(--piedra); margin-top: 12px; }
.nota.centro { text-align: center; }

.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; position: relative; }
.punto::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0;
  animation: latido 2.4s var(--curva) infinite;
}
@keyframes latido { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

/* =====================================================================
   LA TIENDA
   ===================================================================== */
.t-cab {
  position: sticky; top: 0; z-index: 5; height: calc(var(--alto-cab) + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--oloroso); color: var(--marfil);
  border-bottom: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
}
.marca { font-family: var(--bodoni); font-size: 25px; font-weight: 500; text-decoration: none; letter-spacing: .01em; font-optical-sizing: auto; }
.boton-cesta {
  border: 1px solid color-mix(in srgb, var(--oro) 70%, transparent); border-radius: 2px; padding: 8px 12px; min-height: 40px;
  background: transparent; color: var(--marfil); font-weight: 500; font-size: 15px; display: flex; gap: 10px; align-items: center;
}
a.boton-cesta { text-decoration: none; }
.boton-cesta b { font-family: var(--bodoni); font-weight: 500; color: var(--oro); font-size: 17px; min-width: 1ch; }

.t-sobre { font-family: var(--bodoni); font-style: italic; font-size: 16px; color: var(--oro-tinta); }

/* Portada: el oloroso de la bota, un filete de oro y la frase. */
.t-portada { background: var(--oloroso); color: var(--marfil); padding: 14px 14px 18px; }
.t-marco {
  position: relative; max-width: 1080px; margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--oro) 70%, transparent);
  outline: 1px solid color-mix(in srgb, var(--oro) 30%, transparent); outline-offset: -6px;
  padding: 44px 22px 30px; min-height: min(78svh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.t-portada .t-sobre { color: var(--oro); }
.t-portada h1 {
  font-family: var(--bodoni); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(44px, 12.4vw, 104px); line-height: .98; letter-spacing: -.02em;
  margin: 16px 0 0; max-width: 11ch; text-wrap: balance;
}
.t-portada h1 em { font-style: italic; color: var(--oro); }
.t-lema { margin-top: 22px; max-width: 34ch; font-size: 17px; line-height: 1.55; color: color-mix(in srgb, var(--marfil) 82%, transparent); }
.t-cta {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  margin-top: 28px; padding: 14px 26px; min-height: 52px; border-radius: 2px;
  background: var(--marfil); color: var(--oloroso); border: 0; text-decoration: none; font-weight: 600;
  transition: transform .16s var(--curva);
}
.t-cta:active { transform: scale(.97); }
.t-cta.claro { background: transparent; color: var(--marfil); border: 1px solid var(--oro); }
.t-directo { display: flex; align-items: center; gap: 10px; margin-top: 30px; padding-top: 16px; font-size: 14px; color: var(--oro); border-top: 1px solid color-mix(in srgb, var(--oro) 25%, transparent); }

.t-portada .t-sobre, .t-portada h1, .t-lema, .t-portada .t-cta, .t-directo { animation: sube .9s var(--curva) both; }
.t-portada h1 { animation-delay: .08s; }
.t-lema { animation-delay: .2s; }
.t-portada .t-cta { animation-delay: .3s; }
.t-directo { animation-delay: .4s; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } }

/* La pieza de la casa */
.t-pieza { max-width: 560px; margin: 0 auto; padding: 44px 16px 10px; text-align: center; }
.t-pieza .t-sobre { margin-bottom: 16px; }
.t-pieza-texto { font-family: var(--bodoni); font-style: italic; font-size: 19px; line-height: 1.45; margin-top: 20px; color: var(--tinta); text-wrap: pretty; }

/* Familias: pestañas de texto, subrayado de oro en la elegida. */
.t-cats {
  position: sticky; top: calc(var(--alto-cab) + env(safe-area-inset-top)); z-index: 4;
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
  margin-top: 36px; padding: 0 16px; background: var(--lino);
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.t-cats::-webkit-scrollbar { display: none; }
.pestana {
  flex: none; border: 0; background: none; padding: 15px 0 13px; font-size: 15px; color: var(--piedra);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s;
}
.pestana.activo { color: var(--tinta); border-bottom-color: var(--oro-tinta); font-weight: 600; }

.t-main { max-width: 1080px; margin: 0 auto; padding: 0 16px 20px; }
.t-grupo { padding-top: 38px; }
.t-grupo header { margin-bottom: 18px; }
.t-grupo h2 { font-family: var(--bodoni); font-optical-sizing: auto; font-size: 34px; line-height: 1; letter-spacing: -.01em; }
.t-grupo header p { font-family: var(--bodoni); font-style: italic; font-size: 17px; color: var(--piedra); margin-top: 8px; max-width: 40ch; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* La etiqueta: marfil, doble filete de oro, origen en cursiva. Como una etiqueta de vino. */
.eti {
  display: flex; flex-direction: column; text-align: center; width: 100%; text-decoration: none;
  border: 0; padding: 6px; border-radius: 1px; background: var(--marfil); color: var(--tinta);
  box-shadow: 0 1px 0 rgba(33, 22, 15, .06), 0 14px 26px -20px rgba(33, 22, 15, .55);
  transition: transform .2s var(--curva), box-shadow .2s;
}
.eti:active { transform: scale(.98); }
.eti-foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 6px; background: var(--lino); }
.eti-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--curva); }
.eti-km {
  position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; font-family: var(--bodoni); font-style: italic; font-size: 12.5px;
  background: color-mix(in srgb, var(--marfil) 92%, transparent); color: var(--oloroso);
}
.eti .eti-marco { min-height: 128px; padding: 14px 8px 12px; }
.eti-marco {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 168px; padding: 18px 10px 16px;
  border: 1px solid var(--oro);
  box-shadow: inset 0 0 0 3px var(--marfil), inset 0 0 0 4px color-mix(in srgb, var(--oro) 55%, transparent);
}
.eti-origen { font-family: var(--bodoni); font-style: italic; font-size: 13px; color: var(--oro-tinta); line-height: 1.25; }
.eti-nombre { font-family: var(--bodoni); font-optical-sizing: auto; font-weight: 500; font-size: 17.5px; line-height: 1.15; text-wrap: balance; }
.eti-filete { width: 28px; height: 5px; position: relative; }
.eti-filete::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: var(--oro); }
.eti-filete::after { content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; background: var(--marfil); border: 1px solid var(--oro); transform: rotate(45deg); }
.eti-detalle { font-size: 12.5px; color: var(--piedra); line-height: 1.35; }
.eti-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 11px 4px 4px; }
.precio { font-family: var(--bodoni); font-weight: 500; font-size: 18px; }

.eti.grande { padding: 8px; }
.eti.grande .eti-marco { min-height: 250px; gap: 10px; padding: 30px 18px 26px; }
.eti.grande .eti-nombre { font-size: 28px; }
.eti.grande .eti-origen { font-size: 16px; }
.eti.grande .eti-detalle { font-size: 14px; }
.eti.grande .precio { font-size: 22px; }

/* Lo que queda en la estantería: se mueve sola cuando se vende en el mostrador. */
.quedan {
  position: relative; flex: none; padding: 3px 9px 3px 16px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--lino); color: var(--oloroso);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
}
.quedan::before { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--marfil); }
.quedan.ultimas { background: var(--lacre); color: var(--marfil); }
.quedan.agotado { background: #8C8172; color: var(--marfil); }
.quedan.cambia { animation: cambia 1.2s var(--curva); }
@keyframes cambia {
  0% { transform: translateY(-6px) rotate(-6deg); filter: brightness(1.25); }
  45% { transform: translateY(1px) rotate(2deg); }
  100% { transform: none; filter: none; }
}

.t-encargo { margin-top: 48px; background: var(--oloroso); color: var(--marfil); padding: 48px 22px; text-align: center; }
.t-encargo .t-sobre { color: var(--oro); }
.t-encargo h2 { font-family: var(--bodoni); font-optical-sizing: auto; font-size: clamp(32px, 9vw, 54px); line-height: 1.02; margin: 12px auto 0; max-width: 14ch; text-wrap: balance; }
.t-encargo h2 em { color: var(--oro); }
.t-encargo p:not(.t-sobre) { margin: 18px auto 0; max-width: 38ch; color: color-mix(in srgb, var(--marfil) 82%, transparent); }
.t-encargo .t-cta { align-self: center; }

.t-casa { max-width: 1080px; margin: 0 auto; padding: 40px 16px 10px; display: grid; gap: 26px; }
.t-casa h3 { font-family: var(--bodoni); font-size: 22px; font-weight: 500; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--oro); }
.t-casa p { color: var(--piedra); max-width: 40ch; }

.pie { text-align: center; font-size: 13px; padding: 40px 16px calc(32px + env(safe-area-inset-bottom)); color: var(--piedra); }
.pie-marca { display: block; font-family: var(--bodoni); font-size: 26px; color: var(--tinta); margin-bottom: 6px; }
.pie small { display: inline-block; margin-top: 8px; font-size: 12.5px; }

/* ficha y cesta */
.ficha { text-align: center; padding-top: 44px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ficha .eti.grande { box-shadow: none; background: var(--marfil); }
.ficha-familia { font-family: var(--bodoni); font-style: italic; color: var(--oro-tinta); margin-top: 22px; }
.ficha-nombre { font-family: var(--bodoni); font-size: 28px; line-height: 1.1; margin-top: 4px; }
.ficha-texto { font-size: 17px; margin: 20px auto 0; max-width: 40ch; }
.ficha-stock { font-weight: 600; color: var(--oloroso); margin: 14px 0 20px; }
.fila-comprar { display: flex; gap: 10px; align-items: center; text-align: left; }
.fila-comprar .boton { flex: 1; }
.paso { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 2px; }
.paso button { width: 46px; height: 50px; border: 0; background: none; font-size: 22px; }
.paso span, .paso b { min-width: 24px; text-align: center; font-weight: 700; }
.paso.pequeño button { width: 38px; height: 38px; font-size: 18px; }
.hoja-titulo { font-family: var(--bodoni); font-size: 30px; line-height: 1.1; padding-right: 70px; }
.hoja-sub { margin-top: 8px; font-size: 16px; color: var(--piedra); }
.lineas { list-style: none; padding: 0; margin: 16px 0; }
.lineas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.lineas small { display: block; color: var(--piedra); font-size: 13px; }
.entrega { border: 0; padding: 0; margin: 6px 0 18px; }
.entrega legend { font-family: var(--bodoni); font-size: 19px; margin-bottom: 4px; }
.entrega label { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.entrega small { margin-left: auto; color: var(--piedra); }
.entrega input { accent-color: var(--oloroso); width: 20px; height: 20px; }
.hecho { text-align: center; padding-top: 10px; }
.hecho h2 { font-family: var(--bodoni); font-size: 30px; line-height: 1.1; margin: 6px 0 12px; }
.hecho .boton { margin-top: 22px; width: 100%; }

/* ficha: información alimentaria */
.ficha-info { margin: 18px auto 0; max-width: 40ch; text-align: left; border-top: 1px solid color-mix(in srgb, var(--oro) 60%, transparent); }
.ficha-info div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--oro) 35%, transparent); font-size: 15px; }
.ficha-info dt { font-family: var(--bodoni); font-style: italic; color: var(--oro-tinta); }
.ficha-info dd { margin: 0; }

/* casillas antes de pagar */
.casillas { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.casillas label { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.casillas input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--oloroso); }
.casillas a { color: var(--oloroso); font-weight: 600; text-underline-offset: 3px; }

/* textos legales */
.legal { max-width: 720px; margin: 0 auto; padding: 36px 16px 10px; font-size: 16px; line-height: 1.6; }
.legal h1 { font-family: var(--bodoni); font-size: clamp(36px, 10vw, 56px); line-height: 1.02; margin-top: 8px; }
.legal h2 { font-family: var(--bodoni); font-size: 23px; font-weight: 500; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--oro); }
.legal p, .legal ul { margin: 0 0 12px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--oloroso); font-weight: 600; }
.aviso-demo { margin: 18px 0 6px !important; padding: 12px 14px; background: var(--marfil); border-left: 3px solid var(--oro); font-size: 14.5px; color: var(--piedra); }
.hueco { background: color-mix(in srgb, var(--oro) 22%, transparent); border-bottom: 1px dashed var(--oro-tinta); padding: 0 4px; font-style: italic; }
.ficha-legal { margin: 0; }
.ficha-legal div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.ficha-legal dt { color: var(--piedra); }
.ficha-legal dd { margin: 0; }
.tabla-legal { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14.5px; line-height: 1.45; }
.tabla-legal th { text-align: left; font-weight: 600; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--oro); }
.tabla-legal td { padding: 10px 8px 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); vertical-align: top; }
@media (max-width: 639px) {
  .tabla-legal thead { display: none; }
  .tabla-legal tr { display: block; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
  .tabla-legal td { display: block; padding: 2px 0; border: 0; }
  .tabla-legal td:first-child { font-family: var(--bodoni); font-size: 18px; margin-bottom: 4px; }
  .tabla-legal td:not(:first-child) { color: var(--piedra); }
  .tabla-legal td:not(:first-child)::before { content: attr(data-l) ": "; color: var(--tinta); font-weight: 600; }
}
.modelo { background: var(--marfil); border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent); padding: 16px; margin: 6px 0 14px; font-size: 15px; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 14px 0 10px; }
.pie-legal a { color: var(--tinta); font-size: 14px; padding: 6px 0; text-underline-offset: 3px; }

/* índice de la demo */
.demo { max-width: 640px; margin: 0 auto; padding: calc(48px + env(safe-area-inset-top)) 16px 40px; }
.demo h1 { font-family: var(--bodoni); font-size: clamp(38px, 10vw, 60px); line-height: 1; margin-top: 10px; }
.demo h1 em { color: var(--oro-tinta); }
.demo-lista { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 10px; }
.demo-lista a { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--marfil); text-decoration: none; border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent); }
.demo-lista b { font-family: var(--bodoni); font-weight: 500; font-size: 24px; }
.demo-lista span { color: var(--piedra); }

/* =====================================================================
   EL PANEL
   ===================================================================== */
.p-banda { background: var(--monte); color: var(--hueso); padding: calc(14px + env(safe-area-inset-top)) 16px 26px; border-radius: 0 0 26px 26px; }
.p-ancho { max-width: 680px; margin: 0 auto; }
.p-arriba { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; }
.p-marca { font-size: 15px; color: color-mix(in srgb, var(--hueso) 70%, transparent); }
.volver { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; font-weight: 600; color: var(--oro-p); text-decoration: none; }
.volver::before { content: "‹"; font-size: 24px; line-height: 1; margin-right: 8px; }
.pildora {
  flex: none; border: 1.5px solid color-mix(in srgb, var(--hueso) 45%, transparent); background: none; border-radius: 999px;
  padding: 7px 14px; font-weight: 600; font-size: 15px; color: var(--hueso);
}
.pildora.hay { border-color: #F08A75; background: #F08A75; color: var(--monte); }
.p-banda h1 { font-family: var(--gloock); font-size: 32px; line-height: 1.08; margin-top: 14px; }
.p-fecha { margin-top: 4px; color: color-mix(in srgb, var(--hueso) 72%, transparent); font-size: 16px; }
.p-fecha .abierto { color: #B7D07A; }

.p-resumen { margin-top: 24px; }
.r-intro { font-size: 17px; color: color-mix(in srgb, var(--hueso) 85%, transparent); }
.cifra-grande { font-family: var(--gloock); font-size: clamp(50px, 15vw, 68px); line-height: 1; margin-top: 4px; color: #FFF8EA; }
.veredicto { display: inline-block; margin-top: 14px; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 16px; line-height: 1.35; background: rgba(255, 255, 255, .08); }
.veredicto.bien { background: #CFE3B5; color: #1E4419; }
.veredicto.flojo { background: #F3D9A6; color: #5E3A00; }
.veredicto.igual { background: rgba(255, 255, 255, .12); }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin: 20px 0 0; }
.cifras div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--monte-2); }
.cifras dt { font-size: 14px; line-height: 1.25; color: color-mix(in srgb, var(--hueso) 75%, transparent); }
.cifras dd { margin: 0; font-weight: 700; font-size: 20px; }
.directo { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--oro-p); }

.p-main { padding: 18px 16px 0; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.segmentos {
  display: flex; background: var(--blanco); border-radius: 999px; padding: 5px; border: 1px solid var(--linea-p);
  position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 3; box-shadow: 0 8px 20px -14px rgba(27, 35, 24, .5);
}
.segmentos button { flex: 1; border: 0; background: none; border-radius: 999px; min-height: 46px; font-weight: 600; font-size: 16px; color: var(--gris-p); transition: background .2s, color .2s; }
.segmentos button.activo { background: var(--monte); color: var(--hueso); }

.tarjeta { background: var(--blanco); border-radius: 20px; padding: 20px 18px; border: 1px solid var(--linea-p); }
.tarjeta h2 { font-family: var(--gloock); font-size: 24px; line-height: 1.15; }
.explica { color: var(--gris-p); font-size: 15.5px; margin-top: 4px; }
.tarjeta > div { margin-top: 14px; }
.vacio { color: var(--gris-p); }
.todo-bien { padding: 14px 16px; border-radius: 14px; background: var(--bien-f); color: #1E4419; }

.boton-sec {
  border: 1.5px solid var(--monte); border-radius: 999px; padding: 10px 16px; min-height: 44px;
  background: transparent; color: var(--monte); font-weight: 600; font-size: 15px;
  transition: transform .16s var(--curva), background .2s;
}
.boton-sec:active:not(:disabled) { transform: scale(.97); background: var(--fondo-p); }
.boton-sec.ancho { width: 100%; margin-top: 14px; }
body[data-tema="panel"] .boton, #hojas[data-tema="panel"] .boton { border-radius: 999px; background: var(--monte); color: var(--hueso); font-size: 17px; }

.avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avisos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 14px; border-radius: 14px; background: var(--flojo-f); }
.avisos li.cero { background: var(--mal-f); }
.a-texto { flex: 1 1 150px; }
.a-texto b { display: block; font-size: 17px; line-height: 1.25; }
.a-texto span { color: var(--flojo); font-weight: 600; font-size: 15px; }
.avisos li.cero .a-texto span { color: var(--mal); }
.avisos .boton-sec { background: var(--blanco); padding: 8px 14px; min-height: 42px; }
.enlace-mas { margin-top: 12px; border: 0; background: none; padding: 8px 0; font-weight: 600; color: var(--monte); text-decoration: underline; text-underline-offset: 4px; }

.locales { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.locales li + li { border-top: 1px solid var(--linea-p); }
.local { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; text-decoration: none; position: relative; padding-right: 26px; }
.local::after { content: "›"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 28px; color: var(--gris-p); }
.local:active { opacity: .7; }
.l-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.l-nombre { font-family: var(--gloock); font-size: 24px; line-height: 1.1; }
.l-total { font-weight: 700; font-size: 20px; }
.l-tipo { font-size: 15px; color: var(--gris-p); }
.abierto { color: var(--bien); font-weight: 600; }
.l-abajo { align-items: center; flex-wrap: wrap; justify-content: flex-start; margin-top: 4px; }
.etiqueta-tono { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 14.5px; font-weight: 600; background: var(--fondo-p); color: var(--gris-p); }
.etiqueta-tono.bien { background: var(--bien-f); color: var(--bien); }
.etiqueta-tono.flojo { background: var(--flojo-f); color: var(--flojo); }
.l-aviso { font-size: 14.5px; font-weight: 600; color: var(--mal); }

.estrellas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: puesto; }
.estrellas li { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; }
.estrellas .nombre { font-weight: 600; line-height: 1.3; }
.estrellas small { display: block; font-weight: 400; color: var(--gris-p); font-size: 14.5px; }
.estrellas .valor { text-align: right; font-weight: 700; font-size: 18px; }
.estrellas .barra { grid-column: 1 / -1; height: 8px; background: var(--fondo-p); border-radius: 8px; position: relative; overflow: hidden; }
.estrellas .barra::after { content: ""; position: absolute; inset: 0; width: var(--p); background: var(--oro-p); border-radius: 8px; transition: width .6s var(--curva); }

.movs { list-style: none; margin: 0; padding: 0; }
.movs li { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linea-p); align-items: baseline; }
.movs li:first-child { border-top: 0; padding-top: 0; }
.movs .cuando { color: var(--gris-p); font-size: 15px; }
.movs .que { display: flex; flex-direction: column; font-size: 15.5px; line-height: 1.35; }
.movs .que b { font-size: 15px; }
.movs .que span { color: var(--gris-p); }
.movs em { align-self: flex-start; font-style: normal; font-size: 13px; font-weight: 700; color: var(--monte); background: var(--oro-p); padding: 1px 7px; border-radius: 6px; margin: 2px 0; }
.movs .cuanto { font-weight: 700; }
.movs li.nuevo { animation: entra 1.1s var(--curva); }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } }

/* Por horas: la barra dorada es el periodo elegido; la clara de detrás, un día normal. */
.horas { display: flex; align-items: flex-end; gap: 4px; height: 190px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.horas::-webkit-scrollbar { display: none; }
.hora { flex: 1 0 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; border: 0; background: none; padding: 0; border-radius: 8px; }
.col { position: relative; flex: 1; width: 100%; }
.col .media, .col .real { position: absolute; bottom: 0; border-radius: 5px 5px 0 0; height: var(--h); transition: height .6s var(--curva); }
.col .media { left: 0; right: 0; background: #E4DFD2; }
.col .real { left: 20%; right: 20%; background: var(--oro-p); }
.hora .h { font-size: 13px; color: var(--gris-p); min-height: 22px; display: grid; place-items: center; width: 100%; border-radius: 6px; }
.hora.ahora .h { font-weight: 700; color: var(--texto-p); }
.hora.sel .h { background: var(--monte); color: var(--hueso); font-weight: 700; }
.hora.sel .real { background: #B8862B; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14.5px; color: var(--gris-p); margin-top: 14px; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.ley-real { background: var(--oro-p); }
.ley-media { background: #E4DFD2; }
.detalle-hora { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--fondo-p); font-size: 16px; line-height: 1.4; }

.existencias { list-style: none; margin: 0; padding: 0; }
.existencias li { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--linea-p); align-items: baseline; }
.existencias li:first-child { border-top: 0; padding-top: 0; }
.existencias .q { font-weight: 600; color: var(--gris-p); font-size: 15.5px; text-align: right; }
.existencias .nivel { grid-column: 1 / -1; height: 8px; background: var(--fondo-p); border-radius: 8px; position: relative; overflow: hidden; }
.existencias .nivel::after { content: ""; position: absolute; inset: 0; width: var(--p); background: #8FB46A; border-radius: 8px; transition: width .6s var(--curva); }
.existencias li.bajo .q { color: var(--mal); }
.existencias li.bajo .nivel::after { background: var(--mal); }

.ayuda { background: transparent; border: 1.5px dashed #C9C2B2; border-radius: 20px; padding: 0 18px; }
.ayuda summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; }
.ayuda summary::-webkit-details-marker { display: none; }
.ayuda summary::after { content: "Ver"; color: var(--gris-p); font-weight: 500; }
.ayuda[open] summary::after { content: "Cerrar"; }
.ayuda p { color: var(--gris-p); margin-bottom: 12px; }
.ayuda p:last-child { margin-bottom: 18px; }

.barra-baja {
  position: fixed; z-index: 6; left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--fondo-p) 38%);
  display: flex; justify-content: center; pointer-events: none;
}
.boton-prueba {
  pointer-events: auto; width: 100%; max-width: 420px; min-height: 56px;
  border: 0; border-radius: 999px; padding: 0 24px; background: var(--monte); color: var(--hueso);
  font-weight: 700; font-size: 17px; box-shadow: 0 12px 26px -12px rgba(29, 40, 26, .8);
  transition: transform .16s var(--curva);
}
.boton-prueba:active { transform: scale(.97); }
body[data-tema="panel"] .pie { color: var(--gris-p); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* caja de prueba */
.caja-paso { font-weight: 700; margin: 20px 0 10px; }
.caja-locales { display: flex; flex-wrap: wrap; gap: 8px; }
.caja-locales::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1.5px solid var(--linea-p); border-radius: 999px; padding: 10px 16px; min-height: 44px; background: var(--blanco); font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.chip.activo { background: var(--monte); color: var(--hueso); border-color: var(--monte); }
.teclas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tecla {
  position: relative; text-align: left; min-height: 80px; padding: 12px; border-radius: 14px;
  border: 1.5px solid var(--linea-p); background: var(--blanco); color: var(--texto-p);
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px; transition: transform .12s var(--curva), border-color .2s;
}
.tecla:active:not(:disabled) { transform: scale(.96); border-color: var(--monte); }
.tecla span { font-weight: 600; line-height: 1.2; padding-right: 26px; }
.tecla small { color: var(--gris-p); font-size: 13.5px; }
.tecla b { position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; border-radius: 13px; background: var(--monte); color: var(--hueso); font-size: 14px; display: grid; place-items: center; padding: 0 7px; }
.caja-ticket { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); margin: 16px -18px calc(-22px - env(safe-area-inset-bottom)); padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); background: var(--blanco); border-top: 1px solid var(--linea-p); }
.caja-ticket p { margin: 0 0 12px; font-size: 15px; color: var(--gris-p); }
.caja-botones { display: flex; gap: 10px; }
.caja-botones .boton { flex: 1; }
.caja-pagina { padding-top: calc(18px + env(safe-area-inset-top)); }
.caja-pagina .caja { padding-bottom: 22px; }
.caja-pagina .caja-ticket { bottom: 0; margin-bottom: -22px; border-radius: 0 0 20px 20px; padding-bottom: 18px; }

/* =====================================================================
   HOJAS (suben desde abajo) Y AVISOS
   ===================================================================== */
#hojas { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hojas.abierta { pointer-events: auto; }
.fondo-hoja { position: absolute; inset: 0; background: rgba(24, 14, 10, .55); opacity: 0; transition: opacity .3s; }
#hojas.abierta .fondo-hoja { opacity: 1; }
.hoja {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--lino); color: var(--tinta); border-radius: 18px 18px 0 0;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .34s var(--curva);
  max-width: 640px; margin: 0 auto;
}
#hojas[data-tema="panel"] .hoja { background: var(--fondo-p); color: var(--texto-p); border-radius: 24px 24px 0 0; }
#hojas[data-tema="panel"] .hoja-titulo { font-family: var(--gloock); }
#hojas[data-tema="panel"] .hoja-sub, #hojas[data-tema="panel"] .nota { color: var(--gris-p); }
#hojas.abierta .hoja { transform: none; }
.hoja.alta { min-height: 86dvh; }
.cerrar-hoja {
  position: absolute; top: 14px; right: 14px; z-index: 2; border: 0; background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 999px; padding: 8px 14px; min-height: 40px; font-weight: 600; font-size: 15px;
}
.ficha .cerrar-hoja { top: 14px; }
.paso.grande { display: flex; justify-content: space-between; margin: 22px 0 16px; border-radius: 999px; border-width: 1.5px; }
.paso.grande button { width: 70px; height: 64px; font-size: 30px; }
.paso.grande span { font-family: var(--gloock); font-size: 34px; font-weight: 400; }

#avisos-flotantes { position: fixed; z-index: 30; left: 0; right: 0; top: calc(10px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.flotante {
  max-width: 460px; width: 100%; padding: 14px 16px; border-radius: 14px;
  background: var(--monte); color: var(--hueso); font-weight: 600; font-size: 16px; line-height: 1.35;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .55);
  transform: translateY(-16px); opacity: 0; transition: transform .35s var(--curva), opacity .35s;
}
body[data-tema="tienda"] .flotante { background: var(--oloroso); color: var(--marfil); border-radius: 2px; border: 1px solid var(--oro); }
.flotante.alerta, body[data-tema="tienda"] .flotante.alerta { background: var(--mal); color: #fff; border-color: transparent; }
.flotante.dentro { transform: none; opacity: 1; }

/* =====================================================================
   PANTALLAS MÁS ANCHAS
   ===================================================================== */
@media (min-width: 640px) {
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .teclas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-cats { justify-content: center; gap: 30px; }
  .t-casa { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .t-marco { padding: 60px 48px 40px; }
  .hoja { border-radius: 18px; bottom: 16px; left: 16px; right: 16px; }
  #hojas[data-tema="panel"] .hoja { border-radius: 24px; }
  .caja-ticket { bottom: -22px; margin-bottom: -22px; }
}
@media (min-width: 960px) {
  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-portada { padding: 22px 22px 26px; }
  .t-pieza { max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: center; text-align: left; padding-top: 70px; }
  .t-pieza .t-sobre { grid-column: 1 / -1; text-align: center; }
  .t-pieza-texto { font-size: 24px; margin: 0; }
  .eti:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(33, 22, 15, .06), 0 22px 34px -22px rgba(33, 22, 15, .6); }
}

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

/* =====================================================================
   FOTOS, BODEGONES Y FICHA DE PRODUCTO
   ===================================================================== */
.bodegon { margin: 0; }
.bodegon img { display: block; width: 100%; height: auto; }
.bodegon figcaption { font-size: 12px; color: var(--piedra); margin-top: 8px; line-height: 1.4; }
.bodegon figcaption i { font-family: var(--bodoni); font-size: 13.5px; }
.en-portada { margin: -44px -22px 30px; }
.en-portada img { aspect-ratio: 4 / 3; object-fit: cover; }
.en-portada figcaption { color: color-mix(in srgb, var(--marfil) 55%, transparent); padding: 0 22px; }
.t-portada .t-marco { justify-content: flex-start; min-height: 0; overflow: hidden; }
.en-grupo { margin: 0 -16px 22px; }
.en-grupo img { aspect-ratio: 16 / 9; object-fit: cover; }
.en-grupo figcaption { padding: 0 16px; }
.en-encargo { max-width: 560px; margin: -10px auto 30px; border: 1px solid color-mix(in srgb, var(--oro) 60%, transparent); padding: 6px; }
.en-encargo img { aspect-ratio: 4 / 3; object-fit: cover; }
.en-encargo figcaption { color: color-mix(in srgb, var(--marfil) 55%, transparent); padding: 2px 4px 4px; }

.t-pieza { text-align: left; }
.t-pieza .t-sobre { text-align: center; }
.t-pieza-foto { display: block; border: 1px solid var(--oro); padding: 6px; background: var(--marfil); }
.t-pieza-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.t-pieza-cuerpo h2 { font-family: var(--bodoni); font-size: 32px; line-height: 1.05; margin-top: 22px; }
.t-pieza-cuerpo .t-pieza-texto { margin-top: 12px; }
.t-pieza-dato { margin-top: 14px; font-size: 15px; color: var(--piedra); }
.t-pieza-cuerpo .t-cta { background: var(--oloroso); color: var(--marfil); margin-top: 20px; }

.t-orden { display: flex; align-items: center; gap: 6px; padding: 12px 16px 0; max-width: 1080px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.t-orden span { font-family: var(--bodoni); font-style: italic; color: var(--piedra); margin-right: 4px; }
.t-orden button { flex: none; border: 1px solid color-mix(in srgb, var(--tinta) 25%, transparent); background: transparent; padding: 7px 12px; min-height: 38px; font-size: 14.5px; border-radius: 2px; }
.t-orden button.activo { background: var(--oloroso); color: var(--marfil); border-color: var(--oloroso); }
.rejilla.suelta { margin-top: 22px; }

.prod { max-width: 1080px; margin: 0 auto; padding: 14px 16px 10px; }
.migas { display: inline-flex; align-items: center; min-height: 40px; font-size: 14.5px; color: var(--piedra); text-decoration: none; }
.migas::before { content: "‹"; font-size: 22px; margin-right: 8px; color: var(--oro-tinta); }
.prod-foto { margin: 8px -16px 0; }
.prod-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.prod-datos { padding-top: 22px; }
.prod-datos h1 { font-family: var(--bodoni); font-optical-sizing: auto; font-size: clamp(36px, 10vw, 58px); line-height: 1.02; margin-top: 8px; text-wrap: balance; }
.prod-detalle { margin-top: 10px; color: var(--piedra); }
.prod-texto { font-family: var(--bodoni); font-style: italic; font-size: 20px; line-height: 1.45; margin-top: 16px; }
.prod-precio { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--bodoni); font-size: 30px; font-weight: 500; }
.prod-precio .quedan { font-family: var(--texto); }
.prod .ficha-stock { margin: 8px 0 16px; }

.prod-bloque { margin-top: 44px; }
.prod-bloque > h2 { font-family: var(--bodoni); font-size: 30px; line-height: 1.05; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--oro); }
.prod-bloque .ficha-info { margin: 0; max-width: none; }

/* De dónde viene: una línea de oro que va del origen al mostrador. */
.ruta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.ruta-punto { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 13ch; }
.ruta-punto::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--oro-tinta); background: var(--marfil); }
.ruta-punto.fin { align-items: flex-end; text-align: right; }
.ruta-punto.fin::before { background: var(--oloroso); border-color: var(--oloroso); }
.ruta-punto b { font-family: var(--bodoni); font-weight: 500; font-size: 17px; line-height: 1.2; }
.ruta-linea { position: relative; height: 1px; background: color-mix(in srgb, var(--oro) 35%, transparent); align-self: start; margin-top: 6px; }
.ruta-linea i { position: absolute; left: 0; top: -1px; height: 3px; width: calc(18% + var(--k) * 82%); background: var(--oro); transform-origin: left; animation: traza 1.4s var(--curva) both .2s; }
@keyframes traza { from { transform: scaleX(0); } }
.ruta-texto { margin-top: 18px; color: var(--piedra); max-width: 52ch; }

/* Cómo se hace: los pasos, en su orden. */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 22px 44px; counter-increment: paso; }
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--bodoni); font-size: 16px; border: 1px solid var(--oro); border-radius: 50%; background: var(--marfil); color: var(--oloroso);
}
.pasos li::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 1px; background: color-mix(in srgb, var(--oro) 50%, transparent); }
.pasos li:last-child { padding-bottom: 0; }
.pasos li:last-child::after { display: none; }
.pasos b { font-family: var(--bodoni); font-weight: 500; font-size: 20px; line-height: 1.2; }
.pasos span { color: var(--piedra); max-width: 54ch; }

.prod-tomar p { font-family: var(--bodoni); font-style: italic; font-size: 22px; line-height: 1.4; max-width: 34ch; }
.prod-credito { margin-top: 40px; font-size: 12.5px; color: var(--piedra); }
.prod-credito a { color: inherit; }

@media (min-width: 640px) {
  .en-grupo { margin: 0 0 26px; }
  .en-grupo img { aspect-ratio: 21 / 8; }
  .en-grupo figcaption { padding: 0; }
  .en-portada { margin: -60px -48px 36px; }
}
@media (min-width: 960px) {
  .t-portada .t-marco { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 48px; align-content: center; padding: 0 48px 0 0; }
  .en-portada { grid-row: 1 / span 6; margin: 0; align-self: stretch; }
  .en-portada img { height: 100%; aspect-ratio: auto; }
  .en-portada figcaption { position: absolute; left: 12px; bottom: 8px; }
  .t-portada h1 { font-size: clamp(44px, 5.6vw, 84px); }
  .t-pieza { grid-template-columns: 1fr 1fr; }
  .t-pieza-foto { grid-row: 2; }
  .t-pieza-cuerpo { grid-row: 2; }
  .prod-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .prod-foto { margin: 8px 0 0; position: sticky; top: calc(var(--alto-cab) + 20px); }
  .prod-bloque { max-width: 760px; }
  .eti:hover .eti-foto img { transform: scale(1.04); }
}

/* =====================================================================
   LA ALACENA
   Una alacena de pared encalada, como las de las casas antiguas: marco y
   baldas de nogal, el hueco en penumbra y la luz entrando por la izquierda,
   como en los bodegones de Meléndez de donde salen los objetos.
   ===================================================================== */
:root {
  --cal: #F1ECE2;
  --nogal: #4A2E1B;
  --nogal-2: #24150C;
  --nogal-3: #6E4729;
  --veta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='80'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.42' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0.02 0.9 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --veta-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.004' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0.02 0.9 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grano-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.3 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

.t-entrada, .t-escena, .t-escena + .t-directo { background-color: var(--cal); background-image: var(--grano-cal); }
.t-entrada { padding: 34px max(16px, calc((100% - 980px) / 2)) 22px; }
.t-entrada h1 {
  font-family: var(--bodoni); font-optical-sizing: auto; font-size: clamp(38px, 10.6vw, 76px);
  line-height: 1; letter-spacing: -.02em; margin-top: 12px; max-width: 13ch; text-wrap: balance;
}
.t-entrada h1 em { font-style: italic; color: var(--oro-tinta); }
.t-entrada .t-lema { color: var(--piedra); max-width: 44ch; margin-top: 16px; }
.t-modo { display: inline-flex; margin-top: 22px; border: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: 2px; }
.t-modo button { border: 0; background: transparent; padding: 9px 14px; min-height: 42px; font-size: 15px; }
.t-modo button.activo { background: var(--oloroso); color: var(--marfil); }
.t-escena { padding: 22px 10px 10px; }
.t-escena .t-cats, .t-escena .t-orden { background: transparent; }
.t-escena + .t-directo { margin: 0; justify-content: center; border: 0; padding: 14px 16px 34px; color: var(--oro-tinta); }

.alacena {
  position: relative; max-width: 980px; margin: 18px auto 0; padding: 12px 11px 11px;
  background: var(--veta-v), linear-gradient(90deg, var(--nogal-2), var(--nogal) 8%, var(--nogal-3) 50%, var(--nogal) 92%, var(--nogal-2));
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 10, 4, .55), 0 34px 44px -30px rgba(40, 22, 8, .75), 0 0 0 9px color-mix(in srgb, var(--cal) 60%, #d9cfbf);
  perspective: 1800px;
}
/* La cornisa de arriba, con su moldura. */
.alacena::before {
  content: ""; position: absolute; left: -12px; right: -12px; top: -18px; height: 18px; border-radius: 2px 2px 0 0;
  background: var(--veta), linear-gradient(to bottom, var(--nogal-3), var(--nogal) 45%, var(--nogal-2) 46%, var(--nogal) 70%, var(--nogal-2));
  box-shadow: 0 0 0 1px rgba(20, 10, 4, .55), 0 6px 8px -4px rgba(0, 0, 0, .5);
}

.balda {
  --u: 1cqw;
  container-type: inline-size; position: relative;
  background: radial-gradient(120% 95% at 18% 0%, #3E2717 0%, #1F130B 52%, #0E0704 100%);
}
.balda-piezas { position: relative; height: calc(37 * var(--u)); }
/* La tabla vista desde arriba: más oscura al fondo y con luz en el borde. */
.balda-piezas::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(6.2 * var(--u));
  background: var(--veta), linear-gradient(to bottom, #1E120A, #4A2F1C 70%, #6A4428);
}
/* Penumbra: la sombra de la balda de arriba y de los costados. */
.balda::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6, 3, 1, .7), transparent 28%),
    linear-gradient(90deg, rgba(6, 3, 1, .45), transparent 16%, transparent 80%, rgba(6, 3, 1, .6));
  transition: background-color .5s;
}
.con-pieza .balda::after { background-color: rgba(6, 3, 1, .35); }

.balda-canto {
  position: relative; z-index: 6; height: max(14px, calc(3.4 * var(--u)));
  background: var(--veta), linear-gradient(to bottom, #8A5D38, var(--nogal) 30%, var(--nogal-2));
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .75);
  display: flex; justify-content: center; align-items: center;
}
.cartela {
  font-family: var(--bodoni); font-style: italic; font-size: 14px; line-height: 1.2; color: var(--tinta);
  padding: 2px 12px 3px; background: linear-gradient(#F2E8D2, #E3D5B8);
  border: 1px solid rgba(90, 60, 25, .5); box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  transform: rotate(-1.4deg);
}
.balda:nth-child(even) .cartela { transform: rotate(1deg); }

.pieza {
  position: absolute; left: calc(var(--x) * 1%); bottom: calc(.7 * var(--u)); z-index: var(--z);
  height: calc(var(--h) * var(--u)); padding: 0; border: 0; background: none;
  transform: translateX(-50%); transform-origin: 50% 100%;
  transition: transform .6s var(--curva), filter .45s;
}
.pieza.al-fondo { bottom: calc(4.4 * var(--u)); filter: brightness(.8) saturate(.92); }
.pieza img { display: block; height: 100%; width: auto; filter: drop-shadow(0 calc(.5 * var(--u)) calc(.7 * var(--u)) rgba(0, 0, 0, .6)); transition: filter .6s var(--curva); }
.pieza::after {
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: calc(-.8 * var(--u)); height: calc(2.2 * var(--u));
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); transition: opacity .6s, transform .6s var(--curva);
}
.pieza:focus-visible { outline-offset: 4px; }
.pieza.agotada img { filter: grayscale(.85) brightness(.55); }
.con-pieza .pieza:not(.elevada) { filter: brightness(.4) saturate(.7); }
.pieza.elevada { z-index: 8; filter: none; transform: translateX(-50%) translateY(calc(-8 * var(--u))) scale(1.18); transition-duration: .75s; }
.pieza.elevada img { filter: drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .65)) brightness(1.08); }
.pieza.elevada::after { opacity: .3; transform: translateY(calc(8 * var(--u))) scale(.7, .8); }
@media (hover: hover) {
  .alacena:not(.con-pieza) .pieza:hover { transform: translateX(-50%) translateY(calc(-1.2 * var(--u))); }
}

/* Las puertas: se abren una vez por visita. */
.puertas { display: none; position: absolute; inset: 12px 11px 11px; z-index: 20; pointer-events: none; transform-style: preserve-3d; }
.alacena.cerrada .puertas { display: block; }
.puerta {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    radial-gradient(circle at var(--pomo) 50%, #D9B878 0 3px, #6B4E22 4px, rgba(0, 0, 0, .5) 6px, transparent 7px),
    var(--veta-v), linear-gradient(90deg, var(--nogal), var(--nogal-3) 50%, var(--nogal));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
  transition: transform 1.7s cubic-bezier(.55, .05, .25, 1), opacity .45s 1.25s;
}
.puerta::before, .puerta::after {
  content: ""; position: absolute; left: 14%; right: 14%; border: 1px solid rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 5px rgba(255, 220, 170, .05), inset 0 0 0 6px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 220, 170, .12);
}
.puerta::before { top: 4%; bottom: 53%; }
.puerta::after { top: 51%; bottom: 4%; }
.puerta.izq { left: 0; transform-origin: 0 50%; --pomo: calc(100% - 12px); border-right: 1px solid rgba(0, 0, 0, .6); }
.puerta.der { right: 0; transform-origin: 100% 50%; --pomo: 12px; }
.alacena.abriendo .puerta { opacity: 0; }
.alacena.abriendo .puerta.izq { transform: rotateY(-112deg); }
.alacena.abriendo .puerta.der { transform: rotateY(112deg); }

/* La ficha corta que sale al tocar una pieza. */
#hojas.sin-velo .fondo-hoja { background: transparent; }
.hoja.ficha-pieza { max-height: 64dvh; box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .6); }
.ficha-pieza .t-sobre { padding-right: 80px; }
.ficha-pieza .hoja-titulo { margin-top: 6px; }
.pz-texto { font-family: var(--bodoni); font-style: italic; font-size: 18px; line-height: 1.45; margin-top: 14px; text-wrap: pretty; }
.pz-sello { margin-top: 12px; font-size: 14.5px; color: var(--piedra); }
.pz-compra .prod-precio { margin-top: 14px; }
.pz-ficha {
  display: block; margin-top: 14px; padding: 13px; text-align: center; text-decoration: none; font-weight: 600;
  color: var(--oloroso); border: 1px solid var(--oro-tinta); border-radius: 2px;
}

@media (min-width: 960px) {
  .t-escena { padding-top: 34px; }
  .alacena { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 14px 13px 13px; }
  .balda.ancha { grid-column: 1 / -1; --u: .5cqw; }
  .puertas { inset: 14px 13px 13px; }
  .cartela { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .alacena.cerrada .puertas { display: none; }
}

/* =====================================================================
   TODA LA TIENDA, EN CLAVE DE ALACENA
   Pared encalada de fondo, madera de nogal para lo que se pulsa, papel
   de etiqueta para lo que se lee y cajones para lo que sube desde abajo.
   ===================================================================== */
:root {
  --papel: #F4EBD9;
  --papel-2: #E8DBC1;
  --madera: var(--veta), linear-gradient(to bottom, var(--nogal-3), var(--nogal) 55%, var(--nogal-2));
  --sombra-papel: 0 1px 1px rgba(70, 45, 20, .22), 0 14px 22px -16px rgba(60, 35, 15, .55);
}
body[data-tema="tienda"] { background: var(--cal) var(--grano-cal); }
body[data-tema="tienda"] .t-entrada, body[data-tema="tienda"] .t-escena, body[data-tema="tienda"] .t-escena + .t-directo { background: transparent; }

/* Cabecera: la cornisa. */
body[data-tema="tienda"] .t-cab {
  background: var(--madera); border-bottom: 0;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 -4px 0 rgba(255, 220, 170, .12), 0 6px 12px -6px rgba(30, 15, 5, .6);
}
body[data-tema="tienda"] .boton-cesta {
  background: linear-gradient(var(--papel), var(--papel-2)); color: var(--tinta); border: 1px solid rgba(90, 60, 25, .5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5); font-weight: 600;
}
body[data-tema="tienda"] .boton-cesta b { color: var(--lacre); }

/* Lo que se pulsa es de madera; lo secundario, de papel. */
body[data-tema="tienda"] .boton, #hojas[data-tema="tienda"] .boton, body[data-tema="tienda"] .t-cta:not(.claro) {
  background: var(--madera); color: var(--marfil); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .22), 0 2px 0 var(--nogal-2), 0 10px 16px -10px rgba(30, 15, 5, .7);
}
body[data-tema="tienda"] .t-cta.claro, .pz-ficha {
  background: linear-gradient(var(--papel), var(--papel-2)); color: var(--tinta); border: 1px solid rgba(90, 60, 25, .45);
  box-shadow: var(--sombra-papel); border-radius: 3px;
}
body[data-tema="tienda"] .t-modo { border-color: rgba(74, 46, 27, .5); background: color-mix(in srgb, var(--papel) 60%, transparent); }
body[data-tema="tienda"] .t-modo button.activo, body[data-tema="tienda"] .t-orden button.activo { background: var(--madera); color: var(--marfil); border-color: var(--nogal-2); }

/* Cajones: lo que sube desde abajo tiene frente de madera y tirador. */
#hojas[data-tema="tienda"] .hoja {
  background: linear-gradient(var(--papel), var(--papel-2) 140%); border-radius: 3px 3px 0 0; padding-top: 34px;
  box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .65);
}
#hojas[data-tema="tienda"] .hoja::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--madera);
  box-shadow: 0 2px 4px rgba(40, 20, 5, .4);
}
#hojas[data-tema="tienda"] .hoja::after {
  content: ""; position: absolute; top: 5px; left: 50%; width: 54px; height: 6px; margin-left: -27px; border-radius: 3px;
  background: linear-gradient(#E6C887, #8A6427); box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
#hojas[data-tema="tienda"] .cerrar-hoja { top: 26px; background: rgba(74, 46, 27, .1); }
#hojas[data-tema="tienda"] .fondo-hoja { background: rgba(20, 10, 4, .55); }
#hojas.sin-velo[data-tema="tienda"] .fondo-hoja { background: transparent; }
#hojas[data-tema="tienda"] .lineas li { border-bottom-color: rgba(90, 60, 25, .2); }
#hojas[data-tema="tienda"] .entrega label { border-bottom: 1px dashed rgba(90, 60, 25, .25); }
#hojas[data-tema="tienda"] .entrega small { text-align: right; }

/* Avisos: una etiqueta que cae de arriba. */
body[data-tema="tienda"] .flotante {
  background: linear-gradient(var(--papel), var(--papel-2)); color: var(--tinta); border: 1px solid rgba(90, 60, 25, .5);
  border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, .35), 0 16px 24px -14px rgba(0, 0, 0, .55);
  font-family: var(--bodoni); font-style: italic; font-weight: 500; font-size: 17px;
}

/* La lista: cada producto en su hornacina, con la etiqueta debajo. */
body[data-tema="tienda"] .t-cats { background: var(--cal) var(--grano-cal); border-bottom: 1px solid rgba(74, 46, 27, .3); margin-top: 18px; }
body[data-tema="tienda"] .pestana.activo { border-bottom-color: var(--nogal); }
.t-escena .t-main { padding: 0 6px 10px; }
body[data-tema="tienda"] .eti { background: linear-gradient(var(--papel), var(--papel-2)); box-shadow: var(--sombra-papel); border-radius: 2px; }
.eti-hueco {
  position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; overflow: hidden;
  background: radial-gradient(120% 95% at 18% 0%, #3E2717 0%, #1F130B 55%, #0E0704 100%);
  box-shadow: inset 0 0 0 4px var(--nogal), inset 0 0 0 5px rgba(0, 0, 0, .5), inset 0 14px 18px -8px rgba(0, 0, 0, .7);
}
.eti-hueco::before {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 15%;
  background: var(--veta), linear-gradient(to bottom, #1E120A, #4A2F1C 70%, #6A4428);
}
.eti-hueco img {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  width: 80%; height: 72%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)); transition: transform .5s var(--curva);
}
body[data-tema="tienda"] .eti-km {
  top: 10px; left: 10px; bottom: auto; background: linear-gradient(var(--papel), var(--papel-2)); color: var(--tinta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5); transform: rotate(-1.5deg); font-size: 12px; padding: 2px 7px;
}
@media (hover: hover) { .eti:hover .eti-hueco img { transform: translateX(-50%) translateY(-4px); } }

/* Para regalar: el cuadro colgado en la pared. */
body[data-tema="tienda"] .t-encargo { background: transparent; color: var(--tinta); margin-top: 20px; padding: 40px 16px 30px; }
body[data-tema="tienda"] .t-encargo .t-sobre { color: var(--oro-tinta); }
body[data-tema="tienda"] .t-encargo h2 em { color: var(--oro-tinta); }
body[data-tema="tienda"] .t-encargo p:not(.t-sobre) { color: var(--piedra); }
.en-encargo, .cuadro {
  max-width: 560px; margin: 0 auto 26px; padding: 11px; border: 0;
  background: var(--veta-v), linear-gradient(90deg, var(--nogal-2), var(--nogal-3) 50%, var(--nogal-2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 22px 28px -18px rgba(40, 20, 5, .75);
}
.en-encargo img, .cuadro img { display: block; width: 100%; height: auto; outline: 1px solid rgba(194, 155, 94, .65); outline-offset: -1px; }
.en-encargo figcaption { color: color-mix(in srgb, var(--marfil) 60%, transparent); padding: 8px 2px 0; }
.cuadro { margin: 0; }
.cuadro img { aspect-ratio: 1; object-fit: cover; }

/* Cómo llega: tres notas de papel clavadas en la pared. */
.t-casa { gap: 18px; padding-top: 20px; }
.t-casa > div {
  position: relative; padding: 22px 18px 18px; background: linear-gradient(var(--papel), var(--papel-2));
  box-shadow: var(--sombra-papel); transform: rotate(-.5deg);
}
.t-casa > div:nth-child(2) { transform: rotate(.6deg); }
.t-casa > div::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F0D58F, #8A6427 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.t-casa h3 { border-bottom-color: rgba(74, 46, 27, .35); }

/* El pie: el zócalo de madera. */
body[data-tema="tienda"] .pie {
  margin-top: 40px; background: var(--madera); color: color-mix(in srgb, var(--marfil) 72%, transparent);
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .14), inset 0 4px 0 rgba(0, 0, 0, .35);
}
body[data-tema="tienda"] .pie-marca { color: var(--marfil); }
body[data-tema="tienda"] .pie-legal a { color: var(--marfil); }

/* La ficha de cada producto: la pieza en su hornacina, con arco. */
.hornacina { display: block; max-width: 440px; margin: 10px auto 0; }
.hornacina-hueco {
  position: relative; display: block; height: min(86vw, 400px);
  border: 11px solid var(--nogal); border-bottom: 0; border-radius: 220px 220px 0 0 / 150px 150px 0 0;
  background: radial-gradient(110% 80% at 25% 10%, #4A2E1A 0%, #22150C 50%, #0E0704 100%);
  box-shadow: inset 0 18px 26px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(20, 10, 4, .55), 0 0 0 7px color-mix(in srgb, var(--cal) 60%, #d9cfbf);
}
.hornacina-hueco::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%;
  background: var(--veta), linear-gradient(to bottom, #1E120A, #4A2F1C 70%, #6A4428);
}
.hornacina-hueco img {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 82%; height: 66%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .65));
  animation: asoma 1.1s var(--curva) both .15s;
}
@keyframes asoma { from { transform: translateX(-50%) translateY(14px); filter: brightness(.4) drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); } }
.hornacina .balda-canto { height: 16px; margin: 0; border-radius: 0 0 2px 2px; box-shadow: 0 0 0 1px rgba(20, 10, 4, .55), 0 10px 14px -6px rgba(0, 0, 0, .6); }
.hornacina .cartela { font-size: 15px; }
.prod [data-compra] { margin-top: 18px; padding: 4px 16px 16px; background: linear-gradient(var(--papel), var(--papel-2)); box-shadow: var(--sombra-papel); }
.prod-bloque > h2 { border-bottom-color: rgba(74, 46, 27, .35); }
.pasos li::before {
  border: 0; color: var(--marfil); font-weight: 600;
  background: radial-gradient(circle at 35% 30%, #C9503F, var(--lacre) 55%, #6D1810);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(0, 0, 0, .12);
}
.pasos li::after { background: rgba(74, 46, 27, .3); }
.ruta-linea i { background: var(--oro-tinta); }
.alacena.suelta { margin: 4px 0 0; padding: 10px 9px 9px; }
.alacena.suelta::before { left: -9px; right: -9px; top: -14px; height: 14px; }
.alacena.suelta .balda-piezas { height: calc(32 * var(--u)); }
.migas { color: var(--nogal); }

/* Textos legales y créditos: un pliego de papel sobre la pared. */
body[data-tema="tienda"] .legal {
  margin: 22px 10px 0; padding: 28px 18px 22px; background: linear-gradient(var(--papel), var(--papel-2) 160%); box-shadow: var(--sombra-papel);
}
body[data-tema="tienda"] .legal h2 { border-bottom-color: rgba(74, 46, 27, .35); }
body[data-tema="tienda"] .aviso-demo { background: rgba(255, 255, 255, .45); border-left-color: var(--nogal-3); }
body[data-tema="tienda"] .modelo { background: rgba(255, 255, 255, .45); }

@media (min-width: 640px) {
  #hojas[data-tema="tienda"] .hoja { border-radius: 3px; }
  body[data-tema="tienda"] .legal { margin: 34px auto 0; padding: 40px 44px 30px; }
}
@media (min-width: 960px) {
  .prod-cab .hornacina { position: sticky; top: calc(var(--alto-cab) + 24px); margin-top: 18px; }
  .hornacina-hueco { height: 460px; }
}

/* =====================================================================
   CASA SEÑORIAL
   Letra de imprenta antigua, pared de cal con cuerpo y una alacena de
   nogal viejo pero cuidado: cornisa con dentellones, pilastras acanaladas,
   ménsulas bajo cada balda y portaetiquetas de latón.
   ===================================================================== */
:root {
  --bodoni: "Ibarra Real Nova", "Iowan Old Style", Georgia, serif;
  --fell: "IM Fell DW Pica", "Ibarra Real Nova", Georgia, serif;
  --cal: #F0EBE0;
  --nogal: #3F2716;
  --nogal-2: #1F120A;
  --nogal-3: #6A4326;
  --laton: linear-gradient(180deg, #F3DC9E 0%, #C99E52 38%, #8A6224 70%, #C79B4F 100%);
  --veta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='120'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.55' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0 0.015 1.1 0 0 0 -0.32'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.36 0 0 0 0 0.2 0.5 0 0 0 -0.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --veta-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='800'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.0022' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0 0.015 1.1 0 0 0 -0.32'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09 0.012' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.36 0 0 0 0 0.2 0.5 0 0 0 -0.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* La cal: manchas grandes de la brocha, aguas medianas y grano fino. */
  --grano-cal:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.37 0 0 0 0 0.3 0 0 0 0.55 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.009' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.57 0 0 0 0 0.5 0 0 0 0.9 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0015 0.03' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.99 0 0 0 1.4 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
body[data-tema="tienda"], #hojas[data-tema="tienda"], #avisos-flotantes {
  --texto: "Ibarra Real Nova", "Iowan Old Style", Georgia, serif;
}
body[data-tema="tienda"] { font-size: 17.5px; line-height: 1.5; font-variant-numeric: oldstyle-nums proportional-nums; background: var(--cal); background-image: var(--grano-cal); background-size: 300px 300px, 900px 900px, 900px 900px; }
body[data-tema="tienda"] h1, body[data-tema="tienda"] h2, body[data-tema="tienda"] .marca { letter-spacing: 0; }
.t-entrada h1 { font-weight: 500; letter-spacing: -.01em; }
.t-sobre { font-family: var(--fell); font-size: 17px; }

/* Etiquetas de papel en letra de imprenta antigua, en portaetiquetas de latón. */
.cartela {
  font-family: var(--fell); font-size: 15px; letter-spacing: .01em; padding: 3px 14px 4px;
  background: linear-gradient(#F6EEDC, #E7D9BC); border: 0; transform: none;
  box-shadow: 0 0 0 2px #B48A45, 0 0 0 3px #5E431B, 0 2px 3px 3px rgba(0, 0, 0, .45), inset 0 0 6px rgba(120, 85, 40, .25);
  position: relative;
}
.balda:nth-child(even) .cartela { transform: none; }
.cartela::before, .cartela::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F7E3A8, #7A561D 75%);
}
.cartela::before { left: -1px; }
.cartela::after { right: -1px; }
body[data-tema="tienda"] .eti-km, body[data-tema="tienda"] .flotante, .eti-origen { font-family: var(--fell); }
body[data-tema="tienda"] .quedan { font-family: var(--fell); font-weight: 400; font-size: 14px; }

/* La alacena, metida en un muro grueso: el derrame de cal hace sombra. */
.alacena {
  padding: 16px 16px 14px; margin-top: 40px;
  background: var(--veta-v), linear-gradient(90deg, var(--nogal-2), var(--nogal) 6%, var(--nogal-3) 30%, #7A4F2D 50%, var(--nogal-3) 70%, var(--nogal) 94%, var(--nogal-2));
  box-shadow:
    inset 0 0 0 1px rgba(255, 225, 180, .12),
    inset 3px 0 0 rgba(0, 0, 0, .35), inset -3px 0 0 rgba(0, 0, 0, .35),
    0 0 0 1px rgba(20, 10, 4, .7),
    0 0 0 14px #E6DFD1, 0 0 0 15px rgba(120, 100, 75, .25),
    0 40px 50px -26px rgba(40, 22, 8, .8);
}
/* Pilastras acanaladas a los lados del marco. */
.alacena > .balda:first-child::before { display: none; }
.alacena-pilastras { display: none; }
/* Cornisa con dentellones. */
.alacena::before {
  left: -20px; right: -20px; top: -34px; height: 34px; border-radius: 2px 2px 0 0;
  background:
    linear-gradient(to bottom, transparent 0 12px, rgba(0, 0, 0, .45) 12px 13px, transparent 13px),
    repeating-linear-gradient(90deg, #5A381F 0 7px, #24150B 7px 11px) 0 14px / 100% 9px no-repeat,
    linear-gradient(to bottom, #8A5E36, var(--nogal-3) 25%, var(--nogal) 45%, var(--nogal-2) 47%, var(--nogal) 50%, var(--nogal-3) 70%, var(--nogal-2));
  box-shadow: 0 0 0 1px rgba(20, 10, 4, .7), 0 10px 12px -6px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 225, 180, .2);
}
.alacena::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: -12px; height: 12px;
  background: var(--veta), linear-gradient(to bottom, var(--nogal-3), var(--nogal) 50%, var(--nogal-2));
  box-shadow: 0 0 0 1px rgba(20, 10, 4, .7), 0 8px 10px -4px rgba(0, 0, 0, .55);
}
/* Fondo de las baldas: tabla oscura con un punto de almagra. */
.balda { background: radial-gradient(120% 95% at 18% 0%, #432817 0%, #23140B 50%, #100804 100%); box-shadow: inset 6px 0 0 rgba(0, 0, 0, .25), inset -6px 0 0 rgba(0, 0, 0, .25); }
.balda-canto {
  height: max(18px, calc(4.2 * var(--u)));
  background:
    linear-gradient(to bottom, rgba(255, 228, 185, .32) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .35) 3px 4px, transparent 4px),
    var(--veta), linear-gradient(to bottom, #94653C, var(--nogal-3) 30%, var(--nogal) 70%, var(--nogal-2));
}
/* Ménsulas: dos tacos tallados bajo cada balda. */
.balda-canto::before, .balda-canto::after {
  content: ""; position: absolute; top: 100%; width: 12px; height: 16px; z-index: 6;
  background: var(--veta-v), linear-gradient(90deg, var(--nogal), var(--nogal-3), var(--nogal));
  border-radius: 0 0 8px 8px / 0 0 14px 14px; box-shadow: 0 4px 5px rgba(0, 0, 0, .55), inset 0 -3px 0 rgba(0, 0, 0, .3);
}
.balda-canto::before { left: 8%; }
.balda-canto::after { right: 8%; }
.balda:last-child .balda-canto::before, .balda:last-child .balda-canto::after { display: none; }
.balda-piezas::before { background: var(--veta), linear-gradient(to bottom, #1A0F08, #4A2F1C 70%, #6E4A2C); }

/* Puertas de cuarterones con bisagras y bocallave de latón. */
.puerta {
  background:
    var(--veta-v), linear-gradient(90deg, var(--nogal), var(--nogal-3) 45%, #73492A 55%, var(--nogal));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 7px rgba(0, 0, 0, .12);
}
.puerta::before, .puerta::after {
  left: 13%; right: 13%; border: 0;
  background: var(--veta-v), linear-gradient(90deg, #4C2E19, #7A4F2D 50%, #4C2E19);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 225, 180, .14), 0 0 0 9px rgba(0, 0, 0, .18), 0 0 0 10px rgba(255, 225, 180, .1),
    inset 0 2px 0 rgba(255, 225, 180, .2), inset 0 -2px 0 rgba(0, 0, 0, .4);
}
.puerta.izq { --pomo: calc(100% - 11px); }
.puerta.izq, .puerta.der {
  background-image:
    radial-gradient(circle at var(--pomo) 49.4%, #120A04 0 2px, transparent 2.5px),
    linear-gradient(#120A04, #120A04),
    radial-gradient(ellipse 7px 13px at var(--pomo) 50%, #F2D995, #B88B3E 55%, #6E4E1C 80%, transparent 85%),
    var(--veta-v), linear-gradient(90deg, var(--nogal), var(--nogal-3) 45%, #73492A 55%, var(--nogal));
  background-size: auto, 2px 6px, auto, auto, auto;
  background-position: 0 0, var(--pomo) calc(50% + 2px), 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

/* Cajones y botones con su remate de latón. */
#hojas[data-tema="tienda"] .hoja::after { background: var(--laton); height: 7px; }
body[data-tema="tienda"] .boton, #hojas[data-tema="tienda"] .boton, body[data-tema="tienda"] .t-cta:not(.claro) {
  font-family: var(--bodoni); font-weight: 600; font-size: 18px; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(214, 172, 98, .45), inset 0 1px 0 rgba(255, 220, 170, .25), 0 2px 0 var(--nogal-2), 0 10px 16px -10px rgba(30, 15, 5, .7);
}
@media (min-width: 960px) {
  .alacena { padding: 18px 20px 16px; column-gap: 20px; }
  .alacena::before { left: -26px; right: -26px; }
}

/* La tira de la balda dentro del cajón: el resto de la familia. */
.pz-balda {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin: -6px -18px 16px; padding: 12px 18px 0; position: relative;
  background: radial-gradient(120% 120% at 20% 0%, #3E2717, #1C110A 70%);
  box-shadow: inset 0 10px 14px -8px rgba(0, 0, 0, .7), inset 0 -12px 0 #5A3A22, inset 0 -13px 0 rgba(0, 0, 0, .5);
}
.pz-balda::-webkit-scrollbar { display: none; }
.pz-hermano {
  flex: none; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 86px; height: 132px; padding: 0 2px 16px; border: 0; background: none; color: var(--marfil); position: relative;
}
.pz-hermano img {
  height: 84px; width: 100%; object-fit: contain; object-position: 50% 100%;
  filter: brightness(.55) saturate(.8) drop-shadow(0 3px 3px rgba(0, 0, 0, .6));
  transition: transform .4s var(--curva), filter .4s;
}
.pz-hermano span {
  position: absolute; bottom: 0; left: 0; right: 0; height: 13px; overflow: hidden;
  font-family: var(--fell); font-size: 11px; line-height: 13px; text-align: center; white-space: nowrap; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--marfil) 55%, transparent);
}
.pz-hermano[aria-pressed="true"] img { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .6)); transform: translateY(-8px); }
.pz-hermano[aria-pressed="true"] span { color: #F2D995; }
#hojas[data-tema="tienda"] .ficha-pieza .cerrar-hoja { top: 22px; background: rgba(242, 217, 149, .16); color: var(--marfil); z-index: 3; }
.ficha-pieza .pz-balda + [data-pz-ficha] .t-sobre { padding-right: 0; }

/* Los datos del pedido. */
.datos-envio { border: 0; padding: 0; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 12px; }
.datos-envio legend { font-family: var(--bodoni); font-size: 21px; margin-bottom: 8px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo span { font-size: 15px; color: var(--piedra); }
.campo input {
  font: inherit; font-size: 17px; color: var(--tinta); padding: 11px 12px; min-height: 48px; border-radius: 2px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(90, 60, 25, .4);
  box-shadow: inset 0 1px 2px rgba(60, 35, 15, .15);
}
.campo input:focus { outline: 2px solid var(--oro); outline-offset: 1px; background: #fff; }
.campo small { font-size: 13.5px; color: var(--piedra); }
.dos-campos { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
.aviso-cp { font-size: 15px; padding: 10px 12px; background: rgba(163, 41, 30, .08); border-left: 3px solid var(--lacre); color: var(--tinta); }


/* =====================================================================
   EL MONTAJE DE LAS BALDAS
   Cada pieza apoya en la tabla con su sombra de contacto y proyecta otra
   hacia la derecha, porque la luz entra por la izquierda. Las unidades de
   reserva quedan detrás, en más penumbra, o apiladas encima.
   ===================================================================== */
.balda-piezas { height: calc(var(--alto, 37) * var(--u)); }
.balda-piezas::before { height: calc(7 * var(--u)); }
.pieza, .copia { bottom: calc(1.1 * var(--u)); }
.pieza.al-fondo, .copia.al-fondo { bottom: calc(4.6 * var(--u)); }
.copia {
  position: absolute; left: calc(var(--x) * 1%); z-index: var(--z); pointer-events: none;
  height: calc(var(--h) * var(--u)); transform: translateX(-50%);
  bottom: calc((1.1 + var(--dy, 0)) * var(--u)); transition: filter .45s;
}
.copia.al-fondo { bottom: calc((4.6 + var(--dy, 0)) * var(--u)); }
.copia img { display: block; height: 100%; width: auto; }
.copia.detras { filter: brightness(.68) saturate(.85); }
.pieza.al-fondo { filter: brightness(.86) saturate(.95); }
.pieza img, .copia img {
  filter:
    drop-shadow(calc(.9 * var(--u)) calc(.3 * var(--u)) calc(.8 * var(--u)) rgba(8, 4, 1, .55))
    drop-shadow(0 calc(.15 * var(--u)) calc(.15 * var(--u)) rgba(0, 0, 0, .5));
}
/* Sombra de contacto: oscura y pegada a la tabla, más ancha hacia la derecha. */
.pieza::after, .copia::after {
  content: ""; position: absolute; z-index: -1; left: 4%; right: -6%; bottom: calc(-1 * var(--u)); height: calc(2 * var(--u));
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 55%, transparent);
  transition: opacity .6s, transform .6s var(--curva);
}
.copia[style*="--dy:0"]::after, .copia.detras::after { opacity: .8; }
.con-pieza .copia { filter: brightness(.36) saturate(.7); }
.pieza.agotada img { filter: grayscale(.85) brightness(.5); }
@media (min-width: 960px) {
  /* Las baldas de los dos cuerpos, a la misma altura. */
  .alacena:not(.suelta) .balda { display: flex; flex-direction: column; }
  .alacena:not(.suelta) .balda-piezas { flex: 1 0 auto; }
}

/* =====================================================================
   FOTOS DE LA TIENDA CON SUS PRODUCTOS MARCADOS
   ===================================================================== */
.t-fotos { padding: 46px 0 10px; }
.t-fotos-cab { padding: 0 16px; max-width: 980px; margin: 0 auto; }
.t-fotos-cab h2 { font-family: var(--bodoni); font-weight: 500; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; margin-top: 8px; }
.t-fotos-cab p:not(.t-sobre) { color: var(--piedra); margin-top: 10px; max-width: 40ch; }
.fotos-tira {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 22px 16px 26px; max-width: 1012px; margin: 0 auto;
}
.fotos-tira::-webkit-scrollbar { display: none; }
.foto-tienda { flex: none; width: min(82vw, 380px); margin: 0; scroll-snap-align: center; }
.foto-marco {
  position: relative; padding: 9px;
  background: var(--veta-v), linear-gradient(90deg, var(--nogal-2), var(--nogal-3) 50%, var(--nogal-2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 22px 26px -18px rgba(40, 20, 5, .75);
}
.foto-marco img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; outline: 1px solid rgba(194, 155, 94, .6); outline-offset: -1px; }
.foto-tienda figcaption { font-family: var(--fell); font-style: italic; font-size: 16px; color: var(--tinta); margin-top: 10px; line-height: 1.35; }
.foto-tienda figcaption small { display: block; font-family: var(--bodoni); font-style: normal; font-size: 13.5px; color: var(--piedra); margin-top: 2px; }

/* La marca: un clavo de latón con su etiqueta de papel. */
.marca-foto {
  position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.marca-foto i {
  position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F7E3A8, #B88B3E 55%, #6E4E1C);
  box-shadow: 0 0 0 3px rgba(255, 245, 225, .85), 0 2px 6px rgba(0, 0, 0, .6);
}
.marca-foto i::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(255, 245, 225, .8);
  animation: latido 2.4s var(--curva) infinite;
}
.marca-foto span {
  font-family: var(--fell); font-size: 14px; line-height: 1.2; color: var(--tinta); white-space: nowrap;
  padding: 3px 9px 4px; background: linear-gradient(#F6EEDC, #E7D9BC); box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
}
.marca-foto:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

/* Panel: subir y marcar. */
.enlace-boton { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pasos-p { margin: 4px 0 6px; padding-left: 22px; font-size: 17px; line-height: 1.5; }
.pasos-p li { margin-bottom: 4px; }
.subir-foto { display: flex; align-items: center; justify-content: center; margin-top: 14px; cursor: pointer; }
.subir-foto input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.editor-foto { position: relative; margin: 12px -4px 4px; border-radius: 12px; overflow: hidden; }
.editor-foto img { display: block; width: 100%; height: auto; cursor: crosshair; }
.editor-foto .marca-foto span { font-family: var(--texto); font-size: 14px; font-weight: 600; background: #fff; border-radius: 6px; }
.campo-p { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.campo-p span { font-size: 15px; color: var(--gris-p); }
.campo-p input { font: inherit; font-size: 17px; padding: 12px 14px; min-height: 50px; border-radius: 10px; border: 1.5px solid var(--linea-p); background: var(--blanco); color: var(--texto-p); }
.fotos-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fotos-lista li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.fotos-lista img { width: 84px; height: 105px; object-fit: cover; border-radius: 8px; }
.fotos-lista b { display: block; font-size: 16px; }
.fotos-lista span { display: block; font-size: 14.5px; color: var(--gris-p); margin-top: 2px; }
.fotos-lista small { display: block; font-size: 13.5px; color: var(--gris-p); margin-top: 4px; }
.fotos-lista .boton-sec { margin-top: 8px; min-height: 40px; padding: 6px 12px; font-size: 15px; }
.elegir-lista { margin-top: 10px; }
.elegir-grupo h3 { font-size: 15px; color: var(--gris-p); margin: 16px 0 6px; font-weight: 600; }
.elegir { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--linea-p); background: none; text-align: left; font-size: 17px; }
.elegir img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.ficha-stock[hidden] { display: none; }

/* Panel: tu tienda online. */
.p-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.p-atajos .boton-sec { display: inline-flex; align-items: center; text-decoration: none; min-height: 42px; padding: 8px 14px; font-size: 15px; margin: 0; }
.buscar-p { margin: 0 0 14px; }
.catalogo { list-style: none; margin: 4px 0 0; padding: 0; }
.catalogo li + li { border-top: 1px solid var(--linea-p); }
.cat-fila { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 0; border: 0; background: none; text-align: left; color: var(--texto-p); }
.cat-fila img { width: 52px; height: 52px; object-fit: contain; }
.cat-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-datos b { font-size: 17px; line-height: 1.25; }
.cat-datos span { font-size: 14.5px; color: var(--gris-p); }
.cat-stock { font-weight: 600; color: var(--bien) !important; }
.cat-stock.flojo { color: var(--flojo) !important; }
.cat-cambiar { font-size: 15px; font-weight: 600; color: var(--monte); padding: 8px 10px; border-radius: 999px; background: var(--fondo-p); }
.ficha-edicion textarea { font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--linea-p); background: var(--blanco); color: var(--texto-p); resize: vertical; }
.bloque-edicion { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea-p); }
.bloque-edicion h3 { font-size: 18px; font-weight: 700; }
.bloque-edicion .explica { margin-top: 4px; }
.bloque-edicion .paso.grande { margin: 12px 0 6px; }
.interruptor { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; padding-top: 16px; border-top: 1px solid var(--linea-p); font-size: 17px; font-weight: 600; }
.interruptor input { width: 24px; height: 24px; accent-color: var(--monte); }
.salidas { margin: 12px 0 2px; display: flex; flex-direction: column; gap: 2px; }
.salidas b { font-size: 18px; }
.salidas span { font-size: 15px; opacity: .8; }
.p-banda .salidas { color: var(--hueso); }
.tarjeta .salidas { color: var(--texto-p); margin-bottom: 8px; }

/* El índice de familias: una moldura de madera fija bajo la cabecera. */
body[data-tema="tienda"] .t-cats {
  position: sticky; top: calc(var(--alto-cab) + env(safe-area-inset-top)); z-index: 4;
  margin: 26px 0 0; padding: 0 12px; gap: 4px;
  background: var(--madera); border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 225, 180, .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 8px 12px -8px rgba(30, 15, 5, .65);
}
body[data-tema="tienda"] .pestana {
  font-family: var(--bodoni); font-size: 17px; font-weight: 500; letter-spacing: .01em;
  color: color-mix(in srgb, var(--marfil) 78%, transparent); padding: 14px 12px 12px; min-height: 50px;
  border-bottom: 3px solid transparent;
}
body[data-tema="tienda"] .pestana.activo { color: #F6E7C1; border-bottom-color: #C99E52; font-weight: 600; }
body[data-tema="tienda"] .pestana:focus-visible { outline-color: #F2D995; outline-offset: -4px; }
body[data-tema="tienda"] .t-cats + .t-escena { padding-top: 6px; }
@media (min-width: 640px) { body[data-tema="tienda"] .t-cats { justify-content: center; gap: 10px; } }

/* =====================================================================
   LA VITRINA: los productos estrella, sobre terciopelo y tras el cristal
   ===================================================================== */
.t-vitrina { padding: 10px 12px 6px; max-width: 980px; margin: 0 auto; }
.vitrina-cab { padding: 0 4px 16px; }
.vitrina-cab h2 { font-family: var(--bodoni); font-weight: 500; font-size: clamp(28px, 7.6vw, 42px); line-height: 1.05; margin-top: 6px; }
.vitrina {
  position: relative; padding: 10px; border-radius: 3px;
  background: linear-gradient(180deg, #F3DC9E, #B88B3E 18%, #7A5A22 50%, #C99E52 82%, #8A6224);
  box-shadow: 0 0 0 1px #4A3410, 0 26px 34px -22px rgba(40, 22, 8, .8);
}
.vitrina-fondo {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  background: radial-gradient(120% 90% at 30% 0%, #6A1F1A 0%, #3E0F0C 55%, #240706 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 12px 22px -8px rgba(0, 0, 0, .7);
}
/* El cristal: un brillo en diagonal por encima de todo. */
.vitrina-fondo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 22%, transparent 23%, transparent 58%, rgba(255, 255, 255, .06) 59%, transparent 70%);
}
/* Terciopelo con su pelo: un grano fino oscuro. */
.vitrina-fondo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.vitrina-pieza {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 8px 14px; border: 0; background: none; color: var(--marfil); cursor: pointer;
}
.vitrina-pieza + .vitrina-pieza { box-shadow: -1px 0 0 rgba(0, 0, 0, .25); }
.vitrina-hueco { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 132px; position: relative; }
.vitrina-hueco::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -6px; height: 12px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent);
}
.vitrina-hueco img {
  position: relative; z-index: 1; max-width: 88%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, .55));
  transition: transform .5s var(--curva);
}
.vitrina-pieza:active .vitrina-hueco img { transform: translateY(-6px) scale(1.03); }
@media (hover: hover) { .vitrina-pieza:hover .vitrina-hueco img { transform: translateY(-6px) scale(1.03); } }
.vitrina-cartela {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; width: 100%; max-width: 170px;
  padding: 7px 8px 8px; background: linear-gradient(#F6EEDC, #E7D9BC); color: var(--tinta);
  box-shadow: 0 0 0 1.5px #B48A45, 0 0 0 2.5px #5E431B, 0 3px 6px rgba(0, 0, 0, .5);
}
.vc-origen { font-family: var(--fell); font-style: italic; font-size: 13px; color: var(--oro-tinta); line-height: 1.2; }
.vitrina-cartela b { font-family: var(--bodoni); font-weight: 600; font-size: 15.5px; line-height: 1.15; text-wrap: balance; }
.vc-precio { font-family: var(--bodoni); font-size: 16px; margin-top: 2px; }
@media (min-width: 760px) {
  .vitrina-fondo { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .vitrina-hueco { height: 170px; }
}

/* Puntos de la tira de fotos. */
.fotos-puntos { display: flex; justify-content: center; gap: 8px; margin-top: -10px; }
.fotos-puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(74, 46, 27, .25); transition: background .3s, transform .3s; }
.fotos-puntos i.activo { background: var(--nogal); transform: scale(1.25); }

/* Intranet. */
.cat-estrella { align-self: flex-start; font-size: 13px !important; font-weight: 700; color: #6A1F1A !important; background: #F3E2DC; padding: 2px 8px; border-radius: 999px; margin: 2px 0; }
.interruptor small { display: block; font-size: 14px; font-weight: 400; color: var(--gris-p); }
.interruptor + .interruptor { border-top: 0; padding-top: 0; margin-top: -4px; }
@media (max-width: 759px) { .vitrina-pieza:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* La vitrina usa la misma medida que una balda de la alacena. */
.vitrina-fondo { container-type: inline-size; --u: 1cqw; }
.vitrina-hueco { height: calc(37 * var(--u)); }
.vitrina-hueco img { height: calc(var(--h) * var(--u)); width: auto; max-width: 100%; max-height: none; }
@media (min-width: 760px) {
  .vitrina-fondo { --u: .48cqw; }
  .vitrina-hueco { height: calc(37 * var(--u)); }
}
.t-escena .t-vitrina { padding-top: 14px; }
.t-vacia { text-align: center; color: var(--piedra); padding: 40px 16px; }

/* «Joyas de la casa»: el botón de la vitrina, en latón y con un brillo que pasa. */
body[data-tema="tienda"] .t-modo { flex-wrap: wrap; }
body[data-tema="tienda"] .t-modo [data-modo="vitrina"] {
  position: relative; overflow: hidden; font-weight: 700; letter-spacing: .01em; color: #2A1A08;
  background: linear-gradient(180deg, #F6E3A8 0%, #D9B56A 45%, #B88B3E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, .8), inset 0 -1px 0 rgba(90, 60, 20, .5);
}
body[data-tema="tienda"] .t-modo [data-modo="vitrina"] span { position: relative; z-index: 1; }
body[data-tema="tienda"] .t-modo [data-modo="vitrina"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg); animation: destello 4.5s ease-in-out infinite 1.2s;
}
@keyframes destello { 0%, 70% { left: -60%; } 100% { left: 130%; } }
body[data-tema="tienda"] .t-modo [data-modo="vitrina"].activo {
  color: #F6E3A8; background: radial-gradient(120% 140% at 30% 0%, #7A2620, #3E0F0C 70%);
  box-shadow: inset 0 0 0 1.5px #C99E52;
}
@media (prefers-reduced-motion: reduce) { body[data-tema="tienda"] .t-modo [data-modo="vitrina"]::after { display: none; } }

/* Cuenta, permisos y buzón (tienda). */
.opciones-cliente { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 12px 12px; background: rgba(255, 255, 255, .4); border: 1px dashed rgba(90, 60, 25, .35); }
.opcion { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.opcion input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--oloroso); }
.opcion a { color: var(--oloroso); font-weight: 600; }
.saludo-cliente { font-family: var(--fell); font-style: italic; font-size: 17px; margin: 0 0 10px; }
.enlace { border: 0; background: none; padding: 0; font: inherit; color: var(--oloroso); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pie-legal .enlace { color: inherit; font-size: 14px; padding: 6px 0; font-family: inherit; }
body[data-tema="tienda"] .pie-legal .enlace { color: var(--marfil); }
.enlace-peligro { display: block; margin: 16px auto 0; border: 0; background: none; color: var(--lacre); font: inherit; font-size: 15px; text-decoration: underline; }
.cuenta-datos { margin: 14px 0 16px; max-width: none; }
.t-buzon { padding: 36px 14px 6px; }
.buzon-papel {
  max-width: 620px; margin: 0 auto; padding: 26px 18px 22px; position: relative;
  background: linear-gradient(var(--papel), var(--papel-2)); box-shadow: var(--sombra-papel); transform: rotate(-.3deg);
}
.buzon-papel::before {
  content: ""; position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F0D58F, #8A6427 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.buzon-papel h2 { font-family: var(--bodoni); font-weight: 500; font-size: clamp(28px, 7.4vw, 40px); line-height: 1.05; margin-top: 6px; }
.buzon-papel > p:not(.t-sobre) { color: var(--piedra); margin-top: 10px; }
.buzon-papel form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.buzon-papel textarea { font: inherit; font-size: 17px; color: var(--tinta); padding: 11px 12px; border-radius: 2px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(90, 60, 25, .4); resize: vertical; }
.buzon-papel [data-sug-nota] { color: var(--lacre); text-align: center; margin: 0; }

/* Intranet: clientes y buzón. */
.cifra-p { font-size: 17px; margin-bottom: 12px; }
.cifra-p b { font-size: 22px; }
.copiar-p { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.copiar-p .boton-sec { margin: 0; min-height: 44px; padding: 8px 14px; font-size: 15px; flex: 1; }
.clientes-lista, .sug-lista { list-style: none; margin: 0; padding: 0; }
.clientes-lista li, .sug-lista li { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--linea-p); }
.clientes-lista li:last-child, .sug-lista li:last-child { border-bottom: 0; }
.cli-cab { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cli-cab b, .sug-lista b { font-size: 17px; }
.clientes-lista span, .sug-lista span { font-size: 15px; color: var(--gris-p); }
.cli-contacto { color: var(--texto-p) !important; font-weight: 600; }
.cli-msj { font-size: 13px !important; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--fondo-p); white-space: nowrap; }
.cli-msj.si { background: var(--bien-f); color: var(--bien) !important; }
.clientes-lista small, .sug-lista small { font-size: 13px; color: var(--gris-p); }
.sug-lista p { margin: 2px 0; font-size: 15.5px; }
.sug-lista li.vista b { font-weight: 500; }
.sug-lista .boton-sec { align-self: flex-start; margin-top: 8px; min-height: 40px; padding: 6px 14px; font-size: 15px; }

/* =====================================================================
   CATAS
   ===================================================================== */
.t-cab-der { display: flex; align-items: center; gap: 14px; }
.enlace-cab { color: #F6E7C1; font-family: var(--bodoni); font-size: 18px; text-decoration: none; border-bottom: 1px solid rgba(201, 158, 82, .7); padding: 4px 0; }
.t-catas { padding: 46px 12px 6px; max-width: 980px; margin: 0 auto; }
.t-catas-cab { padding: 0 4px 6px; }
.t-catas-cab h2 { font-family: var(--bodoni); font-weight: 500; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; margin-top: 6px; }
.t-catas-cab p:not(.t-sobre) { color: var(--piedra); margin-top: 10px; max-width: 42ch; }
.cata { margin-top: 22px; box-shadow: var(--sombra-papel); }
.cata-tabla {
  --u: 2.6px; display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 150px; padding: 0 16px 14px;
  background: radial-gradient(120% 95% at 20% 0%, #432817, #1F130B 60%), var(--nogal-2);
  box-shadow: inset 0 -16px 0 #5A3A22, inset 0 -17px 0 rgba(0, 0, 0, .5), inset 0 12px 18px -8px rgba(0, 0, 0, .7);
}
.cata-tabla img { height: calc(var(--h) * var(--u)); width: auto; max-width: 30%; object-fit: contain; filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, .6)); margin-bottom: 4px; }
.cata-papel { padding: 18px 16px 18px; background: linear-gradient(var(--papel), var(--papel-2)); }
.cata-papel h3 { font-family: var(--bodoni); font-weight: 600; font-size: 25px; line-height: 1.1; margin-top: 6px; }
.cata-sub { font-family: var(--fell); font-style: italic; font-size: 17px; color: var(--oro-tinta); margin-top: 4px; }
.cata-texto { margin-top: 10px; }
.cata-incluye { margin: 10px 0 0; padding-left: 20px; color: var(--piedra); font-size: 16px; }
.cata-precio { font-family: var(--bodoni); font-size: 26px; font-weight: 500; margin-top: 12px; }
.cata-precio small { font-size: 15px; color: var(--piedra); }
.cata-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.cata-fecha {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; min-height: 60px;
  border: 1px solid rgba(90, 60, 25, .45); background: rgba(255, 255, 255, .5); border-radius: 2px; color: var(--tinta);
}
.cata-fecha b { font-family: var(--bodoni); font-size: 16px; font-weight: 600; line-height: 1.15; }
.cata-fecha span { font-size: 14px; color: var(--piedra); }
.cata-fecha:not(:disabled):active { transform: scale(.98); }
.cata-fecha.completa { opacity: .5; text-decoration: line-through; }
.catas-todas { display: flex; justify-content: center; margin: 22px auto 0; max-width: 360px; }
.catas-pagina { max-width: 760px; margin: 0 auto; padding: 14px 12px 20px; }
.catas-pagina h1 { font-family: var(--bodoni); font-weight: 500; font-size: clamp(36px, 10vw, 58px); line-height: 1.02; margin-top: 6px; }
.catas-pagina .t-lema { color: var(--piedra); max-width: 46ch; }
.reserva-personas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 6px; font-size: 17px; }
/* Panel */
.dos-p { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-p select { font: inherit; font-size: 17px; padding: 12px 14px; min-height: 50px; border-radius: 10px; border: 1.5px solid var(--linea-p); background: var(--blanco); color: var(--texto-p); }
.sesiones { list-style: none; margin: 0; padding: 0; }
.sesiones > li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--linea-p); }
.sesiones > li:last-child { border-bottom: 0; }
.ses-cuando { font-size: 14.5px; font-weight: 700; color: var(--monte); }
.sesiones b { font-size: 17px; }
.ses-barra { height: 8px; border-radius: 999px; background: var(--fondo-p); overflow: hidden; margin: 6px 0 2px; }
.ses-barra i { display: block; height: 100%; background: var(--monte); border-radius: 999px; }
.ses-ocupacion { font-size: 15px; color: var(--gris-p); }
.ses-ocupacion.llena { color: var(--bien); font-weight: 700; }
.sesiones details { margin-top: 6px; font-size: 15.5px; }
.sesiones summary { cursor: pointer; font-weight: 600; color: var(--monte); min-height: 36px; display: flex; align-items: center; }
.asistentes { list-style: none; margin: 4px 0 0; padding: 0; }
.asistentes li { padding: 8px 0; border-top: 1px dashed var(--linea-p); }
.asistentes span { color: var(--gris-p); font-size: 14.5px; }
.sesiones .boton-sec { align-self: flex-start; margin-top: 8px; min-height: 40px; padding: 6px 14px; font-size: 15px; }

/* La firma de NIEVO, siempre al final del pie. */
.firma { margin: 14px 0 0; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.firma .nievo { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: inherit; }
body[data-tema="tienda"] .pie .firma { color: color-mix(in srgb, var(--marfil) 70%, transparent); border-top: 1px solid rgba(255, 225, 180, .14); padding-top: 12px; }
body[data-tema="tienda"] .pie .firma .nievo { color: var(--marfil); }
body[data-tema="tienda"] .pie .firma .nievo:hover { color: #F2D995; }
.pie-demo { display: block; margin: 6px 0 4px; }

/* El sello de Sibaritas. */
.marca { display: inline-flex; align-items: center; gap: 10px; }
.sello { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.pie .sello.completo { display: block; width: 84px; height: 84px; margin: 0 auto 10px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }

/* =====================================================================
   EL LOGO (como el rótulo de la puerta de Sibaritas)
   ===================================================================== */
:root { --mostaza: #E3B13C; }
body[data-tema="tienda"] .marca { gap: 9px; }
body[data-tema="tienda"] .marca span {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 25px; letter-spacing: .015em;
  color: var(--mostaza); line-height: 1;
}
.sello { width: 32px; height: 32px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.logo-completo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.logo-completo .sello { width: 70px; height: 70px; margin: 0 0 6px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
.logo-nombre { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 38px; letter-spacing: .02em; color: var(--mostaza); line-height: 1; }
.logo-lema { font-family: "Open Sans", system-ui, sans-serif; font-weight: 300; font-size: 14.5px; letter-spacing: .14em; color: var(--mostaza); }
/* Logo sacado del rótulo (imágenes en /img/logo). */
.sello { width: 34px; height: 34px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.logo-palabra { height: 24px; width: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.logo-completo .sello { width: 76px; height: 76px; }
.logo-completo .logo-palabra { height: 40px; margin-top: 4px; }
.logo-completo .logo-lema { height: 13px; width: auto; display: block; margin-top: 8px; opacity: .95; }
.t-cab .logo-palabra { height: 21px; } @media (min-width: 420px) { .t-cab .logo-palabra { height: 24px; } }

/* Calendario de catas. */
.cata-calendario { display: block; margin: 12px 0 0; font-size: 16px; font-weight: 600; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; }
.cal-cab b { font-family: var(--bodoni); font-size: 20px; font-weight: 600; }
.cal-mes { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(90, 60, 25, .4); background: rgba(255, 255, 255, .5); font-size: 24px; line-height: 1; color: var(--tinta); }
.cal-mes:disabled { opacity: .3; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-sem { font-size: 13px; font-weight: 600; color: var(--piedra); padding: 4px 0; }
.dia { display: grid; place-items: center; aspect-ratio: 1; font-size: 16px; border-radius: 50%; color: color-mix(in srgb, var(--tinta) 45%, transparent); border: 0; background: none; padding: 0; font-family: var(--bodoni); }
.dia.pasado { opacity: .35; }
.dia.hay { color: #2A1A08; font-weight: 700; background: linear-gradient(180deg, #F6E3A8, #D9B56A 55%, #B88B3E); box-shadow: inset 0 1px 0 rgba(255, 250, 230, .8), 0 1px 2px rgba(0, 0, 0, .35); cursor: pointer; }
.dia.hay.completa { background: rgba(90, 60, 25, .12); box-shadow: none; text-decoration: line-through; color: var(--piedra); font-weight: 400; }
.dia.elegido { outline: 3px solid var(--oloroso); outline-offset: 2px; }
.cal-leyenda { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--piedra); margin-top: 10px; }
.cal-leyenda i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.cal-leyenda i.hay { background: #D9B56A; }
.cal-leyenda i.completa { background: rgba(90, 60, 25, .2); margin-left: 10px; }
.cal-dia { font-family: var(--bodoni); font-size: 19px; font-weight: 600; margin-top: 16px; }
/* El logo grande al principio de la portada, sobre la pared. */
.logo-portada { display: flex; justify-content: center; padding: 6px 0 26px; }
.logo-portada .logo-completo { margin: 0; }
.logo-portada .sello { width: 92px; height: 92px; filter: drop-shadow(0 3px 5px rgba(60, 35, 10, .35)); }
.logo-portada .logo-palabra { height: auto; width: min(78vw, 420px); filter: drop-shadow(0 2px 2px rgba(60, 35, 10, .3)); }
.logo-portada .logo-lema { height: auto; width: min(54vw, 290px); margin-top: 12px; }
/* En la pared clara, el dorado necesita un tono más hondo para leerse. */
.logo-portada img { filter: drop-shadow(0 1px 0 rgba(120, 80, 20, .55)) drop-shadow(0 3px 6px rgba(60, 35, 10, .25)); }

/* =====================================================================
   ÍNDICE ÚNICO, CUENTA Y AJUSTES DE LA AUDITORÍA
   ===================================================================== */
/* Pared de cal sin costuras: una textura que se repite sin corte. */
body[data-tema="tienda"] { background: #F0EBE0 url(/img/cal.webp) repeat; background-size: 1024px 1024px; }
.t-indice { position: sticky; top: calc(var(--alto-cab) + env(safe-area-inset-top)); z-index: 4; margin-top: 18px; }
body[data-tema="tienda"] .t-indice .t-cats { position: static; margin: 0; }
.pestana .flecha { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
.nav-todo.abierto .flecha { transform: translateY(1px) rotate(-135deg); }
body[data-tema="tienda"] .pestana.nav-joyas { color: #F2D995; }
body[data-tema="tienda"] .pestana.nav-joyas.activo { color: #FFE9A8; }
.t-todo {
  background: linear-gradient(var(--papel), var(--papel-2)); box-shadow: 0 14px 22px -12px rgba(40, 20, 5, .6);
  padding: 14px 16px 16px; border-bottom: 1px solid rgba(90, 60, 25, .35);
}
.t-todo p { font-family: var(--fell); font-style: italic; color: var(--oro-tinta); font-size: 16px; margin: 0 0 8px; }
.t-todo-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.t-todo-opciones button, .t-todo-orden button {
  display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px; border: 1px solid rgba(90, 60, 25, .35);
  background: rgba(255, 255, 255, .5); border-radius: 2px; color: var(--tinta); min-height: 48px;
}
.t-todo-opciones b { font-family: var(--bodoni); font-size: 16px; font-weight: 600; }
.t-todo-opciones span { font-size: 13px; color: var(--piedra); line-height: 1.25; }
.t-todo-opciones button.activo, .t-todo-orden button.activo { background: var(--madera); color: var(--marfil); border-color: var(--nogal-2); }
.t-todo-opciones button.activo span { color: color-mix(in srgb, var(--marfil) 70%, transparent); }
[data-orden-todo] { margin-top: 14px; }
.t-todo-orden { display: flex; gap: 8px; flex-wrap: wrap; }
.t-todo-orden button { flex-direction: row; align-items: center; padding: 8px 14px; min-height: 42px; font-size: 15px; }
@media (max-width: 420px) { .t-todo-opciones { grid-template-columns: 1fr; } .t-todo-opciones button { flex-direction: row; align-items: baseline; gap: 10px; } }

/* Cabecera: entrar y la cuenta. */
.enlace-cab { background: none; border: 0; border-bottom: 1px solid rgba(201, 158, 82, .7); padding: 4px 0; cursor: pointer; max-width: 9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pestanas-cuenta { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 8px; border: 1px solid rgba(90, 60, 25, .4); }
.pestanas-cuenta button { border: 0; background: transparent; min-height: 44px; font-size: 16px; color: var(--tinta); }
.pestanas-cuenta button[aria-selected="true"] { background: var(--madera); color: var(--marfil); }
.boton-sec-t { display: block; margin-top: 10px; min-height: 48px; border: 1px solid rgba(90, 60, 25, .45); background: rgba(255, 255, 255, .45); font: inherit; color: var(--tinta); border-radius: 3px; }
.boton-sec-t.ancho { width: 100%; }

/* La cornisa no puede salirse de la pantalla en el móvil. */
@media (max-width: 959px) { .alacena::before { left: -10px; right: -10px; } }
html, body { overflow-x: clip; }

/* Portada centrada en pantallas anchas. */
@media (min-width: 760px) {
  .t-entrada { text-align: center; }
  .t-entrada h1, .t-entrada .t-lema { margin-left: auto; margin-right: auto; }
}
/* Tira de fotos: en el ordenador caben todas, sin cortar ninguna. */
@media (min-width: 900px) {
  .fotos-tira { justify-content: center; flex-wrap: wrap; overflow: visible; }
  .foto-tienda { width: min(30%, 300px); }
  .fotos-puntos { display: none; }
}
/* En el ordenador, la hornacina ocupa toda su columna. */
@media (min-width: 960px) { .prod-cab .hornacina { width: 100%; max-width: 460px; margin: 18px 0 0; justify-self: center; } }