/* Nosotros (About) page styles */
:root {
  --about-bg-top: rgba(220,38,38,0.28); /* red-ish */
  --about-bg-bottom: rgba(17,24,39,0.92); /* near black */
  --about-surface: #ffffff;
  --about-muted: #667085;
  --about-text: #111827;
  --about-accent-1: var(--color_company_1, #AF0000); /* Jump */
  --about-accent-2: var(--color_company_2, #111827); /* Jadu */
}

.about-page { color: var(--about-text); }
.container { width: min(1120px, 92%); margin: 0 auto; }

/* Hero */
.about-hero {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 35%, rgba(0,0,0,.55) 100%),
    url('/img/jump-banner.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 8vw, 120px);
  color: #fff;
  text-align: left;
}
/* subtle decorative overlay */
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 400px at 10% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%),
              radial-gradient(700px 260px at 95% 10%, rgba(175,0,0,0.15) 0%, rgba(175,0,0,0) 60%);
  pointer-events: none;
  z-index: -1;
}
/* parallax-like on desktop */
@media (min-width: 1024px) {
  .about-hero { background-attachment: fixed; }
}
.about-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 0 0 10px; letter-spacing: .2px; }
.about-hero .lead { font-size: clamp(16px, 2.4vw, 22px); opacity: .97; margin: 8px 0 14px; }
.about-hero .intro { max-width: 860px; font-size: clamp(14px, 2.1vw, 18px); opacity: .95; }

/* Brands */
.about-brands { padding: 40px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: var(--about-surface); border-radius: 14px; padding: 18px 18px; box-shadow: 0 8px 28px rgba(0,0,0,.07); }
.brand-card h2 { margin: 0 0 10px; font-size: clamp(20px, 3vw, 26px); }
.brand-card.jump h2 { color: var(--about-accent-1); }
.brand-card.jadu h2 { color: var(--about-accent-2); }
.brand-card p { color: #374151; margin: 10px 0 14px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.pill-list li { background: #f5f7fb; color: #111827; border: 1px solid #e3e8ef; border-radius: 999px; padding: 6px 10px; font-size: 13px; }

/* One place */
.about-one-place { padding: 36px 0; }
.about-one-place h2 { font-size: clamp(22px, 3.5vw, 30px); margin: 0 0 8px; }
.about-one-place p { color: #374151; max-width: 880px; }
.features { margin-top: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature { background: #fff; border-radius: 12px; padding: 16px; border: 1px solid #eef2f7; box-shadow: 0 6px 18px rgba(0,0,0,.05); display: flex; flex-direction: column; align-items: flex-start; }
.feature .icon { font-size: 22px; margin-bottom: 6px; }
.feature h3 { font-size: 15px; margin: 0; color: #111827; }

/* Info (mission / vision / promise) */
.about-info { padding: 20px 0 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.info-card { background: #fff; border-radius: 12px; padding: 18px; border: 1px solid #eef2f7; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.info-card h3 { margin: 0 0 8px; color: #111827; }
.info-card p { margin: 0; color: #374151; }

/* CTA */
.about-cta { padding: 28px 0 56px; text-align: center; }
.about-cta h2 { margin: 0 0 8px; font-size: clamp(22px, 3.5vw, 30px); }
.about-cta p { margin: 0 0 16px; color: #374151; }
.btn { display: inline-block; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--about-accent-1); color: #fff; box-shadow: 0 8px 22px rgba(175,0,0,.25); }
.btn-primary:hover { filter: brightness(0.95); }

/* Responsive */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* Scroll reveal animations */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal[style*="--delay"] { transition-delay: var(--delay); }

/* Variants */
.fade-up { /* uses base reveal transitions */ }
.fade-in { opacity: 0; transform: none; }
.fade-in.in-view { opacity: 1; }
.slide-up { transform: translateY(28px); }
.slide-up.in-view { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .slide-up, .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}