:root{--color-neutral-0: #ffffff;--color-neutral-25: #f9fafa;--color-neutral-50: #f5f7f7;--color-neutral-100: #eef2f2;--color-neutral-200: #dce3e3;--color-neutral-300: #cbd5d5;--color-neutral-600: #586368;--color-neutral-800: #273136;--color-neutral-900: #182024;--color-brand-identity: #ec1f28;--color-brand-50: #fff1f2;--color-brand-100: #f8dadd;--color-brand-600: #b91f29;--color-brand-700: #981922;--color-feedback-error: #a8202a;--color-feedback-success: #286b45;--color-canvas: var(--color-neutral-50);--color-surface-intro: var(--color-neutral-25);--color-image-well: var(--color-neutral-25);--color-surface-raised: var(--color-neutral-0);--color-surface-subtle: var(--color-neutral-100);--color-surface-brand-warm: var(--color-brand-50);--color-border-default: var(--color-neutral-200);--color-border-card: var(--color-neutral-200);--color-border-card-hover: var(--color-neutral-300);--color-text-primary: var(--color-neutral-900);--color-text-secondary: var(--color-neutral-600);--color-text-inverse: var(--color-neutral-0);--color-action-primary: var(--color-brand-600);--color-action-hover: var(--color-brand-700);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-control: 8px;--radius-card: 12px;--radius-sheet: 16px;--font-size-support: .875rem;--font-size-body: 1rem;--font-size-heading: 1.5rem;--font-size-display: 2rem;--duration-fast: .12s;--duration-normal: .2s;--ease-standard: cubic-bezier(.2, 0, 0, 1);--shadow-card: 0 1px 3px rgba(36, 34, 32, .04), 0 4px 12px rgba(36, 34, 32, .03);--shadow-card-hover: 0 6px 16px -2px rgba(36, 34, 32, .08), 0 16px 28px -4px rgba(36, 34, 32, .06);--shadow-overlay: 0 10px 25px -5px rgba(0, 0, 0, .12), 0 8px 10px -6px rgba(0, 0, 0, .08);--shadow-sticky: 0 -4px 16px -2px rgba(0, 0, 0, .08);--shadow-nav: 0 2px 8px rgba(36, 34, 32, .04);--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);background-color:var(--color-canvas);color:var(--color-text-primary);font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-canvas);color:var(--color-text-primary);text-rendering:optimizeLegibility}html[lang=ar]{letter-spacing:normal!important}html[lang=ar] *{letter-spacing:normal}bdi,.bdi{unicode-bidi:isolate;display:inline-block}.ltr-content{direction:ltr;unicode-bidi:isolate}:focus-visible{outline:2px solid var(--color-action-primary);outline-offset:2px}button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;border:none;background:none}img{max-width:100%;height:auto;display:block}.app-container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--space-4)}@media(min-width:768px){.app-container{padding-inline:var(--space-8)}}.site-header{position:sticky;top:0;z-index:40;background-color:#f9fafaf5;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border-default)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}.brand-link{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text-primary)}.brand-logo-img{height:38px;width:auto;object-fit:contain}.header-actions{display:flex;align-items:center;gap:var(--space-3)}.btn-lang{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 14px;min-height:44px;border:1px solid var(--color-border-default);border-radius:var(--radius-control);background-color:var(--color-surface-raised);font-size:var(--font-size-support);font-weight:500;color:var(--color-text-primary);transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}.btn-lang:hover{background-color:var(--color-surface-subtle);border-color:var(--color-neutral-600)}.btn-order-header{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 16px;min-height:44px;border-radius:var(--radius-control);background-color:var(--color-action-primary);color:var(--color-text-inverse);font-size:var(--font-size-support);font-weight:600;transition:background-color var(--duration-fast) ease}.btn-order-header:hover{background-color:var(--color-action-hover)}.order-count-badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-surface-raised);color:var(--color-action-primary);font-size:.8rem;font-weight:700;min-width:22px;height:22px;border-radius:999px;padding-inline:6px}.intro-section{position:relative;background-color:var(--color-surface-intro);border-top:3px solid var(--color-action-primary);border-bottom:1px solid var(--color-border-default);padding-block:var(--space-8) var(--space-8);overflow:hidden}.intro-section:before{content:"";position:absolute;inset-inline-end:0;top:0;bottom:0;width:340px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Ccircle cx='100' cy='100' r='90' stroke='%23b4232c' stroke-width='1.5' stroke-dasharray='4 8' opacity='0.08'/%3E%3Ccircle cx='100' cy='100' r='60' stroke='%23b4232c' stroke-width='1.5' opacity='0.06'/%3E%3Ccircle cx='100' cy='100' r='30' stroke='%23b4232c' stroke-width='1.5' opacity='0.05'/%3E%3Cpath d='M100 10v180M10 100h180' stroke='%23b4232c' stroke-width='1' opacity='0.04'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;opacity:.65}.intro-inner{position:relative;z-index:1}.intro-title{font-size:var(--font-size-display);font-weight:700;color:var(--color-text-primary);line-height:1.25;margin-bottom:var(--space-2)}.intro-subtitle{font-size:var(--font-size-body);color:var(--color-text-secondary);max-width:780px;line-height:1.6}.category-nav-wrapper{position:sticky;top:64px;z-index:30;background-color:var(--color-canvas);border-bottom:1px solid var(--color-border-default);box-shadow:var(--shadow-nav);padding-block:var(--space-3);margin-bottom:var(--space-8)}.category-nav{display:flex;align-items:center;gap:var(--space-2);overflow-x:auto;scrollbar-width:thin;padding-block:var(--space-1)}.category-nav::-webkit-scrollbar{height:4px}.category-nav::-webkit-scrollbar-thumb{background-color:var(--color-border-default);border-radius:4px}.cat-tab-btn{white-space:nowrap;padding:8px 18px;min-height:44px;border-radius:999px;border:1px solid var(--color-border-default);background-color:var(--color-surface-raised);color:var(--color-text-secondary);font-size:var(--font-size-support);font-weight:500;box-shadow:0 1px 2px #24222008;transition:all var(--duration-fast) ease}.cat-tab-btn:hover{border-color:var(--color-border-card-hover);color:var(--color-text-primary);background-color:var(--color-image-well)}.cat-tab-btn.active{background-color:var(--color-text-primary);color:var(--color-text-inverse);border-color:var(--color-text-primary);font-weight:600;box-shadow:0 2px 6px #1a191826}.catalog-content{display:flex;flex-direction:column;gap:var(--space-12);padding-bottom:var(--space-16)}.category-block{scroll-margin-top:130px}.category-header{margin-bottom:var(--space-6);padding-bottom:var(--space-3);border-bottom:2px solid var(--color-border-default)}.category-heading{font-size:var(--font-size-heading);font-weight:700;color:var(--color-text-primary)}.category-desc{font-size:var(--font-size-support);color:var(--color-text-secondary);margin-top:var(--space-1)}.product-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media(min-width:600px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.product-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1200px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.product-card{position:relative;display:flex;flex-direction:column;background-color:var(--color-surface-raised);border:1px solid var(--color-border-card);border-radius:var(--radius-card);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-card);transition:transform var(--duration-fast) ease,box-shadow var(--duration-fast) ease,border-color var(--duration-fast) ease}.product-card:hover{transform:translateY(-3px);border-color:var(--color-border-card-hover);box-shadow:var(--shadow-card-hover)}.product-card:focus-within{border-color:var(--color-action-primary);box-shadow:var(--shadow-card-hover)}.card-image-well{position:relative;background-color:var(--color-image-well);width:100%;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;padding:var(--space-4);overflow:hidden;border-bottom:1px solid var(--color-surface-subtle)}.product-img{width:100%;height:100%;object-fit:contain;transition:transform var(--duration-normal) var(--ease-standard)}.product-card:hover .product-img{transform:scale(1.03)}.card-body{display:flex;flex-direction:column;flex:1;padding:var(--space-5);gap:var(--space-2)}.card-index{color:var(--color-text-secondary);font-size:.75rem;font-weight:700;line-height:1}.card-package{color:var(--color-text-secondary);font-size:var(--font-size-support)}.card-carton{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-top:auto;padding-block:var(--space-3);border-block:1px solid var(--color-border-default)}.card-carton-label{color:var(--color-text-secondary);font-size:var(--font-size-support)}.card-carton strong{color:var(--color-action-primary);font-size:1.1rem;white-space:nowrap;font-variant-numeric:tabular-nums}.card-options{color:var(--color-text-secondary);font-size:.8rem}.selector-carton-capacity,.selection-total-packages{margin-block-start:var(--space-2);color:var(--color-text-secondary);font-size:var(--font-size-support)}.selector-carton-capacity strong,.selection-total-packages strong{color:var(--color-text-primary)}.card-title{font-size:1.15rem;font-weight:700;color:var(--color-text-primary);line-height:1.35;transition:color var(--duration-fast) ease}.product-card:hover .card-title{color:var(--color-brand-700)}.card-description{font-size:var(--font-size-support);color:var(--color-text-secondary);line-height:1.55;flex:1}.card-spec-tags{display:flex;flex-direction:column;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--color-surface-subtle)}.spec-line{display:flex;align-items:baseline;gap:var(--space-2);font-size:var(--font-size-support)}.spec-label{color:var(--color-text-secondary);font-size:.8rem;white-space:nowrap}.spec-value{color:var(--color-text-primary);font-weight:500}.btn-card-order{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:10px 16px;margin-top:var(--space-2);background-color:var(--color-surface-brand-warm);border:1px solid var(--color-brand-100);border-radius:var(--radius-control);color:var(--color-action-hover);font-size:var(--font-size-support);font-weight:600;transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease,border-color var(--duration-fast) ease}.btn-card-order-arrow{font-size:1.1rem;line-height:1;transition:transform var(--duration-fast) ease}.btn-card-order:after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius-card);cursor:pointer}.product-card:hover .btn-card-order{background-color:var(--color-action-primary);color:var(--color-text-inverse);border-color:var(--color-action-primary)}[dir=rtl] .product-card:hover .btn-card-order-arrow{transform:translate(-4px)}[dir=ltr] .product-card:hover .btn-card-order-arrow{transform:translate(4px)}dialog{border:1px solid var(--color-border-default);border-radius:var(--radius-sheet);background-color:var(--color-surface-raised);color:var(--color-text-primary);box-shadow:var(--shadow-overlay);padding:0;margin:auto;max-width:560px;width:calc(100% - 32px);max-height:90vh;max-height:90dvh;overflow:hidden}dialog::backdrop{background-color:#24242473;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dialog-layout{display:flex;flex-direction:column;max-height:90vh;max-height:90dvh}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-default);background-color:var(--color-canvas)}.dialog-title{font-size:1.25rem;font-weight:700;color:var(--color-text-primary)}.btn-close-dialog{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-control);color:var(--color-text-secondary);font-size:1.5rem;transition:background-color var(--duration-fast) ease,color var(--duration-fast) ease}.btn-close-dialog:hover{background-color:var(--color-surface-subtle);color:var(--color-text-primary)}.dialog-body{padding:var(--space-5);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-5)}.dialog-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border-default);background-color:var(--color-canvas);display:flex;flex-direction:column;gap:var(--space-3)}.variant-preview-box{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);background-color:var(--color-surface-subtle);border-radius:var(--radius-card)}.preview-thumb{width:72px;height:72px;object-fit:contain;background-color:var(--color-surface-raised);border-radius:var(--radius-control);padding:var(--space-1)}.preview-info h4{font-size:1rem;font-weight:700;margin-bottom:var(--space-1)}.preview-info p{font-size:var(--font-size-support);color:var(--color-text-secondary)}.selection-group{display:flex;flex-direction:column;gap:var(--space-2)}fieldset.selection-group{border:none;padding:0;margin:0}legend.selection-group-label{padding:0;margin-bottom:var(--space-2)}.selection-group-label{font-size:var(--font-size-support);font-weight:600;color:var(--color-text-primary)}.radio-options-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2)}.sr-only-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.radio-option-card{display:flex;align-items:center;justify-content:space-between;padding:12px var(--space-4);min-height:48px;border:1px solid var(--color-border-default);border-radius:var(--radius-control);background-color:var(--color-surface-raised);cursor:pointer;transition:all var(--duration-fast) ease}.radio-option-card:hover{border-color:var(--color-neutral-600);background-color:var(--color-surface-subtle)}.radio-option-card.selected,.radio-option-card:has(.sr-only-radio:checked){border-color:var(--color-action-primary);background-color:#b4232c0a}.radio-option-card:focus-within{outline:2px solid var(--color-action-primary);outline-offset:2px}.option-main{display:flex;align-items:center;gap:var(--space-3)}.swatch-dot{width:14px;height:14px;border-radius:999px;border:1px solid rgba(0,0,0,.15);flex-shrink:0}.option-text{font-size:var(--font-size-support);font-weight:500;color:var(--color-text-primary)}.radio-circle{width:18px;height:18px;border-radius:999px;border:2px solid var(--color-neutral-600);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio-option-card.selected .radio-circle{border-color:var(--color-action-primary)}.radio-circle-dot{width:8px;height:8px;border-radius:999px;background-color:var(--color-action-primary)}.quantity-stepper{display:flex;align-items:center;gap:var(--space-3)}.stepper-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--color-border-default);border-radius:var(--radius-control);background-color:var(--color-surface-raised);font-size:1.25rem;font-weight:600;color:var(--color-text-primary);transition:background-color var(--duration-fast) ease}.stepper-btn:hover:not(:disabled){background-color:var(--color-surface-subtle);border-color:var(--color-neutral-600)}.stepper-btn:disabled{opacity:.4;cursor:not-allowed}.stepper-value{font-size:1.15rem;font-weight:700;min-width:40px;text-align:center}.btn-primary{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:48px;padding:12px var(--space-5);border-radius:var(--radius-control);background-color:var(--color-action-primary);color:var(--color-text-inverse);font-size:var(--font-size-body);font-weight:600;text-decoration:none;transition:background-color var(--duration-fast) ease}.btn-primary:hover{background-color:var(--color-action-hover)}.btn-whatsapp{background-color:#075e54;color:#fff}.btn-whatsapp:hover{background-color:#064a43}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:48px;padding:12px var(--space-5);border-radius:var(--radius-control);background-color:var(--color-surface-raised);border:1px solid var(--color-border-default);color:var(--color-text-primary);font-size:var(--font-size-body);font-weight:600;text-decoration:none;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}.btn-secondary:hover{background-color:var(--color-surface-subtle);border-color:var(--color-neutral-600)}.btn-text-danger{font-size:var(--font-size-support);color:var(--color-feedback-error);font-weight:500;padding:6px 12px;border-radius:var(--radius-control);transition:background-color var(--duration-fast) ease}.btn-text-danger:hover{background-color:#a8202a14}.order-items-list{display:flex;flex-direction:column;gap:var(--space-3)}.order-item-row{display:flex;align-items:flex-start;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background-color:var(--color-surface-raised)}.order-item-info{display:flex;flex-direction:column;gap:2px;flex:1}.order-item-title{font-size:var(--font-size-support);font-weight:700;color:var(--color-text-primary)}.order-item-variant,.order-item-capacity,.order-carton-label{font-size:.8rem;color:var(--color-text-secondary)}.order-item-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}.btn-item-remove{padding:6px 10px;min-height:44px;font-size:.8rem;color:var(--color-feedback-error);border:1px solid transparent;border-radius:var(--radius-control)}.btn-item-remove:hover{background-color:#a8202a14}.customer-form{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-surface-subtle);border-radius:var(--radius-card)}.form-group{display:flex;flex-direction:column;gap:var(--space-1)}.form-label{font-size:var(--font-size-support);font-weight:600;color:var(--color-text-primary)}.form-input,.form-textarea{width:100%;padding:10px 14px;min-height:44px;border:1px solid var(--color-border-default);border-radius:var(--radius-control);background-color:var(--color-surface-raised);font-size:var(--font-size-support);color:var(--color-text-primary)}.form-textarea{min-height:72px;resize:vertical}.form-input:focus,.form-textarea:focus{border-color:var(--color-action-primary)}.disclaimer-box{padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);background-color:var(--color-surface-subtle);border:1px solid var(--color-border-default);font-size:.8rem;color:var(--color-text-secondary);line-height:1.5}.feedback-notice{padding:var(--space-2) var(--space-4);border-radius:var(--radius-control);background-color:var(--color-feedback-success);color:#fff;font-size:var(--font-size-support);font-weight:500;text-align:center;animation:fadeIn var(--duration-fast) ease}.feedback-success{background-color:var(--color-feedback-success);color:#fff}.feedback-error{background-color:#fef2f2;color:#991b1b;border:1px solid #fca5a5;display:flex;flex-direction:column;gap:var(--space-2);text-align:start}.manual-copy-textarea{font-family:inherit;font-size:.85rem;line-height:1.5;min-height:130px;background-color:var(--color-surface-raised);-webkit-user-select:all;user-select:all;margin-top:4px}.empty-state{text-align:center;padding:var(--space-8) var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.empty-state-title{font-size:1.2rem;font-weight:700}.empty-state-body{font-size:var(--font-size-support);color:var(--color-text-secondary);max-width:400px}.mobile-sticky-bar{display:none;position:fixed;bottom:0;inset-inline:0;z-index:35;background-color:#fffffff2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--color-border-default);padding:var(--space-3) var(--space-4);padding-bottom:max(16px,env(safe-area-inset-bottom));box-shadow:var(--shadow-sticky)}@media(max-width:767px){.mobile-sticky-bar.visible{display:block}body.has-sticky-bar{padding-bottom:84px}}@media(max-width:599px){.category-nav-wrapper{position:static;margin-bottom:var(--space-6)}.intro-section{padding-block:var(--space-5)}.intro-title{font-size:1.7rem}.intro-subtitle{font-size:.93rem;line-height:1.45}.category-header{display:none}.card-image-well{aspect-ratio:5 / 3}dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:94vh;max-height:94dvh;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;border-inline:0;border-bottom:0}.dialog-layout{max-height:94vh;max-height:94dvh}.dialog-footer{padding-bottom:max(var(--space-4),env(safe-area-inset-bottom))}.order-item-actions{width:100%;justify-content:space-between}}html[data-palette=warm]{--color-neutral-25: #faf7f2;--color-neutral-50: #f7f5f0;--color-neutral-100: #eeebe4;--color-neutral-200: #ded8ce;--color-neutral-300: #ccc4b8;--color-neutral-600: #595652;--color-neutral-800: #2c2a29;--color-neutral-900: #1a1918;--color-brand-50: #fbf3f3;--color-brand-100: #f5dedf;--color-brand-600: #b4232c;--color-brand-700: #921b23;--color-image-well: #faf8f5}html[data-palette=warm] .site-header{background-color:#faf9f7f2}.site-footer{margin-top:auto;border-top:1px solid var(--color-border-default);background-color:var(--color-surface-raised);padding-block:var(--space-10) var(--space-8)}.footer-inner{display:flex;flex-direction:column;gap:var(--space-6)}.footer-top{display:flex;flex-direction:column;gap:var(--space-4)}@media(min-width:768px){.footer-top{flex-direction:row;justify-content:space-between;align-items:flex-start}}.footer-brand-info h3{font-size:1.25rem;font-weight:700;margin-bottom:var(--space-1)}.footer-brand-info p{font-size:var(--font-size-support);color:var(--color-text-secondary)}.footer-contacts-list{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--font-size-support)}.contact-row{display:flex;align-items:center;gap:var(--space-2)}.contact-link{color:var(--color-action-primary);text-decoration:none;font-weight:500}.contact-link:hover{text-decoration:underline}.footer-social-links{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-2)}.footer-bottom{border-top:1px solid var(--color-border-default);padding-top:var(--space-6);font-size:.8rem;color:var(--color-text-secondary);text-align:center}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
