/* ============================================================
   shared.css — Estilos comunes de Starlink Iquitos
   Variables, layout base, header/nav y hero compartidos
   por todas las páginas del sitio.
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --card-bg:#111111;
  --card-border:#2a2a2a;
  --text-light:#ffffff;
  --text-dim:#a3a3a3;
  --accent:#ffffff; /* cada página puede sobreescribirla, ej. solar usa #f5c451 */
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--text-light);
  font-family:'Helvetica Neue',Arial,sans-serif;
  min-height:100vh;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:-1;
}

/* ===== Header / Nav ===== */
header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:1.5rem 3rem;
  border-bottom:1px solid #1a1a1a;
  background:rgba(0,0,0,0.4);
}
.header-left{
  display:flex;
  align-items:center;
  gap:0.9rem;
  justify-self:start;
}
.back-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid #2a2a2a;
  background:rgba(255,255,255,0.04);
  color:#ddd;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .2s, color .2s, background .2s;
}
.back-btn svg{width:17px;height:17px;}
.back-btn:hover{border-color:#666;color:#fff;}

.logo{
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:2px;
  text-decoration:none;
  color:inherit;
}
.logo span{color:#666;}

nav.main-nav{
  display:flex;
  gap:2.5rem;
  font-size:0.85rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#ddd;
}
nav.main-nav a{color:inherit;text-decoration:none;}
nav.main-nav a.active{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:1.1rem;
  justify-self:end;
}
.whatsapp-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s;
  flex-shrink:0;
}
.whatsapp-btn svg{width:19px;height:19px;}
.whatsapp-btn:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 16px -4px rgba(37,211,102,0.6);
}
.menu-icon{font-size:1.4rem;cursor:pointer;display:none;}

/* Menú móvil generado por shared.js */
nav.mobile-nav{
  display:none;
  flex-direction:column;
  background:rgba(0,0,0,0.92);
  border-bottom:1px solid #1a1a1a;
}
nav.mobile-nav.open{display:flex;}
nav.mobile-nav a{
  color:#ddd;
  text-decoration:none;
  padding:1rem 1.5rem;
  border-bottom:1px solid #1a1a1a;
  font-size:0.85rem;
  letter-spacing:1px;
  text-transform:uppercase;
}
nav.mobile-nav a.active{color:var(--accent);}

/* ===== Hero genérico ===== */
.hero{
  text-align:center;
  padding:5rem 1rem 2rem;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-200px;left:50%;
  transform:translateX(-50%);
  width:900px;height:900px;
  background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events:none;
}
.hero .eyebrow{
  font-size:0.8rem;
  letter-spacing:2px;
  color:#888;
  text-transform:uppercase;
  margin-bottom:0.8rem;
  font-weight:700;
  position:relative;
}
.hero h1{
  font-size:3rem;
  font-weight:800;
  letter-spacing:1px;
  position:relative;
}
.hero p{
  color:var(--text-dim);
  font-size:1rem;
  max-width:680px;
  margin:1rem auto 0;
  position:relative;
}

@media(max-width:800px){
  nav.main-nav{display:none;}
  .menu-icon{display:block;}
  .back-btn{display:flex;}
  header{padding:1.2rem 1.5rem;}
  .hero h1{font-size:2.2rem;}
}

/* ===== Tarjeta genérica reutilizable (.card) ===== */
.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:2rem;
  transition:border-color .2s,transform .2s;
  display:flex;flex-direction:column;
}
.card:hover{border-color:#555;transform:translateY(-3px);}
.card .tag{
  display:inline-block;width:fit-content;
  font-size:0.72rem;letter-spacing:1px;text-transform:uppercase;
  color:#aaa;border:1px solid #333;border-radius:20px;
  padding:0.25rem 0.8rem;margin-bottom:1rem;
}
.card h3{font-size:1.4rem;font-weight:800;margin-bottom:0.6rem;}
.card p{color:var(--text-dim);font-size:0.88rem;line-height:1.6;margin-bottom:1rem;flex-grow:1;}
.card ul{list-style:none;font-size:0.88rem;line-height:1.9;color:#ddd;margin-bottom:1.5rem;}
.card ul li{padding-left:1.4rem;position:relative;}
.card ul li::before{content:"✔";color:#fff;position:absolute;left:0;font-size:0.75rem;}
.card .cta-btn{
  display:block;text-align:center;background:#fff;color:#111;
  font-weight:700;font-size:0.85rem;letter-spacing:0.5px;
  padding:0.8rem;border-radius:8px;text-decoration:none;
  transition:opacity .2s;margin-top:auto;
}
.card .cta-btn:hover{opacity:0.85;}
.card .price{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:1rem;}
.card .price span{font-size:0.88rem;color:var(--text-dim);font-weight:400;}

/* ===== Tabs genéricos ===== */
.tab-bar{display:flex;justify-content:center;gap:0.6rem;margin-bottom:3rem;flex-wrap:wrap;}
.tab-bar button{
  background:transparent;border:1px solid #333;color:#bbb;
  padding:0.7rem 1.8rem;border-radius:8px;font-size:0.85rem;
  letter-spacing:0.5px;font-weight:600;cursor:pointer;transition:all .2s;
}
.tab-bar button.active{background:#fff;color:#111;border-color:#fff;}
.tab-group{display:none;}
.tab-group.active{display:block;}


/* Disuasión visual contra arrastre/guardado casual de medios. */
img, video {
  -webkit-user-drag: none;
  user-drag: none;
}