/* --------------------------------------------------- */
/* Reset de estilo básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* --------------------------------------------------- */

:root {
    --solitude-blue:#E1F0FF;
    --aztec-black:#1F1F1F;
    --resolution-blue:#2E3192;
    --concrete-white:#F2F2F2;
    --accent:#F8BE07;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--concrete-white); /* Color gris claro de fondo */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-top: 10px; /* Espacio suficiente para el header fijo */
    color: var(--aztec-black);
    background: #F2F2F2;
    background: linear-gradient(0deg, rgba(242, 242, 242, 1) 0%, rgba(225, 240, 255, 1) 50%, rgba(242, 242, 242, 1) 100%);
}

/* Capa del halo */
#halo {
  position: fixed;
  inset: 0;                   /* cubre toda la ventana */
  pointer-events: none; 
  z-index: -9999;          /* ← siempre por encima de todo */
  --x: 50%;
  --y: 50%;

  /* Círculo azul suave en var(--x var(--y) */
  background: radial-gradient(
      circle 140px at var(--x) var(--y),
      rgba(89, 162, 246, 0.267) 5%,     /* centro azul luminoso */
      rgba(178, 214, 255, 0)    25%
  );

  /* Transición suave opcional */
  transition: background-position; /* 0.2 s de retardo */
}

/* Contenedor relativo para poder posicionar el botón */
.post-site-content pre {
  position: relative;
  padding-top: 2.5em;      /* deja espacio arriba para el botón */
}

/* Botón de copia */
.post-site-content .copy-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: var(--resolution-blue);
  color: white;
  border: none;
  padding: 0.2em 0.6em;
  border-radius: 0.3em;
  font-size: 0.875rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.post-site-content .copy-btn:hover {
  opacity: 1;
}


h1{
    font-size: clamp(1.8rem, 1vw + 0.7rem, 2rem);
    font-weight: 600;
    line-height: 4lh;
    text-shadow: #2E319220 -4px 4px 5px ;
}

h2{
    font-size: clamp(1.3rem, 1vw + 0.6rem, 1.5rem);
    font-weight: 600;
    text-shadow: #2E319220 -4px 4px 5px ;
    line-height: 2lh;
    margin-bottom: 0.5lh;
}

h3{
    font-size: clamp(1.1rem, 1vw + 0.6rem, 1.3rem);
    font-weight: 500;
    text-shadow: #2E319220 -4px 4px 5px ;
    line-height: 1.5lh;
    margin-bottom: 1lh;
}


a {
    text-decoration: none;
    color: var(--aztec-black);
}

span{
    color: var(--resolution-blue);
}

.tag{
    color: var(--concrete-white);
    background-color: var(--resolution-blue);
    padding: .5em;
    border-radius: 5px;
    font-size: .8em;
    margin-right: 0.5em;

    
}

p{
  font-size: clamp(1.2rem, 1vw + 0.3rem, 1.25rem);
  line-height: 2lh;
}

a:hover{
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    color: var(--resolution-blue);
}

/* --------------------------------------------------- */
/* Estilo del header y navbar */
/* --------------------------------------------------- */
header{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.navbar{
    display: flex;
    width: 80%;
    flex-direction: row;
    justify-content: space-between;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: -4px 4px 15px -10px var(--resolution-blue);
    background-color: #F2F2F280;
    backdrop-filter: blur(10px); /* Efecto blur */
    -webkit-backdrop-filter: blur(10px); /* Compatibilidad con Safari */
    padding: 0px 20px;
    position: sticky;
    z-index: 1000; /* Asegura que el header quede por encima de otros elementos */
    top: 0; /* Fija el header en la parte superior */
    flex-wrap: wrap;
}

.navbar-right{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.navbar-right a{
    color: var(--aztec-black);
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    font-size: clamp(1.2rem, 1vw + 0.7rem, 1.7rem)
}

.navbar-right a:hover{
    background-color: var(--solitude-blue);
    color: var(--resolution-blue);
    box-shadow: -4px 4px 15px -10px var(--resolution-blue);

    transform: translateY(-2px);
    transition: all 0.3s ease-in-out;
}

.navbar img{
    height: 50px;
}
/* --------------------------------------------------- */

/* --------------------------------------------------- */
/* Estilo del footer */
/* --------------------------------------------------- */

footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background-color: var(--solitude-blue);
}

.footer-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    max-width: 800px;
    flex-wrap: wrap;
    gap: 50px;
}
/* --------------------------------------------------- */

/* --------------------------------------------------- */
/* Estilo del section content */
/* --------------------------------------------------- */
.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: 20px;
}

/* --------------------------------------------------- */
/* Estilo del section personal-info */
/* --------------------------------------------------- */
.personal-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 800px;
    padding: 1em;
    margin-bottom: 1em;
    margin-top: 1em;
}

