:root{--verde-jade:#34B6A5;--rojo-catarina:#E63946;--azul-medico:#3A8DFF;--gris-antracita:#1E1E1E;--blanco-humo:#FAFAFA}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--blanco-humo);color:var(--gris-antracita);font-family:Inter,system-ui,Arial,sans-serif;line-height:1.6}
a{color:var(--azul-medico);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{background:var(--verde-jade);color:#fff}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:40px;height:40px}
nav a{color:#fff;margin:0 8px;font-weight:700}
.hero{padding:80px 0;background:linear-gradient(180deg,#fff 0%, #FAFAFA 100%);text-align:center}
.hero h1{font-size:clamp(28px,4vw,44px);margin:.2em 0 .2em;font-weight:800}
.notice{background:#fff;border:1px dashed var(--azul-medico);border-radius:12px;padding:10px;display:inline-block}
.btn{display:inline-block;background:var(--verde-jade);color:#fff;padding:12px 20px;border-radius:10px;font-weight:800}
.btn.secondary{background:var(--rojo-catarina)}.btn.outline{background:#fff;color:var(--verde-jade);border:2px solid var(--verde-jade)}
.section{padding:64px 0}.kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--azul-medico);font-size:12px;font-weight:800}
h2{font-size:clamp(22px,3vw,32px);margin:0 0 12px;font-weight:800}
.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.05);padding:18px}
.form label{display:block;font-weight:800;margin:10px 0 6px}
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.footer{background:#1E1E1E;color:#FAFAFA;padding:24px 0;margin-top:40px}.footer a{color:#FAFAFA}
.footer .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.small{font-size:12px;opacity:.85}

/* === NUEVOS BLOQUES DE ESTILO === */

/* Fondo general y tipografía */
body {
  font-family: "Inter", "Manrope", sans-serif;
  background-color: var(--blanco-humo);
  color: var(--gris-antracita);
  margin: 0;
}

/* Hero section */
.hero {
  padding: 80px 0;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.hero img {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--gris-antracita);
}

/* Secciones */
.section {
  padding: 64px 0;
}

.section h2 {
  text-align: center;
  font-weight: 800;
  margin-bottom: 24px;
}

/* Footer */
.footer {
  background-color: var(--gris-antracita);
  color: var(--blanco-humo);
  text-align: center;
  padding: 32px 0;
  margin-top: 80px;
}

.footer a {
  color: var(--blanco-humo);
  text-decoration: underline;
}
/* ======== EFECTOS VISUALES Y RESPONSIVE ======== */

/* ===== Botones ===== */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn.primary {
  background-color: var(--verde-jade);
  color: #fff;
}

.btn.primary:hover {
  background-color: #2fa593;
  transform: translateY(-2px);
}

.btn.secondary {
  background-color: var(--rojo-catarina);
  color: #fff;
}

.btn.secondary:hover {
  background-color: #d4353f;
  transform: translateY(-2px);
}

/* ====== Animaciones suaves ====== */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====== Navbar responsive ====== */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

nav a {
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .header .wrap {
    flex-direction: column;
    text-align: center;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .hero h1 {
    font-size: 28px;
  }

  nav a {
    font-size: 14px;
  }
}

/* ======== MENÚ RESPONSIVE ======== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  nav {
    display: none;
    flex-direction: column;
    background-color: var(--verde-jade);
    width: 100%;
    text-align: center;
    margin-top: 12px;
    padding: 8px 0;
  }

  nav.open {
    display: flex;
  }

  nav a {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  nav a:first-child {
    border-top: none;
  }
}

/* ======== FOOTER ======== */
.footer {
  background: var(--gris-antracita);
  color: #FAFAFA;
  padding: 48px 0;
  margin-top: 60px;
  font-size: 15px;
}

.footer h3, .footer h4 {
  margin-bottom: 10px;
  font-weight: 800;
}

.footer a {
  color: #FAFAFA;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer a:hover {
  opacity: 0.7;
}

.footer img {
  display: block;
}

@media (max-width: 768px) {
  .footer .grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
}

/* ===== FORMULARIO DE CONTACTO ===== */
form input, form textarea {
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
}

form button {
  cursor: pointer;
  font-size: 16px;
}