/* =========================================================================
   lioseren.com — CV vivo de Lautaro Seren
   Documento editorial en base clara. Identidad propia, distinta del taller
   oscuro de iabylio.com: ahi manda el grotesco sobre negro, aca manda el
   serif de prensa sobre papel frio.

   Tipografia
     display  Newsreader (variable 400..600, eje opsz 6..72)
     texto    Schibsted Grotesk (variable 400..700)
     mono     DM Mono (400 / 500), solo en metadatos y en el instrumental

   Radio: uno solo, 3px, en todo lo que lo necesite. Sin escalas mezcladas.
   Acento: uno solo, el azul, en toda la pagina.
   ========================================================================= */

/* ------------------------------------------------------------- tipografia */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-500-latin.woff2') format('woff2');
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* Papel frio: dialoga con el azul de IAbyLio sin copiarle la base oscura. */
  --papel: #f4f5f6;
  --papel-2: #e7ebed;
  --papel-3: #fcfcfc;

  --tinta: #10161a;
  --tinta-2: #4c5960;
  --tinta-3: #616f77;

  --azul: #0b5c7e;
  --azul-2: #0e7ba6;
  --azul-tinte: rgba(11, 92, 126, 0.07);

  --linea: rgba(16, 22, 26, 0.14);
  --linea-2: rgba(16, 22, 26, 0.26);

  --sombra: 0 1px 2px rgba(16, 22, 26, 0.05), 0 8px 24px rgba(16, 22, 26, 0.06);

  --r: 3px;

  --ancho: 1120px;
  --margen: clamp(1.25rem, 5vw, 4rem);
  --gutter: 9.5rem;
  /* Medida unica de la columna de texto. En px y no en ch para que todos los
     bloques compartan el mismo borde derecho aunque cambie el cuerpo. */
  --medida: 34rem;

  --f-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-texto: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Una sola curva firma. Movimiento sobrio: es un CV, no un escenario. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 160ms;
  --medio: 300ms;
  --lento: 620ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #12171a;
    --papel-2: #1a2126;
    /* Hex solido y con salto real sobre la banda: en oscuro un overlay
       translucido de 0.02 a 0.05 directamente no se ve. */
    --papel-3: #232c32;

    --tinta: #e9edee;
    --tinta-2: #a9b5bb;
    --tinta-3: #8b979e;

    --azul: #59b4d8;
    --azul-2: #86cbe8;
    --azul-tinte: rgba(89, 180, 216, 0.09);

    --linea: rgba(233, 237, 238, 0.14);
    --linea-2: rgba(233, 237, 238, 0.26);

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.28);
  }
}

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Sin scroll-behavior smooth: rompe mediciones y no aporta nada aca. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La barra es sticky de 64px: sin esto el ancla del nav deja el titulo de la
   seccion escondido debajo. */
section[id],
#contenido { scroll-margin-top: 5rem; }

h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--azul); color: var(--papel); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: var(--r);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.85rem;
}
.saltar:focus { left: 0.5rem; top: 0.5rem; }

/* --------------------------------------------------------------- enlaces */
.enlace {
  color: var(--azul);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--rapido) var(--ease);
}
.enlace:hover { opacity: 0.7; }

/* ----------------------------------------------------------------- barra */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 64px;
  padding: 0 var(--margen);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea);
}

