/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-latin-400-normal.C38fXH4l.woff2) format('woff2'), url(/_astro/inter-latin-400-normal.CyCys3Eg.woff) format('woff');
}/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-latin-500-normal.Cerq10X2.woff2) format('woff2'), url(/_astro/inter-latin-500-normal.BL9OpVg8.woff) format('woff');
}/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-latin-600-normal.LgqL8muc.woff2) format('woff2'), url(/_astro/inter-latin-600-normal.CiBQ2DWP.woff) format('woff');
}/* kladdia.com — estilos globales. Solo tokens; ningún valor hardcodeado de color o tipografía. *//* =============================================================
   KLADDIA BUILDING SKINS — Tokens para kladdia.com
   Fuente: Brain/empresa/design-system/{kladdia-tokens.css, colors_and_type.css}
   No editar valores aquí: cuando el brand evolucione, actualizar el
   design system y regenerar este fichero.
   ============================================================= */

/* Outfit (headings) — self-hosted, pesos 300–600. woff2 = subconjunto latino de los TTF del design system */
/* Inter (body) — self-hosted vía @fontsource/inter (importado en Base.astro) */
@font-face { font-family: 'Outfit'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Light.woff2') format('woff2'), url('/fonts/Outfit-Light.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Regular.woff2') format('woff2'), url('/fonts/Outfit-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Outfit-Medium.woff2') format('woff2'), url('/fonts/Outfit-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/Outfit-SemiBold.woff2') format('woff2'), url('/fonts/Outfit-SemiBold.ttf') format('truetype'); }

/* =============================================================
   KLADDIA BUILDING SKINS — Design Tokens
   Brand Guidelines v1.0 · Abril 2026
   Usar este ficheiro como fonte única de verdade para todos
   os projectos digitais Kladdia.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     CORES — Paleta principal
     Regra de proporções: 60% Ink / 15% Sand+Shell / 15% Steel / 10% Warm
     ----------------------------------------------------------- */

  /* Primário */
  --color-ink:        #0D1B2A;   /* Ink Blue — fundos principais, headers, corpo */
  --color-ink-rgb:    13, 27, 42;

  /* Acento funcional */
  --color-steel:      #415A77;   /* Steel — links, CTAs, bordas activas */
  --color-steel-rgb:  65, 90, 119;

  /* Secundário / texto de apoio */
  --color-fog:        #778DA9;   /* Fog — subtítulos, texto secundário, placeholders */
  --color-fog-rgb:    119, 141, 169;

  /* Equilíbrio de calor */
  --color-warm:       #9A8C7E;   /* Warm Grey — suaviza composições frias, notas */
  --color-warm-rgb:   154, 140, 126;

  /* Fundos claros */
  --color-sand:       #E0DDD5;   /* Sand — separadores, cards, fundo alternativo */
  --color-sand-rgb:   224, 221, 213;

  --color-shell:      #F0EDE8;   /* Shell — fundo de página suave */
  --color-shell-rgb:  240, 237, 232;

  /* Branco puro */
  --color-white:      #FFFFFF;
  --color-white-rgb:  255, 255, 255;

  /* -----------------------------------------------------------
     CORES — Semânticas (estados do sistema)
     ----------------------------------------------------------- */
  --color-success:    #2E7D32;   /* Verde — estados positivos, confirmação */
  --color-error:      #C62828;   /* Vermelho — estados negativos, alertas */
  --color-warning:    #C9952F;   /* Âmbar sereno — avisos sem alarmismo */
  --color-warning-rgb: 201, 149, 47;

  /* Aliases RAG (status reporting — obras, dashboards, informes) */
  --color-rag-green:  var(--color-success);
  --color-rag-yellow: var(--color-warning);
  --color-rag-red:    var(--color-error);

  /* -----------------------------------------------------------
     CORES — Sobreposições e opacidades utilitárias
     ----------------------------------------------------------- */
  --color-ink-overlay-80:   rgba(13, 27, 42, 0.80);
  --color-ink-overlay-60:   rgba(13, 27, 42, 0.60);
  --color-ink-overlay-40:   rgba(13, 27, 42, 0.40);
  --color-white-overlay-90: rgba(255, 255, 255, 0.90);
  --color-white-overlay-60: rgba(255, 255, 255, 0.60);
  --color-white-overlay-30: rgba(255, 255, 255, 0.30);
  --color-steel-overlay-35: rgba(65, 90, 119, 0.35);

  /* -----------------------------------------------------------
     TIPOGRAFIA — Famílias
     Instalar via Google Fonts:
       Outfit → fonts.google.com/specimen/Outfit
       Inter  → fonts.google.com/specimen/Inter
     Fallback: Calibri (sistema)
     ----------------------------------------------------------- */
  --font-heading:  'Outfit', Calibri, sans-serif;
  --font-body:     'Inter', Calibri, sans-serif;
  --font-mono:     'Inter', ui-monospace, monospace;

  /* -----------------------------------------------------------
     TIPOGRAFIA — Pesos
     Regra: nunca usar Bold/Black em títulos. A marca é serena.
     ----------------------------------------------------------- */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;

  /* -----------------------------------------------------------
     TIPOGRAFIA — Escala de tamanhos
     ----------------------------------------------------------- */
  --font-size-display: 48px;   /* Logótipo / capa / hero em destaque */
  --font-size-h1:      42px;   /* Título principal de página */
  --font-size-h2:      28px;   /* Título de secção */
  --font-size-h3:      20px;   /* Subtítulo / lead */
  --font-size-body-lg: 18px;   /* Intro / destaque de corpo */
  --font-size-body:    16px;   /* Corpo de texto padrão */
  --font-size-body-sm: 14px;   /* Descrições, labels de formulário */
  --font-size-small:   12px;   /* Notas, timestamps, metadados */
  --font-size-label:   10px;   /* Labels em maiúsculas com letter-spacing */

  /* -----------------------------------------------------------
     TIPOGRAFIA — Alturas de linha
     ----------------------------------------------------------- */
  --line-height-tight:   1.2;   /* Títulos grandes display */
  --line-height-heading: 1.3;   /* H1–H2 */
  --line-height-sub:     1.4;   /* H3 */
  --line-height-body:    1.7;   /* Corpo de texto */
  --line-height-compact: 1.5;   /* Texto pequeno / metadados */

  /* -----------------------------------------------------------
     TIPOGRAFIA — Espaçamento entre letras
     ----------------------------------------------------------- */
  --letter-spacing-logo:    12px;  /* Logótipo principal "KLADDIA" */
  --letter-spacing-sub:      6px;  /* "BUILDING SKINS" no logo */
  --letter-spacing-label:    4px;  /* Labels em caps pequenas */
  --letter-spacing-micro:    2px;  /* Micro labels / badges */
  --letter-spacing-normal:   0px;  /* Corpo de texto */

  /* -----------------------------------------------------------
     ESPAÇAMENTOS — Escala base 4px
     ----------------------------------------------------------- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* -----------------------------------------------------------
     BORDAS — Raio
     ----------------------------------------------------------- */
  --radius-sm:   6px;    /* Badges, tags pequenas */
  --radius-md:  10px;    /* Cards, inputs */
  --radius-lg:  12px;    /* Cards principais, painéis */
  --radius-full: 9999px; /* Pills, avatares */

  /* -----------------------------------------------------------
     BORDAS — Largura
     ----------------------------------------------------------- */
  --border-thin:   1px;
  --border-normal: 2px;
  --border-accent: 4px;  /* Borda de destaque / indicador activo */

  /* -----------------------------------------------------------
     SOMBRAS — Elevação
     ----------------------------------------------------------- */
  --shadow-sm:  0 2px  8px rgba(13, 27, 42, 0.06);
  --shadow-md:  0 4px 20px rgba(13, 27, 42, 0.07);
  --shadow-lg:  0 8px 32px rgba(13, 27, 42, 0.10);

  /* -----------------------------------------------------------
     MOTION — Transições
     ----------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* -----------------------------------------------------------
     LOGO — Tamanhos mínimos
     Regra: nunca usar abaixo destes valores
     ----------------------------------------------------------- */
  --logo-min-digital:   120px;  /* Logo completo — digital */
  --logo-min-print:      30mm;  /* Logo completo — impressão */
  --symbol-min-digital:  48px;  /* Só símbolo — digital */
  --symbol-min-print:    12mm;  /* Só símbolo — impressão */

  /* -----------------------------------------------------------
     LAYOUT — Breakpoints (referência em comentário)
     mobile:  < 768px
     tablet:  768px – 1024px
     desktop: > 1024px
     wide:    > 1280px
     ----------------------------------------------------------- */
  --container-max:   1100px;
  --container-wide:  1280px;
  --gutter:            40px;
  --gutter-mobile:     20px;
}


