/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* BASE GLOBAL PARA TODO EL DOCUMENTO */

body {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* tipografía general para toda la web */
  font-size: 16px;
  /* tamaño base del texto */
  line-height: 1.6;
  /* altura de línea para legibilidad */
  color: #eaeaea;
  /* color de texto principal en blanco */
  background-color: #1f1f1f;
  /* fondo oscuro uniforme */

}

h1 {
  font-size: 2.5em;
  /* títulos principales grandes */
  margin-bottom: 0.5em;
  /* espacio debajo del título */
}

h2 {
  font-size: 2em;
  /* subtítulos */
  margin-bottom: 0.5em;
  /* espacio debajo */
}

h3 {
  font-size: 1.5em;
  /* subtítulo de tercer nivel */
  margin-bottom: 0.5em;
  /* espacio debajo */
  color: #ca884a;
}

p {
  font-size: 1em;
  /* tamaño estándar de párrafo */
  max-width: 800px;
  /* limita el ancho para que no sea demasiado largo */
  margin: 0 auto 1em auto;
  /* centra el párrafo horizontalmente y añade margen inferior */
}

a {
  text-decoration: none;
  /* quita subrayado de los enlaces */
  color: #ca884a;
  transition: color 0.3s;
}

a:hover {
  color: #b86f2c;
}

/* BOTONES GLOBALES */
.btn-outline {
  display: inline-block;
  border: 2px solid #ca884a;
  padding: 10px 20px;
  border-radius: 5px;
  color: #ca884a;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background-color: #ca884a;
  color: #1f1f1f;
}

/* MENU DE NAVEGACIÓN */
#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(26, 26, 27, 0.95); /* Ligeramente transparente */
  backdrop-filter: blur(8px); /* Efecto cristal moderno */
  color: #fff;
  padding: 1em 5%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#menu ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6.5em;
  margin: 0;
  padding: 0;
}

/* Indicador de sección activa en el Menú */
#menu ul li a {
  position: relative;
}

#menu ul li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #ca884a;
  transition: width 0.3s ease;
}

#menu ul li a:hover::after,
#menu ul li a.active::after {
  width: 100%;
}

/* MAIN */
main {
  margin-top: 80px;
  /* para no tapar el contenido con el header */
  max-width: 1200px;
  /* límite de ancho para mejorar legibilidad. 1200 es un tamaño estandar */
  margin-left: auto;
  margin-right: auto;
  padding: 0 1em;
  /* algo de espacio lateral en pantallas pequeñas */
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  /* altura mínima del viewport */
}

/* HERO SECTION */
.hero-section {
  background-color: #1a1a1b;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 5em 3em;
  max-width: 1000px;
  margin: 2em auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 3em;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3em;
  flex-wrap: wrap;
}

.hero-text {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.hero-text h1 {
  font-size: 3.8em;
  letter-spacing: 0.05em;
  color: #ca884a;
  margin-bottom: 0.2em;
}

.hero-text h2 {
  font-size: 1.5em;
  color: #ddd;
  line-height: 1.4;
  margin-bottom: 0.5em; /* Reducido para dar paso a la línea separadora */
}

.hero-text h2 .hero-desc {
  font-weight: 400;
  font-size: 0.85em;
  color: #bbb; /* De #bbb a #eee para mejor legibilidad (Accesibilidad WCAG) */
  display: block;
  margin-top: 0.5rem;
}

.text-accent {
  color: #ca884a;
  font-weight: 500;
}

.hero-divider {
  width: 60px;
  height: 2px;
  background-color: #ca884a;
  margin: 1.5em 0;
  opacity: 0.8;
  border-radius: 2px;
}

/* ACCIONES HERO (Botón CV + Redes Sociales) */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin-top: 1.5em;
}

.hero-actions-divider {
  width: 1px;
  height: 35px;
  height: 45px; /* Aumentamos un poco la línea para que encaje con el nuevo tamaño */
  background-color: rgba(255, 255, 255, 0.2);
}

