@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
/* theme.css — generado automáticamente. No editar manualmente. */

@font-face {
    font-family: 'Fraunces';
    src: url('/os/fonts/fraunces.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/os/fonts/inter.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/os/fonts/poppins.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/os/fonts/merriweather.ttf') format('truetype');
    font-display: swap;
}

:root {
    --primary-color: #8cd50b;
    --secondary-color: #222222;
    --terciario-color: #5a9e00;
    --cuaternario-color: #8cd50b;
    --quintuple-color: #444444;
    --sextuple-color: #8cd50b;
    --success-color: #22c55e;
    --danger-color: #e53935;
    --warning-color: #f97316;
    --info-color: #3b82f6;
    --light-color: #f5f5f5;
    --dark-color: #222222;
    --bg-white: #ffffff;
    --bg-grey: #f7f7f7;
    --bg-black: #000000;
    --color-1: var(--primary-color);
    --color-2: var(--secondary-color);
    --color-3: var(--terciario-color);
    --color-4: var(--cuaternario-color);
    --color-5: var(--quintuple-color);
    --color-6: var(--sextuple-color);
    --color-success: var(--success-color);
    --color-danger: var(--danger-color);
    --color-warning: var(--warning-color);
    --color-info: var(--info-color);
    --color-light: var(--light-color);
    --color-dark: var(--dark-color);
    --color-white: var(--bg-white);
    --color-grey: var(--bg-grey);
    --color-black: var(--bg-black);
    --font-1: 'Fraunces';
    --font-2: 'Inter';
    --font-3: 'Poppins';
    --font-4: 'Merriweather';
    --font-icons: 'Font Awesome 6 Free';
    --topbar-bg: var(--color-dark);
    --topbar-color: var(--secondary-color);
    --topbar-link: var(--primary-color);
    --topbar-link-hover: var(--terciario-color);
    --topbar-border-color: var(--color-4);
    --topbar-border-width: 3px;
    --topbar-pt: 0px;
    --topbar-pb: 0px;
    --topbar-font-size: 14px;
    --header-bg: var(--color-black);
    --header-color: var(--color-white);
    --header-link: var(--color-white);
    --header-link-hover: var(--color-4);
    --header-icon-color: var(--color-white);
    --header-icon-hover: var(--color-4);
    --header-badge-bg: var(--color-2);
    --header-badge-color: var(--color-white);
    --header-border-color: var(--color-grey);
    --header-border-width: 0px;
    --header-pt: 15px;
    --header-pb: 0px;
    --header-height: 4rem;
    --header-bg-image: ;
    --header-bg-position: center center;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --nav-bg: var(--color-black);
    --nav-color: var(--color-white);
    --nav-link: var(--color-white);
    --nav-link-hover: var(--color-4);
    --nav-link-active: var(--color-4);
    --nav-border-color: var(--color-2);
    --nav-border-width: 5px;
    --nav-pt: 0px;
    --nav-pb: 0px;
    --nav-item-pt: 0px;
    --nav-item-pb: 15px;
    --nav-font-size: 1em;
    --nav-font-weight: 900;
    --nav-dropdown-bg: var(--color-dark);
    --nav-dropdown-border: var(--color-4);
    --main-bg: var(--color-white);
    --main-color: var(--secondary-color);
    --main-link: var(--primary-color);
    --main-link-hover: var(--color-4);
    --main-pt: 0px;
    --main-pb: 0px;
    --main-h1: var(--color-3);
    --main-h2: var(--color-5);
    --main-h3: var(--color-6);
    --font-body: var(--font-2);
    --font-heading: var(--font-3);
    --footer-bg: var(--color-black);
    --footer-color: var(--color-white);
    --footer-link: var(--color-white);
    --footer-link-hover: var(--color-2);
    --footer-h1: var(--color-2);
    --footer-h2: var(--color-2);
    --footer-h3: var(--color-2);
    --footer-border-color: var(--color-2);
    --footer-border-width: 5px;
    --footer-pt: 60px;
    --footer-pb: 60px;
    --footer-bg-image: ;
    --footer-bg-position: center center;
    --footer-font-size: 0.9375rem;
    --btn-primary-bg: var(--color-1);
    --btn-primary-color: var(--color-white);
    --btn-primary-border: var(--color-1);
    --btn-primary-bg-hover: var(--color-2);
    --btn-primary-color-hover: var(--color-white);
    --btn-secondary-bg: var(--color-2);
    --btn-secondary-color: var(--color-white);
    --btn-radius: 0.375rem;
    --btn-font-weight: 500;
    --btn-pt: 0.5rem;
    --btn-px: 1rem;
    --card-bg: var(--color-white);
    --card-color: var(--bg-black);
    --card-border-color: var(--terciario-color);
    --card-border-width: 2px;
    --card-radius: 10px;
    --card-shadow: none;
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
    --card-padding: 0.75rem 0.25rem 0;
    --card-img-bg: var(--color-light);
    --card-img-radius: 0px;
    --card-nombre-tam: 20px;
    --card-nombre-peso: 900;
    --card-nombre-color: var(--secondary-color);
    --card-precio-tam: 17px;
    --card-precio-peso: 700;
    --card-price-color: var(--terciario-color);
    --card-title-color: var(--color-dark);
    --card-precio-antes-color: var(--bg-black);
    --card-badge-bg: var(--secondary-color);
    --card-badge-color: var(--bg-white);
    --offcanvas-bg: var(--color-dark);
    --offcanvas-color: var(--color-light);
    --offcanvas-link: var(--color-white);
    --offcanvas-link-hover: var(--color-4);
    --offcanvas-border-color: var(--color-1);
    --offcanvas-header-bg: var(--color-3);
    --offcanvas-header-color: var(--color-white);
    --offcanvas-width: 300px;
    --offcanvas-shadow: 0 0 20px rgba(0,0,0,0.3);
    --offcanvas-backdrop: 0.5;
    --form-input-bg: var(--color-white);
    --form-input-color: var(--color-black);
    --form-input-border: var(--color-2);
    --form-input-focus-border: var(--color-4);
    --form-input-radius: 15px;
    --form-label-color: var(--color-dark);
    --form-placeholder-color: var(--color-2);
    --cart-offcanvas-width: 400px;
    --cart-offcanvas-bg: var(--bg-white);
    --cart-offcanvas-color: var(--bg-black);
    --cart-offcanvas-header-bg: var(--light-color);
    --cart-offcanvas-header-color: var(--secondary-color);
    --cart-offcanvas-border: var(--secondary-color);
    --cart-offcanvas-shadow: -4px 0 20px rgba(0,0,0,0.15);
    --cart-item-img-size: 60px;
    --cart-item-img-radius: 8px;
    --cart-item-nombre-tam: 1rem;
    --cart-item-nombre-color: var(--secondary-color);
    --cart-item-precio-color: var(--secondary-color);
    --cart-total-tam: 1rem;
    --cart-total-color: var(--secondary-color);
    --cart-checkout-bg: var(--secondary-color);
    --cart-checkout-color: var(--bg-white);
    --cart-empty-color: var(--sextuple-color);
    --site-container-max-width: 1200px;
    --site-container-px: 5px;
}