/* =============================================================
   CLASSES UTILITÁRIAS — Background
   ============================================================= */
.bg-ink    { background-color: var(--color-ink); }
.bg-steel  { background-color: var(--color-steel); }
.bg-fog    { background-color: var(--color-fog); }
.bg-warm   { background-color: var(--color-warm); }
.bg-sand   { background-color: var(--color-sand); }
.bg-shell  { background-color: var(--color-shell); }
.bg-white  { background-color: var(--color-white); }

/* =============================================================
   CLASSES UTILITÁRIAS — Texto
   ============================================================= */
.text-ink    { color: var(--color-ink); }
.text-steel  { color: var(--color-steel); }
.text-fog    { color: var(--color-fog); }
.text-warm   { color: var(--color-warm); }
.text-white  { color: var(--color-white); }

/* =============================================================
   CLASSES UTILITÁRIAS — Tipografia
   ============================================================= */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

.text-display { font-family: var(--font-heading); font-size: var(--font-size-display); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-logo); }
.text-h1      { font-family: var(--font-heading); font-size: var(--font-size-h1);      font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); }
.text-h2      { font-family: var(--font-heading); font-size: var(--font-size-h2);      font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); }
.text-h3      { font-family: var(--font-heading); font-size: var(--font-size-h3);      font-weight: var(--font-weight-medium);  line-height: var(--line-height-sub); }
.text-body    { font-family: var(--font-body);    font-size: var(--font-size-body);    font-weight: var(--font-weight-regular); line-height: var(--line-height-body); }
.text-small   { font-family: var(--font-body);    font-size: var(--font-size-small);   font-weight: var(--font-weight-regular); line-height: var(--line-height-compact); }
.text-label   { font-family: var(--font-body);    font-size: var(--font-size-label);   font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }

