/* sobre/index.html — bold, dramatic styles and animations */
:root{
  --accent:#052887;
  --muted-2:#6b7a91;
  --card-bg:#ffffff;
}

/* Page-specific helpers for responsabilidad */
.icon-title{display:flex;align-items:center;justify-content:center;gap:12px}
.icon-title svg{width:44px;height:44px;flex:0 0 44px;opacity:0.98}
.lead-quote{margin:28px auto;padding:22px 28px;border-left:6px solid var(--accent);background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(250,253,255,0.98));max-width:980px;border-radius:8px;font-style:italic;font-size:1.15rem;color:#09315a}
.lead-text{max-width:78ch;margin:18px auto;color:#0b2338;line-height:1.9}

/* Team grid styles */
.team-section{padding:38px 16px 72px}
.team-title{font-size:clamp(28px,4vw,40px);text-align:center;color:var(--accent);text-transform:lowercase;letter-spacing:1.5px;margin:8px 0 26px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1200px;margin:0 auto;align-items:start}
.member-card{text-align:center;padding:6px}
.member-photo{width:100%;height:260px;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 20px 48px rgba(8,16,34,0.06);transition:transform 300ms ease}
.member-link{display:block;text-decoration:none}
.member-card:hover .member-photo{transform:translateY(-6px) scale(1.02)}
.member-name{display:block;margin-top:12px;font-weight:800;color:var(--accent);font-size:1.05rem}
.member-role{display:block;margin-top:6px;color:#0b0b0b;font-weight:600}

@media (max-width:980px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .member-photo{height:220px}
}
@media (max-width:600px){
  .team-grid{grid-template-columns:1fr}
  .member-photo{height:280px}
}


/* Hero styling: big uppercase title, subtle animation */
.hero--static{background-size:cover;background-position:center;padding:140px 0;color:#fff;position:relative;overflow:hidden}
.hero--static::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,30,0.45),rgba(4,12,30,0.65));mix-blend-mode:multiply}
.hero .container{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 24px}
.hero-title{font-weight:900;letter-spacing:2px;text-transform:uppercase;font-size:clamp(36px,7vw,84px);line-height:0.95;margin:0 0 6px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.98);background:linear-gradient(90deg,#fff,#dfe9ff);-webkit-background-clip:text;background-clip:text}
.hero-sub{font-weight:700;opacity:0.95;margin:0;color:rgba(255,255,255,0.9);font-size:1.05rem}

/* Animated overlay shapes */
.hero--static .orb{position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(46px);opacity:0.16;mix-blend-mode:screen}
.hero--static .orb.orb-1{left:-60px;top:20px;background:linear-gradient(180deg,#2b73b6,#052887)}
.hero--static .orb.orb-2{right:-80px;bottom:-40px;background:linear-gradient(180deg,#7fb3ff,#2b73b6)}

/* Big section separators */
.container.content{max-width:1200px;margin:36px auto;padding:0 24px}
.about-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:start;max-width:980px;margin:0 auto;padding:10px 0}
.about-main{padding-top:34px}
.about-main h2{font-size:clamp(44px,6vw,76px);margin:28px 0 32px;text-transform:uppercase;letter-spacing:2px;color:var(--accent);text-align:center}
.about-main p{color:#0b0b0b;line-height:1.95;max-width:76ch;margin:0 auto 22px;text-align:inherit}

/* Split layout: image left, text right with decorative rectangle */
.split{display:grid;grid-template-columns:360px 1fr;gap:44px;align-items:center;margin:64px 0}
.split .media{height:320px;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 16px 46px rgba(8,16,34,0.08);position:relative;overflow:visible}
.split .media::after{content:'';position:absolute;left:-14px;top:12px;width:28px;height:60%;background:linear-gradient(180deg,var(--accent),#2b73b6);border-radius:6px;transform:skewY(-6deg);opacity:0.85}
.split .content h3{font-size:20px;text-transform:uppercase;letter-spacing:1.8px;color:var(--accent);margin:0 0 10px}
.split .content p{margin:0;color:#0b0b0b}

/* Slight hover/entrance effect for media */
.split .media{transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms}
.split:hover .media{transform:translateY(-10px) scale(1.02);box-shadow:0 36px 84px rgba(8,16,34,0.16)}

/* Ensure reveals animate nicely (prefers-reduced-motion respected by JS) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 680ms ease,transform 680ms cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* Stat tiles with counter animation */
.stat-row{display:flex;gap:18px;margin:22px 0}
.stat{background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,251,255,0.98));padding:18px;border-radius:10px;min-width:110px;text-align:center;border-left:4px solid var(--accent)}
.stat strong{display:block;font-size:1.8rem;color:var(--accent);font-weight:900}
.stat span{display:block;color:var(--muted-2);font-weight:700}

/* Cards and stories */
.card{background:var(--card-bg);border-radius:12px;padding:18px;box-shadow:0 18px 50px rgba(8,16,34,0.07);transition:transform 220ms cubic-bezier(.2,.9,.2,1)}
.card:hover{transform:translateY(-8px)}

/* Story tiles grid */
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:12px}
.story-grid .card h4{margin:0 0 8px;font-size:1.05rem;text-transform:uppercase}
.story-grid .card p{margin:0;color:var(--muted-2)}

/* Stories enhanced section */
.stories-section{position:relative;overflow:visible}
.stories-section h2{margin-bottom:18px;text-align:center}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:12px}
.story-card{display:flex;flex-direction:column;overflow:hidden;border-radius:12px;padding:0;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 26px 60px rgba(6,14,38,0.06);transform-origin:center center;will-change:transform,box-shadow,opacity}
.story-media{height:160px;background-size:cover;background-position:center}
.story-body{padding:16px}
.story-body h4{margin:0 0 8px;font-size:1.05rem;color:var(--accent);text-transform:uppercase}
.story-body p{margin:0;color:#0b0b0b;line-height:1.6}

/* Animated ambient background for stories */
.stories-section::before{content:'';position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:1200px;height:260px;background:radial-gradient(closest-side,rgba(43,115,182,0.06),transparent 40%);pointer-events:none}

/* entrance animation for cards */
@keyframes cardPop{0%{opacity:0;transform:translateY(28px) scale(.98)}60%{opacity:1;transform:translateY(-6px) scale(1.01)}100%{transform:none}}
.story-card.in-view{animation:cardPop 720ms cubic-bezier(.2,.9,.2,1) both}

/* 3D tilt effect: handled by JS to set transform; fallback hover scale */
.story-card:hover{transform:translateY(-6px) scale(1.01)}

@media (max-width:980px){
  .stories-grid{gap:18px}
  .story-media{height:180px}
}

/* Sidebar card CTA */
.about-sidebar .card h4{margin-top:0}
.about-sidebar .btn-donate{background:var(--accent);color:#fff;padding:12px 16px;border-radius:8px;text-decoration:none;display:inline-block}

/* Section dividers: thick line and spacing */
.container .divider{height:1px;background:linear-gradient(90deg,transparent,#e6eef9,transparent);margin:40px 0}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* Hero text subtle float */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.hero-title{animation:floaty 6s ease-in-out infinite}

/* Responsive adjustments */
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr}
  .hero-title{font-size:clamp(28px,9vw,56px)}
  .hero--static{padding:100px 0}
  .split{grid-template-columns:1fr;}
  .split .media{height:240px}
  .about-main h2{font-size:clamp(32px,8vw,48px);margin:18px 0 22px}
}

@media (max-width:480px){
  .stat-row{flex-direction:row;overflow:auto}
  .stat{min-width:120px}
}