/* ====== Base ====== */
* { box-sizing: border-box; }
body { font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; color:#333; background:#fff; line-height:1.6; }
a { color: inherit; }

/* ====== Header / Nav ====== */
header { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1000; }
header nav { display:flex; justify-content:space-between; align-items:center; padding:14px 5%; gap:24px; }
header .logo img { height:64px; }
header nav a { color:#000; margin:0 14px; text-decoration:none; font-weight:600; transition:color .2s ease; }
header nav a:hover { color:#0077ff; }

/* ====== HERO con imagen de fondo en el recuadro ====== */
.hero {
  background: url('img/hero-bg.jpg') center center / cover no-repeat;
  position: relative;
  text-align: center;
  padding: 80px 20px;           /* altura del recuadro */
  min-height: 360px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.15));
  pointer-events:none;
}
.hero-content {
  position: relative; z-index:1;
  background: rgba(255,255,255,0.86);
  display: inline-block;
  padding: 28px 34px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  max-width: 920px;
}
h1.hero-title { font-size: clamp(26px, 4vw, 44px); margin:0 0 6px; color:#111; }
.hero-sub { margin:0 0 14px; color:#333; opacity:.9; }

.cta-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cta-btn { background:#0077ff; color:#fff; padding:12px 22px; border-radius:8px; text-decoration:none; font-weight:700; display:inline-block; transition:transform .15s ease, background .2s ease; }
.cta-btn:hover { background:#0056b3; transform:translateY(-1px); }

/* ====== Sections ====== */
section { padding:60px 5%; }
section h2 { text-align:center; margin:0 0 22px; font-size:2rem; color:#222; }
section p.max { max-width:900px; margin:0 auto; }

/* ====== Cursos (mismo tamaño) ====== */
.cursos { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.curso-card { position:relative; overflow:hidden; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.08); background:#fff; }
.curso-media { width:100%; aspect-ratio: 4 / 5; background:#eee; }
.curso-media img { width:100%; height:100%; object-fit:cover; display:block; }
.curso-info { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; background:rgba(0,0,0,0.45); opacity:0; transition:opacity .25s ease; text-align:center; padding:18px; }
.curso-card:hover .curso-info { opacity:1; }

/* ====== Testimonios ====== */
.testimonios { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.testimonio { padding:22px; border:1px solid #eee; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.06); background:#fff; }
.testimonio img { width:84px; height:84px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 10px; }
.testimonio .name { font-weight:700; margin-top:8px; text-align:center; }
.testimonio .stars { color:#f5a623; letter-spacing:1px; font-size:14px; margin-bottom:6px; text-align:center; }

/* ====== FAQ ====== */
.faq { max-width:1000px; margin:0 auto; }
.faq-item { margin:12px 0; border:1px solid #eee; border-radius:10px; overflow:hidden; }
.faq-q { background:#f7f7f7; padding:14px 16px; cursor:pointer; font-weight:700; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; background:#fff; padding:0 16px; }
.faq-a.open { padding:14px 16px; max-height:900px; }

/* ====== Certificaciones ====== */
.certificaciones { display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; }
.certificaciones img { height:60px; width:160px; object-fit:contain; }

/* ====== Contacto ====== */
.contacto-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:start; }
@media (max-width: 900px){ .contacto-grid { grid-template-columns:1fr; } }
.card { background:#fafafa; border:1px solid #eee; border-radius:12px; padding:18px; }
.list { list-style:none; padding:0; margin:0; }
.list li { margin:10px 0; }
.social-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.social-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid #ddd; border-radius:999px; text-decoration:none; font-weight:700; background:#fff; transition:transform .15s ease, border-color .2s ease; }
.social-btn:hover { transform:translateY(-1px); border-color:#0077ff; }

/* ====== Footer ====== */
footer { background:#000; color:#fff; text-align:center; padding:24px; }
footer a { color:#8ab9ff; text-decoration:none; margin:0 8px; }
footer a:hover { text-decoration:underline; }

/* ====== WhatsApp flotante ====== */
.whatsapp-float { position:fixed; right:18px; bottom:18px; background:#25D366; color:#fff; border-radius:999px; padding:12px 18px; font-weight:800; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.18); z-index:1000; }