/* Carrusel de «islas» del inicio. Todo va dentro de .gm-islas para no tocar el resto del sitio. */
.gm-islas{
  --gi-peek:clamp(16px,6.4vw,118px);
  --gi-gap:clamp(8px,1vw,16px);
  --gi-radius:clamp(16px,1.5vw,22px);
  --gi-navy:#013483;
  --gi-navy-claro:#13438b;
  --gi-fondo:#07121f;
  --gi-ms:8000ms;
  position:relative;
  overflow:hidden;
  padding:clamp(12px,1.4vw,22px) 0 2px;
  background:#fff;
}
.gi-stage{position:relative}
.gi-track{position:relative;height:clamp(440px,35vw,600px);touch-action:pan-y}

.gi-slide{
  position:absolute;
  inset:0 calc(var(--gi-peek) + var(--gi-gap));
  overflow:hidden;
  border-radius:var(--gi-radius);
  background:var(--gi-fondo);
  color:#fff;
  isolation:isolate;
  transform:translateX(calc(100% + var(--gi-gap)));
  transition:transform .7s cubic-bezier(.22,.7,.25,1);
}
.gi-slide.is-active{transform:none}
.gi-slide.is-next{transform:translateX(calc(100% + var(--gi-gap)));cursor:pointer}
.gi-slide.is-prev{transform:translateX(calc(-100% - var(--gi-gap)));cursor:pointer}
.gi-slide.gi-salto{transition:none;animation:gi-aparece .5s ease}
@keyframes gi-aparece{from{opacity:0}to{opacity:1}}

/* Las islas de los lados se tiñen de azul: se ve el azul de la propuesta y se adivina la foto siguiente. */
.gi-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:var(--gi-navy);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
.gi-slide.is-next::before,.gi-slide.is-prev::before{opacity:.9}
.gi-slide.is-next:hover::before,.gi-slide.is-prev:hover::before{opacity:.65}

.gi-media{position:absolute;inset:0;z-index:0}
.gi-media img,.gi-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gi-video{opacity:0;transition:opacity .6s ease}
.gi-video.is-on{opacity:1}
.gi-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,10,20,.94) 0,rgba(4,10,20,.86) 34%,rgba(4,10,20,.66) 48%,rgba(4,10,20,.2) 64%,rgba(4,10,20,0) 78%);
}
/* En la isla 1 la foto arranca más a la derecha para que el casco no quede debajo del texto. */
.gi-slide--a .gi-media{left:30%}
.gi-slide--a .gi-media img{object-position:center 42%}
.gi-slide--a .gi-media::after{
  background:linear-gradient(90deg,var(--gi-fondo) 0,rgba(7,18,31,.7) 20%,rgba(7,18,31,.08) 44%,rgba(7,18,31,0) 60%);
}

