/* Estilos de Biografía, CV y Contacto */
body { background: var(--papel); color: var(--tinta); font-family: var(--mono); font-size: 12px; line-height: 1.4; }
.justificado { text-align: justify; hyphens: auto; }

.gigante {
  font-family: var(--grotesk); font-weight: 800; letter-spacing: -.045em; line-height: .8;
  font-size: clamp(64px, 15vw, 260px); text-transform: uppercase;
}
.etiqueta {
  display: inline-block; background: var(--tinta); color: #fff;
  font-size: 10px; padding: 3px 6px; text-transform: uppercase; margin-bottom: 12px;
}
/* Mismo estilo de botón en todo el sitio (igual a Contacto) */
.pastilla {
  display: inline-flex; align-items: center; gap: 8px;
  background: #4a4a4a; color: #fff; border-radius: 5px;
  padding: 3px 10px; font-family: var(--sans); font-size: clamp(13px, 1.2vw, 18px);
  transition: background .25s;
}
.pastilla:hover { background: #000; }
.aparece { opacity: 0; transform: translateY(30px); transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); }
.aparece.vista { opacity: 1; transform: none; }

/* ================= BIOGRAFÍA (igual a Cargo) ================= */
.bio {
  padding: calc(var(--barra) + 14px) 1.7vw 60px;
  font-family: "Space Grotesk", var(--sans);
}
.bio-titulo {
  font-family: "Space Mono", monospace; font-weight: 700;
  font-size: clamp(30px, 3.3vw, 56px); line-height: 1; letter-spacing: -.02em;
}
.bio-cuerpo {
  margin-top: clamp(40px, 7vw, 110px);
  display: grid; grid-template-columns: 29vw 1fr; gap: 6vw; align-items: start;
}
.bio-nombre {
  font-family: "Space Grotesk", var(--sans); font-weight: 700;
  font-size: clamp(16px, 1.42vw, 24px); line-height: 1; letter-spacing: 0;
}
.bio-texto {
  margin-top: clamp(60px, 12vw, 190px);
  font-size: clamp(13px, .99vw, 16px); line-height: 1.65;
}
.bio-texto p + p { margin-top: 1.65em; }
.bio-foto { aspect-ratio: 2000 / 1235; overflow: hidden; background: #ededed; position: relative; }
.bio-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.bio-foto.vacia { display: grid; place-items: center; outline: 1px dashed rgba(0,0,0,.3); outline-offset: -10px; }
.bio-foto.vacia::after { content: "Tu foto"; font-size: 28px; color: rgba(0,0,0,.4); }

/* ================= CV ================= */
.cv { padding: calc(var(--barra) + 20px) 14px 40px; }
.cv-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 4vw; }
.cv-cabeza .acciones { display: flex; gap: 8px; }
.cv-hoja {
  display: grid; grid-template-columns: 1fr 2.2fr; gap: 4vw;
  border-top: 1px solid var(--tinta); padding-top: 24px;
}
.cv h2 { font-family: var(--grotesk); font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-bottom: 14px; text-transform: uppercase; }
.cv-bloque + .cv-bloque { margin-top: 40px; }
.cv-lado p { margin-bottom: 4px; }
.cv-lado h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; margin-top: 12px; }

.habilidad { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px; font-size: 10px; text-transform: uppercase; margin-bottom: 7px; }
.barra-nivel { height: 9px; background: #dddddd; position: relative; overflow: hidden; }
.barra-nivel i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--tinta); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.vista .barra-nivel i { width: var(--n); }

.trabajo {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 20px;
  padding: 18px 0; border-bottom: 1px solid rgba(0,0,0,.15);
  transition: background .3s, padding .3s;
}
.trabajo:hover { background: #fff; padding-left: 10px; padding-right: 10px; }
.trabajo h3 { font-family: var(--grotesk); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: -.01em; }
.trabajo .fecha { font-size: 10px; text-transform: uppercase; align-self: center; }
.trabajo .rol { grid-column: 1 / -1; font-family: "Inter", sans-serif; font-style: italic; font-weight: 500; font-size: 14px; line-height: 1.35; margin-top: 2px; }   /* cursiva legible */
.trabajo ul { grid-column: 1 / -1; list-style: none; margin-top: 4px; }
.trabajo li::before { content: "— "; }

/* ================= CONTACTO ================= */
.contacto {
  min-height: 100vh; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--barra) + 24px) 14px 14px;
  background: #ffffff;
  font-family: var(--sans); font-size: 11px;
}
/* Información al centro de la página */
.contacto-info {
  margin: auto; text-align: center; text-transform: uppercase;
  font-size: clamp(11px, .9vw, 14px); line-height: 1.5;
  display: flex; flex-direction: column; gap: 1.4em;
}
.contacto-info a { border-bottom: 1px solid currentColor; }
.contacto-info a:hover { opacity: .55; }
.contacto-abajo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.contacto h1 {
  font-family: var(--serif); font-weight: 400; line-height: .78;
  font-size: clamp(90px, 21vw, 340px); letter-spacing: -.035em;
}
.contacto h1 sup { font-family: var(--sans); font-size: .1em; vertical-align: top; position: relative; top: .9em; margin-left: .1em; }
/* Botones chicos: rectángulo gris oscuro con esquinas apenas redondeadas */
/* inline-grid: los dos botones toman el ancho del más largo */
.contacto-botones { display: inline-grid; gap: 4px; padding-bottom: .6vw; }
.contacto-botones a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #4a4a4a; color: #fff; border-radius: 5px;
  padding: 3px 10px; font-size: clamp(13px, 1.2vw, 18px);
  transition: background .25s;
}
.contacto-botones a i { font-style: normal; font-size: .7em; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.contacto-botones a:hover { background: #000; }
.contacto-botones a:hover i { transform: translate(2px, -2px); }
.copiado {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 999px;
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; font-size: 11px;
}
.copiado.visible { opacity: 1; transform: translate(-50%, 0); }

/* ================= Celular ================= */
@media (max-width: 760px) {
  .bio-cuerpo { grid-template-columns: 1fr; gap: 24px; }
  .cv-hoja { grid-template-columns: 1fr; }
  .trabajo { grid-template-columns: 1fr; }
  .contacto-info { margin: 30vh auto 40px; }
  .contacto-botones { align-items: flex-start; }
}

/* CV impreso / guardado como PDF */
@media print {
  .barra, .cv-cabeza .acciones { display: none !important; }
  .cv { padding-top: 0; }
  .aparece { opacity: 1 !important; transform: none !important; }
  .barra-nivel i { width: var(--n) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
}

/* Contacto: la palabra grande centrada y un poco más grande */
.contacto-abajo.centrado { justify-content: center; }
.contacto-abajo.centrado h1 { font-size: clamp(84px, 18vw, 300px); text-align: center; }

/* CV: sin título grande; solo el botón "Descargar PDF" arriba a la derecha */
.cv-cabeza.solo-boton { justify-content: flex-end; margin-bottom: 18px; }