/* Barra superior */
.topbar { background-color: var(--topbar-bg); color: var(--topbar-color); padding-top: var(--topbar-pt); padding-bottom: var(--topbar-pb); border-bottom: var(--topbar-border-width) solid var(--topbar-border-color); font-size: var(--topbar-font-size); }
.topbar a { color: var(--topbar-link); }
.topbar a:hover { color: var(--topbar-link-hover); }

/* Cabecera */
.site-header { background-color: var(--header-bg); color: var(--header-color); padding-top: var(--header-pt); padding-bottom: var(--header-pb); min-height: var(--header-height); border-bottom: var(--header-border-width) solid var(--header-border-color); box-shadow: var(--header-shadow); background-image: var(--header-bg-image, none); background-position: var(--header-bg-position); background-size: cover; }
.site-header a { color: var(--header-link); }
.site-header a:hover { color: var(--header-link-hover); }
.site-header .icon { color: var(--header-icon-color); }
.site-header .icon:hover { color: var(--header-icon-hover); }
.site-header .badge { background-color: var(--header-badge-bg); color: var(--header-badge-color); }

/* Menú de navegación */
.site-nav { background-color: var(--nav-bg); color: var(--nav-color); padding-top: var(--nav-pt); padding-bottom: var(--nav-pb); border-bottom: var(--nav-border-width) solid var(--nav-border-color); }
.site-nav a { color: var(--nav-link); padding-top: var(--nav-item-pt); padding-bottom: var(--nav-item-pb); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); }
.site-nav a:hover, .site-nav a.active { color: var(--nav-link-hover); }
.site-nav .dropdown-menu { background-color: var(--nav-dropdown-bg); border-color: var(--nav-dropdown-border); }

