/* ============================================ NOSOTROS.CSS ============================================ */
.about-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: #fff; padding: 5rem 1.5rem 4rem; text-align: center; position: relative; overflow: hidden; }
.about-hero::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(245,130,10,0.15) 0%, transparent 70%); pointer-events: none; }
.about-hero h1 { color: #fff; margin-bottom: 0.75rem; } .about-hero h1 span { color: var(--orange); }
.about-hero p { color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto; }
.story-section { padding: 5rem 1.5rem; }
.story-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: var(--max-w); margin: 0 auto; }
.story-img-wrap { position: relative; }
.story-img { width: 100%; height: 400px; border-radius: var(--radius-xl); object-fit: cover; box-shadow: var(--shadow-lg); }
.story-img-placeholder { width: 100%; height: 400px; background: linear-gradient(135deg, var(--orange-light), var(--bg-soft)); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--orange-mid); color: var(--orange); font-size: 0.85rem; gap: 0.5rem; }
.story-img-badge { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--orange); color: #fff; border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-orange); text-align: center; }
.story-img-badge-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.story-img-badge-label { font-size: 0.72rem; font-weight: 600; opacity: 0.9; }
.story-text h2 { margin-bottom: 1rem; color: var(--navy); } .story-text h2 span { color: var(--orange); }
.story-text p { margin-bottom: 1rem; }
.values-section { background: var(--navy); padding: 5rem 1.5rem; text-align: center; }
.values-section .section-label { color: var(--orange); } .values-section .section-title { color: #fff; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: var(--max-w); margin: 2.5rem auto 0; }
.value-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: 2rem 1.5rem; transition: all 0.2s; }
.value-card:hover { background: rgba(245,130,10,0.1); border-color: var(--orange); transform: translateY(-4px); }
.value-card .card-icon { font-size: 2.2rem; margin-bottom: 1rem; }
.value-card h3 { color: #fff; margin-bottom: 0.4rem; } .value-card p { color: rgba(255,255,255,0.65); font-size: 0.87rem; }
.stats-section { padding: 4rem 1.5rem; background: var(--bg-warm); text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 800px; margin: 0 auto; }
.stat-item { padding: 2rem 1rem; background: #fff; border-radius: var(--radius-xl); border: 1.5px solid var(--orange-mid); box-shadow: var(--shadow-sm); }
.stat-num { font-size: 3rem; font-weight: 800; color: var(--orange); line-height: 1; margin-bottom: 0.4rem; }
.stat-label { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
@media (max-width: 768px) { .story-inner { grid-template-columns: 1fr; gap: 3rem; } .values-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; gap: 1rem; } .story-img-badge { bottom: 1rem; right: 1rem; } }