.barra__marca {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 20;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

.barra__nav {
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
}
.barra__nav a {
  font-size: 0.86rem;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.barra__nav a:hover {
  color: var(--tinta);
  border-bottom-color: var(--linea-2);
}

/* ------------------------------------------------------------------ hero */
.hero {
  padding: clamp(3rem, 7vw, 5.25rem) var(--margen) clamp(3.5rem, 7vw, 5.5rem);
}
/* Mismo interior que .cierre y .bloque: los tres arrancan en el mismo eje
   izquierdo. En un documento la columna del margen no se negocia. */
.hero__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.86fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

.hero__nombre {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(3rem, 8.8vw, 6.75rem);
  line-height: 0.97;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero__nombre span { display: block; }
.hero__apodo {
  color: var(--azul);
  font-weight: 500;
  font-style: italic;
  /* Descendientes de la italica: hace falta aire, si no se recorta la "y". */
  line-height: 1.06;
  padding-bottom: 0.06em;
}

.hero__bajada {
  margin-top: 1.7rem;
  max-width: 39ch;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.58;
  color: var(--tinta-2);
}

/* El hueco ocupa exactamente el alto de la columna de texto: de la altura de
   mayuscula del nombre hasta la base de los botones. Asi no queda flotando. */
.hero__retrato {
  margin: 0 0 0 auto;
  width: 100%;
  max-width: 19rem;
  display: grid;
}

.hueco {
  height: 100%;
  min-height: 21rem;
  border: 1px dashed var(--linea-2);
  border-radius: var(--r);
  background: var(--papel-2);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.hueco__texto {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--tinta-3);
  text-align: center;
}

/* --------------------------------------------------------------- botones */
.acciones {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.boton {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.78rem 1.35rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: var(--f-texto);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido) var(--ease), opacity var(--rapido) var(--ease);
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--fuerte {
  background: var(--azul);
  color: var(--papel);
  border-color: var(--azul);
}
.boton--fuerte:hover { opacity: 0.9; }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-2);
}
.boton--linea:hover { opacity: 0.75; }

.boton__nota {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--tinta-3);
}

.boton[disabled],
.boton[aria-disabled='true'] {
  cursor: not-allowed;
  color: var(--tinta-3);
  border-style: dashed;
  border-color: var(--linea-2);
}
.boton[disabled]:hover,
.boton[aria-disabled='true']:hover {
  transform: none;
  opacity: 1;
}

/* ---------------------------------------------------------------- bandas */
.banda {
  padding: clamp(3.5rem, 7vw, 6rem) var(--margen);
  border-top: 1px solid var(--linea);
}
.banda--alterna { background: var(--papel-2); }
.banda--corta { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }

.bloque {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.bloque__titulo {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 24;
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tinta);
  padding-top: 0.28rem;
}

.prosa { max-width: var(--medida); display: grid; gap: 1.15rem; }
.prosa p { font-size: 1.05rem; color: var(--tinta-2); }
.prosa p:first-child {
  font-size: clamp(1.14rem, 1.8vw, 1.34rem);
  line-height: 1.55;
  color: var(--tinta);
}

.entradilla {
  max-width: var(--medida);
  margin-bottom: 2.1rem;
  color: var(--tinta-2);
}

.nota {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--tinta-3);
}

/* ------------------------------------------------------------ trayectoria */
.ruta { display: grid; gap: 2.6rem; }

.ruta__paso {
  /* La regla superior corta a la misma medida que el texto y que la fecha:
     un solo borde derecho para todo el bloque. */
  max-width: var(--medida);
  padding-top: 1.7rem;
  border-top: 1px solid var(--linea);
}
.ruta__paso:first-child { padding-top: 0; border-top: 0; }

/* Titulo a la izquierda, fecha pegada al borde derecho de la columna de
   contenido. El recurso clasico de curriculum, sin inventar una tercera
   columna que desbalancea la pagina. */
.ruta__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1.5rem;
  max-width: var(--medida);
}

.ruta__fecha {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--tinta-3);
  white-space: nowrap;
}

.ruta__titulo {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 32;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.ruta__rol {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--tinta-3);
}
.ruta__texto {
  margin-top: 0.95rem;
  max-width: var(--medida);
  color: var(--tinta-2);
}

.ruta__paso--pendiente .ruta__ficha {
  border-left: 2px dashed var(--linea-2);
  padding-left: 1.1rem;
}
.ruta__paso--pendiente .ruta__titulo { color: var(--tinta-3); }

.etiquetas {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.etiquetas li {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel-3);
  color: var(--tinta-2);
}

/* --------------------------------------------------------------- formacion */
.definicion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1.5rem;
  max-width: var(--medida);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.definicion__que {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 32;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.018em;
}
.definicion__donde {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--tinta-3);
}

