/* =====================================================================
   ambar.css · capa de Ambar Selecto sobre la receta c-nocturno
   Usa las variables del contrato base (base.css); solo agrega lo propio
   del negocio: video del hero, catálogo, ficha y pedido.
   ===================================================================== */

/* Marca: el dorado del logo de Ambar Selecto reemplaza al champagne del preset.
   Pedidos de Francisco (17/10):
   - nada de bordes redondeados ("parece caricatura"): esquinas rectas;
   - el fondo no en negro puro sino más tenue y cálido, con luces suaves, para que el blanco de las
     etiquetas no golpee tanto. */
:root{--accent:#C79A55;--accent-2:#E9D5A8;--on-accent:#120D07;--wine:#6B1A2C;
  --bg:#17120F;--surface:#1F1915;--surface-2:#251E19;--ink:#EEE7DB;--ink-2:#C2B8A9;--muted:#968B7C;
  --line:#2F2721;--line-2:#463A30;--inv-bg:#1C1612;--inv-surface:#241D18;--inv-line:#382E26;
  --r-btn:2px;--r-card:2px;--r-img:2px;--r-input:2px;--chip-pill:0;
  --luz:radial-gradient(62% 58% at 50% 40%,#4a3526 0%,#2f241c 45%,#211a15 100%)}
body{background:
  radial-gradient(1100px 560px at 85% -8%,rgba(199,154,85,.10),transparent 62%),
  radial-gradient(900px 520px at -5% 30%,rgba(107,26,44,.10),transparent 60%),
  var(--bg)}
.sec--alt{background:rgba(255,240,220,.025)}

/* ---------- Primera pantalla: ofertas con precio y compra (sin hero) ---------- */
.sec-ofertas{padding-top:calc(var(--nav-h,72px) + clamp(18px,3vw,36px));padding-bottom:clamp(36px,5vw,64px)}
.of__head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.of__t{font-size:clamp(1.9rem,1.3rem + 1.8vw,2.9rem)}
.of__sub{margin:6px 0 0;color:var(--muted);font-size:var(--fs-small)}
.of__todo{white-space:nowrap;color:var(--accent-2)}
@media (max-width:720px){.of__head{flex-direction:column;align-items:flex-start;gap:6px}}
.of__grilla{grid-template-columns:repeat(5,1fr)}
.of__grilla .pc__foto{aspect-ratio:1/1}
@media (max-width:1100px){.of__grilla{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.of__grilla{grid-template-columns:1fr 1fr}}

/* ---------- Alta gama: botón de compra directo en cada card ---------- */
.card .pc__add{position:relative;z-index:1;width:100%;margin-top:12px;color:var(--ink);border-color:var(--line-2)}

/* ---------- Franja con el video de la copa (la copa se ve entera) ---------- */
.banda-video{position:relative;isolation:isolate;overflow:hidden;background:#0d0b0a;
  width:100%;height:min(86svh,56.25vw);min-height:440px;display:grid;align-items:center}
.hero-video{position:absolute;inset:0;margin:0;z-index:-1}
.hero-video__v,.hero-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 0%}
.hero-video__v{opacity:0;transition:opacity 1.2s var(--ease)}
.hero-video.is-play .hero-video__v{opacity:1}
.hero-video::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,11,10,.85) 0%,rgba(13,11,10,.45) 38%,rgba(13,11,10,0) 60%)}
.banda-video__in{display:grid;gap:16px;justify-items:start;max-width:var(--maxw)}
.banda-video__t{margin:0;max-width:16ch;font:500 clamp(2rem,1.3rem + 2.4vw,3.6rem)/1.05 var(--f-display);color:var(--ink)}
@media (max-width:720px){
  .banda-video{height:auto;min-height:0;display:block}
  .banda-video__media{position:relative;height:62svh}
  .hero-video::after{background:linear-gradient(0deg,rgba(13,11,10,.9) 0%,rgba(13,11,10,0) 40%)}
  .hero-video__v,.hero-video__poster{object-position:88% 30%}
  .banda-video__in{margin-top:-90px;padding-bottom:40px;position:relative}
}

/* ---------- Aviso al empezar a comprar (la info que antes estaba arriba) ---------- */
.aviso{position:fixed;left:50%;top:calc(var(--nav-h,72px) + 10px);transform:translate(-50%,-12px);opacity:0;z-index:45;
  width:min(560px,calc(100% - 24px));padding:12px 16px;background:var(--surface-2);border:var(--bw) solid var(--line-2);
  border-left:3px solid var(--accent);box-shadow:0 12px 30px rgba(0,0,0,.4);font-size:.86rem;line-height:1.4;
  transition:opacity .35s var(--ease),transform .45s var(--ease);pointer-events:none}
.aviso.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.aviso strong{color:var(--accent-2);font-weight:500}
.pedido-d__info{margin:0 22px;padding:10px 12px;border:var(--bw) solid var(--line);background:var(--surface-2);font-size:.82rem;color:var(--ink-2);line-height:1.45}

