:root{
  --color-fondo-1: #1a0524;     /* Morado profundo (inicio degradado) */
  --color-fondo-2: #3a114c;     /* Morado medio */
  --color-fondo-3: #631543;     /* Magenta oscuro (fin degradado - seguro para texto blanco) */
  --color-principal: #541e69;
  /* --color-secundario: #14ff00; */
  --color-secundario: #b8e84c;

  --color-acento: #feb101;

  /* Textos */
  --color-texto-claro: #ffffff;
  --color-texto-oscuro: #110316; /* Para usar sobre bloques verdes o amarillos */

  --espaciado-pequeno: 15px;
  /* --categoria__elemento */
  --pading-textos: 15px;
  --radio-borde: 12px;
}


body{
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--color-fondo-1) 0%, var(--color-fondo-2) 50%, var(--color-fondo-3) 100%);
  background-attachment: fixed; /* El fondo no se mueve al hacer scroll, se ve más fluido */
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Tipografía limpia y moderna */
  margin: 0px;
  font-size: 16px;
  line-height: 1.6; /* Mejora la lectura de párrafos largos */
}

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

.header-principal{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  position: sticky;
  top: 0px;
  right: 0px;
  box-sizing: border-box;
  z-index: 1;
}

.header-principal__nav{
  display: flex;
  align-items: center;
  padding: 15px;
  /* Fondo semitransparente para ver a través de él */
  background-color: rgba(255, 255, 255, 0.3); 
  
  /* Efecto de desenfoque (ajusta los píxeles a tu gusto) */
  backdrop-filter: blur(15px); 
  
  /* Opcional: bordes redondeados y sombra para un mejor diseño */
  border-radius: var(--radio-borde);
  /*border: 1px solid rgba(255, 255, 255, 0.5);*/
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.nav-list{
  display: flex;
  justify-content: center;
  gap: var(--espaciado-pequeno);
  box-sizing: border-box;
}

.nav__item{
  color: white;
}

.nav__item a:visited {
  color: white;
}

main{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  margin-bottom: 30px;

}

.wrapper{
  max-width: 1000px;
  box-sizing: border-box;
}

.header-acerca{
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaciado-pequeno);
  align-items: center;
  width: 100%;
}

#inicio{
  height: calc(100vh - 70px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
    background-image: url('/imagenes/Ramiel_octahedron.png');
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
}

.header-acerca__titulo{
  /*(mínimo, ideal, máximo*/
  font-size: clamp(2rem, 2vw + 1rem, 5rem);
  color: var(--color-acento);
  margin: 0;
}

.header-acerca__parrafo{
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  background-color: var(--color-secundario);
  color: var(--color-texto-oscuro); /* ¡Ahora sí es legible! */
  border-radius: var(--radio-borde);
  padding: 4px 12px;

  letter-spacing: 0.5px;
}

.acerca__parrafo{
  box-sizing: border-box;
  font-size: clamp(1rem, 0.952vw + 0.785rem, 1.5rem);
  color: white;
}

.social{
  display: flex;
  justify-content: center;
  gap: 15px
}

.social__item{
  border-radius: var(--radio-borde);
}

.social__enlaces{
  padding: 5px;
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--color-acento);
}

.acerca__icono{
  height: 40px;               /* Aquí definimos el alto */
  width: 40px;
  stroke: var(--color-acento); /* Color inicial usando tu variable */
}

/* Título de la sección */
/* Clase global para tarjetas y elementos flotantes */
.efecto-cristal {
  background-color: rgba(26, 8, 36, 0.6); /* Púrpura ultra oscuro con 60% de opacidad */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Soporte para Safari */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil brillante */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border-radius: var(--radio-borde);
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transición suave para interactividad */
}

/* Efecto sutil al pasar el mouse por las tarjetas */
.efecto-cristal:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(184, 232, 76, 0.15); /* Brillo verde neón muy tenue */
}