.hero-social-icons {
  display: flex;
  align-items: center; /* Alinea los iconos verticalmente de forma perfecta */
  gap: 1em;
  gap: 0.8em; /* Reducimos ligeramente el gap porque los iconos ahora son más grandes */
}

.hero-social-icons a {
  transition: all 0.3s ease;
  display: flex; /* Evita el "espacio en blanco" fantasma debajo de los iconos */
}

/* Colores corporativos y Ajuste Óptico de Tamaños */
.hero-social-icons a[aria-label="GitHub"] {
  color: #ca884a; /* Blanco para destacar en tu fondo oscuro */
  font-size: 1.5em; /* Forma redonda: Ligeramente más pequeño */
}

.hero-social-icons a[aria-label="LinkedIn"] {
  color: #ca884a; /* Azul oficial de LinkedIn */
  font-size: 1.5em; /* Forma cuadrada: Tamaño intermedio/base */
}

.hero-social-icons a[aria-label="Email"] {
  color: #ca884a; /* Rojo corporativo (estilo Google/Gmail) */
  font-size: 1.5em; /* Forma rectangular: Más grande para igualar la altura de los demás */
}

.hero-social-icons a:hover {
  transform: scale(1.3); /* Ligero efecto de acercamiento */
  filter: brightness(1.2); /* Da un brillo extra al color original al pasar el ratón */
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* AVATAR DE PERFIL */
.profile-avatar {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #ca884a;
  box-shadow: 0 4px 15px rgba(202, 136, 74, 0.4);
}

.hero-bottom {
  width: 100%;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora sutil */
  padding-top: 2em;
}

.tecnologias {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* permite que los iconos bajen a la siguiente línea si no caben */
  gap: 1.5em;
  /* espacio un poco mayor entre iconos para respirar mejor */
  font-size: 4em;
  color: #ca884a;
}

.tecnologias i:hover {
  transform: scale(1.5);
  transition: 0.3s;
}

.tecnologias i {
  color: #eaeaea;
  transition: 0.3s;
}

.tecnologias i:hover[data-tooltip="Java"] {
  color: #007396;
}

.tecnologias i:hover[data-tooltip="HTML5"] {
  color: #e34c26;
}

.tecnologias i:hover[data-tooltip="CSS3"] {
  color: #264de4;
}

.tecnologias i:hover[data-tooltip="JavaScript"] {
  color: #f0db4f;
}

.tecnologias i:hover[data-tooltip="SQL / MySQL"] {
  color: #00758f;
}

.tecnologias i:hover[data-tooltip="GitHub"] {
  color: #6e5494;
}

.tecnologias i:hover[data-tooltip="PHP"] {
  color: #777bb3;
}

.tecnologias i:hover[data-tooltip="Bootstrap"] {
  color: #7952b3;
}

.tecnologias i:hover[data-tooltip="Snowflake"] {
  color: #29b5e8;
}

.tecnologias i:hover[data-tooltip="dbt"] {
  color: #ff694b;
}


.tecnologias i::after {
  content: attr(data-tooltip);
  /* coge el texto del data-tooltip */
  position: absolute;
  /* posición absoluta respecto al icono */
  bottom: -2em;
  /* aparece debajo del icono */
  left: 50%;
  /* centrado horizontalmente */
  transform: translateX(-50%);
  /* corrige centrado horizontal exacto */
  background-color: #ca884a;
  /* fondo oscuro del tooltip */
  color: #1f1f1f;
  font-size: 0.2em;
  /* tamaño pequeñito del tooltip */
  padding: 0.2em 0.5em;
  /* espacio interno del tooltip */
  border-radius: 0.3em;
  white-space: nowrap;
  /* que no se parta en varias líneas */
  opacity: 0;
  /* oculto al inicio */
  pointer-events: none;
  /* no bloquea clicks ni hovers */
  transition: opacity 0.5s;
  /* aparición suave */
}

.tecnologias i:hover::after {
  opacity: 1;
  /* muestra el tooltip al pasar el ratón */
}

/* SECCION SOBREMI */
#sobremi {
  padding: 8em 1em;
  /* espacio arriba/abajo y en laterales */
}

