:root{
  --blue: #0047AB;
  --blue-700: #003a8d;
  --blue-50:#eff4ff;
  --ink:#0b1324;
  --muted:#6b7280;
  --white:#fff;
  --card:#ffffff;
  --ring:#d9e6ff;
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Roboto", system-ui, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
}

/* Top bar */
.top-bar{ background: var(--blue); color: var(--white); font-size:.95rem; }
.top-bar .container-main{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:.4rem 1rem;gap:1rem;flex-wrap:wrap}
.top-bar a{ color:#e7f0ff; text-decoration:none }
.top-bar .redes a{
  color: var(--blue) !important;
  background: var(--blue-50);
  padding: .35rem .7rem;
  border-radius:999px;
  font-weight:700;
  margin-left:.5rem;
  display:inline-flex; gap:.45rem; align-items:center;
}
.top-bar .redes a:hover{ background:#dbe9ff; color: var(--blue-700) !important}

/* Nav */
.container-main{max-width:1200px;margin:0 auto}
.nav-main{background:var(--white); border-bottom:3px solid var(--blue)}
.main-nav .nav-link{color:var(--ink) !important; font-weight:600}
.main-nav .nav-link:hover{color:var(--blue) !important}
.logo-main{max-height:56px}
.pagos .nav-link{background:var(--blue);color:#fff !important;border-radius:999px;padding:.45rem .9rem}
.pagos .nav-link:hover{background:var(--blue-700)}

.dropdown-menu .dropdown-item{color:var(--ink)}
.dropdown-menu .dropdown-item:hover{background:var(--blue-50); color:var(--blue)}

/* Hero / Section banner */
.section-hero{
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-700) 100%);
  color:var(--white);
  padding: 48px 0;
}
.section-hero .container-main{ display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.section-hero img{ border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.18) }

/* Content */
.section{ padding: 3rem 1rem }
.h2{ color: var(--blue); font-weight:800; margin:0 0 .75rem}
.lead{ color: var(--muted) }

.card{
  background: var(--card);
  border:1.5px solid var(--ring);
  border-radius: var(--radius);
  padding:1.1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

/* Grid helpers */
.grid{ display:grid; gap:1rem }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }

/* CTA */
.cta{
  background: linear-gradient(180deg, var(--blue-700) 0%, var(--blue) 100%);
  color:#fff; text-align:center; padding:2.5rem 1rem; border-radius: var(--radius);
}
.btn{
  display:inline-block; border:none; background:var(--blue); color:#fff; padding:.75rem 1rem; border-radius: 12px; font-weight:700; text-decoration:none
}
.btn:hover{ background:var(--blue-700) }

/* Footer */
footer{ background: var(--blue); color:#fff; margin-top:3rem }
footer .cont-foo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; padding:2rem 1rem; max-width:1200px; margin:0 auto }
footer a{ color:#e7f0ff }
footer .copy{ text-align:center; padding:1rem; background:var(--blue-700); margin:0 }

/* WhatsApp and music button */
.float{ position:fixed; width:56px; height:56px; bottom:20px; right:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25d366; color:#fff; font-size:28px; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.15) }
.music-control{ position:fixed; bottom:20px; left:20px; width:56px; height:56px; border-radius:50%; background:var(--blue); color:#fff; border:none; box-shadow:0 8px 24px rgba(0,0,0,.15) }
.music-control:hover{ background:var(--blue-700) }

/* Tables */
.table-plan{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:var(--radius); border:1.5px solid var(--ring) }
.table-plan th, .table-plan td{ padding:.85rem 1rem; border-bottom:1px solid var(--ring) }
.table-plan th{ background:var(--blue-50); text-align:left }
.table-plan tr:last-child td{ border-bottom:none }
.badge{ display:inline-block; background:var(--blue-50); color:var(--blue); padding:.25rem .5rem; border-radius:999px; font-weight:700 }


<form class="formulario" method="POST" action="index.php">
  <fieldset>
    <legend>Contáctanos llenando todos los campos</legend>
    <div class="contenedor-campos">
      <div class="campo">
        <label for="nombre">Nombre</label>
        <input id="nombre" type="text" placeholder="Tu nombre" class="input-text" name="nombre">
      </div>
      <div class="campo">
        <label for="telefono">Teléfono</label>
        <input id="telefono" type="tel" placeholder="Tu Teléfono" class="input-text" name="telefono">
      </div>
      <div class="campo">
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Tu email" class="input-text" name="email">
      </div>
      <div class="campo">
        <label for="mensaje">Mensaje</label>
        <textarea id="mensaje" name="mensaje" class="input-text"></textarea>
      </div>
    </div>
    <div class="alinear-derecho">
      <input class="boton" type="submit" value="Enviar">
    </div>
  </fieldset>
</form>