@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&display=swap');

/*-----------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------NAVBAR------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

/* Aplicar Roboto a los enlaces de la Navbar */
.navbar-custom .nav-link {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500; /* Podés ajustar el grosor: 400 (normal), 500 (medium), 700 (bold) */
  font-size: 1rem;
  color: #000000 !important; 
}

/* Color al pasar el mouse */
.navbar-custom .nav-link:hover {
  color: rgb(25, 120, 135) !important;
}

/* Color base del SVG */
.navbar-brand svg path {
  fill: #000000;
  transition: fill 0.2s ease-in-out;
}

/* Color al pasar el mouse */
.navbar-brand:hover svg path {
  fill: rgb(25, 120, 135); /* Poné acá el color exacto que desees */
}


/* Espaciado entre opciones en la pantalla de PC / Desktop */
@media (min-width: 992px) {
  .navbar-custom .nav-item {
    margin-left: 0.8rem;  /* Separación horizontal entre botones */
    margin-right: 0.8rem;
  }
}

/* Color base de la Navbar */
.navbar-custom {
  background-color: rgba(101, 198, 212, 0.95);
  min-height: 3.40rem;
}

/* En mobile, el menú aparece flotando */
@media (max-width: 991.98px) {
  .navbar-custom .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(101, 198, 212, 0.98);
    padding: 1.5rem 1rem;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);
  }
}

/* Forzar color negro en las 3 rayitas de la hamburguesa */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.flag-round {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 0.25rem;
  pointer-events: none;
  /* Forzamos a que actúe como un contenedor Flexbox centrado */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Para que no se aplaste si el botón se achica */
}

/* Regla clave: obliga al SVG interno a escalar y centrarse */
.flag-round svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}


/*-----------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------FOOTER------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

/* Color de fondo del Footer */
.footer-custom {
  background-color: rgba(101, 198, 212, 0.98);
}

/* Iconos de redes sociales */
.social-links a {
  color: rgb(34, 153, 170); 
  font-size: 1.5rem;         /* Tamaño de los íconos */
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

/* Efecto hover suave al pasar el mouse por encima */
.social-links a:hover {
  color: rgb(25, 120, 135); /* Tono un poquitito más oscuro al hacer hover */
  transform: translateY(-2px);
}

/* Texto del copyright */
.copyright-text {
  font-family: 'Roboto', sans-serif;
  font-size: 1.1rem;
  color: #ffffff; 
}

/*-----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------CONTACT------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

/* Fondo de la sección CONTACTO */
.bkg-trees {
  background-image: url("/static/core/img/trees.jpg");
}

/* Iconos de redes sociales */
.contact-links a {
  color: #000000; 
  font-size: 5.5rem;         /* Tamaño de los íconos */
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

/* Efecto hover suave al pasar el mouse por encima */
.contact-links a:hover {
  color: rgb(34, 153, 170);
  opacity: 0.75 ;
  transform: translateY(-2px);
}

.contact-title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 700; /* Podés ajustar el grosor: 400 (normal), 500 (medium), 700 (bold) */
  font-size: 4.5rem;
  color: #000000;
}

/*-----------------------------------------------------------------------------------------------------*/
/*------------------------------------------------HOME-------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

/* Fondo de la sección HOME */
.bkg-paint {
    background-image: url("/static/core/img/paint.jpg");
}

.home-title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 700; /* Podés ajustar el grosor: 400 (normal), 500 (medium), 700 (bold) */
  font-size: 4.5rem;
  color: #000000;
}

.home-subtitle {
  font-family: 'Jost', sans-serif !important;
  font-weight: 400; /* Podés ajustar el grosor: 400 (normal), 500 (medium), 700 (bold) */
  font-size: 2.rem;
  color: #000000;
}

/*-----------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------ABOUT-------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

/* Fondo de la sección ABOUT */
.bkg-watercolor {
    background-image: url("/static/core/img/watercolor.jpg");
}

.about-text {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 375; /* Podés ajustar el grosor: 400 (normal), 500 (medium), 700 (bold) */
  font-size: 1.2rem;
  color: #000000;
}

