/* ============================================================================
   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: circulo con aro de acento. Es la unica excepcion a las esquinas
   de 4 px, y es deliberada: el retrato es la persona, no un componente.

   El aro es el borde del contenedor; el relleno de color de pagina deja una
   franja de aire entre aro y foto. La foto es cuadrada y el sujeto esta
   centrado, asi que el circulo inscrito solo recorta pared: la cabeza queda
   con aire arriba y las manos entran por abajo. */
.hero__retrato {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 7px;
  border: 2px solid var(--acento);
  border-radius: 50%;
  background-color: var(--bg);
  box-shadow: var(--retrato-brillo);
}

.hero__retrato img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: var(--retrato-filtro);
}

/* Senal sobre el aro, a las 4:30: el mismo naranja que marca donde mirar.
   Va a 45 grados, asi que su centro cae en 50 % + 50 % x cos 45 = 85,36 %. */
.hero__senal {
  position: absolute;
  inset-inline-start: 85.36%;
  inset-block-start: 85.36%;
  width: clamp(1.75rem, 3vw, 2.25rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--acento-halo);
  pointer-events: none;
}

.hero__senal::after {
  content: '';
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--acento);
}

/* Pulso de la senal: solo transform y opacity, y solo si el usuario acepta
   movimiento. Sin el, el punto se queda fijo y la pieza sigue completa. */
@media (prefers-reduced-motion: no-preference) {
  .hero__senal::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--acento);
    border-radius: 50%;
    opacity: 0;
    animation: senal 2.8s var(--ease) infinite;
  }

  @keyframes senal {
    from {
      opacity: 0.7;
      transform: scale(0.6);
    }
    to {
      opacity: 0;
      transform: scale(1.75);
    }
  }
}

@media (min-width: 900px) {
  .hero__retrato {
    width: min(100%, 27rem);
    justify-self: center;
  }
}

/* ---------------------------------------------------------------------------
   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;
}