/* NavaStorm: arte conceptual, acero y latón. Todos los recursos son locales. */
:root{
  color-scheme:dark;
  --plate:#06111b;
  --normal:#0e2130;
  --hover:#1a3b4a;
  --steel:#dbebf0;
  --brass:#f0c263;
  --muted:#b1c6ce;
  --line:#365362;
  --link:#a7e5e7
}
*{
  box-sizing:border-box
}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:2rem
}
body{
  margin:0;
  color:var(--steel);
  background:var(--plate);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif
}
img{
  display:block;
  max-width:100%;
  height:auto
}
a{
  color:var(--link);
  text-underline-offset:.23em
}
a:hover{
  color:var(--brass)
}
a,summary{
  -webkit-tap-highlight-color:#f0c26340
}
:focus-visible{
  outline:3px solid var(--brass);
  outline-offset:5px
}
main:focus{
  outline:none
}
.skip{
  position:fixed;
  z-index:10;
  top:.5rem;
  left:1rem;
  padding:.6rem 1.2rem;
  color:var(--plate);
  background:var(--brass);
  font-weight:700;
  transform:translateY(-160%)
}
.skip:focus{
  transform:translateY(0);
  color:var(--plate)
}
header.site{
  view-transition-name:site-header;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem 2.5rem;
  max-width:1440px;
  margin:auto;
  padding:1.25rem clamp(1.25rem,4vw,4rem);
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--steel);
  font-size:1.35rem;
  font-weight:850;
  letter-spacing:-.035em;
  text-decoration:none
}
.brand img{
  flex:0 0 38px
}
nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap
}
nav.main{
  gap:.4rem 1.5rem;
  margin-left:auto
}
nav.langs{
  gap:.25rem
}
nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  font-size:.9rem
}
nav.main a{
  color:var(--muted);
  border-bottom:2px solid transparent
}
nav.main a:hover,nav.main a[aria-current]{
  color:var(--steel);
  border-color:var(--brass)
}
nav.langs a{
  justify-content:center;
  min-width:36px;
  padding:.25rem;
  color:var(--muted);
  font-size:.75rem;
  font-weight:700
}
nav.langs a:hover{
  background:var(--hover);
  color:var(--steel)
}
nav.langs a[aria-current]{
  color:var(--brass);
  background:#3d3821;
  border:1px solid #a88542
}
main{
  view-transition-name:page-content;
  max-width:1280px;
  margin:auto;
  padding:3rem clamp(1.25rem,4vw,4rem) 5rem
}
h1,h2,h3{
  line-height:1.17
}
h1{
  margin:0 0 1rem;
  font-size:clamp(2rem,4vw,3.6rem);
  font-weight:850;
  letter-spacing:-.04em
}
h2{
  font-size:clamp(1.25rem,2.5vw,1.85rem);
  letter-spacing:-.025em
}
p{
  margin:0 0 1.25rem
}
.home main{
  max-width:1440px;
  padding-top:0
}
.hero{
  position:relative
}
.home .hero{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  min-height:720px;
  margin:0 calc(-1 * clamp(1.25rem,4vw,4rem));
  padding:4rem clamp(1.25rem,4vw,4rem);
  isolation:isolate
}
.hero-copy{
  position:relative;
  z-index:1;
  padding:1.5rem 0
}
.home .hero h1{
  font-size:clamp(4rem,8vw,7.6rem);
  line-height:.91;
  letter-spacing:-.055em;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  text-shadow:0 3px 30px #06111b
}
.home .hero h1 span{
  display:block
}
.home .hero h1 span:last-child{
  color:var(--brass)
}
.hero-copy>p:not(.tagline){
  max-width:29rem;
  color:var(--steel)
}
.hero-copy>p:last-child{
  margin:2rem 0 0
}
.tagline{
  font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.4;
  margin:1.6rem 0 1.25rem;
  font-weight:650
}
.hero-art{
  position:absolute;
  z-index:-2;
  inset:-20px 0 -80px;
  overflow:hidden
}
.hero-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:66% 15%;
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 65%,transparent)
}
.home .hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-20px 0 -80px;
  background:linear-gradient(90deg,#06111bf5 0%,#06111bed 22%,#06111b70 49%,#06111b05 75%),linear-gradient(0deg,#06111b 0%,#06111b00 30%);
  pointer-events:none
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  max-width:100%;
  padding:.9rem 1.3rem;
  background:var(--brass);
  border:1px solid #ffe2a7;
  border-radius:3px;
  box-shadow:0 4px 0 #876333;
  color:var(--plate);
  font-size:.95rem;
  font-weight:800;
  line-height:1.5
}
.cta::before{
  content:"";
  flex:0 0 19px;
  width:19px;
  height:22px;
  background:var(--plate);
  clip-path:polygon(5% 0,100% 50%,5% 100%)
}
.information{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:1rem 2rem;
  padding:2.5rem 0;
}
.information h2{
  margin:.5rem 0;
  color:var(--brass)
}
.information ul{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:1rem;
  padding:0;
  margin:0;
  list-style:none
}
.information li{
  flex:1 1 150px
}
.information a{
  display:block;
  height:100%;
  padding:.75rem 1rem;
  border:1px solid var(--line);
  text-decoration:none
}
.information a:hover{
  background:var(--normal);
  border-color:var(--brass)
}
footer.site{
  max-width:1440px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2rem;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:1.75rem clamp(1.25rem,4vw,4rem) 2rem;
  color:var(--muted);
  font-size:.8rem
}
footer.site p{
  margin:0
}
/* La ilustración acompaña los documentos sin competir con la lectura. */
.document-page main{
  max-width:1000px;
  padding-top:2.5rem
}
.doc{
  position:relative
}
.doc>h1{
  max-width:760px;
  padding-top:1rem
}
.doc-art{
  position:relative;
  height:190px;
  margin:-1.5rem -1rem 1.5rem;
  background:url('/art/hero-concept.webp') 75% 52%/cover;
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 65%,transparent),linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-composite:intersect;
  overflow:hidden
}
.doc-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#06111ba6,#06111b00)
}
.meta{
  margin:0 0 2rem;
  color:var(--muted);
  font-size:.9rem
}
.doc>section{
  margin:1rem 0;
  padding:1.5rem 1.75rem;
  background:var(--normal);
  border:1px solid var(--line);
  border-radius:3px
}
.doc section h2{
  margin:0 0 1rem;
  color:var(--brass);
  font-size:1.2rem;
  line-height:1.4
}
.doc section>:last-child{
  margin-bottom:0
}
.doc li{
  margin:.4rem 0
}
.doc ul{
  padding-left:1.5rem
}
.doc a{
  overflow-wrap:anywhere
}
.contact-card{
  padding:1.5rem 1.75rem;
  border:1px solid #a88542;
  border-left:4px solid var(--brass);
  background:var(--normal);
  font-size:1.2rem
}
.support .doc>h2{
  margin:2.5rem 0 1.25rem
}
details{
  border:1px solid var(--line);
  margin:.75rem 0;
  padding:0 1.3rem;
  border-radius:3px;
  background:var(--normal)
}
summary{
  cursor:pointer;
  padding:1rem 0;
  font-weight:650;
  color:var(--steel);
  line-height:1.5
}
summary::marker{
  color:var(--brass)
}
details[open]{
  border-color:#759199
}
details p{
  margin:.25rem 0 1.25rem;
  color:var(--muted)
}
.gateway main,.lost main{
  max-width:900px;
  padding-top:2rem;
  text-align:center
}
.gateway-art{
  width:100%;
  height:300px;
  object-fit:cover;
  object-position:70% 50%;
  margin:0 auto 2rem;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 74%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect
}
.gateway .hero h1,.lost h1{
  color:var(--brass);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3rem,10vw,5rem)
}
.gateway .tagline,.lost .tagline{
  font-size:1.05rem;
  line-height:1.8;
  color:var(--muted)
}
.gateway ul{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.75rem;
  list-style:none;
  padding:0;
  max-width:500px;
  margin:2rem auto 0
}
.gateway li a{
  display:block;
  border:1px solid var(--line);
  padding:1rem;
  background:var(--normal);
  text-decoration:none
}
.gateway li a:hover{
  color:var(--brass);
  border-color:var(--brass)
}
.lost .gateway-art{
  object-position:60% 60%;
  filter:saturate(.5);
  opacity:.65
}
.lost .hero>p:last-child a{
  display:inline-block;
  padding:.7rem 2rem;
  border:1px solid var(--brass);
  color:var(--brass)
}
@media(max-width:1050px){
  header.site{
    gap:.5rem 1.25rem
  }
  nav.main{
    gap:.3rem 1rem
  }
  .home .hero{
    min-height:650px
  }
}
@media(max-width:800px){
  header.site{
    padding-top:1rem
  }
  nav.langs{
    margin-left:auto
  }
  nav.main{
    order:3;
    flex-basis:100%;
    margin-left:0;
    justify-content:space-between;
    gap:.25rem .8rem
  }
  .home .hero{
    grid-template-columns:1.1fr .9fr;
    padding-top:2.5rem;
    padding-bottom:2.5rem;
    min-height:600px
  }
  .hero-copy{
    padding:0
  }
  .hero-copy>p:not(.tagline){
    font-size:.95rem
  }
  .information{
    grid-template-columns:1fr
  }
  main{
    padding-top:2rem
  }
  .home .hero::after{
    background:linear-gradient(90deg,#06111bf5,#06111bb8 45%,#06111b30),linear-gradient(0deg,#06111b,#06111b00 40%)
  }
}
@media(max-width:580px){
  .brand{
    font-size:1.2rem;
    gap:.5rem
  }
  nav.langs a{
    min-width:31px
  }
  nav.main a{
  transition:color .16s ease,border-color .16s ease;
    font-size:.85rem
  }
  .home .hero{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:1.5rem;
    padding-top:0;
    padding-bottom:2rem;
    min-height:0
  }
  .hero-art{
    position:relative;
    z-index:0;
    inset:auto;
    order:-1;
    height:290px;
    margin:0 calc(-1 * clamp(1.25rem,4vw,4rem))
  }
  .hero-art img{
    object-position:76% center
  }
  .hero-art::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#06111b,#06111b00 40%)
  }
  .home .hero::after{
    display:none
  }
  .hero-copy{
    margin-top:-1.5rem
  }
  .home .hero h1{
    font-size:clamp(2.7rem,13.5vw,4.4rem)
  }
  .home .hero h1 span{
    display:inline
  }
  .tagline{
    margin-top:1.25rem;
    font-size:1.25rem
  }
  .hero-copy>p:last-child{
    margin-top:1.5rem
  }
  .information{
    padding-bottom:0
  }
  .information li{
    flex-basis:100%
  }
  .document-page main{
    padding-top:1.5rem
  }
  .doc-art{
    height:110px;
    margin-bottom:1.5rem
  }
  .doc>h1{
    font-size:2rem
  }
  .doc>section{
    padding:1.25rem
  }
  .contact-card{
    padding:1.25rem;
    font-size:1.1rem
  }
  details{
    padding:0 1rem
  }
  .gateway-art{
    height:230px
  }
}
@media(prefers-reduced-motion:reduce){
  @view-transition{
    navigation:none;
  }
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Navegación entre documentos: conserva URL, historial y funcionamiento sin JS.
   Los navegadores compatibles funden las páginas; los demás navegan normalmente. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{
    navigation:auto;
  }
  ::view-transition-old(root),::view-transition-new(root){
    animation:none;
    mix-blend-mode:normal;
  }
  ::view-transition-old(page-content){
    animation:page-out .18s ease-in both;
  }
  ::view-transition-new(page-content){
    animation:page-in .3s ease-out both;
  }
  ::view-transition-group(site-header){
    animation-duration:.24s;
  }
  @supports not (view-transition-name:page-content){
    main{
      animation:page-in .3s ease-out both;
    }
  }
}
@keyframes page-out{
  to{
    opacity:0;
    transform:translateY(-8px);
  }
}
@keyframes page-in{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}