/* ===== Página SOBRE MÍ / PORTAFOLIO ===== */

.about{ padding: 60px 0 20px; }
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.title-xl{ font-size: clamp(28px, 5vw, 44px); margin:0 0 10px; }
.title-lg{ font-size: clamp(22px, 4vw, 32px); margin: 8px 0 12px; }

.about-bullets{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;
}
.about-bullets span{
  font-size:.95rem; opacity:.95;
  border:1px solid rgba(99,102,241,.35);
  border-radius:999px; padding:.45rem .75rem;
  background:linear-gradient(180deg, rgba(17,24,39,.6), rgba(12,16,30,.6));
}

/* Marco de retrato con animación pro (glow + tilt) */
.about-figure{ margin:0; }
.portrait-frame{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(167,139,250,.3);
  background: radial-gradient(60% 80% at 50% 0%, rgba(79,70,229,.12), transparent 60%),
              radial-gradient(50% 60% at 90% 30%, rgba(56,189,248,.10), transparent 50%);
  transform-style:preserve-3d;
  will-change: transform, box-shadow;
  transition: box-shadow .3s ease, transform .15s ease;
}
.portrait-frame img{ width:100%; height:auto; display:block; }
.portrait-frame:hover{ box-shadow:0 18px 60px rgba(0,0,0,.45); }

/* Glow suave que “respira” */
.portrait-frame .glow{
  position:absolute; inset:-2px; pointer-events:none; border-radius:inherit;
  background: conic-gradient(from 180deg at 10% -10%,
    rgba(56,189,248,.35), rgba(139,92,246,.35) 35%, rgba(79,70,229,.35) 65%, rgba(56,189,248,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 24s linear infinite, breathe 6s ease-in-out infinite;
  opacity:.25;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%,100%{ filter: blur(14px); opacity:.22 }
  50%{ filter: blur(24px); opacity:.32 }
}

.figcap{ font-size:.9rem; opacity:.8; text-align:center; margin-top:8px }

/* Bloque experiencia */
.about-experience{
  margin-top: clamp(26px, 6vw, 64px);
  background: linear-gradient(180deg, rgba(17,24,39,.65), rgba(12,16,30,.65));
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 22px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 14px 44px rgba(0,0,0,.35);
}

/* ===== FAQ ===== */
.faq{ padding-top: 40px; }
.faq-list{ display:grid; gap:12px; margin-top:14px; }

.faq-item{
  border:1px solid rgba(99,102,241,.25);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(12,16,30,.55));
  overflow:hidden;
}
.faq-q{
  width:100%;
  text-align:left;
  padding: 14px 16px;
  font-weight:600; color:var(--ink);
  background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-q .chev{
  width:18px; height:18px; flex:0 0 18px;
  border-right:2px solid #cfd1ff; border-bottom:2px solid #cfd1ff;
  transform: rotate(45deg); transition: transform .25s ease;
  opacity:.85;
}
.faq-item.open .faq-q .chev{ transform: rotate(-135deg); }

.answer{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
  border-top:1px solid rgba(255,255,255,.06);
}
.answer > div{ overflow:hidden; padding:0 16px }
.faq-item.open .answer{ grid-template-rows: 1fr; }
.answer p, .answer div{ color:#cfd1d9; margin:12px 0 16px }

/* CTA bajo el FAQ */
.faq-cta{
  margin-top: 18px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.faq-cta .cta-copy{ margin:0; font-weight:600 }

/* Reveal (reusa tus clases) */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.reveal.in-view{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
}