/* Fuentes */
@font-face {
  font-family: 'MontserratBold';
  src: url('../font/Montserrat-Arabic Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Arabic Regular.ttf') format('truetype');
}

/* Reset */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent !important; /* fondo limpio */
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Montserrat", sans-serif;
}

/* Utilidades */
.container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.row { display: flex; flex-wrap: wrap; margin: -12px; }
.col-10, .col-sm-6, .col-md-4, .col-lg-2 { padding: 12px; flex: 1 0 200px; }
.link-dark { color: inherit; }
.img-fluid { max-width: 100%; height: auto; }

/* Color subtitulos algunos*/
.text-implan { color: #e23764; }

/* marquesinas el carrusel */
.logos {
  overflow: hidden;
  background: transparent !important; /* limpio */
  white-space: nowrap;
  position: relative;
}
.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  content: "";
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0)) !important;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.logos-slide {
  display: inline-block;
  animation: slide 12s linear infinite;
  margin: 16px 0;
}
.logos-slide img {
  height: 80px;
  margin: 0 24px;
  display: inline-block;
}

/* SEccion con informacion */
.news { padding: 24px 0; background: transparent !important; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.news-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-item img {
  border-radius: 10px;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.news-item h3 { margin: 4px 0 0; font-size: 1.05rem; }
.news-item p  { margin: 0; line-height: 1.45; }


/* Actividades */
.nosotros { padding: 24px 0; background: transparent !important; }
.act-title {
  text-align: center;
  margin: 0 0 12px;
  font-size: 1.4rem;
}

/* iconos borrar anterior */
.icon-img {
  width: 84px;
  height: auto;
  transition: transform .25s ease-in-out;
}
.icon-link:hover .icon-img { transform: scale(1.08); }

/* mapa dejar solo 1 */
.mapa-viewport {
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: transparent !important;
}
.mapa-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  background: transparent !important;
}
.mapa-wrap iframe {
  max-width: 100%;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.mapa-list { margin-top: 12px; font-size: 0.95rem; }


@media (max-width: 992px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
  .news-grid { grid-template-columns: 1fr; }
  .logos-slide img { height: 64px; margin: 0 16px; }
}






/*Iconos */
.icon-img {
  width: 55%;
  height: auto;
  transition: transform .25s ease-in-out;
}
.icon-link:hover .icon-img { transform: scale(1.08); }

/*Mapa */
.mapa-viewport {
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: transparent !important;
}
.mapa-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  background: transparent !important;
}
.mapa-wrap iframe {
  max-width: 150%;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.mapa-list { margin-top: 12px; font-size: 0.95rem; }


@media (max-width: 992px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
  .news-grid { grid-template-columns: 1fr; }
  .logos-slide img { height: 64px; margin: 0 16px; }
}


/* Intro texto */
.reveal-clip {
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform 15s ease-out, opacity 4s ease-out;
  will-change: transform, opacity;
}

.reveal-clip.is-visible {
  transform: scaleY(1);
  opacity: 1;
}


#intro-scroll { height: 100vh; }
#intro-scroll .container,
#intro-scroll .row,
#intro-scroll .col-12 {
  height: 100% !important;
}
#intro-scroll .row { margin: 0 !important; }
#intro-scroll .col-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


#intro-scroll h1 {
  transform: translateY(2%); 
}



/*  Pandilla marina  */
.logos-pm{
  --pm-item-h: 8vh;      
  --pm-gap: 4vw;         
  --pm-group-gap: 4vw;   
  --pm-speed: 18s;       
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

/* ancho total */
.logos-pm.full-bleed{
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}


.logos-pm__track{
  display: flex;
  width: max-content;
  animation: pm-marquee var(--pm-speed) linear infinite;
}

/* cada tira (A/B) */
.logos-pm__slide{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pm-gap);               
  min-width: max-content;
  margin-right: var(--pm-group-gap);
}

.logos-pm__slide img{
  height: var(--pm-item-h);
  width: auto;
  display: block;
  user-select: none;
}

/* animacion horizontal */
@keyframes pm-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}


@media (prefers-reduced-motion: reduce){
  .logos-pm__track{ animation: none; }
}


@media (max-width: 768px){
  .logos-pm{
    --pm-item-h: 7vh;
    --pm-gap: 5vw;
    --pm-group-gap: 5vw;  
    --pm-speed: 20s;
  }
}
@media (max-width: 576px){
  .logos-pm{
    --pm-item-h: 6vh;
    --pm-gap: 6vw;
    --pm-group-gap: 6vw; 
    --pm-speed: 22s;
  }
}


