/* MAST Marine — lo que da vida: banderines del código, foto a sangre, fotos propias, pespunte en marcha y marcas. */
.bunt{background:var(--navy);color:var(--on-navy-faint);padding:0 0 3.4rem;overflow:hidden}
.bunt ul{display:flex;justify-content:center;gap:clamp(.3rem,1.3vw,1rem);border-top:1px dashed var(--seam)}
.bunt li{flex:0 1 4.4rem;transform-origin:50% 0;animation:mece 5.5s ease-in-out infinite;animation-delay:calc(var(--i)*-.5s)}
.bunt li::before{content:"";display:block;width:1px;height:.8rem;margin:0 auto;background:var(--seam)}
.bunt li.sp{flex:0 1 1.6rem;animation:none}
.bunt li.sp::before{display:none}
.bunt svg{width:100%;height:auto;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.bunt p{text-align:center;margin-top:1.6rem;padding:0 var(--gut)}
@keyframes mece{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.foto{position:relative;min-height:min(74vh,42rem);display:flex;align-items:flex-end;color:var(--paper);background:var(--navy) center 35%/cover no-repeat fixed;isolation:isolate}
.foto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(12,27,51,.9),rgba(12,27,51,.12) 62%)}
.foto p{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4.6vw,3.9rem);line-height:1.1;letter-spacing:-.012em;max-width:20ch;padding:clamp(2.5rem,7vw,5rem) 0;text-wrap:balance}
@media (max-width:60rem),(hover:none){.foto{background-attachment:scroll}}
.js .art .sm{animation:fade .9s ease forwards,cose 4.5s linear infinite}
@keyframes cose{to{stroke-dashoffset:-30}}
.marcas{margin-top:clamp(3rem,6vw,5rem)}
.marcas h3{font-size:1.7rem}
.marcas .say{color:var(--muted);margin:.7rem 0 1.8rem}
.marcas ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--navy)}
.marcas li{padding:1.7rem 1rem 1.7rem 0;border-bottom:1px dashed var(--line);transition:padding .3s}
.marcas b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.15}
.marcas span{display:block;margin-top:.5rem;font-size:.86rem;color:var(--muted)}
@media (hover:hover){.marcas li:hover{padding-left:.6rem}}
@media (max-width:60rem){.marcas ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.line .bg img[src$="ensena.avif"]{object-position:50% 0}
@media (min-width:60.01rem){.lines .line{min-height:clamp(46rem,96vh,56rem)}}
.obra{display:grid;grid-template-columns:1fr 1fr 1.9fr;gap:clamp(.7rem,1.4vw,1.2rem);margin-top:clamp(2.5rem,5vw,4rem)}
.obra li{position:relative;height:clamp(18rem,30vw,26rem);border-radius:22px;overflow:hidden;background:var(--navy);box-shadow:0 22px 44px -26px rgba(12,27,51,.45)}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.obra span{position:absolute;left:.8rem;bottom:.8rem;padding:.5rem .95rem;border-radius:999px;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:rgba(12,27,51,.45);border:1px solid rgba(242,242,242,.2);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
@media (hover:hover){.obra li:hover img{transform:scale(1.045)}}
@media (max-width:60rem){.obra{grid-template-columns:1fr 1fr}.obra li{height:clamp(15rem,62vw,24rem)}.obra li:last-child{grid-column:1/-1;height:clamp(13rem,58vw,22rem)}}
.pat button:focus-visible{outline-color:var(--paper);outline-offset:2px;border-radius:999px}
/* cada marca de tapicería tiene su ancla: la barra flotante lleva hasta ella */
.marcas li{scroll-margin-top:11rem}
.marcas li:target{padding-left:.9rem;background:rgba(12,27,51,.05);box-shadow:inset 3px 0 0 var(--navy)}
/* barra flotante de marcas: cápsula de cristal, abajo y centrada, en todas las páginas */
.dock{position:fixed;left:0;right:0;bottom:max(.9rem,env(safe-area-inset-bottom));z-index:40;width:fit-content;max-width:calc(100% - 1.5rem);margin:0 auto;display:flex;align-items:center;gap:.4rem;padding:.3rem .35rem .3rem 1.15rem;border-radius:999px;color:var(--paper);background:rgba(12,27,51,.82);border:1px solid rgba(242,242,242,.2);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -14px rgba(0,0,0,.6);animation:sube .7s .9s cubic-bezier(.2,.7,.2,1) both;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.dock[hidden]{display:none}
.dock.fuera,.open .dock{opacity:0;transform:translateY(150%);pointer-events:none}
@keyframes sube{from{opacity:0;transform:translateY(150%)}}
.dock-v{min-width:0;overflow:hidden}
.dock-t,.dock-g,.dock ul{display:flex;align-items:center}
.dock-g{gap:1rem}
.dock-g[aria-hidden]{display:none}
.dock-k{flex:none;display:flex;align-items:center;gap:.6rem;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-navy-faint);white-space:nowrap}
.dock-k::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--paper);box-shadow:0 0 0 0 rgba(242,242,242,.6);animation:late 2.4s ease-out infinite}
@keyframes late{to{box-shadow:0 0 0 .55rem rgba(242,242,242,0)}}
.dock li{display:flex;align-items:center;white-space:nowrap}
.dock li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--seam);margin:0 .15rem}
.dock a{display:flex;align-items:baseline;gap:.5rem;padding:.42rem .6rem;border-radius:999px;font-family:var(--serif);font-weight:600;font-size:1.02rem;line-height:1.2;transition:background .25s}
.dock li.mod{margin-left:.55rem;padding-left:.55rem;border-left:1px dashed var(--seam)}
.dock li.mod::before{display:none}
.dock li.mod i{font-family:var(--sans);font-style:normal;font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-navy-faint)}
.dock-x{flex:none;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--on-navy);transition:background .25s,color .25s}
.dock-x svg{width:.8rem;height:.8rem;stroke:currentColor;fill:none;stroke-width:2}
.dock a:focus-visible,.dock-x:focus-visible{outline:2px solid var(--paper);outline-offset:1px}
@media (hover:hover){.dock a:hover,.dock-x:hover{background:rgba(242,242,242,.14);color:var(--paper)}}
@media (max-width:60rem){
  /* en estrecho no cabe: la tira pasa en bucle (las dos copias seguidas) y se para al tocarla */
  .dock{width:auto;margin:0 .75rem;padding-left:.2rem}
  .dock-v{flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.4rem,#000 calc(100% - 1.4rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.4rem,#000 calc(100% - 1.4rem),transparent)}
  .dock-t{width:max-content;animation:pasa 26s linear infinite}
  .dock-t:active{animation-play-state:paused}
  .dock-g,.dock-g[aria-hidden]{display:flex;padding-right:1.6rem}
  .dock a{font-size:.96rem;padding:.42rem .45rem}
}
@keyframes pasa{to{transform:translateX(-50%)}}
@media print{.dock{display:none}}
@media (prefers-reduced-motion:reduce){.dock{animation:none}.dock-k::before{animation:none}.dock-t{animation:none}.dock-v{overflow-x:auto;scrollbar-width:none}.dock-g[aria-hidden]{display:none!important}}
@media (prefers-reduced-motion:reduce){.bunt li{animation:none}.js .art .sm{animation:none;opacity:.6}.foto{background-attachment:scroll}}