/* ============ LUMAI PREMIUM — SHARED CSS ============ */
:root{
  --bg:#F7F2E7;
  --bg2:#EFE6D2;
  --ink:#201A14;
  --ink-dim:#544B3E;
  --gold:#C9973F;
  --gold-hi:#A97A2C;
  --gold-text:#6B4A15;
  --gold-text-hi:#4F350F;
  --gold-btn-hover:#D9AA5C;
  --line:rgba(32,26,20,.12);
  --serif:'Fraunces',serif;
  --sans:'Inter',system-ui,sans-serif;
}
/* Dark chrome — nav, footer, preloader and photo heroes stay on the original dark palette
   regardless of the light body theme, since the logo mark and photo scrims are tuned for it. */
#preloader, nav, footer, .hero, .page-hero, .news-card, .admin-bar{
  --bg:#0e0d0b;
  --bg2:#151310;
  --ink:#f2ecdf;
  --ink-dim:#a89f8d;
  --gold:#cfa64a;
  --gold-hi:#e8c877;
  --gold-text:#cfa64a;
  --gold-text-hi:#e8c877;
  --gold-btn-hover:#e8c877;
  --line:rgba(242,236,223,.12);
  color:var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden}
p{font-weight:400}
::selection{background:var(--gold);color:#0e0d0b}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- GRAIN ---------- */
.grain{position:fixed;inset:-100%;z-index:2000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(3%,-5%)}50%{transform:translate(-7%,4%)}70%{transform:translate(6%,7%)}90%{transform:translate(-4%,2%)}}

/* ---------- PAGE TRANSITION ---------- */
.pt{position:fixed;inset:0;z-index:4000;background:var(--bg2);pointer-events:none;display:flex;align-items:center;justify-content:center;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.pt.cover{transform:scaleY(1);transform-origin:bottom}
.pt.reveal{transform:scaleY(0);transform-origin:top}
.pt-mark{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--gold);opacity:0;transform:scale(.6);
  transition:opacity .35s ease .18s,transform .35s ease .18s}
.pt.cover .pt-mark{opacity:1;transform:scale(1)}

/* ---------- PRELOADER (solo home) ---------- */
#preloader{position:fixed;inset:0;z-index:5000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  transition:transform .9s cubic-bezier(.76,0,.24,1);pointer-events:auto}
#preloader.done{transform:translateY(-100%);pointer-events:none}
#preloader > *{transition:opacity .5s ease,transform .5s ease}
#preloader.done > *{opacity:0;transform:translateY(-14px)}
#preloader img{height:64px;opacity:0;animation:fadeUp 1s .2s forwards}
.pre-tag{font-size:.65rem;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-dim);opacity:0;animation:fadeUp 1s .5s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- NAV ---------- */
nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem 4vw;transition:background .5s,backdrop-filter .5s,padding .5s,border-color .5s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(14,13,11,.78);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line);padding:.8rem 4vw}
nav .logo img{height:44px;filter:brightness(1.15)}
/* nav on pages with no dark photo hero (login, zona de proveedores): light bar, dark logo, from the start */
nav.on-light{
  --bg:#F7F2E7;--bg2:#EFE6D2;--ink:#201A14;--ink-dim:#544B3E;--gold:#C9973F;--gold-hi:#A97A2C;
  --gold-text:#6B4A15;--gold-text-hi:#4F350F;--gold-btn-hover:#D9AA5C;--line:rgba(32,26,20,.12);
  background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink);
}
nav.on-light.scrolled{background:rgba(247,242,231,.9)}
nav.on-light .logo img{filter:invert(1)}
/* product pages: no dark hero under the nav, so only the initial (unscrolled) state needs the
   light theme for contrast — once nav.scrolled kicks in it falls back to the normal dark nav */
nav.top-light:not(.scrolled){
  --bg:#F7F2E7;--bg2:#EFE6D2;--ink:#201A14;--ink-dim:#544B3E;--gold:#C9973F;--gold-hi:#A97A2C;
  --gold-text:#6B4A15;--gold-text-hi:#4F350F;--gold-btn-hover:#D9AA5C;--line:rgba(32,26,20,.12);
  background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink);
}
nav.top-light:not(.scrolled) .logo img{filter:invert(1)}
nav ul{display:flex;gap:2.4rem;list-style:none;align-items:center}
nav ul a{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);position:relative;transition:color .3s;font-weight:500;padding:.4rem 0;text-shadow:0 1px 5px rgba(0,0,0,.5)}
nav.on-light ul a,nav.top-light:not(.scrolled) ul a{text-shadow:none}
nav ul a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.65,0,.35,1)}
nav ul a:hover{color:var(--ink)}
nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
nav ul a.active{color:var(--gold-text-hi)}
nav ul a.active::after{transform:scaleX(1)}
.nav-cta{border:1px solid var(--gold);color:var(--gold-text)!important;padding:.6rem 1.4rem!important;border-radius:10px}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--gold);color:#0e0d0b!important}
.nav-cta.active{color:var(--gold-text)!important}
.nav-login{display:flex;align-items:center;gap:.5rem}
.nav-login::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink-dim)}
.nav-login.is-in::before{background:var(--gold)}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:9rem 4vw 4rem}
.login-box{width:100%;max-width:420px;border:1px solid var(--line);border-radius:22px;background:var(--bg2);padding:2.8rem 2.4rem}
.login-box .kicker{justify-content:center}
.login-box h1{font-size:clamp(1.8rem,4vw,2.4rem);text-align:center;margin-bottom:.6rem}
.login-box .lead{text-align:center;max-width:none;margin:0 auto 2.2rem;font-size:.9rem}
.login-tabs{display:flex;gap:.6rem;margin-bottom:2rem;border:1px solid var(--line);border-radius:12px;padding:.3rem}
.login-tabs button{flex:1;background:none;border:none;color:var(--ink-dim);font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;padding:.7rem;border-radius:9px;transition:.3s;cursor:pointer}
.login-tabs button.on{background:var(--gold);color:#0e0d0b}
.login-demo{margin-top:1.6rem;font-size:.76rem;color:var(--ink-dim);border-top:1px solid var(--line);padding-top:1.3rem;line-height:1.8}
.login-demo b{color:var(--ink)}
.login-err{display:none;background:rgba(207,90,74,.12);border:1px solid rgba(207,90,74,.4);color:#e89a8c;font-size:.8rem;
  padding:.8rem 1rem;border-radius:10px;margin-bottom:1.2rem}
.login-err.show{display:block}
form button[type="submit"]{width:100%;justify-content:center;border:none;cursor:pointer;margin-top:.4rem}

/* ---------- ZONA PROVEEDORES ----------
   Dirección "panel funcional": cabecera oscura con métricas reales
   (productos, sabores, % de fichas completas, sabores sin ninguna ficha),
   filtros y una lista densa de sabores con estado ES/PT — pensada para
   localizar rápido una ficha concreta, no para hojear fotografía (ese
   lenguaje ya vive en productos.html). Se descartaron otras dos
   direcciones (una calcada del catálogo público con tarjetas de foto
   grande, otra tipo dossier editorial) — el usuario eligió esta. */
/* Cabecera CLARA (misma paleta que el resto del sitio, igual que
   .admin-topbar en admin.css) — solo el rail de productos se queda oscuro.
   Antes esta cabecera era un bloque casi negro pegado justo debajo del nav
   claro del sitio: leía como un dashboard ajeno "pegado con cinta" en vez
   de parte del mismo panel. */
.zp-topbar{background:linear-gradient(180deg,var(--bg2),var(--bg));margin-top:5.6rem;padding:2.2rem 4vw;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1.6rem;border-bottom:1px solid var(--line)}
.zp-crumbs-dark{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.7rem}
.zp-crumbs-dark a{color:inherit}
.zp-topbar h1{font-family:var(--serif);font-weight:300;font-size:1.7rem;color:var(--ink);margin:0 0 .35rem}
.zp-topbar p{font-size:.78rem;color:var(--ink-dim);margin:0;max-width:38ch;line-height:1.55}
.zp-topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem}
.zp-user-row{display:flex;align-items:center;gap:1rem}
.zp-user{font-size:.72rem;color:var(--ink-dim)}
.zp-user b{font-family:var(--serif);color:var(--gold-text-hi)}
.zp-logout{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--line);
  padding:.55rem 1rem;border-radius:8px;transition:.3s}
