/* ============================================================================
   SECCIONES
   Ocho secciones, ocho familias de composicion distintas:
     hero .............. split asimetrico
     cifras ............ fila de metricas con filetes verticales
     sobre-mi .......... prosa editorial desplazada
     experiencia ....... linea de tiempo vertical
     logros ............ bento de 5 celdas
     stack ............. grupos etiqueta + chips
     formacion ......... division en dos columnas
     contacto .......... datos directos + formulario
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. HERO - split asimetrico
   --------------------------------------------------------------------------- */

.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: 6rem 3rem;
  position: relative;
  overflow: hidden;
}

/* Reticula tecnica: la firma de fondo de la identidad. Se desvanece hacia
   abajo para no competir con el contenido. Decorativa, sin eventos. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--reticula) 1px, transparent 1px),
    linear-gradient(to bottom, var(--reticula) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0 45%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}

/* Halo de acento muy tenue detras del retrato. */
.hero::after {
  content: '';
  position: absolute;
  inset-block-start: -10%;
  inset-inline-end: -12%;
  width: min(46rem, 70vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center,
    var(--acento-tinte) 0%,
    transparent 62%
  );
  pointer-events: none;
  z-index: 0;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.18fr 0.82fr;
  }
}

.hero__rol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--acento);
}

.hero__rol span + span {
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--acento-borde);
}

.hero h1 {
  margin-block: var(--s-4) var(--s-5);
}

.hero__propuesta {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--texto-suave);
}

/* La cifra arranca en su propia linea: es lo que el reclutador debe retener */
.hero__propuesta .destacado {
  display: block;
  margin-top: 0.375rem;
  color: var(--texto);
  font-weight: 500;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* En movil la accion principal ocupa el ancho completo: jerarquia clara */
@media (max-width: 479px) {
  .hero__acciones .boton--primario {
    width: 100%;
  }
}

/* Retrato: contenedor sin fondo propio, porque cualquier relleno se veria
   como un rectangulo asomando por debajo de la mascara. */
.hero__retrato {
  position: relative;
  max-width: 25rem;
  margin-inline: auto;
}

/* Velo del color de la pagina sobre los bordes de la foto.
   Va POR ENCIMA de la imagen y se apaga hacia dentro. Su razon de ser: con
   solo mascara alfa, un pixel al 50 % mezcla foto oscura con pagina clara y
   deja una banda gris, el halo tipico. Al teñir antes hacia el color de la
   pagina, la transicion pasa a ser pagina contra pagina y el escalon
   desaparece. Los recorridos son mas largos que los de la mascara para que
   el velo se adelante siempre al alfa. */
.hero__retrato::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,  var(--bg) 0%, transparent 30%),
    linear-gradient(to left,   var(--bg) 0%, transparent 28%),
    linear-gradient(to top,    var(--bg) 0%, transparent 14%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 11%);
}

/* Integracion del retrato con el fondo del hero.
   Sin borde, sin sombra y sin radio: nada que dibuje un rectangulo.

   La mascara son cuatro degradados independientes combinados con
   mask-composite: intersect, de modo que cada borde se desvanece por su
   cuenta. Los recorridos salen de medir la foto:
     - el sujeto ocupa del 32 % al 60 % horizontal, asi que los laterales
       son fondo puro y admiten un fundido largo (22 % y 20 %);
     - las manos llegan hasta el borde inferior, asi que abajo el fundido
       es corto (9 %) para no comerselas;
     - arriba solo un velo (7 %), que es donde hay pared desenfocada. */
.hero__retrato img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  filter: var(--retrato-filtro);

  --m-izq:   linear-gradient(to right,  transparent 0%, rgba(0,0,0,.28) 7%,
                             rgba(0,0,0,.78) 15%, #000 22%, #000 100%);
  --m-der:   linear-gradient(to left,   transparent 0%, rgba(0,0,0,.28) 6%,
                             rgba(0,0,0,.78) 14%, #000 20%, #000 100%);
  --m-abajo: linear-gradient(to top,    transparent 0%, rgba(0,0,0,.45) 3%,
                             rgba(0,0,0,.85) 6%, #000 9%, #000 100%);
  --m-arriba:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 2.5%,
                             rgba(0,0,0,.88) 5%, #000 7%, #000 100%);

  -webkit-mask-image: var(--m-izq), var(--m-der), var(--m-abajo), var(--m-arriba);
  mask-image: var(--m-izq), var(--m-der), var(--m-abajo), var(--m-arriba);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Sin mask-composite el navegador sumaria las cuatro mascaras y no habria
   fundido. En ese caso, una sola mascara radial cumple el mismo papel. */
@supports not (mask-composite: intersect) {
  .hero__retrato img {
    --m-radial: radial-gradient(72% 88% at 46% 48%,
                                #000 0 40%, rgba(0,0,0,.75) 66%,
                                rgba(0,0,0,.25) 86%, transparent 100%);
    -webkit-mask-image: var(--m-radial);
    mask-image: var(--m-radial);
  }
}

/* Halo de acento detras del retrato: le da suelo a la imagen ahora que
   no tiene borde que la sostenga. */
.hero__retrato::before {
  content: '';
  position: absolute;
  inset: 6% 4% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    var(--acento-tinte) 0%,
    transparent 70%
  );
  pointer-events: none;
}

@media (min-width: 900px) {
  .hero__retrato {
    max-width: none;
    margin-inline: 0;
  }
}

/* ---------------------------------------------------------------------------
   2. CIFRAS - fila de metricas
   --------------------------------------------------------------------------- */

.cifras {
  border-block: 1px solid var(--linea);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background-color: var(--bg-alt);
}

.cifras__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
}

@media (min-width: 860px) {
  .cifras__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
  }
}

