/* =========================
    Componentes específicos para 'Acerca de nosotros'
    ========================= */

/* Hero */
.hero { display:grid; grid-template-columns:1fr 420px; gap:2rem; align-items:center; margin-top:1rem; }
.hero-card { background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent); padding:2rem; border-radius:16px; box-shadow:var(--shadow-medium); border:1px solid var(--border-color); }
.eyebrow { font-size:0.9rem; color:var(--color-secundario_fade); margin-bottom:.5rem; }
.hero h1 { margin:0 0 .5rem 0; font-size:2.25rem; color:var(--color-fondo-light); line-height:1.05; }
.hero p.lead { color:var(--color-secundario); margin-bottom:1rem; }


/* Right panel (image) */
.hero-visual { background: linear-gradient(135deg, rgba(32,165,236,0.08), rgba(91,177,99,0.06));
    background-image: url('/static/mi_app/img/recurso_visual_2.jpeg');
    background-size: cover;
    background-position: center;
    padding:1rem; border-radius:14px; display:flex; align-items:center; justify-content:center; min-height:280px; }


/* Galería de imágenes responsive */
.gallery-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 10px;
    display: block;
    object-fit: contain;
    object-position: center;
    
}

/* Sections */
section.about { display:grid; grid-template-columns: repeat(2, 1fr); gap:1.25rem; margin-top:2rem; }
.card { background:var(--color-fondo-tertiary); padding:1.25rem; border-radius:12px; border:1px solid rgba(255,255,255,0.03); box-shadow:var(--shadow-light); }
.card h3 { margin-top:0; color:var(--color-fondo-light); }
.muted { color:var(--color-secundario_fade); font-size:0.95rem; }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(10px); transition: all 0.6s var(--transition-smooth); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Small responsive tweaks */
@media (max-width:1100px) {
    .hero { grid-template-columns:1fr; }
    section.about { grid-template-columns:1fr; }
}