/* Área de contenido */
body { font-family: var(--font-body); }
.site-main { background-color: var(--main-bg); color: var(--main-color); padding-top: var(--main-pt); padding-bottom: var(--main-pb); }
.site-main a { color: var(--main-link); }
.site-main a:hover { color: var(--main-link-hover); }
.site-main h1, .site-main h2, .site-main h3, .site-main h4 { font-family: var(--font-heading); }
.site-main h1 { color: var(--main-h1); }
.site-main h2 { color: var(--main-h2); }
.site-main h3 { color: var(--main-h3); }

/* Pie de página */
.site-footer { background-color: var(--footer-bg); color: var(--footer-color); padding-top: var(--footer-pt); padding-bottom: var(--footer-pb); border-top: var(--footer-border-width) solid var(--footer-border-color); font-size: var(--footer-font-size); }
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: var(--footer-link-hover); }
.site-footer h1 { color: var(--footer-h1); }
.site-footer h2 { color: var(--footer-h2); }
.site-footer h3 { color: var(--footer-h3); }

/* Botones */
.btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-color); border-color: var(--btn-primary-border); border-radius: var(--btn-radius); font-weight: var(--btn-font-weight); padding: var(--btn-pt) var(--btn-px); }
.btn-primary:hover { background-color: var(--btn-primary-bg-hover); color: var(--btn-primary-color-hover); }
.btn-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-color); border-radius: var(--btn-radius); padding: var(--btn-pt) var(--btn-px); }

