/* ===== Reset mínimo y tokens ===== */
* { box-sizing: border-box; }

/* Opt-out de auto-dark en Chrome */
:root { color-scheme: light; }

/* Variables base */
:root {
  --bg: #ffffff;
  --text: #111111;

  /* Paleta sRGB (respetada por Chrome) */
  --brand-blue:   #132D48; /* Primario */
  --brand-coral:  #FF6B5C; /* CTA */
  --brand-jade:   #00BFA6; /* Secundario */
  --brand-gold:   #F7D348; /* Acento */
  --brand-purple: #6A4C93; /* Énfasis */

  --neutral-0: #FFFFFF;
  --neutral-1: #F9F9F9;
  --neutral-2: #C7C7C7;
  --neutral-9: #1A1A1A;

  --text-1: #0B0B0C;
  --text-2: #3B3B40;

  --container: 1120px;
  --header-h: 72px;
  --radius: 14px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.08);
  --t: 220ms ease;
}

/* Fondo claro explícito */
html, body {
  margin: 0; 
  padding: 0; 
  background-color: #ffffff !important;
  background-image: none !important;       /* evita heurísticas/auto-dark */
  color: #111111;
}


html, body { 
  margin: 0; 
  padding: 0; 
  background-color: #ffffff !important;
  background-image: none !important;       /* evita heurísticas/auto-dark */
  color: #111111;
}

