/* ============================================================
   kevin ramírez · sistema visual
   paleta y tipografía del brandbook v1.0.
   la personalidad viene de la estructura y el gesto:
   bordes rasgados, inclinaciones, garabatos y notas a mano.
   ============================================================ */

:root{
  /* paleta de marca */
  --crema:      #F9F6F1;
  --carbon:     #1F2937;
  --lavanda:    #EADFFC;
  --azul-nube:  #DDE7FF;
  --salvia:     #E4EAD9;
  --arena:      #EADCC8;

  /* un lavanda con cuerpo, solo para trazos sobre carbón y detalles finos */
  --lavanda-ink: #B79CEC;
  --lavanda-deep:#6B5AA0;

  /* derivados: bordes, sombras, texto secundario */
  --carbon-70:  rgba(31, 41, 55, .70);
  --carbon-50:  rgba(31, 41, 55, .50);
  --carbon-18:  rgba(31, 41, 55, .18);
  --carbon-10:  rgba(31, 41, 55, .10);
  --crema-78:   rgba(249, 246, 241, .78);
  --crema-55:   rgba(249, 246, 241, .55);
  --crema-20:   rgba(249, 246, 241, .20);

  /* tipografía */
  --serif:  "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand:   "Caveat", "Bradley Hand", cursive;

  /* ritmo */
  --wrap: 70rem;
  --gutter: clamp(1.1rem, 5vw, 4rem);
  --block: clamp(4.5rem, 10vw, 8.5rem);
  --nav-alto: 4.3rem;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background-color: var(--crema);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, .5vw + .95rem, 1.2rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
p{ margin: 0 0 1.15em; max-width: 62ch; }
strong{ font-weight: 700; }
a{ color: inherit; }

.wrap{
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow{ max-width: 46rem; }

.skip{
  position: absolute; left: -9999px;
  background: var(--carbon); color: var(--crema);
  padding: .75rem 1rem; z-index: 99;
}
.skip:focus{ left: 1rem; top: 1rem; }

:focus-visible{
  outline: 2.5px solid var(--lavanda-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible,
.hero :focus-visible,
.nav :focus-visible,
.footer :focus-visible{ outline-color: var(--lavanda-ink); }

/* ═════════════ tipografía editorial ═════════════ */

h1, .h2, h3{
  font-family: var(--serif);
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}

h1{
  font-weight: 700;
  font-size: clamp(2.1rem, min(4.6vw, 8svh), 3.5rem);
  margin: 0 0 1.5rem;
}

.h2{
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  margin: 0 0 1.6rem;
  max-width: 22ch;
}
.h2--light{ color: var(--crema); }

/* minúsculas con intención: nav, labels, botones */
.eyebrow{
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: var(--carbon-50);
  margin: 0 0 1.1rem;
}
.eyebrow--light{ color: var(--crema-55); }
.eyebrow i{ font-style: normal; color: var(--lavanda-ink); }

.lead{
  font-size: clamp(1.2rem, 1.2vw + .92rem, 1.55rem);
  line-height: 1.55;
}

.muted{ color: var(--carbon-70); }

/* el punto, derivado del kr. */
.dot{ color: var(--lavanda-ink); }

/* resaltado: la banda corta del brandbook, ahora con más presencia */
.hl{
  white-space: nowrap;
  /* marcador: la banda vive detrás del texto, así aguanta cualquier tamaño */
  background-image: linear-gradient(transparent 52%, var(--lavanda) 52%, var(--lavanda) 94%, transparent 94%);
  padding-inline: .1em;
}
/* Dentro de un párrafo la banda va más baja y más fina: marca la frase sin
   competir con el titular, que lleva el marcador entero. */
.hl--fina{
  /* estas frases son largas y tienen que poder partirse en varias líneas,
     así que aquí no vale el nowrap del marcador de titulares */
  white-space: normal;
  background-image: linear-gradient(transparent 72%, var(--lavanda) 72%, var(--lavanda) 96%, transparent 96%);
  padding-inline: .05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* sobre carbón el marcador no sirve: crema sobre lavanda no pasa de 1.4:1.
   Ahí el énfasis es un subrayado grueso. */
.hero .hl,
.section--dark .hl{
  background-image: none;
  border-bottom: .1em solid var(--lavanda-ink);
  padding-bottom: .04em;
}
.hl--dark{
  background-image: none;
  border-bottom: .1em solid var(--lavanda-ink);
}

/* palabra encerrada a mano */
.circled{ position: relative; white-space: nowrap; display: inline-block; }
.circled__ring{
  position: absolute;
  left: -10%; top: -20%;
  width: 120%; height: 142%;
  fill: none;
  stroke: var(--lavanda-ink);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: scribble 1.1s .45s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}
@keyframes scribble{ to{ stroke-dashoffset: 0; } }

/* nota: la cápsula editorial del brandbook, escrita a mano */
.note{
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  line-height: 1.22;
  color: var(--carbon-70);
  position: relative;
  max-width: 26ch;
  margin: 0;
}
.hero .note, .section--dark .note{ color: var(--crema-55); }

.arrow{
  position: absolute;
  width: 4.6rem; height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
}

/* cinta adhesiva */
.tape{
  position: absolute;
  width: 6.5rem; height: 1.7rem;
  background: rgba(234, 220, 200, .82);
  box-shadow: 0 1px 3px rgba(31,41,55,.14);
  z-index: 3;
}
.tape--tl{ top: -.8rem; left: -1.4rem; transform: rotate(-24deg); }
.tape--tr{ top: -.8rem; right: -1.4rem; transform: rotate(21deg); }
.tape--top{ top: -.85rem; left: 50%; transform: translateX(-50%) rotate(-2.4deg); }
.tape--q{ top: -.9rem; left: 12%; transform: rotate(-4deg); }

/* sello: una marca redonda, torcida, como estampada encima */
.stamp{
  position: absolute;
  top: -1.4rem; right: -1.2rem;
  z-index: 4;
  width: 5.4rem; height: 5.4rem;
  display: grid; place-items: center;
  text-align: center;
  border-radius: 50%;
  border: 2px dashed var(--carbon);
  background: var(--arena);
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--carbon);
  transform: rotate(-13deg);
}
.stamp--alt{ background: var(--azul-nube); transform: rotate(11deg); }

/* bordes rasgados entre secciones */
.edge{
  position: absolute;
  left: 0; width: 100%;
  height: clamp(2.2rem, 4.4vw, 4.4rem);
  display: block;
  pointer-events: none;
  z-index: 2;
}
.edge path{ fill: var(--crema); }
.edge--hero{ bottom: -1px; }
.edge--top{ top: -1px; }
.edge--bottom{ bottom: -1px; }
.section--dark .edge path,
.footer .edge path{ fill: var(--crema); }

/* ═════════════ nav ═════════════ */

/* Cada sección declara data-header-theme="light|dark"; el script sólo copia ese
   tema a data-theme en el header. Aquí viven los dos únicos colores posibles. */
.nav{
  /* fija, no sticky: al ser transparente no puede ocupar una franja propia
     o se vería el fondo del body por detrás, encima de cada sección */
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  background: transparent;
  --nav-ink: #1F2937;
  --nav-fondo: var(--crema);
  color: var(--nav-ink);
  transition: color .18s ease, padding .3s ease;
}
.nav[data-theme="dark"]{
  --nav-ink: #F9F6F1;
  --nav-fondo: var(--carbon);
}

/* un velo del color de abajo, para que el texto no choque con el contenido
   que pasa por debajo. Se desvanece hacia abajo: nunca se ve como una caja */
.nav::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--nav-fondo) 0%,
    color-mix(in srgb, var(--nav-fondo) 70%, transparent) 62%,
    transparent 100%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.nav.is-stuck{ padding-block: .7rem; }
.nav.is-stuck::before{ opacity: 1; }

/* al entrar a una página el color se aplica de una, sin desvanecido */
.nav.nav--instantaneo,
.nav.nav--instantaneo::before,
.nav.nav--instantaneo *{ transition: none !important; }

@media (prefers-reduced-motion: reduce){
  .nav, .nav::before, .nav *{ transition: none !important; }
}

/* el logo del footer, en PNG con transparencia. Se pinta como máscara para que
   tome el color del texto: así pasa de carbón a crema sin cambiar de archivo */
.marca{
  display: block;
  width: 3.1rem;
  aspect-ratio: 303 / 220;
  background-color: currentColor;
  -webkit-mask: url(/assets/kr.png) center / contain no-repeat;
  mask: url(/assets/kr.png) center / contain no-repeat;
}

/* el sello kr. del header: una firma reconocible. Texto serif sobre un borde
   orgánico que hereda el color del header (crema sobre oscuro, carbón sobre
   claro). Sin escala ni animaciones que muevan el layout. */
.nav__mark{
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  opacity: 1;
}
.nav__seal{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid currentColor;
  /* forma orgánica, no un círculo geométrico perfecto */
  border-radius: 48% 52% 47% 53% / 52% 48% 53% 47%;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: inherit;
  opacity: 1;
  /* rotación artesanal sutil y estable */
  transform: rotate(-2deg);
  /* ajuste óptico: el punto hace que "kr." pese a la derecha */
  padding-left: 2.5px;
}
/* hover: un velo de color, sin cambiar tamaño ni mover el layout */
.nav__mark:hover .nav__seal{
  background: color-mix(in srgb, currentColor 9%, transparent);
}
@media (max-width: 46rem){
  .nav__seal{
    width: 34px; height: 34px;
    min-width: 34px; min-height: 34px;
    font-size: 16px;
    padding-left: 2.5px;
  }
}

.nav__links{
  display: flex; align-items: center;
  gap: clamp(.9rem, 2.4vw, 2.1rem);
  font-size: .95rem;
  font-weight: 600;
}
.nav__menu{
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 2.1rem);
}
.nav__toggle{
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__toggle-lines,
.nav__toggle-lines::before,
.nav__toggle-lines::after{
  display: block;
  width: 22px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  transition: transform .18s ease;
}
.nav__toggle-lines{
  position: relative;
}
.nav__toggle-lines::before,
.nav__toggle-lines::after{
  content: "";
  position: absolute;
  left: 0;
}
.nav__toggle-lines::before{ top: -7px; }
.nav__toggle-lines::after{ top: 7px; }
.nav__links a,
.nav__name,
.nav__toggle{
  color: var(--nav-ink);
  opacity: 1;
}
.nav__links a{
  position: relative;
  text-decoration: none;
  padding-bottom: 3px;
}
/* el subrayado del brandbook, que crece desde la izquierda */
.nav__links a:not(.nav__cta)::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover:not(.nav__cta)::after{ transform: scaleX(1); }

/* activo: mismo color, se distingue por peso y subrayado lavanda */
.nav__links a[aria-current]{
  color: var(--nav-ink);
  opacity: 1;
  font-weight: 700;
}
.nav__links a[aria-current]:not(.nav__cta)::after{
  transform: scaleX(1);
  height: 2px;
  background: var(--lavanda, #EADFFC);
}

.nav__cta{
  opacity: 1 !important;
  border: 1.5px solid currentColor;
  padding: .45rem 1.15rem !important;
  border-radius: 999px;
  transition: background .25s, color .25s, transform .25s;
}
/* al pasar por encima se invierte. No se usa currentColor para el fondo:
   al cambiar también el color del texto, se pisaría a sí mismo */
.nav__cta:hover{
  background: var(--carbon);
  color: var(--crema);
  border-color: var(--carbon);
  transform: translateY(-2px);
}
.nav[data-theme="dark"] .nav__cta:hover{
  background: var(--crema);
  color: var(--carbon);
  border-color: var(--crema);
}
.nav__cta::after{ display: none; }

@media (max-width: 46rem){
  .nav{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .nav__mark{ justify-self: start; }
  .nav__links{
    justify-self: end;
    min-width: 0;
    gap: .25rem;
  }
  .nav__toggle{
    display: grid;
    place-items: center;
    order: 1;
  }
  .nav__cta{ order: 2; }
  .nav__menu{
    display: none;
    position: absolute;
    top: calc(100% - .15rem);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .45rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: var(--nav-fondo);
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--nav-ink) 22%, transparent);
  }
  .nav.menu-open .nav__menu{ display: flex; }
  .nav__menu a{
    display: block;
    min-height: 44px;
    padding: .72rem .8rem;
  }
  .nav.menu-open .nav__toggle-lines{ background: transparent; }
  .nav.menu-open .nav__toggle-lines::before{ top: 0; transform: rotate(45deg); }
  .nav.menu-open .nav__toggle-lines::after{ top: 0; transform: rotate(-45deg); }
}


/* ═════════════ hero ═════════════ */

.hero{
  position: relative;
  background: var(--carbon);
  color: var(--crema);
  /* cabe en una pantalla: svh evita el salto por la barra del navegador móvil */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-alto) + clamp(.5rem, 2vw, 1.5rem)) 0 clamp(3.5rem, 6vw, 5.5rem);
  overflow: hidden;
}

.hero__grid{
  position: relative; z-index: 3;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__text{
  position: relative;
  z-index: 4;
  /* el recorte se le viene encima por la derecha, así que el texto
     se mantiene en la mitad izquierda */
  max-width: min(38rem, 62%);
}
.hero__text p{ color: var(--crema-78); }
.hero__text .lead{ color: var(--crema); margin-bottom: 1.1rem; max-width: 28ch; }
.hero__text p:not(.lead){ font-size: 1rem; max-width: 34ch; }

.hero h1{
  color: var(--crema);
  margin-bottom: 1.2rem;
  /* los saltos del titular están puestos a mano: balance los reacomodaba
     y partía "Hola, soy Kevin." en dos */
  text-wrap: normal;
}

.hero__actions{
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: 1.8rem;
}

/* el recorte: grande, anclado abajo a la derecha, saliéndose del borde */
.hero__figure{
  position: absolute;
  right: 1.5rem;
  /* al achicarse ya no llega de arriba abajo: se centra con el bloque de texto
     en vez de quedar hundido con un hueco encima */
  top: 50%;
  transform: translateY(-48%);
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}
.hero__cut{
  position: relative;
  z-index: 2;
  /* manda el alto. Se deja aire arriba para que el pelo no toque el borde,
     y a este tamaño el recorte se muestra por debajo de su resolución nativa,
     así que se ve nítido también en pantallas 2x. */
  height: min(calc(100svh - var(--nav-alto) - 7.5rem), 40rem);
  width: auto;

  /* El desvanecido va sobre la foto misma, no sobre una caja encima suyo:
     una caja con degradado tiene bordes rectos y taparía las ondas del borde.
     Izquierda: le deja sitio al titular.
     Abajo: evita que el pantalón termine en un corte recto. */
  --fade-izq: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 12%, #000 34%);
  --fade-abajo: linear-gradient(to bottom, #000 72%, rgba(0,0,0,.5) 89%, transparent 100%);
  -webkit-mask-image: var(--fade-izq), var(--fade-abajo);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-izq), var(--fade-abajo);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* el halo a mano detrás del recorte.
   Es un arco abierto, no un círculo cerrado: la foto está desvanecida por los
   bordes, así que un trazo que le cruzara el cuerpo se transparentaría
   por encima. Este pasa solo por el fondo, alrededor de la cabeza. */
.halo{
  position: absolute;
  z-index: 1;
  left: 50%; top: -1.5%;
  width: 68%; height: auto;
  transform: translateX(-50%);
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}
.halo__ring{ stroke-width: 5; }
.halo__ring--a{ stroke: var(--lavanda-ink); opacity: .9; }
.halo__ring--b{ stroke: var(--azul-nube); opacity: .32; stroke-width: 3.5; transform: rotate(4deg); transform-origin: 50% 60%; }
.halo__ring--c{ stroke: var(--salvia); opacity: .38; stroke-width: 3.5; transform: rotate(-7deg); transform-origin: 50% 60%; }

.note--scroll{
  position: relative;
  z-index: 3;
  margin-top: 2.6rem;
  padding-left: 4.6rem;
  transform: rotate(-2deg);
}
.note--scroll .arrow{ left: 0; top: -.5rem; width: 3.9rem; }

/* garabatos flotando en el fondo del hero */
.float{
  position: absolute;
  fill: none;
  stroke: var(--crema-20);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
  pointer-events: none;
}
.float--1{ width: 4rem; top: 12%; left: 46%;  transform: rotate(16deg); }
.float--2{ width: 5.5rem; bottom: 18%; left: 3%; transform: rotate(-9deg); }
.float--3{ width: 4.2rem; top: 7%;  left: 33%;   transform: rotate(12deg); }

/* pantallas bajas (portátiles de 768px): el hero se aprieta para caber entero */
@media (min-width: 52rem) and (max-height: 860px){
  .hero{ padding-block: calc(var(--nav-alto) + .3rem) 1.8rem; }
  .hero h1{ margin-bottom: .7rem; }
  .hero__text .lead{ font-size: 1.22rem; line-height: 1.45; margin-bottom: .6rem; }
  .hero__text p:not(.lead){ font-size: .94rem; line-height: 1.6; }
  .hero__actions{ margin-top: 1.1rem; }
  .hero__actions .btn{ padding: .7rem 1.3rem; font-size: .94rem; }
  .note--scroll{ display: none; }
  .hero .eyebrow{ margin-bottom: .5rem; }
}

/* en pantallas medianas el recorte se achica antes de estorbar */
@media (max-width: 64rem){
  .hero__figure{ right: 0; }
  .hero__cut{ height: min(calc(100svh - 12rem), 30rem); }
  .hero__text{ max-width: 60%; }
  .float--1, .float--3{ display: none; }
}

/* en vertical el recorte pasa debajo del texto */
@media (max-width: 52rem){
  .hero{ min-height: 0; display: block; padding-bottom: 0; }
  /* en vertical la foto va al final: la nota de "sigue bajando" se sube
     antes, para que la onda del borde no la parta por la mitad */
  .hero__grid{ display: flex; flex-direction: column; }
  .hero__text{ order: 1; }
  .note--scroll{ order: 2; }
  .hero__figure{ order: 3; }
  .hero__text{ max-width: none; }
  .hero__text p:not(.lead){ max-width: 48ch; }
  .hero__figure{
    position: relative;
    right: auto; top: auto;
    transform: none;
    margin: 1.5rem auto -1px;
    text-align: center;
  }
  .hero__cut{
    height: min(58vh, 24rem);
    margin-inline: auto;
    /* aquí el texto va encima, no al lado: solo se desvanece por abajo,
       y antes, para no dejar una mancha sobre el crema de la onda */
    --fade-abajo: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.3) 80%, transparent 94%);
    -webkit-mask-image: var(--fade-abajo);
    mask-image: var(--fade-abajo);
  }
  .note--scroll{ margin-top: 2rem; }
  .float{ display: none; }
}

/* ═════════════ ticker ═════════════ */

.ticker-zone{
  /* recorta lo que la inclinación saca del viewport */
  overflow: hidden;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.ticker{
  padding: .85rem 0;
  background: var(--lavanda);
  border-block: 2.5px solid var(--carbon);
  overflow: hidden;
  white-space: nowrap;
  /* La banda se ensancha para que al girar no se vean las esquinas.
     Antes lo hacía con scale(), y eso emborronaba el texto: la franja está
     animada, así que el navegador la rasteriza una vez y luego la estira. */
  width: 108%;
  margin-left: -4%;
  transform: rotate(-.9deg);
}
.ticker__track{
  display: inline-flex;
  /* Se anima "left", no "transform", a propósito. Animar transform promueve
     la franja a su propia capa; el compositor la rota con filtrado y el texto
     sale borroso. Con left el texto se redibuja ya girado, y queda nítido.
     Es una tira pequeña: el repintado por fotograma es barato. */
  position: relative;
  left: 0;
  animation: slide var(--ticker-duracion, 30s) linear infinite;
}
.ticker__unit{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  padding-right: 1.6rem;
  color: var(--carbon);
  white-space: nowrap;
}
.ticker__unit i{ font-style: normal; color: var(--lavanda-deep); padding: 0 1.1rem; }

/* El recorrido es exactamente el ancho de una copia, así el salto es invisible.
   Lo calcula el script, que además clona copias hasta llenar el ancho. */
@keyframes slide{ to{ left: calc(-1 * var(--ticker-salto, 50%)); } }

/* ═════════════ secciones ═════════════ */

.section{
  position: relative;
  padding-block: var(--block);
  scroll-margin-top: 5.5rem;
}

.section__intro{
  font-size: 1.1rem;
  color: var(--carbon-70);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* — mundos — */

.mundos{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 54rem){ .mundos{ grid-template-columns: 1fr; } }

/* El cierre no es una nota al pie: ahí están los tres verbos de la marca.
   Va en carbón pleno y algo por encima del cuerpo, no en gris y más pequeño. */
.mundos__cierre{
  color: var(--carbon);
  font-size: clamp(1.08rem, .35vw + 1rem, 1.22rem);
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: .9rem;
}

/* Una frase por línea, pase lo que pase con el ancho. La sangría francesa
   mantiene alineado el texto cuando una frase se parte en dos. */
.pasos{
  list-style: none;
  margin: 0; padding: 0;
  max-width: 46ch;
  font-size: clamp(1.08rem, .35vw + 1rem, 1.22rem);
  line-height: 1.55;
}
.pasos li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
}
.pasos li:last-child{ margin-bottom: 0; }
/* el punto del kr. como viñeta */
.pasos li::before{
  content: "";
  position: absolute;
  left: .15rem; top: .62em;
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--lavanda-ink);
}
.pasos b{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.04em;
  letter-spacing: -.01em;
}

.pullquote{
  position: relative;
  margin: 0;
  background: var(--salvia);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  transform: rotate(1.6deg);
  box-shadow: 6px 6px 0 var(--carbon);
  border: 2.5px solid var(--carbon);
}
.pullquote p{
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  margin: 0;
}

.note--cards{
  margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 1rem auto;
  padding-right: 5rem;
  text-align: right;
  transform: rotate(2deg);
}
.note--cards .arrow{ right: 0; top: .2rem; }

.orbit{
  list-style: none;
  margin: 1rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.3rem;
}
.orbit__item{
  position: relative;
  padding: 1.7rem 1.4rem 1.5rem;
  border: 2.5px solid var(--carbon);
  box-shadow: 5px 5px 0 var(--carbon);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.orbit__item:nth-child(1){ transform: rotate(-1.8deg); }
.orbit__item:nth-child(2){ transform: rotate(1.4deg); }
.orbit__item:nth-child(3){ transform: rotate(-1.1deg); }
.orbit__item:nth-child(4){ transform: rotate(2deg); }
.orbit__item:hover{ transform: rotate(0deg) translate(-3px, -3px); box-shadow: 9px 9px 0 var(--carbon); }

.orbit__item--lavanda{ background: var(--lavanda); }
.orbit__item--azul{    background: var(--azul-nube); }
.orbit__item--salvia{  background: var(--salvia); }
.orbit__item--arena{   background: var(--arena); }

.orbit__num{
  position: absolute; top: .55rem; right: .8rem;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.5rem;
  color: rgba(31,41,55,.18);
}
.orbit__label{
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: .45rem;
}
.orbit__note{ display: block; font-size: .92rem; line-height: 1.5; color: var(--carbon-70); }

/* — banner: el bloque grande que anuncia lo último — */

.banner-zone{ padding-bottom: var(--block); }

.banner__kicker{
  text-align: center;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--carbon-70);
  margin-bottom: 1.2rem;
  max-width: none;
}

.banner{
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--arena);
  border: 3px solid var(--carbon);
  box-shadow: 10px 10px 0 var(--carbon);
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.2rem, 4vw, 3rem);
  transform: rotate(-.8deg);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.banner:hover{ transform: rotate(.6deg) translate(-4px, -4px); box-shadow: 15px 15px 0 var(--carbon); }