.cifra {
  padding-inline-start: var(--s-5);
  border-inline-start: 1px solid var(--linea-fuerte);
}

.cifra:first-child {
  border-inline-start-color: var(--acento);
}

.cifra__valor {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-metric);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.cifra__etiqueta {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   3. SOBRE MI - prosa editorial con desplazamiento asimetrico
   --------------------------------------------------------------------------- */

.sobre__grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 1000px) {
  .sobre__grid {
    grid-template-columns: 4fr 7fr;
    gap: clamp(2rem, 6vw, 6rem);
  }
}

.sobre__cuerpo {
  max-width: var(--ancho-prosa);
}

.sobre__nota {
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--acento);
}

.sobre__nota dt {
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  margin-block-start: var(--s-4);
}

.sobre__nota dt:first-of-type {
  margin-block-start: 0;
}

.sobre__nota dd {
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-block-start: var(--s-1);
}

/* ---------------------------------------------------------------------------
   4. EXPERIENCIA - linea de tiempo vertical
   --------------------------------------------------------------------------- */

.linea-tiempo {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.puesto {
  position: relative;
  padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
  border-inline-start: 1px solid var(--linea-fuerte);
}

/* Marcador del rail */
.puesto::before {
  content: '';
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--linea-fuerte);
}

.puesto[data-actual='true'] {
  border-inline-start-color: var(--acento-borde);
}

.puesto[data-actual='true']::before {
  background-color: var(--acento);
}

.puesto__periodo {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

/* Filete entre cada dato del periodo, igual que en el titular del hero */
.puesto__periodo span + span {
  padding-inline-start: 0.625rem;
  border-inline-start: 1px solid var(--linea-fuerte);
}

.puesto__periodo .duracion {
  color: var(--texto-suave);
}

.puesto__periodo .vigente {
  color: var(--acento);
  font-weight: 500;
}

.puesto h3 {
  margin-block: var(--s-3) var(--s-1);
}

.puesto__empresa {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  margin-bottom: var(--s-4);
}

.puesto__empresa strong {
  color: var(--texto);
  font-weight: 500;
}

.puesto__logros {
  display: grid;
  gap: var(--s-3);
  max-width: 54rem;
}

.puesto__logros li {
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  line-height: 1.65;
}

/* Guion tipografico como vineta, dibujado en CSS */
.puesto__logros li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.7em;
  inset-inline-start: 0;
  width: 11px;
  height: 1px;
  background-color: var(--acento);
}

.puesto__clientes {
  margin-top: var(--s-5);
}

.puesto__clientes-titulo {
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  margin-bottom: var(--s-3);
}

.puesto__stack {
  margin-top: var(--s-5);
}

/* ---------------------------------------------------------------------------
   5. LOGROS - bento de 5 celdas, relleno exacto de 3x3
   --------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 780px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .logro--a {
    grid-column: span 2;
  }
  .logro--e {
    grid-column: span 2;
  }
}

@media (min-width: 1060px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
  }
  .logro--a {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .logro--b {
    grid-column: 3;
    grid-row: 1;
  }
  .logro--c {
    grid-column: 3;
    grid-row: 2;
  }
  .logro--d {
    grid-column: 1;
    grid-row: 3;
  }
  .logro--e {
    grid-column: 2 / 4;
    grid-row: 3;
  }
}

.logro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background-color: var(--superficie);
  overflow: hidden;
  transition: border-color var(--dur-media) var(--ease),
              transform var(--dur-media) var(--ease);
}

.logro:hover {
  border-color: var(--acento-borde);
  transform: translateY(-2px);
}

/* Celda destacada: degradado propio de la marca (nada de violeta) */
.logro--a {
  /* Centrado, no space-between: la celda es mas alta que su contenido y
     separar los extremos abria un hueco en el medio. */
  justify-content: center;
  gap: var(--s-6);
  background-image: linear-gradient(
      152deg,
      var(--acento-tinte) 0%,
      transparent 58%
    );
  border-color: var(--acento-borde);
}

