/* ================================
   SECCIÓN PROYECTOS
================================ */
.contenedor {
    width:100%;
    max-width: 1320px;
    margin: 0 auto; /* centra y da espacio lateral */
}

#proyectos {
  padding: 60px 20px;
  background-color: #f9f9f9;
}

/* Filtros */
.filtros {
  text-align: center;
  margin-bottom: 20px;
}

.filtro-btn {
  border: 2px solid var(--rojo-premium);
  color: var(--rojo-premium);
  padding: 8px 16px;
  margin: 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filtro-btn:hover,
.filtro-btn.active {
    background: var(--rojo-oscuro);
    color: var(--blanco);
    transform: translateY(-2px);
}

/* Línea corporativa animada */
.filtro-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0%;
    height: 3px;
    background: var(--rojo-oscuro);
    transition: 0.3s ease;
    transform: translateX(-50%);
}

/* Card de proyecto */
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.proyecto-card {
  background: var(--blanco);
  border-radius: 12px;
  min-height: 500px; /* ajusta según tu diseño */
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.proyecto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.proyecto-card h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 16px;
    color: black;
}

.proyecto-card p {
    margin: 0 16px 16px;
    color: black; 
    text-align: justify;
}

/* Texto normal en tarjetas */
.proyecto-detalle,
.proyecto-descripcion,
.proyecto-card p {
    font-weight: 400;   /* peso normal 400*/
    color: var(--gris-oscuro);        /* gris elegante para diferenciar del negro fuerte */
}

/* Etiqueta */
.proyecto-etiqueta {
    background: var(--rojo-premium);
    color: var(--blanco);
    font-size: 15px;
    font-weight: 600; /* subtítulos destacados */
    padding: 10px 15px;
    text-align: center;
    letter-spacing: 0.5px;
    margin: 0;                          /* elimina separación */
    border-radius: 12px 12px 0 0;       /* esquinas superiores redondeadas */
}
/* Detalle */
.proyecto-detalle {
  background: #e9e9e9;
  padding: 10px 20px;
  margin-bottom: 12px; /* separación uniforme */
  border-radius: 8px;
  font-size: 17px;
  line-height: 1.6;
  border-left: 4px solid var(--rojo-premium);
}

/* Descripción */
.proyecto-descripcion {
  font-size: 17px; 
  line-height: 1.6;
  color: var(--gris-oscuro);               /* gris elegante */
  text-align: justify;
  padding: 5px 15px;
}

.proyecto-card img {
  width: 98%;              /* ocupa casi todo el ancho */
  height: 300px;           /* altura uniforme */
  object-fit: cover;       /* recorte elegante */
  border-radius: 12px;     /* esquinas redondeadas (elige 12px o 22px) */
  display: block;
  margin: 5px auto;        /* centrado */
  padding: 10px;           /* marco interno */
  background-color: #fff;  /* fondo blanco opcional */
}

/* Botón */
.btn-detalle {
  margin-top: auto;
  margin-bottom: 16px;     /* espacio uniforme abajo */
  align-self: center;     /* lo centra horizontalmente */
  padding: 10px 18px;
  background-color: var(--rojo-premium);
  color: var(--blanco);
  font-weight: 600; /* botones corporativos */
  border-radius: 6px;
  transition: all 0.3s ease;
}

.btn-detalle:hover {
  background-color: #b50c0c;
  transform: scale(1.05);
}

/* ================================
   MOSTRAR DESCRIPCION JAVA
================================ */
.modal {
  display: none;
  position: fixed; /* cubre toda la pantalla */
  z-index: 1100;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}

.modal-contenido {
  background: #fff;
  max-width: 600px; /* Tamaño de la descripcion al presional ver mas  */
  width: 90%;
  max-height: 85vh;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  overflow-y: auto;
  animation: aparecer 0.3s ease;
  position: relative; /* referencia para la X */
}

@keyframes aparecer {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.modal-cerrar {
    position: sticky;
    top: 0;              /* se queda pegada arriba del modal */
    float: right;        /* se alinea a la derecha */
    /*right: 15px;        margen lateral */
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 0, 0, 0.411); /* círculo semitransparente */
    border-radius: 20%;
    padding: 4px 15px;
    cursor: pointer;
    z-index: 10;       /* por encima del título */
}
.modal-cerrar:hover {
    background: rgba(0, 0, 0, 0.61); /* círculo semitransparente */
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.514);
}


/* Slider dentro del modal */
#modal-proyecto .slider {
  position: relative;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 16px;   /* bordes redondeados en todo el bloque */
}

/* Cada imagen dentro del slider */
#modal-proyecto .slider img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 16px;   /* asegura que las imágenes también respeten las esquinas */
}


