/* ===== Hojas animadas (hero, galería, visor) ===== */
.leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.lf{position:absolute;top:-60px;width:var(--s,24px);height:var(--s,24px);background:var(--img) center/contain no-repeat;opacity:var(--o,.7);
  animation:lfall var(--t,16s) linear var(--dl,0s) infinite;will-change:transform}
.lf.c1{--img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C11 3 4 9 4 17c0 1 .2 2 .5 3 1 .3 2 .5 3 .5C15 20.5 21 13 21 3z' fill='%236bbe2e'/%3E%3Cpath d='M5 19C9 13 13 9 18 6' stroke='%23eaf6e3' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.lf.c2{--img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C11 3 4 9 4 17c0 1 .2 2 .5 3 1 .3 2 .5 3 .5C15 20.5 21 13 21 3z' fill='%233ea33a'/%3E%3Cpath d='M5 19C9 13 13 9 18 6' stroke='%23d6f0c4' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.lf.c3{--img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C11 3 4 9 4 17c0 1 .2 2 .5 3 1 .3 2 .5 3 .5C15 20.5 21 13 21 3z' fill='%231f7a34'/%3E%3Cpath d='M5 19C9 13 13 9 18 6' stroke='%23a6e07a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
@keyframes lfall{
  0%{transform:translate3d(0,0,0) rotate(0)}
  25%{transform:translate3d(calc(var(--dx,60px) * .6),28vh,0) rotate(calc(var(--r,300deg) * .25))}
  50%{transform:translate3d(calc(var(--dx,60px) * -.3),58vh,0) rotate(calc(var(--r,300deg) * .5))}
  75%{transform:translate3d(calc(var(--dx,60px) * .8),88vh,0) rotate(calc(var(--r,300deg) * .75))}
  100%{transform:translate3d(var(--dx,60px),118vh,0) rotate(var(--r,300deg))}
}
.hero .leaves{z-index:1}
.hero__in{z-index:2}

/* ===== Sección de trabajos ===== */
.work{position:relative;background:linear-gradient(160deg,#0b2e16 0%,#0f3d1e 45%,#1f7a34 100%);padding:130px 0 110px;overflow:hidden;color:#fff}
.work::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.18))}
.work__wave{position:absolute;top:-1px;left:0;width:100%;height:80px;display:block;z-index:2}
.work__in{position:relative;z-index:2}
.work__title{color:#fff;text-align:center;font-size:clamp(3rem,8vw,5rem)}
.work__sub{text-align:center;color:#cfe6d3;margin:6px 0 44px}
.masonry{columns:3 300px;column-gap:20px}
.tile{position:relative;display:block;margin:0 0 20px;border-radius:20px;overflow:hidden;break-inside:avoid;cursor:zoom-in;
  box-shadow:0 14px 34px rgba(0,0,0,.35);background:#0b2e16;transform:translateZ(0);outline-offset:3px}
.tile img{width:100%;height:auto;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(7,30,14,.92));opacity:.0;transition:opacity .4s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.09);filter:saturate(1.15)}
.tile:hover::before,.tile:focus-visible::before{opacity:1}
.tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 18px 16px;display:flex;flex-direction:column;gap:2px;
  transform:translateY(24px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
.tile__cap b{font-family:'Playfair Display',serif;font-size:1.1rem;line-height:1.25}
.tile__cap i{font-style:normal;font-size:.82rem;color:#a6e07a;letter-spacing:.06em;text-transform:uppercase}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{transform:none;opacity:1}
.tile__leaf{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C11 3 4 9 4 17c0 1 .2 2 .5 3 1 .3 2 .5 3 .5C15 20.5 21 13 21 3z' fill='%231f7a34'/%3E%3C/svg%3E") center/18px no-repeat;
  transform:scale(0) rotate(-90deg);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.tile:hover .tile__leaf,.tile:focus-visible .tile__leaf{transform:none}
/* Respiro suave: las imágenes "flotan" al entrar */
.tile.reveal{transform:translateY(40px) scale(.97)}
.tile.reveal.in{transform:none}

/* ===== Visor ===== */
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(5,22,11,.94);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb__fig{position:relative;z-index:3;margin:0;max-width:min(1100px,100%);display:grid;gap:14px;justify-items:center}
.lb__fig img{max-width:100%;max-height:68vh;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.55);transition:opacity .3s,transform .4s}
.lb__fig img.swap{opacity:0;transform:scale(.97)}
.lb figcaption{text-align:center;color:#fff;max-width:720px}
.lb h3{font-family:'Playfair Display',serif;font-size:clamp(1.3rem,3vw,1.9rem);margin:2px 0 6px}
.lb p{color:#cfe6d3;font-size:.98rem}
.lb__count{color:#a6e07a;font-size:.8rem;letter-spacing:.12em}
.lb__btn{position:absolute;z-index:4;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.lb__btn:hover{background:#3ea33a;transform:scale(1.08)}
.lb__close{top:16px;right:16px}.lb__prev{left:16px;top:50%;margin-top:-24px}.lb__next{right:16px;top:50%;margin-top:-24px}
body.noscroll{overflow:hidden}

@media (max-width:900px){.masonry{columns:2 200px}}
@media (max-width:560px){
  .masonry{columns:1}.work{padding:100px 0 80px}
  .tile__cap{opacity:1;transform:none;padding-top:40px}.tile::before{opacity:1}
  .lb__prev,.lb__next{top:auto;bottom:18px;margin:0}.lb__prev{left:calc(50% - 60px)}.lb__next{right:calc(50% - 60px)}
  .lb__fig img{max-height:56vh}
}
@media (prefers-reduced-motion:reduce){.lf{display:none}}

/* Tarjetas de servicios centradas aunque la última fila quede incompleta */
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.grid>.card{flex:0 1 calc(33.333% - 16px)}
@media (max-width:900px){.grid>.card{flex-basis:calc(50% - 12px)}}
@media (max-width:560px){.grid>.card{flex-basis:100%}}