:root {
  --blue:   #0077b6;
  --cyan:   #7A99FF;
  --light:  #90e0ef;
  --pale:   #caf0f8;
  --orange: #E3C27A;
  --dark:   #203475;
  --white:  #ffffff;
  --gray:   #f4f8fb;
  --text:   #1a1a2e;
  --font-heading: 'Marcellus', Georgia, serif;
  --dark-rgb:   32, 52, 117;
  --cyan-rgb:   122, 153, 255;
  --orange-rgb: 227, 194, 122;
  --blue-rgb:   0, 119, 182;
}
* { margin:0; padding:0; box-sizing:border-box; }
h1, h2, h3, h4, .nav-logo {
  font-family: var(--font-heading), serif; }
html { scroll-behavior:smooth; }
body { font-family:'Segoe UI',system-ui,sans-serif; color:var(--text); overflow-x:hidden; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 2.5rem;
  background:rgba(var(--dark-rgb),.9);
  backdrop-filter:blur(10px);
}
.nav-logo {
  font-size:1.15rem; font-weight:900; color:var(--white);
  letter-spacing:.06em; text-decoration:none;
}
.nav-logo span { color:var(--orange); }
.nav-right { display:flex; align-items:center; gap:1.5rem; }
nav ul { list-style:none; display:flex; gap:1.8rem; }
nav ul a {
  color:rgba(255,255,255,.82); text-decoration:none;
  font-size:.82rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; transition:color .2s;
}
nav ul a:hover { color:var(--cyan); }

/* Lang switcher */
.lang-switcher {
  display:flex; gap:.3rem;
  background:rgba(255,255,255,.1); border-radius:50px;
  padding:.2rem;
}
.lang-btn {
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.55); font-size:.78rem; font-weight:800;
  padding:.3rem .7rem; border-radius:50px;
  letter-spacing:.06em; transition:all .2s;
}
.lang-btn.active {
  background:var(--orange); color:var(--white);
}
.lang-btn:hover:not(.active) { color:var(--white); }

/* Hamburguesa */
.nav-burger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:transparent; border:none; cursor:pointer; padding:.4rem;
}
.nav-burger span {
  display:block; width:24px; height:2px; background:var(--white); border-radius:2px;
  transition:transform .25s, opacity .25s;
}

/* ── HERO ── */
#hero {
  min-height:100vh;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:stretch; padding-top:58px;
}
.hero-left {
  background:var(--dark);
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem 4rem 5rem 5rem;
  position:relative; overflow:hidden;
}
.hero-badge {
  display:inline-block; background:var(--orange); color:var(--white);
  font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:.4rem 1.1rem; border-radius:50px;
  margin-bottom:1.6rem; width:fit-content;
}
.hero-left h1 {
  font-size:clamp(2.4rem,5vw,4.2rem); font-weight:900;
  color:var(--white); line-height:1.05; margin-bottom:1.2rem;
}
.hero-left h1 em { font-style:normal; color:var(--cyan); }
.hero-left p {
  font-size:1.05rem; color:rgba(255,255,255,.82);
  line-height:1.7; margin-bottom:2.4rem; max-width:420px;
}
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary {
  display:inline-block; background:var(--orange); color:var(--white);
  font-size:.9rem; font-weight:800; padding:.85rem 2rem; border-radius:50px;
  text-decoration:none; letter-spacing:.05em; text-transform:uppercase;
  transition:transform .2s;
}
.btn-primary:hover { transform:translateY(-2px); }
.btn-secondary {
  display:inline-block; background:transparent; color:var(--white);
  font-size:.9rem; font-weight:700; padding:.85rem 2rem; border-radius:50px;
  text-decoration:none; letter-spacing:.05em; text-transform:uppercase;
  border:2px solid rgba(255,255,255,.4); transition:border-color .2s, color .2s;
}
.btn-secondary:hover { border-color:var(--cyan); color:var(--cyan); }
.hero-stats {
  display:flex; gap:2.5rem; margin-top:3.5rem;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.12);
}
.stat strong { display:block; font-size:2rem; font-weight:900; color:var(--cyan); }
.stat span { font-size:.75rem; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; }
.hero-right { position:relative; overflow:hidden; }
.hero-right img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-right-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(var(--dark-rgb),.25) 0%, transparent 60%);
}
.hero-pill {
  position:absolute; bottom:2rem; right:2rem;
  background:rgba(255,255,255,.15); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:16px; padding:1rem 1.4rem; color:var(--white); font-size:.85rem;
}
.hero-pill strong { display:block; font-size:1.3rem; font-weight:900; color:var(--cyan); }

