/* Ficha de producto (/p/{id}) y escáner (/escanear). Usa los tokens de css/sitio.css. */
.p-top { position: sticky; top: 0; z-index: 20; background: rgba(247,246,244,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.p-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.p-top .logo b { font-size: 34px; }
.p-main { max-width: 720px; margin: 0 auto; padding-block: 20px 48px; container-type: inline-size; }
@media (min-width: 1000px) { .p-main, .p-top-in { max-width: 1600px; padding-inline: 32px; } .p-main { padding-block: 18px 18px; } }

/* ---- celular, tablet angosta y hoja del escáner: una columna ---- */
.ficha { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.ficha-lado, .ficha-body { display: contents; }
.ficha > * > * { margin-inline: 22px; }
.ficha-foto { order: 0; margin-inline: 0 !important; margin-bottom: 6px; }
.ficha-head { order: 1; display: flex; flex-direction: column; gap: 10px; }
.ficha-compra { order: 2; display: flex; flex-direction: column; gap: 8px; }
.ficha-datos { order: 3; }
.ficha-secs { order: 4; display: flex; flex-direction: column; gap: 14px; }
.ficha-relsec { order: 5; }
.ficha-dato { order: 6; }

/* lugar de la foto: siempre 4:3, con o sin foto, así el diseño no cambia cuando se suman las fotos */
.ficha-foto { position: relative; aspect-ratio: 4 / 3; background: var(--board); overflow: hidden; }
.ficha-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ficha-sinfoto { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(238,232,227,.42);
  background-image: radial-gradient(ellipse at 85% 10%, rgba(138,28,56,.45), transparent 60%), radial-gradient(ellipse at 0% 100%, rgba(255,255,255,.05), transparent 50%); }
.ficha-sinfoto svg { width: 30%; max-width: 140px; height: auto; }
.ficha[data-cat="Vinos"] .ficha-sinfoto, .ficha[data-cat="Espumantes y sidras"] .ficha-sinfoto { background-color: #3A1220; }
.ficha[data-cat="Congelados"] .ficha-sinfoto { background-color: #1B2328; background-image: radial-gradient(ellipse at 85% 10%, rgba(120,170,200,.25), transparent 60%); }

.ficha-cat { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wine); }
.ficha-nombre { font-size: clamp(30px, 7vw, 40px); line-height: 1; text-transform: uppercase; font-weight: 700; margin-top: -4px; }
.ficha-resumen { margin: 0; font-size: 18px; color: var(--ink); }
.ficha-precio { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; background: #F4F1EF; border-radius: 12px; padding: 14px 16px; }
.fp-monto { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.ficha-precio b { font-family: var(--f-display); font-size: 40px; line-height: 1; }
.fp-monto span { color: var(--muted); font-size: 15px; }
.ficha-act { margin: 0; font-size: 13px; color: var(--muted); }
.ficha-acc { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ficha-acc .btn { width: 100%; }
.ficha-datos { margin-block: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ficha-datos div { background: var(--card); padding: 10px 12px; }
.ficha-datos dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ficha-datos dd { margin: 2px 0 0; font-weight: 600; }
.ficha-datos div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 380px) { .ficha-datos { grid-template-columns: 1fr; } }
.ficha-sec h2 { font-size: 22px; text-transform: uppercase; margin-bottom: 6px; }
.ficha-sec p { margin: 0; color: #3A3335; }
.ficha-rel { display: flex; flex-direction: column; gap: 8px; }
.ficha-rel a { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.ficha-rel a:hover { border-color: var(--wine); }
.ficha-rel span { font-weight: 600; }
.ficha-rel b { font-family: var(--f-display); font-size: 20px; color: var(--wine); white-space: nowrap; }
.ficha-dato { background: var(--board); color: var(--chalk); border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.ficha-dato b { color: #fff; }

/* ---- compu: dos columnas que ocupan casi todo el ancho y entran en la pantalla ---- */
@container (min-width: 960px) {
  .ficha { display: grid; grid-template-columns: minmax(340px, 4fr) 9fr; gap: 0; padding: 0; }
  .ficha-lado { display: flex; flex-direction: column; gap: 12px; padding: 0 0 22px; border-right: 1px solid var(--line); background: #FBFAF9; }
  .ficha-body { display: flex; flex-direction: column; gap: 20px; padding: 26px 34px 28px; min-width: 0; }
  .ficha > * > * { margin-inline: 0; }
  .ficha-lado > :not(.ficha-foto) { margin-inline: 22px; }
  .ficha-foto { margin-bottom: 4px; }
  .ficha-precio { background: var(--card); border: 1px solid var(--line); }
  .ficha-dato { margin-top: 4px; }
  .ficha-head { gap: 8px; }
  .ficha-nombre { font-size: clamp(40px, 4cqi, 60px); }
  .ficha-resumen { font-size: 19px; }
  .ficha-datos { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .ficha-datos[data-n="1"] { --cols: 1; } .ficha-datos[data-n="2"] { --cols: 2; } .ficha-datos[data-n="3"] { --cols: 3; }
  .ficha-datos div:last-child:nth-child(odd) { grid-column: auto; }
  .ficha-datos dd { font-size: 15px; }
  .ficha-secs { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px; }
  .ficha-secs[data-n="1"] { --cols: 1; } .ficha-secs[data-n="2"] { --cols: 2; } .ficha-secs[data-n="4"] { --cols: 2; }
  .ficha-sec h2 { font-size: 20px; }
  .ficha-sec p { font-size: 15.5px; line-height: 1.5; }
  .ficha-relsec { margin-top: auto; }
  .ficha-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .ficha-rel a { padding: 9px 14px; }
  /* notebooks (pantallas bajas): más compacto para que no haga falta scrollear */
  @media (max-height: 820px) {
    .ficha-body { gap: 14px; padding: 20px 30px 22px; }
    .ficha-nombre { font-size: clamp(36px, 3.4cqi, 50px); }
    .ficha-resumen { font-size: 17px; line-height: 1.45; }
    .ficha-datos div { padding: 8px 12px; }
    .ficha-datos dd { font-size: 14.5px; line-height: 1.35; }
    .ficha-secs { gap: 24px; }
    .ficha-sec h2 { font-size: 18px; margin-bottom: 4px; }
    .ficha-sec p { font-size: 14.5px; line-height: 1.45; }
    .ficha-rel a { padding: 7px 12px; }
    .ficha-rel b { font-size: 18px; }
    .ficha-lado { gap: 10px; padding-bottom: 18px; }
    .ficha-precio { padding: 10px 14px; }
    .ficha-precio b { font-size: 34px; }
    .ficha-acc { gap: 6px; margin-top: 2px; }
    .ficha-acc .btn { padding-block: 9px; }
    .ficha-acc .btn.big { font-size: 16px; padding-block: 11px; }
    .ficha-dato { font-size: 14px; padding: 11px 14px; line-height: 1.45; }
  }
}
@media (min-width: 1000px) and (max-height: 820px) { .p-main { padding-block: 14px; } }

.p-empty { text-align: center; padding: 60px 20px; color: var(--muted); }

/* ---------- escáner ---------- */
body.scan { background: #0F0C0D; color: var(--chalk); }
.scan-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.scan-top .logo b { color: #fff; font-size: 34px; }
.scan-top a.lnk { color: var(--chalk-dim); text-decoration: none; font-weight: 600; font-size: 14px; }
.scan-wrap { max-width: 560px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 40px; display: flex; flex-direction: column; gap: 16px; }
.scan-intro h1 { font-size: clamp(34px, 9vw, 48px); line-height: .95; text-transform: uppercase; color: #fff; }
.scan-intro p { color: var(--chalk-dim); margin: 10px 0 0; }
.visor { position: relative; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: #1E1A1B; }
.visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor .marco { position: absolute; inset: 14%; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(15,12,13,.45); pointer-events: none; }
.visor .marco::before, .visor .marco::after { content: ""; position: absolute; inset: -2px; border-radius: 18px; border: 3px solid transparent; border-top-color: #fff; border-bottom-color: #fff; }
.visor .marco::after { border-color: transparent; border-left-color: rgba(255,255,255,.35); border-right-color: rgba(255,255,255,.35); }
.visor .hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 14px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.visor-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.visor-off p { margin: 0; color: var(--chalk-dim); }
.scan-buscar { display: flex; flex-direction: column; gap: 8px; }
.scan-buscar label { font-size: 14px; color: var(--chalk-dim); }
.scan-buscar .inp { background: #1E1A1B; border-color: #3A3236; color: #fff; }
.sugs { display: flex; flex-direction: column; gap: 6px; }
.sugs button { text-align: left; background: #1E1A1B; border: 1px solid #3A3236; color: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.sugs button b { font-family: var(--f-display); color: var(--wine-hi); }
.vistos h2 { font-size: 16px; font-family: var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); font-weight: 700; margin-bottom: 8px; }
.vistos div { display: flex; gap: 8px; flex-wrap: wrap; }
.vistos button { background: #1E1A1B; border: 1px solid #3A3236; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; }

.hoja-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; }
.hoja { width: min(720px, 100%); max-height: 88vh; overflow: auto; background: var(--paper); color: var(--ink); border-radius: 20px 20px 0 0; padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
.hoja-head { position: sticky; top: -10px; z-index: 2; display: flex; justify-content: center; padding: 6px 0 10px; background: var(--paper); }
.hoja-head .btn { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.hoja .ficha { border-radius: 14px; }
@media (prefers-reduced-motion: no-preference) { .hoja { animation: sube .22s ease-out; } @keyframes sube { from { transform: translateY(40px); opacity: .6; } } }