:root{
    --ink:#16232A;
    --steel:#2B4351;
    --steel-light:#3E5C6C;
    --brass:#C08A34;
    --brass-light:#E0B268;
    --safety:#D14A22;
    --cream:#F3EEE2;
    --cream-dim:#E7E0CF;
    --teal:#0E4B4F;
    --line: rgba(22,35,42,0.14);
    --display: 'Oswald', sans-serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:0.02em;margin:0;line-height:1.05;}
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--safety);
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--safety);display:inline-block;}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:var(--cream);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1120px;margin:0 auto;}
  .brand{font-family:var(--display);font-size:20px;letter-spacing:0.04em;text-decoration:none;display:flex;align-items:center;gap:10px;}
  .brand .dot{width:10px;height:10px;background:var(--safety);border-radius:1px;transform:rotate(45deg);display:inline-block;}
  .nav-links{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500;}
  .nav-links a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .15s;}
  .nav-links a:hover{border-color:var(--safety);}
  .nav-cta{
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    background:var(--ink);color:var(--cream);padding:10px 18px;text-decoration:none;
  }
  .menu-btn{display:none;background:none;border:2px solid var(--ink);width:40px;height:40px;cursor:pointer;}

  /* ---------- Hero: muster board ---------- */
  .hero{
    background:var(--steel);
    color:var(--cream);
    position:relative;
    overflow:hidden;
    border-bottom:6px solid var(--safety);
  }
  .hero .wrap{padding:88px 24px 64px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:end;}
  .hero-stripe{
    position:absolute;top:0;left:0;right:0;height:10px;
    background:repeating-linear-gradient(45deg,var(--safety) 0 18px,var(--cream) 18px 36px);
    opacity:.9;
  }
  .hero h1{font-size:clamp(40px,6vw,68px);color:#fff;}
  .hero h1 .accent{color:var(--brass-light);}
  .hero p.lede{font-family:var(--body);font-size:18px;color:rgba(243,238,226,.82);max-width:46ch;margin:20px 0 32px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    padding:14px 26px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
    border:1px solid transparent;transition:transform .15s;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--safety);color:#fff;}
  .btn-ghost{border-color:rgba(243,238,226,.5);color:var(--cream);}

  /* muster plaque panel */
  .plaque{
    background:var(--cream);
    color:var(--ink);
    padding:26px 24px;
    position:relative;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
  }
  .plaque::before{
    content:"MUSTER STATION 04";
    position:absolute;top:-13px;left:20px;
    background:var(--safety);color:#fff;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    padding:4px 10px;
  }
  .plaque-row{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
  .plaque-row:last-child{border-bottom:none;}
  .plaque-icon{width:34px;height:34px;flex:none;color:var(--teal);}
  .plaque-row strong{font-family:var(--display);font-size:14px;letter-spacing:.03em;text-transform:uppercase;display:block;}
  .plaque-row span{font-size:13px;color:var(--steel-light);}

  /* ---------- Trust bar ---------- */
  .trustbar{background:var(--ink);color:var(--cream-dim);}
  .trustbar .wrap{display:flex;flex-wrap:wrap;gap:40px;padding:22px 24px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
  .trustbar span{color:var(--brass-light);margin-right:8px;}

  /* ---------- Section base ---------- */
  section{padding:88px 0;}
  .section-head{max-width:640px;margin-bottom:52px;}
  .section-head h2{font-size:clamp(28px,4vw,40px);}

  /* ---------- Courses ---------- */
  .courses{background:var(--cream);}
  .course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
  .course-card{background:var(--cream);padding:36px;position:relative;}
  .course-tag{
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--safety);display:inline-block;margin-bottom:18px;
    border:1px solid var(--safety);padding:3px 8px;
  }
  .course-card h3{font-size:24px;margin-bottom:10px;}
  .course-card p{color:var(--steel-light);font-size:14.5px;margin:0 0 22px;max-width:42ch;}
  .course-meta{display:flex;gap:20px;font-family:var(--mono);font-size:12px;color:var(--steel);margin-bottom:22px;}
  .course-link{
    font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;border-bottom:2px solid var(--safety);padding-bottom:3px;
  }

  /* ---------- Why ---------- */
  .why{background:var(--teal);color:var(--cream);}
  .why .section-head h2{color:#fff;}
  .why .eyebrow{color:var(--brass-light);}
  .why .eyebrow::before{background:var(--brass-light);}
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(243,238,226,.18);border-top:1px solid rgba(243,238,226,.25);border-bottom:1px solid rgba(243,238,226,.25);}
  .stat{background:var(--teal);padding:32px 8px 8px;}
  .stat b{font-family:var(--display);font-size:42px;display:block;color:var(--brass-light);}
  .stat span{font-size:13.5px;color:rgba(243,238,226,.75);}

  /* ---------- Testimonial ---------- */
  .testimonial{background:var(--cream-dim);}
  .testimonial .wrap{max-width:760px;text-align:center;}
  .testimonial blockquote{font-family:var(--display);font-weight:400;font-size:clamp(22px,3vw,30px);line-height:1.35;margin:0 0 24px;text-transform:none;letter-spacing:0;}
  .stars{color:var(--safety);letter-spacing:3px;margin-bottom:18px;font-size:15px;}
  .testimonial cite{font-family:var(--mono);font-size:13px;font-style:normal;color:var(--steel-light);}

  /* ---------- FAQ ---------- */
  .faq-item{border-top:1px solid var(--line);}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 0;font-family:var(--display);font-size:17px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);
  }
  .faq-q .plus{font-family:var(--mono);font-size:20px;color:var(--safety);transition:transform .2s;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .faq-a p{margin:0 0 22px;color:var(--steel-light);max-width:60ch;font-size:15px;}

  /* ---------- CTA / footer ---------- */
  .cta-band{background:var(--safety);color:#fff;text-align:center;}
  .cta-band h2{color:#fff;font-size:clamp(26px,4vw,38px);margin-bottom:20px;}
  .cta-band .btn-ghost{border-color:rgba(255,255,255,.6);}
  .cta-band .btn-primary{background:var(--ink);}

  footer{background:var(--ink);color:var(--cream-dim);padding:56px 0 28px;}
  .footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;border-bottom:1px solid rgba(243,238,226,.15);padding-bottom:32px;margin-bottom:24px;}
  .footer-grid .brand{color:#fff;}
  footer a{text-decoration:none;color:var(--cream-dim);font-size:14px;}
  footer a:hover{color:var(--brass-light);}
  .footer-cols{display:flex;gap:60px;flex-wrap:wrap;}
  .footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-light);margin:0 0 14px;}
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .fineprint{font-family:var(--mono);font-size:11.5px;color:rgba(243,238,226,.45);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr;padding-top:56px;}
    .nav-links{display:none;}
    .menu-btn{display:block;}
    .course-grid{grid-template-columns:1fr;}
    .stat-row{grid-template-columns:1fr;}
  }