.zp-logout:hover{border-color:var(--gold);color:var(--gold-text-hi)}

/* Cifras como tipografía editorial en línea (separadas por una regla
   vertical), no widgets de tarjeta oscura tipo dashboard. */
.zp-stats{display:flex;gap:1.6rem;align-items:baseline;flex:0 0 auto}
.zp-stat{text-align:right}
.zp-stat + .zp-stat{border-left:1px solid var(--line);padding-left:1.6rem}
.zp-stat b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--gold-text-hi);font-weight:500}
.zp-stat span{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}

.zp-toolbar{padding-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.zp-search{display:flex;align-items:center;gap:.6rem;width:min(100%,380px);border:1px solid var(--line);
  border-radius:10px;padding:.7rem 1rem;background:#fff;transition:border-color .3s}
.zp-search:focus-within{border-color:var(--gold)}
.zp-search svg{width:14px;height:14px;color:var(--ink-dim);flex:0 0 auto}
.zp-search input{flex:1 1 auto;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:.8rem;color:var(--ink)}
.zp-search input::placeholder{color:var(--ink-dim)}
.zp-search-count{flex:0 0 auto;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.zp-filters{display:flex;gap:.5rem}
.zp-filters button{background:none;border:1px solid var(--line);color:var(--ink-dim);font-family:var(--sans);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:.62rem 1rem;border-radius:8px;cursor:pointer;transition:.25s}
.zp-filters button:hover{border-color:var(--gold);color:var(--gold-text)}
.zp-filters button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.zp-body{display:flex;align-items:flex-start;gap:1.6rem;padding-top:1.6rem}

/* El índice de productos ya NO flota (no position:fixed): vive dentro del
   flujo normal de la página, como una columna más al lado de .zp-content,
   dentro del mismo <section> con padding/max-width que todo lo demás.
   Antes era un rail fijo de borde a borde con su propio scroll interno —
   el usuario lo probó así y no lo quiso: se sentía como una pieza aparte
   pegada encima de la web, con dos scrolls activos a la vez. Ahora sube y
   baja con el resto de la página — un único scroll. */
.zp-sidebar{display:flex;flex-direction:column;flex:0 0 300px;width:300px;
  border:1px solid #27272a;border-radius:14px;background:#18181b;overflow:hidden}
.zp-sidebar-title{flex:0 0 auto;padding:1rem 1.2rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:#a89f8d;border-bottom:1px solid #27272a}
.zp-sidebar-scroll{padding:.7rem}
.zp-sidebar-group-label{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#a89f8d;
  padding:.9rem .7rem .4rem}
.zp-sidebar-item{display:flex;align-items:center;gap:.7rem;width:100%;padding:.6rem .7rem;border-radius:9px;
  border:none;background:none;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.zp-sidebar-item:hover{background:#27272a}
.zp-sidebar-item.active{background:rgba(207,166,74,.1);box-shadow:inset 2px 0 0 var(--gold)}
.zp-sidebar-item img,.zp-sidebar-thumb-empty{flex:0 0 auto;width:34px;height:34px;border-radius:8px;object-fit:cover;
  background:rgba(255,255,255,.08)}
.zp-sidebar-item-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.zp-sidebar-item-info b{font-family:var(--serif);font-weight:400;font-size:.86rem;color:#e4e0d5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zp-sidebar-item.active .zp-sidebar-item-info b{color:#f4f4f5}
.zp-sidebar-item-info small{font-size:.64rem;color:#a89f8d}
.zp-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#52524d}
.zp-dot-full{background:var(--gold)}
.zp-sidebar-empty{padding:1rem .7rem;color:#a1a1aa}
.zp-back{display:none}

.zp-content{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:14px;background:#fff}
.zp-content-empty{padding:2rem;color:var(--ink-dim)}
.zp-content-head{display:flex;align-items:center;gap:1.1rem;padding:1.4rem 1.6rem;border-bottom:1px solid var(--line)}
.zp-img{flex:0 0 auto;width:64px;height:64px;border-radius:10px;overflow:hidden;background:rgba(32,26,20,.06)}
.zp-img img{width:100%;height:100%;object-fit:cover;display:block}
.zp-section-info{flex:1 1 auto;min-width:0}
.zp-cat{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:.3rem;display:block}
.zp-section-info h2{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin:0 0 .4rem}
.zp-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.zp-tags span{font-size:.62rem;color:var(--ink-dim);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.2rem .55rem}
.zp-progress{flex:0 0 auto;text-align:right}
.zp-progress b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--gold-text-hi);font-weight:500}
.zp-progress span{font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}

/* El acordeón de envasado/preparación compartido (mismo componente que la
   ficha pública) se muestra una sola vez por producto, como una barra
   plana entre la cabecera y la lista — no como tarjeta flotante. */
.zp-content .flavor-tech-shared{margin:0;border-radius:0;border-left:none;border-right:none;border-top:none;
  border-bottom:1px solid var(--line);background:var(--bg2)}
.zp-content .flavor-tech-shared .ft-summary{padding:.85rem 1.6rem}
.zp-content .flavor-tech-shared .ft-body-in{padding:1.2rem 1.6rem 1.5rem}

.zp-rows{padding:.4rem .6rem}
.zp-row{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;border-radius:10px}
.zp-flavor-thumb{flex:0 0 auto;width:44px;height:44px;border-radius:8px;overflow:hidden;background:rgba(32,26,20,.06)}
.zp-flavor-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.zp-flavor-info{flex:1 1 auto;min-width:0}
.zp-flavor-name{font-family:var(--serif);font-size:.95rem;color:var(--ink);display:block}
.zp-flavor-info .flavor-meta{font-size:.68rem;color:var(--ink-dim);margin:.15rem 0 0;padding:0}
.zp-flavor-info .flavor-tech{border-top:none;margin-top:.2rem}
.zp-flavor-info .flavor-tech .ft-summary{padding:.3rem 0}
.zp-flavor-info .flavor-tech .ft-body-in{padding:0 0 .6rem}
.zp-divider{height:1px;background:var(--line);margin:0 1rem}

.zp-badges{flex:0 0 auto;display:flex;gap:.4rem}
.zp-badge{font-size:.62rem;font-weight:700;letter-spacing:.02em;padding:.42rem .7rem;border-radius:7px;
  text-decoration:none;transition:background .2s}
.zp-badge-on{background:rgba(201,151,63,.14);color:var(--gold-text-hi)}
.zp-badge-on:hover{background:rgba(201,151,63,.26)}
.zp-badge-off{background:rgba(32,26,20,.045);color:var(--ink-dim);cursor:default}

.zp-product-dl{display:flex;flex-wrap:wrap;gap:.7rem;padding:1.4rem 1.6rem}

.zp-photos{display:block;margin:0 1.6rem 1.4rem;font-size:.72rem;letter-spacing:.04em;color:var(--gold-text);text-decoration:underline;text-underline-offset:.2em}
.zp-photos:hover{color:var(--gold-text-hi)}

@media(max-width:860px){
  /* En móvil las dos columnas no caben: se apilan (índice arriba, a
     ancho completo, encima del contenido). */
  .zp-body{flex-direction:column}
  .zp-sidebar{width:100%}
  .zp-content{display:none}
  .zp-back{display:inline-block;margin-bottom:1.2rem;font-size:.72rem;letter-spacing:.04em;color:var(--gold-text);
    text-decoration:underline;text-underline-offset:.2em}
  /* En móvil solo se ve una vista a la vez: lista (por defecto) o detalle
     (tras tocar un producto) — .has-selection (en <body>) lo controla el
     clic del sidebar, ver zona-proveedores.html. */
  body.has-selection .zp-sidebar{display:none}
  body.has-selection .zp-content{display:block}
}

@media(max-width:640px){
  .zp-topbar{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .zp-topbar-right{align-items:flex-start;width:100%}
  .zp-stats{flex-wrap:wrap}
  .zp-toolbar{flex-direction:column;align-items:stretch}
  .zp-search{width:100%}
  .zp-content-head{flex-wrap:wrap}
  .zp-row{flex-wrap:wrap}
  .zp-badges{width:100%;justify-content:flex-end}
}

/* ---------- ADMIN EDIT MODE ---------- */
.admin-bar{position:fixed;left:1.4rem;right:1.4rem;bottom:1.4rem;z-index:3000;background:rgba(14,13,11,.94);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(207,166,74,.35);border-radius:18px;box-shadow:0 18px 45px -12px rgba(0,0,0,.55);
  padding:.9rem 1.4rem;display:flex;align-items:center;justify-content:center;gap:.7rem 1.4rem;flex-wrap:wrap;max-width:1300px;margin-inline:auto;
  transition:bottom .3s cubic-bezier(.22,1,.36,1)}
.admin-bar span{font-size:.72rem;color:#c9c2b3;letter-spacing:.04em;display:flex;align-items:center;gap:.6rem;text-align:center}
.admin-bar span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 3px rgba(207,166,74,.22);flex-shrink:0}
.admin-bar span b{color:var(--gold-hi)}
.admin-bar-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.admin-bar .abtn{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.6rem 1.15rem;border-radius:10px;
  border:1px solid rgba(242,236,223,.18);color:#f2ece3;cursor:pointer;background:rgba(242,236,223,.04);transition:.25s}
.admin-bar .abtn:hover{border-color:var(--gold-hi);color:var(--gold-hi);background:rgba(207,166,74,.1)}
.admin-bar a.abtn{text-decoration:none;display:inline-block}
.admin-bar .abtn.on{background:var(--gold-hi);border-color:var(--gold-hi);color:#0e0d0b}
.editing{outline:1.5px dashed var(--gold);outline-offset:4px;border-radius:6px;cursor:text}
.editing:hover{outline-color:var(--gold-hi)}
.editing-img{outline:1.5px dashed var(--gold);outline-offset:4px;border-radius:6px;cursor:pointer}
.editing-img:hover{outline-color:var(--gold-hi);filter:brightness(.85)}
.admin-flash{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.5rem 1rem;border-radius:9px;
  border:1px solid rgba(90,160,90,.4);background:rgba(90,160,90,.12);color:#f2ece3}
.admin-flash.error{border-color:rgba(200,90,80,.4);background:rgba(200,90,80,.15)}

/* ---------- ADMIN PANEL (gestión de productos) ---------- */
.ap-toolbar{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem}
.admin-msg{border:1px solid var(--line);border-radius:14px;padding:1rem 1.4rem;margin-bottom:2rem;font-size:.86rem}
.admin-msg a{color:var(--gold-text);border-bottom:1px solid var(--gold);margin:0 .2rem}
.admin-msg.ok{border-color:rgba(90,160,90,.4);background:rgba(90,160,90,.08)}
.admin-msg.error{border-color:rgba(200,90,80,.4);background:rgba(200,90,80,.08)}
.ap-form-card{border:1px solid var(--line);border-radius:22px;background:var(--bg2);padding:2.4rem;margin-bottom:3rem}
.ap-form-card h2{font-family:var(--serif);font-weight:300;font-size:1.5rem;margin-bottom:1.6rem}
.ap-block{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:.4rem}
.ap-block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:1rem;flex-wrap:wrap}
.ap-block-head h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.ap-mini-btn{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.55rem 1rem;border-radius:9px;
  border:1px solid var(--line);color:var(--ink);cursor:pointer;background:none;transition:.3s}
.ap-mini-btn:hover{border-color:var(--gold);color:var(--gold-text)}
.ap-mini-btn-danger:hover{border-color:#c85a50;color:#c85a50}
.ap-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.7rem;margin-bottom:.7rem}
.ap-flavor-row{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:.7rem;margin-bottom:.7rem}
.ap-row input,.ap-flavor-row input{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:.85rem;padding:.7rem .9rem;outline:none;transition:border-color .3s}
.ap-row input:focus,.ap-flavor-row input:focus{border-color:var(--gold)}
.ap-row-remove{width:38px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--ink-dim);cursor:pointer;transition:.3s}
.ap-row-remove:hover{border-color:#c85a50;color:#c85a50}
.ap-preview{margin:.8rem 0 0}
.ap-preview img{max-width:160px;max-height:160px;border-radius:12px;border:1px solid var(--line);object-fit:cover}
.ap-list{display:grid;gap:1.2rem}
.ap-item{display:grid;grid-template-columns:88px 1fr auto;gap:1.4rem;align-items:center;border:1px solid var(--line);
  border-radius:16px;background:rgba(32,26,20,.03);padding:1rem 1.4rem}
.ap-item img{width:88px;height:88px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.ap-item-top{display:flex;gap:.6rem;align-items:center;margin-bottom:.2rem;flex-wrap:wrap}
.ap-item h3{font-family:var(--serif);font-weight:300;font-size:1.1rem}
.ap-item p{font-size:.8rem;color:var(--ink-dim)}
.ap-item-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.ap-badge{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.25rem .6rem;border-radius:20px;border:1px solid var(--line);color:var(--ink-dim)}
.ap-badge-hidden{border-color:rgba(200,90,80,.4);color:#c85a50}
.ap-badge-new{border-color:rgba(207,166,74,.5);color:var(--gold-text)}
.ap-checkbox{display:flex;align-items:center;gap:.7rem;margin-top:.4rem}
.ap-checkbox input{width:auto}
.ap-checkbox input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex-shrink:0;width:20px;height:20px;margin:0;
  border:1.5px solid var(--line);border-radius:6px;background:var(--bg2);cursor:pointer;position:relative;
  transition:background .2s,border-color .2s}
.ap-checkbox input[type="checkbox"]:hover{border-color:var(--gold)}
.ap-checkbox input[type="checkbox"]:checked{background:var(--gold);border-color:var(--gold)}
.ap-checkbox input[type="checkbox"]:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #1a1712;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ap-checkbox input[type="checkbox"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:720px){
  .ap-row{grid-template-columns:1fr 1fr}
  .ap-row-remove{grid-column:1/-1;width:100%}
}
.ap-modal{position:fixed;inset:0;z-index:4000;background:rgba(10,9,7,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:2rem}
.ap-modal-box{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:2rem;max-width:900px;width:100%;max-height:80vh;overflow-y:auto}
.ap-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4rem;gap:1rem}
.ap-modal-head h3{font-family:var(--serif);font-weight:300;font-size:1.2rem}
.ap-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.9rem}
.ap-gallery-thumb{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:none;aspect-ratio:1;transition:border-color .3s}
.ap-gallery-thumb:hover{border-color:var(--gold)}
.ap-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lumai-confirm-box{max-width:400px;padding:1.8rem}
.lumai-confirm-box p{font-size:.95rem;line-height:1.5;color:var(--ink)}
.lumai-prompt-input{width:100%;margin-top:1rem;background:var(--bg2);border:1px solid var(--line);border-radius:14px;color:var(--ink);
  font:inherit;padding:.7rem .9rem}
.lumai-prompt-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(207,166,74,.12)}
.lumai-confirm-actions{display:flex;justify-content:flex-end;gap:.8rem;margin-top:1.6rem}
.lumai-confirm-actions .lumai-confirm-danger{background:#c85a50;border-color:#c85a50;color:#fff}
.lumai-confirm-actions .lumai-confirm-danger:hover{background:#b34a41;border-color:#b34a41}
.ap-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.4rem}
.ap-gallery-item{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(32,26,20,.03)}
.ap-gallery-item .thumb{aspect-ratio:1;overflow:hidden}
.ap-gallery-item .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ap-gallery-item-body{padding:.8rem .9rem}
.ap-gallery-item-body p{font-size:.68rem;color:var(--ink-dim);word-break:break-all;margin-bottom:.6rem}
.ap-upload-card{border:1px dashed var(--line);border-radius:18px;padding:2rem;text-align:center;margin-bottom:2.4rem}
.burger{display:none;background:none;border:none;z-index:110}
.burger span{display:block;width:26px;height:1.5px;background:var(--ink);margin:7px 0;transition:.35s}
@media(max-width:860px){
  /* Animamos transform, no opacity: así el menú está siempre 100% opaco
     mientras se desliza y nunca se ve semitransparente por encima del
     contenido de la página (el "fantasma" de dos capas superpuestas que
     daba el fade de opacidad). */
  nav ul{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:2.4rem;
    transform:translateY(-100%);pointer-events:none;transition:transform .45s cubic-bezier(.65,0,.35,1)}
  nav ul.open{transform:translateY(0);pointer-events:auto}
  nav ul a{font-size:1.1rem}
  .burger{display:block}
  nav.menu-open .burger span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
  nav.menu-open .burger span:nth-child(2){opacity:0}
  nav.menu-open .burger span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
  /* Con el menú abierto, <nav> no debe reaccionar al scroll en absoluto: el
     menú (su <ul>, position:fixed;inset:0) ya lo tapa entero. Si dejamos que
     nav.scrolled cambie el padding, el botón burger/X se desplaza visible-
     mente al cruzar el scroll>40; y si además cambia el backdrop-filter, eso
     convierte a <nav> en containing block de sus descendientes fixed (igual
     que transform o filter), encogiendo el menú de pantalla completa a la
     cajita pequeña del propio nav en vez de cubrir el viewport. Congelamos
     aquí el aspecto "sin scroll" mientras el menú esté abierto para que
     ninguna de las dos cosas pueda pasar. */
  /* transition:none aquí: si no, el cambio a estos valores fijos se anima
     igualmente durante .5s (la transition de la regla base de nav sigue
     activa), y se ve la misma franja de color a medio camino que estamos
     evitando — tiene que ser un salto, no una animación. */
  nav.menu-open{padding:1.3rem 4vw;background:transparent;backdrop-filter:none;border-bottom-color:transparent;transition:none}
  /* Lo de arriba solo cubre el backdrop-filter MIENTRAS el menú está
     abierto — pero #menu sigue viviendo dentro de <nav> también cuando
     está cerrado (solo se traslada fuera de la pantalla), así que en
     cuanto cierras el menú y nav vuelve a ganar .scrolled al hacer scroll,
     el containing block se rompe otra vez y el menú "cerrado" se encoge/
     desplaza igual que antes. A este ancho el desenfoque no hace falta
     nunca: lo quitamos sin condiciones, esté el menú abierto, cerrado o a
     medio cerrar. */
  nav.scrolled{backdrop-filter:none}
}

/* ---------- SHARED TYPO / LAYOUT ---------- */
section{padding:8rem 4vw;position:relative}
@media(max-width:640px){
  section{padding:4.5rem 6vw}
  .page-hero{padding:6.5rem 6vw 5vh}
  .hero-inner{padding:0 6vw 7vh}
}
.kicker{font-family:var(--serif);font-style:italic;font-size:1.05rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gold-text-hi);margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.kicker::before{content:'✦';font-style:normal;font-size:.72rem;color:var(--gold-text)}
h1{font-family:var(--serif);font-weight:300;letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4.8vw,4rem);line-height:1.05;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--gold-text-hi)}
.lead{max-width:52ch;color:var(--ink-dim)}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.6em;margin:-.6em}
.split .w>span{display:inline-block;transform:translateY(110%)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:4rem;max-width:1440px;margin-inline:auto}
.sec-head p{max-width:40ch;color:var(--ink-dim)}

.btn{display:inline-flex;align-items:center;gap:.7rem;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:1.05rem 2rem;border-radius:10px;transition:background .4s,color .4s,border-color .4s;border:1px solid transparent}
.btn-solid{background:var(--gold);color:#0e0d0b}
.btn-solid:hover{background:var(--gold-btn-hover)}
.btn-ghost{border-color:color-mix(in srgb, var(--ink) 30%, transparent);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-text-hi)}
.btn .arr{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.btn:hover .arr{transform:translateX(5px)}

/* ---------- HERO (home) ---------- */
.hero{position:relative;height:82svh;min-height:720px;overflow:hidden}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.65,0,.35,1)}
.hero .slide.active{opacity:1}
.hero .slide .ph{width:100%;height:102%;object-fit:cover;will-change:transform}
.hero::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 80%,rgba(14,13,11,.35),transparent 60%),
  linear-gradient(to top,rgba(14,13,11,.96) 0%,rgba(14,13,11,.3) 45%,rgba(14,13,11,.4) 82%,rgba(14,13,11,.75) 100%);z-index:1}
.hero-inner{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;padding:0 4vw 10vh}
.hero-eyebrow{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;font-weight:400;color:var(--gold-hi);margin-bottom:1.6rem}
.hero-eyebrow::before{content:'✦';font-style:normal;font-size:.8rem;color:var(--gold)}
.hero h1{font-size:clamp(3rem,8.5vw,7.6rem);line-height:.98;max-width:12ch}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.6em;margin:-.6em}
.hero h1 .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.hero h1.em .w>span{transform:none}
.hero-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:2.6rem}
.hero-sub{max-width:36ch;color:var(--ink-dim);font-size:.98rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.scroll-hint{position:absolute;left:1.4vw;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.9rem;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);writing-mode:vertical-rl;rotate:180deg}
.scroll-hint .wheel{width:1px;height:44px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint .wheel::after{content:'';position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--gold);animation:wheel 2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wheel{to{top:110%}}
@media(max-width:860px){.scroll-hint{display:none}}
/* genuinely short viewports (phones in landscape, small netbooks) don't have the
   room to spare for a 720px hero without forcing a lot of extra scroll — shrink the
   text and the floor together there instead */
@media(max-height:700px) and (min-height:501px){
  .hero{min-height:640px}
  .hero h1{font-size:clamp(2.4rem,6.5vw,5.2rem)}
  .hero-eyebrow{margin-bottom:1.2rem}
  .hero-bottom{margin-top:1.8rem}
}
@media(max-height:500px){
  .hero{min-height:540px}
  .hero h1{font-size:clamp(2rem,5.5vw,3.6rem)}
  .hero-eyebrow{margin-bottom:.8rem}
  .hero-bottom{margin-top:1.2rem}
}

/* ---------- PAGE HERO (subpáginas) ---------- */
.page-hero{position:relative;min-height:40svh;display:flex;align-items:flex-end;padding:8rem 4vw 6vh;overflow:hidden}
.page-hero .bgimg{position:absolute;inset:0}
.page-hero .bgimg img{width:100%;height:115%;object-fit:cover;will-change:transform}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(14,13,11,.97) 0%,rgba(14,13,11,.5) 55%,rgba(14,13,11,.65) 100%)}
.page-hero .ph-inner{position:relative;z-index:2;width:100%}
.page-hero h1{font-size:clamp(2.8rem,7vw,6rem);line-height:1;max-width:14ch}
.page-hero .lead{margin-top:1.4rem}
.crumbs{display:flex;gap:.7rem;align-items:center;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1.6rem}
.crumbs a{color:var(--gold-text);transition:color .3s}
.crumbs a:hover{color:var(--gold-text-hi)}

/* ---------- NOVEDADES (home editorial) ---------- */
.news-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem;max-width:1440px;margin-inline:auto}
.news-card{position:relative;border-radius:20px;overflow:hidden;background:#F7F2E7;display:block}
.news-card{grid-column:span 3;aspect-ratio:3/3.6}
.news-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,1,.36,1);opacity:.9}
.news-card:hover img{transform:scale(1.08)}
.news-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(14,13,11,.9),transparent 55%)}
.news-card .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(232,200,119,.14) 48%,transparent 60%);transform:translateX(-120%);transition:transform 1s ease;z-index:2}
.news-card:hover .shine{transform:translateX(120%)}
.news-info{position:absolute;inset:auto 0 0 0;z-index:3;padding:1.8rem}
.tag{display:inline-block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;background:var(--gold);color:#0e0d0b;
  font-weight:600;padding:.4rem .9rem;border-radius:99px;margin-bottom:.9rem}
