/* ===== Paleta / básicos ===== */
:root{
  --green:#7FBB83;
  --dark:#2A3A1C;
  --lime:#C2C057;
  --orange:#F28C28;
  --text:#222;
  --white:#fff;
  --max:1200px;
  --texture-size: 900px;
  --bush-h: 290px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --frame-w: 520px;
  --frame-h: 380px;
  --img-w:   480px;
  --img-h:   320px;
  --col-gap: 180px;
  --row-gap: 240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:var(--text);background:#fff}
.container{width:min(100%, var(--max));margin-inline:auto;padding-inline:16px}

  /* ===== Hojas ===== */
.mem-leaves{
  position: fixed;     
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;     
}

/* Hoja individual (igual que ya tienes) */
.mem-leaves .leaf{
  position: absolute;
  top: -80px;
  animation: leaf-fall linear forwards;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.15));
}

@keyframes leaf-fall{
  0%   { transform: translateY(-60px) rotate(0) }
  100% { transform: translateY(110vh) rotate(360deg) }
}

/* ===== HERO ===== */
.hero{
  background:#7FBB83;
  width:100%;
  height:700px;
  overflow:hidden;
}
.hero-inner{
  --gap:120px;
  max-width:1700px;
  height:100%;
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:7fr 3fr;
  align-items:center;
  gap:var(--gap);
}
.hero-inner img{
  display:block;
  width:100%;
  height:auto;
  max-height:calc(100% - 40px);
  object-fit:contain;
  min-width:0;
}
.hero-title-svg,.hero-illustration{max-width:100%}

/* ===== MEMORIAS: textura ===== */
.memorias{ position:relative; background:#fff; }
.memorias::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:multiply;
  background-image:url("/img/TexturaFondos.svg");
  background-repeat: repeat-y; 
  background-position: top center;
  background-size: 100% auto;
}
.memorias-inner{ position:relative; padding:80px 0 24px; }

/* ===== TIMELINE ===== */
.timeline{
  position:relative;
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns: var(--frame-w) var(--frame-w);
  grid-template-rows: repeat(4, auto);
  column-gap: var(--col-gap);
  row-gap: var(--row-gap);
  justify-content:center;
}

