/* === GLOBAL === */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0f111a;
  color: #f0f0f0;
  scroll-behavior: smooth;
}
a { text-decoration: none; color: inherit; }

/* === FONDO MATRIX === */
#matrix{
  position: fixed; top: 0; left: 0;
  z-index: -1; pointer-events: none; opacity: .2; max-width: 100%;
}

/* ===== NAVBAR ===== */
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#121212; padding:1rem 2rem; position:sticky; top:0; z-index:10;
}
.navbar .brand{ font-weight:800; letter-spacing:.3px; color:#00ffcc; }
.nav-links{ list-style:none; display:flex; justify-content:center; gap:2rem; margin:0; padding:0; }
.nav-links li a{ font-weight:bold; transition:color .3s; }
.nav-links li a:hover{ color:#00ff88; }

/* Hamburguesa */
.nav-toggle{
  display:none; position:relative; width:42px; height:42px;
  border:1px solid rgba(0,255,136,.35); border-radius:10px; background:#0e1628; cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:#e8fff7;
  transform-origin:center; transition:transform .25s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle span:nth-child(1){ top:13px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:27px; }
.navbar.open .nav-toggle span:nth-child(1){ top:20px; transform:rotate(45deg); }
.navbar.open .nav-toggle span:nth-child(2){ opacity:0; }
.navbar.open .nav-toggle span:nth-child(3){ top:20px; transform:rotate(-45deg); }
body.menu-open{ overflow:hidden; }

/* === HERO === */
.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:3.5rem 1rem; min-height:100vh; position:relative; z-index:1;
}
.foto-perfil{
  width:150px; height:150px; border-radius:50%; overflow:hidden;
  margin-bottom:1.25rem; border:4px solid transparent;
}
.foto-perfil img{ width:100%; height:100%; object-fit:cover; }
.borde-neon{ border-color:#00ffcc; animation:borde-neon 1s infinite; box-shadow:0 0 10px #00ffcc, 0 0 20px #00ffcc; }
@keyframes borde-neon{ 0%,100%{box-shadow:0 0 10px #00ffcc,0 0 20px #00ffcc}50%{box-shadow:0 0 2px #00ffcc,0 0 5px #00ffcc} }

h1#nombre{
  font-size:3rem; font-weight:800; margin:0 0 1rem;
  border-right:2px solid #00ff88; white-space:nowrap; overflow:hidden;
}
.neon-fx{ color:#00ffcc; text-shadow:0 0 5px #00ffcc,0 0 10px #00ffcc,0 0 20px #00ffcc; animation:parpadeo 1s infinite; }
@keyframes parpadeo{ 0%,100%{opacity:1} 50%{opacity:.5} }

.disponible{
  border:2px solid #00ff88; padding:.5rem 1rem; border-radius:8px;
  color:#00ff88; font-weight:600; margin-bottom:1rem;
}
.descripcion{ max-width:720px; margin:1rem auto 0; font-size:1.1rem; line-height:1.6; padding:0 1rem; }

/* === SKILLS === */
.skills{ display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; margin-top:2rem; padding-bottom:1.5rem; }
.skills img{ width:50px; height:50px; transition:transform 1.5s ease-in-out; }
.skills img:hover{ animation:respirar 2s infinite ease-in-out; }
@keyframes respirar{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* === REDES === */
.redes{ margin-top:1.2rem; display:flex; gap:1.5rem; justify-content:center; font-size:1.5rem; }
.redes a{ color:#f0f0f0; transition:color .3s; }
.redes a:hover{ color:#0077b5; } .redes a:nth-child(2):hover{ color:#333; } .redes a:nth-child(3):hover{ color:#00c853; }

/* === TRAYECTORIA === */
.trayectoria{
  background:linear-gradient(180deg,#0f111a,#0c1c2c);
  padding:4.5rem 2rem 6rem; color:#f0f0f0;
}
.trayectoria h2,
.proyectos h2,
.contacto h2{
  font-size:3rem; font-weight:800; color:#00ffcc; text-align:center; margin:0 0 1.5rem;
}

/* Tabs — desktop */
.tabs-trayectoria{
  display:flex; justify-content:center; align-items:center; gap:.75rem;
  margin-inline:auto; max-width:max-content; margin-bottom:1.25rem;
}
.tabs-trayectoria button{
  flex:0 0 auto; background:transparent; border:2px solid #00ff88; color:#00ff88;
  padding:.55rem 1.25rem; border-radius:8px; font-weight:700; cursor:pointer; transition:background-color .2s ease, box-shadow .2s ease;
}
.tabs-trayectoria button:hover{ background-color:rgba(0,255,136,.1); }
.tab-activa{ background:#00ff88; color:#0f111a; box-shadow:0 0 10px #00ff88,0 0 20px #00ff88; position:relative; }
.tab-activa::after{
  content:""; position:absolute; bottom:-5px; left:25%; width:50%; height:3px;
  background:#00ff88; border-radius:2px; animation:indicador .4s ease-out;
}
@keyframes indicador{ from{width:0;opacity:0} to{width:50%;opacity:1} }

.trayectoria-tab{ display:block; }
.trayectoria-tab.oculto{ display:none; }

.estudios{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:.5rem; }
.estudio-card{
  background:#1b2a41; padding:1.25rem 1.5rem; border-radius:12px; width:300px; max-width:100%;
  box-shadow:0 0 10px rgba(0,255,136,.1); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease;
}
.estudio-card:hover{ transform:translateY(-5px); box-shadow:0 0 20px rgba(0,255,136,.2); }

/* === POPUP === */
.popup{ position:fixed; inset:0; width:100vw; height:100vh; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:1000; }
.popup-contenido{
  background:#1e2e42; padding:2rem; border-radius:10px; width:90%; max-width:560px; position:relative; color:#f0f0f0;
}
.popup-contenido h3{ margin:0 0 .5rem; font-size:1.8rem; }
.popup-contenido p{ font-size:1rem; line-height:1.6; }
.cerrar{ position:absolute; top:1rem; right:1rem; font-size:1.5rem; cursor:pointer; color:#00ffcc; }
.oculto{ display:none; }
.aparece-magico{ opacity:0; transform:translateY(50px); transition:opacity .8s ease, transform .8s ease; will-change:opacity,transform; }
.aparece-magico.visible{ opacity:1; transform:translateY(0); }
.popup-contenido .logo-empresa{ width:120px; height:auto; margin:0 auto 1rem; display:block; object-fit:contain; filter:drop-shadow(0 0 5px #00ffcc); animation:flotarLogo 3s ease-in-out infinite; }
@keyframes flotarLogo{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.contenido-flex{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.logo-empresa-circular{ width:100px; height:100px; border-radius:50%; object-fit:cover; box-shadow:0 0 10px #00ffcc; flex-shrink:0; }
.popup-texto{ flex:1; }
.popup-texto h3{ margin:0 0 .5rem; font-size:1.5rem; }
.popup-texto p{ font-size:1rem; line-height:1.5; }

/* === PROYECTOS === */
.proyectos{
  background:linear-gradient(180deg,#0c1c2c,#0f111a);
  padding:4.5rem 2rem 6rem; color:#f0f0f0; text-align:center;
}
.tarjetas-proyecto{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:1.25rem; }
.proyecto-card{
  background:#1b2a41; padding:1.25rem 1.5rem; border-radius:12px; width:300px; max-width:100%;
  box-shadow:0 0 10px rgba(0,255,136,.1); cursor:pointer; transition:transform .3s, box-shadow .3s; text-align:left;
}
.proyecto-card:hover{ transform:translateY(-5px); box-shadow:0 0 20px rgba(0,255,136,.2); }

/* === CONTACTO === */
.contacto{
  background:linear-gradient(180deg,#0f111a,#0c1c2c);
  padding:4.5rem 2rem 6.5rem; color:#f0f0f0; text-align:center; position:relative; z-index:1;
}
#formularioContacto{
  width:100%; max-width:720px; margin:0 auto; background:#121c2f;
  padding:1.5rem; border-radius:12px; box-shadow:0 0 15px rgba(0,255,136,.2);
  display:flex; flex-direction:column; gap:1.2rem;
}
.form-group{ display:flex; flex-direction:column; text-align:left; }
.form-group label{ margin-bottom:.5rem; font-weight:700; color:#00ffcc; }
.form-group input,.form-group textarea{
  padding:1rem; border-radius:8px; border:1px solid transparent; font-size:1rem; font-weight:400; background:#1e2e42; color:#f0f0f0; font-family:inherit;
}
.form-group input::placeholder,.form-group textarea::placeholder{ color:#bbb; }
#formularioContacto input:focus,#formularioContacto textarea:focus{
  outline:none; border-color:#00ff88; box-shadow:0 0 0 3px rgba(0,255,136,.15), 0 0 12px rgba(0,255,136,.35);
}
#formularioContacto button{
  background:#00ff88; color:#0f111a; padding:.85rem; border:none; border-radius:8px; font-weight:800;
  cursor:pointer; font-size:1rem; transition:background-color .2s ease; margin-top:.25rem;
}
#formularioContacto button:hover{ background:#00e676; }

/* Popup éxito reutiliza .popup/.popup-contenido */
.popup .cerrar{ color:#00ffcc; }

/* === PRIVACIDAD (ACORDEÓN) === */
.contacto .privacidad{
  max-width:720px; margin:1rem auto 0; background:#0b1324;
  border:1px solid rgba(16,185,129,.35);
  box-shadow:inset 0 0 25px rgba(16,185,129,.15), 0 0 18px rgba(16,185,129,.12);
  border-radius:14px; padding:.8rem 1rem; color:#e6fff6;
}
.contacto .privacidad summary{
  list-style:none; display:flex; align-items:center; gap:.6rem; font-weight:800; cursor:pointer; outline:none;
}
.contacto .privacidad summary::-webkit-details-marker{ display:none; }
.contacto .privacidad summary::after{ content:"▾"; margin-left:auto; opacity:.85; transition:transform .2s ease; }
.contacto .privacidad[open] summary::after{ transform:rotate(-180deg); }
.contacto .privacidad .privacidad-content{
  text-align:center; margin-top:.5rem; padding-top:.6rem;
  border-top:1px solid rgba(255,255,255,.08); color:#cfeee5; line-height:1.6;
}
.contacto .privacidad .privacidad-content ul{
  list-style:none; margin:.25rem 0 0; padding:0; display:flex; flex-direction:column; align-items:center; row-gap:.45rem;
}
.contacto .privacidad .privacidad-content li{
  display:flex; align-items:flex-start; gap:.6rem; width:min(100%,720px); text-align:center; white-space:normal; word-break:keep-all;
}
.contacto .privacidad .privacidad-content li::before{
  content:""; flex:0 0 6px; width:6px; height:6px; margin-top:.5em; border-radius:50%; background:#34d399; box-shadow:0 0 8px rgba(52,211,153,.7);
}
.contacto .privacidad .privacidad-content a{ white-space:nowrap; color:#34d399; text-decoration:underline; }

/* ====== RESPONSIVE ====== */
@media (max-width:1024px){
  .hero{ padding:3rem 1.25rem; }
  .descripcion{ max-width:680px; }
  .skills{ gap:1.25rem; }
  .skills img{ width:46px; height:46px; }
  .proyectos, .trayectoria, .contacto{ padding-left:1.25rem; padding-right:1.25rem; }
}

@media (max-width: 768px) {
  /* Acordeón: alinear a la izquierda en móvil */
  .contacto .privacidad .privacidad-content { text-align: left; }
  .contacto .privacidad .privacidad-content ul { align-items: flex-start; }
  .contacto .privacidad .privacidad-content li { text-align: left; }

  /* Hero */
  .hero { padding: 3rem 1rem; }
  h1#nombre { font-size: 2.2rem; border-right-width: 1px; }
  .descripcion { font-size: 1rem; max-width: 540px; padding: 0 .5rem; }

  /* Skills */
  .skills { gap: 1rem; }
  .skills img { width: 42px; height: 42px; }

  /* Títulos de sección */
  .trayectoria h2,
  .proyectos h2,
  .contacto h2 { font-size: 2.2rem; margin-left: 0; text-align: center; }

  /* Tabs (en móvil sí se estiran) */
  .tabs-trayectoria { gap: .5rem; flex-wrap: wrap; max-width: unset; }
  .tabs-trayectoria button { flex: 1 1 160px; padding: .55rem 1rem; }

  /* Tarjetas a una columna */
  .estudios,
  .tarjetas-proyecto { gap: 1rem; }
  .estudio-card,
  .proyecto-card {
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Popups */
  .popup-contenido { width: 92%; max-width: 520px; padding: 1.25rem; }
  .contenido-flex { gap: 1rem; }
  .logo-empresa-circular { width: 72px; height: 72px; }

  /* Formulario */
  #formularioContacto {
    width: 100%;
    max-width: 620px;
    padding: 1.25rem;
    gap: 1rem;
  }
  #formularioContacto button { width: 100%; }

  /* Acordeón (ancho y tipografía) */
  .contacto .privacidad {
    max-width: 620px;
    padding: .75rem .9rem;
  }
  .contacto .privacidad .privacidad-content { font-size: .95rem; }
  .contacto .privacidad .privacidad-content li { width: min(100%, 560px); }
}

@media (max-width:640px){
  /* Nombre encuadrado en móvil */
  h1#nombre{
    border-right:0; display:inline-block; padding:.45rem .7rem;
    border:2px solid #00ff88; border-radius:12px; white-space:normal; word-break:keep-all; text-wrap:balance; line-height:1.2; max-width:92vw;
  }
  .hero{ padding:2.4rem .9rem; }
  h1#nombre{ font-size:1.9rem; }
  .disponible{ font-size:.95rem; padding:.4rem .8rem; }
  .skills img{ width:38px; height:38px; }
  .estudio-card, .proyecto-card{ padding:1.1rem; border-radius:10px; }
  .popup-contenido{ padding:1rem; }
  #formularioContacto{ padding:1rem; }
  .form-group input, .form-group textarea{ font-size:16px; } /* evita zoom iOS */
  #formularioContacto button{ font-size:1rem; padding:.75rem; }
  .contacto .privacidad{ max-width:100%; }
  .contacto .privacidad .privacidad-content li{ width:100%; padding:0 .25rem; }
}

@media (max-width:375px){
  h1#nombre{ font-size:1.7rem; }
  .skills img{ width:34px; height:34px; }
  .tabs-trayectoria button{ flex:1 1 100%; }
  .logo-empresa-circular{ width:64px; height:64px; }
  .trayectoria h2, .proyectos h2, .contacto h2{ font-size:1.9rem; }
}

/* ===== Fix específico "Responsable" (email sin romper) ===== */
.contacto .privacidad .privacidad-content li .resp-contenido{
  display:inline-flex; flex-wrap:wrap; gap:.25rem;
}
.contacto .privacidad .privacidad-content li .resp-contenido .correo{ white-space:nowrap; }
.contacto .privacidad .privacidad-content li .resp-contenido .correo::before{ content:" ("; }
.contacto .privacidad .privacidad-content li .resp-contenido .correo::after{ content:")"; }