.news-info h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.1}
.news-info p{color:var(--ink-dim);font-size:.85rem;margin-top:.5rem;max-width:30ch}
@media(max-width:900px){.news-card{grid-column:span 6;aspect-ratio:4/3.4}}
@media(max-width:560px){.news-card{grid-column:span 12;aspect-ratio:4/3}}

/* ---------- NOVEDADES (página listado) ---------- */
.news-list{display:grid;gap:0;border-top:1px solid var(--line)}
.news-row{display:grid;grid-template-columns:120px 300px 1fr auto;gap:2.4rem;align-items:center;padding:2.2rem 0;border-bottom:1px solid var(--line);transition:background .4s,padding-left .4s}
.news-row:hover{background:rgba(207,166,74,.04);padding-left:1rem}
.news-row .n-img{width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden}
.news-row .n-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.news-row:hover .n-img img{transform:scale(1.08)}
.news-row .n-date{font-family:var(--serif);font-style:italic;color:var(--gold-text);font-size:1.05rem}
.news-row h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15;margin-bottom:.5rem}
.news-row p{color:var(--ink-dim);font-size:.92rem;max-width:56ch}
.news-row .n-arr{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink-dim);transition:.4s;font-size:1.1rem}
.news-row:hover .n-arr{background:var(--gold);border-color:var(--gold);color:#0e0d0b;transform:rotate(-45deg)}
@media(max-width:1000px){.news-row{grid-template-columns:200px 1fr;gap:1.6rem}.news-row .n-date,.news-row .n-arr{display:none}}
@media(max-width:640px){.news-row{grid-template-columns:1fr}}

/* ---------- PRODUCTOS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:3rem;max-width:1440px;margin-inline:auto}
.filters button{background:none;border:1px solid var(--line);color:var(--ink-dim);font-family:var(--sans);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:.7rem 1.4rem;border-radius:99px;transition:.35s}
.filters button:hover{border-color:var(--gold);color:var(--gold-text)}
.filters button.on{background:var(--gold);border-color:var(--gold);color:#0e0d0b;font-weight:600}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,460px));gap:1.1rem;max-width:1440px;margin-inline:auto;justify-content:center}
.prod-card{background:rgba(32,26,20,.03);border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:.35rem;
  transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .6s,background .5s;position:relative;display:block}
.prod-card:hover{border-color:rgba(207,166,74,.55);background:rgba(207,166,74,.05);transform:translateY(-4px);box-shadow:0 20px 45px -22px rgba(14,13,11,.35),0 8px 18px -12px rgba(207,166,74,.18)}
.prod-thumb{border-radius:12px}
.prod-card.hide{display:none}
.prod-thumb{aspect-ratio:4/3;overflow:hidden;position:relative}
.prod-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.prod-card:hover .prod-thumb img{transform:scale(1.06)}
.prod-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(14,13,11,.35),transparent 40%);opacity:0;transition:opacity .5s}
.prod-idx{position:absolute;top:.7rem;left:.7rem;z-index:2;font-family:var(--serif);font-style:italic;font-size:.7rem;color:#e8c877;
  background:rgba(14,13,11,.62);backdrop-filter:blur(8px);border:1px solid rgba(242,236,223,.18);width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.prod-idx-star svg{display:block;color:#e8c877}
.prod-body{padding:1.1rem 1.1rem 1.3rem;display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.prod-cat{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);font-weight:600}
.prod-body h3{font-family:var(--serif);font-weight:300;font-size:1.15rem;margin:.3rem 0 .35rem;letter-spacing:-.01em}
.prod-body p{font-size:.78rem;color:var(--ink-dim)}
.prod-go{flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink-dim);transition:.4s;margin-top:.2rem;font-size:.85rem}
.prod-card:hover .prod-go{background:var(--gold);border-color:var(--gold);color:#0e0d0b;transform:rotate(-45deg)}
@media(max-width:480px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}.prod-body{padding:.9rem .9rem 1.1rem}}

/* ---------- PRODUCTO DETALLE ---------- */
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;align-items:start}
.pd-media{position:relative}
.pd-media .frame{position:absolute;inset:-20px 20px 20px -20px;border:1px solid rgba(207,166,74,.45);border-radius:22px;z-index:0}
.pd-media img{position:relative;z-index:1;border-radius:22px;width:100%;aspect-ratio:1/1;object-fit:cover}
.pd-info{position:sticky;top:120px}
.pd-info h1{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.02;margin-bottom:1.4rem}
.pd-info .desc{color:var(--ink-dim);margin-bottom:2rem;font-size:1.02rem}
.pd-specs{border-top:1px solid var(--line);margin-bottom:2.4rem}
.pd-spec{display:flex;justify-content:space-between;gap:2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}