.banner__title{
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.banner__title em{
  font-style: normal;
  background: var(--lavanda);
  padding-inline: .12em;
  box-shadow: 0 0 0 3px var(--lavanda);
}
.banner__sub{
  display: block;
  max-width: 40ch;
  margin: 1.2rem auto 0;
  font-size: 1rem;
  color: var(--carbon-70);
}
.banner__go{
  display: inline-block;
  margin-top: 1.4rem;
  font-weight: 700; font-size: .95rem;
  letter-spacing: .04em;
  border-bottom: 2.5px solid var(--carbon);
  padding-bottom: 2px;
}

/* — energía — */

.section--dark{
  background: var(--carbon);
  color: var(--crema);
  padding-block: calc(var(--block) + 2rem);
}
.section--dark p{ color: var(--crema-78); }

.projects{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(2.4rem, 5vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.project{
  position: relative;
  background: var(--crema);
  color: var(--carbon);
  padding: clamp(1.9rem, 3.5vw, 2.6rem);
  border: 3px solid var(--carbon);
  box-shadow: 10px 10px 0 var(--lavanda-ink);
  transform: rotate(-1.2deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.project--reading{
  background: var(--lavanda);
  transform: rotate(1.3deg);
  box-shadow: 10px 10px 0 var(--azul-nube);
}
.project:hover{ transform: rotate(0deg) translate(-4px,-4px); box-shadow: 16px 16px 0 var(--lavanda-ink); }
.project--reading:hover{ box-shadow: 16px 16px 0 var(--azul-nube); }

.project p{ color: var(--carbon-70) !important; font-size: 1rem; }

.project__kicker{
  font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: lowercase;
  color: var(--carbon-50) !important;
  margin-bottom: .7rem;
}
.project__title{
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  margin: 0 0 .6rem;
}
.project__claim{
  font-family: var(--serif);
  font-size: 1.08rem; line-height: 1.45;
  color: var(--carbon) !important;
  margin-bottom: 1.2rem;
}
.project__link{
  display: inline-block;
  margin-top: .4rem;
  font-weight: 700; font-size: .98rem;
  text-decoration: none;
  border-bottom: 2.5px solid var(--carbon);
  padding-bottom: 2px;
  transition: opacity .2s;
}
.project__link:hover{ opacity: .6; }

/* — fotos — */

.photos{
  position: relative;
  padding-block: var(--block);
  scroll-margin-top: 5.5rem;
}

.strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(3.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(4rem, 7vw, 5.5rem);
}

.shot{
  position: relative;
  margin: 0;
  background: #fff;
  padding: .9rem .9rem 0;
  border: 2px solid var(--carbon);
  box-shadow: 8px 8px 0 var(--carbon-18);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.shot-box--1 .shot{ transform: rotate(-2.6deg); }
.shot-box--2 .shot{ transform: rotate(2.2deg) translateY(1.8rem); }
.shot-box--3 .shot{ transform: rotate(-1.4deg); }
.shot:hover{ transform: rotate(0deg) translateY(-6px); z-index: 5; }

.shot__img{
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  font-family: var(--hand); font-size: 1.15rem;
  color: var(--carbon-50);
  background:
    repeating-linear-gradient(45deg, rgba(31,41,55,.05) 0 10px, transparent 10px 20px),
    var(--azul-nube);
  overflow: hidden;
}
.shot__img img{ width: 100%; height: 100%; object-fit: cover; }

.shot figcaption{
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  padding: .55rem 0 .8rem;
  color: var(--carbon-70);
}

.note--shot{
  /* fuera del marco: la nota no debe tapar ni competir con la foto */
  max-width: none;
  margin: 0 0 1.1rem .4rem;
  font-size: 1.15rem;
  transform: rotate(-2.4deg);
  transform-origin: left bottom;
}
.shot-box--2 .note--shot{ transform: rotate(2deg); }
.shot-box--3 .note--shot{ transform: rotate(-1.4deg); }

/* — historia — */

.section--historia{ background: var(--crema); }

.timeline{
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(1.7rem, 4vw, 2.8rem);
  border-left: 2.5px dashed var(--carbon-18);
  max-width: 47rem;
}

.timeline__item{
  position: relative;
  padding-bottom: clamp(2.8rem, 6vw, 4rem);
}
.timeline__item--last{ padding-bottom: 0; }

/* el punto como ancla de cada capítulo */
.timeline__item::before{
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.7rem, 4vw, 2.8rem) - 10px);
  top: 1.5rem;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--crema);
  border: 3px solid var(--carbon);
  transition: background .3s ease, transform .3s ease;
}
.timeline__item:hover::before{ background: var(--lavanda-ink); transform: scale(1.25); }

.timeline__year{
  display: inline-block;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em;
  background: var(--azul-nube);
  border: 2px solid var(--carbon);
  padding: .1rem .65rem;
  margin-bottom: .7rem;
  transform: rotate(-1.6deg);
}
.timeline__item:nth-child(even) .timeline__year{
  background: var(--salvia);
  transform: rotate(1.5deg);
}
.timeline__item h3{
  font-weight: 700;
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  margin: 0 0 .85rem;
}
.timeline__item p{ color: var(--carbon-70); }

.big-num{
  font-family: var(--serif); font-weight: 700;
  font-size: 1.3em;
  color: var(--carbon);
  letter-spacing: -.02em;
}

.note--inline{
  margin-top: 1.2rem;
  transform: rotate(-1.4deg);
  max-width: 32ch;
}

/* — ideas: las barras gruesas — */

.section--ideas{ background: var(--lavanda); }

.ideas__intro{ max-width: 46ch; }

.bars{
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 1.1rem;
}
.bar{ display: block; }
.bar__link{
  display: block;
  background: var(--carbon);
  color: var(--crema);
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.35;
  padding: 1rem 1.4rem;
  border: 2.5px solid var(--carbon);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s;
}
.bar:nth-child(odd) .bar__link{ transform: rotate(-.5deg); }
.bar:nth-child(even) .bar__link{ transform: rotate(.45deg); }
.bar__link:hover{
  background: var(--crema);
  color: var(--carbon);
  transform: rotate(0deg) translateX(8px);
  box-shadow: -7px 0 0 var(--lavanda-deep);
}

.ideas__more{ margin-top: clamp(2.8rem, 5vw, 3.8rem); }

/* — contacto — */

.section--contacto{ text-align: center; }
.section--contacto p{ margin-inline: auto; }
.section--contacto .h2{ margin-inline: auto; }

.contacto__cta{
  position: relative;
  display: inline-flex; align-items: center; gap: 1.5rem;
  margin-top: 2rem;
}
.note--contacto{
  padding-left: 4.4rem;
  text-align: left;
  transform: rotate(-3deg);
  max-width: 13ch;
}
.note--contacto .arrow{ left: -.6rem; top: -.4rem; }

@media (max-width: 34rem){
  .contacto__cta{ flex-direction: column; gap: 1.2rem; }
  .note--contacto{ padding-left: 0; }
  .note--contacto .arrow{ display: none; }
}

.social{
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.7rem;
  margin: 3rem 0 0; padding: 0;
  font-size: .95rem; font-weight: 600;
}
.social a{
  text-decoration: none;
  color: var(--carbon-70);
  border-bottom: 2px solid var(--carbon-18);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s, transform .2s;
  display: inline-block;
}
.social a:hover{ color: var(--carbon); border-bottom-color: var(--lavanda-ink); transform: translateY(-2px); }

/* ═════════════ botones ═════════════ */

.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans);
  font-size: 1rem; font-weight: 700;
  text-decoration: none;
  padding: .85rem 1.6rem;
  border: 2.5px solid var(--carbon);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s;
}
.btn:hover{ transform: translate(-3px,-3px); }
.btn:active{ transform: translate(0,0); }

.btn--solid{
  background: var(--carbon); color: var(--crema);
  box-shadow: 5px 5px 0 var(--lavanda-ink);
}
.btn--solid:hover{ box-shadow: 9px 9px 0 var(--lavanda-ink); }

.btn--crema{
  background: var(--crema); color: var(--carbon);
  border-color: var(--crema);
  box-shadow: 5px 5px 0 var(--lavanda-ink);
}
.btn--crema:hover{ box-shadow: 9px 9px 0 var(--lavanda-ink); }

.btn--outline-light{
  background: transparent; color: var(--crema);
  border-color: var(--crema-55);
}
.btn--outline-light:hover{ border-color: var(--crema); background: rgba(249,246,241,.08); }

.btn--big{ font-size: 1.1rem; padding: 1.05rem 2.1rem; }

/* ═════════════ footer ═════════════ */

.footer{
  position: relative;
  background: var(--carbon);
  color: var(--crema);
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.footer__inner{
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between;
  gap: 1.8rem;
}
.footer__name{
  font-family: var(--serif); font-weight: 700;
  font-size: 1.7rem;
  margin: 0 0 .2rem;
}
.footer__tag{ font-size: .9rem; color: var(--crema-55); margin: 0; }
.footer__tag i{ font-style: normal; color: var(--lavanda-ink); }
.footer__note{
  font-family: var(--hand); font-weight: 600;
  font-size: 1.3rem;
  color: var(--crema-55);
  margin: 0; max-width: 22ch;
}
.footer__mark{
  margin: 0;
  transform: rotate(-4deg);
}
.footer__mark .marca{ width: 4.2rem; }

/* manchas: el eco del splatter, en lavanda y sin estridencia */
.blobs{ position: absolute; inset: auto 0 0 0; height: 9rem; pointer-events: none; z-index: 1; }
.blob{
  position: absolute;
  border-radius: 50%;
  background: var(--lavanda-ink);
  opacity: .16;
}
.blob--1{ width: 9rem;  height: 9rem;  left: -2.5rem; bottom: -4.5rem; }
.blob--2{ width: 4rem;  height: 4rem;  left: 8rem;    bottom: -2rem; opacity: .12; }
.blob--3{ width: 13rem; height: 13rem; right: -4rem;  bottom: -7rem; opacity: .1; }
.blob--4{ width: 2.2rem; height: 2.2rem; right: 12rem; bottom: .6rem; opacity: .14; }

/* ═════════════ entrada al scroll ═════════════ */

.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* ═════════════ accesibilidad ═════════════ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal{ opacity: 1; transform: none; }
  .circled__ring{ stroke-dashoffset: 0; }
  .ticker__track{ animation: none; }
}

@media print{
  body{ background: #fff; color: #000; }
  .nav, .ticker, .arrow, .tape, .float, .blobs, .edge, .stamp{ display: none; }
  .hero, .section--dark, .footer{ background: #fff; color: #000; }
}

/* ═════════════ ajustes finos en pantallas angostas ═════════════ */

@media (max-width: 34rem){
  /* sellos y cintas se meten hacia adentro para no empujar el ancho */
  .stamp{ top: -1.1rem; right: -.4rem; width: 4.6rem; height: 4.6rem; font-size: .92rem; }
  .tape--tr{ right: -.4rem; }
  .tape--tl{ left: -.4rem; }
  .note--shot{ top: -3rem; }
}

/* ═════════════ páginas interiores ═════════════ */

.pagehead{
  position: relative;
  background: var(--carbon);
  color: var(--crema);
  padding: calc(var(--nav-alto) + clamp(2rem, 4vw, 3.2rem)) 0 clamp(4.5rem, 8vw, 7rem);
  overflow: hidden;
}
.pagehead .wrap{ z-index: 3; }

.back{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; font-weight: 600;
  color: var(--crema-55);
  text-decoration: none;
  margin-bottom: 1.8rem;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
}
.back:hover{ color: var(--crema); border-bottom-color: var(--crema); }

.pagehead__title{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 1.2rem;
  max-width: 18ch;
}
.pagehead__lead{
  font-size: clamp(1.15rem, 1vw + .9rem, 1.4rem);
  line-height: 1.55;
  color: var(--crema-78);
  max-width: 46ch;
  margin-bottom: 0;
}
.note--pagehead{
  margin-top: 2rem;
  transform: rotate(-2deg);
  color: var(--crema-55) !important;
}

/* en su propia página el bloque oscuro ya no necesita bordes rasgados arriba */
.section--proyectos{ padding-top: clamp(3rem, 6vw, 5rem); }
.section--proyectos .edge--top{ display: none; }

/* el empujón hacia la otra página */
.section--seguir{ text-align: center; }
.section--seguir p{ margin-inline: auto; margin-bottom: 1.8rem; }

/* la nav marca en qué página estás: color idéntico, subrayado lavanda */


/* ═════════════ resúmenes en la landing ═════════════ */

/* proyectos: dos tarjetas compactas que llevan a la página */
.minis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.mini{
  display: flex; flex-direction: column;
  background: var(--crema);
  color: var(--carbon);
  text-decoration: none;
  padding: clamp(1.7rem, 3vw, 2.2rem);
  border: 3px solid var(--carbon);
  box-shadow: 10px 10px 0 var(--lavanda-ink);
  transform: rotate(-1.2deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.mini--reading{
  background: var(--lavanda);
  transform: rotate(1.3deg);
  box-shadow: 10px 10px 0 var(--azul-nube);
}
.mini:hover{ transform: rotate(0deg) translate(-4px,-4px); box-shadow: 16px 16px 0 var(--lavanda-ink); }
.mini--reading:hover{ box-shadow: 16px 16px 0 var(--azul-nube); }

.mini__kicker{
  font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: lowercase;
  color: var(--carbon-50);
  margin-bottom: .6rem;
}
.mini__title{
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin-bottom: .55rem;
}
.mini__claim{
  font-family: var(--serif);
  font-size: 1.05rem; line-height: 1.45;
  margin-bottom: 1rem;
}
.mini__datos{
  font-size: .92rem;
  color: var(--carbon-70);
  margin-bottom: 1.4rem;
}
.mini__datos i{ font-style: normal; color: var(--lavanda-deep); padding: 0 .35rem; }
.mini__go{
  margin-top: auto;
  align-self: flex-start;
  font-weight: 700; font-size: .96rem;
  border-bottom: 2.5px solid var(--carbon);
  padding-bottom: 2px;
}

/* historia: resumen a la izquierda, hitos a la derecha */
.resumen{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 54rem){ .resumen{ grid-template-columns: 1fr; } }

.resumen__texto{
  font-size: clamp(1.08rem, .35vw + 1rem, 1.22rem);
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 2rem;
}

.hitos{
  list-style: none;
  margin: 0; padding: 0;
  border-left: 2.5px dashed var(--carbon-18);
  padding-left: clamp(1.3rem, 3vw, 2rem);
}
.hitos li{
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 1.05rem;
  color: var(--carbon-70);
}
.hitos li:last-child{ padding-bottom: 0; }
.hitos li::before{
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.3rem, 3vw, 2rem) - 7px);
  top: .55em;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--crema);
  border: 2.5px solid var(--carbon);
}
.hitos b{
  display: block;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--carbon);
  margin-bottom: .1rem;
}

/* cuando después de la cabecera viene otro bloque oscuro, no hay borde que
   rasgar: el oscuro continúa y se evita una franja de crema entre los dos */
.pagehead--sigue-oscuro{ padding-bottom: clamp(2rem, 4vw, 3rem); }
.section--proyectos{ padding-top: 0; }
.section--proyectos .projects{ margin-top: 0; }

/* ═════════════ página de ideas ═════════════ */

.section--ensayos{ padding-top: clamp(3rem, 6vw, 4.5rem); }

.ensayos{
  list-style: none;
  margin: 0; padding: 0;
  max-width: 48rem;
}
.ensayos > li{
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 2.5px dashed var(--carbon-18);
}
.ensayos > li:first-child{ padding-top: 0; }
.ensayos > li:last-child{ border-bottom: 0; }

.ensayo{ position: relative; }
.ensayo__temas{
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lavanda-deep);
  margin: 0 0 .55rem;
  opacity: .75;
}
.ensayo__temas i{ font-style: normal; opacity: .5; margin: 0 .15em; }
.ensayo__num{
  display: block;
  font-family: var(--sans);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .22em;
  color: var(--lavanda-deep);
  margin-bottom: .7rem;
}
.ensayo__titulo{
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -.022em;
  margin: 0 0 .9rem;
  text-wrap: balance;
}
.ensayo__bajada{
  font-size: clamp(1.05rem, .35vw + .98rem, 1.18rem);
  line-height: 1.65;
  color: var(--carbon-70);
  max-width: 54ch;
  margin-bottom: 1.2rem;
}
.ensayo__link{
  display: inline-block;
  font-weight: 700; font-size: .98rem;
  text-decoration: none;
  border-bottom: 2.5px solid var(--carbon);
  padding-bottom: 2px;
  transition: opacity .2s, transform .2s;
}
.ensayo__link:hover{ opacity: .6; transform: translateX(3px); }

