:root {
  --bg: oklch(0.98 0.008 75);
  --surface: oklch(0.995 0.006 75);
  --border: oklch(0.88 0.014 75);
  --text: oklch(0.22 0.02 60);
  --text-secondary: oklch(0.45 0.02 60);
  --text-tertiary: oklch(0.6 0.015 60);
  --accent: oklch(0.52 0.14 250);
  --accent-on: oklch(0.99 0.006 75);
  --accent-subtle: oklch(0.93 0.03 250);
  --accent-ring: oklch(0.52 0.14 250 / 0.18);
  --accent-shadow: 0 8px 20px -8px oklch(0.52 0.14 250 / 0.45);
  --card-shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.04), 0 12px 24px -12px oklch(0.2 0.02 60 / 0.10);
  --banner-bg: oklch(0.25 0.045 250);
  --banner-text: oklch(0.96 0.006 75);
  --banner-accent: oklch(0.78 0.09 250);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

input::placeholder, textarea::placeholder { color: oklch(0.6 0.015 60 / 0.7); }

h1, h2, .display { font-family: 'Space Grotesk', sans-serif; }

a { color: inherit; }

.wrap { max-width: 1160px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

@keyframes az-slide-left { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes az-slide-right { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
.slide-left { animation: az-slide-left 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide-right { animation: az-slide-right 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50; background: var(--accent);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 32px;
}
.nav-brand {
  display: flex; align-items: center; gap: 12px; border: none; background: none; padding: 0;
  cursor: pointer; color: var(--text);
}
.nav-brand img { height: 40px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.nav-brand span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; white-space: nowrap; color: var(--accent-on);
}
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-link {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: oklch(0.88 0.03 250);
  background: transparent; border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  white-space: nowrap; transition: background 0.2s ease, transform 0.15s ease;
}
.nav-link:hover { background: oklch(1 0 0 / 0.14); transform: translateY(-1px); }
.nav-link:active { transform: scale(0.95); }
.nav-link.active { font-weight: 600; color: var(--accent-on); background: oklch(1 0 0 / 0.16); }
.nav-cta {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; padding: 10px 20px;
  border-radius: 999px; border: none; background: var(--accent-on); color: var(--accent);
  cursor: pointer; margin-left: 10px; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px oklch(0 0 0 / 0.35); }
.nav-cta:active { transform: scale(0.95); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; border: none; background: transparent; cursor: pointer; padding: 0; flex-shrink: 0;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--accent-on); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn-primary {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; padding: 14px 28px;
  border-radius: 10px; border: none; background: var(--accent); color: var(--accent-on);
  cursor: pointer; box-shadow: var(--accent-shadow); white-space: nowrap;
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 28px -10px oklch(0.52 0.14 250 / 0.55); }
.btn-primary:active { transform: scale(0.96); }
.btn-secondary {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; padding: 14px 28px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; white-space: nowrap; transition: transform 0.15s ease, border-color 0.2s ease;
}
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--accent); }
.btn-secondary:active { transform: scale(0.96); }

/* Sections */
section[data-screen] { display: none; }
section[data-screen].active { display: flex; flex-direction: column; flex: 1; }

.hero-bg { background: var(--accent-subtle); }
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; padding: 88px 32px 72px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px -2px oklch(0.3 0.05 250 / 0.15);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 { font-size: 54px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 20px; }
.hero p { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 32px; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-media .span-2 { grid-column: 1 / -1; height: 300px; }
.hero-media .tile {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow);
  height: 170px; display: flex; align-items: center; justify-content: center; background: var(--surface);
}
.hero-media .span-2 { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.placeholder-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-subtle), var(--surface));
  color: var(--text-tertiary); font-size: 13px; text-align: center; padding: 12px;
}

.subjects-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-pad { padding: 72px 32px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; }
.section-head h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 8px; }
.section-head p { font-size: 15px; color: var(--text-secondary); margin: 0; }
.section-head .tag { font-size: 14px; color: var(--text-secondary); }

.subjects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.subject-card {
  padding: 22px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; transition: border-color 0.2s ease;
}
.subject-card:hover { border-color: var(--accent); }
.subject-glyph {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent-subtle);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: var(--accent);
}
.subject-name { font-weight: 600; font-size: 16px; }
.subject-detail { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }

