/* Variables y reset mínimo */
:root{
  --bg: #f6faf7;
  --card: #ffffff;
  --brand: #15592b;
  --accent:#1e8f4a;
  --muted: #566a62;
  --radius: 18px;
  --gap: 40px;
  --shadow: 0 22px 60px rgba(6,30,20,0.06);
  --max-width: 1400px;
}

/* Base tipográfica y fondo general (para esta hoja) */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: #0b2b27;
}

/* Main centrado y con aire */
main {
  max-width: var(--max-width);
  margin: 64px auto;
  padding: 48px 32px;
  box-sizing: border-box;
}

/* Sección visión/misión: tarjeta visual */
.vision {
  padding: 0;
}
.vision-container{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: var(--gap);
  align-items: center;
  background: linear-gradient(180deg, rgba(30,143,74,0.03), rgba(30,143,74,0.008));
  border-radius: var(--radius);
  padding: 48px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Texto */
.vision-text{
  flex: 1 1 60%;
  min-width: 280px;
}
.vision-text h1{
  margin:0 0 18px;
  font-size:44px;
  font-weight:700;
  color:var(--brand);
  line-height:1.04;
  letter-spacing:-0.4px;
}
.vision-text p{
  margin:0;
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  hyphens:auto;
}

/* Imagen: caja controlada para evitar overflow */
.vision-image{
  flex: 0 0 40%;
  max-width: 640px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background: var(--card);
  box-shadow: 0 12px 36px rgba(6,30,20,0.04);
  padding:8px;
}
.vision-image img{
  width:100%;
  height:100%;
  max-height:560px;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:10px;
  border:1px solid rgba(10,40,30,0.03);
}

/* Espacio extra abajo si hay botones/links */
.vision .btn,
.vision .btn-ver-codigo{
  margin-top:18px;
}

/* Responsive: tablet */
@media (max-width:1024px){
  main{ padding:36px 24px; margin:48px auto; }
  .vision-container{ padding:36px; gap:32px; }
  .vision-text h1{ font-size:36px; }
  .vision-image{ max-width:520px; }
  .vision-image img{ max-height:420px; }
}

/* Responsive: móvil */
@media (max-width:720px){
  main{ padding:20px; margin:20px; }
  .vision-container{
    flex-direction:column-reverse;
    text-align:center;
    padding:20px;
    gap:20px;
  }
  .vision-text{ order:2; }
  .vision-image{ order:1; width:100%; max-width:100%; }
  .vision-text h1{ font-size:24px; }
  .vision-text p{ font-size:15px; line-height:1.6; }
  .vision-image img{ max-height:320px; object-position:center top; }
}

/* Accesibilidad: foco visible para botones/links dentro */
.vision a:focus, .vision button:focus {
  outline: 3px solid rgba(30,143,74,0.16);
  outline-offset: 3px;
}