*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f7f7f7;color:#222;padding-bottom:70px}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.contenedor{width:94%;max-width:1280px;margin:auto}
.header-mobile-first{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);position:sticky;top:0;z-index:50}
.header-mobile-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.mobile-head{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{height:58px;max-width:145px;object-fit:contain}
.btn-menu-mobile{display:block;background:#d71920;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-size:24px;line-height:1;cursor:pointer}
.search-mobile{padding:0 0 8px}
.buscador{display:flex;width:100%}
.buscador input{flex:1;min-width:0;padding:12px;border:1px solid #ddd;border-radius:10px 0 0 10px;font-size:15px}
.buscador button{background:#d71920;color:#fff;border:0;padding:0 14px;border-radius:0 10px 10px 0;font-weight:bold;cursor:pointer}
.menu{display:none;background:#fff;border-top:1px solid #eee}
.menu.abierto{display:block}
.menu-inner{display:flex;flex-direction:column;gap:0;padding:0}
.menu-inner a{display:block;width:100%;padding:13px;border-bottom:1px solid #eee;text-align:left;font-size:16px}
.bottom-nav-mobile{position:fixed;bottom:0;left:0;right:0;height:62px;background:#fff;border-top:1px solid #ddd;display:grid;grid-template-columns:repeat(4,1fr);z-index:60;box-shadow:0 -4px 14px rgba(0,0,0,.1)}
.bottom-nav-mobile a{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:bold;font-size:13px;color:#222;text-decoration:none}
.bottom-nav-mobile a:nth-child(3){color:#d71920}
.btn-red,.btn-outline,.btn-white,.btn-mini{display:inline-block;border-radius:9px;font-weight:bold;cursor:pointer;border:0}
.btn-red{background:#d71920;color:#fff;padding:12px 18px}
.btn-outline{border:1px solid #d71920;color:#d71920;padding:10px 16px;background:#fff}
.btn-white{background:#fff;color:#d71920;border:1px solid #d71920;padding:12px 18px}
.btn-mini{background:#d71920;color:#fff;padding:9px 10px;font-size:14px}
.hero{background:linear-gradient(135deg,#fff,#fff0f1);padding:22px 0;border-bottom:1px solid #eee}
.hero-inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.hero h1{font-size:27px;line-height:1.15;margin:0 0 14px}
.hero h1 span{color:#d71920}
.hero p{font-size:16px;line-height:1.5}
.hero-botones{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{display:none}
.seccion{padding:28px 0}
.seccion h1,.seccion h2{margin-top:0}
.seccion h1{font-size:30px}
.seccion h2{font-size:26px}
.grid-categorias,.grid-productos,.cards-admin{display:grid;grid-template-columns:1fr;gap:14px}
.card-categoria,.card-producto{background:#fff;border-radius:16px;padding:14px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.card-categoria h3,.card-producto h3{margin-top:0}
.card-categoria a{color:#d71920;font-weight:bold}
.mobile-product-list{display:grid;grid-template-columns:1fr;gap:12px}
.producto-mobile-card{padding:12px;border-radius:14px}
.producto-mobile-link{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center}
.producto-img{height:92px;background:#f1f1f1;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:0;color:#777;overflow:hidden}
.producto-img img{max-width:100%;max-height:100%;object-fit:contain}
.producto-mobile-info h3{font-size:16px;margin:0 0 5px}
.producto-mobile-info p{font-size:13px;margin:0;color:#555;line-height:1.3}
.producto-mobile-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.precio{font-size:18px;color:#d71920;font-weight:bold;margin:0}
.compra-rapida{display:flex;gap:6px;align-items:center}
.compra-rapida input{width:60px;padding:8px;border:1px solid #ddd;border-radius:8px}
.precio-login,.bloque-login-precio{background:#fff4f4;border:1px solid #ffd2d2;border-radius:12px;padding:10px;margin-top:10px;font-size:14px}
.precio-login span{display:block;margin:5px 0;color:#555}
.login-actions{display:flex;gap:8px;flex-wrap:wrap}
.login-actions a{background:#d71920;color:#fff;padding:8px 10px;border-radius:8px;font-weight:bold;text-decoration:none}
.detalle-producto{display:grid;grid-template-columns:1fr;gap:20px}
.producto-img.grande{height:260px}
.compra-detalle{display:grid;grid-template-columns:80px 1fr;gap:10px}
.compra-detalle input{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
.compra-detalle button{width:100%}
.aviso,.alerta,.ok{background:#fff;padding:16px;border-radius:12px;margin:10px 0}
.alerta{border-left:5px solid #d71920}
.ok{border-left:5px solid #22a447}
.como-funciona{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:24px 0}
.pasos{display:grid;grid-template-columns:1fr;gap:16px}
.pasos strong{background:#d71920;color:#fff;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sobre{background:#fff;border-radius:18px;margin-top:25px;padding:22px}
.sobre blockquote{font-size:22px;color:#d71920;font-weight:bold}
.footer{background:#111;color:#fff;margin-top:40px;text-align:center}
.footer-inner{display:grid;grid-template-columns:1fr;gap:20px;padding:30px 0}
.footer a{display:block;margin:6px 0}
.footer-logo{height:75px;background:#fff;border-radius:8px;padding:5px}
.copy{text-align:center;border-top:1px solid rgba(255,255,255,.15);padding:14px}
.copy a{color:#fff;font-weight:bold;text-decoration:underline}
.titulo-linea{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.layout-productos{display:grid;grid-template-columns:1fr;gap:18px}
.filtros{background:#fff;padding:16px;border-radius:16px;height:max-content;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.filtros a{display:block;padding:9px 0;border-bottom:1px solid #eee}
.form-box{max-width:850px}
form label{display:block;font-weight:bold;margin:8px 0 5px}
form input,form select,form textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;font-size:15px}
form textarea{min-height:120px}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px;background:#fff;padding:18px;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.form-grid .full{grid-column:1/-1}
.form-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel-form{margin-bottom:22px}
.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.08);font-size:13px}
.tabla th,.tabla td{padding:8px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.tabla th{background:#f0f0f0}
.estado{background:#d71920;color:#fff;padding:5px 9px;border-radius:20px;font-size:13px}
.tracking{background:#fff;border-left:5px solid #d71920;margin:10px 0;padding:14px;border-radius:10px}
@media(min-width:901px){
body{padding-bottom:0}
.header-mobile-inner{display:flex}
.mobile-head{width:auto}
.btn-menu-mobile{display:none}
.menu{display:block}
.menu-inner{display:flex;flex-direction:row;gap:28px;padding:12px 0}
.menu-inner a{border:0;width:auto;padding:0}
.bottom-nav-mobile{display:none}
.logo{height:86px;max-width:none}
.header-mobile-first .contenedor.header-mobile-inner{gap:22px}
.search-mobile{max-width:760px;margin-top:-74px;margin-left:auto;margin-right:auto;padding-bottom:22px}
.hero{padding:45px 0}
.hero-inner{grid-template-columns:1.1fr .9fr}
.hero h1{font-size:44px}
.hero p{font-size:19px}
.hero-card{display:block;background:#d71920;color:#fff;border-radius:22px;padding:45px;text-align:center;box-shadow:0 12px 32px rgba(215,25,32,.25)}
.canasto{background:#fff;color:#d71920;font-weight:900;border-radius:14px;padding:30px;font-size:28px}
.grid-categorias,.grid-productos,.cards-admin{grid-template-columns:repeat(4,1fr)}
.pasos{grid-template-columns:repeat(4,1fr)}
.footer-inner{grid-template-columns:2fr 1fr 1fr;text-align:left}
.layout-productos{grid-template-columns:230px 1fr}
.detalle-producto{grid-template-columns:1fr 1fr}
.form-grid{grid-template-columns:repeat(2,1fr)}
.tabla{font-size:16px}
.tabla th,.tabla td{padding:12px}
}


/* Carrusel de oportunidades */
.carrusel-section {
    padding-top: 22px;
}

.carrusel-wrapper {
    position: relative;
}

.carrusel-productos {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 2px 16px;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
}

.carrusel-card {
    min-width: 235px;
    max-width: 235px;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    scroll-snap-align: start;
}

.carrusel-img {
    height: 145px;
    background: #f1f1f1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.carrusel-img img {
    max-width: 100%;
    max-height: 135px;
    object-fit: contain;
}

.carrusel-card h3 {
    font-size: 16px;
    margin: 12px 0 8px;
    min-height: 38px;
}

.carrusel-btn {
    display: none;
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #d71920;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.carrusel-prev {
    left: -12px;
}

.carrusel-next {
    right: -12px;
}

@media(min-width:901px) {
    .carrusel-btn {
        display: block;
    }

    .carrusel-card {
        min-width: 260px;
        max-width: 260px;
    }

    .carrusel-img {
        height: 165px;
    }
}

@media(max-width:900px) {
    .carrusel-productos {
        gap: 12px;
        padding-bottom: 12px;
    }

    .carrusel-card {
        min-width: 78%;
        max-width: 78%;
    }

    .carrusel-img {
        height: 135px;
    }

    .carrusel-card h3 {
        font-size: 16px;
        min-height: auto;
    }
}