:root{color-scheme:dark;--gold:#dfb878;--white:#f8f7f2;--soft:rgba(248,247,242,.76)}
*{box-sizing:border-box}
html,body{min-width:320px;min-height:100%;margin:0}
body{background:#091b28;color:var(--white);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.hero{position:relative;isolation:isolate;display:grid;min-height:100svh;grid-template-rows:auto 1fr auto;overflow:hidden;padding:clamp(1.6rem,5vw,4rem) clamp(1.5rem,7vw,7rem)}
.hero-photo,.hero-shade{position:absolute;z-index:-2;inset:0}
.hero-photo{background-image:url("images/port-hero.jpg");background-size:cover;background-position:center 56%;transform:scale(1.035);animation:photo-drift 38s ease-in-out infinite alternate;will-change:transform}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(5,19,29,.5),rgba(5,19,29,.3) 38%,rgba(5,19,29,.42)),linear-gradient(180deg,rgba(6,20,29,.38),rgba(6,20,29,.27) 31%,rgba(6,20,29,.5) 72%,rgba(6,20,29,.82))}
.hero:after{position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(7,25,35,.12),rgba(7,25,35,.16) 45%,rgba(7,25,35,.35));content:"";pointer-events:none}
.brand{display:flex;align-items:center;gap:.9rem;justify-self:start;text-decoration:none}
.brand-mark{position:relative;display:grid;width:3.05rem;height:3.05rem;place-items:center;border:1px solid rgba(229,197,143,.8);border-radius:50%;color:#fff}
.brand-mark:before{position:absolute;inset:.22rem;border:1px solid rgba(255,255,255,.45);border-radius:50%;content:""}
.brand-mark b{position:absolute;top:.3rem;font-size:1.3rem;line-height:1}
.brand-mark i{position:absolute;bottom:.31rem;padding:0 .13rem;background:#153141;color:var(--gold);font-size:.52rem;font-style:normal;font-weight:800}
.brand-copy{display:flex;flex-direction:column;gap:.26rem;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.brand-copy strong{font-size:.73rem;font-weight:800;letter-spacing:.16em}
.brand-copy span{color:var(--gold);font-size:.66rem;font-weight:700;letter-spacing:.3em}
.hero-copy{width:min(100%,53rem);align-self:center;justify-self:center;margin-block:3rem;text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.37)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:.72rem;margin:0 0 1.45rem;color:rgba(255,255,255,.82);font-size:.65rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.eyebrow span{width:1.55rem;height:1px;background:var(--gold)}
h1{margin:0;font-size:clamp(3.5rem,8.7vw,7.4rem);font-weight:650;letter-spacing:-.075em;line-height:.97}
h1 em{color:#f0cc91;font-style:normal;font-weight:500}
.tagline{margin:1.55rem auto 0;color:rgba(255,255,255,.82);font-size:clamp(1.03rem,1.7vw,1.35rem);font-weight:400;line-height:1.65;letter-spacing:.015em}
.tagline strong{color:#fff;font-weight:650}
.coming-soon{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.15rem;padding:.62rem .94rem;border:1px solid rgba(235,207,161,.36);border-radius:99px;background:rgba(6,24,35,.3);color:#f5e5c9;font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(5px)}
.coming-soon i{width:.43rem;height:.43rem;border-radius:50%;background:#73c4a3;box-shadow:0 0 12px rgba(115,196,163,.55)}
.hero-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1rem}
.footer-note,.footer-location{color:rgba(255,255,255,.68);font-size:.64rem;letter-spacing:.1em}
.footer-location{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;font-size:.54rem;font-weight:700;letter-spacing:.13em}
.footer-location i{width:3px;height:3px;border-radius:50%;background:var(--gold)}
.contact-link{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border:1px solid rgba(255,255,255,.26);border-radius:3px;background:rgba(7,26,37,.36);color:var(--white);font-size:.66rem;text-decoration:none;backdrop-filter:blur(7px);transition:background .2s,border-color .2s,transform .2s}
.contact-link:hover{transform:translateY(-2px);border-color:rgba(235,207,161,.7);background:rgba(7,26,37,.62)}
.contact-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.contact-icon{display:grid;width:1.65rem;height:1.65rem;place-items:center;border-radius:50%;background:rgba(223,184,120,.18);color:var(--gold);font-size:.84rem}
.contact-link strong{margin-left:.2rem;color:#f1d29f;font-size:.76rem;letter-spacing:.05em}
.image-credit{position:absolute;right:clamp(1.5rem,7vw,7rem);bottom:5.2rem;color:rgba(255,255,255,.34);font-size:.48rem;letter-spacing:.2em}
@keyframes photo-drift{0%{transform:scale(1.035) translate3d(0,0,0)}100%{transform:scale(1.075) translate3d(-.4%,.3%,0)}}
@media(max-width:700px){.hero{min-height:100svh;padding:1.4rem 1.35rem 1.7rem}.hero-photo{background-position:58% center}.hero-shade{background:linear-gradient(90deg,rgba(5,19,29,.48),rgba(5,19,29,.26)),linear-gradient(180deg,rgba(6,20,29,.45),rgba(6,20,29,.25) 35%,rgba(6,20,29,.55) 70%,rgba(6,20,29,.88))}.brand-mark{width:2.7rem;height:2.7rem}.brand-copy strong{font-size:.62rem}.brand-copy span{font-size:.58rem}.hero-copy{margin-block:2rem}.eyebrow{font-size:.54rem;letter-spacing:.12em}h1{font-size:clamp(3.3rem,13vw,5.2rem)}.tagline{margin-top:1.3rem;font-size:1.05rem}.coming-soon{margin-top:1.75rem}.hero-footer{grid-template-columns:1fr auto;align-items:center}.footer-note{grid-column:1/-1;justify-self:center}.contact-link{grid-column:1/-1;justify-self:center}.footer-location{grid-column:1/-1;justify-content:center;margin-top:.35rem}.image-credit{display:none}}
@media(max-width:380px){h1{font-size:3.15rem}.eyebrow{font-size:.48rem}.contact-link{gap:.45rem;padding:.68rem}.contact-link span:nth-child(2){font-size:.59rem}.footer-note{font-size:.58rem}}
@media(prefers-reduced-motion:reduce){.hero-photo{animation:none;transform:scale(1.035)}*{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Composición centrada y movimiento ambiental ligero */
.brand{justify-self:center;text-align:center}
.hero-photo{animation-duration:25s}
.route-track{display:flex;width:min(100%,23rem);align-items:center;gap:.8rem;margin:1.5rem auto 0;color:rgba(255,255,255,.72);font-size:.49rem;font-weight:700;letter-spacing:.16em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.track-line{position:relative;height:1px;flex:1;background:linear-gradient(90deg,rgba(224,187,126,.18),rgba(224,187,126,.75),rgba(224,187,126,.18))}
.track-line:after{position:absolute;top:50%;left:0;width:5px;height:5px;border-radius:50%;background:#f1ce93;box-shadow:0 0 10px 2px rgba(241,206,147,.7);content:"";transform:translate(-50%,-50%);animation:route-travel 5s ease-in-out infinite alternate}
.hero:before{position:absolute;z-index:-1;right:-15%;bottom:10%;left:-15%;height:19%;background:linear-gradient(100deg,transparent 0%,rgba(228,202,159,.02) 24%,rgba(209,229,226,.1) 48%,rgba(228,202,159,.04) 58%,transparent 82%);filter:blur(18px);content:"";pointer-events:none;animation:water-light 9s ease-in-out infinite alternate}
.brand,.hero-copy,.hero-footer{animation:arrive .9s both}
.hero-copy{animation-delay:.12s}
.hero-footer{animation-delay:.24s}
@keyframes route-travel{to{left:100%}}
@keyframes water-light{from{transform:translateX(-4%);opacity:.35}to{transform:translateX(4%);opacity:.8}}
@keyframes arrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.route-track{margin-top:1.2rem}.hero-photo{animation-duration:25s}}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none}.brand,.hero-copy,.hero-footer{animation:none}.track-line:after{animation:none}}

/* Tipografía algo más amplia y contacto sin caja */
.brand-copy strong{font-size:.79rem}
.brand-copy span{font-size:.72rem}
.eyebrow{font-size:.71rem}
.tagline{font-size:clamp(1.13rem,1.8vw,1.45rem)}
.coming-soon{font-size:.68rem}
.route-track{width:min(100%,25rem);gap:.95rem;color:rgba(255,255,255,.94);font-size:.64rem;letter-spacing:.19em}
.track-line{height:2px;background:linear-gradient(90deg,rgba(240,204,145,.35),rgba(240,204,145,.95),rgba(240,204,145,.35))}
.track-line:after{width:7px;height:7px}
.hero-footer{display:flex;justify-content:space-between;align-items:center;gap:1.5rem}
.contact-link{gap:.8rem;padding:0;border:0;border-radius:0;background:none;font-size:.75rem;backdrop-filter:none}
.contact-link:hover{transform:none;border-color:transparent;background:none}
.contact-icon{display:none}
.contact-link strong{font-size:.88rem}
.footer-location{font-size:.59rem}
@media(max-width:700px){
  .brand-copy strong{font-size:.68rem}
  .brand-copy span{font-size:.64rem}
  .eyebrow{font-size:.6rem}
  .tagline{font-size:1.15rem}
  .coming-soon{font-size:.68rem}
  .route-track{width:min(100%,23rem);font-size:.62rem}
  .hero-footer{flex-direction:column;gap:.9rem}
  .contact-link{order:0;font-size:.72rem}
  .footer-location{order:1;font-size:.54rem}
}
@media(max-width:380px){.route-track{font-size:.55rem}.contact-link{font-size:.68rem}}

.brand{gap:0}.brand-copy{text-align:center}


.eyebrow:after{width:1.55rem;height:1px;background:var(--gold);content:''}

/* Ajustes fluidos para iPhone: notch, tamaños compactos y orientación */
@media(max-width:700px){
  .hero{min-height:100vh;min-height:100svh;padding:max(1.2rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}
  .hero-copy{width:min(100%,40rem);margin-block:clamp(1.1rem,4.5svh,2rem)}
  .eyebrow{gap:.48rem;font-size:clamp(.44rem,2.15vw,.58rem);letter-spacing:.1em}
  .eyebrow span,.eyebrow:after{width:clamp(.72rem,4vw,1.2rem);flex:0 0 auto}
  h1{font-size:clamp(3rem,12.7vw,5.15rem);line-height:.98}
  .tagline{margin-top:clamp(.85rem,3.2svh,1.3rem);font-size:clamp(1rem,4.3vw,1.15rem);line-height:1.5}
  .route-track{width:min(100%,22rem);margin-top:clamp(.8rem,3svh,1.2rem);font-size:clamp(.54rem,2.3vw,.62rem)}
  .coming-soon{margin-top:clamp(1.1rem,3.8svh,1.65rem);padding:.58rem .86rem}
  .hero-footer{gap:clamp(.65rem,2.5svh,.95rem)}
  .contact-link{min-height:2.4rem}
}
@media(max-width:380px){
  .hero{padding-right:max(1rem,env(safe-area-inset-right));padding-left:max(1rem,env(safe-area-inset-left))}
  .eyebrow{gap:.38rem;font-size:clamp(.4rem,2.05vw,.49rem);letter-spacing:.075em}
  .eyebrow span,.eyebrow:after{width:.68rem}
  h1{font-size:clamp(2.85rem,13vw,3.25rem)}
  .tagline{font-size:1rem}
  .route-track{font-size:.54rem;letter-spacing:.14em}
  .coming-soon{font-size:.62rem}
}
@media(max-height:620px) and (max-width:900px){
  .hero{padding-top:max(.65rem,env(safe-area-inset-top));padding-bottom:max(.65rem,env(safe-area-inset-bottom))}
  .hero-copy{margin-block:.55rem}
  h1{font-size:clamp(2.45rem,8vh,3.5rem)}
  .eyebrow{margin-bottom:.7rem}
  .tagline{margin-top:.6rem;font-size:.98rem;line-height:1.4}
  .route-track{margin-top:.55rem}
  .coming-soon{margin-top:.75rem;padding:.45rem .75rem}
  .hero-footer{gap:.35rem}
  .contact-link{min-height:2rem}
}

/* Mantener la fotografía y el velo en capas explícitas para que Nginx/browser la pinten */
.hero-photo{z-index:0}
.hero-shade,.hero:before,.hero:after{z-index:1}
.brand,.hero-copy,.hero-footer{position:relative;z-index:2}
.image-credit{z-index:2}

/* Refuerza la marca y centra el contacto en pantallas grandes y pequeñas */
.brand-copy strong{font-size:1rem}
.brand-copy span{font-size:.88rem}
.brand{justify-self:center;text-align:center}
.hero-footer{display:flex;width:100%;justify-content:center;align-items:center;text-align:center}
.contact-link{margin-inline:auto}
@media(max-width:700px){
  .brand{justify-self:center;margin-top:.6rem}
  .brand-copy strong{font-size:.88rem}
  .brand-copy span{font-size:.78rem}
}