/* ---------- FLAVOR MENU LIST ---------- */
.flavor-section{margin:6rem 0 0;padding-top:4.5rem;border-top:1px solid var(--line)}
.flavor-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2.6rem}
.flavor-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--ink)}
.flavor-count{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.flavor-list{border-top:1px solid var(--line)}
.flavor-row{display:grid;grid-template-columns:44px 92px 1fr;gap:1.8rem;align-items:center;padding:1.5rem 0;
  border-bottom:1px solid var(--line);transition:background .4s,padding-left .4s}
.flavor-row:hover{background:rgba(207,166,74,.05);padding-left:1rem}
.f-num{font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--gold-text)}
.f-img{width:92px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.f-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.flavor-row:hover .f-img img{transform:scale(1.08)}
.f-info h3{font-family:var(--serif);font-weight:300;font-size:1.2rem;letter-spacing:-.005em;margin-bottom:.35rem}
.f-info p{font-size:.83rem;color:var(--ink-dim);max-width:60ch;line-height:1.5}
@media(max-width:700px){
  .flavor-row{grid-template-columns:60px 1fr;gap:1.1rem}
  .f-num{display:none}
  .f-img{width:60px}
}

/* ---------- FLAVOR GRID (sabores con foto grande) ---------- */
.flavor-note{color:var(--ink-dim);font-size:.92rem;max-width:56ch;margin:-1.6rem 0 2.4rem}
.flavor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.4rem}
.flavor-card{position:relative;border-radius:20px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);
  transition:border-color .5s,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.flavor-card:hover{border-color:rgba(207,166,74,.5);transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(0,0,0,.55)}
