@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500&display=swap');

:root{
  --bg:#f6f7fb; 
  --txt:#0a2433; 
  --muted:#5b6b7a;
  --primary:#20c36a; 
  --primary2:#0bb36a;
  --card:#fff; 
  --line:rgba(10,36,51,.12);
  --radius:20px; 
  --shadow:0 20px 40px rgba(10,36,51,.12);
}
@media (max-width: 768px) {
    /* Esto ya lo tienes, ¡perfecto! */
    .main-content {
        flex-direction: column;
        text-align: center; /* Alinea el texto al centro en móviles */
    }

    /* Ajustar el espaciado para móviles */
    .text-content, .image-content {
        padding: 0 10px; /* Reduce el padding en los laterales */
    }
    
    /* Asegurar que el título y el subtítulo se vean bien */
    .main-content h1, .main-content h2 {
        font-size: 1.5rem; /* Ajusta el tamaño de la fuente para que no sea demasiado grande */
    }

    /* Asegurar que las imágenes no desborden */
    .image-content img {
        max-width: 100%;
        height: auto;
    }
}
/* Estilos para el menú en móviles */
@media (max-width: 768px) {
    /* Oculta los links de navegación */
    .navbar-links {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }
    
    /* Muestra el botón para el menú */
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 1.5rem;
        padding: 10px 20px;
        color: #28a745;
        z-index: 1000;
    }
    
    /* Cuando el menú está activo, se muestra */
    .navbar-links.active {
        display: flex;
        position: absolute;
        top: 60px; /* Ajústalo según la altura de tu header */
        left: 0;
        background-color: #fff;
        border-top: 1px solid #eee;
    }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font:16px/1.6 Inter,system-ui
}
h1,h2,h3{font-family:Poppins,system-ui;margin:0 0 .6rem}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin:auto}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(6px);
  background:linear-gradient(180deg,#ffffffee,#ffffffc8);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary2))}
.menu{display:flex;gap:18px;flex-wrap:wrap}
.menu a{padding:8px 10px;border-radius:12px}
.menu a.active,.menu a:hover{background:rgba(32,195,106,.12)}

/* CTA button */
.btn{
  display:inline-block;padding:12px 20px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;font-weight:600;box-shadow:0 10px 24px rgba(11,179,106,.35);
}
.btn.ghost{background:transparent;color:var(--primary);border:2px solid var(--primary);box-shadow:none}

/* HERO (inspirado en la imagen) */
.hero{
  position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#fff,#f1f6f2);
}
.hero .container{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;padding:64px 0}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}
.hero h1{font-size:clamp(28px,5vw,48px)}
.hero p{color:var(--muted);margin:8px 0 22px}
/* Add to estilos.css */
/* Add this at the end or update if already present */

.imagen {
    display: flex;
    justify-content: center;

}

.imagen img {
    width: 250px;
    height: auto;
    border: 3px solid var(--primary);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(32,195,106,0.10);
    background: #fff;
    margin: 0;
}

.hero-blob::before,.hero-blob::after{
  content:""; position:absolute; inset:10%; border-radius:40px; mix-blend-mode:soft-light;
}
.hero-blob::before{background:radial-gradient(60% 60% at 70% 20%, #c9ffd6 0%, #22c06300 60%)}
.hero-blob::after{inset:0; background:conic-gradient(from 40deg, #27cf82aa, #19a86733, #27cf8288)}

/* SECTIONS */
.section{padding:56px 0}

/* --- 🎨 Objetivos con más color --- */
.section.objetivos {
  background: linear-gradient(135deg, #e9fdf3, #f9fffa);
  padding: 60px 0;
  border-radius: 0 0 40px 40px;
}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:#ffffff;
  border:2px solid rgba(32,195,106,0.25);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 8px 22px rgba(32,195,106,0.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 28px rgba(32,195,106,0.25);
}
.card h3{font-size:1.1rem;margin-bottom:.4rem;color:#0a7a49}
.lead{font-size:1.05rem;color:#444}
h1,h2{color:#0a7a49}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:16px;border:1px solid var(--line);box-shadow:0 14px 28px rgba(0,0,0,.06)}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price{display:flex;align-items:baseline;gap:6px;margin:12px 0 18px}
.price strong{font-size:2rem}
.badge{font-size:.75rem;background:#eafaf1;color:#0b8b54;border:1px solid #b8efcd;padding:4px 10px;border-radius:999px}

/* Contact */
form{display:grid;gap:14px}
.input, textarea{
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;
  font:inherit
}
textarea{min-height:140px;resize:vertical}

/* Footer */
footer{
  margin-top:40px;
  padding:28px 0;
  border-top:1px solid var(--line);
  color:var(--muted)
}
footer .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

/* Responsive */
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr; padding:42px 0}
  .hero-blob{height:280px}
  .grid-3,.gallery,.pricing{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .menu{gap:10px}
  .grid-3,.gallery,.pricing{grid-template-columns:1fr}
}

/* Logo */
.logo-img{
  height:38px;
  width:auto;
  border-radius:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.1rem;
}

/* Centrar las tarjetas de miembros */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
}
.team-grid .card {
  flex: 1 1 280px; /* tamaño mínimo de cada tarjeta */
  max-width: 320px;
}

/* Centrar galería */
.gallery-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
}

.gallery-center figure {
  flex: 1 1 260px;  /* tamaño mínimo de cada tarjeta de imagen */
  max-width: 320px;
  text-align: center;
}

.gallery-center img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}

/* Centrar títulos y subtítulo en la sección de miembros */
.section.objetivos h1,
.section.objetivos h2,
.section.objetivos p.lead {
  text-align: center;
}

/* Grid de miembros centrado */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centra las tarjetas */
  gap: 22px;
  margin-top: 30px;
}

.team-grid .card {
  flex: 1 1 260px;
  max-width: 300px;
  text-align: center;        /* centra texto dentro de cada tarjeta */
}

/* Asegurar que los links usen tus colores y no el azul por defecto */
a, a:visited, a:active {
  color: inherit;
  text-decoration: none;
}

/* Hover/activo mantiene tu estilo de antes */
.menu a.active,
.menu a:hover {
  background: rgba(32,195,106,.12);
  color: var(--primary);
}