/* =========================================================
   TIENDA TECH - CSS PRINCIPAL
   Diseño tecnológico pero amigable, alto contraste, fácil de usar
   ========================================================= */

:root{
  --azul: #0b5fff;
  --azul-oscuro: #063d9e;
  --azul-claro: #eaf1ff;
  --verde: #16a34a;
  --rojo: #e11d48;
  --naranja: #f59e0b;
  --texto: #16202b;
  --texto-suave: #5b6b7a;
  --fondo: #f6f8fb;
  --blanco: #ffffff;
  --borde: #e3e8ef;
  --radio: 14px;
  --sombra: 0 4px 16px rgba(15,32,68,.08);
  --fuente: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--fuente); background:var(--fondo); color:var(--texto);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5em;}
.container{max-width:1240px; margin:0 auto; padding:0 20px;}

.skip-link{position:absolute; left:-9999px; top:0; background:#fff; padding:10px; z-index:999;}
.skip-link:focus{left:10px;}

/* ---------- HEADER ---------- */
.top-bar{background:var(--azul-oscuro); color:#fff; font-size:13.5px;}
.top-bar-inner{display:flex; gap:24px; padding:6px 20px; overflow-x:auto; white-space:nowrap;}

.main-nav{display:flex; align-items:center; gap:20px; padding:16px 20px;}
.logo{font-size:1.5rem; font-weight:800; color:var(--azul-oscuro); white-space:nowrap;}
.buscador{flex:1; display:flex; max-width:560px; margin:0 auto;}
.buscador input{flex:1; padding:12px 16px; border:2px solid var(--borde); border-radius:10px 0 0 10px; font-size:16px; outline:none;}
.buscador input:focus{border-color:var(--azul);}
.buscador button{padding:0 20px; background:var(--azul); color:#fff; border:none; border-radius:0 10px 10px 0; cursor:pointer; font-size:18px;}
.menu-toggle{display:none; background:none; border:none; font-size:26px; cursor:pointer;}

.categorias-nav{background:var(--azul); color:#fff;}
.categorias-nav-inner{display:flex; gap:22px; padding:10px 20px; overflow-x:auto; white-space:nowrap;}
.categorias-nav a{opacity:.92; font-weight:600; font-size:15px;}
.categorias-nav a:hover{opacity:1; text-decoration:underline;}
.nav-sep{opacity:.5;}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(135deg, var(--azul-oscuro), var(--azul)); color:#fff; padding:56px 0;}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
.hero h1{font-size:2.2rem; margin-bottom:.4em;}
.hero p{font-size:1.1rem; opacity:.95; max-width:560px;}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.hero-badges span{background:rgba(255,255,255,.15); padding:8px 14px; border-radius:30px; font-size:14px; font-weight:600;}
.hero-cta{display:inline-block; margin-top:22px; background:#fff; color:var(--azul-oscuro); font-weight:700; padding:14px 26px; border-radius:10px;}

/* ---------- SECCIONES ---------- */
.seccion{padding:44px 0;}
.seccion-titulo{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px;}
.seccion-titulo h2{font-size:1.6rem;}
.ver-todo{color:var(--azul); font-weight:600;}

.marcas-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px;}
.marca-card{background:#fff; border-radius:var(--radio); padding:20px; text-align:center; box-shadow:var(--sombra); font-weight:700; border:1px solid var(--borde);}
.marca-card:hover{border-color:var(--azul);}

/* ---------- GRID PRODUCTOS ---------- */
.productos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px;}

.producto-card{
  background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden;
  display:flex; flex-direction:column; border:1px solid var(--borde); position:relative; transition:transform .15s ease;
}
.producto-card:hover{transform:translateY(-3px);}
.producto-card .badges{position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2;}
.badge{padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; color:#fff;}
.badge-nuevo{background:var(--verde);}
.badge-usado{background:var(--naranja);}
.badge-descuento{background:var(--rojo);}
.producto-imagen{aspect-ratio:1/1; background:#f1f4f8; overflow:hidden;}
.producto-imagen img{width:100%; height:100%; object-fit:cover; loading:lazy;}
.producto-info{padding:16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.producto-info h3{font-size:16px; min-height:42px;}
.producto-info h3 a{color:var(--texto);}
.producto-caracteristicas{display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; color:var(--texto-suave);}
.producto-caracteristicas span{background:var(--fondo); padding:3px 8px; border-radius:6px; border:1px solid var(--borde);}
.producto-rating{font-size:13px; color:var(--texto-suave);}
.estrellas{color:var(--naranja); letter-spacing:2px;}
.producto-precios{margin-top:auto;}
.precio-antes{color:#9aa7b3; text-decoration:line-through; font-size:14px;}
.precio-actual{font-size:1.35rem; font-weight:800; color:var(--azul-oscuro);}
.ahorro{color:var(--verde); font-size:13px; font-weight:700;}
.stock-info{font-size:12.5px; color:var(--texto-suave);}
.btn-ver-producto{margin:0 16px 16px; background:var(--azul); color:#fff; text-align:center; padding:11px; border-radius:10px; font-weight:700; border:none; cursor:pointer;}
.btn-ver-producto:hover{background:var(--azul-oscuro);}

/* ---------- FILTROS CATALOGO ---------- */
.catalogo-layout{display:grid; grid-template-columns:260px 1fr; gap:26px;}
.filtros{background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:20px; align-self:start; position:sticky; top:16px;}
.filtros h3{font-size:15px; margin:16px 0 8px; text-transform:uppercase; letter-spacing:.5px; color:var(--texto-suave);}
.filtros h3:first-child{margin-top:0;}
.filtro-opcion{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:15px; cursor:pointer;}
.filtro-opcion input{width:18px; height:18px;}
.btn-filtrar{width:100%; margin-top:16px; background:var(--azul); color:#fff; border:none; padding:12px; border-radius:10px; font-weight:700; cursor:pointer;}
.resultado-info{margin-bottom:14px; color:var(--texto-suave); font-size:15px;}
.orden-select{padding:10px; border-radius:8px; border:1px solid var(--borde); font-size:15px;}

/* ---------- PAGINACION ---------- */
.paginacion{display:flex; gap:8px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.paginacion a, .paginacion span{padding:9px 15px; border-radius:8px; border:1px solid var(--borde); background:#fff;}
.paginacion .activa{background:var(--azul); color:#fff; border-color:var(--azul);}

/* ---------- PAGINA PRODUCTO ---------- */
.breadcrumb{font-size:13.5px; color:var(--texto-suave); margin:16px 0;}
.breadcrumb a{color:var(--azul);}
.producto-detalle{display:contents; grid-template-columns:1fr 1fr; gap:40px; background:#fff; padding:26px; border-radius:var(--radio); box-shadow:var(--sombra);}
.galeria-principal{aspect-ratio:1/1; background:#f1f4f8; border-radius:12px; overflow:hidden; margin-bottom:10px;}
.galeria-principal img{width:100%; height:100%; object-fit:cover;}
.galeria-miniaturas{display:flex; gap:8px; flex-wrap:wrap;}
.galeria-miniaturas img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:2px solid var(--borde); cursor:pointer;}
.galeria-miniaturas img.activa{border-color:var(--azul);}

.producto-titulo{font-size:1.7rem; margin-bottom:6px;}
.producto-sku{color:var(--texto-suave); font-size:13.5px;}
.precio-box{background:var(--azul-claro); border-radius:12px; padding:18px; margin:16px 0;}
.precio-box .precio-actual{font-size:2rem;}
.etiquetas-envio{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0;}
.etiqueta{background:var(--fondo); border:1px solid var(--borde); padding:7px 12px; border-radius:20px; font-size:13.5px; font-weight:600;}

.caracteristicas-tabla{width:100%; border-collapse:collapse; margin:16px 0;}
.caracteristicas-tabla td{padding:8px 6px; border-bottom:1px solid var(--borde); font-size:15px;}
.caracteristicas-tabla td:first-child{color:var(--texto-suave); width:45%;}

.acciones-compra{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}
.btn-primario{background:var(--azul); color:#fff; border:none; padding:15px 22px; border-radius:10px; font-weight:700; font-size:16px; cursor:pointer; flex:1;}
.btn-primario:hover{background:var(--azul-oscuro);}
.btn-whatsapp-producto{background:var(--verde); color:#fff; border:none; padding:15px 22px; border-radius:10px; font-weight:700; font-size:16px; cursor:pointer;}

.tabs{display:flex; gap:6px; margin:36px 0 0; border-bottom:2px solid var(--borde); flex-wrap:wrap;}
.tab-btn{padding:12px 18px; background:none; border:none; font-weight:700; cursor:pointer; color:var(--texto-suave); border-bottom:3px solid transparent;}
.tab-btn.activo{color:var(--azul); border-color:var(--azul);}
.tab-contenido{display:none; background:#fff; padding:24px; border-radius:0 0 var(--radio) var(--radio); box-shadow:var(--sombra);}
.tab-contenido.activo{display:block;}

.resena{border-bottom:1px solid var(--borde); padding:16px 0; display:flex; gap:14px;}
.resena img{width:56px; height:56px; border-radius:50%; object-fit:cover;}
.resena-header{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.resena-nombre{font-weight:700;}
.resena-fecha{color:var(--texto-suave); font-size:13px;}

.form-resena, .form-checkout{display:grid; gap:14px; max-width:560px;}
.form-resena input, .form-resena textarea,
.form-checkout input, .form-checkout select, .form-checkout textarea{
  padding:12px 14px; border:1px solid var(--borde); border-radius:10px; font-size:15px; width:100%; font-family:inherit;
}
.form-resena label, .form-checkout label{font-weight:700; font-size:14px; margin-bottom:4px; display:block;}
.select-estrellas{display:flex; gap:6px; font-size:28px; cursor:pointer;}
.select-estrellas span{color:#d0d7de;}
.select-estrellas span.sel{color:var(--naranja);}

/* ---------- MODAL COMPRA ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(10,20,35,.6); display:none; align-items:center; justify-content:center; z-index:1000; padding:16px;}
.modal-overlay.abierto{display:flex;}
.modal-box{background:#fff; border-radius:16px; max-width:640px; width:100%; max-height:92vh; overflow-y:auto; padding:26px; position:relative;}
.modal-cerrar{position:absolute; top:14px; right:16px; font-size:22px; background:none; border:none; cursor:pointer;}
.metodo-pago-opciones{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 20px;}
.metodo-pago-card{border:2px solid var(--borde); border-radius:12px; padding:16px; cursor:pointer; text-align:center; font-weight:700;}
.metodo-pago-card.seleccionado{border-color:var(--azul); background:var(--azul-claro);}
.resumen-pedido{background:var(--fondo); border-radius:12px; padding:16px; margin-top:16px; font-size:15px;}
.resumen-pedido .fila{display:flex; justify-content:space-between; padding:4px 0;}
.resumen-pedido .total{font-weight:800; font-size:1.2rem; border-top:1px solid var(--borde); margin-top:8px; padding-top:8px;}

/* ---------- GRACIAS ---------- */
.gracias-box{max-width:640px; margin:60px auto; background:#fff; border-radius:16px; padding:40px; text-align:center; box-shadow:var(--sombra);}
.gracias-icono{font-size:64px;}

/* ---------- PAGINAS ESTATICAS ---------- */
.pagina-estatica{max-width:860px; margin:0 auto; background:#fff; padding:34px; border-radius:var(--radio); box-shadow:var(--sombra);}
.pagina-estatica h1{margin-bottom:16px;}
.pagina-estatica h2{margin-top:26px;}

.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px;}

/* ---------- WHATSAPP FLOTANTE ---------- */
.whatsapp-flotante{
  position:fixed; bottom:22px; right:22px; background:#25d366; width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25); z-index:900;
}
.whatsapp-flotante:hover{transform:scale(1.06);}

/* ---------- FOOTER ---------- */
.site-footer{background:#0c1a2e; color:#c8d3e0; margin-top:60px; padding-top:40px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:26px; padding-bottom:26px;}
.site-footer h3{color:#fff; font-size:16px;}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.site-footer a:hover{color:#fff;}
.redes-sociales{display:flex; gap:14px; margin-top:12px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding:16px 0; text-align:center; font-size:13.5px;}

/* ---------- ALERTAS ---------- */
.alerta{padding:14px 18px; border-radius:10px; margin-bottom:16px; font-weight:600;}
.alerta-error{background:#fde8ea; color:#b3123a;}
.alerta-exito{background:#e6f7ec; color:#0f7a3d;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;}
  .catalogo-layout{grid-template-columns:1fr;}
  .producto-detalle{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contacto-grid{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .buscador{order:3; max-width:100%; width:100%; margin-top:10px;}
  .main-nav{flex-wrap:wrap;}
  .menu-toggle{display:block;}
  .categorias-nav{display:none;}
  .categorias-nav.abierta{display:block;}
  .footer-grid{grid-template-columns:1fr;}
  .metodo-pago-opciones{grid-template-columns:1fr;}
  
  .btn-toggle-filtros{ display:block; }
  .filtros{
    display:none;
    position:fixed;
    inset:0;
    z-index:950;
    overflow-y:auto;
    border-radius:0;
    max-height:100vh;
  }
  .filtros.abierto{ display:block; }
}

/* ---------- Botón de filtros para móvil ---------- */
.btn-toggle-filtros{
  display:none;
  width:100%;
  background:#fff;
  border:1px solid var(--borde);
  padding:12px 16px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  margin-bottom:14px;
  cursor:pointer;
}