/* Beatlink — Estilos base (Montserrat + paleta adaptada a icono) */
@font-face{font-family:Montserrat;src:local("Montserrat"),local("Montserrat-Regular");font-weight:400;}
@font-face{font-family:Montserrat;src:local("Montserrat"),local("Montserrat-Bold");font-weight:700;}
:root{
  --blue:#1DA1FF;    /* Azul principal del icono */
  --blue-2:#09C3D5;  /* Cian del arco */
  --green:#7ED321;   /* Verde lima de los nodos */
  --black:#0D0D0D;
  --gray:#F5F7FA;
  --white:#FFFFFF;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Montserrat,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--black);background:var(--white)}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #e9eef5}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:70px;width:auto} /* Logo horizontal mucho más grande */
.brand span{font-weight:800;letter-spacing:.5px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{font-weight:600}
.cta{background:var(--blue);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--shadow)}
.cta.secondary{background:#e9f3ff;color:var(--blue);box-shadow:none}
.cta:hover{filter:brightness(.95);text-decoration:none}

/* Hero */
.hero{position:relative;background:linear-gradient(180deg,rgba(13,13,13,.65),rgba(13,13,13,.65)), url('../img/hero-bg.jpg') center/cover no-repeat;color:#fff}
.hero .wrap{padding:90px 0}
h1{font-size:46px;line-height:1.1;margin:0 0 16px;font-weight:800}
.hero p{font-size:18px;max-width:750px;margin:0 0 26px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}

/* Secciones */
.section{padding:70px 0;background:var(--white)}
.section.alt{background:var(--gray)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card h3{margin:0 0 10px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#e9f3ff;color:var(--blue);font-weight:700;font-size:12px;margin-bottom:10px}

/* Ajuste para iconos de tarjetas */
.card img {
  max-width: 100px;  /* tamaño visual grande */
  height: auto;
  margin-bottom: 10px;
}

/* Precios */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:2px solid transparent}
.plan.highlight{border-color:var(--blue)}
.plan h3{margin:0 0 6px}
.price{font-size:34px;font-weight:800;margin:10px 0}
ul.features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
ul.features li::before{content:"✓";margin-right:8px;color:var(--green);font-weight:800}

/* Cómo funciona */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}

/* Contacto */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form textarea, .form select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid #dae3ee;background:#fff;font:inherit
}
.form textarea{min-height:140px;resize:vertical}
.form .full{grid-column:1/-1}

/* Footer */
.footer{background:#0f1320;color:#cfd6e6}
.footer .wrap{padding:50px 0}
.footer a{color:#cfd6e6}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
.footer img{height:70px;width:auto} /* Logo horizontal más grande en footer */
.footer small{display:block;margin-top:22px;color:#9aa7bd}

/* Utilidades */
.center{text-align:center}
.kicker{color:var(--blue-2);font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:12px}
.btn-lg{padding:14px 18px;border-radius:12px;font-weight:800}
.btn-outline{border:2px solid var(--blue);color:var(--blue);background:transparent}
.btn-outline:hover{background:#e9f3ff;text-decoration:none}

/* Responsive */
@media (max-width: 940px){
  .grid-3, .pricing, .steps, .footer .cols{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  h1{font-size:36px}
  .brand img{height:120px} /* Ajuste para móviles */
  .footer img{height:120px}
}

/* ==============================
   ADMIN PANEL
   ============================== */

body {
  font-family: 'Poppins', sans-serif;
  background:#000;
  color:#fff;
}

.admin-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem;
  background:#111;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}

.admin-header .logo {
  height:40px;
}

.admin-header nav a {
  margin-left:1rem;
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.admin-header nav a:hover { color:#1DB954; }

.admin-main {
  flex:1;
  padding:2rem;
}

.admin-footer {
  background:#111;
  padding:1rem;
  text-align:center;
  font-size:0.9rem;
  color:#cfd2d6;
}

/* Login */
.login-container {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:70vh;
}

.login-box {
  background:#111;
  padding:2rem;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.6);
  width:100%;
  max-width:400px;
  text-align:center;
}

.login-box h2 {
  margin-bottom:1.5rem;
  font-weight:600;
}

.login-box label {
  display:block;
  text-align:left;
  margin:0.5rem 0 0.2rem;
}

.login-box input {
  width:100%;
  padding:0.6rem;
  border-radius:8px;
  border:1px solid #333;
  margin-bottom:1rem;
  background:#222;
  color:#fff;
}

.login-box button {
  width:100%;
  padding:0.7rem;
  background:#1DB954;
  border:none;
  border-radius:8px;
  font-weight:600;
  color:#fff;
  cursor:pointer;
}

.login-box button:hover {
  background:#17a443;
}

.login-box .forgot {
  margin-top:1rem;
}

.login-box .forgot a {
  color:#1DB954;
  text-decoration:none;
}

/* ====== ADMIN / AUTH LOOK & FEEL (Beatlink) ====== */
:root{
  --bl-bg:#000;
  --bl-panel:#111;
  --bl-text:#fff;
  --bl-muted:#cfd2d6;
  --bl-border:#2a2a2a;
  --bl-accent:#1DB954;
  --bl-accent-strong:#17a443;
  --bl-error-bg:#fde8e8;
  --bl-error-text:#7a2222;
  --bl-shadow:0 8px 28px rgba(0,0,0,.55);
}

.bl-body-dark{
  background:var(--bl-bg);
  color:var(--bl-text);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Header admin */
.bl-admin-header{
  display:flex;align-items:center;justify-content:center;
  padding:16px 20px;background:#111;border-bottom:1px solid var(--bl-border);
  position:sticky;top:0;z-index:10;
}
.bl-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bl-text);}
.bl-brand__logo{height:60px}
.bl-brand__name{font-weight:600;letter-spacing:.2px}

/* Footer */
.bl-admin-footer{
  margin-top:auto;background:#111;border-top:1px solid var(--bl-border);
  padding:14px 18px;text-align:center;color:#fff;font-size:.95rem;
}

/* Auth layout */
.bl-auth{
  display:flex;align-items:center;justify-content:center;
  padding:48px 16px;
}
.bl-auth__card{
  width:100%;max-width:420px;background:var(--bl-panel);
  border:1px solid var(--bl-border);border-radius:14px;
  padding:28px;box-shadow:var(--bl-shadow);text-align:center;
}
.bl-auth__logo{height:48px;margin-bottom:8px}
.bl-auth__title{margin:6px 0 18px;font-weight:600;font-size:1.35rem}

/* Form */
.bl-form{ text-align:left; }
.bl-label{ display:block; margin:10px 0 6px; font-weight:600; }
.bl-input{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--bl-border);
  background:#1a1a1a;color:var(--bl-text);outline:none;
}
.bl-input:focus{ border-color:#2e8f58; box-shadow:0 0 0 3px rgba(29,185,84,.18); }

/* Buttons & links */
.bl-btn{
  width:100%;padding:12px 14px;border-radius:10px;border:0;cursor:pointer;
  font-weight:700;letter-spacing:.2px;margin-top:14px;
}
.bl-btn--primary{ background:var(--bl-accent); color:#fff; }
.bl-btn--primary:hover{ background:var(--bl-accent-strong); }

.bl-link{ color:var(--bl-accent); text-decoration:none; }
.bl-link:hover{ text-decoration:underline; }

/* Messages */
.bl-alert{
  padding:12px 14px;border-radius:10px;margin-bottom:12px;border:1px solid transparent;
  font-weight:500;text-align:left;
}
.bl-alert--error{ background:var(--bl-error-bg); color:var(--bl-error-text); border-color:#f5c2c7; }

/* Meta text */
.bl-auth__meta{ margin-top:14px; color:var(--bl-muted); font-size:.95rem; }

/* ================================
   FIX COMERCIAL (sin tocar admin)
   Aplica a páginas SIN .bl-body-dark
   ================================ */

body:not(.bl-body-dark) {
  color: #0D0D0D; /* texto principal */
  font-family: Montserrat, system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* Cabecera (fondo blanco translúcido, enlaces oscuros) */
body:not(.bl-body-dark) .header { 
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid #e9eef5;
}
body:not(.bl-body-dark) .menu a {
  color: #0D0D0D;
  font-weight: 600;
}
body:not(.bl-body-dark) .menu a:hover { color: #1DA1FF; }

/* Secciones base */
body:not(.bl-body-dark) .section {
  background: #FFFFFF;
  color: #0D0D0D;
}
body:not(.bl-body-dark) .section.alt {
  background: #F5F7FA;
  color: #0D0D0D;
}

/* Tarjetas y pasos (fondos blancos, texto oscuro) */
body:not(.bl-body-dark) .card,
body:not(.bl-body-dark) .step,
body:not(.bl-body-dark) .plan {
  background: #FFFFFF;
  color: #0D0D0D;
  border-color: #e9eef5;
}

/* Títulos y tipografía */
body:not(.bl-body-dark) h1,
body:not(.bl-body-dark) h2,
body:not(.bl-body-dark) h3,
body:not(.bl-body-dark) p,
body:not(.bl-body-dark) li,
body:not(.bl-body-dark) label {
  color: #0D0D0D;
}

/* Enlaces y acentos (azul marca) */
body:not(.bl-body-dark) a { color: #1DA1FF; }
body:not(.bl-body-dark) a:hover { text-decoration: underline; }

/* Botones comerciales */
body:not(.bl-body-dark) .cta { 
  background: #1DA1FF; 
  color:#fff; 
}
body:not(.bl-body-dark) .cta.secondary { 
  background:#e9f3ff; 
  color:#1DA1FF; 
}
body:not(.bl-body-dark) .btn-outline { 
  border-color:#1DA1FF; 
  color:#1DA1FF; 
}
body:not(.bl-body-dark) .btn-outline:hover { 
  background:#e9f3ff; 
}

/* Hero: mantener texto blanco sobre overlay oscuro */
body:not(.bl-body-dark) .hero { color:#fff; }
body:not(.bl-body-dark) .hero h1,
body:not(.bl-body-dark) .hero p { color:#fff; }

/* Formulario de contacto: inputs claros */
body:not(.bl-body-dark) .form input,
body:not(.bl-body-dark) .form textarea,
body:not(.bl-body-dark) .form select {
  background:#fff;
  color:#0D0D0D;
  border:1px solid #dae3ee;
}

/* Badges, precios y detalles */
body:not(.bl-body-dark) .badge { 
  background:#e9f3ff; color:#1DA1FF; 
}
body:not(.bl-body-dark) .plan.highlight { 
  border-color:#1DA1FF; 
}
body:not(.bl-body-dark) .price { color:#0D0D0D; }

/* Footer: mantener franja oscura */
body:not(.bl-body-dark) .footer { 
  background:#0f1320; 
  color:#cfd6e6; 
}
body:not(.bl-body-dark) .footer a { color:#cfd6e6; }

/* Imágenes de logos en header/footer ya correctas en HTML:
   - header: ..._black.png
   - footer: ..._white.png
*/