/* ============================================================
   SOS PACKING — estilos
   Estructura inspirada en marketplaces tipo Mercado Libre,
   con identidad propia: azul marino + naranjo "SOS".
   ============================================================ */
:root {
  --marino: #0F2A44;
  --marino-2: #16395C;
  --naranjo: #FF6A13;
  --naranjo-osc: #E55A06;
  --naranjo-suave: #FFE9DC;
  --verde: #00A650;
  --fondo: #EDEDED;
  --panel: #FFFFFF;
  --texto: #1F1F1F;
  --muted: #737373;
  --borde: #E6E6E6;
  --link: #1F6FD1;
  --radio: 6px;
  --sombra: 0 1px 2px rgba(0,0,0,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--fondo); color: var(--texto); font-size: 14px; line-height: 1.4; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.centro { text-align: center; margin-top: 10px; }
.link { color: var(--link); }
.link:hover { text-decoration: underline; }
.panel { background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; margin-bottom: 16px; }

/* ---------- Header ---------- */
.aviso-mb { background: var(--naranjo); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 16px; }
.nav-top { background: var(--marino); color: #fff; }
.nav-top-inner { display: grid; grid-template-columns: 180px 1fr 280px; gap: 24px; align-items: center; padding-top: 10px; padding-bottom: 6px; }
.logo { display: flex; align-items: center; gap: 4px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.logo-sos { background: var(--naranjo); color: #fff; padding: 5px 7px; border-radius: 6px; font-size: 20px; }
.logo-pack { font-size: 20px; }
.buscador { display: flex; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.25); height: 40px; }
.buscador input { flex: 1; border: none; outline: none; padding: 0 16px; font: inherit; font-size: 15px; border-radius: 3px 0 0 3px; min-width: 0; }
.buscador button { width: 44px; color: #666; border-left: 1px solid var(--borde); display: grid; place-items: center; }
.promo-top { font-size: 13px; color: #FFD2B5; text-align: right; font-weight: 500; }

.nav-bottom { display: flex; align-items: center; gap: 24px; padding-bottom: 8px; font-size: 13px; }
.envio-a { display: flex; align-items: center; gap: 6px; line-height: 1.15; width: 180px; color: rgba(255,255,255,.75); font-size: 12px; }
.envio-a b { color: #fff; font-weight: 500; font-size: 13px; }
.menu { display: flex; gap: 20px; flex: 1; align-items: center; }
.menu > a, .dd-btn { color: rgba(255,255,255,.85); }
.menu > a:hover, .dd-btn:hover { color: #fff; }
.dropdown { position: relative; }
.dd-menu { display: none; position: absolute; top: 100%; left: 0; padding-top: 8px; z-index: 50; }
.dd-menu::before { content: ''; position: absolute; top: 2px; left: 20px; border: 6px solid transparent; border-bottom-color: #fff; border-top: 0; }
.dropdown:hover .dd-menu, .dropdown:focus-within .dd-menu { display: block; }
.dd-cols { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); overflow: hidden; }
.dd-menu a { display: block; background: #fff; color: var(--texto); padding: 10px 20px; min-width: 240px; font-size: 14px; }
.dd-menu a:hover { background: var(--naranjo); color: #fff; }
.carrito-link { position: relative; color: #fff; display: grid; place-items: center; }
[hidden] { display: none !important; }
.badge { position: absolute; top: -6px; right: -8px; background: var(--naranjo); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }

/* ---------- Fotos (placeholder) ---------- */
.foto { aspect-ratio: 1; display: grid; place-items: center; width: 100%; border-radius: 4px; }
.foto span { font-size: 72px; line-height: 1; }
.foto-img { background: #fff; overflow: hidden; }
.foto-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.foto-xl span { font-size: 180px; }
.foto-sm span { font-size: 32px; }

/* ---------- Carrusel portada ---------- */
.carrusel { position: relative; height: 320px; overflow: hidden; background: linear-gradient(var(--marino) 0 0) top / 100% 30% no-repeat, var(--fondo); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.slide.activa { opacity: 1; pointer-events: auto; }
.slide.s1 { background: linear-gradient(100deg, #0F2A44 0%, #1D4E7A 100%); }
.slide.s2 { background: linear-gradient(100deg, #E55A06 0%, #FF8A3D 100%); }
.slide.s3 { background: linear-gradient(100deg, #0B6E6E 0%, #16A3A3 100%); }
.slide-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; color: #fff; padding-bottom: 50px; }
.slide-kicker { font-size: 13px; letter-spacing: 2px; font-weight: 700; opacity: .85; margin-bottom: 8px; }
.slide h2 { font-size: 40px; font-weight: 800; line-height: 1.1; max-width: 520px; }
.slide p { font-size: 17px; margin: 12px 0 20px; opacity: .92; max-width: 460px; }
.btn-slide { display: inline-block; background: #fff; color: var(--marino); font-weight: 700; padding: 10px 22px; border-radius: 6px; }
.btn-slide:hover { background: var(--naranjo-suave); }
.slide-art { font-size: 170px; line-height: 1; filter: drop-shadow(0 12px 24px rgba(0,0,0,.25)); }
.car-flecha { position: absolute; top: 40%; transform: translateY(-50%); width: 48px; height: 80px; background: rgba(255,255,255,.9); color: var(--link); font-size: 32px; box-shadow: 0 2px 6px rgba(0,0,0,.2); opacity: 0; transition: opacity .2s; }
.car-flecha.izq { left: 0; border-radius: 0 40px 40px 0; }
.car-flecha.der { right: 0; border-radius: 40px 0 0 40px; }
.carrusel:hover .car-flecha { opacity: 1; }
.dots { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); }
.dots button.activa { background: #fff; }

.portada-body { margin-top: -40px; position: relative; z-index: 2; padding-bottom: 24px; }

/* ---------- Categorías ---------- */
.sec-titulo { font-size: 22px; font-weight: 500; margin-bottom: 18px; color: #333; }
.categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.cat-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; padding: 8px; border-radius: 6px; }
.cat-item:hover { background: #fafafa; color: var(--link); }
.cat-circulo { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; transition: transform .15s; }
.cat-item:hover .cat-circulo { transform: scale(1.06); }

/* ---------- Bloques de productos ---------- */
.bloque { margin: 32px 0 16px; }
.bloque-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.bloque-head h2 { font-size: 24px; font-weight: 400; color: #555; }
.bloque-head a { color: var(--link); font-size: 14px; }
.fila-scroll { position: relative; }
.fila-prod { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.fila-prod::-webkit-scrollbar { display: none; }
.flecha { position: absolute; top: 35%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); color: var(--link); font-size: 26px; line-height: 1; }
.flecha.izq { left: -18px; } .flecha.der { right: -18px; }

.card-prod { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; transition: box-shadow .15s; }
.card-prod:hover { box-shadow: 0 7px 16px rgba(0,0,0,.14); }
.card-prod .foto { border-radius: 0; border-bottom: 1px solid #f0f0f0; }
.card-body { padding: 14px 16px 18px; }
.precio-antes { color: var(--muted); font-size: 13px; text-decoration: line-through; }
.precio-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.precio { font-size: 22px; font-weight: 400; }
.precio-lg { font-size: 26px; }
.precio-xl { font-size: 36px; font-weight: 300; }
.off { color: var(--verde); font-size: 14px; font-weight: 500; }
.off-lg { font-size: 18px; }
.cuotas { color: var(--verde); font-size: 13px; margin-top: 2px; }
.cuotas-lg { font-size: 16px; margin: 4px 0 6px; }
.envio-gratis { color: var(--verde); font-weight: 600; font-size: 14px; margin-top: 6px; }
.card-titulo { font-size: 13px; font-weight: 400; color: #555; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-prod:hover .card-titulo { color: var(--texto); }

/* etiqueta (ej. Liquidación) y recuadro de condiciones */
.etiqueta { display: inline-block; background: var(--naranjo-suave); color: var(--naranjo-osc); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 3px; margin-bottom: 6px; }
.aviso-producto { margin-top: 18px; background: #FFF6E5; border: 1px solid #F5C66B; border-radius: 6px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #5A4300; }
.aviso-producto b { display: block; margin-bottom: 4px; }

/* ---------- Beneficios / footer ---------- */
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 32px; padding-bottom: 32px; text-align: center; }
.beneficios > div { padding: 8px 24px; }
.beneficios > div + div { border-left: 1px solid #d8d8d8; }
.ben-ico { font-size: 40px; display: block; margin-bottom: 8px; }
.beneficios h4 { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.beneficios p { color: var(--muted); font-size: 13px; }
.footer-bar { background: var(--marino); color: rgba(255,255,255,.8); font-size: 13px; padding: 18px 0; }
.footer-bar .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Buscador / listado ---------- */
.barra-res { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 10px; gap: 12px; }
.barra-der { display: flex; align-items: center; gap: 12px; }
.miga { font-size: 14px; color: var(--muted); padding: 14px 0; }
.barra-res .miga { padding: 0; }
.miga a { color: var(--link); }
.ordenar { font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.ordenar select { border: none; background: none; font: inherit; font-weight: 400; color: var(--texto); cursor: pointer; }
.btn-filtros { display: none; color: var(--link); font-weight: 600; }

.buscar-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding-bottom: 32px; }
.res-h1 { font-size: 26px; font-weight: 600; line-height: 1.2; word-break: break-word; }
.res-cant { color: var(--muted); font-size: 14px; margin: 4px 0 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { background: #fff; border-radius: 16px; padding: 5px 12px; font-size: 13px; box-shadow: var(--sombra); }
.chip:hover { color: var(--link); }
.filtro-grupo { margin-bottom: 24px; }
.filtro-grupo h4 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.filtro-grupo a { display: block; font-size: 14px; color: #555; padding: 4px 0; }
.filtro-grupo a:hover { color: var(--link); }
.filtro-grupo a.sel { font-weight: 600; color: var(--texto); }
.toggles { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 4px 16px; }
.toggle { display: flex !important; justify-content: space-between; align-items: center; padding: 12px 0 !important; }
.toggle + .toggle { border-top: 1px solid var(--borde); }
.toggle .envio-gratis { margin: 0; }
.toggle i { width: 34px; height: 14px; border-radius: 7px; background: #ccc; position: relative; transition: background .2s; }
.toggle i::after { content: ''; position: absolute; top: -3px; left: -2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .2s; }
.toggle.on i { background: #9FC2F0; }
.toggle.on i::after { left: 16px; background: var(--link); }

.resultados { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); align-self: start; }
.resultado { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px; border-bottom: 1px solid var(--borde); }
.resultado:last-child { border-bottom: none; }
.foto-res span { font-size: 80px; }
.res-titulo { font-size: 18px; font-weight: 400; color: #333; margin-bottom: 4px; }
.resultado:hover .res-titulo { color: var(--link); }
.res-marca { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.res-rating { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.estrellas { color: var(--link); letter-spacing: 1px; position: relative; display: inline-block; white-space: nowrap; }
.est-llenas { position: absolute; left: 0; top: 0; overflow: hidden; }
.vacio { padding: 48px 32px; text-align: center; }
.vacio h3 { font-size: 20px; font-weight: 500; margin: 12px 0; }
.vacio ul { list-style: disc; text-align: left; display: inline-block; color: #555; line-height: 1.9; }
.vacio a { color: var(--link); }

/* ---------- Aviso ---------- */
.aviso-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 310px; gap: 32px; }
.galeria { display: grid; grid-template-columns: 50px 1fr; gap: 16px; align-self: start; position: sticky; top: 16px; }
.miniaturas { display: flex; flex-direction: column; gap: 8px; }
.mini { width: 50px; border: 1px solid var(--borde); border-radius: 4px; padding: 2px; }
.mini .foto span { font-size: 22px; }
.mini.activa, .mini:hover { border: 2px solid var(--link); padding: 1px; }
.foto-principal .foto { max-height: 480px; }
.aviso-titulo { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 6px 0 8px; }
.aviso-info .precio-antes { margin-top: 14px; font-size: 16px; }
.sub { font-size: 16px; font-weight: 600; margin: 28px 0 10px; }
.puntos { padding-left: 18px; line-height: 1.9; font-size: 14px; }
.caja-compra { border: 1px solid var(--borde); border-radius: 8px; padding: 24px 18px; align-self: start; display: flex; flex-direction: column; gap: 6px; }
.caja-compra .envio-gratis { margin: 0; font-size: 16px; font-weight: 500; }
.retiro { margin-top: 8px; }
.verde { color: var(--verde); }
.cant { margin-top: 20px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cant select { font: inherit; font-weight: 600; border: none; background: none; cursor: pointer; }
.btn { display: block; width: 100%; padding: 14px; border-radius: 6px; font-weight: 600; font-size: 15px; text-align: center; transition: background .15s; }
.btn + .btn { margin-top: 8px; }
.btn-primario { background: var(--naranjo); color: #fff; }
.btn-primario:hover { background: var(--naranjo-osc); }
.btn-secundario { background: var(--naranjo-suave); color: var(--naranjo-osc); }
.btn-secundario:hover { background: #FFDCC6; }
.btn-inline { display: inline-block; width: auto; padding: 12px 28px; margin-top: 16px; }
.vendedor { margin-top: 20px; font-size: 14px; color: #555; }
.garantias { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--muted); }
.garantias li { display: flex; gap: 10px; }
.aviso-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.tabla-car { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: 6px; overflow: hidden; }
.tabla-car th, .tabla-car td { padding: 12px 16px; text-align: left; }
.tabla-car th { background: #EBEBEB; font-weight: 600; width: 45%; }
.tabla-car td { background: #F5F5F5; }
.tabla-car tr:nth-child(even) th { background: #F5F5F5; }
.tabla-car tr:nth-child(even) td { background: #fff; }
.descripcion { font-size: 16px; color: #666; line-height: 1.6; }
.grid-rel { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); overflow: visible; }

/* ---------- Carrito ---------- */
.pag-titulo { font-size: 24px; font-weight: 600; margin: 24px 0 16px; }
.carrito-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; padding-bottom: 32px; }
.carrito-grid > * { min-width: 0; }
.item-carro { display: grid; grid-template-columns: 72px 1fr auto 110px; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--borde); }
.item-titulo { font-weight: 500; display: block; margin-bottom: 6px; }
.item-titulo:hover { color: var(--link); }
.contador { display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 6px; }
.contador button { width: 32px; height: 32px; color: var(--link); font-size: 18px; }
.contador button:disabled { color: #ccc; cursor: default; }
.contador span { min-width: 28px; text-align: center; }
.item-precio { text-align: right; font-size: 18px; }
.resumen { position: sticky; top: 16px; }
.fila-res { display: flex; justify-content: space-between; padding: 8px 0; }
.fila-res.total { font-size: 18px; font-weight: 600; border-top: 1px solid var(--borde); margin: 8px 0 16px; padding-top: 16px; }

/* ---------- Checkout ---------- */
.nota-form { margin: -8px 0 18px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--link); }
.sub-grupo { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--borde); }
#camposComuna { margin-top: 16px; }
.full { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #444; }
.campo.full { grid-column: 1 / -1; }
.campo input, .campo select { width: 100%; min-width: 0; font: inherit; font-size: 15px; font-weight: 400; padding: 11px 12px; border: 1px solid #C9C9C9; border-radius: 6px; background: #fff; color: var(--texto); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(31,111,209,.15); }
.campo.error input, .campo.error select { border-color: #E0263A; }
.campo.error::after { content: 'Completa este dato correctamente.'; color: #E0263A; font-size: 12px; font-weight: 400; }
.opciones-entrega { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--borde); border-radius: 6px; padding: 14px; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--link); background: #F5F9FF; }
.opcion input { margin-top: 3px; accent-color: var(--link); }
.opcion > span { display: flex; flex-direction: column; gap: 2px; }
.mini-item { font-size: 13px; color: #555; gap: 12px; }
.mini-item span:first-child { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); background: #333; color: #fff; padding: 14px 22px; border-radius: 8px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .3s; z-index: 100; max-width: calc(100% - 32px); }
#toast.show { transform: translate(-50%, 0); }
#toast a { color: #FFB380; font-weight: 600; margin-left: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .fila-prod { grid-auto-columns: calc((100% - 32px) / 3); }
  .aviso-top { grid-template-columns: 1fr 1fr; }
  .caja-compra { grid-column: 1 / -1; }
  .promo-top { display: none; }
  .nav-top-inner { grid-template-columns: 160px 1fr; }
}
@media (max-width: 760px) {
  .nav-top-inner { grid-template-columns: 1fr auto; gap: 10px; }
  .buscador { grid-column: 1 / -1; grid-row: 2; }
  .envio-a { display: none; }
  .menu { gap: 14px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .menu > a:nth-child(n+4) { display: none; }
  .dd-cols { grid-template-columns: 1fr; max-height: 70vh; overflow-y: auto; }
  .carrusel { height: 340px; }
  .slide-inner { padding-bottom: 70px; gap: 12px; }
  .dots { bottom: 48px; }
  .slide h2 { font-size: 24px; }
  .slide p { font-size: 14px; margin: 8px 0 14px; }
  .slide-art { font-size: 80px; }
  .fila-prod { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
  .flecha { display: none; }
  .portada-body { margin-top: -30px; }
  .panel { padding: 16px; }
  .categorias { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .cat-circulo { width: 60px; height: 60px; font-size: 28px; }
  .beneficios { grid-template-columns: 1fr; }
  .beneficios > div + div { border-left: none; border-top: 1px solid #d8d8d8; padding-top: 20px; }

  .buscar-grid { grid-template-columns: 1fr; }
  .btn-filtros { display: block; }
  .filtros:not(.abierto) .filtro-grupo { display: none; }
  .res-cant { margin-bottom: 8px; }
  .barra-res { flex-wrap: wrap; }
  .resultado { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
  .foto-res span { font-size: 48px; }
  .res-titulo { font-size: 15px; }

  .aviso-top, .aviso-bottom { grid-template-columns: 1fr; gap: 20px; }
  .galeria { position: static; grid-template-columns: 1fr; }
  .miniaturas { flex-direction: row; order: 2; }
  .foto-xl span { font-size: 120px; }

  .carrito-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .item-carro { grid-template-columns: 64px 1fr; }
  .contador { grid-column: 2; justify-self: start; }
  .item-precio { grid-column: 2; text-align: left; }
}