/* ============ Enhanced layer (colors_and_type.css) ============ */
:root {
  /* --------- SHORT ALIASES — Typography weights --------- */
  --fw-light:    var(--font-weight-light);
  --fw-regular:  var(--font-weight-regular);
  --fw-medium:   var(--font-weight-medium);
  --fw-semibold: var(--font-weight-semibold);

  /* --------- SHORT ALIASES — Font sizes --------- */
  --fs-display: var(--font-size-display);
  --fs-h1:      var(--font-size-h1);
  --fs-h2:      var(--font-size-h2);
  --fs-h3:      var(--font-size-h3);
  --fs-body-lg: var(--font-size-body-lg);
  --fs-body:    var(--font-size-body);
  --fs-body-sm: var(--font-size-body-sm);
  --fs-small:   var(--font-size-small);
  --fs-label:   var(--font-size-label);

  /* --------- SHORT ALIASES — Line heights --------- */
  --lh-tight:   var(--line-height-tight);
  --lh-heading: var(--line-height-heading);
  --lh-sub:     var(--line-height-sub);
  --lh-compact: var(--line-height-compact);
  --lh-body:    var(--line-height-body);

  /* --------- SHORT ALIASES — Letter spacing --------- */
  --ls-logo:   var(--letter-spacing-logo);
  --ls-sub:    var(--letter-spacing-sub);
  --ls-label:  var(--letter-spacing-label);
  --ls-micro:  var(--letter-spacing-micro);
  --ls-normal: var(--letter-spacing-normal);

  /* --------- SHORT ALIASES — Transitions --------- */
  --t-fast:   var(--transition-fast);
  --t-normal: var(--transition-normal);
  --t-slow:   var(--transition-slow);

  /* --------- SHORT ALIASES — Overlays --------- */
  --ink-80:   var(--color-ink-overlay-80);
  --ink-60:   var(--color-ink-overlay-60);
  --ink-40:   var(--color-ink-overlay-40);
  --white-90: var(--color-white-overlay-90);
  --white-60: var(--color-white-overlay-60);
  --white-30: var(--color-white-overlay-30);
  --steel-35: var(--color-steel-overlay-35);

  /* --------- SEMANTIC LAYER — Role-based tokens --------- */
  --fg-1:     var(--color-ink);
  --fg-2:     var(--color-steel);
  --fg-3:     var(--color-fog);
  --fg-warm:  var(--color-warm);
  --fg-on-dark-1: var(--color-white);
  --fg-on-dark-2: var(--color-fog);

  --bg-page:  var(--color-shell);
  --bg-card:  var(--color-white);
  --bg-alt:   var(--color-sand);
  --bg-dark:  var(--color-ink);

  --border-soft:   var(--color-sand);
  --border-strong: var(--color-ink);
  --link: var(--color-steel);
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================= */
html { color: var(--fg-1); background: var(--bg-page); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: var(--fw-regular); color: var(--fg-1); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-sub); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-body-lg); line-height: var(--lh-sub); font-weight: var(--fw-medium); }