.reasons-section h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 36px; }
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reason-card { padding: 28px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.reason-num { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.reason-title { font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.reason-body { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

.banner-wrap { padding: 0 32px 88px; }
.banner {
  border-radius: 20px; background: var(--banner-bg); color: var(--banner-text); padding: 48px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.banner-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--banner-accent); margin-bottom: 12px; }
.banner-title { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 10px; max-width: 560px; }
.banner-body { font-size: 15px; line-height: 1.55; opacity: 0.85; max-width: 560px; }
.banner-btn {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 10px;
  border: none; background: var(--accent-on); color: var(--text); cursor: pointer; white-space: nowrap;
}

/* Matricula */
.matricula-bg { background: var(--accent-subtle); flex: 1; }
.matricula-grid {
  padding: 72px 32px 96px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start;
}
.matricula-info { position: sticky; top: 100px; }
.eyebrow-pill {
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-on); background: var(--accent); padding: 8px 16px;
  border-radius: 999px; box-shadow: var(--accent-shadow); margin-bottom: 18px;
}
.matricula-info h1 { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; }
.matricula-info > p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 32px; }
.tip-list { display: flex; flex-direction: column; gap: 14px; }
.tip { display: flex; gap: 14px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.tip-num { font-weight: 700; font-size: 14px; color: var(--accent); flex-shrink: 0; }
.tip-text { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.tip-text strong { color: var(--text); }

.form-card { padding: 36px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.form-required { font-size: 13px; color: var(--text-tertiary); margin-bottom: 24px; }
.form-grid { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: 'Inter', sans-serif; font-size: 15px; padding: 13px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; appearance: none;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border: 1.5px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-ring);
}
.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-note { font-size: 14px; color: var(--accent); font-weight: 600; margin-top: 4px; display: none; }
.form-note.visible { display: block; }
.form-note.error { color: oklch(0.55 0.18 25); }

/* ponytail: honeypot — off-screen, not display:none, since some bots skip hidden inputs */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* Contacto */
.contacto-bg { background: var(--accent-subtle); flex: 1; }
.contacto-pad { padding: 72px 32px 96px; }
.contacto-title { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.contacto-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: stretch; margin-top: 40px; }
.contacto-col { display: flex; flex-direction: column; gap: 16px; }
.info-card { padding: 26px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.info-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }
.info-value { font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.info-sub { font-size: 14px; color: var(--text-secondary); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-link { font-weight: 600; font-size: 17px; color: var(--accent); text-decoration: none; }
.info-link.small { font-size: 14px; word-break: break-all; }
.hours-list { display: flex; flex-direction: column; gap: 8px; }
.hours-row { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.hours-row span:first-child { color: var(--text-secondary); }
.hours-row span:last-child { font-weight: 600; }

.photo-card { border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--card-shadow); overflow: hidden; position: relative; height: 300px; }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.08); }
.photo-caption {
  position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px;
  background: oklch(0.22 0.03 250 / 0.85); backdrop-filter: blur(6px); color: oklch(0.97 0.005 250);
  font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 999px; pointer-events: none;
}
.photo-caption .dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.78 0.14 150); flex-shrink: 0; }
.map-card { border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--card-shadow); overflow: hidden; flex: 1; min-height: 300px; display: flex; }
.map-card iframe { border: 0; width: 100%; flex: 1; }

/* Footer */
.footer { background: var(--accent); margin-top: auto; }
.footer-inner { padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; color: oklch(0.88 0.03 250); }
.footer-brand img { height: 24px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.footer-links { display: flex; gap: 20px; font-size: 13px; }
.footer-links a { color: var(--accent-on); text-decoration: none; white-space: nowrap; }

@media (max-width: 860px) {
  .hero, .matricula-grid, .contacto-grid, .form-row, .two-col { grid-template-columns: 1fr; }
  .subjects-grid { grid-template-columns: repeat(2, 1fr); }
  .reasons-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .hero p { max-width: none; }
  .matricula-info { position: static; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--accent); padding: 10px 20px 18px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
  .nav-links.open { max-height: 320px; opacity: 1; }
  .nav-link, .nav-cta { width: 100%; text-align: center; margin-left: 0; }
  .nav-cta { margin-top: 6px; }
}

@media (max-width: 480px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .nav-inner { padding: 12px 20px; }
  .hero { padding: 56px 20px 48px; gap: 40px; }
  .hero h1 { font-size: 30px; }
  .hero-badge { font-size: 12px; }
  .section-pad { padding: 48px 20px; }
  .section-head h2, .reasons-section h2 { font-size: 26px; }
  .subjects-grid { grid-template-columns: 1fr; }
  .hero-media { grid-template-columns: 1fr; }
  .hero-media .span-2 { height: 220px; }
  .hero-media .tile { height: 150px; }
  .banner { padding: 32px 24px; }
  .banner-title { font-size: 22px; }
  .banner-wrap { padding: 0 20px 56px; }
  .matricula-grid, .contacto-pad { padding-left: 20px; padding-right: 20px; }
  .matricula-info h1, .contacto-title { font-size: 30px; }
  .form-card { padding: 22px; }
  .photo-card, .map-card { height: 220px; min-height: 220px; }
}