/* ─── VARIABLES ─────────────────────────────────────────────────────── */
:root {
  --c-bg:      #07080f;
  --c-surface: #0e0f1a;
  --c-border:  #1a1b2e;
  --c-accent:  #00e5ff;
  --c-accent2: #7b5ea7;
  --c-text:    #e8e8f0;
  --c-muted:   #5a5a75;
  --mono:      'Space Mono', monospace;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

body { background: var(--c-bg) !important; color: var(--c-text); }

/* ─── CANVAS PARTÍCULAS ─────────────────────────────────────────────── */
#particle-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .4;
}
.scanline {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px
  );
}

/* ─── HERO ──────────────────────────────────────────────────────────── */
.hero-section {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; z-index: 1;
}
.hero-glow {
  position: absolute; width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.1) 0%, transparent 70%);
  top: 50%; left: 55%; transform: translate(-50%,-50%);
  animation: pulseGlow 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulseGlow {
  0%,100% { transform:translate(-50%,-50%) scale(1);    opacity:.7; }
  50%      { transform:translate(-50%,-50%) scale(1.15); opacity:1; }
}
.hero-tag {
  font-family: var(--mono); font-size:.65rem; color:var(--c-accent);
  letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem;
  opacity:0; animation: fadeUp .6s .1s ease forwards;
}
.hero-tag::before { content:''; display:block; width:2rem; height:1px; background:var(--c-accent); }
.hero-name {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.6rem,5vw,4.2rem); font-weight:800;
  line-height:1.05; letter-spacing:-.02em; margin-bottom:1.25rem;
  opacity:0; animation: fadeUp .6s .2s ease forwards;
}
.hero-name .accent { color: var(--c-accent); }
.hero-desc {
  font-size:1rem; color:var(--c-muted); line-height:1.75;
  max-width:500px; margin-bottom:2.25rem;
  opacity:0; animation: fadeUp .6s .3s ease forwards;
}
.hero-desc strong { color:var(--c-text); }
.hero-ctas {
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; animation: fadeUp .6s .4s ease forwards;
}
.btn-futurista {
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  padding:.75rem 1.75rem; border:none; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.btn-futurista::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-100%); transition:transform .4s;
}
.btn-futurista:hover::after { transform:translateX(100%); }
.btn-primary-f { background:var(--c-accent); color:#000; font-weight:700; }
.btn-primary-f:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,229,255,.3); color:#000; }
.btn-outline-f { border:1px solid var(--c-border); color:var(--c-text); background:transparent; }
.btn-outline-f:hover { border-color:var(--c-accent); color:var(--c-accent); }

/* ─── ROL CARDS ─────────────────────────────────────────────────────── */
.rol-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
  opacity: 0;
  animation: fadeUp .6s .6s ease forwards;
}

.rol-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: .65rem 1.1rem;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  flex: 1 1 auto;
  min-width: 175px;
  max-width: 260px;
}

/* línea de acento superior que aparece al hover */
.rol-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.rol-card:hover {
  border-color: rgba(0,229,255,.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,229,255,.08);
}
.rol-card:hover::before { transform: scaleX(1); }

/* ícono circular con fondo sutil */
.rol-card-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--c-accent);
  transition: background .25s;
}
.rol-card:hover .rol-card-icon {
  background: rgba(0,229,255,.15);
}

.rol-card-body {}
.rol-card-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
  white-space: nowrap;
}
.rol-card-sub {
  font-family: var(--mono);
  font-size: .56rem;
  color: var(--c-muted);
  letter-spacing: .04em;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ─── CV BTN — estado sin archivo ───────────────────────────────────── */
.btn-cv-disabled {
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  padding:.75rem 1.75rem; display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--c-border); color:var(--c-muted);
  background:transparent; cursor:not-allowed; opacity:.5;
}

