/* Solo estilos de la vista proyectos */

/* Título centrado */
.projects-title{
  font-family: 'Courier New', monospace;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 80px);
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 224, 255, 0.35);

  /* asegura estar por encima del overlay del hero */
  position: relative;
  z-index: 4;

  /* animación suave de entrada (opcional, no rompe nada) */
  opacity: 0;
  transform: scale(.98);
  animation: projIn .8s ease forwards;
  animation-delay: 1.2s;
}

@keyframes projIn{
  to{ opacity: 1; transform: scale(1); }
}

/* Si quieres un poco más de “código” en azul para símbolos, lo hacemos en el siguiente paso */

/* ===============================
   TECNOLOGÍAS – PROYECTOS
================================ */

.projects-tech{
  margin-top: 18px;
  text-align: center;
  position: relative;
  z-index: 4;
}

.tech-title{
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: .85;
  margin-bottom: 14px;
}

.tech-logos{
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.tech-logos img{
  width: 48px;
  height: auto;
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(0,224,255,.25));
}

/* ===== Botones Proyectos (Web / Landing) ===== */
.projects-actions{
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 4;
}

.projects-btn{
  font-family: 'Courier New', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;

  padding: 12px 18px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);

  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.projects-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,224,255,.45);
  box-shadow: 0 0 0 3px rgba(0,224,255,.12);
}

.projects-btn.active{
  border-color: rgba(0,224,255,.65);
  box-shadow: 0 0 0 3px rgba(0,224,255,.18);
}

/* Contenedor central de Proyectos */
.projects-center{
  display: flex;
  flex-direction: column;   /* 🔑 clave */
  align-items: center;
  gap: 18px;                /* espacio entre título y botones */
  position: relative;
  z-index: 4;
}

/* ===== Orden de aparición: botones después del menú ===== */

/* Los botones arrancan ocultos */
.projects-actions{
  opacity: 0;
  transform: translateY(10px);
  animation: actionsIn .6s ease forwards;
  animation-delay: 2.9s; /* después del menú (ajustable) */
}

/* Animación */
@keyframes actionsIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Firma STVE CODE (Proyectos) ===== */
.brand-signature{
  position: absolute;
  top: 24px;        /* más arriba que el menú */
  left: 60px;       /* alineado con el menú */

  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffffff;

  opacity: 0;       /* arranca invisible */
  z-index: 4;
}

/* Entrada final de la firma */
.brand-signature{
  animation: brandIn .6s ease forwards;
  animation-delay: 3.4s; /* después de botones */
}

@keyframes brandIn{
  from{
    opacity: 0;
    transform: translateY(-4px);
  }
  to{
    opacity: 0.9;
    transform: translateY(0);
  }
}
.brand-signature span{
  color: #00e0ff;
}


/* ===== MODAL (PASO 1) ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: none;
}

.modal.active{
  display: block;
}

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
}

.modal-card{
  position: relative;
  z-index: 1;
  width: min(900px, 92vw);
  margin: 10vh auto 0;
  padding: 22px 20px 26px;

  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}

.modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.modal-title{
  font-family: 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

.modal-text{
  font-family: 'Courier New', monospace;
  font-size: 14px;
  opacity: .85;
  margin: 0;
}

/* ===== Carrusel dentro del modal ===== */
.carousel{
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.car-btn{
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.car-frame{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
   height: clamp(260px, 60vh, 520px);
  min-height: unset;
  display: grid;
  place-items: center;
  touch-action: pan-y;
}

.car-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;

  opacity: 1;
  transition: opacity .18s ease; /* ✅ fade corto y pro */
}

.car-img.is-fading{
  opacity: 0; /* ✅ cuando cambiamos, baja opacidad */
}

.car-counter{
  position: absolute;
  right: 12px;
  bottom: 12px;

  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .6px;

  color: #ffffff;                 /* ✅ texto blanco */
  text-shadow: 0 0 10px rgba(0,0,0,.8);

  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(0,0,0,.65);    /* ✅ fondo más oscuro */
  border: 1px solid rgba(255,255,255,.20);
}

.car-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 12px;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  cursor: pointer;
}

.dot.active{
  background: rgba(0,224,255,.35);
  border-color: rgba(0,224,255,.65);
  box-shadow: 0 0 0 3px rgba(0,224,255,.12);
}

@media (max-width: 560px){
  .carousel{ grid-template-columns: 44px 1fr 44px; }
  .car-frame{ min-height: 260px; }
}

/* Botón/link "Ver sitio" */
.modal-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 10px;
  margin-bottom: 6px;

  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffffff;
  text-decoration: none;

  padding: 10px 14px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);

  cursor: pointer;
}

.modal-link:hover{
  border-color: rgba(0,224,255,.45);
  box-shadow: 0 0 0 3px rgba(0,224,255,.12);
}