.personal-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.personal-profile{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0px;
    flex-wrap: wrap;
    justify-content: center;  /* Centra horizontalmente en cada línea */
    gap: 1.5em;  
    padding-bottom: 1em;
}

.personal-profile-left img{
    width: 120px;
    border-radius: 50%;
    box-shadow: -4px 4px 15px -10px var(--resolution-blue);

}

.personal-profile-right h1{
    font-size: clamp(1.8rem, 1vw + 1rem, 2rem);
}

.personal-profile-right p{
    font-size: clamp(1.2rem, 1vw + 0.4rem, 1.25);
    text-shadow: #2E319230 -4px 4px 5px ;
}


.personal-profile-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.social-icons{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    margin-top: 1lh;
    margin-bottom: 1lh;
}


/* --------------------------------------------------- */

/* --------------------------------------------------- */
/* Estilo del section experience-container */
/* --------------------------------------------------- */
.experience-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 80%;
    max-width: 800px;
    padding: 1em;
    margin-bottom: 1em;

}

.experience-container h2{padding-bottom: 0;}

.experience-list{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px;
    gap: 50px;  
}

.experience-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0px;
    justify-content: center;  /* Centra horizontalmente en cada línea */
    align-items: center;      /* Centra verticalmente si el contenedor tiene altura */
    gap: 20px;  
}

.experience-element-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0px;
    flex-wrap: wrap;
    justify-content: flex-start;  /* Centra horizontalmente en cada línea */
    align-items: center;  
    gap: 20px;    /* Centra verticalmente si el contenedor tiene altura */
}

.experience-element-info-text{
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: auto;
}

.experience-element-info-img{
    margin-right: 20px;
}

.experience-element-info img{
    width: 120px;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: -4px 4px 10px 0px #2E319230;
}

.experience-element-description p{
    font-size: clamp(1.2rem, 1vw + 0.4rem, 1.25rem);
}

/* --------------------------------------------------- */
/* Estilo del section projects-container */
/* --------------------------------------------------- */

.projects-container{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 80%;
    max-width: 800px;
    padding: 1em;
    margin-bottom: 1em;
}

.projects-list{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    width: 100%;
    padding: 0px;
    gap: 50px;  
    flex-wrap: wrap;
}

.project-element{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
    width: 100%;
    max-width:600px;
    background-color: var(--solitude-blue);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: -4px 4px 15px -10px var(--resolution-blue);
}

/* Párrafos */
.project-element-info-description p {
  font-size: clamp(1rem, 1vw + 0.3rem, 1.25rem);
  line-height: 2lh;
  margin-bottom: 1.5em;
}

.project-element-image{
    width: 100%;

    overflow: hidden;
}


.project-element-image img{
    width: 100%;
    height: 35vh;
    object-fit: cover;
}

.project-element-info{
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1.8em;
}

.project-element-info-header{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    gap: 1em;
}

.project-element-tags{
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    gap: 1em;
}
/* --------------------------------------------------- */
/* Estilo del section cover */
/* --------------------------------------------------- */

header{
    display: flex;
    flex-direction: column;
    align-items: flex-center;
    justify-content: center;
    width: 80%;
    max-width: 800px;
    padding: 1em;
}

header p{
    font-size: clamp(1.2rem, 1vw + 0.5rem, 1.5rem);
    padding-bottom: 1em;
}

header h1{
    font-size:  clamp(1.8rem, 1vw + 1.8rem, 4rem);
}

.cover{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 800px;
    margin-bottom: 2em;
    border-radius: 5px;
    
}
.cover-link{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1em;  
    transition: all 0.3s ease-in-out;
    box-shadow: -4px 4px 15px -10px #2E319290;
    border-radius: 5px;
    overflow: hidden;
}

.cover-link:hover{
    background-color: var(--concrete-white);
    color: var(--resolution-blue);
    box-shadow: -4px 4px 15px -10px var(--resolution-blue); 
    transform: translateY(-6px);
    transition: all 0.3s ease-in-out;
}


.cover-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1em;
}



.cover-info-head{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 1em;
}

.cover-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 35vh;
    overflow: hidden;
}


.cover-img img{
    width: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;

}

.cover-info-date{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%; 
}

.cover-info-description{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%; 
    margin-top: .5em;
    margin-bottom: .5em;

}

.cover-info-tag{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
}

/* --------------------------------------------------- */
/* Estilo del section posts */
/* --------------------------------------------------- */

.posts{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 80%;
    max-width: 800px;
    padding: 1em;
    margin-bottom: 1em;
}

.all-posts{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    width: 100%;
    flex-wrap: wrap;
    gap: 1.5em;
} 

.post-container{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    background-color: var(--solitude-blue);
    border-radius: 5px;
}

.post-link {
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-shadow: -4px 4px 15px -10px #2E319250;

}

