/* Campo de color fluido, inspirado en los gradientes mesh de GradFlow. */
.landing{isolation:isolate;background:var(--sand)}
.landing::before{
  content:"";position:fixed;inset:-18%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 48% 18%,var(--cream) 0%,transparent 46%),
    radial-gradient(ellipse at 9% 68%,var(--sage) 0%,transparent 45%),
    radial-gradient(ellipse at 92% 78%,var(--mid) 0%,transparent 42%),
    radial-gradient(ellipse at 70% 37%,var(--pale) 0%,transparent 58%),
    var(--sand);
  animation:galleryFlow 26s ease-in-out infinite alternate;
  will-change:transform;
}
.landing::after{opacity:.16}
@keyframes galleryFlow{
  from{transform:translate3d(-2%,1%,0) rotate(-5deg) scale(1.04)}
  to{transform:translate3d(3%,-2%,0) rotate(7deg) scale(1.1)}
}
.landing-page{min-height:100svh;display:flex;flex-direction:column;padding-bottom:16px}
.landing-page>main{flex:1;display:grid;align-items:center;min-width:0}
.hero--gallery{grid-template-columns:minmax(0,1fr);align-content:center;padding:clamp(16px,2.5svh,28px) 0 8px;text-align:center}
.hero--gallery #heroTexto{width:100%;max-width:960px;margin-inline:auto;position:relative;z-index:2}
.hero--gallery .hero__title{font-size:clamp(38px,4.4vw,62px);text-align:center;text-wrap:balance;margin-bottom:0}
.hero--gallery .hero__eyebrow{margin-bottom:14px}
.hero--gallery>.hero__lead{max-width:54ch;justify-self:center;margin:4px 0 16px;text-align:center;font-size:17px;line-height:1.6}
.hero--gallery .vidhalo{text-shadow:none}

.hero-gallery{
  --gallery-scene-height:clamp(300px,49svh,500px);
  position:relative;min-width:0;
  height:var(--gallery-scene-height);
  margin:0 calc(-1 * var(--pad));
  overflow:clip;
}
.hero-gallery__track{
  position:relative;width:100%;height:100%;list-style:none;
  perspective:1000px;perspective-origin:50% 50%;
}
.hero-gallery__item{
  --gallery-item-x:0px;--gallery-item-z:0px;--gallery-item-angle:0deg;
  position:absolute;top:50%;left:50%;width:min(54vw,720px,calc((var(--gallery-scene-height) - 78px) * 1.6));
  transform:translate(-50%,-50%) translate3d(var(--gallery-item-x),0,var(--gallery-item-z)) rotateY(var(--gallery-item-angle));
  transform-style:preserve-3d;will-change:transform;
}
.hero-gallery__card{
  display:block;color:var(--deep);text-decoration:none;text-align:left;
  border-radius:22px;background:var(--cream);
  border:1px solid color-mix(in srgb,var(--cream) 75%,transparent);
  box-shadow:0 12px 28px color-mix(in srgb,var(--deep) 16%,transparent);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.hero-gallery__card img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:21px 21px 0 0}
.hero-gallery__caption{display:block;padding:12px 18px 14px;font-size:15px;font-weight:800;letter-spacing:-.02em}
.hero-gallery__card:focus-visible{outline:3px solid var(--olive);outline-offset:5px}
.hero-gallery__item:focus-within{z-index:2000!important}
@media (hover:hover) and (pointer:fine){
  .hero-gallery__card:hover{box-shadow:0 22px 38px color-mix(in srgb,var(--deep) 22%,transparent)}
}

.hero-gallery__services{justify-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:var(--r-pill);background:var(--olive);color:var(--cream);font-size:15px;font-weight:700;text-decoration:none;transition:background .2s ease,transform .2s ease}
.hero-gallery__services:hover{background:var(--deep);transform:translateY(-2px)}

/* Alternativa accesible sin JavaScript o con movimiento reducido. */
.hero-gallery:not(.hero-gallery--running),.hero-gallery--static{height:auto;overflow:visible;margin-block:20px}
.hero-gallery:not(.hero-gallery--running) .hero-gallery__track,.hero-gallery--static .hero-gallery__track{
  display:flex;gap:20px;padding:8px var(--pad) 28px;overflow-x:auto;
  perspective:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--olive) transparent;
}
.hero-gallery:not(.hero-gallery--running) .hero-gallery__item,.hero-gallery--static .hero-gallery__item{
  position:relative;inset:auto;flex:0 0 clamp(230px,30vw,440px);
  transform:none!important;opacity:1!important;will-change:auto;scroll-snap-align:start;
}
@media (max-width:820px){
  .landing-page{padding-bottom:12px}
  .hero--gallery{padding-top:16px}
  .hero--gallery #heroTexto{max-width:620px}
  .hero--gallery .hero__title{font-size:clamp(36px,7vw,56px);text-align:center}
  .hero--gallery .hero__eyebrow{font-size:10px;letter-spacing:.07em}
  .hero-gallery{--gallery-scene-height:clamp(260px,39svh,400px)}
  .hero-gallery__item{width:min(82vw,480px,calc((var(--gallery-scene-height) - 70px) * 1.6))}
  .hero-gallery__caption{font-size:14px;padding:11px 16px 13px}
  .hero--gallery>.hero__lead{font-size:16px;max-width:36ch;margin-top:4px}
  .hero-gallery:not(.hero-gallery--running) .hero-gallery__item,.hero-gallery--static .hero-gallery__item{flex-basis:78vw}
}
@media (max-height:700px) and (min-width:821px){
  .hero--gallery{padding-top:12px}
  .hero--gallery .hero__title{font-size:clamp(34px,3.4vw,44px)}
  .hero-gallery{--gallery-scene-height:clamp(180px,37svh,260px)}
}
@media (max-height:700px) and (max-width:820px){
  .landing-page{padding-bottom:8px}
  .hero--gallery{padding-top:12px;padding-bottom:4px}
  .hero--gallery .hero__title{font-size:clamp(30px,8.5vw,42px)}
  .hero--gallery .hero__eyebrow{font-size:9px;margin-bottom:10px}
  .hero-gallery{--gallery-scene-height:clamp(156px,30svh,210px)}
  .hero--gallery>.hero__lead{line-height:1.5;margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  .landing::before{animation:none;will-change:auto}
  .hero-gallery{animation:none}
  .hero-gallery__track,.hero-gallery__card{transition:none}
  .hero-gallery__card:hover{transform:none}
}