@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root {
    --color-primario: #FF441F;
    --color-secundario: #2E2E2E;
    --color-fondo: #F5F5F7;
    --color-texto: #1A1A1A;
    --radio: 16px;

    /* Superficies y detalles: cambian entre tema claro/oscuro */
    --color-superficie: #ffffff;
    --color-superficie-2: #eeeeee;
    --color-borde: #eeeeee;
    --color-borde-fuerte: #dddddd;
    --color-texto-suave: #777777;
    --color-texto-suave-2: #999999;
    --color-placeholder-img: #eeeeee;
    --sombra-suave: rgba(0,0,0,.06);
    --sombra-media: rgba(0,0,0,.08);
}

/* ---------- Tema oscuro ---------- */
[data-theme="dark"] {
    --color-fondo: #15151a;
    --color-texto: #eaeaea;
    --color-superficie: #1f1f26;
    --color-superficie-2: #2a2a33;
    --color-borde: #33333d;
    --color-borde-fuerte: #3d3d47;
    --color-texto-suave: #b3b3b3;
    --color-texto-suave-2: #999999;
    --color-placeholder-img: #2a2a33;
    --sombra-suave: rgba(0,0,0,.35);
    --sombra-media: rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
    padding-bottom: 90px;
    overflow-x: hidden;
    transition: background .2s ease, color .2s ease;
}

h1, h2, h3, .titulo-marca {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
}

a { text-decoration: none; color: inherit; }

/* ---------- Header ---------- */
.topbar {
    background: var(--color-superficie);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 2px 6px var(--sombra-suave);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .marca { display: flex; align-items: center; gap: 10px; }
.topbar .marca img { height: 40px; }
.topbar .marca span { font-size: 22px; color: var(--color-secundario); }
.topbar .acciones { display: flex; align-items: center; gap: 10px; }

.btn-tema {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde-fuerte);
    color: var(--color-texto);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.btn-carrito {
    background: var(--color-primario);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
}
.btn-carrito .cant {
    background: rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 13px;
}

/* ---------- Banner ---------- */
/* Usa la proporción exacta de tu imagen (320x100 = 3.2:1) en vez de una
   altura fija: así el recorte de "object-fit: cover" nunca le come
   contenido a los costados (como el precio de una promo), en ningún
   tamaño de pantalla. */
.banner {
    width: 100%;
    aspect-ratio: 3.2 / 1;
    overflow: hidden;
}
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* En PC se limita el ancho para que no se agrande (y pixele) de más al
   estirarse a todo el ancho de pantallas grandes. Como ahí ya no toca
   los bordes de la pantalla, se le agrega el borde redondeado. */
@media (min-width: 700px) {
    .banner { max-width: 640px; margin: 0 auto; border-radius: var(--radio); }
}

/* ---------- Buscador y categorías (chips) ---------- */
.buscador-wrap { padding: 14px 20px 0; }
.buscador-wrap input {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: 0 1px 4px var(--sombra-media);
    font-size: 14.5px;
    font-family: 'Nunito Sans', sans-serif;
}
.buscador-wrap input:focus { outline: 2px solid var(--color-primario); }
.buscador-wrap input::placeholder { color: var(--color-texto-suave-2); }
.chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 20px;
}
.chip {
    background: var(--color-superficie);
    color: var(--color-texto);
    border: 2px solid transparent;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 4px var(--sombra-media);
}
.chip.activo { border-color: var(--color-primario); color: var(--color-primario); }

/* ---------- Destacados ---------- */
.seccion { padding: 10px 20px 26px; }
.seccion h2 { font-size: 19px; margin: 6px 0 14px; color: var(--color-secundario); }

.carrusel-destacados {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}
.carrusel-destacados .card-producto { min-width: 180px; }

/* ---------- Grid productos ---------- */
.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}

.card-producto {
    background: var(--color-superficie);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--sombra-suave);
    position: relative;
    display: flex;
    flex-direction: column;
}
.card-producto .img-wrap {
    aspect-ratio: 1/1;
    background: var(--color-placeholder-img);
    position: relative;
}
.card-producto .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-producto .badge-mitad {
    position: absolute; top: 8px; left: 8px;
    background: var(--color-secundario); color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 3px 8px; border-radius: 999px;
}
.card-producto .badge-agotado {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff; font-size: 14px; text-align: center;
}
.card-producto .info { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card-producto .nombre { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.card-producto .precio { color: var(--color-primario); font-weight: 800; font-size: 16px; }
.card-producto .descripcion { font-size: 12.5px; color: var(--color-texto-suave); }

.btn-agregar {
    margin-top: auto;
    background: var(--color-primario);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 0;
    font-weight: 800;
    cursor: pointer;
    font-size: 13.5px;
}
.btn-agregar:disabled { background: var(--color-borde-fuerte); color: var(--color-texto-suave); cursor: not-allowed; }

.selector-cant {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--color-fondo); border-radius: 10px; padding: 6px 10px;
}
.selector-cant button {
    border: none; background: var(--color-primario); color: #fff;
    width: 24px; height: 24px; border-radius: 50%; font-weight: 800; cursor: pointer;
}
.selector-cant span { font-weight: 700; }

/* ---------- Carrito lateral ---------- */
.overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    display: none; z-index: 90;
}
.overlay.visible { display: block; }

.panel-carrito {
    position: fixed; top: 0; right: -420px; width: 380px; max-width: 90vw; height: 100%;
    background: var(--color-superficie); color: var(--color-texto);
    z-index: 100; transition: right .25s ease;
    display: flex; flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
}
.panel-carrito.abierto { right: 0; }
.panel-carrito header {
    padding: 18px; border-bottom: 1px solid var(--color-borde);
    display: flex; justify-content: space-between; align-items: center;
}
.panel-carrito .items { flex: 1; overflow-y: auto; padding: 12px 18px; }
.item-carrito { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-borde); align-items: center; }
.item-carrito img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.item-carrito .datos { flex: 1; }
.item-carrito .nombre { font-weight: 700; font-size: 14px; }
.item-carrito .precio-linea { color: var(--color-primario); font-weight: 800; font-size: 13.5px; }
.item-carrito .quitar { color: #e05555; font-size: 12px; cursor: pointer; }

.panel-carrito footer {
    padding: 16px 18px; border-top: 1px solid var(--color-borde);
}
.datos-cliente { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.datos-cliente input {
    padding: 11px 14px;
    border: 1px solid var(--color-borde-fuerte);
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Nunito Sans', sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
}
.datos-cliente input::placeholder { color: var(--color-texto-suave-2); }
.datos-cliente input:focus { outline: 2px solid var(--color-primario); border-color: transparent; }
.metodo-entrega {
    display: flex;
    gap: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-texto);
    margin: 2px 0 2px;
}
.metodo-entrega label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.metodo-entrega input[type="radio"] { accent-color: var(--color-primario); width: 16px; height: 16px; }
.fila-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 17px; margin-bottom: 10px; }
.btn-whatsapp {
    width: 100%; background: #25D366; color: #fff; border: none;
    padding: 13px; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer;
}
.carrito-vacio { text-align: center; color: var(--color-texto-suave-2); padding: 40px 0; }

/* ---------- Footer ---------- */
.footer-fijo {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--color-superficie); border-top: 1px solid var(--color-borde);
    display: flex; align-items: center; justify-content: center;
    padding: 8px 0; z-index: 40;
}
.footer-fijo img { height: 28px; }

@media (max-width: 480px) {
    .topbar .marca span { font-size: 18px; }
}