/* ---------- ROOT & LAYOUT ---------- */
html, body{height:100%}
body{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  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;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:rgba(0,0,0,.3);
  z-index:-1;
}

/* ---------- HEADER ---------- */
.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}

/* ---------- MAIN BLOCKS ---------- */
.content-blocks{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.block{
  flex:1;
  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;
}
.block::before{
  content:"";
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.5; transition:opacity .3s ease;
}
.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")}

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

/* ---------- TEXT & BUTTON ---------- */
.block p{
  color:#ffffff !important;           /* blanco puro asegurado */
  font-size:1.1rem;
  margin-bottom:1.5rem;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}

.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;                    /* alinea todos los botones */
}
.btn-custom:hover,
.btn-custom:focus{
  background:#28a745;                 /* verde acción */
  border-color:#28a745;
  color:#ffffff;
  transform:translateY(-2px);
}

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

/* ---------- RESPONSIVE ---------- */
@media (max-width:768px){
  .content-blocks{flex-direction:column;gap:1.5rem;padding:1rem}
  .block{max-width:100%;height:250px}
  .brand-logo{width:180px}
  .block p{font-size:1rem}
  .logo{width:120px;height:120px}
  .nav-masthead .nav-link{font-size:.9rem}
  .nav-masthead .nav-link + .nav-link{margin-left:.5rem}
}
@media (max-width:576px){
  .content-blocks{padding:.5rem}
  .block{height:220px;padding:1.5rem}
  .brand-logo{width:140px;margin-bottom:.75rem}
  .btn-custom{padding:.5rem 1.5rem;font-size:.9rem}
  .logo{width:80px;height:80px}
}

.highlight-ia {
  color: #29e7a8;
  font-weight: bold;
  border-radius: 0.3em;
  padding: 0.08em 0.22em;
}