/* Imagen dentro del modal (incluye slider) */
#modal-proyecto .proyecto-img img,
#modal-proyecto .slider img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    margin: 8px 0;        /* espacio arriba y abajo */
    display: block;
}

/* Texto descriptivo */
#modal-proyecto .proyecto-descripcion {
    font-weight: 400;   /* texto normal */
    font-size: 17px;
    line-height: 1.6;
    color: var(--gris-oscuro);
    margin: 10px 0;
    text-align: justify; /* justifica para que quede prolijo */
}

/* Solo el primer párrafo después de .proyecto-detalle con línea */
#modal-proyecto .proyecto-detalle + .proyecto-descripcion {
    border-top: 1.5px solid #ccc; /* tamaño tipo y color de linea encima de proyectos*/
    border-bottom: 1.5px solid #ccc; /* tamaño tipo y color de linea debajo de proyectos*/
    padding-top: 15px;
    margin-top: 15px;
}

/* Detalle del proyecto */
#modal-proyecto .proyecto-detalle {
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    background: #f5f5f5;
    padding: 10px 15px;
    border-left: 4px solid var(--rojo-premium);
    border-radius: 6px;
    margin-bottom: 8px; /* más preciso */
    text-align: justify;
}

/* Listas dentro del modal */
#modal-proyecto ul {
    margin: 10px 20px;
    padding-left: 20px;
    list-style-type: disc; /* viñetas estándar */
    margin-bottom: 6px;
    color: var(--gris-oscuro);
    text-align: justify;   /* asegura que cada línea quede alineada */

}

#modal-proyecto li {
    margin-bottom: 6px;
    font-weight: 400;
    color: var(--gris-oscuro); 
    font-size: 17px;
    line-height: 1.6;
}

/* Párrafos que siguen a listas */
#modal-proyecto ul + p {
    margin-top: 12px;      /* espacio consistente después de la lista */
    text-align: justify;   /* mantiene la misma alineación */
}

#modal-proyecto .slider .prev,
#modal-proyecto .slider .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 43px;
  width: 50px;
  height: 50px;
  display: flex;            /* activa flexbox */
  align-items:center;      /* centra verticalmente */
  justify-content: center;  /* centra horizontalmente */
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  padding: 0 0 5px 0.5px;
  z-index: 20;
  transition: all 0.3s ease;
}

#modal-proyecto .slider .prev { left: 10px; }
#modal-proyecto .slider .next { right: 10px; }

#modal-proyecto .slider .prev:hover,
#modal-proyecto .slider .next:hover {
  background: rgba(137, 5, 5, 0.8);
  box-shadow: 0 0 12px rgba(137, 5, 5, 0.6);
  transform: translateY(-50%) scale(1.1);
  font-size: 45px;
}

/* ================================
   SLIDER
================================ */
.slider {
  position: relative;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
}
.slide {
  display: none;
  width: 100%;
}
.slide.active {
  display: block;
}
/* ================================
   RESPONSIVE AJUSTES
================================ */

/* Tablets medianas (pantallas menores a 1024px) */
@media (max-width: 1024px) {
  #proyectos {
    padding: 40px 20px;   /* más espacio lateral */
  }
  .proyecto-card h3 {
    font-size: 1rem;
  }
  .modal-contenido {
    width: 90%;
    padding: 18px;
  }
}

/* Móviles grandes (pantallas menores a 768px) */
@media (max-width: 768px) {
  .proyectos-grid {
    grid-template-columns: 1fr; /* una sola columna */
    gap: 15px;
    padding: 40px 18px;   /* espacio lateral */
  }
  .proyecto-card {
    margin: 0 auto;
    width: 95%;           /* margen a los lados */
  }
  .proyecto-card img {
    height: 220px;
  }
  .modal-contenido {
    width: 95%;
    padding: 15px;        /* aire interno */
    font-size: 14.5px;
  }
}

/* Móviles pequeños (pantallas menores a 480px) */
@media (max-width: 480px) {
  #proyectos {
    padding: 30px 15px;   /* espacio lateral más amplio */
  }
  .proyecto-card {
    width: 96%;
    margin: 0 auto;
  }
  .proyecto-card img {
    height: 180px;
  }
  .modal-contenido {
    width: 96%;
    padding: 12px;        /* espacio interno compacto */
    font-size: 14px;      /* tipografía más legible */
  }
  #modal-proyecto .proyecto-descripcion,
  #modal-proyecto .proyecto-detalle {
    padding-left: 10px;
    padding-right: 10px;  /* aire lateral dentro del modal */
  }
}