/* =========================================================================
   SEMILLA TIENDA NATURAL — hoja de estilos única
   Orden: tokens · base · iconos · layout · header · nav · nav mobile ·
          hero · secciones · catálogo · card · carrito · responsive
   ========================================================================= */

/* --- 1. TOKENS -------------------------------------------------------- */
:root {
    /* Paleta */
    --verde-900: #0F3B2E;
    --verde-700: #1B5E4A;
    --verde-500: #3D7A63;
    --verde-50:  #EDF3F0;
    --tierra-700:#4E3B31;
    --ocre:      #B8823A;
    --crema:     #FAF8F4;
    --blanco:    #FFFFFF;
    --tinta:     #1C1C1A;
    --tinta-60:  #6B6B66;
    --borde:     rgba(28, 28, 26, 0.10);

    /* Derivados de la paleta: blanco sobre fondo oscuro y velos */
    --blanco-suave: rgba(255, 255, 255, 0.85);
    --blanco-tenue: rgba(255, 255, 255, 0.55);
    --blanco-velo:  rgba(255, 255, 255, 0.12);
    --overlay-fondo: rgba(28, 28, 26, 0.35);
    --anillo-foco: 0 0 0 2px rgba(61, 122, 99, 0.20);
    /* --verde-900 a tres opacidades, de abajo hacia arriba */
    --hero-velo: linear-gradient(to top,
        rgba(15, 59, 46, 0.72) 0%,
        rgba(15, 59, 46, 0.34) 50%,
        rgba(15, 59, 46, 0.18) 100%);

    /* Tipografía */
    --fuente-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fuente-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --texto-h1: clamp(2rem, 4vw, 3rem);
    --texto-h2: clamp(1.5rem, 3vw, 2rem);
    --texto-h3: 1.125rem;
    --texto-base: 1rem;
    --texto-chico: 0.875rem;
    --texto-mini: 0.75rem;

    /* Espaciado */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-6: 24px;
    --e-8: 32px;
    --e-12: 48px;
    --e-16: 64px;
    --e-24: 96px;

    /* Forma */
    --r-chico: 2px;
    --r-card: 6px;

    /* Única sombra permitida: paneles deslizantes */
    --sombra-panel: -8px 0 32px rgba(28, 28, 26, 0.12);
    --sombra-menu:   8px 0 32px rgba(28, 28, 26, 0.12);

    --trans: 200ms ease;

    /* Layout */
    --ancho-contenedor: 1240px;
    --padding-lateral: var(--e-6);
    --ancho-carrito: 380px;
    /* Alto del header pegajoso: logo 100 + padding + barra de navegación */
    --alto-header: 176px;
}

/* --- 2. BASE ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* El header sticky no debe tapar el destino de los anclas */
    scroll-padding-top: var(--alto-header);
}

body {
    margin: 0;
    background-color: var(--crema);
    font-family: var(--fuente-ui);
    font-size: var(--texto-base);
    font-weight: 400;
    line-height: 1.5;
    color: var(--tinta);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--fuente-display);
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--verde-900);
    margin: 0;
}

h1 { font-size: var(--texto-h1); }
h2 { font-size: var(--texto-h2); }
h3 { font-size: var(--texto-h3); }

p { margin: 0; }

a {
    color: var(--verde-700);
    text-decoration: none;
    transition: color var(--trans);
}

a:hover { color: var(--verde-500); }

img { max-width: 100%; }

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

/* Foco visible y consistente en todo el sitio */
:where(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--verde-500);
    outline-offset: 2px;
    border-radius: var(--r-chico);
}

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- 3. ICONOS -------------------------------------------------------- */
.ico {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ico-chico {
    width: 16px;
    height: 16px;
}

.ico-grande {
    width: 40px;
    height: 40px;
    stroke-width: 1;
}

/* --- 4. LAYOUT -------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-contenedor);
    margin: 0 auto;
    padding: 0 var(--padding-lateral);
}

.contenedor-catalogo {
    padding-top: var(--e-12);
    padding-bottom: var(--e-16);
}

/* --- 5. TOP BAR + HEADER --------------------------------------------- */
.top-bar {
    background-color: var(--tierra-700);
    color: var(--blanco);
    padding: var(--e-2) var(--e-4);
    font-size: var(--texto-chico);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
}

.sitio-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--blanco);
    border-bottom: 1px solid transparent;
    transition: border-color var(--trans);
}

