/* historia.css — styles for nuestra-historia timeline page */
:root{
  --bg:#f7fbff;
  --muted:#6b7280;
  --accent:#0b6b3a; /* green */
  --accent-2:#1f6fbf; /* blue */
  --card:#ffffff;
  --glass: rgba(255,255,255,0.7);
}
body{background:var(--bg)}
.hist-hero{background-image:linear-gradient(180deg,rgba(5,20,44,0.28),rgba(5,20,44,0.14)), url('/assets/Vista.jpg');background-size:cover;background-position:center;padding:120px 0;color:#fff;position:relative}
.hist-hero .container{position:relative;z-index:2}
.hist-hero h1{font-size:clamp(40px,6vw,72px);margin:0 0 6px;letter-spacing:1.6px}
.hist-hero p{max-width:820px;color:rgba(255,255,255,0.92);margin:6px 0 0}

.container.main{max-width:1200px;margin:36px auto;padding:0 24px}
.lead-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;align-items:stretch}
.lead-card{background:var(--card);padding:28px;border-radius:12px;box-shadow:0 18px 50px rgba(8,16,34,0.06);display:flex;flex-direction:column;justify-content:center;min-height:220px}
.lead-card h3{margin:0 0 8px;color:var(--accent);font-size:1.35rem}
.lead-card p{margin:0;color:var(--muted);line-height:1.75}
.lead-card.lead-mission{border-left:6px solid var(--accent)}
.lead-card.lead-mission h3,.lead-card.lead-vision h3{font-size:1.5rem}
.lead-card.lead-vision{border-left:6px solid var(--accent-2)}

/* 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}

/* Timeline */
.timeline{position:relative;padding:40px 0 20px;margin-top:120px}
.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent-2));transform:translateX(-50%);border-radius:4px}
.timeline-list{display:grid;grid-auto-rows:minmax(160px,auto);gap:48px;grid-template-columns:1fr}
.milestone{position:relative;display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:18px}
.milestone .side{padding:14px 18px;background:var(--card);border-radius:10px;box-shadow:0 10px 30px rgba(8,16,34,0.06)}
.milestone .side h4{margin:0 0 6px;color:var(--accent)}
.milestone .side p{margin:0;color:var(--muted)}
.milestone .marker{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);box-shadow:0 6px 18px rgba(8,16,34,0.08);border:4px solid rgba(255,255,255,0.85);}
.milestone .marker .dot{width:14px;height:14px;border-radius:50%;background:var(--accent)}

.milestone.left .side{grid-column:1}
.milestone.left .marker{grid-column:2}
.milestone.left .side-right{grid-column:3}
.milestone.right .side{grid-column:3}
.milestone.right .marker{grid-column:2}
.milestone.right .side-left{grid-column:1}

.milestone img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-top:10px}

/* Details panel when expanded */
.milestone .details{margin-top:12px;max-height:0;overflow:hidden;transition:max-height 420ms ease;padding:0 6px}
.milestone.expanded .details{max-height:420px}

/* Hover and focus effects */
.milestone .side:hover, .milestone .side:focus{transform:translateY(-6px);transition:transform 260ms}
.milestone .marker:hover .dot{transform:scale(1.15)}

/* Lines and responsiveness */
@media (min-width:980px){
  .timeline-list{grid-auto-rows:auto}
  .milestone{grid-template-columns:1fr 60px 1fr}
  .milestone .side{min-width:320px}
}

@media (max-width:979px){
  .timeline-line{left:16px;transform:none;width:3px}
  .timeline-list{gap:20px}
  .milestone{grid-template-columns:48px 1fr;align-items:start}
  .milestone .marker{grid-column:1}
  .milestone .side{grid-column:2}
  .milestone.right .side{grid-column:2}
}

/* Lines of action grid */
.actions-title{font-size:clamp(20px,3.6vw,32px);text-align:center;color:var(--accent-2);margin-bottom:12px}
.actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.action{background:linear-gradient(180deg,var(--card),#fbfdff);padding:20px;border-radius:12px;box-shadow:0 22px 60px rgba(8,16,34,0.06);text-align:center;transform-origin:center;transition:transform 260ms ease,box-shadow 260ms}
.action h4{margin:6px 0;color:var(--accent);font-size:1.1rem}
.action p{margin:0;color:var(--muted);font-size:1rem}

/* action animations */
@keyframes popInAction{0%{opacity:0;transform:translateY(18px) scale(.98)}60%{opacity:1;transform:translateY(-6px) scale(1.02)}100%{opacity:1;transform:none}}
.actions-grid.in-view .action{opacity:0}
.actions-grid.in-view .action:nth-child(1){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 0ms}
.actions-grid.in-view .action:nth-child(2){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 80ms}
.actions-grid.in-view .action:nth-child(3){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 160ms}
.actions-grid.in-view .action:nth-child(4){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 240ms}
.actions-grid.in-view .action:nth-child(5){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 320ms}
.actions-grid.in-view .action:nth-child(6){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 400ms}

.action:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 36px 90px rgba(8,16,34,0.14)}

/* Activities grid */
.activities h3{font-size:clamp(20px,3.2vw,26px);text-align:left;color:var(--accent);margin-bottom:12px}
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.activity-card{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(180deg,var(--card),#fbfdff);padding:16px;border-radius:12px;box-shadow:0 18px 48px rgba(8,16,34,0.06);transition:transform 260ms,box-shadow 260ms;overflow:hidden}
.activity-card .icon{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(180deg,rgba(11,107,58,0.08),rgba(31,111,191,0.04))}
.activity-card .body h4{margin:0 0 6px;color:var(--accent);font-size:1.05rem}
.activity-card .body p{margin:0;color:var(--muted);font-size:0.98rem;line-height:1.55}
.activity-card:hover{transform:translateY(-8px);box-shadow:0 34px 88px rgba(8,16,34,0.12)}

/* stagger reveal for activity cards when parent .activities has in-view */
.activities.in-view .activity-card{opacity:0}
.activities.in-view .activity-card:nth-child(1){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 0ms}
.activities.in-view .activity-card:nth-child(2){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 80ms}
.activities.in-view .activity-card:nth-child(3){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 160ms}
.activities.in-view .activity-card:nth-child(4){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 240ms}
.activities.in-view .activity-card:nth-child(5){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 320ms}
.activities.in-view .activity-card:nth-child(6){animation:popInAction 520ms cubic-bezier(.2,.9,.2,1) forwards 400ms}

/* Upcoming goals */
.upcoming{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.goal{background:linear-gradient(90deg, rgba(15,120,70,0.04), rgba(27,103,191,0.02));padding:16px;border-radius:12px;border-left:6px solid var(--accent);}
.goal h4{margin:0 0 8px}
.goal p{margin:0;color:var(--muted)}

/* small screens */
@media (max-width:980px){
  .actions-grid{grid-template-columns:repeat(2,1fr)}
  .activity-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:680px){
  .lead-cards{grid-template-columns:1fr}
  .actions-grid{grid-template-columns:1fr}
  .lead-card{min-height:140px}
}

/* reveal helpers */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 640ms ease,transform 640ms}
.reveal.in-view{opacity:1;transform:none}