/* ====== Variables de color ====== */
:root{
 --accent: #F2C811;   /* Power BI (Amarillo) */
 --excel:  #217346;   /* Excel (Verde) */
 --sql:    #0078D4;   /* SQL/Azure (Azul) */
 --tableau: #2e75b6;  /* NUEVO: Tableau (Azul especial) */
 --ink:    #0F172A;   /* Texto principal */
 --bg:     #F8FAFC;   /* Fondo */
}

/* Ocultar banner del tema */
.page-header { display:none; }
body { background: var(--bg); color: var(--ink); }

/* ====== HERO ====== */
.hero{
 padding: 3rem 1.5rem;
 border-radius: 16px;
 text-align: center;
 color: #fff;
 background: 
   linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.18)), 
   linear-gradient(135deg, var(--sql), var(--excel));
 box-shadow: 0 14px 28px rgba(0,0,0,.16);
 border: 2px solid rgba(255,255,255,.35);
}

.hero h1 { margin: .2rem 0 1rem 0; color: #fff; }
.hero p  { color:#f5faff; }

/* ====== Grid Cards ====== */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:16px; margin-top: 1rem; }

.card{
 background:#fff; border-radius:12px; padding:1rem 1.1rem;
 border:1px solid #e6e6e6; box-shadow:0 12px 15px rgba(0,0,0,.06);
 position:relative; overflow:hidden;
}

/* Barra superior por defecto (Amarilla para Power BI) */
.card::before{
 content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--accent);
}

/* ====== Clase Especial para Tableau ====== */
.card.card-tableau::before {
  background: var(--tableau); /* Cambia la barra a azul Tableau */
}

.card.card-tableau {
  border: 1px solid rgba(46, 117, 182, 0.2);
}

.card h3{ margin:.2rem 0 .6rem 0; color:#0b1220; }
.card p { color:#475569; }

/* Estilo para links dentro de la card de Tableau */
.card-tableau a {
  color: var(--tableau);
  text-decoration: none;
}

.card-tableau a:hover {
  text-decoration: underline;
}

/* ====== Botones ====== */
.btn{
 display:inline-block; padding:.6rem 1rem; border-radius:10px; text-decoration:none;
 border:1px solid var(--sql);
}

.btn.primary{
 background: var(--accent); color:#141414;
 border-color: #E0B90F;
}

.btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* ====== Secciones & Footer ====== */
.section { margin: 2.2rem 0; }
h2 { color:#0b1220; }
footer { margin-top:2.5rem; font-size:.9rem; color:#667085; text-align: center; padding-bottom: 2rem; }