.sitio-header.desprendido {
    border-bottom-color: var(--borde);
}

.main-header {
    display: flex;
    align-items: center;
    gap: var(--e-6);
    flex-wrap: wrap;
    padding-top: var(--e-3);
    padding-bottom: var(--e-3);
}

.logo {
    display: flex;
    align-items: center;
    flex: none;
}

.logo img {
    height: 100px;
    width: auto;
    display: block;
}

/* Buscador */
.search-wrapper {
    position: relative;
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-fila {
    display: flex;
    width: 100%;
}

.search-wrapper input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--e-3) var(--e-4);
    font-family: inherit;
    font-size: var(--texto-chico);
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-right: none;
    border-radius: var(--r-chico) 0 0 var(--r-chico);
    outline: none;
    transition: border-color var(--trans), box-shadow var(--trans);
}

.search-wrapper input::placeholder {
    color: var(--tinta-60);
}

.search-wrapper input:focus {
    border-color: var(--verde-500);
    box-shadow: var(--anillo-foco);
}

.search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--e-4);
    background: var(--verde-700);
    color: var(--blanco);
    border: 1px solid var(--verde-700);
    border-radius: 0 var(--r-chico) var(--r-chico) 0;
    transition: background var(--trans), border-color var(--trans);
}

.search-btn:hover {
    background: var(--verde-500);
    border-color: var(--verde-500);
}

/* Autocompletado */
.autocomplete-lista {
    position: absolute;
    top: calc(100% + var(--e-1));
    left: 0;
    right: 0;
    z-index: 300;
    max-height: 320px;
    overflow-y: auto;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
}

.autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    cursor: pointer;
    border-bottom: 1px solid var(--borde);
    transition: background var(--trans);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background-color: var(--verde-50);
}

.autocomplete-nombre {
    font-size: var(--texto-chico);
    font-weight: 500;
    color: var(--tinta);
}

.autocomplete-categoria {
    flex: none;
    font-size: var(--texto-mini);
    color: var(--tinta-60);
}

.autocomplete-item.agotado .autocomplete-nombre {
    color: var(--tinta-60);
    font-weight: 400;
}

.autocomplete-agotado {
    margin-left: var(--e-1);
    font-size: var(--texto-mini);
    color: var(--tinta-60);
}

.autocomplete-vacio {
    padding: var(--e-3) var(--e-4);
    font-size: var(--texto-chico);
    color: var(--tinta-60);
    text-align: center;
}

/* Acciones del header */
.header-icons {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-left: auto;
    flex: none;
}

.icon-btn {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    background: none;
    border: none;
    color: var(--tinta);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--trans);
}

.icon-btn:hover {
    color: var(--verde-700);
}

.badge {
    min-width: 18px;
    padding: 1px var(--e-1);
    background-color: var(--verde-700);
    color: var(--blanco);
    border-radius: var(--r-chico);
    font-size: var(--texto-mini);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* Botones que solo existen en mobile */
.btn-menu,
.btn-buscar-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--e-2);
    background: none;
    border: none;
    color: var(--tinta);
    transition: color var(--trans);
}

.btn-menu:hover,
.btn-buscar-mobile:hover {
    color: var(--verde-700);
}

/* --- 6. NAVEGACIÓN DESKTOP ------------------------------------------- */
.nav-sub-bar {
    background: var(--blanco);
    border-top: 1px solid var(--borde);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--e-6);
}

.nav-main-buttons {
    display: flex;
    align-items: stretch;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    background: none;
    border: none;
    color: var(--verde-700);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background var(--trans), color var(--trans);
}

.nav-item:hover {
    background: var(--verde-50);
    color: var(--verde-900);
}

.active-gray {
    background: var(--verde-50);
}

.nav-secondary-links {
    display: flex;
    align-items: center;
    gap: var(--e-6);
}

.nav-secondary-links a {
    color: var(--tinta-60);
    font-size: var(--texto-mini);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-secondary-links a:hover {
    color: var(--verde-700);
}

/* Dropdown de categorías */
.dropdown {
    position: relative;
    display: flex;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 260px;
    padding: var(--e-1) 0;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

.dropdown-content a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-6);
    color: var(--tinta);
    font-size: var(--texto-chico);
    transition: background var(--trans), color var(--trans);
}

