/* Colores y estructura compartidas en todas las paginas */

:root{
  --accent:#2b7a78;
  --accent-2:#145a5a;
  --muted:#6b6b6b;
  --bg:#f7f7f7;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:#222;
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:24px}


.hero{
  display:flex;
  flex-direction:row;    /* row por defecto */
  flex-wrap:wrap;        /* permite que los hijos bajen cuando falta espacio */
  gap:24px;
  align-items:flex-start; /* alinea desde arriba para evitar recortes */
  padding:48px 0;
}
.hero-left,
.hero-right{
  box-sizing:border-box;
  flex:0 1 48%;          /* ocupar ~50% cada uno, pueden encoger */
  min-width:260px;       /* evita que se estrechen demasiado */
  max-width:100%;
}
/* En pantallas pequeñas, apilar en columna */
@media (max-width:700px){
  .hero{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-left,
  .hero-right{
    flex:0 1 100%;
    min-width:0;
  }

  header nav {
    display: flex;
    flex-direction: column;
  }

  .nav-links a{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

}
.hero h1{margin:0 0 12px;font-size:2rem}
.lead{margin:0 0 18px;color:var(--muted)}
.cta{background:#000000;color:#38b6ff; padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}