/*-----------------------------------------------------------------------------------------------------*/
/*------------------------------------------------TECH-------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

.bkg-wood {
    background-image: url("/static/core/img/wood.jpg");
}

.tech-overlay {
  background-color: #65C6D4;
  opacity: 0.5;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.tech-title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 700; /* Podés ajustar el grosor: 400 (normal), 500 (medium), 700 (bold) */
  font-size: 4.5rem;
  color: #000000;
}

/*-----------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------CV--------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

.bkg-water {
    background-image: url("/static/core/img/water.jpg");
}

/*-----------------------------------------------------------------------------------------------------*/
/*-------------------------------------------(CV)--TIMELINE--------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

.timeline-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* Contenedor principal */
.timeline {
  position: relative;
  padding: 20px 0;
}

/* 1. BORRAMOS el pseudo-elemento global (.timeline::before ya no dibuja la línea) */

/* 2. Cada ítem maneja su propia línea conectora hacia el siguiente */
.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: -2.5rem;
  left: 40px;
  width: 3px;
  background-color: #31b0b5;
  transform: translateX(-50%);
  z-index: 1;
}

/* SI ES EL ÚLTIMO (detectado dinámicamente por Django) -> CHAU LÍNEA */
.timeline-item.is-last {
  margin-bottom: 0;
}

.timeline-item.is-last::before {
  display: none !important;
}

/* --- BADGES / ÍCONOS (Centrados en el mismo eje) --- */

.timeline-badge {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid #31b0b5;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Cuadrado para el CLIENTE (perfectamente alineado en la línea) */
.timeline-subitem .timeline-badge {
  width: 60px;
  height: 60px;
  margin-left: 10px; /* Ajusta según el tamaño del badge principal */
  border-radius: 4px; /* Cuadrado con bordes suavizados */
  border: 2px solid #31b0b5;

}


.timeline-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- TEXTOS Y CONTENIDO --- */

.timeline-content {
  padding-left: 1.5rem;
  flex-grow: 1;
}

.timeline-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.25rem;
}

.timeline-subtitle {
  font-size: 1.15rem;
  color: #212529;
  margin-bottom: 0.25rem;
}

.timeline-date {
  font-size: 1rem;
  font-style: italic;
  color: #555;
  margin-bottom: 0.75rem;
}

.timeline-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}

/* Mobile Friendly */
@media (max-width: 576px) {
  .timeline-item::before {
    top: 25px;
    left: 25px;
  }
  
  .timeline-badge {
    width: 50px;
    height: 50px;
  }

  .timeline-content {
    padding-left: 1rem;
  }

  .timeline-title {
    font-size: 1.1rem;
  }
}

/*-----------------------------------------------------------------------------------------------------*/
/*---------------------------------------------Proyectos-----------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

.bkg-ice {
    background-image: url("/static/core/img/ice.jpg");
}


/*-----------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------Cursos------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

.bkg-rock {
    background-image: url("/static/core/img/rock.jpg");
}

/*-----------------------------------------------------------------------------------------------------*/
/*---------------------------------------------Noticias------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

.bkg-city {
    background-image: url("/static/core/img/city.jpg");
}

.news-list {
padding: 20px;
min-height: 50vh;
}

.news-item { 
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.dot { 
  width: 15px; height: 15px; 
  background: #65C6D4; border-radius: 50%; 
  margin-right: 15px; 
}

.content {
  font-family: sans-serif; 
}


/*-----------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------Chart-------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------*/

.bkg-fire {
    background-image: url("/static/core/img/fire.jpg");
}

.chart-title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 700; /* Podés ajustar el grosor: 400 (normal), 500 (medium), 700 (bold) */
  font-size: 4rem;
  color: #000000;
}

.chart-links a {
  color: #000000; 
  text-decoration: none;
  font-weight: 700;
  font-size: 4rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

/* Efecto hover suave al pasar el mouse por encima */
.chart-links a:hover {
  color: rgb(34, 153, 170);
  opacity: 0.75 ;
  transform: translateY(-2px);
}

.chart-overlay {
  background-color: #65C6D4;
  opacity: 0.3;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}