.dropdown-content a:hover {
    background: var(--verde-50);
    color: var(--verde-900);
}

.dd-ver-todo {
    margin-top: var(--e-1);
    border-top: 1px solid var(--borde);
    font-weight: 600;
    color: var(--verde-700);
}

.submenu-container {
    position: relative;
}

.submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: calc(var(--e-1) * -1);
    z-index: 210;
    min-width: 230px;
    padding: var(--e-1) 0;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
}

.submenu-container:hover .submenu-content,
.submenu-container:focus-within .submenu-content {
    display: block;
}

.arrow {
    display: flex;
    color: var(--tinta-60);
    transition: color var(--trans);
}

.submenu-container:hover .arrow {
    color: var(--verde-700);
}

/* --- 7. NAVEGACIÓN MOBILE (panel + acordeón) ------------------------- */
.nav-mobile {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: min(320px, 88vw);
    height: 100dvh;
    background: var(--blanco);
    box-shadow: var(--sombra-menu);
    transform: translateX(-100%);
    transition: transform 250ms ease;
    visibility: hidden;
}

.nav-mobile.abierto {
    transform: translateX(0);
    visibility: visible;
}

.nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--e-4) var(--e-6);
    border-bottom: 1px solid var(--borde);
}

.nav-mobile-titulo {
    font-family: var(--fuente-display);
    font-size: var(--texto-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--verde-900);
}

.nav-mobile-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: var(--e-8);
}

.acordeon-item {
    border-bottom: 1px solid var(--borde);
}

.acordeon-trigger,
.nav-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    width: 100%;
    padding: var(--e-3) var(--e-6);
    background: none;
    border: none;
    color: var(--tinta);
    font-size: var(--texto-chico);
    font-weight: 500;
    text-align: left;
    transition: background var(--trans), color var(--trans);
}

.acordeon-trigger:hover,
.nav-mobile-link:hover {
    background: var(--verde-50);
    color: var(--verde-900);
}

.acordeon-trigger .ico {
    transition: transform var(--trans);
}

.acordeon-trigger[aria-expanded="true"] {
    color: var(--verde-700);
}

.acordeon-trigger[aria-expanded="true"] .ico {
    transform: rotate(90deg);
}

.acordeon-panel {
    display: none;
    background: var(--verde-50);
}

.acordeon-panel.abierto {
    display: block;
}

.acordeon-panel a {
    display: block;
    padding: var(--e-3) var(--e-6) var(--e-3) var(--e-8);
    color: var(--tinta);
    font-size: var(--texto-chico);
}

.acordeon-panel a:hover {
    color: var(--verde-900);
}

.nav-mobile-seccion {
    padding: var(--e-6) var(--e-6) var(--e-2);
    color: var(--tinta-60);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Capa que oscurece el fondo con el carrito o el menú abiertos */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--overlay-fondo);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--trans), visibility var(--trans);
}

.overlay.abierto {
    opacity: 1;
    visibility: visible;
}

body.sin-scroll {
    overflow: hidden;
}

/* --- 8. HERO ---------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 60vh;
    overflow: hidden;
    background: var(--verde-900);
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-velo);
}

.hero-contenido {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: var(--e-16);
    padding-bottom: var(--e-12);
    color: var(--blanco);
}

.hero-eyebrow {
    margin-bottom: var(--e-3);
    font-size: var(--texto-chico);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blanco-suave);
}

.hero-titulo {
    max-width: 16ch;
    color: var(--blanco);
    font-weight: 400;
}

.hero-sub {
    max-width: 46ch;
    margin-top: var(--e-4);
    font-size: var(--texto-base);
    line-height: 1.6;
    color: var(--blanco-suave);
}

.hero-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-8);
}

/* --- 9. BOTONES ------------------------------------------------------- */
.btn-primario,
.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-6);
    border-radius: var(--r-chico);
    font-family: var(--fuente-ui);
    font-size: var(--texto-chico);
    font-weight: 600;
    text-align: center;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
}

.btn-primario {
    background: var(--verde-700);
    color: var(--blanco);
    border: 1px solid var(--verde-700);
}