.flavor-card img{width:100%;aspect-ratio:4/3.2;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.flavor-card:hover img{transform:scale(1.07)}
.flavor-card>span{display:block;font-family:var(--serif);font-weight:300;font-size:1.2rem;letter-spacing:-.005em;padding:1.6rem 1.7rem .3rem}
.flavor-card .flavor-ing{display:block;font-size:.82rem;color:var(--ink-dim);line-height:1.6;padding:.4rem 1.7rem 1.7rem;font-style:normal}
.flavor-card .flavor-meta{font-size:.78rem;color:var(--gold-text-hi);line-height:1.6;padding:0 1.7rem 1.7rem;margin-top:-1.1rem}

/* ---------- ESPECIFICACIONES TÉCNICAS (acordeón propio, sin <details> nativo) ---------- */
.flavor-tech{border-top:1px solid var(--line)}
.flavor-tech .ft-summary{cursor:pointer;width:100%;background:none;border:none;font:inherit;color:inherit;
  display:flex;align-items:center;padding:1rem 1.7rem}
.flavor-tech .ft-summary span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:600}
.flavor-tech .ft-summary small{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-left:.7rem}
/* Icono +/× dibujado con dos barras (no con el carácter "+" de la fuente): así el
   giro de 45º pivota exactamente sobre su propio centro en vez de "orbitar" por el
   padding/kerning asimétrico del glifo, que es lo que se veía raro. */