#sobremi h3,
#contacto h3 {
  text-align: center;
}

/* SECCIÓN PROYECTOS */

#proyectos {
  background-color: #1a1a1b;
  padding: 5em 2em;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 900px;
  margin: 2em auto;
}

#proyectos .features {
  display: flex;
  /* activa flexbox para los artículos de proyecto */
  flex-wrap: wrap;
  /* permite que pasen a otra línea si no caben */
  gap: 5em;
  /* separación entre los proyectos */
  margin-top: 2em;
  /* espacio arriba respecto al texto introductorio */
  justify-content: center;
  /* centra horizontalmente */
}

#proyectos article {
  background-color: #2c2c2c;
  /* fondo gris oscuro para cada tarjeta */
  border-radius: 15px;
  /* esquinas redondeadas */
  overflow: hidden;
  /* oculta bordes de imágenes si se salen */
  width: 300px;
  /* ancho fijo de cada tarjeta de proyecto */
  text-align: center;
  /* texto dentro alineado a la izquierda */
  margin-bottom: 2em;
  /* añade espacio vertical entre tarjetas */
}

#proyectos article h4 {
  margin: 0.5em;
  /* margen alrededor del título */
  color: #ca884a;
  /* naranja corporativo */
}

#proyectos article p {
  margin: 0.5em;
  /* margen alrededor del párrafo */
  font-size: 0.9em;
  /* tamaño de texto más discreto */
  line-height: 1.4;
  /* separación entre líneas cómoda */
}

#proyectos article a {
  display: inline-block;
  /* estilo de botón simple */
  margin: 0.5em;
  /* margen alrededor del enlace */
  color: #ca884a;
  /* naranja corporativo */
  text-decoration: underline;
  /* subrayado para parecer un enlace */
  transition: color 0.3s;
  /* transición suave al pasar el ratón */
}

#proyectos article a:hover {
  color: #b86f2c;
  /* un tono más oscuro al pasar el ratón */
}

.features article {
  transition: box-shadow 0.3s ease, transform 0.6s ease;
  /* transición suave */
}

.features article:hover {
  transform: scale(1.03);
  /* zoom del 5% */
  box-shadow: 0 0 5px rgba(202, 136, 74, 1.6);
}

/*CONTACTO*/
#contacto {
  /* texto blanco */
  padding: 4em 1em;
  /* espacio superior e inferior + algo de margen lateral */
  border-radius: 33px;
  /* bordes redondeados elegantes */
}

#contacto p {
  text-align: center;
  /* centrado horizontalmente */
  max-width: 800px;
  /* limita la longitud para legibilidad */
  margin: 0 auto 2em auto;
  /* centrado + margen inferior */
}

#contacto form {
  max-width: 600px;
  /* no hacerlo tan ancho para estética */
  margin: 0 auto;
  /* centrado horizontalmente */
}

#contacto input,
#contacto textarea {
  width: 100%;
  /* que ocupe todo el ancho disponible */
  padding: 0.8em;
  /* espacio interior cómodo */
  border: 0;
  /* sin bordes del navegador por defecto */
  border-radius: 5px;
  /* bordes redondeados */
  margin-bottom: 1em;
  /* separación entre campos */
  background-color: #2c2c2c;
  /* fondo gris oscuro coherente */
  color: #eaeaea;
  /* texto blanco */
  font-family: inherit;
  /* hereda la fuente del body */
  border: 1px solid #444;
  /* borde fino gris oscuro */


}

#contacto input:focus,
#contacto textarea:focus {
  outline: none;
  /* quita el contorno azul del navegador */
  border: 2px solid #ca884a;
  /* borde naranja al enfocar */
}