.post-link:hover{
    background-color: var(--concrete-white);
    color: var(--resolution-blue);
    box-shadow: -4px 4px 15px -10px var(--resolution-blue);
    transform: translateY(-2px);
    transition: all 0.3s ease-in-out;
}

.post-info{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 1em;
  font-size: clamp(.75rem, 1vw + 0.2rem, 1rem);
  text-wrap: normal;
}

.post-info-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.post-img{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30%;
  max-width: 150px;
  min-width: 50px;
  min-height: 50px;
  max-height: 150px;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* Esto asegura que sea cuadrado */
  margin: .5em;
  border-radius: 2px;
}

.post-img img{
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1; /* Esto asegura que sea cuadrado */
}

.post-info-date{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%; 
    padding-bottom: 0.5em;

}

.post-info-description{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%; 
    margin-top: .5em;
    margin-bottom: .5em;

}

.post-info-tag{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%;

}

/* --------------------------------------------------- */
/* Estilo del section post-site */
/* --------------------------------------------------- */


.post-site{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    padding: 1em;
    margin: 1em;
    overflow-x: hidden;
}
.post-site-content {
  /* Mejor flujo de texto sin sorpresas de flex */
  display: block;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;         /* centra horizontalmente en pantallas grandes */
  padding: 1em;
}

.post-site-title h2{
    font-size: clamp(1.3rem, 1vw + 0.6rem, 1.8rem);
    margin-bottom: 1lh;
}

/* Encabezados dentro del contenido */
.post-site-content h1,
.post-site-content h2,
.post-site-content h3,
.post-site-content h4 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.2;
}

/* Párrafos */
.post-site-content p {
  font-size: clamp(1rem, 1vw + 0.3rem, 1.25rem);
  line-height: 2lh;
  margin-bottom: 1.5em;
}

/* Ajustes para listas largas y responsive */
.post-site-content ul,
.post-site-content ol {
  margin: 1em 0 1.5em 1.5em;
  padding-left: 1.5em;
  overflow-x: auto;
  word-wrap: break-word;
  word-break: break-word;
}

/* Ítems de lista */
.post-site-content li {
  margin-bottom: 1em;
  line-height: 1.6;
  overflow-wrap: anywhere; /* Forza el corte de palabras largas */
  max-width: 100%;
}


/* Imágenes responsivas */
.post-site-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em auto;
}

/* Bloques de código */
.post-site-content pre[class*="language-"]  {
    background-color: #f2f2f280;
    backdrop-filter: blur(10px); /* Efecto blur */
    -webkit-backdrop-filter: blur(10px); /* Compatibilidad con Safari */
    overflow-x: auto;
    padding: 1em;
    border-radius: 0.5em;
    margin: 1.5em 0;
    font-size: 1em;
    box-shadow: -4px 4px 15px -10px #2E319290;
}

/* Código inline */
.post-site-content p code{
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.85em;
}


/* Enlaces */
.post-site-content a {
  color:var(--resolution-blue);
  text-decoration: underline;
}

.post-site-content th,
.post-site-content td {
    padding: 0.5em 0.5em;
    border-bottom: 0.25lh solid #cde3ff;  
    text-align: left;
}

.post-site-content th {
    background-color: #cde3ff;

    font-weight: bold;
}

/* Contenedor responsivo para tablas */
.post-site-content table {
    border-radius: 10px ;
    -moz-border-radius: 10px  ;
    -webkit-border-radius: 10px  ;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: clamp(0.8rem, 1vw + 0.1rem, 1rem);
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.post-site-content table thead,
.post-site-content table tbody,
.post-site-content table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.post-site-content table td,
.post-site-content table th {
  word-wrap: break-word;
}


.post-site-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
    gap: 1.5em;
    overflow: hidden;
    width: 100%;
    background-color: var(--solitude-blue);
    box-shadow: -4px 4px 15px -10px var(--resolution-blue);
    margin-bottom: 2em;

}

.post-site-title{
    display: flex;
    width: 100%;
    flex-direction: column;
}

.post-site-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 35vh;
    border-radius: 5px;
    overflow: hidden;
}

.post-site-img img{
    width: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.post-site-date{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%; 
    padding-bottom: 0.5em;

}

.post-site-author{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%; 
    margin-top: .5em;
    margin-bottom: .5em;
}

.post-site-description{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%; 
    margin-top: .5em;
    margin-bottom: .5em;

}

.post-site-tag{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%;
    margin-top: .5em;


}

/* Solo mostramos el halo cuando el dispositivo soporta hover (PC, laptop, etc.) */
@media (hover: hover) and (pointer: fine) {
  #halo { display: block; }      /* halo visible */
}

/* En móviles (sin hover o con pointer grueso) lo ocultamos */
@media (hover: none) or (pointer: coarse) {
  #halo { display: none; }       /* halo invisible */
}