/* ── PHOTO STRIP ── */
#fotos { display:grid; grid-template-columns:repeat(4,1fr); height:300px; }
.foto-item { position:relative; overflow:hidden; cursor:pointer; }
.foto-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
.foto-item:hover img { transform:scale(1.08); }
.foto-item .foto-label {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(var(--dark-rgb),.8) 0%, transparent 100%);
  padding:.8rem 1rem; color:var(--white); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; opacity:0; transition:opacity .3s;
}
.foto-item:hover .foto-label { opacity:1; }

/* ── SECTIONS COMMON ── */
#cursos { padding:6rem 2rem; background:var(--white); }
.container { max-width:1100px; margin:0 auto; }
.section-label {
  display:inline-block; font-size:.72rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--orange); margin-bottom:.6rem;
}
h2 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; line-height:1.1; margin-bottom:1rem; color:var(--dark); }
.lead { font-size:1rem; color:#666; max-width:580px; line-height:1.7; margin-bottom:3rem; }

/* ── CURSO CARDS ── */
.cursos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.curso-card {
  border-radius:20px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.08);
  transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; background:var(--white);
}
.curso-card:hover { transform:translateY(-6px); box-shadow:0 14px 40px rgba(0,0,0,.14); }
.card-img { position:relative; height:200px; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.curso-card:hover .card-img img { transform:scale(1.05); }
.card-img-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem 1.4rem;
}
.card-img-overlay.overlay-blue   { background:linear-gradient(to top, rgba(var(--blue-rgb),.85)   0%, transparent 60%); }
.card-img-overlay.overlay-dark   { background:linear-gradient(to top, rgba(var(--dark-rgb),.85)   0%, transparent 60%); }
.card-img-overlay.overlay-orange { background:linear-gradient(to top, rgba(var(--orange-rgb),.85) 0%, transparent 60%); }
.card-img .pos-top    { object-position:center 30%; }
.card-img .pos-bottom { object-position:center 60%; }
.card-nivel.nivel-dark { background:var(--dark); }
.card-img-overlay h3 { font-size:1.25rem; font-weight:900; color:var(--white); text-shadow:0 2px 8px rgba(0,0,0,.4); margin-bottom:.2rem; }
.card-img-overlay .edad { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.85); }
.card-nivel { position:absolute; top:1rem; right:1rem; background:var(--orange); color:var(--white); font-size:.7rem; font-weight:800; padding:.3rem .8rem; border-radius:50px; text-transform:uppercase; letter-spacing:.06em; }
.card-body { padding:1.4rem 1.6rem; flex:1; }
.card-body p { font-size:.92rem; color:#555; line-height:1.65; margin-bottom:1rem; }
.tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tag { background:var(--pale); color:var(--dark); font-size:.72rem; font-weight:700; padding:.25rem .75rem; border-radius:50px; }
.card-footer { padding:1rem 1.6rem 1.4rem; border-top:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; }
.precio { font-size:.8rem; color:#888; }
.precio strong { display:block; font-size:1.6rem; font-weight:900; color:var(--dark); line-height:1; }
.precio span { font-size:.72rem; }
.btn-card {
  display:inline-block; background:var(--dark); color:var(--white); font-size:.78rem; font-weight:800;
  padding:.55rem 1.3rem; border-radius:50px; text-decoration:none; text-transform:uppercase; letter-spacing:.05em; transition:background .2s;
}
.btn-card:hover { background:var(--blue); }
.incluye {
  background:var(--pale); border-radius:16px; padding:1.2rem 1.8rem; margin-top:2rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.incluye strong { font-size:.85rem; color:var(--dark); margin-right:.5rem; }
.incluye span { font-size:.82rem; color:var(--dark); font-weight:600; }
.incluye span::before { content:'✓ '; color:var(--blue); }

/* ── BERMEO BANNER ── */
#bermeo { position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden; }
#bermeo img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; }
#bermeo .bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(var(--dark-rgb),.85) 0%, rgba(var(--blue-rgb),.6) 55%, rgba(var(--cyan-rgb),.2) 100%);
}
#bermeo .container { position:relative; z-index:2; padding:4rem 2rem; }
#bermeo h2 { color:var(--white); margin-bottom:1rem; }
#bermeo p { color:rgba(255,255,255,.85); max-width:520px; font-size:1.05rem; line-height:1.7; margin-bottom:2rem; }
.bermeo-chips { display:flex; gap:.8rem; flex-wrap:wrap; }
.chip { background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.3); color:var(--white); font-size:.82rem; font-weight:700; padding:.5rem 1.2rem; border-radius:50px; }
#bermeo .section-label { color:var(--light); }

/* ── EQUIPO ── */
#equipo { padding:5.5rem 2rem; background:var(--white); }
.equipo-text { max-width:720px; }
.equipo-text p { font-size:1rem; color:#555; line-height:1.8; margin-bottom:1.4rem; }
.galerna-card {
  display:inline-flex; align-items:center; gap:.8rem; margin-top:.5rem;
  background:var(--pale); border-radius:14px; padding:1rem 1.6rem;
}
.galerna-card .gico { font-size:1.6rem; }
.galerna-link {
  display:block; color:var(--dark); font-weight:800; font-size:.9rem;
  text-decoration:none; letter-spacing:.02em;
}
.galerna-link:hover { color:var(--blue); }
.galerna-link small { display:block; font-size:.75rem; font-weight:400; color:#888; margin-top:.1rem; }

/* ── MISIÓN ── */
#mision { background:var(--gray); padding:5.5rem 2rem; }
.mision-text { max-width:720px; margin-bottom:2.5rem; }
.mision-text p { font-size:1rem; color:#555; line-height:1.8; margin-bottom:1.2rem; }
.mision-noprofit {
  background:var(--dark);
  border-radius:16px; padding:1.4rem 2rem; margin-bottom:2.5rem;
  max-width:720px; color:rgba(255,255,255,.85); font-size:.95rem; line-height:1.7;
}
.valores-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.valor {
  background:var(--white); border-radius:14px; padding:1.2rem 1.5rem;
  display:flex; align-items:flex-start; gap:.8rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.valor .vico { font-size:1.4rem; flex-shrink:0; margin-top:.05rem; }
.valor span { font-size:.9rem; color:var(--dark); font-weight:600; line-height:1.5; }

/* ── POR QUÉ ── */
#porque { background:var(--gray); padding:5.5rem 2rem; }
.motivos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; }
.motivo { background:var(--white); border-radius:18px; padding:2rem 1.5rem; text-align:center; box-shadow:0 2px 14px rgba(0,0,0,.06); transition:transform .2s; }
.motivo:hover { transform:translateY(-4px); }
.motivo .ico { font-size:2.5rem; margin-bottom:.8rem; }
.motivo h4 { font-size:.97rem; font-weight:800; color:var(--dark); margin-bottom:.5rem; }
.motivo p { font-size:.85rem; color:#666; line-height:1.6; }

/* ── TESTIMONIAL ── */
#review { background:var(--dark); text-align:center; padding:5rem 2rem; }
#review blockquote { font-size:clamp(1.2rem,3vw,1.9rem); font-weight:700; color:var(--white); max-width:720px; margin:0 auto 1rem; line-height:1.4; }
#review cite { font-size:.88rem; color:var(--light); font-style:normal; display:block; margin-top:.8rem; }
#review p { color:rgba(255,255,255,.5); font-size:.82rem; margin-top:.5rem; }
.stars { color:#ffd60a; font-size:1.5rem; margin-bottom:1.2rem; }

/* ── CONTACTO ── */
#contacto { padding:6rem 2rem; background:var(--white); }
.contacto-inner { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; }
.contacto-info h2 { margin-bottom:1rem; }
.contacto-info p { font-size:.95rem; color:#666; line-height:1.7; margin-bottom:2rem; }
.info-item { display:flex; gap:1rem; margin-bottom:1.2rem; align-items:flex-start; }
.info-item .iico { font-size:1.4rem; flex-shrink:0; margin-top:.1rem; }
.info-item div strong { display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--dark); margin-bottom:.2rem; }
.info-item div span { font-size:.9rem; color:#555; }
.form-wrap { background:var(--white); border-radius:24px; padding:2.5rem; box-shadow:0 4px 30px rgba(0,0,0,.08); border:1px solid #eef1f5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field.full { grid-column:1 / -1; }
label { font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--dark); }
input, select, textarea {
  width:100%; min-width:0;
  padding:.72rem 1rem; border:2px solid #e8ecf0; border-radius:10px;
  font-size:.93rem; font-family:inherit; color:var(--text);
  transition:border-color .2s; outline:none; background:#fafbfc;
}
input:focus, select:focus, textarea:focus { border-color:var(--cyan); background:var(--white); }
textarea { resize:vertical; min-height:100px; }
.btn-submit {
  width:100%; background:var(--orange); color:var(--white); font-size:.95rem; font-weight:800;
  padding:1rem; border:none; border-radius:50px; cursor:pointer; text-transform:uppercase;
  letter-spacing:.06em; margin-top:.5rem; transition:transform .2s;
}
.btn-submit:hover { transform:translateY(-2px); }
.form-note { text-align:center; font-size:.78rem; color:#aaa; margin-top:.8rem; }
#success-msg { display:none; text-align:center; padding:2.5rem 1rem; }
#success-msg h3 { color:var(--blue); font-size:1.4rem; margin-bottom:.5rem; }
#success-msg p { color:#555; font-size:.95rem; }
.success-ico { font-size:3rem; margin-bottom:1rem; }

/* ── FOOTER ── */
footer { background:var(--dark); color:rgba(255,255,255,.55); text-align:center; padding:2.5rem 2rem; font-size:.83rem; }
footer strong { color:var(--cyan); }
footer p { margin-top:.3rem; }
footer p:last-of-type { margin-top:1rem; font-size:.75rem; }
footer .footer-links { margin-top:.6rem; display:flex; justify-content:center; gap:1.5rem; }
footer .footer-links a { color:rgba(255,255,255,.4); text-decoration:none; font-size:.8rem; }
footer .footer-links a:hover { color:var(--cyan); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  #hero { grid-template-columns:1fr; }
  .hero-right { height:50vh; }
  .hero-left { padding:4rem 2rem 3rem; }
  #fotos { grid-template-columns:repeat(2,1fr); height:400px; }
  .contacto-inner { grid-template-columns:1fr; gap:2.5rem; }
  /* Hamburguesa */
  .nav-burger { display:flex; }
  .nav-right {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(var(--dark-rgb),.97); backdrop-filter:blur(10px);
    padding:1rem 2rem 1.5rem;
  }
  nav.nav-open .nav-right { display:flex; }
  nav ul { flex-direction:column; gap:0; width:100%; }
  nav ul li { border-bottom:1px solid rgba(255,255,255,.08); }
  nav ul a { display:block; padding:.85rem 0; font-size:.9rem; }
  .lang-switcher { margin-top:1rem; }
}
@media (max-width:540px) {
  .form-grid { grid-template-columns:1fr; }
  .hero-stats { gap:1.5rem; }
  .form-wrap { padding:1.4rem; }
}
