/* Catálogo Krono: estructura de la muestra + estilo del catálogo original (tinta, hueso, oro, Inter + Cormorant) */
:root{
  --bg:#0c0b09; --fg:#f4f1ea; --muted:#8e8b85; --line:#2a2620; --line2:#3a342a;
  --gold:#c8a56b; --gold2:#e6d2a3; --ink:#0b0b0c;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--bg)}
body{background:transparent;color:var(--fg);font:400 15px/1.5 var(--sans);min-height:100dvh}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.mobile-only{display:inline-flex}
[hidden]{display:none!important}

/* fondo global: el canvas #fondo va detrás; .p-fondo solo agrega grano, velo y viñeta sobre la portada */
#fondo{position:fixed;left:0;top:0;z-index:-2;pointer-events:none;background:#0a0907}
.p-fondo{position:fixed;left:0;top:0;width:100%;height:100lvh;overflow:hidden;background:transparent;z-index:-1;pointer-events:none}
body:not(.en-portada) .p-fondo{display:none}
.p-grano,.p-vel,.p-vig{position:absolute;inset:0}
.p-grano{background:url(grano.png);opacity:.14;mix-blend-mode:overlay}
.p-vel{background:radial-gradient(ellipse 80% 38% at 50% 54%,rgba(10,9,7,.6),transparent 78%)}
.p-vig{background:radial-gradient(ellipse 80% 70% at 50% 35%,transparent 45%,rgba(0,0,0,.55) 100%)}

/* barra superior */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 16px;background:rgba(11,11,12,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--gold)}
.kf{font:500 26px/1 var(--serif);letter-spacing:.04em}
.brand-t{font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.top-actions{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 16px;border:1px solid var(--line2);border-radius:99px;background:transparent;
  font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s,filter .15s}
.btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.solid{background:linear-gradient(135deg,#b8934a,#e0c892);color:var(--ink);border-color:transparent}
.btn.solid:hover:not(:disabled){filter:brightness(1.1);color:var(--ink)}
.btn.small{min-height:36px;padding:0 14px}
.pill{background:var(--ink);color:var(--gold2);border-radius:99px;min-width:20px;padding:0 6px;font-size:11px;text-align:center;letter-spacing:0}
.btn.ghost .pill{background:var(--gold);color:var(--ink)}


.layout{max-width:1280px;margin:0 auto;padding:16px 16px 40px}
.input{width:100%;min-height:46px;padding:0 18px;background:rgba(18,18,20,.8);border:1px solid var(--line2);border-radius:99px;color:var(--fg);font:400 16px var(--sans)}
.input::placeholder{color:#8a867e}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,165,107,.28)}
.busca .input{padding-left:44px;background:rgba(18,18,20,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c8a56b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center}

/* filtros */
.filtros{position:fixed;inset:0;z-index:40;background:var(--bg);padding:16px;overflow-y:auto;transform:translateY(100%);visibility:hidden;transition:transform .25s,visibility .25s}
.filtros.open{transform:none;visibility:visible}
.filtros-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:sticky;top:-16px;background:var(--bg);padding:8px 0;z-index:1}
.filtros h2{font:500 30px var(--serif)}
.grupo{margin:22px 0}
.grupo h3{font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:38px;padding:0 16px;background:rgba(18,18,20,.7);border:1px solid var(--line2);border-radius:99px;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#cfcac0;transition:.15s}
.chip[aria-pressed=true]{border-color:var(--gold);color:var(--gold2);background:rgba(200,165,107,.12)}
.marcas{list-style:none;padding:0;margin-top:10px;max-height:340px;overflow-y:auto}
.marcas button{display:flex;justify-content:space-between;width:100%;min-height:42px;padding:8px 4px;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;color:#cfcac0;font-size:14px}
.marcas button[aria-pressed=true]{color:var(--gold2)}
.marcas span{color:var(--muted);font-size:12px}

.barra{display:flex;gap:8px;margin:0 0 12px}
.busca{flex:1}
.barra2{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.conteo{font-size:14px;color:var(--muted)}
.orden{display:flex;gap:2px;align-items:center}
.orden button{background:none;border:0;padding:8px;font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent}
.orden button[aria-pressed=true]{color:var(--gold2);border-color:var(--gold)}

/* tarjetas */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{display:flex;flex-direction:column;min-width:0}
.foto{position:relative;aspect-ratio:1;border:0;padding:0;display:block;width:100%}
.foto img{width:100%;height:100%;object-fit:contain;padding:6%}
.tag{position:absolute;left:0;top:0;background:rgba(11,11,12,.85);color:var(--gold2);font:600 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
.cuerpo{display:flex;flex-direction:column;gap:3px;padding:10px 0 12px;flex:1}
.marca{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.nombre{font:500 20px/1.1 var(--serif);text-align:left;background:none;border:0;padding:0;color:var(--fg);letter-spacing:.01em}
.meta{font-size:12px;color:var(--muted)}
.insp{font:italic 400 15px/1.15 var(--serif);color:var(--gold2)}
.precio{font:600 17px var(--sans);margin-top:auto;padding-top:10px;color:var(--gold2)}
.precio small{font-size:11px;color:var(--muted);font-weight:400}
.precio.cons{color:var(--muted);font-weight:400}
.mas{display:flex;margin:22px auto 0}
.vacio{text-align:center;padding:50px 0;color:var(--muted)}
.vacio p{font:500 26px var(--serif);margin-bottom:16px;color:var(--fg)}

/* pie */
.foot{border-top:1px solid var(--line);text-align:center;padding:30px 16px calc(30px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px;background:rgba(11,11,12,.55)}
.foot img:first-child{margin:0 auto 10px}
.foot-s{margin:6px 0}.foot-s a{color:var(--gold2)}
.foot-c{margin-top:12px;font-size:11px;opacity:.85}
.foot-c a{color:inherit}

/* diálogos */
dialog{background:#111113;color:var(--fg);border:1px solid var(--line2);padding:0;width:min(560px,100vw);max-height:92dvh;margin:auto auto 0;overflow:auto;border-radius:16px 16px 0 0}
dialog::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(3px)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#111113;z-index:1}
.dlg-head h2{font:500 28px var(--serif)}
.x{background:none;border:0;width:44px;height:44px;font-size:18px;color:var(--muted)}
.dlg-pad{padding:16px 18px 20px}
.det-foto{aspect-ratio:1.3;display:grid;place-items:center;background:#efe6d6!important}
.det-foto img{max-height:100%;object-fit:contain;padding:6%}
.det h2{font:500 32px/1.05 var(--serif);margin:4px 0}
.det p{color:#d6d1c7;margin:10px 0}
.det .chips{margin:8px 0}
.det .chip{font-size:11px;min-height:30px;padding:0 12px;cursor:default}
.det-btns{display:grid;gap:8px;margin-top:16px}
.l-item{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
.l-item b{font:500 19px/1.1 var(--serif)}
.l-item small{color:var(--muted)}
.qty{display:flex;align-items:center;gap:2px;grid-row:span 2;align-self:center}
.qty button{width:40px;height:40px;background:#1a1a1d;border:1px solid var(--line2);border-radius:99px;font-size:18px}
.qty span{min-width:30px;text-align:center}
.l-tot{display:flex;justify-content:space-between;font:500 26px var(--serif);padding:14px 0 4px}
.l-note{font-size:12px;color:var(--muted);margin-bottom:12px}
.l-note a,.foot-s a{color:var(--gold2)}
.form{display:grid;gap:8px;margin:12px 0}
.l-vacia{padding:40px 18px;text-align:center;color:var(--muted)}
.cmp-scroll{overflow-x:auto;padding:0 0 16px}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);width:90px}
td b{font:500 19px var(--serif)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:linear-gradient(135deg,#b8934a,#e0c892);color:var(--ink);padding:10px 18px;border-radius:99px;font-size:13px;font-weight:600;z-index:99}

@media (min-width:600px){
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  dialog{margin:auto;border-radius:16px}
}
@media (min-width:900px){
  .mobile-only{display:none}
  .layout{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start}
  .filtros{position:sticky;top:70px;inset:auto;transform:none;visibility:visible;z-index:1;padding:0 6px 0 0;max-height:calc(100dvh - 86px);background:none}
  .filtros-head{position:static;background:none}
  .nombre{font-size:21px}
}
@media (min-width:1150px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.brand-t{display:none}.top-actions .btn{padding:0 12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
body.en-portada .top,body.en-portada .foot{display:none}
html.ver-cat #vista-inicio,html.ver-cat .foot{display:none}

/* portada: réplica de la portada anterior de Krono (sin cambios de diseño) */
.portada{--tinta:#0b0b0c;--hueso:#f4f1ea;--oro:#c8a56b;--oro-claro:#e6d2a3;--apagado:#8e8b85;--borde:#26262a;
  position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:64px 24px 16px;text-align:center;font-family:Inter,system-ui,sans-serif;color:var(--hueso)}
.p-centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.p-logo{width:192px;height:192px}
.p-frase{margin-top:32px;max-width:28rem;text-wrap:balance;font:500 24px/1.35 'Cormorant Garamond',Georgia,serif}
.p-frase span{color:var(--oro)}
.p-lugar{margin-top:12px;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--apagado)}
.p-botones{margin-top:40px;display:flex;align-items:center;gap:16px}
.p-red{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:99px;border:1px solid rgba(200,165,107,.4);color:var(--oro-claro);transition:.15s}
.p-red:hover{border-color:rgba(200,165,107,.7);background:rgba(200,165,107,.1)}
.p-ver{border-radius:99px;background:linear-gradient(135deg,#b8934a,#e0c892);padding:12px 32px;font-size:14px;font-weight:600;color:var(--tinta);text-decoration:none;transition:filter .15s}
.p-ver:hover{filter:brightness(1.1)}
.p-alt{margin-top:20px;font-size:14px;color:var(--apagado);text-decoration:underline;text-decoration-color:var(--borde);text-underline-offset:4px;transition:color .15s}
.p-alt:hover{color:var(--hueso)}
.p-cred{padding-bottom:16px;font-size:11px;color:rgba(160,156,148,.75);text-decoration:none}
.p-cred:hover{color:rgba(190,186,178,.95)}
@media (min-width:640px){.p-logo{width:240px;height:240px}.p-frase{font-size:30px}}

/* rangos y estados sin datos */
.grupo h3 output{float:right;color:var(--gold2);font:500 13px var(--sans);letter-spacing:0;text-transform:none}
.rango{width:100%;accent-color:var(--gold);height:28px}
.rango:disabled{opacity:.35}
.rango-ext{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.sin-datos{font-size:12px;color:var(--muted);font-style:italic}
.chips.apagado .chip{opacity:.55}
.activos{display:flex;gap:6px;flex-wrap:wrap}
.chip.act{min-height:30px;font-size:11px;border-color:var(--gold);color:var(--gold2)}
.orden button:disabled{opacity:.3;cursor:not-allowed}
.orden{flex-wrap:wrap}

/* selector de marca */
.combo{position:relative}
.combo-btn{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:0 18px;background:rgba(18,18,20,.8);border:1px solid var(--line2);border-radius:99px;color:var(--fg);font:500 14px var(--sans)}
.combo-btn[aria-expanded=true]{border-color:var(--gold)}
.combo-pop{margin-top:8px;padding:10px;background:#111113;border:1px solid var(--line2);border-radius:16px}
.combo-pop .marcas{max-height:260px;margin-top:6px}
/* ficha del producto */
.ficha{margin:14px 0 4px;display:grid}
.fila{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.fila dt{color:var(--muted)}
.fila dd{text-align:right;margin:0}
.pend{color:var(--muted);font-style:italic;font-size:13px}
.barras{display:inline-flex;gap:3px}
.barras i{width:16px;height:6px;border-radius:2px;background:var(--line2)}
.barras i.on{background:var(--gold)}
.sub{font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}

/* ===== ajuste de diseño: tarjeta limpia, foto cálida, ficha en dos columnas ===== */
.fotow{position:relative}
.foto{border-radius:12px;overflow:hidden;background:#efe6d6!important;transition:transform .2s ease,box-shadow .2s ease}
.foto img{mix-blend-mode:multiply}
.card:hover .foto{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.q{position:absolute;width:36px;height:36px;border-radius:99px;display:grid;place-items:center;border:1px solid rgba(12,11,9,.18);background:rgba(12,11,9,.82);color:var(--gold2);font:600 18px/1 var(--sans);backdrop-filter:blur(4px);transition:.15s;padding:0}
.q-add{right:8px;bottom:8px}
.q-cmp{right:8px;top:8px;font-size:15px}
.q:hover,.q.on{background:linear-gradient(135deg,#b8934a,#e0c892);color:#0c0b09;border-color:transparent}
.q-cmp:not(.on){opacity:.7}
.card:hover .q-cmp,.q-cmp:focus-visible,.q-cmp.on{opacity:1}
.fam{font:500 12px var(--sans);color:var(--gold2);letter-spacing:.04em}
.mini-datos{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin-top:2px}
.barras.mini i{width:10px;height:4px}
.barras.mini{vertical-align:middle;margin-left:4px}
.precio.cons{font-size:13px}
.orden-m{display:block}.orden-m select{min-height:40px;font-size:16px}
.det-foto img{mix-blend-mode:multiply}
.det .precio{font:600 24px var(--sans);margin:6px 0 2px;padding:0}
@media (max-width:899px){.desk-only{display:none}}
@media (min-width:900px){
  .orden-m{display:none}
  dialog#dlg-detalle{width:min(980px,92vw)}
  dialog#dlg-detalle .det{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  dialog#dlg-detalle .det-foto{aspect-ratio:auto;height:100%;min-height:520px;position:sticky;top:0}
  dialog#dlg-detalle .dlg-pad{padding:24px 28px 28px}
}

/* ===== tarjetas como tarjetas (más aún en celular) ===== */
.card{background:#12100d;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.card:hover{border-color:rgba(200,165,107,.35)}
.card .fotow{padding:8px 8px 0}
.card .cuerpo{padding:12px 14px 14px;gap:4px}
.nombre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:19px;min-height:2.2em}
@media (max-width:599px){
  .grid{gap:10px}
  .card .fotow{padding:6px 6px 0}
  .card .cuerpo{padding:10px 11px 12px;gap:3px}
  .nombre{font-size:16px;line-height:1.12}
  .marca{font-size:10px;letter-spacing:.16em}
  .fam{font-size:11px}
  .meta{font-size:11px}
  .precio{font-size:16px;padding-top:6px}
  .q{width:40px;height:40px}
  .mini-datos{font-size:10px}
}

/* ===== filtros plegables ===== */
.grupo.col>h3{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;user-select:none}
.grupo.col>h3::after{content:'+';font:400 16px/1 var(--sans);color:var(--gold);letter-spacing:0}
.grupo.col.abierto>h3::after{content:'−'}
.grupo.col:not(.abierto)>:not(h3){display:none}
.grupo.col{border-top:1px solid var(--line);padding-top:14px;margin:14px 0}
.grupo.col>h3{margin-bottom:0}
.grupo.col.abierto>h3{margin-bottom:10px}

/* ===== perfil olfativo ===== */
.perfil{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.perfil>div{border:1px solid var(--line2);border-radius:12px;padding:10px 10px 12px;background:rgba(200,165,107,.04)}
.perfil h4{font:600 10px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.perfil li{list-style:none;font-size:13px;color:#e4dfd3;line-height:1.5}
.perfil ul{margin:0;padding:0}
@media (max-width:420px){.perfil{grid-template-columns:1fr}}

.grupo.col>h3 output{float:none;margin-left:auto;margin-right:6px;white-space:nowrap}
.grupo.col>h3{white-space:nowrap}

/* ===== portada fija: una sola pantalla, sin scroll, se adapta al alto ===== */
html:has(body.en-portada),body.en-portada{overflow:hidden;height:100svh;overscroll-behavior:none}
.portada{height:100svh;min-height:0;padding:clamp(12px,5dvh,56px) 24px 0}
.p-centro{min-height:0}
.p-logo{width:clamp(96px,26dvh,240px);height:clamp(96px,26dvh,240px);object-fit:contain}
.p-frase{margin-top:clamp(10px,3dvh,32px);font-size:clamp(19px,3.4dvh,30px)}
.p-lugar{margin-top:clamp(6px,1.4dvh,12px)}
.p-botones{margin-top:clamp(14px,4dvh,40px)}
.p-alt{margin-top:clamp(10px,2.2dvh,20px)}
.p-cred{padding:6px 0 calc(clamp(12px,3dvh,24px) + env(safe-area-inset-bottom))}
@media (min-width:640px){.p-logo{width:clamp(96px,26dvh,240px);height:clamp(96px,26dvh,240px)}.p-frase{font-size:clamp(19px,3.4dvh,30px)}}

/* ===== carrito completo ===== */
.l-pu{font-size:13px;color:var(--gold2);margin-top:4px}
.l-pu b{font-weight:600}
.agot{color:#e08a7a}
.l-res{margin:14px 0 6px;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:rgba(200,165,107,.04);display:grid;gap:6px;font-size:14px}
.l-res>div{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.l-res .l-tot{color:var(--fg);border-top:1px solid var(--line);padding:8px 0 0;margin-top:2px;font:600 20px var(--sans)}
.l-res .l-tot span:last-child{color:var(--gold2)}
.l-conf{font-size:12px}
.l-ta{min-height:64px;padding:12px 18px;border-radius:18px;resize:vertical;font-family:var(--sans)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c8a56b' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:40px}
.input.mal{border-color:#e08a7a;box-shadow:0 0 0 2px rgba(224,138,122,.18)}
.l-err{color:#e08a7a;font-size:13px;margin:4px 0 10px}
.l-item .l-pu b{font:600 13px var(--sans);color:var(--gold2)}

/* ===== portada: ocupa el espacio REAL disponible (respeta márgenes seguros del contenedor) ===== */
html:has(body.en-portada){height:100svh;box-sizing:border-box}
body.en-portada{height:100%;box-sizing:border-box}
.portada{height:100%;min-height:0;box-sizing:border-box}
body.en-portada{min-height:0}


/* iOS hace zoom al enfocar campos con texto menor de 16 px: todos los campos de texto miden 16 px */
input:not([type=range]),select,textarea{font-size:16px}