/* ------------------------------------------------------------ instrumental */
.malla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.celda {
  grid-column: span 1;
  padding: 1.5rem 1.5rem 1.7rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--papel-3);
  transition: transform var(--medio) var(--ease);
}
.celda:hover { transform: translateY(-2px); }
.celda--ancha { grid-column: span 2; }

.celda--tinta {
  background: var(--azul-tinte);
  border-color: color-mix(in srgb, var(--azul) 26%, transparent);
}
.celda--trama {
  background-color: var(--papel-3);
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--linea) 55%, transparent) 0 1px,
    transparent 1px 11px
  );
}

.celda__titulo {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.celda__texto {
  margin-top: 0.7rem;
  max-width: 42ch;
  font-size: 0.96rem;
  color: var(--tinta-2);
}

/* ---------------------------------------------------------------- cierre */
.cierre {
  padding: clamp(4rem, 9vw, 7rem) var(--margen);
  border-top: 1px solid var(--linea);
  background: var(--papel);
}
.cierre__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: 0;
}
.cierre__titulo {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48;
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.02;
}
.cierre__texto {
  margin-top: 1.3rem;
  max-width: var(--medida);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--tinta-2);
}

.datos {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  max-width: var(--medida);
}
.datos li { display: grid; gap: 0.3rem; }
.datos__clave {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--tinta-3);
}
.datos__valor { font-size: 0.95rem; color: var(--tinta); }
[data-linkedin-hueco] {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--tinta-3);
}

/* ------------------------------------------------------------------- pie */
.pie {
  padding: 1.6rem var(--margen) 2.4rem;
  /* Mismo eje izquierdo que .bloque y .hero__interior sin envoltorio extra. */
  max-width: calc(var(--ancho) + var(--margen) * 2);
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  margin: 0 auto;
}
.pie__nombre {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 16;
  font-size: 0.95rem;
  color: var(--tinta);
}
.pie__dato { font-size: 0.85rem; color: var(--tinta-3); }

/* -------------------------------------------------------------- movimiento
   Dos mecanismos, los dos solo sobre transform y opacity:
     .entra   cascada de entrada del hero al cargar
     .revela  reveal por IntersectionObserver al entrar en pantalla
   Los dos arrancan visibles si no hay JS (guard .js en <html>). */

.js .entra {
  opacity: 0;
  transform: translateY(14px);
  animation: aparecer var(--lento) var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 90ms);
}

.js .revela {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
  transition-delay: calc(var(--j, 0) * 70ms);
}
.js .revela.visible {
  opacity: 1;
  transform: none;
}

@keyframes aparecer {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .entra,
  .js .revela {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .boton:hover,
  .celda:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* En papel no hay scroll que dispare nada: el reveal nunca puede esconder
   contenido. El JS ademas revela todo en `beforeprint`; esto es el cinturon
   por si el JS no llego a correr. */
@media print {
  .js .entra,
  .js .revela {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  :root { --gutter: 7rem; }
  .hero__interior { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); }
}

@media (max-width: 820px) {
  .hero { padding-top: clamp(2.25rem, 6vw, 3.5rem); }
  .hero__interior {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  /* En una columna el hueco vuelve al eje izquierdo: pegado a la derecha
     queda huerfano. */
  .hero__retrato { margin: 0; max-width: 13rem; }
  .hueco { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .hero__bajada { max-width: 40ch; }

  .bloque {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
  .bloque__titulo {
    padding-top: 0;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--linea);
  }

  .ruta__cabecera { gap: 0.15rem 1rem; }
  .definicion { gap: 0.15rem 1rem; }

  .malla { grid-template-columns: minmax(0, 1fr); }
  .celda--ancha { grid-column: span 1; }

  .datos { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .barra { height: 58px; gap: 0.9rem; }
  .barra__nav { gap: 1rem; }
  .barra__nav-opcional { display: none; }
  .barra__nav a { font-size: 0.8rem; }

  .acciones { gap: 0.6rem; }
  .boton { flex: 1 1 100%; justify-content: center; }
}