.ft-icon{display:inline-block;position:relative;width:.8rem;height:.8rem;flex:0 0 auto;margin-left:auto;
  transition:transform .35s cubic-bezier(.65,0,.35,1)}
.ft-icon::before,.ft-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--gold-text);
  transform:translate(-50%,-50%)}
.ft-icon::before{width:100%;height:1.5px}
.ft-icon::after{width:1.5px;height:100%}
.flavor-tech.is-open .ft-icon{transform:rotate(45deg)}
/* .ft-body es el elemento que se anima (sin padding propio, para poder llegar
   a 0 de verdad); .ft-body-in lleva el padding real, así nunca compite con la
   altura animada — si el padding viviera en el propio elemento animado, el
   navegador no podría bajar de esa medida y la transición "saltaba" en dos tramos. */
.flavor-tech .ft-body{height:0;overflow:hidden;transition:height .35s cubic-bezier(.65,0,.35,1)}
.flavor-tech .ft-body-in{padding:0 1.7rem 1.6rem}
.ft-row{padding-top:.9rem}
.ft-row:first-child{padding-top:0}
.ft-row>b{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);display:block;margin-bottom:.4rem}
.ft-pal,.ft-steps{list-style:none}
.ft-pal li,.ft-steps li{padding:.6rem 0;border-bottom:1px dashed var(--line)}
.ft-pal li:last-child,.ft-steps li:last-child{border-bottom:none}
.ft-pal li{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.ft-pal span{font-size:.72rem;color:var(--ink-dim)}
.ft-pal b{font-family:var(--serif);font-weight:400;color:var(--gold-text-hi);font-size:1.05rem}
.ft-steps span{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.35rem}
.ft-steps p{font-size:.8rem;color:var(--ink);line-height:1.6}

.flavor-tech-shared{border:1px solid var(--line);border-radius:14px;margin:0 0 2.4rem;background:var(--bg2);overflow:hidden}
.flavor-tech-shared .ft-summary{padding:1.3rem 1.8rem}
.flavor-tech-shared.is-open .ft-summary{border-bottom:1px solid var(--line)}
.flavor-tech-shared .ft-body-in{padding:1.8rem;display:grid;grid-template-columns:1.3fr 1fr;gap:2.8rem;align-items:start}
.flavor-tech-shared .ft-row{padding-top:0}
@media(max-width:760px){.flavor-tech-shared .ft-body-in{grid-template-columns:1fr;gap:1.6rem}}
@media(max-width:600px){.flavor-grid{grid-template-columns:1fr}}
.pd-spec b{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.pd-spec span{font-family:var(--serif);font-size:1.05rem;text-align:right}
.pd-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem}
.pd-nav a{display:flex;flex-direction:column;gap:.3rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);transition:color .3s;max-width:45%}
.pd-nav a b{font-family:var(--serif);font-weight:300;font-size:1.2rem;letter-spacing:0;text-transform:none;color:var(--ink);transition:color .3s}
.pd-nav a:hover,.pd-nav a:hover b{color:var(--gold-text-hi)}
.pd-nav a.next{text-align:right;align-items:flex-end}
@media(max-width:900px){.pd{grid-template-columns:1fr;gap:3rem}.pd-info{position:static}}