.btn-primario:hover {
    background: var(--verde-500);
    border-color: var(--verde-500);
    color: var(--blanco);
}

.btn-secundario {
    background: transparent;
    color: var(--blanco);
    border: 1px solid var(--blanco-tenue);
}

.btn-secundario:hover {
    background: var(--blanco-velo);
    border-color: var(--blanco);
    color: var(--blanco);
}

/* --- 10. SECCIONES DE INICIO ----------------------------------------- */
.seccion {
    padding: var(--e-24) 0;
    background: var(--blanco);
}

/* Sin sombras ni radios: dos secciones blancas seguidas se separan con una
   línea de 1px, no con una caja */
.seccion + .seccion {
    border-top: 1px solid var(--borde);
}

.seccion-encabezado {
    margin-bottom: var(--e-8);
}

.eyebrow {
    display: block;
    margin-bottom: var(--e-3);
    color: var(--verde-700);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.editorial {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-8);
    align-items: start;
}

.editorial-texto {
    max-width: 65ch;
}

.editorial-texto p {
    margin-bottom: var(--e-4);
    font-size: var(--texto-base);
    line-height: 1.7;
    color: var(--tinta);
}

.editorial-texto p:last-child {
    margin-bottom: 0;
}

.editorial-texto strong {
    font-weight: 600;
    color: var(--verde-900);
}

/* Contacto */
.lista-contacto {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    margin-bottom: var(--e-8);
    list-style: none;
    padding: 0;
}

.lista-contacto li {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    font-size: var(--texto-base);
    color: var(--tinta);
}

.lista-contacto .ico {
    color: var(--verde-700);
}

/* Ubicación */
.mapa-contenedor {
    margin-top: var(--e-8);
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
    line-height: 0;
}

.mapa-contenedor iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

/* --- 11. CATÁLOGO ----------------------------------------------------- */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-4);
    font-size: var(--texto-chico);
    color: var(--tinta-60);
}

.breadcrumbs a {
    color: var(--tinta-60);
}

.breadcrumbs a:hover {
    color: var(--verde-700);
}

.breadcrumbs .ico {
    color: var(--borde);
}

.titulo-categoria-principal {
    margin-bottom: var(--e-2);
    text-align: left;
}

.contador-resultados {
    margin-bottom: var(--e-8);
    font-size: var(--texto-chico);
    color: var(--tinta-60);
}

.grid-productos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-6);
}

/* --- 12. CARD DE PRODUCTO -------------------------------------------- */
.producto-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--r-card);
    transition: transform var(--trans), border-color var(--trans);
}

.producto-card:hover {
    transform: translateY(-2px);
    border-color: var(--verde-500);
}

/* Bloque de imagen: el placeholder es el estado normal, no el error */
.card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--verde-50);
    overflow: hidden;
}

.card-inicial {
    font-family: var(--fuente-display);
    font-optical-sizing: auto;
    font-size: clamp(2.5rem, 7vw, 3.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--verde-700);
    opacity: 0.22;
    user-select: none;
}

.card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Estado de stock --------------------------------------------------- */
.badge-stock {
    position: absolute;
    top: var(--e-2);
    left: var(--e-2);
    z-index: 1;
    padding: var(--e-1) var(--e-2);
    border-radius: var(--r-chico);
    color: var(--blanco);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

.badge-ultimas {
    background: var(--ocre);
}

/* La oferta va en la esquina opuesta al estado de stock, así una card
   puede tener las dos cosas sin que se pisen. */
.badge-oferta {
    position: absolute;
    top: var(--e-2);
    right: var(--e-2);
    z-index: 1;
    padding: var(--e-1) var(--e-2);
    background: var(--ocre);
    border-radius: var(--r-chico);
    color: var(--blanco);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Novedad: más discreto, al lado del nombre y sin ocupar la imagen */
.card-nuevo {
    display: inline-block;
    padding: 0 var(--e-1);
    background: var(--verde-50);
    border-radius: var(--r-chico);
    color: var(--verde-700);
    font-family: var(--fuente-ui);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.badge-agotado {
    background: var(--tinta-60);
}

/* Lo agotado se tiene que leer distinto de un vistazo en la grilla.
   Se atenúan por separado la foto y el placeholder: la inicial ya venía con
   opacidad baja, y un 0.55 plano la haría MÁS visible en vez de apagarla.
   El badge queda fuera, tiene que leerse nítido. */
.producto-card.agotado .card-img {
    opacity: 0.55;
}

.producto-card.agotado .card-inicial {
    opacity: 0.12;
}

.btn-avisar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    width: 100%;
    padding: var(--e-3) var(--e-4);
    background: transparent;
    color: var(--verde-700);
    border: 1px solid var(--verde-700);
    border-radius: var(--r-chico);
    font-size: var(--texto-chico);
    font-weight: 600;
    transition: background var(--trans), color var(--trans);
}

.btn-avisar:hover {
    background: var(--verde-50);
    color: var(--verde-900);
}

.card-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--e-4);
}