.gi-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:min(47%,640px);
  height:100%;
  padding:clamp(20px,3vw,44px) 0 clamp(20px,3vw,44px) clamp(24px,4.6vw,76px);
  opacity:0;
  transition:opacity .45s ease .12s;
}
.gi-slide.is-active .gi-copy,.gi-slide.is-active .gi-stats{opacity:1}
.gm-islas .gi-title{
  margin:0;
  color:#fff;
  font-size:clamp(1.65rem,2.7vw,2.75rem);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.gm-islas .gi-rule{
  width:100%;
  max-width:460px;
  height:1px;
  margin:clamp(12px,1.25vw,20px) 0;
  border:0;
  background:rgba(255,255,255,.72);
  opacity:1;
}
.gm-islas .gi-lead{
  margin:0 0 clamp(16px,1.5vw,24px);
  max-width:52ch;
  color:#e8eff6;
  font-size:clamp(.95rem,1.06vw,1.08rem);
  line-height:1.5;
}
.gi-actions{display:flex;flex-wrap:wrap;gap:10px}
.gm-islas .gi-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.95rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:transform .2s ease,background-color .2s ease;
}
.gm-islas .gi-btn:hover{transform:translateY(-2px)}
.gm-islas .gi-btn--light{background:#fff;color:var(--gi-navy)}
.gm-islas .gi-btn--light:hover{background:#eaf2ff;color:var(--gi-navy)}
.gm-islas .gi-btn--blue{background:var(--gi-navy-claro);border-color:rgba(255,255,255,.3);color:#fff}
.gm-islas .gi-btn--blue:hover{background:var(--gi-navy);color:#fff}

.gi-stats{
  position:absolute;
  z-index:2;
  top:50%;
  right:clamp(16px,2.4vw,40px);
  display:grid;
  gap:clamp(10px,1vw,16px);
  width:clamp(262px,24.5vw,350px);
  margin:0;
  padding:0;
  list-style:none;
  opacity:0;
  transform:translateY(-50%);
  transition:opacity .45s ease .12s;
}
.gi-stat{position:relative;padding-left:clamp(24px,2vw,32px)}
.gi-ic{
  position:absolute;
  z-index:1;
  top:50%;
  left:0;
  display:grid;
  place-items:center;
  width:clamp(52px,4.5vw,68px);
  aspect-ratio:1;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--gi-navy);
  color:#fff;
  font-size:clamp(1.1rem,1.5vw,1.45rem);
  transform:translateY(-50%);
}
.gi-bar{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:clamp(58px,5vw,74px);
  padding:8px 26px 8px clamp(36px,3.1vw,50px);
  background:#fff;
  color:var(--gi-navy);
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
}
.gi-num{font-size:clamp(1.45rem,2.1vw,2.05rem);font-weight:800;line-height:1;letter-spacing:-.025em;white-space:nowrap}
.gi-lab{font-size:clamp(.68rem,.78vw,.78rem);font-weight:700;line-height:1.15;letter-spacing:.01em;text-transform:uppercase}

.gi-arrow{
  position:absolute;
  z-index:5;
  top:50%;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 8px 22px rgba(4,16,36,.28);
  color:var(--gi-navy);
  cursor:pointer;
  transform:translateY(-50%);
  transition:background-color .2s ease;
}
.gi-arrow:hover{background:#eaf2ff}
.gi-arrow--prev{left:calc(var(--gi-peek) + var(--gi-gap) - 23px)}
.gi-arrow--next{right:calc(var(--gi-peek) + var(--gi-gap) - 23px)}

.gi-controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0 12px}
.gi-toggle{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid #c5d2e4;
  border-radius:50%;
  background:#fff;
  color:var(--gi-navy);
  font-size:.72rem;
  cursor:pointer;
}
.gi-dots{display:flex;align-items:center}
.gi-dot{display:grid;place-items:center;height:32px;padding:0 3px;border:0;background:none;cursor:pointer}
.gi-dot span{
  position:relative;
  display:block;
  overflow:hidden;
  width:20px;
  height:6px;
  border-radius:99px;
  background:#c5d2e4;
  transition:width .3s ease;
}
.gi-dot.is-on span{width:44px}
.gi-dot span::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gi-navy);
  transform:scaleX(0);
  transform-origin:left;
}
.gi-dot.is-on span::after{transform:scaleX(var(--gi-p,1));transition:transform .1s linear}

.gm-islas :focus-visible{outline:3px solid #79d4f5;outline-offset:2px}
.gi-controls :focus-visible{outline-color:var(--gi-navy)}

@media (max-width:900px){
  .gm-islas{--gi-peek:10px;--gi-gap:6px}
  .gi-track{height:clamp(540px,142vw,600px)}
  .gi-arrow{display:none}
  .gi-slide{display:flex;flex-direction:column;justify-content:flex-end}
  .gi-media::after{background:linear-gradient(0deg,rgba(4,10,20,.97) 0,rgba(4,10,20,.9) 42%,rgba(4,10,20,.3) 68%,rgba(4,10,20,.05) 100%)}
  .gi-slide--a .gi-media{left:0;bottom:auto;height:46%}
  .gi-slide--a .gi-media img{object-position:50% 58%}
  .gi-slide--a .gi-media::after{background:linear-gradient(0deg,var(--gi-fondo) 0,rgba(7,18,31,.55) 22%,rgba(7,18,31,0) 48%)}
  .gi-copy{width:100%;height:auto;justify-content:flex-end;padding:16px 18px 18px}
  .gm-islas .gi-title{font-size:clamp(1.5rem,6.6vw,2.1rem)}
  .gm-islas .gi-rule{max-width:none;margin:10px 0}
  .gm-islas .gi-lead{margin-bottom:14px}
  .gi-slide--a .gi-lead,.gi-slide--a .gi-rule{display:none}
  .gi-slide--a .gi-title{margin-bottom:14px}
  .gi-actions{display:grid;grid-template-columns:1fr}
  .gi-stats{
    position:relative;
    top:auto;
    right:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    width:auto;
    padding:0 14px 14px;
    transform:none;
  }
  .gi-stat{padding-left:0}
  .gi-ic{display:none}
  .gi-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    min-height:0;
    height:100%;
    padding:9px 8px 9px 10px;
    border-radius:10px;
    clip-path:none;
  }
  .gi-num{font-size:1.18rem}
  .gi-lab{font-size:.64rem}
  .gi-lab br{display:none}
}

@media (prefers-reduced-motion:reduce){
  .gi-slide,.gi-copy,.gi-stats,.gi-video,.gi-slide::before,.gi-dot span,.gm-islas .gi-btn{transition:none}
  .gi-slide.gi-salto{animation:none}
  .gm-islas .gi-btn:hover{transform:none}
}