/* ---------- NOSOTROS ---------- */
.about{display:grid;grid-template-columns:.9fr 1fr;gap:5rem;align-items:center;max-width:1320px;margin-inline:auto}
.about-media{position:relative}
.about-media .par{overflow:hidden;border-radius:22px}
.about-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:22px;will-change:transform}
.about-media .frame{position:absolute;inset:-20px 20px 20px -20px;border:1px solid rgba(207,166,74,.45);border-radius:22px;z-index:-1}
.about-badge{position:absolute;right:-16px;bottom:40px;background:var(--gold);color:#0e0d0b;border-radius:18px;padding:1.2rem 1.6rem;text-align:center;box-shadow:0 24px 50px rgba(0,0,0,.5)}
.about-badge b{font-family:var(--serif);font-weight:300;font-size:2.2rem;display:block;line-height:1}
.about-badge small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.about-text p{color:var(--ink-dim);margin-bottom:1.3rem}
.about-text p strong{color:var(--ink);font-weight:500}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.stat{border-top:1px solid var(--line);padding-top:1.2rem}
.stat b{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--gold-text-hi);display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.stat small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
@media(max-width:900px){
  .about{grid-template-columns:1fr;gap:3.5rem}
  .about-badge{right:10px;bottom:20px;padding:1rem 1.3rem}
  .about-badge b{font-size:1.7rem}
}

/* ---------- TIMELINE ---------- */
.timeline{border-top:1px solid var(--line)}
.t-row{display:grid;grid-template-columns:200px 1fr;gap:3rem;padding:2.6rem 0;border-bottom:1px solid var(--line)}
.t-row .t-year{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,3.2rem);color:var(--gold-text);line-height:1}
.t-row h3{font-family:var(--serif);font-weight:300;font-size:1.5rem;margin-bottom:.6rem}
.t-row p{color:var(--ink-dim);max-width:60ch}
@media(max-width:700px){.t-row{grid-template-columns:1fr;gap:.8rem}}