#contacto .actions {
  list-style: none;
  /* quita los puntos de la lista */
  padding: 0;
  margin: 0;
}

#contacto .actions input[type="submit"],
#contacto .actions input[type="reset"] {
  background-color: #ca884a;
  /* color corporativo de fondo */
  color: #1f1f1f;
  /* texto oscuro para contraste */
  border: none;
  /* sin borde */
  padding: 0.8em 1.5em;
  /* tamaño del botón cómodo */
  border-radius: 5px;
  /* esquinas redondeadas */
  cursor: pointer;
  /* cambia cursor a mano */
  transition: background-color 0.3s;
  /* transición suave al pasar ratón */
}

#contacto .actions input[type="submit"]:hover,
#contacto .actions input[type="reset"]:hover {
  background-color: #b86f2c;
  /* tono más oscuro en hover */
}

/*FOOTER*/
#footer {
  background-color: #1a1a1b;
  /* mismo fondo que el header */
  color: #eaeaea;
  /* texto blanco */
  text-align: center;
  /* centrado */
  padding: 2em 1em;
  /* espacio interior cómodo */
  margin-top: 4em;
  /* separación del contenido anterior */
}

#footer .icons {
  list-style: none;
  /* quita puntos de la lista */
  padding: 0;
  margin: 0;
  display: flex;
  /* organiza en fila */
  justify-content: center;
  /* centrado horizontal */
  gap: 2em;
  /* separación entre iconos */
}

#footer .icons li a {
  color: #eaeaea;
  /* blanco inicialmente */
  font-size: 1.5em;
  /* tamaño de icono */
  transition: color 0.3s;
}

#footer .icons li a:hover {
  color: #ca884a;
  /* naranja al pasar ratón */
}

/* ============= MEDIA QUERIES ============= */

/* Tablet horizontal */
@media screen and (max-width: 1024px) {
  #menu ul {
    gap: 3em;
  }
}

@media screen and (max-width: 768px) {
  /* Header & Nav */
  #menu {
    padding: 0.5em;
  }

  #menu ul {
    gap: 1em;
  }
  #menu ul li a {
    font-size: 0.9em;
  }

  /* Hero y Tecnologías */
  .hero-section {
    padding: 4em 2em;
  }

  .hero-top {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-text {
    text-align: center;
  }

  .hero-actions {
    justify-content: center; /* Centramos las acciones en el móvil */
  }

  .hero-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-text h1 {
    font-size: 3em;
  }

  .tecnologias {
    justify-content: center;
    font-size: 2.5em;
    gap: 0.5em;
  }

  .profile-avatar {
    width: 200px;
    height: 200px;
  }

  /* Sobre Mí */
  #sobremi {
    padding: 4em 1em;
  }

  #sobremi h3 {
    font-size: 1.3em;
  }

  #sobremi p {
    font-size: 0.95em;
  }

  /* Proyectos */
  #proyectos {
    padding: 2em 1em;
  }

  #proyectos .features {
    gap: 2em;
  }

  #proyectos article {
    width: 90%;
  }

  /* Contacto */
  #contacto {
    padding: 2em 1em;
  }

  #contacto input,
  #contacto textarea {
    font-size: 0.95em;
  }

  #contacto .actions {
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
}

@media screen and (max-width: 480px) {
  /* Header & Nav */
  #menu {
    padding: 0.3em;
  }
  #menu ul {
    gap: 0.5em;
    flex-wrap: wrap;
  }
  #menu ul li a {
    font-size: 0.8em;
  }

  /* Hero y Tecnologías */
  .hero-section {
    padding: 2em 1em;
  }

  .hero-text h1 {
    font-size: 2.5em;
  }
  .tecnologias {
    font-size: 2em;
  }
  .profile-avatar {
    width: 150px;
    height: 150px;
  }

  /* Sobre Mí */
  #sobremi {
    padding: 2em 1em;
  }
  #sobremi h3 {
    font-size: 1.1em;
  }
  #sobremi p {
    font-size: 0.9em;
  }

  /* Proyectos */
  #proyectos {
    padding: 1.5em 0.5em;
  }
  #proyectos .features {
    gap: 1em;
  }
  #proyectos article {
    width: 100%;
  }

  /* Contacto */
  #contacto {
    padding: 1.5em 0.5em;
  }

  #contacto input,
  #contacto textarea {
    font-size: 0.9em;
  }

  #contacto .actions input {
    width: 100%;
  }

  /* Footer */
  #footer .icons {
    gap: 1em;
  }

  #footer .icons li a {
    font-size: 1.2em;
  }
}

