/* Estilos básicos para un formulario limpio y accesible */
:root {
  --bg: #0e0f12;
  --panel: #171923;
  --text: #e6e6e6;
  --muted: #9aa0a6;
  --primary: #4f46e5;
  --primary-700: #4338ca;
  --danger: #ef4444;
  --radius: 12px;
  --accent: #16a34a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: linear-gradient(180deg,var(--bg),#0b0c10 40%);
  color: var(--text);
  line-height: 1.4;
}

img { max-width: 100%; display: block; }

.container { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.section { padding: 56px 0; }
.section h2 { margin: 0 0 16px; font-size: 1.9rem; }
.section-desc { margin: 0 0 24px; opacity: .85; }

/* Header / nav */
.site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(6px); background: rgba(14,15,18,.85); border-bottom:1px solid #232635; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1100px; margin:0 auto; padding:10px 16px; }
.nav .brand { color: var(--text); font-weight:800; text-decoration:none; }
.nav-list { list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.nav-list a { color: var(--text); text-decoration:none; opacity:.85; position:relative; }
.nav-list a:hover, .nav-list a:focus { opacity:1; }
.cart-badge { background: var(--primary); color:#fff; border-radius: 20px; padding: 2px 6px; font-size:.7rem; margin-left:4px; }

/* Hero */
.hero-inner { display:grid; gap:32px; }
.hero-media img { border-radius:12px; border:1px solid #232635; }
.promo-video-wrapper { margin-top:16px; aspect-ratio:16 / 9; }
.promo-video { width:100%; height:100%; border:1px solid #232635; border-radius:12px; }
@media (min-width: 900px){ .hero-inner { grid-template-columns: 1.1fr 1fr; align-items:center; } }

/* Productos (cards flex) */
.cards { display:flex; flex-wrap:wrap; gap:20px; }
.card { flex:1 1 calc(50% - 20px); min-width:260px; max-width:300px; background:var(--panel); border:1px solid #232635; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
@media (min-width:1100px){ .card { flex-basis: calc(25% - 20px); } }
.card img { width:100%; height:180px; object-fit:contain; background:#fff; }
.card-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.card-body h3 { font-size:1rem; margin:0; height:2.4em; overflow:hidden; }
.truncate { font-size:.85rem; max-height:4.2em; overflow:hidden; opacity:.8; }
.price-row { display:flex; align-items:center; justify-content:space-between; }
.price { font-weight:700; }
.btn, .btn-outline { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; background:var(--primary); color:#fff; border-radius:8px; text-decoration:none; font-size:.85rem; border:0; cursor:pointer; }
.btn:hover { background: var(--primary-700); }
.btn-outline { background:transparent; border:1px solid var(--primary); color:var(--primary); }
.btn-outline:hover { background: var(--primary); color:#fff; }
.add-to-cart { font-weight:600; }

/* Carrito */
.cart-section { background: linear-gradient(180deg,#12141b,#101116); border-top:1px solid #232635; }
.cart-items { display:flex; flex-direction:column; gap:14px; }
.cart-item { display:grid; grid-template-columns: 70px 1fr auto; gap:12px; background:var(--panel); border:1px solid #232635; border-radius:12px; padding:10px; align-items:center; }
.cart-thumb { width:70px; height:70px; object-fit:contain; background:#fff; border-radius:8px; }
.cart-info h4 { margin:0 0 4px; font-size:.95rem; }
.cart-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:.75rem; align-items:center; }
.qty-input { width:60px; padding:4px; background:#0f111a; border:1px solid #2a2f45; color:var(--text); border-radius:8px; }
.remove-btn { background:#232635; color:#fff; border:0; font-size:1.2rem; width:36px; height:36px; border-radius:8px; cursor:pointer; }
.remove-btn:hover { background:#ef4444; }
.cart-summary { margin-top:24px; display:flex; align-items:center; justify-content:space-between; background:var(--panel); border:1px solid #232635; padding:12px 16px; border-radius:12px; }
.cart-empty { opacity:.7; font-style:italic; }

/* Reseñas grid */
.reviews-section .reviews-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px){ .reviews-section .reviews-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .reviews-section .reviews-grid { grid-template-columns:repeat(4,1fr); } }
.review { background:var(--panel); border:1px solid #232635; border-radius:12px; padding:16px; display:grid; gap:10px; }
.review-header { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.avatar { width:44px; height:44px; border-radius:50%; border:1px solid #2a2f45; object-fit:cover; }
.stars { color:gold; font-size:.85rem; }
.review-text { font-size:.85rem; opacity:.85; }

/* Formulario contacto */
form { background:var(--panel); border:1px solid #232635; border-radius:var(--radius); padding:20px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.form-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .form-grid { grid-template-columns:1fr 1fr; } .form-grid .full { grid-column:1 / -1; } }
.field label { font-weight:600; margin-bottom:8px; display:block; }
input[type=text], input[type=email], textarea { width:100%; padding:12px 14px; border:1px solid #2a2f45; background:#0f111a; color:var(--text); border-radius:10px; outline:none; transition:border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.2); }
.error { color: var(--danger); font-size:.7rem; margin-top:4px; display:block; }
#status { margin-top:12px; color: var(--muted); }

/* Utilidades */
:target { scroll-margin-top: 72px; }
.error-text { color: var(--danger); }

/* Footer */
.site-footer { padding:40px 0 60px; text-align:center; font-size:.75rem; opacity:.7; }

@media (max-width:480px){ .nav-list { gap:12px; } .card { flex:1 1 100%; max-width:100%; } .cart-item { grid-template-columns: 60px 1fr auto; } }