.card-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--texto-h3) * 1.2 * 2);
    margin-bottom: var(--e-2);
    font-size: var(--texto-h3);
    line-height: 1.2;
    text-transform: none;
}

.card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--texto-chico) * 1.45 * 2);
    margin-bottom: var(--e-4);
    font-size: var(--texto-chico);
    line-height: 1.45;
    color: var(--tinta-60);
}

/* Selector 100g / 1kg como segmented control */
.segmented {
    display: flex;
    margin-bottom: var(--e-3);
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--r-chico);
}

.seg-btn {
    flex: 1 1 50%;
    padding: var(--e-2) var(--e-1);
    background: var(--blanco);
    border: none;
    color: var(--tinta-60);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background var(--trans), color var(--trans);
}

.seg-btn + .seg-btn {
    border-left: 1px solid var(--borde);
}

.seg-btn:hover {
    background: var(--verde-50);
    color: var(--verde-900);
}

.seg-btn.activo {
    background: var(--verde-700);
    color: var(--blanco);
}

/* Precio */
.bloque-precio {
    margin-top: auto;
    padding-top: var(--e-2);
    margin-bottom: var(--e-3);
}

.precio {
    display: flex;
    align-items: baseline;
    gap: var(--e-1);
    flex-wrap: wrap;
}

.precio-monto {
    font-family: var(--fuente-ui);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--verde-900);
}

.precio-unidad {
    font-size: var(--texto-mini);
    font-weight: 400;
    color: var(--tinta-60);
}

.precio-consultar {
    font-size: var(--texto-chico);
    font-weight: 400;
    color: var(--tinta-60);
}

/* Único uso del ocre en la card, y solo con 1 kg activo */
.nota-ahorro {
    margin-top: var(--e-1);
    color: var(--ocre);
    font-size: var(--texto-mini);
    font-weight: 500;
}

.nota-ahorro[hidden] {
    display: none;
}

.btn-comprar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    width: 100%;
    padding: var(--e-3) var(--e-4);
    background: var(--verde-700);
    color: var(--blanco);
    border: 1px solid var(--verde-700);
    border-radius: var(--r-chico);
    font-size: var(--texto-chico);
    font-weight: 600;
    transition: background var(--trans), border-color var(--trans);
}

.btn-comprar:hover {
    background: var(--verde-500);
    border-color: var(--verde-500);
    color: var(--blanco);
}

/* Estado vacío del catálogo */
.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-24) var(--e-6);
    text-align: center;
}

.estado-vacio .ico-grande {
    color: var(--verde-500);
    opacity: 0.5;
}

.estado-vacio p {
    font-size: var(--texto-base);
    color: var(--tinta-60);
}

.estado-vacio strong {
    color: var(--tinta);
}

/* --- 13. CARRITO LATERAL --------------------------------------------- */
.carrito-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    background: var(--blanco);
    box-shadow: var(--sombra-panel);
    transform: translateX(100%);
    transition: transform 250ms ease;
    visibility: hidden;
}

.carrito-panel.abierto {
    transform: translateX(0);
    visibility: visible;
}

.carrito-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-4) var(--e-6);
    background: var(--verde-900);
    color: var(--blanco);
}

.carrito-header h3 {
    color: var(--blanco);
    font-weight: 400;
}

.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-1);
    background: none;
    border: none;
    color: var(--blanco);
    opacity: 0.8;
    transition: opacity var(--trans);
}

.close-btn:hover {
    opacity: 1;
}

.carrito-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--e-2) var(--e-6);
}