/* Celda con patron de puntos, para variar el fondo del bento */
.logro--d {
  background-image: radial-gradient(
    var(--linea-fuerte) 1px,
    transparent 1px
  );
  background-size: 14px 14px;
  background-position: -7px -7px;
}

.logro--d > * {
  position: relative;
}

/* Celda con superficie tintada */
.logro--e {
  background-color: var(--superficie-2);
}

.logro__valor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.logro--a .logro__valor {
  font-size: clamp(3rem, 8vw, 5.25rem);
}

.logro__icono {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-ui);
  background-color: var(--acento-tinte);
  color: var(--acento);
  font-size: 1.35rem;
}

.logro h3 {
  font-size: var(--fs-h3);
}

.logro--a h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

.logro__medida {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--linea);
}

.logro p {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  line-height: 1.65;
}

.logro__cima {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

/* ---------------------------------------------------------------------------
   6. STACK - logotipos reales + grupos etiqueta/chips
   --------------------------------------------------------------------------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: var(--s-5) var(--s-7);
  margin-bottom: var(--s-7);
  border-block-end: 1px solid var(--linea);
}

.logos img {
  height: 26px;
  width: auto;
  opacity: 0.72;
  filter: var(--logo-filtro);
  transition: opacity var(--dur-media) var(--ease);
}

.logos img:hover {
  opacity: 1;
}

.grupos-stack {
  display: grid;
  gap: 0;
}

.grupo-stack {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(1.5rem, 2.6vw, 2rem);
  border-block-start: 1px solid var(--linea);
}

.grupo-stack:last-child {
  border-block-end: 1px solid var(--linea);
}

@media (min-width: 860px) {
  .grupo-stack {
    grid-template-columns: 16rem 1fr;
    gap: var(--s-6);
    align-items: start;
  }
}

.grupo-stack h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.grupo-stack__nota {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   7. FORMACION - dos columnas
   --------------------------------------------------------------------------- */

.formacion__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .formacion__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bloque-titulo {
  font-size: 1.0625rem;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--acento);
}

.estudio {
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--linea);
}

.estudio:last-of-type {
  border-block-end: 0;
}

.estudio h4 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.estudio__meta {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

.estudio__fecha {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
}

/* Certificaciones: grupos, no una lista con filete por fila */
.certis {
  display: grid;
  gap: var(--s-3);
}

.certi {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background-color: var(--superficie);
}

.certi__ano {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--acento);
  width: 4.5rem;
}

.certi__nombre {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
}

.certi__emisor {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  font-weight: 400;
}

.desplegable {
  margin-top: var(--s-5);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background-color: var(--superficie);
}

.desplegable summary {
  padding: var(--s-4);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  list-style: none;
}

.desplegable summary::-webkit-details-marker {
  display: none;
}

.desplegable summary i {
  color: var(--acento);
  transition: transform var(--dur-media) var(--ease);
}

.desplegable[open] summary i {
  transform: rotate(180deg);
}

.desplegable__cuerpo {
  padding: 0 var(--s-4) var(--s-4);
  display: grid;
  gap: var(--s-3);
}

.desplegable__cuerpo li {
  display: flex;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--texto-suave);
  line-height: 1.5;
}

.desplegable__cuerpo .certi__ano {
  width: 4.5rem;
}

/* Enlace al repositorio de la universidad */
.publicacion {
  display: block;
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--linea);
  border-inline-start: 2px solid var(--acento);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background-color: var(--superficie);
  transition: border-color var(--dur-rapida) var(--ease),
              transform var(--dur-rapida) var(--ease),
              box-shadow var(--dur-rapida) var(--ease);
}

.publicacion:hover {
  border-color: var(--acento-borde);
  border-inline-start-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.publicacion:active {
  transform: scale(0.995);
}

.publicacion__tipo {
  display: block;
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  margin-bottom: var(--s-2);
}

.publicacion__titulo {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.6;
  font-weight: 500;
}

.publicacion__fuente {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--acento-fuerte);
  font-weight: 500;
}

.publicacion__fuente i {
  font-size: 1em;
  transition: transform var(--dur-rapida) var(--ease);
}

.publicacion:hover .publicacion__fuente i {
  transform: translate(2px, -2px);
}

/* ---------------------------------------------------------------------------
   8. CONTACTO - datos directos y formulario
   --------------------------------------------------------------------------- */

.contacto__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contacto__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.contacto__directos {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background-color: var(--superficie);
}

.form__filas {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 620px) {
  .form__doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
}

.form__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.form__nota {
  font-size: var(--fs-xs);
  color: var(--texto-tenue);
  max-width: 22rem;
}