/* ======================================================
   BCP GROUP - CUSTOM STYLES
====================================================== */

:root{
  --bcp-red:#1C4489;
  --bcp-red-dark:#9f2724;
  --bcp-blue:#0D3B66;
  --bcp-white:#ffffff;
  --bcp-muted:#6b6b6b;
}

/* ======================================================
   RESET / FIX
====================================================== */

input,textarea,select,button{
  -webkit-appearance:none;
  appearance:none;
}

/* =====================================
INTRO SCREEN
===================================== */

#intro-screen{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  transition:transform 1s cubic-bezier(.65,.05,.36,1);
}

.intro-hidden{
  transform:translateY(-100%);
}

.intro-hidden .intro-scroll{
  opacity:0;
  transition:opacity .3s;
}

/* VIDEO */

.intro-video{

  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;

  z-index:-2;
  
  transform:scale(1.05);

  animation:introVideoMove 11s ease-out forwards;

  opacity: .90;

  background: rgba(0, 0, 0, 0.9);

}

/* transición del video al entrar al sitio */

.intro-zoom{

  transform:scale(1.15);

  transition:transform 1.2s ease;

}

/* animación */

@keyframes introFade{

  from{
    opacity:0;
    transform:translate(-50%,20px);
  }

  to{
    opacity:1;
    transform:translate(-50%,0);
  }

}



/* =====================================
INTRO TAB
===================================== */

#intro-tab{
  position:fixed;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  width:46px;
  height:22px;
  background:white;
  border-bottom-left-radius:40px;
  border-bottom-right-radius:40px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  cursor:pointer;
  z-index:9998;

  opacity:0;
  pointer-events:none;

  transition:top .35s ease, opacity .35s ease;
}

#intro-tab.show{
  top:0;
  opacity:1;
  pointer-events:auto;
}

#intro-tab i{

  font-size:14px;

  color:#0D3B66;

  margin-bottom:2px;

}

/* =====================================
SCROLL INDICATOR
===================================== */

.intro-scroll{

  position:absolute;

  bottom:40px;
  left:50%;

  transform:translateX(-50%);

  text-align:center;

  color:white;

  font-size:13px;

  letter-spacing:1px;

  opacity:.85;

}

/* mouse icon */

.intro-scroll span{

  display:block;

  width:28px;
  height:45px;

  border:2px solid white;

  border-radius:20px;

  margin:auto;

  position:relative;

}

/* punto animado */

.intro-scroll span::before{

  content:"";

  width:6px;
  height:6px;

  background:white;

  border-radius:50%;

  position:absolute;

  left:50%;
  top:8px;

  transform:translateX(-50%);

  animation:introScrollAnim 2s infinite;

}

@keyframes introScrollAnim{

  0%{
    opacity:0;
    transform:translate(-50%,0);
  }

  40%{
    opacity:1;
  }

  80%{
    transform:translate(-50%,18px);
    opacity:0;
  }

  100%{
    opacity:0;
  }

}

.intro-scroll p{
  margin-top:8px;
}

/* ======================================================
   NAVBAR
====================================================== */