.carrito-vacio {
    padding: var(--e-16) var(--e-4);
    color: var(--tinta-60);
    font-size: var(--texto-chico);
    text-align: center;
}

.item-carrito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--borde);
}

.item-carrito:last-child {
    border-bottom: none;
}

.item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.item-nombre {
    font-size: var(--texto-chico);
    font-weight: 600;
    color: var(--tinta);
}

.item-detalle {
    margin-top: var(--e-1);
    font-size: var(--texto-mini);
    color: var(--tinta-60);
}

/* Item del carrito que se agotó después de haberlo agregado */
.item-carrito.agotado .item-nombre {
    color: var(--tinta-60);
}

.item-sin-stock {
    display: inline-block;
    margin-left: var(--e-2);
    padding: 0 var(--e-1);
    background: var(--tinta-60);
    border-radius: var(--r-chico);
    color: var(--blanco);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.item-subtotal {
    margin-top: var(--e-1);
    font-size: var(--texto-mini);
    font-weight: 600;
    color: var(--verde-900);
}

.stepper-container-mini {
    display: flex;
    align-items: center;
    flex: none;
    height: 32px;
    overflow: hidden;
    border: 1px solid var(--borde);
    border-radius: var(--r-chico);
}

.stepper-container-mini .btn-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    background: var(--blanco);
    border: none;
    color: var(--verde-700);
    transition: background var(--trans);
}

.stepper-container-mini .btn-stepper:hover {
    background: var(--verde-50);
}

.stepper-cantidad {
    min-width: 26px;
    padding: 0 var(--e-1);
    font-size: var(--texto-chico);
    font-weight: 600;
    text-align: center;
    border-left: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    line-height: 30px;
}

.carrito-footer {
    padding: var(--e-6);
    border-top: 1px solid var(--borde);
    background: var(--blanco);
}

.carrito-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--e-4);
}

.carrito-total-label {
    font-size: var(--texto-chico);
    font-weight: 500;
    color: var(--tinta-60);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.carrito-total-monto {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--verde-900);
}

.carrito-nota {
    margin-top: var(--e-3);
    font-size: var(--texto-mini);
    color: var(--tinta-60);
    text-align: center;
}

.checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    width: 100%;
    padding: var(--e-4);
    background: var(--verde-700);
    color: var(--blanco);
    border: 1px solid var(--verde-700);
    border-radius: var(--r-chico);
    font-size: var(--texto-chico);
    font-weight: 600;
    transition: background var(--trans), border-color var(--trans);
}

.checkout-btn:hover {
    background: var(--verde-500);
    border-color: var(--verde-500);
}

/* =========================================================================
   14. RESPONSIVE — breakpoints 640 / 900 / 1200
   ========================================================================= */

/* --- Hasta 900px: menú hamburguesa, sin barra de navegación ---------- */
@media (max-width: 899.98px) {
    :root {
        /* sin barra de navegación, el header pegajoso es solo la fila del logo */
        --alto-header: 136px;
    }

    .nav-sub-bar {
        display: none;
    }

    .btn-menu {
        display: flex;
        order: -1;
        margin-left: calc(var(--e-2) * -1);
    }

    .main-header {
        gap: var(--e-3);
    }
}

/* --- Hasta 640px: buscador colapsado a icono ------------------------- */
@media (max-width: 639.98px) {
    :root {
        --padding-lateral: var(--e-4);
        --alto-header: 84px;
    }

    .btn-buscar-mobile {
        display: flex;
    }

    .search-wrapper {
        display: none;
        flex-basis: 100%;
        order: 3;
        margin-bottom: var(--e-3);
    }

    .sitio-header.buscador-abierto .search-wrapper {
        display: flex;
    }

    .logo img {
        height: 44px;
    }

    .icon-btn span:not(.badge) {
        display: none;
    }

    .hero {
        min-height: 56vh;
    }

    .seccion {
        padding: var(--e-16) 0;
    }

    .contenedor-catalogo {
        padding-top: var(--e-8);
        padding-bottom: var(--e-12);
    }
}

/* --- Desde 640px: 2 columnas y carrito de ancho fijo ----------------- */
@media (min-width: 640px) {
    .grid-productos {
        grid-template-columns: repeat(2, 1fr);
    }

    .carrito-panel {
        width: var(--ancho-carrito);
    }

    .lista-contacto {
        gap: var(--e-3);
    }
}

