/* -------------------------
   FIX GLOBAL ENLACES #ancla
   ------------------------- */
[id]{
  scroll-margin-top:80px; /* offset para la navbar */
}

/**************** GLOBAL ****************/
:root{
  --atlas-green:#415e42;
  --atlas-green-dark:#448d49;
  --atlas-green-soft:#8fd49a;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Montserrat',sans-serif;
  background:#0b0b0b;
  overflow-x:hidden;
  color:#eaeaea;
}

/**************** NAVBAR ****************/
.navbar-brand{
  font-weight:800;
  color:var(--atlas-green)!important;
  font-size:1.55rem;
}

/**************** HERO ****************/
.hero-video{
  height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.58) contrast(1.04) saturate(1.14);
}

.overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.28) 40%,
      rgba(0,0,0,0.44) 100%
    );
}

.hero-content{
  position:relative;
  z-index:2;
  transform:translateY(-25px);
}

.hero-title{
  font-size:clamp(2.5rem,4.8vw,4.8rem);
  font-weight:800;
  color:var(--atlas-green-dark);
  text-shadow:0 0 18px rgba(0,0,0,.45);
  animation:fadeInDown .9s ease-out;
}

.hero-subtitle{
  font-size:1.3rem;
  opacity:.92;
  margin-top:16px;
  color:#eaeaea;
  animation:fadeInUp 1s ease-out;
}

@keyframes fadeInDown{
  from{opacity:0;transform:translateY(-25px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(25px)}
  to{opacity:1;transform:translateY(0)}
}

/**************** SECTION SHARKS ****************/
.section-sharks{
  background:#f3faf5;
  padding:70px 0 90px;
  text-align:center;
  color:#000;
}

.section-sharks h2{
  font-size:clamp(2rem,3.4vw,3rem);
  font-weight:800;
  color:var(--atlas-green-dark);
}

.section-sharks p{
  font-size:1.25rem;
  color:#194d33;
}

/**************** HUD DELUXE ****************/
.hud-figure{
  position:relative;
  max-width:900px;
  margin:auto;
}

.hud-image{
  width:100%;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,.40);
  object-fit:cover;
  display:block;
}

.hud-badge{
  position:absolute;
  background:rgba(62,140,65,.22);
  color:#d8fbe6;
  padding:12px 18px;
  border-radius:14px;
  font-weight:800;
  backdrop-filter:blur(8px);
  border:1px solid rgba(62,140,65,.45);
  font-size:.95rem;
  white-space:nowrap;
  box-shadow:0 0 20px rgba(62,140,65,.25);
}

.hud-badge .title{
  color:var(--atlas-green-soft);
}

.hud-top{
  top:8%;
  left:50%;
  transform:translateX(-50%);
}
.hud-left{
  top:50%;
  left:6%;
  transform:translateY(-50%);
}
.hud-bottom{
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
}

/************** CLAIMS ****************/
.claim-container{
  margin-top:70px;
}

.claim-box{
  background:#111;
  color:#fff;
  padding:28px;
  border-radius:16px;
  font-size:1.2rem;
  font-weight:700;
  border:1px solid #1f1f1f;
  transition:.25s;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.claim-box:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.35);
}

/**************** DASHBOARD ****************/
.section-dark{
  background:#0c0c0c;
  padding:70px 0 100px;
}

/**************** BETA ****************/
.section-beta{
  background:#101010;
  padding:60px 0 100px;
}

/* BLOQUE PRE-BETA */
.beta-pre-cta{
  padding:20px 0 25px;
}

.beta-pre-box{
  background:#0f0f0f;
  border:1px solid #1a1a1a;
  padding:40px 30px;
  border-radius:18px;
  box-shadow:0 0 35px rgba(0,0,0,.35);
  max-width:650px;
  margin:auto;
}

.beta-pre-icon{
  font-size:3rem;
  color:var(--atlas-green-dark);
  margin-bottom:10px;
}

.beta-pre-title{
  font-size:1.8rem;
  font-weight:800;
  color:#fff;
}

.beta-pre-text{
  color:#cfcfcf;
  font-size:1.1rem;
  margin-bottom:20px;
}

/**************** PRICING ****************/
.section-pricing{
  background:#eef4f2;
  padding:70px 0 100px;
  color:#000;
}

/**************** FOOTER ****************/
footer{
  background:#0a0a0a;
  color:#888;
}

/**************** MÓVIL ****************/
@media (max-width:576px){

  [id]{
    scroll-margin-top:110px;
  }

  .navbar-brand{
    font-size:1.3rem;
  }

  .hero-video{
    height:90vh;
  }

  .hero-bg-video{
    object-fit:contain;
    width:100%;
    height:100%;
    background:#000;
  }

  .hero-content{
    transform:translateY(-10px);
  }

  .hero-title{
    font-size:1.9rem !important;
    margin-top:0;
  }

  .hero-subtitle{
    font-size:1rem;
    margin-top:8px;
    margin-bottom:18px;
  }

  .hero-content .btn-lg{
    padding:10px 22px;
    font-size:.95rem;
  }

  .section-sharks,
  .section-dark,
  .section-beta,
  .section-pricing{
    padding-top:90px;
    padding-bottom:90px;
  }

  .hud-figure{
    max-width:100%;
    padding:0 8px;
  }

  .hud-badge{
    padding:6px 10px;
    font-size:.75rem;
  }

  .hud-top{ top:4%; }
  .hud-bottom{ bottom:5%; }
  .hud-left{
    top:42%;
    left:3%;
  }

  .claim-box{
    font-size:1rem;
    padding:20px;
  }

  h2{
    font-size:1.6rem !important;
  }

  #graphEV{
    height:80px !important;
  }

  .section-pricing .card{
    padding:20px;
  }

  .section-pricing h3{
    font-size:1.5rem;
  }

  .beta-pre-box{
    padding:30px 20px;
  }
  .beta-pre-title{
    font-size:1.4rem;
  }
  .beta-pre-text{
    font-size:1rem;
  }
}
/* ---------------------------------------------------
   ALTURA MÍNIMA REALISTA PARA SECCIONES EN DESKTOP
   --------------------------------------------------- */
@media (min-width: 768px) {

  /* Hace que cada sección llene mejor la pantalla */
  #section-sharks,
  #dashboard,
  #beta,
  #pricing {
    min-height: 100vh;        /* secciones completas */
    display: flex;
    align-items: center;      /* centra verticalmente */
  }

  /* Pero BETA ya es alta, la dejamos más controlada */
  #beta {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }

  /* Pricing especialmente necesita más altura */
  #pricing {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
}

/* ---------------------------------------------------
   MÓVIL — mantenemos normal para no crear scroll enorme
   --------------------------------------------------- */
@media (max-width: 767px) {

  #section-sharks,
  #dashboard,
  #beta,
  #pricing {
    min-height: auto !important;
    padding-top: 110px !important;
    padding-bottom: 110px !important;
  }
}