/* ---------- Alta gama: botella entera sobre fondo con luz, no recortada ---------- */
.sec-items .card{min-height:0;justify-content:flex-start;background:var(--surface);border:var(--bw) solid var(--line)}
.sec-items .card__media{position:relative;inset:auto;z-index:0;height:clamp(260px,24vw,340px);
  background:var(--luz)}
.sec-items .card__media::after{display:none}
.sec-items .card__media img{width:100%;height:100%;object-fit:contain;padding:22px 0 14px}
.sec-items .card{cursor:pointer}
.destacado__foto{background:var(--luz)}
.destacado__foto img{max-height:520px;width:auto;margin:auto;object-fit:contain}
.banda__img{object-position:70% 50%}

/* ---------- Menú: el lockup ya dice "Vinos · Martínez"; links en una línea ---------- */
.nav__rubro{display:none}
.nav__links a{white-space:nowrap}
@media (max-width:1180px){.nav__acc .btn--primary{display:none}}

/* ---------- Botón de pedido en el menú ---------- */
.pedido-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:var(--bw) solid var(--line-2);
  border-radius:var(--r-btn);background:transparent;color:var(--ink);font:500 var(--fs-small)/1 var(--f-body);cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast)}
.pedido-btn__n{min-width:1.6em;height:1.6em;display:inline-grid;place-items:center;border-radius:2px;background:var(--accent);color:var(--on-accent);font-size:.78rem}
.pedido-btn.is-bump .pedido-btn__n{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
@media (hover:hover) and (pointer:fine){.pedido-btn:hover{border-color:var(--accent);color:var(--accent-2)}}
.pedido-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Catálogo ---------- */
.cat__barra{display:grid;gap:18px;margin:8px 0 18px;padding-bottom:18px;border-bottom:var(--bw) solid var(--line)}
.cat__tipos{display:flex;flex-wrap:wrap;gap:8px}
.cat__tipo{min-height:40px;padding:0 16px;border:var(--bw) solid var(--line-2);border-radius:2px;background:transparent;color:var(--ink-2);
  font:500 var(--fs-small)/1 var(--f-body);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.cat__tipo span{color:var(--muted);margin-left:6px;font-size:.8em}
.cat__tipo[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cat__tipo[aria-selected="true"] span{color:inherit;opacity:.7}
@media (hover:hover) and (pointer:fine){.cat__tipo:not([aria-selected="true"]):hover{border-color:var(--accent);color:var(--ink)}}
.cat__tipo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cat__campos{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px}
@media (max-width:720px){.cat__campos{grid-template-columns:1fr 1fr}.cat__buscar{grid-column:1/-1}}
.cat__campo{display:grid;gap:6px}
.cat__campo[hidden],.pedido-barra[hidden]{display:none}
.cat__campo select,.cat__campo input{width:100%;min-height:44px;padding:0 12px;border:var(--bw) solid var(--line-2);border-radius:var(--r-input);
  background:var(--surface);color:var(--ink);font:400 1rem/1.2 var(--f-body)}
.cat__campo select:focus-visible,.cat__campo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cat__cuenta{color:var(--muted);font-size:var(--fs-small);margin:0 0 14px}
.cat__grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
@media (max-width:520px){.cat__grilla{grid-template-columns:1fr 1fr;gap:8px}}
.cat__mas{display:flex;justify-content:center;margin-top:28px}
.cat__vacio{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--ink-2)}

.pc{display:flex;flex-direction:column;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:border-color var(--t),transform var(--t) var(--ease)}
@media (hover:hover) and (pointer:fine){.pc:hover{border-color:rgba(199,154,85,.45)}.pc:hover .pc__foto img{transform:translateY(-4px)}}
.pc__foto{all:unset;cursor:pointer;display:block;position:relative;aspect-ratio:4/5;background:var(--luz)}
.pc__foto img{position:absolute;inset:10% 0 6%;margin:auto;height:84%;width:auto;max-width:80%;object-fit:contain;transition:transform .6s var(--ease)}
.pc__foto:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pc__tag{position:absolute;left:10px;top:10px;padding:4px 8px;border-radius:0;background:rgba(12,12,13,.75);color:var(--accent-2);
  font:500 .68rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;max-width:calc(100% - 20px)}
.pc__tag--of{background:var(--wine);color:#fff}
.pc__b{display:grid;gap:4px;padding:14px 14px 16px;flex:1}
.pc__bod{color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.pc__n{font:500 1.24rem/1.15 var(--f-display);color:var(--ink);margin:0}
.pc__v{color:var(--ink-2);font-size:var(--fs-small)}
.pc__p{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}
.pc__p strong{font:500 1.1rem/1 var(--f-body);color:var(--accent-2)}
.pc__p s{color:var(--muted);font-size:.8rem}
.pc__caja{color:var(--muted);font-size:.78rem}
.pc__add{margin-top:10px;min-height:42px;border:var(--bw) solid var(--line-2);border-radius:var(--r-btn);background:transparent;color:var(--ink);
  font:500 var(--fs-small)/1 var(--f-body);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
@media (hover:hover) and (pointer:fine){.pc__add:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}}
.pc__add:active{transform:scale(.97);transition:transform .06s}
.pc__add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pc__add:disabled{opacity:.45;cursor:not-allowed}
.pc__add.is-ok{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---------- Ficha y pedido (dialog) ---------- */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none}
dialog::backdrop{background:rgba(5,4,3,.72)}
.ficha-d[open]{display:grid;place-items:center;width:100%;height:100%}
.ficha-d__in{position:relative;width:min(960px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;display:grid;grid-template-columns:1fr 1.2fr;
  background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-card)}
@media (max-width:720px){.ficha-d__in{grid-template-columns:1fr}}
.ficha-d__foto{display:grid;place-items:center;padding:32px;min-height:320px;background:var(--luz)}
.ficha-d__foto img{max-height:440px;width:auto;object-fit:contain}
.ficha-d__info{display:grid;gap:14px;align-content:start;padding:clamp(22px,3vw,36px)}
.ficha-d__t{font:500 clamp(1.8rem,1.3rem + 1.6vw,2.6rem)/1.05 var(--f-display);margin:0}
.ficha-d__desc{color:var(--ink-2);margin:0}
.ficha-d__dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;padding:14px 0;border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line);font-size:var(--fs-small)}
.ficha-d__dl dt{color:var(--muted)}.ficha-d__dl dd{margin:0;color:var(--ink-2)}
.ficha-d__precios{display:grid;gap:4px}
.ficha-d__precios strong{font:500 1.6rem/1 var(--f-body);color:var(--accent-2)}
.ficha-d__precios span{color:var(--muted);font-size:var(--fs-small)}
.ficha-d__acc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cant{display:inline-flex;align-items:center;border:var(--bw) solid var(--line-2);border-radius:var(--r-btn)}
.cant button{width:42px;height:44px;border:0;background:transparent;color:var(--ink);font-size:1.2rem;cursor:pointer}
.cant button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cant output{min-width:2.4em;text-align:center}
.x{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;border-radius:2px;background:rgba(12,12,13,.6);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;z-index:2}
.x:focus-visible{outline:2px solid var(--accent)}

.pedido-d[open]{display:flex;justify-content:flex-end;width:100%;height:100%}
.pedido-d__in{position:relative;width:min(460px,100%);height:100%;overflow:auto;background:var(--surface);border-left:var(--bw) solid var(--line);
  display:flex;flex-direction:column;animation:entra .45s var(--ease)}
@keyframes entra{from{transform:translateX(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){.pedido-d__in{animation:none}}
.pedido-d__head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:20px 22px;background:var(--surface);border-bottom:var(--bw) solid var(--line);z-index:1}
.pedido-d__head .x{position:static}
.pedido-d__t{font:500 1.9rem/1 var(--f-display);margin:0}
.pedido-d__lista{padding:8px 22px}
.pl{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:var(--bw) solid var(--line)}
.pl img{width:52px;height:68px;object-fit:contain}
.pl__n{font-weight:500;line-height:1.25}.pl__s{color:var(--muted);font-size:.8rem}
.pl__d{display:grid;justify-items:end;gap:6px}
.pl .cant button{width:34px;height:34px}
.pedido-d__vacio{padding:32px 0;color:var(--ink-2)}
.pedido-d__form{display:grid;gap:18px;padding:18px 22px 28px;margin-top:auto}
.pedido-d__form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer}
.opt input{accent-color:var(--accent);width:18px;height:18px}
.opt__n{margin-left:auto;color:var(--accent-2);font-size:.8rem}
.err{margin:0;color:#f0a39a;font-size:var(--fs-small)}
.pedido-d__tot{display:grid;grid-template-columns:1fr auto;gap:6px;margin:0;padding-top:14px;border-top:var(--bw) solid var(--line)}
.pedido-d__tot dt{color:var(--ink-2)}.pedido-d__tot dd{margin:0;text-align:right}
.pedido-d__tot .t{font:500 1.3rem/1.2 var(--f-body);color:var(--accent-2)}
.pedido-d__enviar{justify-content:center;width:100%}
.pedido-d__nota{margin:0;color:var(--muted);font-size:.8rem}

/* Barra de pedido en el celular */
.pedido-barra{position:fixed;left:12px;right:12px;bottom:12px;z-index:40}
.pedido-barra button{width:100%;min-height:52px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;border:0;border-radius:var(--r-btn);
  background:var(--accent);color:var(--on-accent);font:600 1rem/1 var(--f-body);box-shadow:0 10px 30px rgba(0,0,0,.45);cursor:pointer}
@media (min-width:900px){.pedido-barra{display:none}}

/* Botellas: sombra suave al pie para asentarlas sobre la luz */
.pc__foto img,.sec-items .card__media img,.ficha-d__foto img,.destacado__foto img{filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}