p { line-height: var(--lh-body); }
small { font-size: var(--fs-small); line-height: var(--lh-compact); color: var(--fg-3); }

a { color: var(--link); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--color-ink); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: .95em; }

hr { border: 0; border-top: 1px solid var(--border-soft); }

/* --------- Type utility classes --------- */
.text-display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
}
.text-h1   { font: var(--fw-regular) var(--fs-h1)/var(--lh-heading) var(--font-heading); }
.text-h2   { font: var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-heading); }
.text-h3   { font: var(--fw-medium) var(--fs-h3)/var(--lh-sub) var(--font-heading); }
.text-body-lg { font: var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-body); }
.text-body    { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); }
.text-body-sm { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-body); }
.text-small   { font: var(--fw-regular) var(--fs-small)/var(--lh-compact) var(--font-body); }
.text-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-compact);
}

/* --------- BG utilities (enhanced — auto text color) --------- */
.bg-ink   { background: var(--color-ink); color: var(--color-white); }
.bg-steel { background: var(--color-steel); color: var(--color-white); }
.bg-sand  { background: var(--color-sand); }
.bg-shell { background: var(--color-shell); }
.bg-white { background: var(--color-white); }

.text-ink   { color: var(--color-ink); }
.text-steel { color: var(--color-steel); }
.text-fog   { color: var(--color-fog); }
.text-warm  { color: var(--color-warm); }
.text-white { color: var(--color-white); }

/* =============================================================
   EXTENSIÓN WEB — kladdia.com (revisión 27/09/2026)
   Tokens propuestos para el design system, pendientes de aprobación.
   No sustituyen a los anteriores: los amplían para scroll y tipografía fluida.
   ============================================================= */
:root {
  /* Motion — reveals y scroll */
  --duration-reveal: 700ms;                  /* aparición de elementos al entrar en pantalla */
  --duration-reveal-long: 1100ms;            /* máscaras de imagen y zoom interior */
  --ease-out: cubic-bezier(.2, .7, .1, 1);   /* salida suave, sin rebote */
  --reveal-distance: 16px;                   /* desplazamiento vertical del fade */
  --reveal-distance-mobile: 8px;
  --stagger-step: 90ms;                      /* retardo entre elementos hermanos */
  --parallax-max: 40px;                      /* desplazamiento máximo de imagen (solo desktop) */
  --count-duration: 1400ms;                  /* contadores de cifras */

  /* Header */
  --header-h: 72px;
  --header-h-compact: 60px;

  /* Tipografía fluida (mínimo = escala actual en mobile) */
  --fs-display-fluid: clamp(40px, 3.2vw + 20px, 72px);
  --fs-title-fluid:   clamp(28px, 2vw + 16px, 48px);
  --fs-subtitle-fluid: clamp(20px, 1vw + 14px, 30px);

  /* Ritmo vertical */
  --section-space: clamp(64px, 6vw + 24px, 128px);
}
/* =============================================================
   MOTION — kladdia.com
   Reglas:
   - Solo se animan transform, opacity y clip-path (cero CLS).
   - Todo estado oculto depende de .js y de prefers-reduced-motion: no-preference.
     Sin JS, o con reduced-motion, el contenido está visible y estático.
   - Reveals: por tiempo, disparados al entrar en pantalla (IntersectionObserver en motion.ts).
   - Progreso: ligado al scroll (animation-timeline) solo donde el progreso aporta lectura
     (diagrama, barra de fases, parallax). Sin soporte → estado final o reveal por IO.
   ============================================================= */

