/* =========================
   BASE
   ========================= */
#cqab{
  --bg:#191919;
  --panel:#222222;
  --textPanel:#232323;
  --ink:#ffffff;
  --text:#b0b0b0;

  --r:26px;
  --pad:clamp(18px,2.2vw,28px);
  --shadow:0 22px 70px rgba(0,0,0,.6);

  background:var(--bg);
  padding:clamp(44px,5vw,78px) 16px;
  font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui;
  color:var(--text);
}

#cqab .cqab-shell{ max-width:1180px; margin:0 auto; }

/* =========================
   DESKTOP
   ========================= */
#cqab .cqab-card{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow);
  background:linear-gradient(180deg,#252525,#1f1f1f);
}

#cqab .cqab-row{
  display:grid;
  grid-template-columns:clamp(240px,26vw,340px) 1fr;
}

/* FOTO */
#cqab .cqab-photoBox{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--panel);
}
#cqab .cqab-photoBox img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Degradado lateral */
#cqab .cqab-photoBox::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(270deg,
      rgba(35,35,35,1) 0%,
      rgba(35,35,35,.8) 24%,
      rgba(35,35,35,.45) 48%,
      rgba(35,35,35,0) 88%);
}

/* TEXTO */
#cqab .cqab-text{
  background:var(--textPanel);
  padding:var(--pad);
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
}
#cqab .cqab-title{
  margin:0;
  color:var(--ink);
  font-size:clamp(28px,3vw,42px);
  font-weight:900;
}
#cqab .cqab-copy{
  margin:0;
  line-height:1.7;
  color:rgba(255,255,255,.75);
  text-align: justify;
}
#cqab .cqab-line{
  height:1px;
  background:rgba(255,255,255,.1);
}

/* =========================
   BOTONES – RESPLANDOR UNIFICADO
   ========================= */
#cqab .cqab-dock{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

#cqab .cqab-link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:8px 14px;
  border-radius:999px;

  background:transparent;
  border:1.5px solid rgba(255,255,255,.22);

  color:rgba(255,255,255,.75);
  text-decoration:none;
  font-weight:700;
  font-size:12px;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    color .25s ease;
}

#cqab .cqab-link i{
  font-size:18px;
}

/* 🔥 Hover: efecto “encendido” */
#cqab .cqab-link:hover{
  color:#ffffff;
  border-color:rgba(255,255,255,.85);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.35),
    0 0 12px rgba(255,255,255,.35),
    0 0 28px rgba(255,255,255,.15);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:980px){
  #cqab .cqab-card{
    background:none;
    border:0;
    box-shadow:none;
  }

  #cqab .cqab-row{
    grid-template-columns:1fr;
    width:min(520px,100%);
    margin:0 auto;

    border-radius:var(--r);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:var(--shadow);
    background:var(--textPanel);
  }

  /* Degradado abajo */
  #cqab .cqab-photoBox::after{
    background:
      linear-gradient(0deg,
        rgba(35,35,35,1) 0%,
        rgba(35,35,35,.7) 34%,
        rgba(35,35,35,.3) 60%,
        rgba(35,35,35,0) 92%);
  }

  #cqab .cqab-text{
    background:transparent;
    margin-top:-16px;
  }
}

/* Mobile chico: solo icono */
@media (max-width:560px){
  #cqab .cqab-link{
    width:44px;
    height:44px;
    padding:0;
    justify-content:center;
  }
  #cqab .cqab-link span{ display:none; }
}