/* SVG detrás de las tarjetas */
.timeline-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}
.timeline-path{
  fill:none;
  stroke:#FF6C2E;
  stroke-width:10px;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.timeline-node{ fill:#FF6C2E; }

/* Alternancia escritorio */
.timeline-card{ position:relative; z-index:1; }
.timeline-card:nth-of-type(1){ grid-column:1; grid-row:1; }
.timeline-card:nth-of-type(2){ grid-column:2; grid-row:2; }
.timeline-card:nth-of-type(3){ grid-column:1; grid-row:3; }
.timeline-card:nth-of-type(4){ grid-column:2; grid-row:4; }
.timeline-card:nth-of-type(5){ grid-column:1; grid-row:5; }

/* Aparición sutil (CSS) */
.timeline-card{
  opacity:0; transform:translateY(22px); filter:blur(2px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change:opacity, transform, filter;
}
.timeline-card.is-visible{ opacity:1; transform:none; filter:blur(0); }
.timeline-card:nth-of-type(1){ transition-delay:.05s; }
.timeline-card:nth-of-type(2){ transition-delay:.12s; }
.timeline-card:nth-of-type(3){ transition-delay:.19s; }
.timeline-card:nth-of-type(4){ transition-delay:.26s; }
.timeline-card:nth-of-type(5){ transition-delay:.33s; }
@media (prefers-reduced-motion: reduce){ .timeline-card{ transition:none; } }

/* Marco + imagen */
.card-frame{
  position:relative;
  width:var(--frame-w);
  height:var(--frame-h);
  background:var(--frame, #7FBB83);
  display:grid; place-items:center;
  border:0; border-radius:0; box-shadow:none; overflow:hidden;
}
.card-frame img{
  width:var(--img-w);
  height:var(--img-h);
  object-fit:cover; display:block;
}

/* Botón Ver + */
.ver-mas{
  position:absolute; right:12px; bottom:12px;
  background:#F28C28; color:#fff; font-weight:800;
  padding:10px 16px; text-decoration:none; border:0; border-radius:0;
}

/* Título */
.card-title{
  margin:14px 0 0 0;
  font-size:26px; line-height:1.08; color:#2A3A1C;
  font-family:'Gotham Ultra', sans-serif;
}

/* Colores marco */
.timeline-card.color-1{ --frame:#7FBB83; }
.timeline-card.color-2{ --frame:#2A3A1C; }
.timeline-card.color-3{ --frame:#F0B500; }
.timeline-card.color-4{ --frame:#96C18F; }
.timeline-card.color-5{ --frame:#4A6B3E; }

/* Ardilla */
.squirrel{ position:relative; z-index:5; display:flex; justify-content:center; transform:translateY(30px); }
.squirrel-img{ width:min(500px,40vw); height:auto; }

/* Footer */
.site-footer{
  position:relative;
  background:#7FBB83;
  padding:64px 16px calc(84px + var(--bush-h) * 0.25);
  display:flex; align-items:center; justify-content:center; gap:28px;
  overflow:hidden;
}
/* Arbustos por defecto (ComResponsabilidad) */
.site-footer::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--bush-h);
  background-image:url("/img/memorias/comResponsabilidad/arbustos-footer.gif");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
  pointer-events:none;
  z-index:0;
}

/* Arbustos SOLO para Proyectos de Centro */
.site-footer--proyectos::after{
  background-image:url("/img/memorias/ProCentro/arbusto-footer.gif");
}

.site-footer--dig::after{
  background-image:url("/img/memorias/Digitalizacion/mata-19.gif");
}
.mem-cta{
  position:absolute; top:12px; right:24px;
  background:#F28C28; color:#fff; font-weight:900; letter-spacing:.5px;
  text-decoration:none; padding:10px 18px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease;
  z-index:5;
}
.mem-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.16); }

.social{ display:flex; gap:28px; z-index:1; }
.social-link{
  --bg:#1E4022; width:64px; height:64px; border-radius:999px; background:var(--bg); color:#fff;
  display:grid; place-items:center; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.social-link:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.22); }



/* ---------- RESPONSIVE ---------- */

/* Laptop típico (≤1366px) */
@media (max-width:1366px){
  :root{
    --frame-w: 500px; --frame-h: 360px;
    --img-w:   460px; --img-h:   310px;
    --col-gap: 160px; --row-gap: 220px;
  }
}

/* Tablet y abajo (≤1024px) */
@media (max-width:1024px){
  /* Hero en columna */
  .hero{ height:auto; }
  .hero-inner{
    grid-template-columns:1fr; gap:24px; padding:32px 20px;
  }
  .hero-title-svg{ max-width:820px; margin:0 auto; }
  .hero-illustration{ max-width:520px; margin:0 auto; }

  /* Timeline en una sola columna */
  :root{
    --frame-w: 480px; --frame-h: 340px;
    --img-w:   440px; --img-h:   300px;
    --col-gap: 0px;   --row-gap: 180px;
  }
  .timeline{
    grid-template-columns: var(--frame-w);
    justify-content: center;
    padding: 80px 0;
  }
  .timeline-card:nth-of-type(1),
  .timeline-card:nth-of-type(2),
  .timeline-card:nth-of-type(3),
  .timeline-card:nth-of-type(4),
  .timeline-card:nth-of-type(5){ grid-column:1; }
  .timeline-card:nth-of-type(1){ grid-row:1; }
  .timeline-card:nth-of-type(2){ grid-row:2; }
  .timeline-card:nth-of-type(3){ grid-row:3; }
  .timeline-card:nth-of-type(4){ grid-row:4; }
  .timeline-card:nth-of-type(5){ grid-row:5; }
  .card-title{ text-align:center; }

  /* Footer en columna */
  .site-footer{ padding:72px 16px calc(96px + var(--bush-h)*0.25); flex-direction:column; gap:24px; }
  .mem-cta{ position:static; order:1; }
  .social{ order:2; justify-content:center; }
}

/* Móvil (≤640px) */
@media (max-width:640px){
  :root{
    --frame-w: 92vw;
    --frame-h: calc(92vw * 0.73);
    --img-w:   calc(92vw - 40px);
    --img-h:   calc((92vw - 40px) * 0.67);
    --row-gap: 140px;
  }
  .hero-inner{ padding:24px 16px; }
  .hero-title-svg{ max-width:100vw; }
  .hero-illustration{ max-width:70vw; }
  .card-title{ font-size:22px; }
}