/* Terminal */
.hero-terminal {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:8px; font-family:var(--mono); font-size:.8rem;
  overflow:hidden; opacity:0; animation: fadeUp .7s .5s ease forwards;
}
.terminal-bar {
  background:var(--c-border); padding:.5rem .75rem;
  display:flex; align-items:center; gap:.5rem;
}
.t-dot { width:10px; height:10px; border-radius:50%; }
.t-dot-r{background:#ff5f57;} .t-dot-y{background:#febc2e;} .t-dot-g{background:#28c840;}
.terminal-body { padding:1.25rem 1.25rem 1.5rem; }
.t-line { line-height:1.9; color:var(--c-muted); }
.t-prompt{color:var(--c-accent);} .t-cmd{color:var(--c-text);} .t-out{color:#7b5ea7;}
.t-cursor {
  display:inline-block; width:8px; height:1em;
  background:var(--c-accent); vertical-align:text-bottom;
  animation: blink .8s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── SECTION GENÉRICA ───────────────────────────────────────────────── */
.section-futurista { position:relative; z-index:1; padding:6rem 0; }
.section-label {
  font-family:var(--mono); font-size:.62rem; color:var(--c-accent);
  letter-spacing:.2em; text-transform:uppercase;
}
.section-title {
  font-family:'Syne',sans-serif; font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800; letter-spacing:-.02em; margin-bottom:0;
}
.section-divider {
  height:1px; background:linear-gradient(90deg,var(--c-accent),transparent);
  margin:1rem 0 3rem;
}

/* ─── SKILLS — CARDS CON BARRA DE PROGRESO ───────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.skill-ring-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 1.4rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .25s, box-shadow .25s;
  opacity: 0;
  transform: translateY(20px);
}
.skill-ring-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease,
              border-color .2s, box-shadow .2s;
}
.skill-ring-card:hover {
  border-color: rgba(0,229,255,.4);
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(0,229,255,.08);
}
.skill-ring-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.skill-ring-card:hover::before { transform: scaleX(1); }

/* Logo container */
.skill-logo {
  width: 115px; height: 115px;
  border-radius: 50%;
  background: rgba(0,229,255,.05);
  border: 1px solid rgba(0,229,255,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 25px rgba(0,229,255,.08);
  transition: box-shadow .3s, border-color .3s;
}
.skill-ring-card:hover .skill-logo {
  border-color: rgba(0,229,255,.32);
  box-shadow: 0 0 35px rgba(0,229,255,.18);
}
.skill-logo img       { width: 82px; height: 82px; object-fit: contain; }
.skill-logo .icon-fa  { font-size: 2.4rem; color: var(--c-accent); }

/* Nombre y categoría */
.skill-ring-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  line-height: 1.2;
}
.skill-ring-cat {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(0,229,255,.07);
  border: 1px solid rgba(0,229,255,.18);
  padding: .15rem .5rem;
  margin-top: -.1rem;
}
.skill-ring-desc {
  font-size: .73rem;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.5;
}

/* Barra de progreso */
.skill-bar-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .1rem;
}
.skill-bar-track {
  flex: 1;
  height: 7px;
  background: var(--c-border);
  border-radius: 99px;
  overflow: hidden;
}
.skill-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff0000, #ff4d00, #ff9100);
  box-shadow: 0 0 10px rgba(255, 77, 0, 0.6);
  transition: width 1.3s cubic-bezier(.22,1,.36,1);
}
.skill-pct {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: .04em;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}


/* ─── FORMACIÓN ──────────────────────────────────────────────────────── */
.formacion-card {
  background:var(--c-surface); border:1px solid var(--c-border);
  padding:1.75rem; position:relative; overflow:hidden; height:100%;
  opacity:0; transform:translateY(20px);
  transition:opacity .5s, transform .5s, border-color .2s;
}
.formacion-card.visible { opacity:1; transform:translateY(0); }
.formacion-card:hover { border-color:rgba(0,229,255,.3); }
.formacion-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--c-accent), var(--c-accent2));
  transform:scaleX(0); transform-origin:left; transition:transform .35s;
}
.formacion-card:hover::before { transform:scaleX(1); }
.formacion-tipo { font-family:var(--mono); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--c-accent); background:rgba(0,229,255,.07); border:1px solid rgba(0,229,255,.2); padding:.2rem .6rem; display:inline-block; margin-bottom:.75rem; }
.formacion-titulo { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; margin-bottom:.3rem; line-height:1.3; }
.formacion-inst { font-size:.82rem; color:var(--c-accent); margin-bottom:.4rem; font-weight:600; }
.formacion-periodo { font-family:var(--mono); font-size:.65rem; color:var(--c-muted); margin-bottom:.75rem; }
.formacion-desc {
  font-size: .83rem; color: var(--c-muted); line-height: 1.65;
  margin-bottom: 0.5rem;
  transition: max-height 0.4s ease;
}
.formacion-desc.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.formacion-desc.expanded {
  -webkit-line-clamp: unset;
  max-height: 1000px;
}

/* Botón Ver más genérico */
.btn-read-more {
  background: none; border: none; padding: 0;
  color: var(--c-accent); font-family: var(--mono);
  font-size: .65rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 4px;
  width: 100%;
  transition: opacity .2s;
}
.btn-read-more:hover { opacity: .8; }

.btn-cert { font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; color:var(--c-accent); border:1px solid rgba(0,229,255,.3); background:rgba(0,229,255,.05); padding:.4rem .9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:background .2s; cursor:pointer; }
.btn-cert:hover { background:rgba(0,229,255,.12); color:var(--c-accent); }

/* ─── FIX MODAL ──────────────────────────────────────────────────────── */
.modal-backdrop { z-index: 1040 !important; }
.modal          { z-index: 1050 !important; }
body.modal-open { overflow: auto !important; padding-right: 0 !important; }
.modal-content { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; border-radius: 0 !important; color: var(--c-text) !important; }
.modal-header, .modal-footer { border-color: var(--c-border) !important; }
.modal-title { color: var(--c-text) !important; }
.cert-modal-img { max-width: 100%; max-height: 75vh; object-fit: contain; border: 1px solid var(--c-border); display: block; margin: 0 auto; }

/* ─── REVEAL + FADE ──────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.reveal { opacity:0; transform:translateY(25px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media(max-width:768px) {
  .rol-cards-row { gap: .5rem; }
  .rol-card { min-width: 150px; }
  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}