@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
@keyframes curtain-failsafe { to { transform: scaleY(0); } }
@keyframes k-curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes k-fade-up { from { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); } to { opacity: 1; transform: none; } }
@keyframes k-parallax { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--parallax-max), 0); } }
@keyframes k-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes k-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 767px) {
  :root { --reveal-distance: var(--reveal-distance-mobile); --stagger-step: 0ms; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Reveals por tiempo ---------- */
  .js [data-reveal] {
    transition:
      opacity var(--duration-reveal) var(--ease-out),
      transform var(--duration-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger-step));
  }
  .js [data-reveal="fade"]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); }

  /* Máscara vertical: una cortina del color del fondo se recoge hacia abajo y la imagen se asienta
     desde un 6 % de zoom. La imagen está pintada desde el principio (no retrasa el LCP). */
  .js [data-reveal="mask"]::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--curtain, var(--bg-page)); transform-origin: bottom center; transform: scaleY(0);
    transition: transform var(--duration-reveal-long) var(--ease-out) calc(var(--i, 0) * var(--stagger-step));
  }
  .js [data-reveal="mask"]:not(.is-in)::after { transform: scaleY(1); }
  .js [data-reveal="mask"] img {
    transition: filter var(--t-slow), transform var(--duration-reveal-long) var(--ease-out);
    transition-delay: 0ms, calc(var(--i, 0) * var(--stagger-step));
  }
  .js [data-reveal="mask"]:not(.is-in) img { transform: scale(1.06); }

  /* Línea que se dibuja de izquierda a derecha */
  .js [data-reveal="draw"] { transform-origin: left center; }
  .js [data-reveal="draw"]:not(.is-in) { transform: scaleX(0); }

  /* Etiquetas numeradas "01 · …": el texto aparece y la línea se traza después */
  .js .label-num[data-reveal]::after { transform-origin: left center; transition: transform var(--duration-reveal) var(--ease-out) 250ms; }
  .js .label-num[data-reveal]:not(.is-in)::after { transform: scaleX(0); }

  /* Failsafe: si motion.ts no llega a ejecutarse, todo aparece a los 3 s */
  .js:not(.motion-ready) [data-reveal]:not(.is-in) { animation: reveal-failsafe 1ms 3s forwards; }
  .js:not(.motion-ready) [data-reveal="mask"]:not(.is-in)::after { animation: curtain-failsafe 1ms 3s forwards; }

  /* ---------- 2. Carga del hero (animación CSS; sin JS la página queda estática) ---------- */
  .js .hero-curtain { animation: k-curtain var(--duration-reveal-long) var(--ease-out) both; }
  .js .load-fade { animation: k-fade-up var(--duration-reveal) var(--ease-out) both; animation-delay: var(--delay, 0ms); }

  /* ---------- 3. Progreso ligado al scroll ---------- */
  @supports (animation-timeline: view()) {
    @media (min-width: 1025px) {
      /* Parallax contenido de la imagen del hero: la imagen baja 40 px mientras el hero sale */
      .js .parallax { animation: k-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    }
  }
}

/* Imagen con parallax: 40 px de reserva arriba para que nunca aparezca un hueco */
.parallax { top: calc(-1 * var(--parallax-max)) !important; height: calc(100% + var(--parallax-max)) !important; }
@media (max-width: 1024px) { .parallax { top: 0 !important; height: 100% !important; } }