/* el fondo de esta sección ya es lavanda, así que el marcador lavanda
   desaparece. Aquí la banda va en crema: sigue siendo carbón sobre claro */
.section--ideas .hl{
  background-image: linear-gradient(transparent 52%, var(--crema) 52%, var(--crema) 94%, transparent 94%);
}

/* ═══════════════════════════ página de proyectos (reestructurada) ═══════════════════════════ */

.pagehead__lead{ max-width: 50ch; }

/* — proyectos actuales: encabezado propio dentro del bloque oscuro — */
.section--proyectos{ padding-top: clamp(2.2rem, 4vw, 3.2rem); }
.section--proyectos .projects{ margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.section--proyectos .h2{ margin-bottom: 1rem; }

/* — lo que estoy empezando a pensar — */
.section--empezando{ background: var(--lavanda); }
.section--empezando .thought{ background: var(--crema); }
.thought--edu{ transform: rotate(1.2deg); margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.section--proyectos .edge--bottom path{ fill: var(--lavanda); }
.section--empezando .edge--bottom path{ fill: var(--crema); }
.thought{
  position: relative;
  background: var(--azul-nube);
  border: 2.5px solid var(--carbon);
  box-shadow: 10px 10px 0 var(--carbon-18);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  transform: rotate(-1deg);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 48rem;
}
.thought__lead{
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.4;
  margin-bottom: 1rem;
  color: var(--carbon) !important;
}
.thought p{ color: var(--carbon-70); }
.thought .note{ margin-top: 1.4rem; }

/* — proyectos que me han hecho crecer — */
.section--crecer{ background: var(--crema); }
.projects--past{ gap: clamp(2rem, 4vw, 2.8rem); }
.project--past{
  background: var(--crema);
  transform: rotate(-.6deg);
  box-shadow: 10px 10px 0 var(--lavanda-ink);
}
.project--past:nth-child(2){ transform: rotate(.7deg); box-shadow: 10px 10px 0 var(--azul-nube); }
.project--past:nth-child(3){ transform: rotate(.5deg); box-shadow: 10px 10px 0 var(--salvia); }
.project--past:nth-child(4){ transform: rotate(-.8deg); box-shadow: 10px 10px 0 var(--arena); }
.project--past:hover{
  transform: rotate(0deg) translate(-4px,-4px);
  box-shadow: 16px 16px 0 var(--lavanda-ink);
}
.project--past:nth-child(2):hover{ box-shadow: 16px 16px 0 var(--azul-nube); }
.project--past:nth-child(3):hover{ box-shadow: 16px 16px 0 var(--salvia); }
.project--past:nth-child(4):hover{ box-shadow: 16px 16px 0 var(--arena); }

/* — cosas interesantes aparte — */
.section--aparte{ background: var(--crema); }
.thought--aparte{ background: var(--arena); transform: rotate(1deg); }

/* Colombia EdTech: fondo azul nube */
.project.project--edtech{
  background: var(--azul-nube);
  transform: rotate(-1.2deg);
  box-shadow: 10px 10px 0 var(--salvia);
}
.project.project--edtech:hover{
  box-shadow: 16px 16px 0 var(--salvia);
}

/* ═══════════════════════════ fotos en timeline ═══════════════════════════ */
.timeline__photo {
  list-style: none;
  margin: clamp(1rem, 2vw, 1.8rem) auto clamp(3.5rem, 7vw, 5.5rem);
  max-width: 360px;
  position: relative;
}
.timeline__photo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.6rem;
  width: 2px;
  height: 1.6rem;
  background: var(--carbon-18, rgba(31,41,55,.18));
  transform: translateX(-50%);
}
.timeline__photo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  width: 2px;
  height: 1.6rem;
  background: var(--carbon-18, rgba(31,41,55,.18));
  transform: translateX(-50%);
}
.timeline__photo .shot{
  background: #fff;
  padding: .9rem .9rem .7rem;
  border: 2px solid var(--carbon);
  box-shadow: 8px 8px 0 var(--carbon-18);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.timeline__photo:nth-child(odd) .shot{ transform: rotate(-2.4deg); }
.timeline__photo:nth-child(even) .shot{ transform: rotate(2deg); }
.timeline__photo .shot:hover{
  transform: rotate(0deg) translateY(-6px);
  z-index: 5;
}
.timeline__photo .shot img{
  width: 100%;
  height: 340px;
  display: block;
  object-fit: cover;
  object-position: center 20%;
}
.timeline__photo .shot img[src*="primiparo"]{
  object-position: center 55%;
}
.timeline__photo .shot figcaption{
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  padding: .5rem 0 0;
  color: var(--carbon-70);
}
@media (prefers-reduced-motion: reduce) {
  .timeline__photo .shot{ transform: none !important; transition: none !important; }
  .timeline__photo .shot:hover{ transform: none !important; }
}