/* Carrusel de Actividades */
.logos-act{
  --act-item-h: 28vh;     
  --act-gap: 2vw;          
  --act-speed: 80s;       
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

/* ancho  */
.logos-act.full-bleed{
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}


.logos-act__track{
  display: flex;
  width: max-content;
  animation: act-marquee var(--act-speed) linear infinite;
}


.logos-act__slide{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--act-gap);
  min-width: max-content;
}

.logos-act__slide img{
  height: var(--act-item-h);
  width: auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  display: block;
  user-select: none;
}


@keyframes act-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}


@media (prefers-reduced-motion: reduce){
  .logos-act__track{ animation: none; }
}


@media (max-width: 768px){
  .logos-act{ --act-item-h: 20vh; --act-gap: 3vw; --act-speed: 22s; }
}
@media (max-width: 576px){
  .logos-act{ --act-item-h: 16vh; --act-gap: 4vw; --act-speed: 24s; }
}


/* Seccion superior  */
.kpi-overlay {
  position: absolute;
  top: 0;             
  left: 0;
  width: 100%;
  z-index: 30;         
  padding: 8px 0;
  background: transparent !important; 
  backdrop-filter: none !important;   
}

.kpi-box {
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* Responsive */
@media (max-width: 576px){
  .kpi-overlay .d-flex {
    flex-direction: column;
    gap: 12px;
  }
}

.kpi-box {
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}



/*  KPIs: tamaños*/
.kpi-box.kpi-pct img {
  /* Porcentaje respecto al ancho del contenedor del KPI */
  width: 10%;
  height: auto;
}

/* Texto en % respecto al tamaño de fuente del contenedor */
.kpi-box.kpi-pct p strong {   
  font-size: 220%;
  line-height: 1.05;
}

.kpi-box.kpi-pct p {          /*TOTAL DE EDICIONES / AFORO TOTAL */
  font-size: 110%;
  letter-spacing: .02em;
}




/* 1er y 2do KPI dentro del contenedor flex */
.kpi-overlay .d-flex > .kpi-box:nth-child(1) img,
.kpi-overlay .d-flex > .kpi-box:nth-child(2) img {
  width: clamp(72px, 7vw, 120px) !important;
  height: auto;
}

.kpi-overlay .d-flex > .kpi-box:nth-child(1) p strong,
.kpi-overlay .d-flex > .kpi-box:nth-child(2) p strong {
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  line-height: 1.05;
}

.kpi-overlay .d-flex > .kpi-box:nth-child(1) p,
.kpi-overlay .d-flex > .kpi-box:nth-child(2) p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: .02em;
}

.kpi-overlay .d-flex > .kpi-box:nth-child(1),
.kpi-overlay .d-flex > .kpi-box:nth-child(2) {
  padding: 16px 18px;
}




 /*Cambio iconos iniciales*/
/* KPIs en 2 columnas mobile*/
@media (max-width: 576px) {

  .kpi-overlay {
    position: absolute !important;
    top: 65%;              
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 30;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .kpi-overlay .d-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 4% !important;   /* espacio columnas */
    padding: 0 4%;
  }

  /* KPI ancho disponible */
  .kpi-overlay .kpi-box {
    flex: 0 1 46% !important;
    max-width: 46% !important;
    border-radius: 6%;
    padding: 6% 4%;
  }

  /* Icono  */
  .kpi-box.kpi-pct img {
    width: 28% !important;  
    height: auto;
  }

  /* Número  */
  .kpi-box.kpi-pct p strong {
    font-size: 6vw !important; 
    line-height: 1.1;
  }

  /* Texto */
  .kpi-box.kpi-pct p {
    font-size: 3.5vw !important;
    margin-top: 4%;
  }
}





/* ==== Iconos de Acceso más pequeños en mobile ==== */
@media (max-width: 576px) {
  /* Reducir el ancho de las imágenes de acceso */
  .icon-img {
    width: 28vw !important;   /* proporcional al ancho del viewport */
    max-width: 80px;          /* límite para pantallas grandes pero angostas */
    height: auto;
  }

  /* Texto más compacto */
  .icon-link p {
    font-size: 3.4vw !important; /* relativo al viewport */
    line-height: 1.2;
  }

  /* Opcional: más espacio vertical entre ítems */
  .icon-link {
    margin-bottom: 4%;
  }
}