/* Tarjetas de producto */
.product-card { background-color: var(--card-bg); color: var(--card-color); border: var(--card-border-width) solid var(--card-border-color); border-radius: var(--card-radius); box-shadow: var(--card-shadow); transition: box-shadow 0.2s; overflow: hidden; text-decoration: none; display: block; }
.product-card:hover { box-shadow: var(--card-shadow-hover); }
.product-card__img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background-color: var(--card-img-bg); border-radius: var(--card-img-radius); }
.product-card__img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.3s; }
.product-card:hover .product-card__img-wrap img { transform: scale(1.04); }
.product-card__badges { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.product-card__body { padding: var(--card-padding); }
.product-card__nombre { font-size: var(--card-nombre-tam); font-weight: var(--card-nombre-peso); color: var(--card-nombre-color); line-height: 1.4; margin: 0 0 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__precio { display: flex; align-items: baseline; gap: 0.4rem; }
.product-card__precio-actual { font-size: var(--card-precio-tam); font-weight: var(--card-precio-peso); color: var(--card-price-color); }
.product-card .card-price { color: var(--card-price-color); }
.product-card .card-title { color: var(--card-title-color); }
.product-card .card-badge { background-color: var(--card-badge-bg); color: var(--card-badge-color); }
.product-card .badge--dto { background-color: var(--card-badge-bg); color: var(--card-badge-color); }
.product-card__precio-antes, .producto-ficha__precio-antes { font-size: 0.8125rem; text-decoration: line-through; color: var(--card-precio-antes-color); }

/* Menú móvil (offcanvas) */
.site-offcanvas { background-color: var(--offcanvas-bg); color: var(--offcanvas-color); width: var(--offcanvas-width); box-shadow: var(--offcanvas-shadow); }
.site-offcanvas .offcanvas-header { background-color: var(--offcanvas-header-bg); color: var(--offcanvas-header-color); border-bottom-color: var(--offcanvas-border-color); }
.site-offcanvas .offcanvas-link { color: var(--offcanvas-link); }
.site-offcanvas .offcanvas-link:hover { color: var(--offcanvas-link-hover); }
.site-offcanvas .offcanvas-sublink { color: var(--offcanvas-link); }
.site-offcanvas .offcanvas-sublink:hover { color: var(--offcanvas-link-hover); }
.site-offcanvas li { border-bottom-color: var(--offcanvas-border-color); }
.offcanvas-backdrop { background-color: rgba(0,0,0,var(--offcanvas-backdrop)); }

/* Formularios */
.site-form input, .site-form textarea, .site-form select { background-color: var(--form-input-bg); color: var(--form-input-color); border-color: var(--form-input-border); border-radius: var(--form-input-radius); }
.site-form input:focus, .site-form textarea:focus, .site-form select:focus { border-color: var(--form-input-focus-border); }
.site-form label { color: var(--form-label-color); }
.site-form ::placeholder { color: var(--form-placeholder-color); }

/* Cesta lateral (offcanvas) */
.cart-offcanvas { position: fixed; top: 0; right: 0; height: 100%; width: var(--cart-offcanvas-width); max-width: 100vw; background-color: var(--cart-offcanvas-bg); color: var(--cart-offcanvas-color); box-shadow: var(--cart-offcanvas-shadow); display: flex; flex-direction: column; z-index: 1060; transform: translateX(100%); transition: transform 0.3s ease; }
.cart-offcanvas.oc-open { transform: translateX(0); }
.cart-offcanvas__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background-color: var(--cart-offcanvas-header-bg); color: var(--cart-offcanvas-header-color); border-bottom: 1px solid var(--cart-offcanvas-border); flex-shrink: 0; }
.cart-offcanvas__title { font-size: 1rem; font-weight: 600; margin: 0; }
.cart-offcanvas__close { background: none; border: none; cursor: pointer; color: inherit; padding: 0.25rem; line-height: 1; }
.cart-offcanvas__body { flex: 1; overflow-y: auto; padding: 0; }
.cart-offcanvas__footer { border-top: 1px solid var(--cart-offcanvas-border); padding: 1rem 1.25rem; flex-shrink: 0; }
.cart-offcanvas__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; font-size: var(--cart-total-tam); color: var(--cart-total-color); font-weight: 600; }
.cart-offcanvas__checkout { display: block; width: 100%; text-align: center; padding: 0.75rem 1rem; background-color: var(--cart-checkout-bg); color: var(--cart-checkout-color); border-radius: 0.375rem; text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
.cart-offcanvas__checkout:hover { opacity: 0.88; color: var(--cart-checkout-color); }
.cart-offcanvas__empty { padding: 2rem 1.25rem; text-align: center; color: var(--cart-empty-color); opacity: 0.7; }
.cart-offcanvas__item { display: flex; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--cart-offcanvas-border); }
.cart-offcanvas__item-img { flex-shrink: 0; width: var(--cart-item-img-size); height: var(--cart-item-img-size); border-radius: var(--cart-item-img-radius); overflow: hidden; background-color: var(--color-light, #f5f5f5); }
.cart-offcanvas__item-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cart-offcanvas__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cart-offcanvas__item-nombre { font-size: var(--cart-item-nombre-tam); color: var(--cart-item-nombre-color); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-decoration: none; }
.cart-offcanvas__item-nombre:hover { text-decoration: underline; }
.cart-offcanvas__item-precio { font-size: 0.875rem; color: var(--cart-item-precio-color); font-weight: 600; }
.cart-offcanvas__item-qty { font-size: 0.8125rem; opacity: 0.65; }
.cart-offcanvas-overlay { display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 1059; }
.cart-offcanvas-overlay.oc-open { display: block; }

/* Contenedor y layout */
.container { max-width: var(--site-container-max-width); margin-inline: auto; padding-inline: var(--site-container-px); width: 100%; }

#site-nav-horizontal { display: none; } #mobile-menu-btn { display: inline-flex !important; }
@media (min-width: 1024px) { #site-nav-horizontal { display: block; } #mobile-menu-btn { display: none !important; } }