/* Base */
:root{ --coffee:#251a14; --coffee-rgb:37,26,20; --cream:#f7f3ef; --dark:#1f1f1f; --muted:#777 }
:root{ --page-width: 1400px; --page-gutter: 2rem; --bg: var(--cream); --fg: #1f2937; --card:#ffffff; --border:#e6e6e6; --muted-fg:#6b7280; --footer-bg:#f3eee7; --footer-fg:#5a463a; --accent:#c67b4e; --accent-contrast:#ffffff; --price:#251a14; --footer-logo-height:14px; --footer-logo-height-lg:28px; --footer-logo-margin-bottom:.25rem }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{ font-family:'Lora', Georgia, 'Times New Roman', Times, serif; color:var(--fg); background:var(--bg) }
/* Reset de enlaces para evitar color morado en visitados y mantener consistencia */
a, a:visited { color: inherit; text-decoration: none; }
/* Encabezados y titulos usan Playfair Display */
h1,h2,h3,h4,h5,h6, .e-title, .e-number{ font-family:'Playfair Display', Georgia, 'Times New Roman', Times, serif }
/* Reemplazar clases de cuerpo de Tailwind en tema oscuro */
img{ max-width:100%; display:block }
.container{ width:min(var(--page-width),calc(100% - var(--page-gutter))); margin-inline:auto; padding-left:1.25rem; padding-right:1.25rem }

/* Barra superior */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:75; background:var(--dark); color:#fff; font-size:.875rem; opacity:1 !important; box-shadow:0 2px 8px rgba(0,0,0,.18) }
.topbar .container{ display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.5rem 0; text-align:center }
.topbar .topbar-close{ background:transparent; border:0; color:#fff; font-size:.875rem; cursor:pointer; padding:0; width:1.25rem; height:1.25rem; display:flex; align-items:center; justify-content:center; line-height:1 }

/* Encabezado (navbar fija a tope, no flotante) */
.site-header{ position:fixed; top: var(--header-top, 0px); left:0; right:0; z-index:70; background:var(--card); border-bottom:1px solid var(--border); isolation:isolate; overflow:hidden }
.site-header .container{ position:relative; overflow:visible; display:flex; align-items:center; justify-content:space-between; padding:1.5rem 1.25rem; width:min(var(--page-width),calc(100% - var(--page-gutter))); margin-inline:auto; background:transparent; backdrop-filter:none; border:0; border-radius:0; box-shadow:none; color:var(--fg) }

/* Asegurar contenido por encima */
.site-header .brand, .site-header .nav, .site-header .actions{ position:relative; z-index:2 }
.brand{ display:flex; align-items:center; gap:.5rem; color:var(--coffee); text-decoration:none; font-weight:700 }
/* Marca en encabezado claro */
.site-header .brand{ color:var(--coffee) }
/* Asegurar altura consistente del logo (escritorio por defecto) */
.brand img{ height:64px; width:auto; display:block }
/* Ligera transparencia y sombra sutil para mezclar sobre encabezado translucido */
.site-header .brand img{ opacity:.92; filter: drop-shadow(0 1px 0 rgba(255,255,255,.15)) drop-shadow(0 2px 6px rgba(0,0,0,.25)); transition: opacity .2s ease, transform .2s ease }
.site-header .brand:hover img{ opacity:1; transform: scale(1.02) }
.nav{ display:flex; gap:1rem }
.nav a{ color:var(--dark); text-decoration:none; padding:.25rem .5rem; border-radius:.375rem; font-size:1.232rem; font-weight:700; font-family:'Montserrat', Arial, Helvetica, sans-serif }
.nav a.active, .nav a:hover{ background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05) }
/* Overrides de enlaces para encabezado claro */
.site-header .nav a{ color:var(--fg) }
.site-header .nav a.active, .site-header .nav a:hover{ background:rgba(0,0,0,.06); box-shadow:none }
.actions{ display:flex; align-items:center; gap:.5rem }
.icon-btn{ background:var(--card); border:1px solid var(--border); padding:.5rem .8rem; border-radius:.375rem; cursor:pointer; text-decoration:none; color:var(--fg); display:inline-flex; align-items:center; gap:.35rem; font-weight:600; line-height:1.2; transition: background-color .2s ease, color .2s ease, border-color .2s ease }
.icon-btn.active{ border-color:var(--coffee) }
.badge{ background:var(--coffee); color:#fff; font-size:.7rem; padding:.05rem .35rem; border-radius:999px; margin-left:.25rem }
.hamburger{ display:none }
/* Botones del encabezado */
.site-header .icon-btn{ background:var(--card); border-color:var(--border); color:var(--fg) }
.site-header .icon-btn:hover{ background:rgba(0,0,0,.06) }

/* Capa de granos de cafe en el encabezado: ancho completo */
.nav-beans{ position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:1; pointer-events:none; opacity:.26; transition: opacity .25s ease }
.beans-active .nav-beans{ opacity:.34 }
.nav-beans .bean{ position:absolute; width:var(--bean-size, 46px); height:auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)) saturate(110%) brightness(1.05);
  transform: translate(calc(var(--dx, 0px) * var(--fx, 1)), calc(var(--dy, 0px) * var(--fy, 1))) rotate(var(--rot, 0deg)) scale(var(--s, 1));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 900px){ .nav-beans{ display:none } }

/* Menu movil */
.mobile-menu{ display:none; flex-direction:column; gap:.5rem; padding:.5rem 1rem; border:1px solid var(--border); background:var(--card); border-radius:.5rem; width:min(var(--page-width),calc(100% - var(--page-gutter))); margin: .5rem auto 0; position:relative; z-index:59 }
.mobile-menu a{ text-decoration:none; color:var(--fg); font-weight:700; font-size:1.12rem; font-family:'Montserrat', Arial, Helvetica, sans-serif }

/* Seccion hero */
.hero{ position:relative; padding:4rem 0; text-align:center; isolation:isolate }
/* Fondo above the fold con video para viewports medianos o mas */
@media (min-width: 768px){
  .hero{ padding:6rem 0; min-height: calc(85vh - var(--page-offset-top, 136px)) }
  .hero .hero-media{ position:absolute; 
    /* extender hacia arriba desde el tope para cubrir barra superior y encabezado */
    top: calc(-1 * var(--page-offset-top, 136px));
    bottom:0; left:50%; width:100vw; transform:translateX(-50%);
    z-index:-1; opacity:1; overflow:hidden }
  .hero .hero-media video{ width:100%; height:100%; object-fit:cover; display:block }
  /* Overlay con degradado: mas oscuro arriba, mas claro abajo */
  .hero .hero-media::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.10) 100%); }
  /* Neutralizar capa superior previa para evitar doble oscurecimiento */
  .hero .hero-media::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)); }
}

  /* Capa overlay sobre el video para mejorar legibilidad del texto */
  :root{ --hero-overlay-color: 0,0,0; --hero-overlay-opacity: 0.46; --hero-overlay-opacity-mobile: 0.56 }
  /* Overlay más oscuro para mejorar contraste del texto sobre el video */
  .hero-overlay{ position:absolute; inset:0; left:0; right:0; top:0; bottom:0; z-index:0; pointer-events:none; background: rgba(var(--hero-overlay-color), var(--hero-overlay-opacity)); transition: background-color .2s ease, opacity .2s ease }
  .hero .hero-media{ z-index:-1 }
  .hero > *{ position:relative; z-index:2 }
  /* Clarificar la letra que aparece sobre el video: texto blanco, sombra suave y mayor contraste */
  .hero{ color: #fff }
  .hero h1{ color: #fff; text-shadow: 0 6px 20px rgba(0,0,0,.6); font-size: clamp(1.6rem, 5vw, 2.8rem); line-height:1.02; margin-bottom:.5rem }
  .hero p{ color: rgba(255,255,255,.92); text-shadow: 0 3px 12px rgba(0,0,0,.45); font-size: clamp(1rem, 2.4vw, 1.15rem); margin-bottom:1rem }
  .hero .btn{ box-shadow: 0 6px 20px rgba(0,0,0,.28) }
  @media (max-width: 900px){
    .hero-overlay{ background: rgba(var(--hero-overlay-color), var(--hero-overlay-opacity-mobile)) }
  }
/* Capa oscura sutil en tema oscuro para mejorar contraste de texto */
@media (min-width: 768px){
}
.btn{ background:var(--accent); color:var(--accent-contrast); padding:.6rem 1rem; border-radius:.375rem; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; border:1px solid transparent; font-weight:600; line-height:1.2; cursor:pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease }
.btn:hover{ filter:brightness(1.05) }

[data-press-effect]{ position:relative; overflow:hidden; transform:translateZ(0); transition: transform .18s ease }
[data-press-effect].press-active{ transform:translateZ(0) scale(.97) }
[data-press-effect]::after{ content:""; position:absolute; inset:-10%; background:radial-gradient(circle at var(--press-x,50%) var(--press-y,50%), rgba(var(--coffee-rgb),.28) 0%, rgba(var(--coffee-rgb),.14) 45%, transparent 70%); opacity:0; transform:scale(0); pointer-events:none; will-change:transform,opacity }
[data-press-effect].press-active::after{ animation:btn-press .45s ease-out }
@keyframes btn-press{ 0%{ opacity:.32; transform:scale(0) } 60%{ opacity:.18 } 100%{ opacity:0; transform:scale(1.35) } }

/* Cuadricula */
.grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.card{ background:var(--card); border:1px solid var(--border); border-radius:.5rem; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease }
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.06) }
.card .p{ padding:1rem }
.price{ color:var(--price); font-weight:700 }

