/* ===================== Contenedor principal ===================== */

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "left right";
  grid-template-columns: minmax(400px, 1fr) minmax(400px, 3fr);

  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Poppins", Verdana, sans-serif; /* tipografía más moderna */
  line-height: 1.6;
  gap: 20px;
}

/* ===================== Header ===================== */

.header {
  grid-area: header;
  text-align: right;
  background: linear-gradient(135deg, #0ab1ff, #0077b6); /* gradiente */
  color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* sombra */
}

/* ===================== Columna izquierda ===================== */

.left {
  grid-area: left;
  background: linear-gradient(180deg, #1e3a8a, #3b82f6); /* azul degradado */
  border-radius: 12px;
  color: white;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* sombra */
}

/* ===================== Columna derecha ===================== */

.right {
  grid-area: right;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* sombra sutil */
}

/* ===================== Titulares H2===================== */

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #222;
  font-size: 1.4rem; /* un poco más grande */
  font-weight: 600;
  border-bottom: 2px solid #5f6ade;
  padding-bottom: 5px;
}
h2.blanco {
  color: white;               /* texto en blanco */
  border-bottom: none;
  text-align: center;
  transition: transform 0.2s ease;  /* para agrandar suavemente */
}

/* Animación de vibración para el icono */
h2.blanco .icon {
  display: inline-block;      /* necesario para animar */
  transition: transform 0.1s ease;
}

/* Hover: escala + vibración */
h2.blanco:hover {
  transform: scale(1.1);      /* agranda todo el h2 ligeramente */
}

h2.blanco:hover .icon {
  animation: vibrate 0.2s infinite;
}

@keyframes vibrate {
  0%   { transform: translate(0); }
  20%  { transform: translate(-1px, 1px) rotate(-1deg); }
  40%  { transform: translate(-1px, -1px) rotate(1deg); }
  60%  { transform: translate(1px, 1px) rotate(0deg); }
  80%  { transform: translate(1px, -1px) rotate(1deg); }
  100% { transform: translate(0); }
}

.right h2 {
  transition: transform 0.2s ease, color 0.2s ease; /* transición suave */
}

.right h2:hover {
  transform: scale(1.10);   /* agranda un 10% */
  color: #2563eb;          /* opcional: cambia color al hover */
}

h3.blanco {
  color: white;               /* mantiene el texto en blanco */
  text-align: center;
  display: inline-block;      /* necesario para animar transform */
  transition: transform 0.1s ease;
}

/* Hover: vibración del h3 completo */
h3.blanco:hover {
  animation: vibrate 0.2s infinite;
}

@keyframes vibrate {
  0%   { transform: translate(0); }
  20%  { transform: translate(-1px, 1px) rotate(-1deg); }
  40%  { transform: translate(-1px, -1px) rotate(1deg); }
  60%  { transform: translate(1px, 1px) rotate(0deg); }
  80%  { transform: translate(1px, -1px) rotate(1deg); }
  100% { transform: translate(0); }
}

/* ===================== Párrafos ===================== */

.left p {
  text-align: center;
}

/* ===================== Links ===================== */

.left a {
  color: white;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2 ease, color 0.3s ease; /* animación suave */
}

.left a:hover {
  color: #ffd700; /* dorado al hover */
  text-decoration: underline;
}

/* ===================== Lista con iconos ===================== */

.left li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.left li::before {
  content: "✓";            /* icono */
  display: inline-block;    /* importante para que se transforme correctamente */
  color: #fff;
  transition: transform 0.2s ease, color 0.2s ease;
}

.left li:hover::before {
  transform: scale(1.9);   /* escala más evidente */
  color: #08f76c;          /* verde al hover */
}

.right-h2 .icon {
  display: inline-block;               /* necesario para animar */
  transition: transform 0.1s ease;
}

/* Hover sobre todo el h2, animamos solo el icono */
.right-h2:hover .icon {
  animation: vibrate 0.2s infinite;
}

@keyframes vibrate {
  0%   { transform: translate(0); }
  20%  { transform: translate(-1px, 1px) rotate(-1deg); }
  40%  { transform: translate(-1px, -1px) rotate(1deg); }
  60%  { transform: translate(1px, 1px) rotate(0deg); }
  80%  { transform: translate(1px, -1px) rotate(1deg); }
  100% { transform: translate(0); }
}


/* ===================== Otros ajustes ===================== */


.left h2 {
  margin-top: 150px;
}

/* ===================== Responsive ===================== */

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "left"
      "right";
    grid-template-columns: 1fr;
  }

  .left, .right {
    padding: 20px;
  }

  * {
    box-sizing: border-box;
  }

  .left, .right, .header {
    width: 100%;
  }
}

/* ===================== Timeline ===================== */

.timeline {
  position: relative;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 2px solid #3b82f6;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-dot {
  position: absolute;
  left: -18px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: #3b82f6;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #3b82f6;
}

.timeline-content h4 {
  margin: 0;
  font-size: 1rem;
  color: #1e3a8a;
  font-weight: bold;
}

.timeline-content p {
  margin: 2px 0 8px;
  font-size: 0.9rem;
  color: #444;
}

.en-curso {
  color: #22eaf8f6; /* azul  verde tailwind (emerald/500) */
  font-weight: bold;
}

.formbase {
  color: rgb(131, 185, 247);
}

.proyecto-final {
  color: #21ee0ef6; /* verde */
}

/* ===================== Barras Skills ===================== */

.skill {
  display: flex;                  /* texto y barra en línea */
  align-items: center;            
  margin-bottom: 12px;
  gap: 12px;                      /* espacio entre texto y barra */
}

.skill span {
  flex: 0 0 180px;                /* ancho fijo para que todo quede alineado */
  font-weight: 500;
}

.bar {
  flex: 1;                        /* la barra ocupa el resto del espacio */
  background: #e5e7eb;            /* gris claro */
  border-radius: 8px;
  height: 10px;
  overflow: hidden;
}

.level {
  background: linear-gradient(90deg, #3b82f6, #2563eb); /* azul degradado */
  height: 100%;
  border-radius: 8px;
}

/* ===================== Animaciónes ===================== */

.blink {
  color: #22eaf8f6; /* azul */
  animation: blink-animation 3s infinite;
}

.blinkpf {
  color: #21ee0ef6; /* verde */
  animation: blink-animation 3s infinite;
  font-weight: 700;
}

@keyframes blink-animation {
  0%, 90% { opacity: 1; }
  91%, 100% { opacity: 0; }
}

/* ===================== Barras ===================== */

.level {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  height: 100%;
  border-radius: 8px;
  width: 0;
  animation: fillLoop 3s infinite alternate; /* bucle continuo */
}

/* Animación de relleno / vaciado */
@keyframes fillLoop {
  from { width: 0; }
  to { width: var(--level-width); }
}