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

/* ---------- Indicadores destacados ---------- */
.indicadores{
  padding:110px 7% 120px;
  text-align:center;
}
.indicadores-kicker{
  margin-bottom:18px;
  color:#5b5b5b;
  font-size:17px;
  font-weight:500;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.indicadores h2{
  margin-bottom:70px;
  color:var(--blue);
  font-size:clamp(34px,3.6vw,56px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.4px;
}
.indicadores-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px 56px;
  max-width:1100px;
  margin:0 auto;
}
.indicador{
  background:linear-gradient(180deg,rgba(20,55,120,.88) 0%,rgba(9,30,66,.94) 100%);
  border-radius:28px;
  padding:58px 44px 64px;
  text-align:center;
}
.indicador-num{
  display:block;
  color:#fff;
  font-weight:800;
  font-size:clamp(38px,4.2vw,64px);
  letter-spacing:.3px;
  line-height:1.1;
  margin-bottom:14px;
}
.indicador-label{
  display:block;
  color:rgba(255,255,255,.92);
  font-size:clamp(17px,1.4vw,21px);
  font-weight:500;
  line-height:1.45;
  margin-bottom:8px;
}
.indicador-desc{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:clamp(14px,1.1vw,17px);
  font-weight:400;
  line-height:1.5;
}

@media (max-width:900px){
  .indicadores{padding:82px 34px 90px}
  .indicadores h2{margin-bottom:52px}
  .indicadores-grid{gap:36px}
}
@media (max-width:680px){
  .indicadores{padding:64px 22px 72px}
  .indicadores-grid{grid-template-columns:1fr;gap:28px}
  .indicador{padding:44px 28px 50px}
}

.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?v=3") 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}
}