/* =========================================================
   Capi Stream — styles.css
   Paleta neutra/azulada + layout de cards en 3 columnas.
   Incluye accesibilidad básica y responsive.
   ========================================================= */

/* --------------------------
   Paleta y tokens de diseño
   -------------------------- */
:root{
  --bg-900:#0b0f19;      /* fondo principal */
  --bg-800:#151c2e;      /* fondo secciones / tarjetas */
  --txt-100:#f0f3ff;     /* texto principal */
  --txt-70:#aeb9d6;      /* texto secundario */
  --brand-1:#22e59f;     /* verde turquesa (botones) */
  --brand-2:#14b47c;     /* verde más oscuro */
  --accent:#2979ff;      /* azul brillante para detalles */
  --border:#223050;      /* bordes suaves */
  --shadow: 0 14px 35px rgba(0,0,0,.45);
  --radius:18px;         /* radios base */
  --gap:28px;            /* separación de grillas */
}

/* Reset básico */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(41,121,255,.12), transparent 70%),
    radial-gradient(800px 600px at 0% 100%, rgba(20,180,124,.10), transparent 70%),
    var(--bg-900);
  color:var(--txt-100);
  line-height:1.45;
}

/* Contenedor máximo */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}

/* =========================
   HEADER / NAV SUPERIOR
   ========================= */
header{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(11,15,25,.9), rgba(11,15,25,.6));
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--txt-100);
  font-weight:800;font-size:1.25rem;letter-spacing:.3px;
}
.brand-logo{
  width:36px;height:36px;object-fit:contain;
  border-radius:8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.header-right{display:flex; align-items:center; gap:12px;}

.cta{
  display:inline-flex;gap:.75rem;align-items:center;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#04140d;border:none;border-radius:999px;padding:.9rem 1.2rem;
  font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(20,180,124,.35);
}
.cta span{
  background:#ffffff1a;border-radius:999px;padding:.25rem .6rem;color:#fff
}

/* Menú principal + hamburguesa (responsive) */
.main-nav{display:flex;gap:14px}
.main-nav a{
  color:var(--txt-100); text-decoration:none;
  padding:.55rem .8rem; border:1px solid var(--border); border-radius:999px;
  background:linear-gradient(180deg,#12192a,#0f1524);
}
.hamb{display:none;background:transparent;border:1px solid var(--border);
  color:var(--txt-100); border-radius:8px; padding:.4rem .6rem}
@media (max-width: 900px){
  .hamb{display:inline-block}
  .main-nav{display:none;position:absolute;right:20px;top:60px;flex-direction:column;background:#0e1422;padding:10px;border:1px solid var(--border);border-radius:12px}
  .main-nav.open{display:flex}
}

/* Selector rápido (WhatsApp/Linktree) */
.quick-select{position:relative}
.quick-select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:linear-gradient(180deg,#12192a,#0f1524);
  color:var(--txt-100);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.55rem 2.2rem .55rem .9rem; /* espacio para la flecha */
  font-weight:600;
  cursor:pointer;
}
.quick-select .caret{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--txt-70); font-size:.9rem;
}
.quick-select select:hover{ border-color:#2b3e68; }
.quick-select select:focus{ outline:none; box-shadow:0 0 0 3px rgba(41,121,255,.25); }
@media (max-width:760px){
  .header-right{ gap:8px; }
  .quick-select select{ padding:.5rem 2rem .5rem .8rem; }
}

/* Skip link accesible */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:16px;top:12px;width:auto;height:auto;z-index:1000;
  background:#fff;color:#000;padding:.5rem .75rem;border-radius:8px;
}

/* =========================
   HERO / INTRO
   ========================= */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
  padding:34px 0 10px;
}
.hero h1{
  margin:0 0 .6rem 0;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1.1;
  color:var(--txt-100);
}
.hero p{color:var(--txt-70);margin:.2rem 0 1rem 0}
.how{
  border:1px dashed var(--border);
  border-radius:16px;
  padding:18px;
  background:linear-gradient(180deg,#101523,#0e1422);
}
.how ol{margin:.6rem 0 0 1.1rem;color:var(--txt-70)}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }

/* =========================
   GRID DE PRODUCTOS
   Importante: hacemos que #grid y #grid > .grid
   actúen como contenedor de grilla. Así,
   aunque el JS inserte las .card directo en #grid,
   el layout sigue funcionando.
   ========================= */
#grid,
#grid > .grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:var(--gap);
  padding:30px 0 60px;
}