/* ============ MEJORAS VISUALES PROYECTOS ============ */

/* 1. El contenedor del enlace de la imagen */
/* Necesitamos que sea 'relative' para poder poner cosas 'absolute' dentro */
.project-image-container {
  display: block;
  position: relative;
  overflow: hidden;
  /* Para que el zoom no se salga de la caja */
  border-bottom: 3px solid #ca884a;
  /* Borde naranja inferior */
}

/* 2. La imagen en sí (CONSISTENCIA DE TAMAÑO) */
.project-thumb {
  width: 100%;
  height: 220px;
  /* ALTURA FIJA para todas las fotos */
  object-fit: cover;
  /* Recorta la imagen para llenar el hueco sin estirarla */
  display: block;
  transition: transform 0.5s ease;
  /* Suavizado para el zoom */
}

/* 3. La capa de texto superpuesto (Overlay) */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Centrado perfecto del texto */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Espacio entre icono y texto */
  /* Estilo visual */
  background-color: rgba(31, 31, 31, 0.85);
  /* Fondo oscuro semitransparente */
  color: #ca884a;
  /* Texto naranja */
  font-weight: bold;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Estado inicial: oculto */
  opacity: 0;
  transition: all 0.3s ease;
}

/* ============ EFECTOS HOVER (Al pasar el ratón) ============ */

/* Cuando pasas el ratón por el contenedor, muestra el overlay */
.project-image-container:hover .image-overlay {
  opacity: 1;
}

/* OPCIONAL: Pequeño zoom en la foto de fondo */
.project-image-container:hover .project-thumb {
  transform: scale(1.05);
}

/* Contenedor del texto */
.project-content {
  padding: 1.5em;
}

/* Descripción del proyecto */
.project-desc {
  text-align: justify;
  font-size: 0.9em;
  color: #ddd;
  margin-bottom: 1em;
  line-height: 1.5;

}

/* Contenedor de etiquetas (Badges) */
.project-tags-container {
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  /* Si hay muchas, bajan de línea */
  gap: 0.5em;
  /* Espacio entre etiquetas */
  justify-content: center;
  /* centrado horizontal */

}

/* La etiqueta individual (Badge) con icono */
.tech-tag {
  display: inline-flex;
  /* Usamos flex para alinear icono y texto */
  align-items: center;
  /* Centrado vertical perfecto */
  gap: 6px;
  /* Espacio entre el icono y el texto */
  background-color: rgba(202, 136, 74, 0.1);
  /* Fondo naranja muy clarito y transparente */
  color: #ca884a;
  /* Texto e icono en naranja corporativo */
  border: 1px solid #ca884a;
  /* Borde naranja */
  padding: 4px 10px;
  /* Un poco más de relleno */
  border-radius: 20px;
  /* Bordes más redondeados (tipo píldora) queda más moderno */
  font-size: 0.8em;
  /* Tamaño de letra */
  font-weight: bold;
  font-family: 'Roboto Mono', monospace;
  /* Toque tech si tienes la fuente */
  transition: all 0.3s ease;
}

/* Efecto opcional al pasar el ratón */
.tech-tag:hover {
  background-color: #ca884a;
  color: #1f1f1f;
  /* Texto oscuro sobre fondo naranja */
}