/* ---------- Course detail page ---------- */
.course-hero{
  background:var(--steel);
  color:var(--cream);
  border-bottom:6px solid var(--safety);
  padding:64px 0 48px;
}
.course-hero .back-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(243,238,226,.75);text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
}
.course-hero .back-link:hover{color:var(--brass-light);}
.course-hero h1{color:#fff;font-size:clamp(30px,5vw,48px);margin-bottom:14px;}
.course-hero .sub{font-size:16px;color:rgba(243,238,226,.8);max-width:56ch;}
.course-hero .meta-strip{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-light);}
.course-hero .meta-strip div{display:flex;flex-direction:column;gap:4px;}
.course-hero .meta-strip span{color:rgba(243,238,226,.65);}

.course-body{background:var(--cream);padding:64px 0;}
.course-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start;}
.course-layout h2{font-size:20px;margin:0 0 18px;}
.course-layout p{color:var(--steel-light);font-size:15px;margin:0 0 20px;max-width:62ch;}
.obj-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:12px;}
.obj-list li{display:flex;gap:12px;font-size:14.5px;color:var(--ink);align-items:flex-start;}
.obj-list li::before{content:"";width:8px;height:8px;background:var(--safety);margin-top:6px;flex:none;transform:rotate(45deg);}

.enroll-card{
  background:var(--ink);color:var(--cream);
  padding:32px 28px;position:sticky;top:100px;
}
.enroll-card .price{font-family:var(--display);font-size:36px;color:var(--brass-light);margin-bottom:4px;}
.enroll-card .price-note{font-family:var(--mono);font-size:11.5px;color:rgba(243,238,226,.55);margin-bottom:24px;}
.enroll-card .btn-primary{width:100%;justify-content:center;margin-bottom:12px;}
.enroll-card .btn-ghost{width:100%;justify-content:center;border-color:rgba(243,238,226,.35);}
.enroll-card ul{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid rgba(243,238,226,.15);display:flex;flex-direction:column;gap:10px;}
.enroll-card ul li{font-size:13px;color:rgba(243,238,226,.75);display:flex;gap:8px;}

.related{background:var(--cream-dim);padding:56px 0;}
.related h3{font-size:14px;letter-spacing:.06em;color:var(--steel-light);margin:0 0 20px;text-transform:uppercase;font-family:var(--mono);font-weight:500;}
.related-grid{display:flex;gap:16px;flex-wrap:wrap;}
.related-grid a{
  font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;border:1px solid var(--line);padding:10px 16px;color:var(--ink);
}
.related-grid a:hover{border-color:var(--safety);color:var(--safety);}

@media (max-width:860px){
  .course-layout{grid-template-columns:1fr;}
  .enroll-card{position:static;}
}

/* ---------- Language toggle ---------- */
.lang-toggle{display:flex;gap:2px;margin-left:18px;}
.lang-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  background:none;border:1px solid var(--line);color:var(--steel-light);
  padding:6px 10px;cursor:pointer;
}
.lang-btn.active{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.lang-btn:hover{border-color:var(--safety);color:var(--safety);}
.lang-btn.active:hover{color:var(--cream);}

html[lang="es"] .plaque::before{content:"ESTACIÓN DE REUNIÓN 04";}

@media (max-width:860px){
  .lang-toggle{margin-left:0;}
}