/* ---------- ROOT & LAYOUT ---------- */
:root{ --mobile-header-h: 60px; }
html, body { height: 100% }
body{
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;                          /* escritorio: sin scroll */
  box-shadow: inset 0 0 5rem rgba(0,0,0,.4);
  text-shadow: 0 .05rem .1rem rgba(0,0,0,.8);
}
.cover-container{
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- BACKGROUND ---------- */
body::before{
  content: "";
  position: fixed; inset: 0;
  background: url("../assets/img/background.png") center/cover no-repeat;
  filter: blur(8px) brightness(.5);
  z-index: -2;
  pointer-events: none;
}
body::after{
  content: "";
  position: fixed; inset: 0;
  background: rgba(0,0,0,.3);
  z-index: -1;
  pointer-events: none;
}

/* ---------- HEADER (desktop) ---------- */
.logo{ width:180px; height:180px; object-fit:contain }
.nav-masthead .nav-link{
  color: rgba(255,255,255,.7);
  border-bottom: .25rem solid transparent;
  transition: all .3s ease;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus{ color:#fff; border-bottom-color: rgba(255,255,255,.5); }
.nav-masthead .nav-link + .nav-link{ margin-left:1rem }
.nav-masthead .active{ color:#fff; border-bottom-color:#fff }

/* ---------- HEADER (mobile) ---------- */
.mobile-header{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.15);
  z-index: 1200;                                /* debajo del offcanvas */
}
.logo-sm{ height:24px; width:auto; display:block }

/* Offcanvas: SIEMPRE visible por encima y de tamaño completo */
.offcanvas,
.offcanvas-backdrop{ z-index: 4000 !important; }
.offcanvas.text-bg-dark{
  background:#111417;                           /* opaco */
}
@media (max-width: 991.98px){
  .offcanvas{
    width:100vw !important;
    max-width:100vw;
    height:100dvh;                              /* altura real móvil */
    max-height:100dvh;
  }
}
.offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.12); }
.offcanvas-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.offcanvas .nav-link{
  color:rgba(255,255,255,.98);
  font-weight:700;
  font-size:1.05rem;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  padding:.5rem .25rem;
}

/* Cuando el offcanvas está abierto, anula el auto-scroll del body */
body.offcanvas-open,
body:has(.offcanvas.show){
  overflow: hidden !important;
}

/* ---------- MAIN BLOCKS ---------- */
.content-blocks{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}
.block{
  flex: 1 1 340px;
  max-width: 550px;
  height: 350px;
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.40);
  transition: transform .3s ease, box-shadow .3s ease;
  z-index: 0;
}
.block::before{
  content: "";
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .5; transition: opacity .3s ease;
  z-index: 0; pointer-events: none;
}
.block:hover{ transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.block:hover::before{ opacity: .7 }

.octopia-block::before{  background-image: url("../assets/img/backgroundOctopia.png") }
.mentic-block::before{   background-image: url("../assets/img/backgroundMentic.png") }
.gobierno-block::before{ background-image: url("../assets/img/backgroundMentic.png") }

/* ---------- TITULAR EN CADA CAJA ---------- */
.block-title{
  color:#fff; font-size:1.6rem; letter-spacing:.06em; font-weight:800;
  margin:0 0 1.4rem 0; text-shadow:0 2px 4px rgba(0,0,0,.8);
  position:relative; z-index:1;
}
.block-title + p{ margin-top:.2rem }

/* ---------- LOGOS ---------- */
.brand-logo{ width:220px; max-width:70%; height:auto; margin-bottom:1rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.brand-logo--small{ width:140px; height:auto; margin:0 auto .25rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }

/* ---------- TEXT & CTA ---------- */
.block p{
  color:#ffffff !important; font-size:1.1rem; margin-bottom:1.5rem;
  text-shadow:0 2px 4px rgba(0,0,0,.8); position:relative; z-index:1;
}
.cta{ margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:.75rem; position:relative; z-index:1; }
.btn-custom{
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.5);
  color:#fff; padding:.75rem 2rem; border-radius:25px; font-weight:600;
  text-decoration:none; transition: all .3s ease; backdrop-filter: blur(10px);
  margin-top:auto;
}
.cta .btn-custom{ margin-top:0 }
.btn-custom:hover, .btn-custom:focus{ background:#28a745; border-color:#28a745; color:#ffffff; transform: translateY(-2px); }

/* ---------- FOOTER ---------- */
footer{ color: rgba(255,255,255,.6); text-align:center }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px){
  html, body{
    height:auto; min-height:100%;
    overflow-y:auto !important;              /* scroll en móvil */
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
  }
  .cover-container{
    padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
    min-height:auto;
  }
  .content-blocks{
    flex: 0 0 auto; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 1.25rem; padding: 1rem;
    min-height: calc(100vh - var(--mobile-header-h) - env(safe-area-inset-top, 0px));
  }
  .block{ max-width: 100%; height: auto; padding: 1.5rem 1.25rem; }
  .block::before{ background-size: contain; background-position: center 70%; opacity: .30; }
  .brand-logo--small{ width:120px }
  .logo{ display:none }                       /* oculta logo grande de desktop */
  .logo-sm{ height:24px }                     /* logo móvil estable */
}

@media (max-width:576px){
  .btn-custom{ padding:.6rem 1.4rem; font-size:.95rem }
}

/* ---------- IA HIGHLIGHT ---------- */
.highlight-ia,
.block:hover .highlight-ia{
  color:#01f8d1 !important; font-weight:800;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  text-shadow:none !important; padding:0 !important; margin:0 !important;
  opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;
  position:relative; z-index:3;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}