.navbar.custom-navbar{
  background:white;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.navbar{
  height:72px;
}

.navbar .navbar-brand img{
  height:48px;
}

.navbar .nav-link{
  color:#222!important;
  font-weight:500;
  font-size:15px;
  padding:.6rem .9rem;
}

.navbar .nav-link:hover{
  color:var(--bcp-red)!important;
}

/* ======================================================
   HERO APPS
====================================================== */
.hero-video{

position:absolute;

top:0;
left:0;

width:100%;

/* el alto lo controla el video */
height:auto;

/* asegura cubrir horizontal */
min-height:100%;

/* recorte siempre desde arriba */
object-fit:cover;
object-position:top center;

z-index:0;

}

.hero-video-mobile{
display:none;
}

@media (max-width:768px){

.hero-video-desktop{
display:none;
}

.hero-video-mobile{
display:block;
}

}

.apps-hero:hover .hero-title{
transform:scale(1.03);
transition:.4s;
}

.apps-hero{

position:relative;

display:flex;
align-items:center;
justify-content:flex-end;

text-align:right;

overflow:hidden;

/* altura mínima para que el video tenga espacio */
min-height:520px;

cursor:pointer;

}

/* animación muy suave */
.apps-hero::after{

  content:"";
  position:absolute;
  inset:0;

  background:
  radial-gradient(circle at center,
  rgba(190,48,44,.05),
  rgba(0,0,0,.08));

  pointer-events:none;
}

/* overlay contenido */

.apps-hero .overlay{
  position:relative;
  z-index:2;
  padding:160px 20px 120px;
}

@media (max-width:768px){

  .apps-hero .overlay{
    padding:120px 20px 80px;
  }

  .hero-content{
    max-width:100%;
    margin-right:0;
  }

  .apps-hero{
    justify-content:center;
    text-align:center;
  }

}

@media (max-width:768px){

  .apps-hero{

  min-height:460px;

  }

  .hero-video{

  min-height:460px;

  }

}
/* contenedor */

.hero-content{

  max-width:500px;

  margin-right:5px; /* separación del borde derecho */

}

.hero-cta{

  position:absolute;

  right:60px;
  top:50%;

  transform:translateY(-50%);

  text-align:center;

  z-index:3;

  color:white;

  text-decoration:none;

}
@media (max-width:768px){

  .apps-hero{
    flex-direction:column;
    justify-content:flex-end;
  }

  .hero-cta{

    position:relative;

    right:auto;
    top:auto;

    transform:none;

    margin-bottom:40px;

   }

  .hero-play{
    width:60px;
    height:60px;
    font-size:22px;
  }

}

.hero-play{

width:80px;
height:80px;

border-radius:50%;

border:2px solid white;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;

animation:heroPulse 2.5s infinite;

cursor:pointer;

}
.hero-play:hover{

background:#0D3B66;

border-color:#0D3B66;

color:white;

box-shadow:0 12px 30px rgba(13,59,102,.45);

}

.hero-cta:hover{

color:#0D3B66;

}

.hero-cta p{

margin-top:10px;

font-size:14px;

letter-spacing:1px;

opacity:.9;

}

@keyframes heroPulse{

0%{transform:scale(1);opacity:.8;}
70%{transform:scale(1.25);opacity:.2;}
100%{opacity:.2;}

}

.hero-divider{

  width:80px;
  height:4px;

  background:var(--bcp-red);

  margin:28px 0 28px auto; /* línea alineada a la derecha */

  border-radius:3px;

}

/* powered by */

.hero-powered{

  font-size:14px;
  color:rgba(255,255,255,.75);
  letter-spacing:.5px;

  animation:fadeUp 2s ease;
}

.hero-powered strong{
  color:white;
}

/* animación */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-link{
  display:block;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.hero-link:hover .hero-title{
  transform:scale(1.03);
  transition:.4s;
}

/* ======================================================
   PRODUCTS
====================================================== */

#products .card{

  border:none;
  border-radius:8px;
  overflow:hidden;

  transition:.25s;
}

#products .card:hover{

  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.08);

  border-bottom:3px solid var(--bcp-red);
}

#products .card img{

  height:160px;
  object-fit:cover;
}

#products .card-body h5{
  font-weight:600;
}

/* ======================================================
   MAGNETA CTA BUTTON
====================================================== */

#magneta{
  position:relative;
  overflow:hidden;
}

.magneta-cta{

position:absolute;

top:80px;
left:5px;

z-index:5;

display:flex;
align-items:center;

}

.magneta-btn{

display:flex;
align-items:center;

height:56px;

padding:0 18px;

border-radius:40px;

background:rgba(20,40,80,.45);

backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,.35);

color:white;

text-decoration:none;

transition:all .35s ease;

overflow:hidden;

}

.magneta-btn::after{

  content:"";

  position:absolute;

  width:64px;
  height:64px;

  border-radius:50%;

  border:2px solid rgba(255,255,255,.4);

  left:0;

  animation:magnetaPulse 2.5s infinite;

}

@media (max-width:768px){

.magneta-cta{

left:50%;
top:auto;
bottom:25px;

transform:translateX(-50%);

}

.magneta-btn{

height:48px;

padding:0 16px;

}

.magneta-icon{

width:34px;
height:34px;

}

.magneta-icon i{
font-size:18px;
}

.magneta-text{

font-size:13px;

opacity:1;
transform:none;

}

}

@keyframes magnetaPulse{

  0%{transform:scale(1);opacity:.7;}

  70%{transform:scale(1.6);opacity:0;}

  100%{opacity:0;}

}

/* icono */

.magneta-icon{

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.15);

  margin-right:12px;

}

.magneta-icon i{
  font-size:22px;
}

/* texto oculto inicialmente */

.magneta-text{

  font-size:15px;

  font-weight:600;

  white-space:nowrap;

  opacity:0;

  transform:translateX(-10px);

  transition:all .35s ease;

}

/* hover */

.magneta-btn:hover{

  background:white;

  color:#0D3B66;

  box-shadow:0 18px 40px rgba(0,0,0,.35);

}

.magneta-btn:hover .magneta-text{

  opacity:1;

  transform:translateX(0);

}


#magneta .magneta-video{

  width:100%;

  border-radius:0;

  object-fit:contain;

  box-shadow:#ffffff;

}

/* ======================================================
   MAP - COVERAGE SECTION
====================================================== */

.map-wrapper{
  position:relative;
  max-width:1500px;
  margin:auto;
  padding:40px 10px;
}

