/* =========================================================================
   PERFIL TARJETA • Estilo visual refinado
   ========================================================================= */

/* -------- Base -------------------------------------------------------- */
html,body{height:100%;margin:0;font-family:'Inter',sans-serif}
body{background:#eef1ff}
body::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);
             backdrop-filter:blur(3px);z-index:-1}

/* -------- Wrapper ----------------------------------------------------- */
.perfil-wrapper{
  min-height:100%;display:flex;justify-content:center;align-items:flex-start;
  padding:7rem 1rem 2rem;
}

/* -------- Tarjeta ----------------------------------------------------- */
.perfil-tarjeta{
  position:relative;width:100%;max-width:500px;
  padding:7rem 2rem 3.2rem;      /* espacio superior para foto */
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-radius:1.5rem;box-shadow:0 12px 32px rgba(0,0,0,.12);
  text-align:center;overflow:visible;
}

/* -------- Halo radial ------------------------------------------------- */
.perfil-tarjeta::before{
  content:"";position:absolute;top:-70px;left:50%;transform:translateX(-50%);
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at center,
              #7967ff 0%,);
  filter:blur(40px);pointer-events:none;z-index:0}
.perfil-tarjeta>*{position:relative;z-index:1}

/* -------- Foto -------------------------------------------------------- */
.perfil-imagen-container{
  position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:180px;height:180px;border-radius:50%;overflow:hidden;
  background:#e5e7eb;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.perfil-imagen{width:100%;height:100%;object-fit:cover}

/* -------- Nombre ------------------------------------------------------ */
.perfil-nombre{
  margin:.9rem 0 1.6rem;font-size:2.05rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;color:#111827
}

/* =========================================================================
   BOTÓN HAMBURGUESA (visible ≤768 px)
   ========================================================================= */
.hamburger-btn {
  position: absolute;
  right: 1rem;
  top: 4.4rem;
  width: 44px;
  height: 44px;
  border: 2px solid #d1d5db;
  background: #ffffffc7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  color: #374151;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all .25s;
  z-index: 80;
}

.hamburger-btn:hover{background:#f8f9ff;border-color:#b4b9c3}
@media(min-width:769px){.hamburger-btn{display:none}}   /* fuera en escritorio */

/* =========================================================================
   MENÚ INTERNO
   ========================================================================= */
/* — Base — escondido en móvil hasta que se aplique .active — */
.perfil-tarjeta .menu-links{
  max-width:360px;width:100%;margin:0 auto;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:1.4rem;background:#fffffff0;border-radius:.9rem;
  box-shadow:0 10px 28px rgba(0,0,0,.08);text-transform:uppercase;letter-spacing:.05em
}
.perfil-tarjeta .menu-links.active{display:flex}

/* — Escritorio: fila centrada y SIN SALTOS — */
@media(min-width:769px){
  .perfil-tarjeta .menu-links{
    display:flex !important;flex-direction:row;justify-content:center;
    gap:2rem;padding:0;background:transparent;box-shadow:none;margin:1.5rem auto 0;
    flex-wrap:nowrap     /* evita que “Sobre mí” salte a segunda línea   */
  }
}

/* — Enlaces — */
.perfil-tarjeta .menu-links a{
  font-size:.9rem;font-weight:700;color:#4b5563;
  padding:.46rem 1rem;border-radius:.55rem;white-space:nowrap;   text-decoration:none; 
  transition:background .25s,color .25s}
.perfil-tarjeta .menu-links a:hover{background:#eef2ff;color:#1d4ed8}

/* =========================================================================
   ROLES
   ========================================================================= */
.perfil-roles{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1.4rem}
.rol-badge{
  background:#e0e7ff;color:#3730a3;font-size:.8rem;
  padding:.42rem .95rem;border-radius:9999px;font-weight:600}

/* =========================================================================
   DESCRIPCIÓN
   ========================================================================= */
.perfil-descripcion{
  margin-top:1.55rem;font-size:1rem;line-height:1.65;
  color:#374151;white-space:pre-line}

/* =========================================================================
   RESPONSIVE • móvil muy pequeño (≤480 px)
   ========================================================================= */
@media(max-width:480px){
  .perfil-wrapper{padding:7.5rem .8rem 2rem}
  .perfil-tarjeta{padding:7rem 1.2rem 3rem}
  .perfil-imagen-container{width:150px;height:150px;top:-75px}
  .perfil-nombre{font-size:1.72rem}
  .hamburger-btn{top:3.9rem;right:.8rem}
  .perfil-tarjeta .menu-links a{font-size:.88rem}
}