/* ---------- CALIDAD ---------- */
#calidad,.alt-bg{background:var(--bg2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;counter-reset:step}
.step{border:1px solid var(--line);border-radius:20px;padding:2.4rem 1.8rem;position:relative;transition:.5s;background:var(--bg);overflow:hidden}
.step::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.step:hover{border-color:rgba(207,166,74,.5);transform:translateY(-8px)}
.step:hover::after{transform:scaleX(1)}
.step::before{counter-increment:step;content:'0' counter(step);font-family:var(--serif);font-weight:300;font-size:3rem;color:var(--gold-text);display:block;margin-bottom:1.2rem;line-height:1}
.step h3{font-family:var(--serif);font-weight:300;font-size:1.4rem;margin-bottom:.7rem}
.step p{font-size:.86rem;color:var(--ink-dim)}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- CONTACTO ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:5rem}
.contact-info{display:flex;flex-direction:column;gap:1.8rem}
.c-item{display:flex;gap:1.2rem;align-items:flex-start;transition:transform .4s}
.c-item:hover{transform:translateX(6px)}
.c-item .ico{width:50px;height:50px;flex:none;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:var(--gold-text);font-size:1.05rem;transition:.4s}
.c-item:hover .ico{border-color:var(--gold);background:var(--gold);color:#0e0d0b}
.c-item b{display:block;font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.25rem}
.c-item span{color:var(--ink-dim);font-size:.95rem}
.c-item a{color:var(--ink);border-bottom:1px solid var(--gold);transition:color .3s}
.c-item a:hover{color:var(--gold-text-hi)}
form{display:grid;gap:1.1rem}
.field{display:grid;gap:.5rem}
.field label{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.field input,.field textarea,.field select{background:var(--bg2);border:1px solid var(--line);border-radius:14px;color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:.95rem;padding:1rem 1.2rem;outline:none;transition:border-color .35s,box-shadow .35s;resize:vertical;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B4A15' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.2rem center}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(207,166,74,.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:900px){.contact{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* ---------- CTA BAND ---------- */
.cta-band{margin:0 4vw 8rem;border:1px solid rgba(207,166,74,.35);border-radius:26px;padding:5rem 4vw;text-align:center;position:relative;overflow:hidden;background:var(--bg2)}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(207,166,74,.16),transparent 60%)}
.cta-band h2{margin-bottom:1.2rem}
.cta-band p{color:var(--ink-dim);max-width:46ch;margin:0 auto 2.4rem;position:relative}
.cta-band > *{position:relative}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:5rem 4vw 2rem;overflow:hidden}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:center;margin-bottom:2.4rem}
.foot-top img{height:40px}
.foot-links{display:flex;flex-wrap:wrap;gap:1.8rem}
.foot-links a{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);transition:color .3s}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--ink-dim);font-size:.78rem;border-top:1px solid var(--line);padding-top:1.8rem}
@media(max-width:640px){
  footer{padding:3.5rem 6vw 2rem}
  .foot-top{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
}
.credit-link{color:var(--ink-dim);transition:color .3s}
.credit-link:hover{color:var(--gold)}

/* ---------- LEGAL PAGES ---------- */
.legal{padding:6rem 4vw 9rem}
.legal-wrap{max-width:760px;margin:0 auto}
.legal-wrap .updated{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:3.5rem;display:block}
.legal-wrap h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:3.4rem 0 1.1rem;letter-spacing:-.005em}
.legal-wrap h2:first-of-type{margin-top:0}
.legal-wrap h3{font-family:var(--serif);font-weight:300;font-size:1.15rem;color:var(--gold-text-hi);margin:2rem 0 .8rem}
.legal-wrap p{color:var(--ink-dim);margin-bottom:1.1rem}
.legal-wrap p strong{color:var(--ink);font-weight:600}
.legal-wrap ul{color:var(--ink-dim);margin:0 0 1.1rem 1.3rem}
.legal-wrap li{margin-bottom:.5rem}
.legal-wrap a{color:var(--gold-text-hi);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--line)}
.legal-wrap a:hover{text-decoration-color:var(--gold-text-hi)}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.86rem}
.legal-table th,.legal-table td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-dim)}
.legal-table th{color:var(--ink);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.legal-table td:first-child,.legal-table th:first-child{color:var(--ink-text,var(--ink))}
@media(max-width:640px){.legal-table{display:block;overflow-x:auto;white-space:nowrap}}

/* ---------- COOKIE CONSENT ---------- */
#cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:3900;background:#0e0d0b;color:#f2ecdf;
  max-height:100svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid rgba(242,236,223,.14);transform:translateY(102%);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
#cc-banner.show{transform:translateY(0);box-shadow:0 -20px 60px rgba(0,0,0,.35)}
.cc-inner{max-width:1240px;margin:0 auto;padding:2rem 4vw 1.8rem}
.cc-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 2.4rem}
.cc-copy{max-width:640px}
.cc-kicker{font-family:var(--serif);font-style:italic;font-size:1rem;color:#e8c877;display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.cc-kicker::before{content:'✦';font-style:normal;font-size:.68rem;color:#cfa64a}
.cc-copy p{font-size:.84rem;color:#a89f8d;line-height:1.65}
.cc-copy a{color:#e8c877;text-decoration:underline;text-underline-offset:.2em}
.cc-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;flex-shrink:0}
.cc-actions button{font-family:var(--sans);cursor:pointer}
.cc-btn-text{background:none;border:none;color:#a89f8d;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:1.05rem .6rem;transition:color .3s}
.cc-btn-text:hover{color:#f2ecdf}
.cc-btn-ghost{background:none;border:1px solid rgba(242,236,223,.28);color:#f2ecdf;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;padding:1.05rem 1.7rem;border-radius:10px;transition:border-color .3s,color .3s}
.cc-btn-ghost:hover{border-color:#cfa64a;color:#e8c877}
.cc-btn-solid{background:#cfa64a;border:1px solid #cfa64a;color:#0e0d0b;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;padding:1.05rem 1.9rem;border-radius:10px;transition:background .3s}
.cc-btn-solid:hover{background:#e8c877}
#cc-prefs{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1),margin .5s}
#cc-prefs.open{max-height:640px;margin-top:2rem}
.cc-prefs-inner{border-top:1px solid rgba(242,236,223,.14);padding-top:1.8rem;display:grid;gap:1rem}
.cc-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:1.6rem;padding:1.1rem 0;border-bottom:1px solid rgba(242,236,223,.08)}
.cc-cat:last-child{border-bottom:none;padding-bottom:0}
.cc-cat-info b{display:block;font-size:.86rem;letter-spacing:.02em;margin-bottom:.3rem;color:#f2ecdf}
.cc-cat-info span{display:block;font-size:.78rem;color:#a89f8d;max-width:56ch;line-height:1.6}
.cc-switch{position:relative;flex-shrink:0;width:44px;height:26px}
.cc-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cc-switch label{position:absolute;inset:0;background:rgba(242,236,223,.16);border-radius:20px;transition:background .3s;cursor:pointer}
.cc-switch label::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#f2ecdf;border-radius:50%;transition:transform .3s}
.cc-switch input:checked + label{background:#cfa64a}
.cc-switch input:checked + label::after{transform:translateX(18px);background:#0e0d0b}
.cc-switch input:disabled + label{opacity:.55;cursor:not-allowed}
.cc-prefs-foot{display:flex;justify-content:flex-end;gap:.8rem;margin-top:.4rem}

#cc-reopen{position:fixed;left:1.4rem;bottom:1.4rem;z-index:3800;width:38px;height:38px;border-radius:50%;
  background:#0e0d0b;border:1px solid rgba(242,236,223,.18);color:#e8c877;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3);opacity:0;pointer-events:none;transform:scale(.8);
  transition:opacity .4s,transform .4s,border-color .3s}
#cc-reopen.show{opacity:1;pointer-events:auto;transform:scale(1)}
#cc-reopen.no-anim{transition:none}
#cc-reopen:hover{border-color:#cfa64a}
@media(max-width:720px){
  .cc-main{align-items:stretch}
  .cc-actions{width:100%}
  .cc-actions button{flex:1}
  .cc-cat{flex-direction:column;gap:.7rem}
}