.map-wrapper img{
  width:100%;
  display:block;
  user-select:none;
}

/* =========================
   MAP POINT
========================= */

.map-point{

  position:absolute;

  width:14px;
  height:14px;

  background:var(--bcp-red);

  border-radius:50%;

  transform:translate(-50%,-50%);

  border:2px solid white;

  cursor:pointer;

  z-index:10;

  box-shadow:0 4px 12px rgba(190,48,44,.35);

  transition:transform .2s ease, box-shadow .2s ease;
}

/* hover */

.map-point:hover{

  transform:translate(-50%,-50%) scale(1.25);

  box-shadow:0 8px 20px rgba(190,48,44,.45);
}

/* =========================
   MAP TOOLTIP PREVIEW
========================= */

#map-preview{

position:absolute;

display:none;

width:230px;

background:white;

border-radius:10px;

padding:12px;

box-shadow:0 20px 40px rgba(0,0,0,.25);

z-index:100;

pointer-events:none;

animation:fadeMapCard .2s ease;

}

@keyframes fadeMapCard{

from{
opacity:0;
transform:translateY(6px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* imagen */

#map-preview img{

  width:100%;

  border-radius:6px;

  margin-bottom:8px;
}

/* texto */

.preview-text{
  text-align:left;
}

/* titulo */

.preview-title{

  font-size:14px;

  font-weight:700;

  color:#222;

  margin-bottom:4px;
}

/* descripcion */

.preview-desc{

  font-size:12px;

  color:#666;

  line-height:1.35;
}




/* responsive */

@media (max-width:768px){

  .map-point{
    width:12px;
    height:12px;
  }

  #map-preview{
    width:180px;
  }

}

/* ======================================================
   MAP CONTAINER
====================================================== */

#map-container{

position:relative;

width:100%;
max-width:1100px;

height:560px;

margin:auto;
overflow: hidden;

}

/* SVG del globo centrado */

#globe-map{

position:absolute;
left:50%;
top:50%;

transform:translate(-50%,-50%);

width:88vw;
max-width:560px;

height:auto;

z-index:2;

}
/* ======================================================
   MAP MARKERS
====================================================== */

.map-marker{
position:absolute;
width:10px;
height:10px;
background:#1C4489;
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 6px rgba(255, 255, 255, 0.8);
cursor:pointer;
z-index:10;
}

/* halo animado */

.map-marker::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:28px;
height:28px;
transform:translate(-50%,-50%);
border-radius:50%;
background:rgba(14, 28, 87, 0.25);
animation:markerPulse 2.4s infinite;
}

@keyframes markerPulse{
0%{transform:translate(-50%,-50%) scale(.4);opacity:.9;}
70%{transform:translate(-50%,-50%) scale(1.6);opacity:0;}
100%{opacity:0;}
}

/* hover */

.map-marker:hover{

transform:translate(-50%,-50%) scale(1.4);

box-shadow:0 0 12px rgba(16, 4, 247, 0.9);

}

/* ======================================================
   MAP CARDS
====================================================== */

.map-card{

  position:absolute;

  width:clamp(160px,18vw,200px);

  background:white;

  border-radius:10px;

  padding:10px;

  box-shadow:0 18px 40px rgba(0,0,0,.22);

  opacity:0;

  transform:translateY(10px);

  transition:all .45s cubic-bezier(.25,.8,.25,1);

  z-index:20;

}

.map-card.show{
opacity:1;
transform:translateY(0);
}

.map-card img{

width:100%;

height:70px;

object-fit:cover;

border-radius:6px;

margin-bottom:6px;

}

.map-card-title{

font-weight:600;

font-size:13px;

line-height:1.2;

margin-bottom:3px;

}

.map-card-desc{

font-size:11px;

color:#666;

line-height:1.35;

}

/* ======================================================
   GUIDE LINES
====================================================== */

.map-line{
position:absolute;
background:#3fa9f5;
opacity:.9;
z-index:5;
}

.line-h{
height:2px;
}

.line-v{
width:2px;
}

@media (max-width:768px){

.map-line{
display:none;
}

.map-card{

left:50% !important;

transform:translateX(-50%);

width:170px;

top:auto !important;

bottom:30px;

}

}

@media (max-width:768px){

  #map-container{
    height:420px;
  }

  #globe-map{
    width:320px;
  }

}

@media (max-width:768px){

.map-card{

left:50% !important;

transform:translateX(-50%);

width:170px;

}

}

/* ======================================================
   NEWS
====================================================== */

.carousel-control-prev-icon,
.carousel-control-next-icon{

  background-color:rgba(0,0,0,.0);
  width:44px;
  height:44px;
  border-radius:50%;
}


/* ======================================================
NEWS FULL WIDTH
====================================================== */

#newsSlider{

  width:100%;

  margin-left:0;

}

.news-slide{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

}