/* Barra inferior de botones */
.project-actions {
  margin-top: auto;
  border-top: 1px solid #444;
  /* Línea separadora sutil */
  padding-top: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Enlace normal (Código GitHub) */
.link-code {
  font-size: 1em;
  color: #eaeaea;
  align-items: center;
  gap: 5px;
  transition: color 0.3s;

}

.link-code:hover {
  color: #e47712;
}

/* Botón destacado (Demo) */
.btn-demo {
  background-color: #1f1f1f;
  color: #1f1f1f;
  /* Texto oscuro para contraste */
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s;
}

.btn-demo:hover {
  font-weight: bold;
  color: #eaeaea;
  text-decoration: none;
}

/* Estilo base de la etiqueta */
.lang-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  /* Bordes redondeados */
  font-size: 0.8em;
  font-weight: bold;
  font-family: 'Roboto Mono', monospace;
  margin-right: 5px;
  border: 1px solid transparent;
  /* Para que el borde no baile */
}

/* COLORES OFICIALES GITHUB */

/* PHP (Azul Oscuro) */
.tag-php {
  background-color: rgba(79, 93, 149, 0.2);
  /* Fondo transparente */
  color: #8c9eff;
  /* Texto azul claro brillante */
  border-color: #4F5D95;
}

/* CSS (Morado) */
.tag-css {
  background-color: rgba(86, 61, 124, 0.2);
  color: #c792ea;
  /* Texto morado claro */
  border-color: #563D7C;
}

/* JavaScript (Amarillo) */
.tag-js {
  background-color: rgba(241, 224, 90, 0.2);
  color: #f1e05a;
  /* Amarillo intenso */
  border-color: #f1e05a;
}

/* --- COLORES PARA WORDLE JAVA --- */

/* JAVA (Rojo Anaranjado - Color oficial) */
.tag-java {
  background-color: rgba(224, 93, 68, 0.2);
  color: #e05d44;
  border-color: #e05d44;
}

/* CLI / CONSOLA (Verde Terminal - Estilo Matrix) */
.tag-cli {
  background-color: rgba(76, 175, 80, 0.2);
  /* Verde suave de fondo */
  color: #4caf50;
  /* Verde terminal brillante */
  border-color: #4caf50;
}

/* ALGORITMIA (Turquesa / Cyan - Lógica y Cálculo) */
.tag-algo {
  background-color: rgba(0, 188, 212, 0.2);
  /* Azul hielo fondo */
  color: #26c6da;
  /* Turquesa brillante */
  border-color: #26c6da;
}

/* --- GRUPOS DE TECNOLOGÍAS (UX: Categorización) --- */
.tech-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3em;
    margin-top: 1.5em;
    flex-wrap: wrap;
}

.tech-divider {
    width: 1px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- MEJORA DEL AVATAR --- */
.profile-avatar {
    border: 4px solid #ca884a;
    /* Eliminamos el glow difuso por un sombreado más nítido y profesional */
    box-shadow: 15px 15px 0px rgba(202, 136, 74, 0.1); 
    transition: all 0.4s ease;
}

.profile-avatar:hover {
    transform: scale(1.02);
    box-shadow: 10px 10px 0px rgba(202, 136, 74, 0.2);
}

/* Mobile Adjustments */
@media screen and (max-width: 768px) {
    .tech-divider {
        display: none; /* En móvil no necesitamos la línea vertical */
    }
    .tech-container {
        flex-direction: column;
        gap: 2em;
    }
}
/* Estilos para la lista de Sobre Mí */
.about-list {
    max-width: 800px;
    margin: 0 auto 2em auto; /* Centrado igual que los párrafos */
    padding-left: 2em; /* Espacio para los puntos */
    text-align: left; /* Alineamos a la izquierda para facilitar la lectura */
    color: #eaeaea;
    line-height: 1.8;
}

.about-list li {
    margin-bottom: 0.8em; /* Separación entre los puntos */
}

.about-list strong {
    color: #ca884a; /* Tu naranja corporativo para destacar las palabras clave */
}