body { 
  background: var(--neutral-0, #ffffff);
  color: var(--text-1, #111111);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

.container{ width:min(100% - 32px, var(--container)); margin-inline:auto; }

/* ===== Header / Nav ===== */
.site-header{
  position: sticky; top:0; z-index:50;
  height: var(--header-h);
  background: var(--neutral-0);
  box-shadow: var(--shadow-1);
}
.nav-wrap{ height:100%; display:flex; align-items:center; gap:16px; }

.brand img{ display:block; height:150px; width:auto; }

.nav{
  margin-left:auto;
  position:relative;
  display:flex;
  align-items:center;
}

/* Botón hamburguesa */
.hamburger{
  appearance:none; border:0; background:transparent;
  width:44px; height:44px; padding:0; margin-left:auto; display:none; cursor:pointer;
}
.hamburger-box{ display:grid; place-items:center; width:100%; height:100%; }
.hamburger-inner{
  width:22px; height:2px; background: var(--brand-blue);
  position:relative; transition: transform var(--t);
}
.hamburger-inner::before, .hamburger-inner::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background: var(--brand-blue);
  transition: transform var(--t), opacity var(--t);
}
.hamburger-inner::before{ top:-7px; }
.hamburger-inner::after{  top: 7px; }
.hamburger[aria-expanded="true"] .hamburger-inner{ transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-inner::before{ transform: rotate(90deg) translateX(-7px); }
.hamburger[aria-expanded="true"] .hamburger-inner::after{ opacity:0; transform: translateY(-7px); }

/* Menú */
.menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:20px;
}
.menu a{
  text-decoration:none; color: var(--brand-blue);
  font-weight:600; padding:10px 6px; display:inline-block;
}
#primaryMenu li a:hover{
    color:  #00BFA6;
}
.menu .highlight{ 
  margin-left:8px;
 }
.btn-cta{
   display: flex;              
  align-items: center;        
  justify-content: center;    
  text-align: center;
  padding:10px 14px; 
  border-radius:999px;
  background: var(--brand-coral); 
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(255,107,92,.28);
  transition: transform var(--t), filter var(--t);
}
.btn-cta:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* ===== HERO (gradiente sRGB; sin filtros/blend) ===== */
.hero{
  position:relative; isolation:isolate;
  min-height: clamp(60vh, 68vh, 86vh);
  display:grid; place-items:center;
  background:
    linear-gradient(98deg,
      var(--brand-blue) 0%,
      var(--brand-purple) 52%,
      var(--brand-jade) 100%
    );
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
 /* background: rgba(0,0,0,0.10);*/ /* leve veladura para legibilidad */
}
.hero-inner{ position:relative; z-index:1; color:#fff; text-align:center; padding:40px 0; }
.hero h1{ margin:0 0 12px; font-weight:800; line-height:1.1; font-size: clamp(28px, 6vw, 56px); }
.hero p { margin:0 auto 24px; max-width:760px; color: rgba(255,255,255,.95); font-size: clamp(16px, 2.2vw, 20px); }

.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700;
  border:2px solid transparent; transition: transform var(--t), filter var(--t), background var(--t), color var(--t);
}
.btn.primary{ background:#fff; color: var(--brand-blue); }
.btn.primary:hover{ transform: translateY(-1px); }
.btn.ghost{ background:transparent; border-color: rgba(255,255,255,.7); color:#fff; }
.btn.ghost:hover{ filter: brightness(1.1); transform: translateY(-1px); }

/* ===== Secciones ===== */
.spacer{ padding:64px 0; }
h2{ margin:0 0 12px; font-size: clamp(22px, 3.6vw, 34px); color: var(--brand-blue); }
a{ color: var(--brand-jade); }
a:hover{ color: var(--brand-purple); }
#primaryMenu li a:hover{
    color:  #00BFA6;
}

/* Cursos destacados */
.courses-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.course-card{
  border-radius: 16px;
  padding: 20px;
  color: #fff;
  min-height: 180px;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow: var(--shadow-1);
}
.course-card h3{ margin: 0 0 8px; font-size: 20px; }
.course-card p{ margin: 0 0 14px; color: rgba(255,255,255,.95); }
.course-card .btn.small{ padding:10px 14px; border-radius:10px; font-weight:700; }

.course-card.c1{ background: linear-gradient(140deg, var(--brand-purple), var(--brand-blue)); }
.course-card.c2{ background: linear-gradient(140deg, var(--brand-blue), var(--brand-jade)); }
.course-card.c3{ background: linear-gradient(140deg, var(--brand-coral), #ff8a78); }

/* Testimonios / Proof */
.proof{ text-align:center; }
.proof .stars{ font-size: 28px; margin: 8px 0; }
.proof .lead{ color: var(--text-2); }

/* Contacto */
.contact .contact-lead{ color: var(--text-2); }
.contact-data{
  list-style:none; padding:0; margin: 12px 0 24px;
  display:grid; gap:8px;
}
.contact-data a{ color: var(--brand-jade); }

.contact-form{
  background: var(--neutral-1); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-1);
}
.grid-2{ display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-weight:600; color: var(--brand-blue); }
input, select, textarea{
  width:100%; border:1px solid var(--neutral-2); background:#fff; color: var(--neutral-9);
  border-radius: 12px; padding: 12px 12px; font-size:16px;
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--brand-jade);
  box-shadow: 0 0 0 3px rgba(0,191,166,.18);
}
.err{ min-height: 18px; font-size: 13px; color: #c0392b; }

.actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top: 10px; }
.form-note{ color: var(--text-2); margin:0; font-size: 14px; }
.form-status{ margin-top:10px; color: var(--brand-blue); font-weight:600; }

/* Footer */
.site-footer{
  background: var(--neutral-1); color: var(--text-2);
  font-size:14px; padding:24px 0; margin-top:32px;
}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .hamburger{ display:inline-grid; }

  .menu{
    position:absolute;
    top: calc(var(--header-h) + 8px);
    right: 0;             /* SIEMPRE esquina superior derecha */
    width: min(88vw, 320px);
    background: var(--neutral-0);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 10px;
    display: none;        /* oculto por defecto en móvil */
    flex-direction: column; align-items: stretch;
  }
  .menu.open{ display:flex; }
  .menu li{ border-bottom:1px solid #eee; }
  .menu li:last-child{ border-bottom:0; }
  .menu a{ padding:14px 10px; }

  .menu .highlight{ margin-left:0; padding-top:6px; }
  .btn-cta{ width:100%; text-align:center; }

  .courses-grid{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}


/* Opt-out también cuando el SO está en dark */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  html, body { background-color: #ffffff !important; color: #111111 !important; }
}

/* Accesibilidad: foco visible */
:focus-visible{ outline: 3px solid var(--brand-gold); outline-offset: 2px; }