tbody { 
  margin: 0;
  padding: 0;
  background: #f4f5f7;
  color: #2e2e2e;
  font-family: "Roboto", sans-serif;
}

.name {
  width: 100%;
  height: 330px;
  background: #2c3e50;
  transform: skewY(-4.5deg);
  border-radius: 20px;
  box-shadow: 0 25px 10px rgba(57, 32, 156, 0.479);
  position: relative;
}

.name .img {
    position: absolute;   
    top: 29%;
    right: 9%;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    transform: translate(3px, 2px);
    overflow: hidden;
    box-shadow: 18px 6px rgba(57, 32, 156, 0.15);
}

.name .img img {
    width: 100%; 
    height: 120%;
    object-fit: cover;
    object-position: center;
}

.name .content { 
    width: 65%;
    height: 30%;
    position: absolute;
    left: 15%;
}

.name .content .p-1 {
    color: #dbd3cb;
    font-family: "Zalando Sans", sans-serif;
    font-weight: 700; /* En lugar de bolder, para un control más fino */
    font-size: 3rem;  /* Aproximadamente 48px, más equilibrado para web */
    line-height: 1.1; /* Ajusta el espacio entre líneas si el nombre se rompe en dos */
    text-align: left;
    margin: 0;
}

/* --- FUSIÓN: LIQUID INK + RETRO BACKSPACE (VELOCIDAD ACELERADA) --- */
.name .content .p-2 {
    color: #dbd3cb;
    font-family: "Zalando Sans", sans-serif;
    font-size: 24px;
    transform: translate(3px, 2px);
    margin-top: 5%;
    min-height: 1.5em;
    display: inline-block;
    position: relative;
}

.name .content .p-2::after {
    content: "";
    border-right: 3px solid #dbd3cb;
    /* Reducido a 10s para mayor fluidez */
    animation: 
        liquid-ink 10s infinite steps(1), 
        parpadeo 0.6s infinite;
}

@keyframes liquid-ink {
  /* FRASE 1: 31 Años */
  0%   { content: ""; filter: blur(4px); }
  2%   { content: "3"; filter: blur(0px); }
  4%   { content: "31"; }
  6%   { content: "31 años"; }
  20%  { content: "31 años"; } /* Pausa */
  22%  { content: "31"; } /* Borrado rápido */
  24%  { content: ""; }

  /* FRASE 2: Técnico en construcción */
  26%  { content: "T"; filter: blur(3px); }
  28%  { content: "Técnico"; filter: blur(0px); }
  32%  { content: "Técnico en construcción"; }
  46%  { content: "Técnico en construcción"; } /* Pausa */
  48%  { content: "Técnico"; } /* Borrado rápido */
  50%  { content: ""; }

  /* FRASE 3: Aprendiz ADSO */
  52%  { content: "A"; filter: blur(3px); }
  54%  { content: "Aprendiz"; filter: blur(0px); }
  58%  { content: "Aprendiz ADSO"; }
  72%  { content: "Aprendiz ADSO"; } /* Pausa */
  74%  { content: "Apre"; } /* Borrado rápido */
  76%  { content: ""; }

  /* FRASE 4: Futuro Desarrollador */
  78%  { content: "F"; filter: blur(3px); }
  80%  { content: "Futuro"; filter: blur(0px); }
  84%  { content: "Futuro Desarrollador"; }
  94%  { content: "Futuro Desarrollador"; } /* Pausa */
  97%  { content: "Futuro"; } /* Borrado rápido */
  100% { content: ""; }
}

@keyframes parpadeo {
  0%, 100% { border-color: transparent; }
  50% { border-color: #dbd3cb; }
}

/* --- TUS DEMÁS ESTILOS PERMANECEN IGUAL --- */
.info {
    width: 95%;
    height: auto;
    background: #2c3e50;
    margin: 4% auto;
    padding: 22px;
    border-radius: 20px;
    box-shadow: 20px 35px rgba(57, 32, 156, 0.249);
}

.info .tituloseccion {
    color: #dbd3cb;
    font-family: "Zalando Sans", sans-serif;
    font-size: xx-large;
    text-align: center;
    font-weight: bolder;
    position: relative; 
    padding-bottom: 10px;
}

.info .tituloseccion::after {
    content: ''; 
    display: block;
    width: 90%;
    margin: 10px auto 0;
    border-bottom: 2px #dbd3cb solid;
}

.info .tituloinfo {
    color: #dbd3cb;
    font-family: "Zalando Sans", sans-serif;
    font-size: larger;
    display: inline;
    font-weight: bolder;
    padding-left: 1%;
}

.info .infoinfo {
    color: #dbd3cb;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline;
}

.info span {
    display: inline-block;
    padding: 5px 10px;
    background: #192431;
    color: #dbd3cb;
    font-family: "Zalando Sans", sans-serif;
    border-radius: 5px;
    margin: 4px;
}

.info .tituloseccion1 {
    text-align: center;
    font-weight: bolder;
    color: #dbd3cb;
    font-family: "Zalando Sans", sans-serif;
    font-size: xx-large;
    border-bottom: 2px #dbd3cb solid;
    width: 90%; 
    margin: 10px auto 0;
}

.info .tituloinfo1 {
    color: #dbd3cb;
    font-family: "Zalando Sans", sans-serif;
    font-size: larger;
    font-weight: bolder;
    text-align: justify; 
    padding: 1%;
}

.fin {
    width: 92%;
    color: #02033a;
    font-size: small;
    font-weight: bolder;
    text-align: center;
    margin: 20px auto;
}