/* Tarjetas: 3 por fila en desktop (12/4 = 3) */
.card{
  grid-column:span 4;
  background:linear-gradient(180deg, var(--bg-800), #101522);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(0,0,0,.5);
}
.card::after{
  content:"";position:absolute;inset:auto -40% -40% auto;width:80%;height:80%;
  background: radial-gradient(60% 60% at 70% 30%, rgba(41,121,255,.2), transparent 70%);
  pointer-events:none;
}
.card h3{
  margin:0 0 8px 0;
  font-size:1.35rem;
  color:var(--txt-100);
}
.price{
  color:var(--accent);
  font-weight:700;
  margin-bottom:14px;
}

/* Imagen cuadrada (logo de la plataforma) */
.logo-box{
  display:grid;
  place-items:center;
  width:150px;
  height:150px;
  margin:10px auto 18px auto;   /* centrada */
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
}
.logo-box img{
  width:90%;
  height:90%;
  object-fit:contain;           /* nunca se deforma */
  transition: transform .3s;
}
.logo-box:hover img{transform:scale(1.07)}

/* Controles + botón comprar */
.controls{
  display:flex;align-items:center;justify-content:space-between;gap:8px
}
.qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
}
.qty button{
  background:transparent;
  border:none;
  color:var(--txt-100);
  width:34px;height:34px;
  cursor:pointer;
  font-size:18px;
}
.qty input{
  width:52px;text-align:center;
  background:#0f172a;
  border:none;
  color:#fff;
  height:34px;
  font-weight:700;
}
.add{
  flex:1; /* botón ancho pero sin desbordar */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  border:none;
  color:#04140d;
  border-radius:999px;
  padding:.65rem .9rem;
  cursor:pointer;
  font-weight:700;
  box-shadow:0 5px 20px rgba(20,180,124,.3);
  transition:opacity .2s;
}
.add:hover{opacity:.9}

/* =========================
   DRAWER DEL CARRITO
   ========================= */
.drawer{
  position:fixed;inset:0 0 0 auto;
  width:420px;max-width:100%;
  background:linear-gradient(180deg, #0b0f19, #101525);
  border-left:1px solid var(--border);
  transform:translateX(110%);
  transition:.32s ease;
  z-index:50;
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer header{
  position:relative;
  border-bottom:1px solid var(--border);
  background:transparent;
  padding:12px 16px;
}
.drawer header h2{margin:0;font-size:1.1rem;color:var(--txt-100)}
.drawer .content{padding:18px;flex:1;overflow:auto}
.empty{
  color:#9ab3ff88;
  text-align:center;
  padding:28px 8px;
}
.line{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;align-items:center;
  border-bottom:1px dashed var(--border);
  padding:10px 0;
}
.line .title{font-weight:600}
.line .subtotal{font-variant-numeric:tabular-nums;color:var(--accent)}
.line .rm{
  background:transparent;border:none;
  color:#ffb3b3;cursor:pointer;font-size:18px;
}
.totals{
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:#0d1422;
  display:grid;
  gap:8px;
}
.totals .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.buy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#04140d;
  border:none;
  border-radius:999px;
  padding:1rem 1.1rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(20,180,124,.35);
}
.mini{
  color:var(--txt-70);
  font-size:.85rem;
  text-align:center;
}
.close-x{
  position:absolute;
  right:10px;top:8px;
  background:transparent;
  border:none;
  color:var(--txt-70);
  cursor:pointer;
  font-size:22px;
}

/* =========================
   FOOTER
   ========================= */
footer .foot{
  display:flex;justify-content:space-between;gap:12px;
  padding:24px 0;color:var(--txt-70);
  font-size:.95rem;border-top:1px solid var(--border)
}
footer a{color:var(--txt-100)}

/* =========================
   RESPONSIVE: columnas
   ========================= */
@media (max-width: 1024px){
  /* 2 tarjetas por fila */
  #grid > .grid, #grid { grid-template-columns:repeat(12, minmax(0,1fr)); }
  .card{ grid-column:span 6; }
}
@media (max-width: 640px){
  /* 1 tarjeta por fila */
  .card{ grid-column:span 12; }
}