/* Filtros */
.filters{ display:flex; gap:.5rem; padding:1rem 0; position:sticky; top:96px; background:var(--bg); z-index:40; border-bottom:1px solid var(--border) }
.filters select{ padding:.5rem; border:1px solid var(--border); border-radius:.375rem; background:var(--card); color:var(--fg) }

/* Pie de pagina (rico) */
.site-footer{ background:var(--footer-bg); color:var(--footer-fg); margin-top:4rem; border-top:1px solid rgba(0,0,0,.05) }
.site-footer .container{ width:min(var(--page-width),calc(100% - var(--page-gutter))); margin-inline:auto }
.footer-news{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0; border-bottom:1px solid rgba(0,0,0,.06) }
.footer-news .label{ font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; opacity:.9 }
.footer-news .input{ display:flex; align-items:center; gap:.6rem; flex:1; max-width:520px }
.footer-news input{ width:100%; border:0; border-bottom:2px solid currentColor; background:transparent; padding:.4rem 0; color:inherit; font-size:1.2rem; outline:none }
.footer-news input::placeholder{ color:#8a776d }
.footer-news .arrow{ border:0; background:transparent; color:#5a463a; font-size:1.2rem; cursor:pointer }
.footer-main{ display:grid; grid-template-columns: 1fr 3fr; gap:2rem; padding:1.25rem 0 }
.footer-social{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; color:inherit }
.site-footer .footer-social img{ display:block; height:var(--footer-logo-height); width:auto; max-height:none; margin-bottom:var(--footer-logo-margin-bottom) }
.footer-columns{ display:grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap:2rem }
.footer-columns h4{ font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 .75rem; color:inherit }
.footer-columns a{ display:block; color:inherit; text-decoration:none; padding:.3rem 0 }
.footer-columns a:hover{ text-decoration:underline }
.footer-locale{ padding:1rem 0; border-top:1px solid rgba(0,0,0,.06); display:flex; align-items:center; gap:.5rem }
.footer-locale select{ border:0; background:transparent; color:inherit; padding:.25rem 0 }
.footer-legal{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-top:1px solid rgba(0,0,0,.06) }
.footer-legal .links a{ color:inherit; text-decoration:none; margin-right:1rem }
.footer-legal .links a:hover{ text-decoration:underline }
.footer-disclaimer{ font-size:.8rem; line-height:1.4; opacity:.9; color:#6a5a50; padding-bottom:1.5rem }

@media (max-width: 900px){
  .footer-main{ grid-template-columns: 1fr; }
  .footer-columns{ grid-template-columns: repeat(2, minmax(140px, 1fr)); gap:1.25rem }
  .footer-news{ flex-direction:column; align-items:flex-start }
  .footer-news .input{ max-width:100% }
}

/* Aviso emergente */
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:rgba(31,41,55,.95); color:#fff; padding:.6rem .9rem; border-radius:.5rem; z-index:100; box-shadow:0 10px 25px rgba(0,0,0,.2); max-width:90vw }
.toast[hidden]{ display:none }

/* (capa de busqueda eliminada) */

/* Acordeon */
.accordion details{ background:var(--card); border:1px solid var(--border); border-radius:.5rem; padding: .75rem 1rem; margin:.5rem 0 }
.accordion summary{ cursor:pointer; font-weight:600 }

/* Capa de transicion (barrido/desvanecer) */
.transition-overlay{ position:fixed; inset:0; background:#fff; transform:translateY(100%); opacity:0; pointer-events:none; z-index:80 }
.transition-overlay.active{ animation:wipe .55s ease both }
@keyframes wipe{ 0%{ transform:translateY(100%); opacity:0 } 20%{ opacity:1 } 100%{ transform:translateY(0); opacity:1 } }

/* Adaptativo */
@media (max-width: 900px){
  .nav{ display:none }
  .hamburger{ display:inline-flex }
  .mobile-menu{ display:flex }
  .mobile-menu[hidden]{ display:none !important }
  /* Mantener logo balanceado en movil */
  .brand img{ height:36px }
}

/* Mostrar el toggle de tema como el último control dentro de .actions */

/* En mobile, mantener el toggle visible y al final del flujo */
@media (max-width: 900px){
}

/* Small user icon button styling */
.user-icon{ padding:.4rem .6rem }
.user-icon svg{ width:18px; height:18px; display:block }
.user-icon:focus, .user-icon:hover{ background:rgba(0,0,0,.04); border-color:var(--border); outline:none }
.user-icon[aria-label]{ color:var(--fg) }

/* Espaciado para evitar superposicion del encabezado fijo */
/* Asegurar que el contenido quede debajo de barra superior (si existe) y encabezado */
main.container{ padding-top: calc(var(--header-top, 0px) + var(--header-height, 96px) + 12px) }
.filters{ display:flex; gap:.5rem; padding:1rem 0; position:sticky; top: calc(var(--header-top, 0px) + var(--header-height, 96px) + 8px); background:var(--cream); z-index:40; border-bottom:1px solid #eee }

/* Banner promocional en tienda */
.promo-banner{ margin-top:.6rem; margin-bottom:.6rem }
.promo-inner{ position:relative; display:block; background:transparent; border-radius:1rem; overflow:hidden; max-height:160px; border:1px solid rgba(0,0,0,.06) }
.promo-media{ position:relative; width:100%; height:100%; min-height:120px }
.promo-media img{ width:100%; height:100%; object-fit:cover; display:block }
.promo-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; padding:0 1.25rem; background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.25) 100%); color:#fff }
.promo-text{ padding:.5rem .75rem; display:flex; flex-direction:column; justify-content:center; gap:0.1rem; max-width:60% }
.promo-title{ font-family:'Playfair Display', Georgia, 'Times New Roman', Times, serif; font-size: clamp(1rem, 2.2vw, 1.25rem); line-height:1.06; margin:0; color:inherit }
.promo-sub{ font-size: .85rem; line-height:1.15; opacity:0.95; margin:0; color:inherit; max-height:2.4em; overflow:hidden; text-overflow:ellipsis }

@media (max-width: 980px){
  .promo-inner{ max-height:none }
  .promo-media{ height:60px; min-height:60px }
  .promo-overlay{ padding:0 .75rem; justify-content:flex-start }
  .promo-text{ max-width:80%; padding:.25rem .5rem }
  .promo-title{ font-size:1rem }
  .promo-sub{ font-size:.72rem }
}

/* Seccion de evidencia (pixel perfect) */
.evidence-section{ position:relative; margin:3rem 0 0 }
.evidence-inner{ position:relative; z-index:0; isolation:isolate; padding:3rem 0 }
/* Fondo a ancho completo originado desde el contenedor interno */
.evidence-inner::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:#f5efe5; z-index:-1 }
.evidence-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:2.5rem; align-items:start }
.e-beans{ position:absolute; pointer-events:none; user-select:none; width:160px; height:auto; opacity:.95 }
.e-beans-left{ left:-10px; bottom:-22px; transform:rotate(-8deg) }
.e-beans-right{ right:14px; top:-18px; transform:rotate(10deg) }
.e-left{ grid-column:1/2 }
.e-title{ font-family: Georgia, "Times New Roman", Times, serif; font-weight:700; line-height:1.05; color:#3b2a1f; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing:.01em; margin: .25rem 0 1.25rem }
.e-stat{ color:#3b2a1f }
.e-number{ font-family: Georgia, "Times New Roman", Times, serif; color:#f27d00; font-size: clamp(2.4rem, 6vw, 4rem); line-height:1; letter-spacing:.01em; margin-bottom:.4rem }
.e-sub{ margin:.15rem 0; font-size:1.1rem; color:#4b3a2f }
.e-stat-a{ grid-column:2/3 }
.e-stat-b{ grid-column:3/4 }
.e-mid{ grid-column:2/3; border-top:1px solid rgba(0,0,0,.18); padding-top:1rem; margin-top:.75rem }
.e-badge{ display:inline-flex; align-items:center; gap:.6rem; background:#f6d9b6; border:1px solid #f0c89a; color:#3b2a1f; border-radius:.6rem; padding:.4rem .7rem; margin:.25rem 0 1rem }
.e-badge-num{ background:#f27d00; color:#fff; font-weight:700; border-radius:.45rem; padding:.2rem .45rem; font-size:.95rem }
.e-badge-label{ font-size:.95rem }
.e-desc{ color:#4b3a2f; font-size:1.05rem; line-height:1.5; max-width:38ch }
.e-reasons{ grid-column:3/4; border-top:1px solid rgba(0,0,0,.18); padding-top:1rem; margin-top:.75rem }
.e-reasons-title{ color:#3b2a1f; font-size:1.15rem; margin:.25rem 0 1rem; line-height:1.4 }
.e-list{ list-style:none; padding:0; margin:0; display:grid; gap:.65rem; color:#cf6500 }
.e-list li{ color:#cf6500; font-weight:600; display:flex; align-items:center; gap:.6rem; font-size:1.05rem }
.e-dot{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:#fbe3c7; color:#cf6500; font-weight:700 }
.e-source{ grid-column:2/4; color:#6a5a50; font-size:.85rem; margin-top:1.25rem }

/* Boton de tema */

@media (max-width: 980px){
  .evidence-grid{ grid-template-columns: 1fr; gap:1.5rem }
  .e-stat-a,.e-stat-b,.e-mid,.e-reasons,.e-source{ grid-column:auto }
  .e-left{ order:-1 }
  .e-title{ font-size: clamp(2rem, 8vw, 2.4rem) }
  .e-beans{ width:110px; opacity:.9 }
  .e-beans-left{ left:-8px; bottom:-16px }
  .e-beans-right{ right:6px; top:-12px }
}

/* Ajustar tamano del logo en pantallas grandes */
@media (min-width: 980px){
  .site-footer .footer-social img{ height:var(--footer-logo-height-lg); }
}

/* Utilidad: texto atenuado respeta el tema */
.muted{ color:var(--muted-fg) }

/* ===== Trazabilidad (UI armoniosa) ===== */
.trace-hero{ text-align:left; padding:2rem 0 1rem; min-height:auto }
.trace-layout{ display:grid; grid-template-columns: 1.1fr 1fr; gap:1rem; align-items:start; margin: .5rem 0 1.5rem }
.trace-left, .trace-right{ display:flex; flex-direction:column; gap:1rem }

/* Marco del escáner */
.scan-frame{ position:relative; width:100%; aspect-ratio: 4 / 3; border-radius:.75rem; overflow:hidden; border:1px solid var(--border); background:#000 }
.scan-video{ width:100%; height:100%; object-fit:cover; display:block }
#qrOverlay{ position:absolute; inset:0; width:100%; height:100% }
.scan-overlay{ position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12) }
.scan-line{ position:absolute; left:0; right:0; height:2px; background:rgba(255,255,255,.85); animation:scan 1.8s linear infinite }
@keyframes scan{ 0%{ top:12% } 100%{ top:88% } }

.trace-controls{ display:flex; gap:.5rem; margin-top:.75rem }
.trace-status{ margin-top:.35rem }
.trace-hint{ margin-top:.5rem }
.trace-form{ margin-top:.5rem }
.trace-form-row{ display:flex; gap:.5rem; align-items:center }
.trace-form-row input{ flex:1 }
.trace-error{ color:#b91c1c; margin-top:.25rem }

/* Resultado */
.trace-result h3{ margin:.15rem 0 .25rem }
.trace-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 }
.trace-chips .chip, .trace-chip{ background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:999px; padding:.2rem .55rem; font-size:.82rem }
.trace-details{ display:grid; grid-template-columns: max-content 1fr; gap:.35rem .75rem; margin-top:.5rem }
.trace-details dt{ color:var(--muted-fg) }

@media (max-width: 980px){
  .trace-layout{ grid-template-columns: 1fr; }
  .scan-frame{ aspect-ratio: 1 / 1 }
}

/* Formularios (contacto, entrada manual) */
.form input, .form textarea{ width:100%; background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:.45rem; padding:.55rem .7rem }
.form textarea{ resize:vertical }

/* Carrito: control de cantidad */
.cart-item{ margin:.5rem 0 }
.cart-item-grid{ display:grid; grid-template-columns:64px 1fr auto; gap:.75rem; align-items:center }
.cart-item-controls{ display:flex; align-items:center; gap:.45rem; justify-content:flex-end }
.cart-qty{ display:flex; align-items:center; gap:.35rem }
.cart-qty .qty{ width:62px; border:1px solid var(--border); border-radius:.5rem; padding:.38rem 0; text-align:center; font-family:'Playfair Display', Georgia, 'Times New Roman', Times, serif; font-size:1.05rem; font-weight:600; background:var(--card); color:var(--fg); transition: border-color .2s ease, box-shadow .2s ease }
.cart-qty .qty:focus{ outline:none; border-color:rgba(var(--coffee-rgb),.55); box-shadow:0 0 0 3px rgba(var(--coffee-rgb),.18) }
.cart-qty .qty::-webkit-outer-spin-button,
.cart-qty .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cart-qty .qty{ appearance:textfield; -moz-appearance:textfield }
.cart-qty .qty-steppers{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:.45rem; overflow:hidden; background:var(--card) }
.cart-qty .qty-step{ display:grid; place-items:center; width:30px; height:26px; border:0; background:transparent; color:var(--fg); cursor:pointer; font-size:.75rem; line-height:1; transition: background-color .2s ease, color .2s ease }
.cart-qty .qty-step:hover{ background:rgba(var(--coffee-rgb),.08) }
.cart-qty .qty-step:active{ background:rgba(var(--coffee-rgb),.14) }
.cart-qty .qty-step span{ pointer-events:none }

/* Boton de icono en superficies oscuras */

/* Tienda (estilo Amazon serio y armonioso) */
.shop-topbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding: .75rem 0; position:sticky; top: calc(var(--header-top, 0px) + var(--header-height, 96px)); background:var(--bg); z-index:39; border-bottom:1px solid var(--border) }
.shop-topbar .chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{ background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:999px; padding:.35rem .75rem; font-size:.9rem; cursor:pointer }
.chip.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast) }
.shop-topbar .actions{ display:flex; align-items:center; gap:.75rem }
.shop-topbar .filters-toggle{ background:var(--card); border:1px solid var(--border); padding:.5rem .8rem; border-radius:.375rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; font-weight:600; line-height:1.2; color:var(--fg); transition: background-color .2s ease, color .2s ease, border-color .2s ease }
.shop-topbar .filters-toggle:hover{ background:rgba(0,0,0,.06) }
.shop-topbar .sort select{ padding:.4rem .55rem; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:.375rem }

.shop-layout{ display:grid; grid-template-columns: 280px 1fr; gap:1.25rem; padding:1rem 0 }
.shop-sidebar{ position:sticky; top: calc(var(--header-top, 0px) + var(--header-height, 96px) + 42px); align-self:start; display:flex; flex-direction:column; gap:1rem }
.filter-group{ background:var(--card); border:1px solid var(--border); border-radius:.5rem; padding:.9rem }
.filter-title{ font-weight:600; margin-bottom:.5rem }
.filter-list{ display:grid; gap:.35rem }
.filter-list label{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--fg) }
.price-inputs{ display:flex; align-items:center; gap:.5rem }
.price-inputs input{ width:100%; padding:.4rem .5rem; border:1px solid var(--border); border-radius:.375rem; background:var(--card); color:var(--fg) }
.filter-actions{ display:flex; justify-content:flex-end }
.btn.small{ padding:.45rem .7rem; font-size:.9rem }
.btn.outline{ background:transparent; color:var(--fg); border:1px solid var(--border) }
.btn.outline:hover{ background:var(--card) }

.shop-content .applied-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem }
.pill{ background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; font-size:.85rem }

.pagination{ display:flex; justify-content:center; padding:1rem 0 }
.pager{ display:flex; align-items:center; gap:.75rem; background:var(--card); border:1px solid var(--border); border-radius:.5rem; padding:.35rem .6rem }
.pager button{ background:var(--card); border:1px solid var(--border); border-radius:.375rem; padding:.5rem .8rem; cursor:pointer; color:var(--fg); display:inline-flex; align-items:center; gap:.35rem; font-weight:600; line-height:1.2; transition: background-color .2s ease, color .2s ease, border-color .2s ease }
.pager button:hover{ background:rgba(0,0,0,.06) }
.pager button[disabled]{ opacity:.55; cursor:not-allowed }

@media (max-width: 980px){
  .shop-layout{ grid-template-columns: 1fr }
  .shop-sidebar{ position:static; display:none }
  .shop-sidebar.open{ display:block }
  .shop-topbar{ position:sticky; top: calc(var(--header-top, 12px) + var(--header-height, 96px)); z-index:50 }
}

/* Mobile: show chips as horizontal scroller for quick filters */
@media (max-width: 700px){
  .shop-topbar{ display:block; padding:.5rem 0 }
  .shop-topbar { position:relative; display:block; padding:.5rem 0 }
  .shop-topbar .chips-wrap{ position:relative }
  .shop-topbar .chips{ display:flex; gap:.4rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:.25rem 0; white-space:nowrap; scroll-snap-type:x proximity }
  .shop-topbar .chips .chip{ flex:0 0 auto; display:inline-flex; scroll-snap-align:start }
  /* Shadow indicators for overflow */
  .shop-topbar .chips-wrap::before,
  .shop-topbar .chips-wrap::after{
    content:''; position:absolute; top:0; bottom:0; width:38px; pointer-events:none; transition: opacity .2s ease; opacity:0 }
  .shop-topbar .chips-wrap::before{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,0)) }
  .shop-topbar .chips-wrap::after{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.08), rgba(0,0,0,0)) }
  /* Dark theme adjustments */

  /* Sticky filters button to the right */
  .shop-topbar .actions{ position:sticky; top: .5rem; display:flex; gap:.5rem; align-items:center; margin-top:.5rem; justify-content:flex-end }
  .shop-topbar .filters-toggle{ position:sticky; right:0; z-index:6 }

  /* Make chips smaller on mobile to show more */
  .shop-topbar .chips .chip{ padding:.28rem .5rem; font-size:.85rem }
  .shop-topbar .sort{ display:inline-block }
  .shop-topbar .sort select{ min-width:120px }
}

/* Tamano uniforme para cards de tienda */
.shop-content .grid{ align-items: stretch }
.shop-content .card{ display:flex; flex-direction:column; height:100%; min-height:420px }
.shop-content .card > img{ width:100%; aspect-ratio:1 / 1; object-fit:cover }
.shop-content .card .p{ display:flex; flex-direction:column; gap:.35rem; flex:1 }
.shop-content .card h3{ font-size:1rem; line-height:1.35; margin:.15rem 0 .25rem; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height: calc(1.35em * 2) }
.shop-content .card .muted{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.shop-content .card .price{ margin-top:auto }

/* (modo compacto eliminado) */

/* Seccion de cafes en venta - Franja horizontal */
.coffee-shop{ padding: 3rem 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.coffee-shop-header{ display: flex; justify-content: space-between; align-items: center; max-width: var(--page-width); margin: 0 auto; padding: 0 2rem 1.5rem; }
.coffee-shop-title{ font-size: 1.8rem; margin: 0; color: var(--coffee); }
.coffee-shop-link{ color: var(--accent); text-decoration: none; font-weight: 600; font-size: 1rem; transition: opacity .2s ease; }
.coffee-shop-link:hover{ opacity: .8; }
.coffee-scroll{ display: flex; gap: 1.5rem; overflow-x: auto; padding: 0 2rem 1rem; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.coffee-scroll::-webkit-scrollbar{ height: 8px; }
.coffee-scroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.05); border-radius: 10px; }
.coffee-scroll::-webkit-scrollbar-thumb{ background: var(--accent); border-radius: 10px; }
.coffee-scroll::-webkit-scrollbar-thumb:hover{ background: #b06b43; }
.coffee-card{ position: relative; flex: 0 0 280px; background: var(--card); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .3s ease, box-shadow .3s ease; padding: 1.2rem; }
.coffee-card:hover{ transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.coffee-img{ width: 100%; height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
.coffee-badge{ position: absolute; top: 1.6rem; right: 1.6rem; background: rgba(37,26,20,.92); color: #fff; padding: .3rem .7rem; border-radius: 15px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.coffee-badge.best-seller{ background: linear-gradient(135deg, #c67b4e 0%, #a86240 100%); }
.coffee-name{ font-size: 1.25rem; margin: 0 0 .5rem; color: var(--coffee); font-weight: 600; }
.coffee-notes{ font-size: .9rem; color: var(--muted); margin: 0 0 1rem; line-height: 1.4; }
.coffee-footer{ display: flex; justify-content: space-between; align-items: center; }
.coffee-price{ font-size: 1.15rem; font-weight: 700; color: var(--coffee); }
.btn-add{ width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; border: none; cursor: pointer; transition: all .2s ease; }
.btn-add:hover{ background: #d88a5f; transform: scale(1.08); }

/* Responsive para cafes */
@media (max-width: 768px){ 
  .coffee-shop-header{ padding: 0 1rem 1rem; }
  .coffee-scroll{ padding: 0 1rem 1rem; gap: 1rem; }
  .coffee-card{ flex: 0 0 240px; padding: 1rem; }
  .coffee-img{ height: 160px; }
  .coffee-shop-title{ font-size: 1.5rem; }
}

/* Destacados: ocupa 1/3 de la altura de la pagina */
.featured{ position:relative; margin:2rem 0 0; min-height: calc(100vh / 3); }
.featured-inner{ padding:1.5rem 0 }
.featured-title{ font-size:1.6rem; margin: .25rem 0 1rem; color:#3b2a1f }
.featured-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.featured-card{ display:grid; grid-template-columns: 1fr 1.2fr; gap:.9rem; overflow:hidden }
.featured-img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4 / 3 }
.featured-body{ display:flex; flex-direction:column; gap:.5rem; padding:1rem }
.featured-h3{ margin:.1rem 0 .2rem; font-size:1.05rem; line-height:1.35 }
.featured-desc{ font-size:.95rem; line-height:1.45 }

@media (max-width: 980px){
  .featured-grid{ grid-template-columns: 1fr }
  .featured-card{ grid-template-columns: 1fr; }
  .featured-img{ aspect-ratio: 16 / 9 }
}

/* Sección de Trazabilidad */
.traceability-section{ padding: 5rem 0; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); }
.traceability-content{ max-width: 900px; margin: 0 auto; text-align: center; }
.traceability-text h2{ font-size: 2.5rem; color: var(--coffee); margin: 0 0 1rem; line-height: 1.2; }
.traceability-subtitle{ font-size: 1.125rem; color: var(--muted-fg); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.traceability-features{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 3.5rem; text-align: left; }
.feature-item{ display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,.02); border: 1px solid rgba(0,0,0,.04); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feature-item:hover{ transform: translateY(-4px); box-shadow: 0 10px 15px rgba(0,0,0,.05); }
.feature-icon{ font-size: 2rem; flex-shrink: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 50%; }
.feature-item h3{ font-size: 1.125rem; color: var(--fg); margin: 0 0 0.5rem; font-weight: 600; }
.feature-item p{ font-size: 0.9375rem; color: var(--muted-fg); margin: 0; line-height: 1.5; }
.traceability-cta{ display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.cta-note{ font-size: 0.875rem; color: var(--muted-fg); margin: 0; font-style: italic; }

@media (max-width: 768px){
  .traceability-section{ padding: 3rem 0; }
  .traceability-features{ grid-template-columns: 1fr; gap: 1rem; }
  .traceability-text h2{ font-size: 2rem; }
  .feature-item{ padding: 1.25rem; }
}