/* ======= Paleta amigable (educación) ======= */
:root{
  --bg:#f6fbff;
  --ink:#14213d;
  --muted:#5e6a85;
  --pink:#FF5A8B;
  --mint:#35D0C2;
  --yellow:#FFD66B;
  --violet:#B889F5;
  --blue:#58C6FF;
  --shadow: 0 12px 28px rgba(20,33,61,.12);
  --radius:18px;
  --outline:#e9eef7;
}

/* ===== Reset y base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background: var(--bg);
  color:var(--ink);
  font-family: system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
h1,h2,h3{ margin:0 0 10px; font-weight:900; letter-spacing:.3px }
h2{ font-size:clamp(26px,4vw,36px) }
p{ margin:0 0 10px }
.muted{ color:var(--muted) }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ===== Fondo con gradiente animado (tu efecto) ===== */
#gradient{
  position: fixed;
  inset: 0;
  z-index: 0;               /* detrás de todo */
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--outline);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink) }
.brand-logo{ width:40px; height:40px; object-fit:contain }
.brand-text{ font-weight:900; letter-spacing:.5px }
.brand-text span{ color:var(--pink) }

/* ===== Botones ===== */
.btn{
  display:inline-block;
  background: linear-gradient(180deg, var(--pink), #ff3b79);
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  border:1px solid transparent;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.02) }
.btn.ghost{
  background: transparent;
  color: var(--ink);
  border-color:#d7e4f5;
  box-shadow:none;
}

/* ===== Sección hero (contenedor del form) ===== */
.hero-edu{
  position:relative;
  z-index:1;               /* por encima del #gradient */
  padding: 96px 0 120px;
  /* un par de toques suaves para combinar con el gradiente */
  background:
    radial-gradient(1600px 600px at 80% -10%, #c0eaff33, transparent 60%),
    radial-gradient(1100px 500px at 10% -10%, #ffd2e933, transparent 55%),
    transparent;
}

/* Tarjeta de formulario tipo “glass” para legibilidad */
.form-card{
  background: rgba(255,255,255,.60);
  border:1px solid rgba(233,238,247,.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  padding: 22px 20px;
}

/* ===== Form ===== */
.contact-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:12px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  background:#ffffffcc;
  color:var(--ink);
  border:1px solid #eaf0fb;
  border-radius:14px;
  padding:12px 12px;
  outline:none;
  box-shadow: 0 2px 8px rgba(20,33,61,.05) inset;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#8b97b3 }

.contact-form textarea{ grid-column:1/-1; min-height:140px }

/* Botones en dos columnas */
.contact-form .btn{ grid-column:1/2 }
.contact-form .btn.ghost{ grid-column:2/3; justify-self:end }

/* Honeypot oculto siempre */
.hp{
  position:absolute !important;
  left:-10000px !important;
  width:1px; height:1px;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ===== Footer ===== */
.foot{ border-top:1px solid #eaf0fb; padding:20px 0; color:var(--muted); background:#fff }
.foot-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.foot-nav{ display:flex; gap:14px }
.foot-nav a{ color:var(--muted); text-decoration:none; font-weight:700 }
.foot-nav a:hover{ color:var(--ink) }
.foot-copy{ display:flex; align-items:center; gap:0; color:var(--muted); opacity:.92 }
.foot-copy .sig{ margin-left:12px; padding-left:12px; border-left:1px dashed #e9eef7; white-space:nowrap }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .contact-form{ grid-template-columns:1fr }
  .contact-form .btn,
  .contact-form .btn.ghost{ grid-column:1/-1; justify-self:stretch; text-align:center }
}

@media (max-width: 480px){
  .btn{ width:100% }
}