/* Base */ :root{ --coffee:#251a14; --coffee-rgb:37,26,20; --cream:#f7f3ef; --dark:#1f1f1f; --muted:#777 } :root{ --page-width: 1100px; --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 } /* Tokens de tema oscuro con clase en ajustados para contraste comodo */ html.theme-dark{ --bg:#0e0f10; /* fondo de pagina */ --fg:#e6e7eb; /* texto principal */ --card:#16181b; /* tarjetas */ --border:#2a2f36; /* contornos sutiles */ --muted-fg:#a0a8b3; /* texto secundario */ --footer-bg:#101112; /* fondo de pie */ --footer-fg:#cbb7aa; /* texto calido de pie */ --accent:#e08f55; /* acento en oscuro */ --price:#f2b07d; /* precio en oscuro */ } *{ 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) } /* 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 */ html.theme-dark body.bg-cream{ background-color: var(--bg) !important; } html.theme-dark body.text-ink{ color: var(--fg) !important; } 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:1.2rem; cursor:pointer } /* 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) } html.theme-dark .site-header .brand img{ opacity:.96 } .nav{ display:flex; gap:1rem } .nav a{ color:var(--dark); text-decoration:none; padding:.25rem .5rem; border-radius:.375rem; font-size:1.12rem; 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){ html.theme-dark .hero .hero-media::after{ background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.14) 100%) } } .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) } } html.theme-dark [data-press-effect]::after{ background:radial-gradient(circle at var(--press-x,50%) var(--press-y,50%), rgba(255,255,255,.32) 0%, rgba(255,255,255,.18) 45%, transparent 70%) } /* 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 } html.theme-dark .footer-disclaimer{ color:#b9a99f } @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 } /* Mantener logo balanceado en movil */ .brand img{ height:36px } } /* Mostrar el toggle de tema como el último control dentro de .actions */ .actions .theme-toggle{ order: 99 } /* En mobile, mantener el toggle visible y al final del flujo */ @media (max-width: 900px){ .actions .theme-toggle{ order: 99 } } /* 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) } html.theme-dark .user-icon{ 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 } html.theme-dark .promo-inner{ background:#1a1613; border-color: rgba(255,255,255,.08); color:#e8ded6 } @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 } html.theme-dark .evidence-inner::before{ background:#1a1613 } .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 } html.theme-dark .e-title{ color:#e7ddd4 } .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 } html.theme-dark .e-sub{ color:#d0c3b9 } .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 } html.theme-dark .e-mid{ border-top-color: rgba(255,255,255,.12) } .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 } html.theme-dark .e-badge{ background:#3a2c22; border-color:#4a382c; color:#e8ded6 } .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 } html.theme-dark .e-desc{ color:#d0c3b9 } .e-reasons{ grid-column:3/4; border-top:1px solid rgba(0,0,0,.18); padding-top:1rem; margin-top:.75rem } html.theme-dark .e-reasons{ border-top-color: rgba(255,255,255,.12) } .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 } html.theme-dark .e-source{ color:#b9a99f } /* Boton de tema */ .theme-toggle{ background: var(--coffee); border:1px solid rgba(0,0,0,.25); color:#fff; padding:.35rem .55rem; border-radius:.5rem; cursor:pointer } .theme-toggle:hover{ filter:brightness(1.05) } html.theme-dark .theme-toggle{ background:#e6e7eb; border:1px solid #cdd3db; color:#1f2937 } html.theme-dark .theme-toggle:hover{ background:#ffffff } html.theme-dark .site-header .container{ background:transparent; border-color:rgba(255,255,255,.08) } html.theme-dark .nav a{ color:#e5e7eb } html.theme-dark .nav a.active, html.theme-dark .nav a:hover{ background:rgba(255,255,255,.12) } @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 } .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 } html.theme-dark .cart-qty .qty-step:hover{ background:rgba(255,255,255,.08) } html.theme-dark .cart-qty .qty-step:active{ background:rgba(255,255,255,.16) } /* Boton de icono en superficies oscuras */ html.theme-dark .icon-btn{ background:#1b1d21; border-color:#2a2f36; color:#e6e7eb } html.theme-dark .shop-topbar .filters-toggle, html.theme-dark .pager button{ background:#1b1d21; border-color:#2a2f36; color:#e6e7eb } /* 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 */ html.theme-dark .shop-topbar .chips-wrap::before, html.theme-dark .shop-topbar .chips-wrap::after{ background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0)) } /* 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) */ /* 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 } }