/* ---------- 4. Transiciones entre páginas (View Transitions, sin JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
  ::view-transition-group(*.proyecto) { animation-duration: 550ms; animation-timing-function: var(--ease-out); }
  ::view-transition-old(*.proyecto), ::view-transition-new(*.proyecto) { height: 100%; object-fit: cover; overflow: hidden; }
}

/* ---------- 5. Excepción propuesta (desactivada): zoom dentro de la máscara en hover ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html[data-hover-zoom] a:hover .frame img, html[data-hover-zoom] a:focus-visible .frame img {
    transform: scale(1.035);
    transition: filter var(--t-slow), transform var(--duration-reveal) var(--ease-out);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; background: var(--bg-page); color: var(--fg-1); }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-steel); outline-offset: 3px;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--color-steel); color: var(--color-white); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-max); }
.section { padding-block: var(--section-space); }
.section--tight { padding-block: var(--space-16); }
.on-dark { background: var(--bg-dark); color: var(--fg-on-dark-1); --curtain: var(--bg-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--fg-on-dark-1); }
.on-dark p { color: var(--white-90); }
.on-dark a { color: var(--fg-on-dark-1); }
.on-dark a:hover { color: var(--fg-on-dark-2); }
.on-dark ::selection { background: var(--color-white); color: var(--color-ink); }
.grid { display: grid; gap: var(--space-10); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.stack > * + * { margin-top: var(--space-6); }
.stack-lg > * + * { margin-top: var(--space-8); }
.measure { max-width: 62ch; }
.rule { border: 0; border-top: 1px solid var(--border-soft); margin: 0; }
.on-dark .rule { border-color: var(--white-30); }

/* ---------- Tipografía editorial ---------- */
.display { font: var(--fw-light) var(--fs-display-fluid)/1.08 var(--font-heading); letter-spacing: -0.015em; }
.title { font: var(--fw-light) var(--fs-title-fluid)/1.18 var(--font-heading); letter-spacing: -0.01em; }
.subtitle { font: var(--fw-light) var(--fs-subtitle-fluid)/var(--lh-heading) var(--font-heading); }
.lead { font: var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-body); }
.lead-heading { font: var(--fw-light) var(--fs-h3)/var(--lh-sub) var(--font-heading); }
.muted { color: var(--fg-2); }
.on-dark .muted { color: var(--fg-on-dark-2); }
.prose p + p { margin-top: var(--space-5); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }

/* Etiqueta numerada de sección — firma de marca: "01 · Título" */
.label-num {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font: var(--fw-medium) var(--fs-small)/1 var(--font-heading);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2);
  margin-bottom: var(--space-6);
}
.label-num::after { content: ''; width: 40px; height: 1px; background: currentColor; opacity: .5; flex: none; }
@media (max-width: 767px) { .label-num { flex-wrap: wrap; row-gap: var(--space-2); gap: var(--space-2); letter-spacing: var(--ls-micro); } .label-num::after { display: none; } }
.on-dark .label-num { color: var(--fg-on-dark-2); }
.eyebrow {
  font: var(--fw-medium) var(--fs-label)/1 var(--font-heading);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2);
}
.on-dark .eyebrow { color: var(--fg-on-dark-2); }

/* ---------- Botones (radio 0 — firma) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-8); border-radius: 0; border: 1px solid transparent;
  font: var(--fw-medium) var(--fs-body-sm)/1 var(--font-heading); letter-spacing: var(--ls-micro); text-transform: uppercase;
  text-decoration: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-primary { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.btn-primary:hover { background: var(--color-steel); border-color: var(--color-steel); color: var(--color-white); }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-ink); color: var(--color-white); }
.on-dark .btn-primary { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); }
.on-dark .btn-primary:hover { background: var(--color-sand); border-color: var(--color-sand); color: var(--color-ink); }
.on-dark .btn-ghost { color: var(--color-white); border-color: var(--white-60); }
.on-dark .btn-ghost:hover { border-color: var(--color-white); background: var(--white-90); color: var(--color-ink); }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.link-more {
  display: inline-block; padding-bottom: 2px; border-bottom: 1px solid currentColor;
  font: var(--fw-medium) var(--fs-body-sm)/1.4 var(--font-heading); letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--fg-1); transition: color var(--t-fast), border-color var(--t-fast);
}
.link-more:hover { color: var(--fg-2); }
.on-dark .link-more { color: var(--color-white); }
.on-dark .link-more:hover { color: var(--fg-on-dark-2); }

/* ---------- Cajetín (title block de plano) ---------- */
.cajetin {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--border-soft); border-left: 0;
}
.cajetin > div { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--border-soft); border-top: 1px solid var(--border-soft); margin-top: -1px; }
.cajetin dt { font: var(--fw-medium) var(--fs-label)/1.4 var(--font-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2); }
.cajetin dd { margin: var(--space-1) 0 0; font: var(--fw-regular) var(--fs-body-sm)/var(--lh-compact) var(--font-body); color: var(--fg-1); overflow-wrap: anywhere; }
.on-dark .cajetin, .on-dark .cajetin > div { border-color: var(--white-30); }
.on-dark .cajetin dt { color: var(--fg-on-dark-2); }
.on-dark .cajetin dd { color: var(--color-white); }
.cajetin--stack { grid-template-columns: 1fr; border-left: 1px solid var(--border-soft); }
.cajetin--stack > div { border-left: 0; }
.on-dark .cajetin--stack { border-color: var(--white-30); }

