@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: 'CyberBlast';
  src: url('../fonts/CyberBlast-JpK2o.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'NeonAdventure';
  src: url('../fonts/NeonAdventure-VoOy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'NeonFuture';
  src: url('../fonts/NeonFuture-6YY2A.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@keyframes aparecerYParpadear {
  0% { opacity: 0; }
  10%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0; }
}
@keyframes entraDesdeLaDerecha {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes escribir {
  from { width: 0; }
  to { width: 29ch; }
}
/* Animación modal*/
@keyframes neon-border-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}


:root {
  --color-primary: #F706CF;   
  --color-secondary: #2DE2E6; 
  --color-accent: #6D12F5;
  --color-text: #F0EDEE;
  --color-muted: #6082A6;
  --header-height: 6rem;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background: linear-gradient(180deg, #1F0845 30%, #381473 50%, #9D2182 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body {
  min-height: 100vh;  /* Importante para que se extienda al menos al alto de la ventana */
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  background: transparent; /* Que body no tenga fondo para que se vea el de html */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background-color: rgba(15, 15, 30, 0.85);
  backdrop-filter: blur(6px);
}

.banner-container { 
    padding-bottom: 0.5rem; 
    border-bottom: 1px solid var(--color-accent);
 }

.banner {
  font-size: 4rem;
  letter-spacing: 2px;
  text-align: left;
  
}
.nombre {
  font-family: 'NeonAdventure', sans-serif;
  background: linear-gradient(to bottom, #FF9F40, #FF3C97, #9D4EDD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  animation: entraDesdeLaDerecha 2.5s ease-out;
  text-align: left;
}

.slogan1 {
  font-family: 'CyberBlast', Courier, monospace;
  text-align: left;
  color: #CD2DAC;
  opacity: 0;
  text-shadow: 0 0 2px #CD2DAC, 0 0 20px #CD2DAC;
  animation: aparecerYParpadear 1.75s infinite;
  animation-delay: 2.5s;
}

.slogan {
  font-family: 'NeonFuture', Courier, monospace;
  color: var(--color-secondary);
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--color-muted);
  width: 0;
  animation: escribir 1.5s steps(30, end) 3s forwards;
  text-align: center;
}

.link-retro:hover {
color: #0FF;
text-shadow: 0 0 5px #0FF;
}

.link-retro:hover::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(to right, #0ff, #ff3c97);
box-shadow: 0 0 10px #0ff;
transition: width 0.3s ease;
}

  

/* Activo y focus */

.link-retro.active, .link-retro:focus {

background-color: var(--color-secondary);
color: var(--color-accent);
text-shadow: 0 0 6px var(--color-secondary),0 0 12px var(--color-secondary);
padding: 0.5rem 1rem;
border-radius: 8px;
border: 2px solid var(--color-secondary);
box-shadow: 0 0 6px var(--color-secondary),0 0 12px #FF3C97;
position: relative;
z-index: 1;
font-weight: 700;
}

.navbar-retro {
  border-top: 1px solid #FF3C97;
  width: 100%;
  padding: 0.5rem 1rem;
  margin: 0;
  background: transparent;
}

.navbar-nav .nav-link {
  background: none !important;
  color: #FF6F3C;
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}

.navbar-nav .nav-link.active {
  background-color: var(--color-accent);
  color: var(--color-secondary);
  text-shadow: 2 2 4px var(--color-secondary), 0 0 12px var(--color-secondary);
  border-radius: 8px;
  border: 2px solid var(--color-secondary);
  box-shadow: 0 0 6px var(--color-secondary), 0 0 12px #FF3C97;
  font-weight: 700;
  z-index: 1;
}

footer.pie a {
  all: unset; /* esto borra TODO: background, padding, borde, etc. */
  display: inline-block;
  margin: 0 0.5rem;
  cursor: pointer;
}

footer.pie i {
  font-size: 1.5rem;
  color: var(--color-secondary);
  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

footer.pie a:hover i {
  color: var(--color-primary);
  transform: scale(1.2);
  text-shadow: 0 0 6px var(--color-primary), 0 0 12px var(--color-accent);
}

footer.pie {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-accent);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 -2px 10px rgba(109, 18, 245, 0.3);
  padding: 0.25rem 0; 
  margin: 0;          /* asegurarse de que no se expanda */
  
}
footer.pie p,
footer.pie div {
  font-family: 'Orbitron', sans-serif;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
}

    .page-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    main {
      flex: 1 0 auto;
    }

    footer.pie {
      flex-shrink: 0;
    }


.main-retrowave {
  max-width: 900px;
  margin: 2rem auto 4rem auto;
  font-family: 'Orbitron', sans-serif;
  color: var(--color-text);
}

/* Secciones retrowave */
.seccion {
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow:
    0 0 15px var(--color-primary),
    0 0 30px var(--color-accent);
}

/* Saludo */
.seccion.saludo {
  background: linear-gradient(135deg, #FF3C97, #6D12F5);
  color: var(--color-text);
  text-align: center;
  text-shadow: 0 0 8px #FF3C97, 0 0 15px #6D12F5;
}

.seccion.saludo h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}

.seccion.saludo h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.seccion.saludo p {
  font-size: 1.1rem;
  font-family: 'Roboto', sans-serif;
}
.seccion.saludo strong {
  color: var(--color-secondary);
  font-weight: 700;
  text-shadow: 0 0 5px var(--color-secondary);
}

/* Colores destacados para span.primary y em.muted en saludo */
.seccion.saludo .primary {
  color: var(--color-accent);
  font-weight: bold;
}

.seccion.saludo .muted {
  color: var(--color-muted);
  font-style: italic;
}

/* Botón personalizado  */
.btn-outline-retrowave {
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  background-color: transparent;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-outline-retrowave:hover {
  background-color: var(--color-secondary);
  color: #0F0F1E;
  box-shadow: 0 0 10px var(--color-secondary), 0 0 20px var(--color-accent);
}

.btn-outline-retrowave {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  margin-top: 1rem;
}

.btn-outline-retrowave:hover {
  background: var(--color-primary);
  color: var(--color-text);
  box-shadow: 0 0 12px var(--color-primary);
}

/* Contacto */
.seccion.contacto {
  background: linear-gradient(135deg, #2DE2E6, #6D12F5);
  color: var(--color-text);
  text-align: center;
  text-shadow: 0 0 6px #2DE2E6, 0 0 15px #6D12F5;
  
}

.btn-retrowave {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-text);
  border-radius: 12px;
  padding: 0.6rem 1.2rem;
  border: none;
  box-shadow: 0 0 12px var(--color-primary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-retrowave:hover {
  background: var(--color-accent);
  box-shadow: 0 0 20px var(--color-accent);
}

/* Proyectos */
.seccion.proyectos {
  background: linear-gradient(135deg, #FF3C97, #2DE2E6);
  color: var(--color-text);
  text-shadow: 0 0 8px #FF3C97, 0 0 20px #2DE2E6;
  padding: 2rem 1rem;
  text-align: center;
}

/* Para que el texto general sea blanco */
.seccion.proyectos,
.seccion.proyectos p,
.seccion.proyectos h3,
.seccion.proyectos .card-text {
  color: var(--color-text);
}

/* Card */
.proyecto-card {
  background: #1F0845;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: 0 0 15px var(--color-primary);
  margin: 1rem auto 2rem;
  max-width: 900px;
  color: var(--color-text);
}

/* Destacar el título y el span */
.card-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.card-title .resaltado {
  color: var(--color-accent);
  text-shadow: 0 0 8px var(--color-accent);
}

/* Texto pequeño y destacado */
.card-text.small {
  color: var(--color-text);
}

.card-text .resaltado {
  color: var(--color-secondary);
  font-weight: 700;
  text-shadow: 0 0 6px var(--color-secondary);
}

/* Botón dentro de la card */
.card-footer-btn {
 padding: 1rem 1.5rem 1rem 0; /* Más espacio a la derecha */
  text-align: right;
}

.card-footer-btn .btn-retrowave {
  background: var(--color-primary);
  color: var(--color-text);
  border-radius: 12px;
  padding: 0.4rem 1rem;
  font-weight: 700;
  box-shadow: 0 0 12px var(--color-primary);
  transition: all 0.3s ease;
  text-decoration: none;
}

.card-footer-btn .btn-retrowave:hover {
  background: var(--color-accent);
  box-shadow: 0 0 20px var(--color-accent);
}

/* Botón centrado debajo del proyecto */
.btn-wrapper {
  text-align: center;
}

.btn-proyectos-seccion {
  background: var(--color-accent);
  border: none;
  color: var(--color-text);
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  box-shadow: 0 0 15px var(--color-accent);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-proyectos-seccion:hover {
  background: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary);
  color: var(--color-text);
  margin-right: 5px;
}

/* Readme final */
.seccion.readme {
  background: rgba(15, 15, 30, 0.85);
  border-radius: 12px;
  padding: 2rem;
  font-family: 'Roboto', sans-serif;
  color: var(--color-text);
  box-shadow: inset 0 0 10px var(--color-accent);
  line-height: 1.5;
}

.seccion.readme h3 {
  font-family: 'Orbitron', sans-serif;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.seccion.readme h4.titulo-secundario {
  font-family: 'Orbitron', sans-serif;
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--color-primary);
  padding-left: 0.5rem;
}

.seccion.readme p {
  margin-bottom: 1rem;
}

.mensaje-final {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-secondary);
  text-align: center;
  margin-top: 1rem;
}

/* Estilo para énfasis */
.seccion.readme .primary {
  color: var(--color-primary);
  font-weight: bold;
}

.seccion.readme .secondary {
  color: var(--color-secondary);
  font-weight: bold;
}

.seccion.readme .muted {
  color: var(--color-muted);
  font-style: italic;
}

/* Estilo para enlaces */
.seccion.readme a {
  text-decoration: none;
  color: var(--color-accent);
  font-weight: 500;
  transition: color 0.3s ease;
}

.seccion.readme a:hover {
  color: var(--color-primary);
}

/* Modal principal */
.modal-retrowave .modal-content {
  position: relative;
  background: linear-gradient(135deg, #1F0845, #6D12F5);
  border-radius: 1rem;
  padding: 1rem;
  color: var(--color-text);
  font-family: 'Orbitron', sans-serif;
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary);
  overflow: visible;
  z-index: 1;
}

/* Animación borde neón */
.modal-retrowave .modal-content::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 1rem;
  background: linear-gradient(270deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary));
  background-size: 600% 600%;
  animation: neon-border-move 5s linear infinite;
  z-index: -1;
  padding: 4px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* Animación de movimiento */
@keyframes neon-border-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Header del modal */
.modal-header {
  border-bottom: 2px solid var(--color-primary);
}

/* Título */
.modal-title {
  font-weight: 900;
  font-size: 1.8rem;
  text-shadow: 0 0 10px var(--color-primary);
}

/* Botón cerrar (la X) */
.modal-header .btn-close {
  background: none;
  border: none;
  opacity: 0.9;
  width: 1.5rem;
  height: 1.5rem;
  filter: drop-shadow(0 0 5px var(--color-muted));
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236082A6' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: 1.2rem;
  background-repeat: no-repeat;
  background-position: center;
}

.modal-header .btn-close:hover {
  opacity: 1;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F706CF' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* Estilo campos formulario */
input.form-retrowave,
textarea.form-retrowave {
  background-color: rgba(15, 15, 30, 0.6);
  color: var(--color-text);
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--color-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

input.form-retrowave:focus,
textarea.form-retrowave:focus {
  background-color: rgba(15, 15, 30, 0.8);
  color: var(--color-text);
  outline: none;
  box-shadow: 0 0 15px var(--color-primary);
}

.form-retrowave::placeholder {
  color: var(--color-muted);
}

/* Footer del modal */
.modal-footer {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-top: none;
}

/* Único botón */
.modal-footer .btn-retrowave {
  width: 160px;
  height: 46px;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.modal-footer .btn-retrowave:hover {
  background: var(--color-primary);
  color: var(--color-text);
  box-shadow: 0 0 12px var(--color-primary);
}

/*proyectos */

.tarjeta-retrowave .card {
  background: #1F0845 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 15px #F706CF, 0 0 30px #6D12F5 !important;
  color: #F0EDEE !important;
  transition: box-shadow 0.3s ease;
}

.tarjeta-retrowave .card:hover {
  box-shadow: 0 0 25px #2DE2E6, 0 0 50px #6D12F5 !important;
}

.tarjeta-retrowave .card-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  color: #F706CF !important;
  text-shadow: 0 0 8px #F706CF;
}

.tarjeta-retrowave .card-subtitle {
  font-family: 'Roboto', sans-serif;
  color: #6082A6 !important;
  font-style: italic;
}

.tarjeta-retrowave .list-group-item {
  background: transparent !important;
  border: none !important;
  color: #F0EDEE !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  cursor: pointer;
  padding-left: 1rem !important;
  border-radius: 8px !important;
  margin-bottom: 0.25rem;
  transition: color 0.3s ease;
}


.tarjeta-retrowave .collapse {
  background: rgba(109, 18, 245, 0.15);
  border-radius: 8px;
  margin: 0.25rem 0 1rem 0;
  padding: 0.75rem 1rem;
  font-family: 'Roboto', sans-serif;
  color: #F0EDEE;
  box-shadow: inset 0 0 10px #6D12F5;
  transition: background-color 0.1ms ease;
}

.tarjeta-retrowave .collapse p.small {
  margin-bottom: 0.5rem;
  color: #6082A6;
  font-size: 1rem;
}

.btn-completo:hover{
   background: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary);
  color: var(--color-text);
  margin-right: 5px;
}

button[aria-expanded="true"] { /* elemento collapse desplegado */
  background-color: var(--color-primary); 
  color: #fff;
  font-weight: bold;
}
button[aria-expanded="true"]:hover { /* elemento collapse desplegado */
font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  margin-top: 1rem;
}

.ficha-tecnica{
  list-style: circle;
  padding: 10px 15px;
  border-radius: 8px;
  margin-top: 10px;
}
/* personalizacion independiente */

.tarjeta-independientes .card {
  border-color: var(--color-primary) !important; 
}

.tarjeta-aula .card {
  border-color: var(--color-secondary) !important; 
}

.tarjeta-colaboracion .card {
  border-color: var(--color-accent) !important; 
}

.tarjeta-retrowave {
  min-width: 320px;
  flex: 1 1 100%;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .tarjeta-retrowave {
    flex: 1 1 33%;
    max-width: 100%;
  }
}

/* Más espacio interior en las tarjetas */
.tarjeta-retrowave .card-body {
  padding: 1rem;
}

/* Mejorar legibilidad de títulos */
.tarjeta-retrowave .card-title {
  font-size: 1.6rem;
  font-weight: 800;
  text-shadow: 0 0 5px var(--color-primary);
  text-align: center;
  font-family: 'Orbitron', sans-serif;
}

.tarjeta-retrowave .card-subtitle {
  font-size: 1.2rem;
}

.tarjeta-retrowave .list-group-item {
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8rem 1rem;
}

/* sobre mi */

.archivador-retro {
  border: 2px solid #0ff;
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255, 60, 151, 0.2), rgba(109, 18, 245, 0.2));
  box-shadow: 0 0 12px #0ff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* soporte Safari */
  font-family: 'Roboto', sans-serif;
  color: var(--color-text);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  z-index: 0;
}
.archivador-retro h3, h4{
  font-family: 'Orbitron', sans-serif;
}
.archivador-retro h5{
  font-family: 'Roboto', sans-serif;
  color: var(--color-muted);
}
.archivador-retro::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 12px;
  background: linear-gradient(270deg, #F706CF, #2DE2E6, #6D12F5, #F706CF);
  background-size: 600% 600%;
  animation: neon-border-move 30s linear infinite;
}

@media (max-width: 768px) {
  .nav-tabs-retro {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Responsive */
@media (max-width: 768px) {
  .nav-tabs-retro {
    border-right: none;
    border-bottom: 2px solid #0ff;
    flex-direction: row;
    overflow-x: auto;
  }

  .nav-tabs-retro .nav {
    flex-direction: row !important;
    gap: 0.5rem;
  }

  .nav-tabs-retro .nav-link {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .nav-tabs-retro .nav-link.active {
    border-bottom: 3px solid #0ff;
  }
}


/* responsive */

@media (max-width: 576px) {
   main.container.main-retrowave {
    padding-top: 1rem !important;
  }
  header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background-color: rgba(10, 10, 20, 0.9);
    backdrop-filter: blur(6px);
  }

  .navbar-retro {
    border: none;
    box-shadow: none;
    background-color: transparent;
  }

  .navbar-toggler {
    display: none;
  }

  #collapsibleNavbar {
    display: flex !important;
  }

  .navbar-nav {
    flex-direction: row;
    justify-content: center;
    font-size: 0.65rem;
  }

  .banner { font-size: 2.2rem; 
    text-align: center; 
}
  .nombre, .slogan1 { 
    font-size: 2.2rem; 
}
  .slogan { 
    font-size: 1rem; 
    width: 25ch; 
}
.main-proyectos {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

}