/*
 * Lunako — reset y escala tipográfica
 * Escala fluida por diseño: aquí no hay ni una sola media query.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  /* El hueco de la barra de scroll, siempre reservado. La entrada de la Home
     bloquea el scroll con overflow:hidden, que esconde la barra; al soltarlo
     volvía, se comía 15 px de ancho y toda la página saltaba de lado. */
  scrollbar-gutter: stable;
  /* Los anclajes internos no quedan debajo de la cabecera fija. */
  scroll-padding-top: calc(var(--lk-header) + var(--lk-admin));
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--lk-bg);
  color: var(--lk-ink);
  font-family: var(--lk-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.734;               /* 16 / 27,75 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Las pantallas de cromo oscuro son grafito de arriba abajo, no solo la
   cabecera: sin esto asoma la crema del body por debajo del contenido. */
body.lk-chrome-dark { background: var(--lk-dark); }

/* Valor de partida con sesión iniciada, para que no haya un salto entre el
   primer pintado y la primera medición. Va en el body, no en :root, porque
   motion.js escribe el valor medido como estilo en línea del propio body y
   así siempre gana al de la clase. */
body.admin-bar { --lk-admin: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --lk-admin: 46px; } }

/* El sticky de la columna de datos de la ficha muere si un ancestro tiene
   overflow:hidden. clip recorta igual y no crea contexto de scroll. */
.lk-root { position: relative; min-height: 100vh; overflow-x: clip; }

img, video, canvas, svg { display: block; max-width: 100%; }

/* El logotipo de marca es .lk-marca, no .lk-logo: esa clase ya la usaban las
   celdas de logotipos de cliente de Info, con display:flex y min-width:120px,
   y se la comían. Hereda el color del contexto con currentColor —un solo
   archivo para crema y para grafito— y su tamaño lo fijan los atributos
   width/height que calcula lk_logo(). No se le pone tamaño en CSS, o dejan de
   aplicar. */
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit; color: inherit; background: none;
  border: 0; margin: 0; padding: 0;
}
button { cursor: pointer; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--lk-accent); color: var(--lk-light); }

:focus-visible { outline: 2px solid var(--lk-accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* Objetivos táctiles nunca por debajo de 44 px.
   :where() la deja con especificidad 0: cualquier componente la sobreescribe
   con una sola clase, sin peleas de cascada. Sin :where(), `a[href]` (0,1,1)
   ganaba a `.lk-inline-target` (0,1,0) y la excepción no se aplicaba nunca. */
:where(a[href], button, [role="button"], input, textarea, summary) { min-height: 44px; }
.lk-inline-target { min-height: 0; }

.lk-skip {
  position: absolute; left: var(--lk-gutter); top: -100px; z-index: 300;
  background: var(--lk-ink); color: var(--lk-light);
  padding: 12px 18px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  transition: top var(--lk-dur-micro) var(--lk-ease);
}
.lk-skip:focus { top: 12px; }

.lk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- contenedor ---------- */

.lk-wrap { max-width: var(--lk-max); margin: 0 auto; padding-inline: var(--lk-gutter); }
.lk-section { padding-block: var(--lk-header); }

/* ---------- escala tipográfica (tabla de la sección 1) ---------- */

.lk-display   { font-family: var(--lk-font-display); font-weight: 400; font-size: var(--lk-t-display);   line-height: 1.0625; letter-spacing: -.025em; }
.lk-display--footer { font-family: var(--lk-font-display); font-weight: 400; font-size: var(--lk-t-display-f); line-height: 1; letter-spacing: -.02em; }
.lk-title     { font-family: var(--lk-font-display); font-weight: 300; font-size: var(--lk-t-page);      line-height: 1; letter-spacing: -.025em; }
.lk-title--project { font-family: var(--lk-font-display); font-weight: 250; font-size: var(--lk-t-project); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.lk-title--contact { font-family: var(--lk-font-body); font-weight: 200; font-size: var(--lk-t-contact); line-height: 1.096; letter-spacing: -.02em; }
.lk-lede      { font-family: var(--lk-font-display); font-weight: 300; font-size: var(--lk-t-lede); line-height: 1.65; letter-spacing: -.01em; }

.lk-label     { font-family: var(--lk-font-body); font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: 2.5px; text-transform: uppercase; }
.lk-eyebrow   { font-family: var(--lk-font-body); font-weight: 500; font-size: 10px; line-height: 1.2; letter-spacing: 2.5px; text-transform: uppercase; }
.lk-body      { font-family: var(--lk-font-body); font-weight: 300; font-size: 16px; line-height: 1.734; }
.lk-body--sm  { font-family: var(--lk-font-body); font-weight: 300; font-size: 14px; line-height: 1.6; }
.lk-card-title{ font-family: var(--lk-font-body); font-weight: 300; font-size: 20px; line-height: 1.15; letter-spacing: -.18px; }
.lk-card-cat  { font-family: var(--lk-font-body); font-weight: 500; font-size: 9px; line-height: 1.2; letter-spacing: 1.8px; text-transform: uppercase; }
.lk-card-strip{ font-family: var(--lk-font-display); font-weight: 425; font-size: 13.3px; line-height: 1.2; letter-spacing: .27px; }
.lk-data-label{ font-family: var(--lk-font-body); font-weight: 400; font-size: 9px; line-height: 1.2; letter-spacing: 1.8px; text-transform: uppercase; }

/* La terracota de marca en textos grandes; la oscurecida en los pequeños, que
   es donde no llegaba a AA. El antetítulo siempre es pequeño. */
.lk-accent { color: var(--lk-accent); }
.lk-eyebrow.lk-accent { color: var(--lk-accent-ink); }
.lk-measure { max-width: 65ch; }

/* ---------- enlace de texto: el filete que barre ---------- */
/* Patrón único para legales, redes, CV, categorías y conmutador de idioma. */

.lk-link {
  position: relative; display: inline-block; padding-bottom: 2px;
  min-height: 0;   /* enlace de texto en línea: no le toca el objetivo de 44 px,
                      que le rompería el interlineado del cuerpo. Los componentes
                      que además son objetivo declaran su propio alto. */
  background-image: linear-gradient(var(--lk-accent), var(--lk-accent));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size var(--lk-dur-veil) var(--lk-ease),
              color var(--lk-dur-veil) var(--lk-ease);
}
.lk-link:hover, .lk-link:focus-visible { background-size: 100% 1px; color: var(--lk-accent); }

/* ---------- entrada de página y aparición en scroll ---------- */

@keyframes lkPageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lk-main { animation: lkPageIn var(--lk-dur-page) var(--lk-ease) both; padding-top: var(--lk-header); }

[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .95s var(--lk-ease), transform .95s var(--lk-ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .19s !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

/*
 * La escala tipográfica está pensada sobre un lienzo de 1920 px, y en un móvil
 * de 390 esas medidas se quedan cortas: los rótulos caían a 9 px y los
 * antetítulos a 10. Aquí no se rediseña nada, solo se sube el suelo de lo que
 * hay que poder leer con el teléfono en la mano.
 */
@media (max-width: 900px) {
  .lk-eyebrow    { font-size: 11px; letter-spacing: 2.2px; }
  .lk-data-label { font-size: 11px; letter-spacing: 1.6px; }
  .lk-card-cat   { font-size: 10px; letter-spacing: 1.6px; }
  .lk-body       { font-size: 17px; line-height: 1.7; }
  .lk-body--sm   { font-size: 15px; }
  .lk-label      { letter-spacing: 2px; }
}