/* ---------- Media ---------- */
.frame { display: block; position: relative; overflow: hidden; background: var(--color-sand); }
.frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: filter var(--t-slow); }
.frame--3-2 { aspect-ratio: 3 / 2; }
.frame--4-3 { aspect-ratio: 4 / 3; }
.frame--16-9 { aspect-ratio: 16 / 9; }
a:hover .frame img, a:focus-visible .frame img { filter: saturate(1); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-delay: 0ms !important; }
}

/* ---------- Formularios ---------- */
.field { display: grid; gap: var(--space-2); }
.field label { font: var(--fw-medium) var(--fs-label)/1.4 var(--font-heading); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-2); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-sand); border-radius: var(--radius-md);
  background: var(--color-white); color: var(--fg-1); font: var(--fw-regular) var(--fs-body)/1.5 var(--font-body);
  transition: border-color var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-steel); outline: none; }
.field textarea { min-height: 160px; resize: vertical; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
}
@media (max-width: 767px) {
  .container { padding-inline: var(--gutter-mobile); }
  .section { padding-block: var(--space-16); }
  .section--tight { padding-block: var(--space-12); }
  .grid { gap: var(--space-8); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.logo[data-astro-cid-f7espo7c] {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--h) * .38);
  color: currentColor;
  line-height: 1;
  white-space: nowrap;
}

.logo__icon[data-astro-cid-f7espo7c] {
  height: var(--h);
  width: auto;
  flex: none;
}

.logo__word[data-astro-cid-f7espo7c] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--h) * .14);
}

.logo__name[data-astro-cid-f7espo7c] {
  font: var(--fw-regular) calc(var(--h) * .56)/1 var(--font-heading);
  letter-spacing: .3em;
}

.logo__sub[data-astro-cid-f7espo7c] {
  font: 300 calc(var(--h) * .24)/1 var(--font-body);
  letter-spacing: .34em;
  opacity: .75;
}
.hdr[data-astro-cid-nen7h5rs] {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  pointer-events: none;
  view-transition-name: site-header;
  background: none;
}

.hdr[data-astro-cid-nen7h5rs]:before, .hdr[data-astro-cid-nen7h5rs]:after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: top;
  z-index: -1;
  border-bottom: 1px solid var(--white-30);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.hdr[data-astro-cid-nen7h5rs]:before {
  background: var(--color-ink);
}

.hdr[data-astro-cid-nen7h5rs]:after {
  background: var(--ink-80);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
}

.hdr__in[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: var(--header-h);
  pointer-events: auto;
  transition: transform var(--t-slow);
}

.js .hdr--over[data-astro-cid-nen7h5rs]:not(.is-scrolled):not(.is-open):before {
  opacity: 0;
}

.js .hdr--over[data-astro-cid-nen7h5rs]:not(.is-scrolled):not(.is-open):before, .js .hdr--over[data-astro-cid-nen7h5rs]:not(.is-scrolled):not(.is-open):after {
  border-bottom-color: #0000;
}

.hdr[data-astro-cid-nen7h5rs].is-scrolled:before {
  opacity: 0;
}

.hdr[data-astro-cid-nen7h5rs].is-scrolled:after {
  opacity: 1;
}

.hdr[data-astro-cid-nen7h5rs].is-scrolled:before, .hdr[data-astro-cid-nen7h5rs].is-scrolled:after {
  transform: scaleY(.833333);
}

.hdr[data-astro-cid-nen7h5rs].is-scrolled .hdr__in[data-astro-cid-nen7h5rs] {
  transform: translate3d(0, calc((var(--header-h-compact) - var(--header-h)) / 2), 0);
}

.hdr[data-astro-cid-nen7h5rs].is-open:before {
  opacity: 1;
}

.hdr__logo[data-astro-cid-nen7h5rs] {
  color: var(--color-white);
  min-width: var(--logo-min-digital);
}

.hdr__logo[data-astro-cid-nen7h5rs]:hover {
  color: var(--color-white);
}

.hdr__nav[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.hdr__nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs] {
  display: flex;
  gap: var(--space-8);
}

