:root{
  --bg:#0a0a0a;
  --panel:#0e0e0e;
  --ink:#cfd3dc;
  --white:#fff;
  --brand:#1942f6;
  --brand-25: rgba(25,66,246,.25);
  --brand-40: rgba(25,66,246,.40);
  --line: rgba(25,66,246,.16);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Fondos suaves */
.bg-gradient{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 900px at 80% -10%, rgba(25,66,246,.14), transparent 60%),
    linear-gradient(120deg, #000, #0a0a0a, #111c3e, #000);
  background-size:300% 300%;
  animation: bgMove 24s ease infinite;
}
.bg-noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.22;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 70px);
  mix-blend-mode:soft-light;
}

/* HERO */
.hero{min-height:100svh; display:grid; place-items:center; padding:40px 20px 20px}
.hero-wrap{
  width:min(1160px, 94vw);
  display:grid; grid-template-columns: 1.1fr .9fr; gap:42px; align-items:center;
}
@media (max-width:1000px){ 
  .hero-wrap{grid-template-columns:1fr; gap:28px} 
  .portrait-col{order:-1} 

  /* CENTRADO TEXTO Y BOTONES */
  .hero-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cta-row {
    justify-content: center;
  }
}

.title{
  color:#fff; margin:0 0 6px;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.04; letter-spacing:.3px;
}
.accent{
  background: linear-gradient(90deg, var(--brand), #6b8cff 60%, var(--brand));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.role{ color:var(--brand); font-weight:700; letter-spacing:.8px; margin:0 0 8px; font-size:clamp(1rem,2.2vw,1.2rem) }
.meta{ color:#e6ebff; margin:0 0 20px; font-weight:600; letter-spacing:.3px }

.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:14px; font-weight:700; text-decoration:none;
  color:#fff; border:1px solid var(--line);
  transition:.2s transform, .2s box-shadow, .2s border-color, .2s background;
}
.btn.primary{ background:var(--brand); border-color:transparent; box-shadow:0 0 26px var(--brand-25) }
.btn.primary:hover{ transform:translateY(-2px) }
.btn.ghost:hover{ border-color:var(--brand); box-shadow:0 0 14px var(--brand-25) }

/* Foto circular grande (lado) */
.photo-wrap{
  width: clamp(320px, 38vw, 520px);
  aspect-ratio:1/1;
  margin-inline:auto;
  border-radius:50%;
  overflow:hidden;
  background:#0c0c0c;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--line) inset;
}
.photo{
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  filter: grayscale(6%) contrast(1.02) brightness(.99);
  transition: transform .45s ease, filter .45s ease;
}
.photo-wrap:hover .photo{ transform: scale(1.02); filter: brightness(1.03) }

/* SECCIONES */
.section{max-width:1100px; margin:88px auto; padding:0 20px}
.section-title{ color:var(--brand); text-align:center; margin:0 0 14px; font-size: clamp(1.6rem,3vw,2.2rem) }
.section-text{ text-align:center; line-height:1.85; margin:0 auto; max-width:820px; color:#e6ebff }

/* Filtros */
.filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:10px 0 24px }
.filter-btn{
  height:38px; padding:0 14px; border-radius:999px; font-weight:700;
  color:#e6ebff; background:#111c3e; border:1px solid var(--line);
  cursor:pointer; transition:.2s transform, .2s box-shadow, .2s border-color, .2s background;
}
.filter-btn:hover{ border-color:var(--brand); box-shadow:0 0 12px var(--brand-25); transform:translateY(-1px) }
.filter-btn.active{ background:var(--brand); border-color:transparent }

/* Cards */
.cards{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px;
  transition:.2s transform, .2s border-color, .2s box-shadow;
}
.card:hover{ transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 0 22px var(--brand-25) }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px }
.card h3{ color:#fff; margin:0; font-size:1.1rem }
.chip{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; border:1px solid var(--line); color:#dfe6ff; font-size:.78rem }
.card p{ margin:8px 0 16px; line-height:1.7; color:#d5dcff }
.card-actions .link{ color:#e6ebff; font-weight:700; text-decoration:none; border-bottom:1px dashed rgba(230,235,255,.45) }
.card-actions .link:hover{ color:#fff; border-bottom-color:#fff }

/* Ver más */
.more-wrap{ display:flex; justify-content:center; margin-top:18px }
#loadMore{ min-width:140px }

/* FOOTER */
.footer{ border-top:1px solid var(--line); padding:48px 20px 44px; text-align:center; background:var(--bg) }
.footer-inner{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:18px; align-items:center }
.socials{ display:flex; gap:16px }
.socials a{ color:#fff; opacity:.9; transition:.2s transform, .2s color, .2s opacity }
.socials a:hover{ color:var(--brand); transform:translateY(-2px); opacity:1 }

/* FX */
.fade-in{opacity:0; transform: translateY(20px); transition: .7s ease}
.fade-in.visible{opacity:1; transform:none}
@keyframes bgMove{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

@media (prefers-reduced-motion: reduce){
  .bg-gradient{animation:none}
  .fade-in{transition:none}
}