/* --- Desde 900px: 3 columnas, gap 32, editorial a dos columnas ------- */
@media (min-width: 900px) {
    .grid-productos {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--e-8);
    }

    .editorial {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--e-16);
    }

    .seccion-encabezado {
        margin-bottom: 0;
    }

    .hero-contenido {
        padding-bottom: var(--e-16);
    }

    .card-cuerpo {
        padding: var(--e-6);
    }
}

/* --- Desde 1200px: 4 columnas ---------------------------------------- */
@media (min-width: 1200px) {
    .grid-productos {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Preferencias de movimiento reducido ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- Paginador del catálogo ------------------------------------------- */
.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-4);
    flex-wrap: wrap;
    margin-top: var(--e-12);
    padding-top: var(--e-6);
    border-top: 1px solid var(--borde);
}

.paginador-link {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--borde);
    border-radius: var(--r-chico);
    color: var(--verde-700);
    font-size: var(--texto-chico);
    font-weight: 600;
    transition: background var(--trans), border-color var(--trans);
}

a.paginador-link:hover {
    background: var(--verde-50);
    border-color: var(--verde-500);
    color: var(--verde-900);
}

.paginador-link.inactivo {
    color: var(--tinta-60);
    opacity: 0.5;
}

.paginador-atras {
    transform: rotate(180deg);
}

.paginador-posicion {
    font-size: var(--texto-chico);
    color: var(--tinta-60);
}

/* --- Código de descuento en el carrito -------------------------------- */
.descuento-caja {
    margin-bottom: var(--e-4);
    padding-bottom: var(--e-4);
    border-bottom: 1px solid var(--borde);
}

.descuento-label {
    display: block;
    margin-bottom: var(--e-2);
    font-size: var(--texto-mini);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-60);
}

.descuento-fila {
    display: flex;
    gap: var(--e-2);
}

.descuento-fila input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--e-2) var(--e-3);
    font-family: inherit;
    font-size: var(--texto-chico);
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--r-chico);
    outline: none;
    text-transform: uppercase;
    transition: border-color var(--trans), box-shadow var(--trans);
}

.descuento-fila input::placeholder {
    text-transform: none;
    color: var(--tinta-60);
}

.descuento-fila input:focus {
    border-color: var(--verde-500);
    box-shadow: var(--anillo-foco);
}

.btn-aplicar {
    flex: none;
    padding: var(--e-2) var(--e-4);
    background: transparent;
    color: var(--verde-700);
    border: 1px solid var(--verde-700);
    border-radius: var(--r-chico);
    font-size: var(--texto-chico);
    font-weight: 600;
    transition: background var(--trans), color var(--trans);
}

.btn-aplicar:hover {
    background: var(--verde-50);
    color: var(--verde-900);
}

.descuento-aplicado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    margin-top: var(--e-2);
    padding: var(--e-2) var(--e-3);
    background: var(--verde-50);
    border-radius: var(--r-chico);
}

.descuento-etiqueta {
    font-size: var(--texto-chico);
    font-weight: 600;
    color: var(--verde-900);
}

.descuento-quitar {
    padding: 0;
    background: none;
    border: none;
    color: var(--tinta-60);
    font-size: var(--texto-mini);
    font-weight: 600;
    text-decoration: underline;
    transition: color var(--trans);
}

.descuento-quitar:hover {
    color: var(--ocre);
}

.descuento-mensaje {
    margin-top: var(--e-2);
    font-size: var(--texto-mini);
    line-height: 1.4;
}

.descuento-mensaje.ok {
    color: var(--verde-700);
}

.descuento-mensaje.error {
    color: var(--ocre);
}

/* Líneas de subtotal y descuento: solo aparecen con un código aplicado */
.carrito-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--e-2);
    font-size: var(--texto-chico);
    color: var(--tinta-60);
}

.carrito-linea-descuento {
    color: var(--ocre);
    font-weight: 600;
}

.carrito-linea[hidden] {
    display: none;
}

/* El acumulado por peso necesita más lugar que un número suelto */
.stepper-cantidad.gramaje {
    min-width: 52px;
    font-size: var(--texto-mini);
}