/* imagen responsive real */

.news-slide img{

  width:100%;

  max-width:none;

  height:auto;

  display:block;

}

/* overlay botón */

.news-overlay{

  position:absolute;

  bottom:40px;

  left:50%;

  transform:translateX(-50%);

  z-index:3;

}
/* ======================================================
NEWS ARROWS
====================================================== */

.carousel-control-prev-icon,
.carousel-control-next-icon{

	background-size:100% 100%;

	width:50px;
	height:50px;

	filter:invert(20%) sepia(50%) saturate(900%) hue-rotate(185deg);

}

/* mejora contraste */

.carousel-control-prev,
.carousel-control-next{

	width:8%;

}

/* ======================================================
NEWS BUTTON
====================================================== */

.news-btn{

  background:var(--bcp-blue);

  color:white;

  padding:12px 28px;

  border-radius:40px;

  font-weight:600;

  text-decoration:none;

  box-shadow:0 12px 30px rgba(0,0,0,.25);

  transition:.3s;

}

.news-btn:hover{

  background:#082846;

  color:white;

  transform:translateY(-2px);

}

/* ======================================================
   GALLERY PRO SLIDE
====================================================== */

#gallery-section{
  width:100%;
  background:#000000;
  padding:90px 0;
}

#gallery{
  width:100%;
}

/* slide */

.gallery-slide{

  height:520px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  overflow:hidden;

}

/* fondo blur más natural */

.gallery-bg{

  position:absolute;

  width:110%;
  height:110%;

  object-fit:cover;

  filter:blur(6px) brightness(.75);

  transform:scale(1.12);

  z-index:1;

}

/* imagen principal */

.gallery-img{

  position:relative;

  max-height:440px;
  max-width:80%;

  object-fit:contain;

  border-radius:10px;

  box-shadow:0 30px 70px rgba(0,0,0,.6);

  z-index:2;

}


/* =========================
   INDICADORES PERFECTOS
========================= */

#gallery .carousel-indicators{

  bottom:-45px;

  margin:0;

  display:flex;
  justify-content:center;

}

#gallery .carousel-indicators li{

  width:7px;
  height:7px;

  border:none !important;

  border-radius:50%;

  background:rgba(255,255,255,.35);

  margin:0 6px;

  padding:0;

  opacity:1;

  box-sizing:border-box;

  transition:all .25s ease;

}

/* punto activo */

#gallery .carousel-indicators .active{

  background:var(--bcp-white);

  transform:scale(1.35);

}

/* ======================================================
   CONTACT
====================================================== */

#contact .btn-primary{

  background:var(--bcp-red);
  border-color:var(--bcp-red);
}

#contact{

  position:relative;

  background-image:url("../imgs/IMAGEN_FINAL-01.png");

  background-position:center bottom;

  background-repeat:no-repeat;

  background-size:cover;

  color:white;

}


#contact .container{

  background:rgba(0,0,0,.0);

  padding:50px;

  border-radius:8px;

}

/* ======================================================
   SECTIONS
====================================================== */

.section{
  padding-top:60px;
  padding-bottom:60px;
}

.section-title{

  font-weight:600;
  margin-bottom:40px;
}

.section-title::after{

  content:"";
  display:block;

  width:60px;
  height:3px;

  background:var(--bcp-red);

  margin:10px auto 0;
}

/* ======================================================
ABOUT FULL BACKGROUND
====================================================== */

#about{

	position:relative;

	background-image:url("../imgs/FONDO-08.png");

	background-repeat:no-repeat;

	background-position:bottom center;

	background-size:contain;

	color:#080808;

	padding:100px 0;

}

/* overlay oscuro para mejorar lectura */

#about::before{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.0);

}

#about .container{

  position:relative;

  z-index:2;

}

/* video contenedor */

#about .col-md-6:last-child{

  display:flex;

  align-items:center;

  justify-content:center;

}

.about-video{

  width:100%;

  max-width:520px;

  height:auto;

  display:block;

  animation:logoFloat 6s ease-in-out infinite;

}

@keyframes logoFloat{
  0%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
  100%{transform:translateY(0);}
}

/* eliminar estilo anterior de fotos */

#about img{

  border:none;

  box-shadow:none;

}

#about .col-md-6:first-child{

  max-width:520px;

}

#about h6{
    font-size:14px;
    font-weight:600;
}

#about small{
    font-size:12px;
}

/* ======================================================
ABOUT BUTTON
====================================================== */

.about-btn{

	background:var(--bcp-blue);

	color:white;

	border-radius:30px;

	padding:10px 26px;

	font-weight:600;

	border:none;

	transition:.25s;

	margin-top:28px;

	display:inline-block;

}

.about-btn:hover{

	background:#0a2e52;

	color:white;

}

#about p{

  text-align:justify;

  line-height:1.7;

}