.hdr__nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs] {
  font: var(--fw-regular) var(--fs-body-sm)/1 var(--font-heading);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--white-90);
  padding-block: var(--space-2);
  border-bottom: 1px solid #0000;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.hdr__nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:hover {
  color: var(--color-white);
}

.hdr__nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs][aria-current="page"] {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.hdr__cta[data-astro-cid-nen7h5rs] {
  min-height: 40px;
  padding-inline: var(--space-5);
}

.hdr__toggle[data-astro-cid-nen7h5rs] {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  align-items: center;
}

.hdr__bar[data-astro-cid-nen7h5rs] {
  width: 24px;
  height: 1px;
  background: var(--color-white);
  transition: transform var(--t-normal);
}

.sr-only[data-astro-cid-nen7h5rs] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (width <= 1024px) {
  .hdr__toggle[data-astro-cid-nen7h5rs] {
    display: flex;
  }

  .hdr__nav[data-astro-cid-nen7h5rs] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-6) var(--gutter-mobile) var(--space-8);
    background: var(--color-ink);
    border-bottom: 1px solid var(--white-30);
  }

  .hdr[data-astro-cid-nen7h5rs].is-open .hdr__nav[data-astro-cid-nen7h5rs] {
    display: flex;
  }

  .hdr[data-astro-cid-nen7h5rs].is-scrolled .hdr__nav[data-astro-cid-nen7h5rs] {
    top: calc(100% - (var(--header-h) - var(--header-h-compact)) / 2);
  }

  .hdr__nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs] {
    flex-direction: column;
    gap: var(--space-4);
  }

  .hdr__nav[data-astro-cid-nen7h5rs] ul[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs] {
    font-size: var(--fs-body-lg);
    text-transform: none;
    letter-spacing: 0;
  }

  .hdr[data-astro-cid-nen7h5rs].is-open .hdr__bar[data-astro-cid-nen7h5rs]:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .hdr[data-astro-cid-nen7h5rs].is-open .hdr__bar[data-astro-cid-nen7h5rs]:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdr[data-astro-cid-nen7h5rs].is-scrolled:before, .hdr[data-astro-cid-nen7h5rs].is-scrolled:after, .hdr[data-astro-cid-nen7h5rs].is-scrolled .hdr__in[data-astro-cid-nen7h5rs] {
    transform: none;
  }
}
.ftr[data-astro-cid-jo6i4kqk] {
  padding-block: var(--space-16) var(--space-8);
}

.ftr__top[data-astro-cid-jo6i4kqk] {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-16);
  padding-bottom: var(--space-12);
}

.ftr__logo[data-astro-cid-jo6i4kqk] {
  display: inline-block;
  color: var(--color-white);
}

.ftr__tagline[data-astro-cid-jo6i4kqk] {
  margin-top: var(--space-6);
  max-width: 32ch;
  font: var(--fw-light) var(--fs-h3)/var(--lh-sub) var(--font-heading);
  color: var(--white-90);
}

.ftr__cols[data-astro-cid-jo6i4kqk] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.ftr__cols[data-astro-cid-jo6i4kqk] .eyebrow[data-astro-cid-jo6i4kqk] {
  margin-bottom: var(--space-4);
}

.ftr__cols[data-astro-cid-jo6i4kqk] li[data-astro-cid-jo6i4kqk] {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--white-90);
}

.ftr__cols[data-astro-cid-jo6i4kqk] li[data-astro-cid-jo6i4kqk] + li[data-astro-cid-jo6i4kqk] {
  margin-top: var(--space-1);
}

.ftr__bottom[data-astro-cid-jo6i4kqk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-6);
}

.ftr__bottom[data-astro-cid-jo6i4kqk] small[data-astro-cid-jo6i4kqk] {
  color: var(--fg-on-dark-2);
}

.ftr__social[data-astro-cid-jo6i4kqk] {
  font: var(--fw-medium) var(--fs-small)/1 var(--font-heading);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

@media (width <= 1024px) {
  .ftr__top[data-astro-cid-jo6i4kqk] {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

@media (width <= 767px) {
  .ftr__cols[data-astro-cid-jo6i4kqk] {
    grid-template-columns: 1fr;
  }

  .ftr__bottom[data-astro-cid-jo6i4kqk] {
    flex-direction: column;
    align-items: flex-start;
  }
}
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--color-ink); color: var(--color-white); }
  .skip:focus { top: var(--space-4); }