/* Puerto — extiende los estilos comunes definidos en historia.css */

.hero-port{
  min-height:540px;
  height:44.8vw;
  max-height:860px;
  background:
    linear-gradient(180deg,rgba(6,23,51,.12) 0%,rgba(6,23,51,.02) 45%,rgba(6,23,51,.20) 100%),
    url("puerto-hero.jpg") center 50%/cover no-repeat;
}
.hero-port .hero-title{left:100px;bottom:58px}

.port-intro{padding:92px 0 108px}
.port-intro .intro-grid{
  grid-template-columns:.86fr 1.14fr;
  gap:110px;
}
.port-intro h2{
  color:#555;
  font-size:clamp(36px,3.4vw,58px);
  font-weight:900;
  line-height:1.16;
  letter-spacing:-.7px;
}
.port-intro p{
  color:#626262;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.65;
}

.vertical-quote{
  margin:0;
  padding:130px 7%;
  border-radius:46px;
  background:var(--blue);
  color:#fff;
  text-align:center;
}
.vertical-quote blockquote{
  max-width:1500px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(32px,3.1vw,52px);
  font-weight:300;
  line-height:1.25;
  letter-spacing:-.4px;
}

.location{
  padding:104px 0 132px;
  text-align:center;
}
.location-kicker{
  margin-bottom:22px;
  color:#5b5b5b;
  font-size:18px;
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.location h2{
  margin-bottom:58px;
  color:var(--blue);
  font-size:clamp(42px,4.3vw,70px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.5px;
}
.location-map{
  position:relative;
  max-width:1130px;
  margin:0 auto;
}
.location-map img{
  width:100%;
  height:auto;
  display:block;
}
.map-label{
  position:absolute;
  z-index:2;
  transform:translate(-50%,-100%);
  background:#fff;
  color:var(--blue);
  padding:5px 14px;
  font-size:clamp(12px,1.25vw,19px);
  font-weight:500;
  line-height:1.1;
  white-space:nowrap;
  box-shadow:0 1px 3px rgba(20,45,90,.14);
}
.map-label-morichal{left:52.7%;top:50.5%}
.map-label-puerto{left:58.5%;top:69.8%}
.map-pin-morichal{
  position:absolute;
  left:52.7%;
  top:52%;
  z-index:1;
  width:clamp(20px,2.2vw,34px);
  height:auto;
  transform:translateX(-50%);
  fill:var(--blue);
}
.location .cta{margin-top:56px}

@media (max-width:900px){
  .hero-port{min-height:480px;height:70vw}
  .hero-port .hero-title{left:34px;bottom:42px}
  .port-intro{padding:76px 0 82px}
  .port-intro .intro-grid{grid-template-columns:1fr;gap:38px}
  .vertical-quote{border-radius:34px;padding:82px 34px}
  .location{padding:78px 0 98px}
  .location h2{margin-bottom:40px}
}
@media (max-width:560px){
  .hero-port{min-height:430px;height:105vw;background-position:center 50%}
  .hero-port .hero-title{left:22px;bottom:34px;font-size:52px}
  .port-intro{padding:62px 0 66px}
  .port-intro h2{font-size:33px}
  .vertical-quote{padding:64px 22px}
  .vertical-quote blockquote{font-size:30px}
  .location{padding:62px 0 80px}
  .location h2{font-size:36px}
  .location .cta{width:100%;margin-top:42px}
}