/* EXPERIENCIA */
.timeline__contenedor{ /* separa la líena de la experiencia */
  display: flex;
}

.timeline__linea{
  width: 15px;
  flex-shrink: 0;
  position: relative;
}



.timeline__linea::before{ /* esto dibuja la linea*/
  content: '';
  position: absolute;
  top: 0;
  left: 4px; /* Ajuste milimétrico para centrar la línea con los puntos */
  width: 4px;
  height: 100%;
  background-color: var(--color-secundario); /* La línea es verde[cite: 1] */
  border-radius: 2px;
  
}

.timeline__punto{
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 7px; /* medidas por ajustar */
  left: -15px;
  background-color: var(--color-secundario);
}

.timeline__item{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}



.experiencia__tituloprincipal{
  color: white;
}

.experiencia__titulo{
  color: var(--color-acento);
}

.experiencia__empresa{
  color: white;
}

.experiencia__fecha{
  color: var(--color-secundario);
}

.experiencia__tarjeta{
  display: flex;
  flex-direction: column;
  flex-basis: 300px; /* por ajustar */
  flex-grow: 1;
  flex-shrink: 1;
}

.experiencia__descripcion{
  color: var(--color-texto-claro);
  flex-basis: 600px; /* por ajustar */
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
  padding: 15px;
  /* Fondo semitransparente para ver a través de él */
  background-color: rgba(255, 255, 255, 0.3); 
  
  /* Efecto de desenfoque (ajusta los píxeles a tu gusto) */
  backdrop-filter: blur(15px); 
  
  /* Opcional: bordes redondeados y sombra para un mejor diseño */
  border-radius: var(--radio-borde);
  /*border: 1px solid rgba(255, 255, 255, 0.5);*/
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
/* FIN EXPERIENCIA */

/* PROYECTOS */

#proyectos{
  width: 100%; /* no se porque no se aplicaba */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.proyectos__tituloprincipal{
  color: white;
}

.proyecto__item{
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.proyecto__img{
  flex-basis: 350px; /*ancho de la imagen */
  border: 1px solid black;
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%; /* La imagen ocupa todo el ancho del contenedor */
  height: auto;
  object-fit: cover; /* Ajusta la imagen rellenando el espacio sin deformarse */
}

.proyecto__titulo{
  color: var(--color-acento)
}

.proyecto__parrafo{
  color: var(--color-texto-claro);
}

.proyecto__tarjeta{
  flex-grow: 1;
  flex-basis: 600px;
}





.proyecto__tecnologias > ul{
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.proyecto__tecnologia{
  color: var(--color-texto-claro);
  padding: 5px;
    /* Fondo semitransparente para ver a través de él */
  background-color: rgba(255, 255, 255, 0.3); 
  
  /* Efecto de desenfoque (ajusta los píxeles a tu gusto) */
  backdrop-filter: blur(15px); 
  
  /* Opcional: bordes redondeados y sombra para un mejor diseño */
  border-radius: var(--radio-borde);
  /*border: 1px solid rgba(255, 255, 255, 0.5);*/
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  display: flex;
}

.proyecto__enlaces{
  gap: 15px;
  display: flex;
}

.proyecto__enlace{
  color: var(--color-texto-claro);
  display: flex;
    padding: 5px;
  /* Fondo semitransparente para ver a través de él */
  background-color: rgba(255, 255, 255, 0.3); 
  
  /* Efecto de desenfoque (ajusta los píxeles a tu gusto) */
  backdrop-filter: blur(15px); 
  
  /* Opcional: bordes redondeados y sombra para un mejor diseño */
  border-radius: var(--radio-borde);
  /*border: 1px solid rgba(255, 255, 255, 0.5);*/
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);;
}

.sobre-mi__titulo{
  color: var(--color-texto-claro);
}

.sobre-mi__parrafo{
  color: var(--color-texto-claro);
}

footer{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-texto-claro);
}