/* ==========================================================================
   OrlandoStudio™ — Design tokens & styles
   Recreado a partir del handoff de diseño (manual de marca real).
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  /* WOFF2 subseteada (latin + latin-1 + puntuación, 32 KB contra 149 KB del
     TTF); el TTF completo queda solo de respaldo. */
  src: url('assets/fonts/Geist-VariableFont_wght.woff2') format('woff2-variations'),
       url('assets/fonts/Geist-VariableFont_wght.woff2') format('woff2'),
       url('assets/fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
       url('assets/fonts/Geist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --deep: #24333A;
  --bg-dark: #2C3F47;
  --bg-dark-2: #1B272C;
  /* Navbar: variante ~20% más oscura que --deep (no el mismo valor) para que el
     header sticky se distinga por contraste de las secciones que tapa al hacer scroll,
     incluso con el blur translúcido que lo deja parcialmente transparente. */
  --nav-dark: #1B262B;
  --bg: #F3F2F3;
  --paper: #FFFFFF;
  --brand: #008358;
  --brand-2: #00A770;
  /* Verde de marca un paso más oscuro, SOLO para texto chico sobre fondo
     claro: --brand da 4,3:1 sobre --bg y no llega al 4,5:1 de WCAG AA. */
  --brand-ink: #007A52;
  --mint: #C2DCAF;
  --accent-deep: #072519; /* acento oscuro profundo del manual: la banda del hero */
  --ink: #24333A;
  --ink-dark: #F3F2F3;

  /* Alphas sobre oscuro. Todas las de texto dan ≥ 4,5:1 sobre --deep y
     --bg-dark-2 (WCAG AA). No bajar de .6 para texto. */
  --dark-text-secondary: rgba(243,242,243,.72);
  --dark-text-tertiary: rgba(243,242,243,.66);
  --dark-text-tertiary-2: rgba(243,242,243,.68);
  --dark-text-mute: rgba(243,242,243,.6);
  --dark-placeholder: rgba(243,242,243,.55);
  --dark-hairline: rgba(243,242,243,.1);
  --dark-divider: rgba(243,242,243,.12);
  --dark-border: rgba(243,242,243,.16);
  --dark-border-2: rgba(243,242,243,.2);
  --dark-border-3: rgba(243,242,243,.26);
  --dark-input-bg: rgba(243,242,243,.09);
  --dark-input-border: rgba(243,242,243,.3);
  --dark-row-hover: rgba(243,242,243,.05);

  /* Alphas sobre claro. Las de texto dan ≥ 4,5:1 sobre --bg. No bajar de
     .7 para texto (con .5 daba 2,8:1). */
  --light-text-secondary: rgba(36,51,58,.82);
  --light-text-tertiary: rgba(36,51,58,.74);
  --light-text-tertiary-2: rgba(36,51,58,.74);
  --light-text-mute: rgba(36,51,58,.7);
  --light-hairline: rgba(36,51,58,.14);
  --light-hairline-2: rgba(36,51,58,.16);

  /* Tipografía */
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radios */
  --r-pill: 999px;
  --r-lg: 26px;
  --r-card: 24px;
  --r-panel: 22px;
  --r-grid-card: 20px;
  --r-badge: 16px;
  --r-input: 12px;

  /* Easings */
  --ease-main: cubic-bezier(.16,1,.3,1);
  --ease-menu-open: cubic-bezier(.19,1,.22,1);
  --ease-menu-close: cubic-bezier(.55,0,.1,1);

  /* Layout */
  --container-max: 1320px;
  /* Alto del header sticky (14 + 44 + 14 + 1 de borde). El hero ocupa el
     resto del viewport. Si cambia el padding del header, cambiar esto. */
  --header-h: 73px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--ink-dark);
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--mint); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
dl, dd { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
abbr[title] { text-decoration: none; }
::selection { background: var(--brand-2); color: var(--bg-dark-2); }
::placeholder { color: var(--dark-placeholder); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

section[id] { scroll-margin-top: 100px; }
#contacto-focus { scroll-margin-top: 100px; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--brand-2);
  color: var(--bg-dark-2);
  padding: 12px 18px;
  border-radius: var(--r-input);
  font-weight: 600;
  transition: top .3s var(--ease-main);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
}
/* Sobre fondo claro el verde brillante no llega al 3:1 que pide WCAG para
   el anillo de foco: ahí se usa el verde oscuro de marca. */
.section-light :focus-visible,
.marquee-section :focus-visible,
.hero :focus-visible,
.about-hero :focus-visible,
.about-bts :focus-visible { outline-color: var(--brand-ink); }

/* ==========================================================================
   Efectos globales
   ========================================================================== */

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes osRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes osFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes osMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes osSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
[data-reveal].is-visible {
  animation: osRise .9s var(--ease-main) both;
}
[data-reveal-child] { opacity: 0; transform: translateY(28px); }
.is-visible [data-reveal-child] {
  animation: osRise .9s var(--ease-main) both;
}
[data-reveal-child]:nth-child(1) { animation-delay: 0s; }
[data-reveal-child]:nth-child(2) { animation-delay: .1s; }
[data-reveal-child]:nth-child(3) { animation-delay: .2s; }
[data-reveal-child]:nth-child(4) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-child] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .marquee-track, .manifesto-logo { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  /* rgba manual (no var(--nav-dark) directo) porque necesita el canal alpha
     para el efecto vidrio esmerilado del backdrop-filter de arriba. */
  background: rgba(27,38,43,.72);
  border-bottom: 1px solid rgba(243,242,243,.09);
}

.header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-dark);
  flex-shrink: 0;
}
.brand-logo { height: 26px; width: auto; display: block; }

/* Nav de escritorio: oculta por defecto (mobile-first), se activa desde 901px */
.main-nav { display: none; }
.main-nav ul { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  color: var(--dark-text-secondary);
  font-size: .9rem;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  transition: color .3s, background .3s;
  display: inline-block;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--ink-dark);
  background: rgba(243,242,243,.07);
}

.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* CTA de escritorio en el header: oculta en mobile, el menú mobile trae la suya */
.header-actions .btn-header { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-pill);
  font-weight: 640;
  transition: transform .35s var(--ease-main), background .3s, box-shadow .35s, border-color .3s;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: transparent;
}
/* Texto --bg-dark-2 (no --deep) sobre el verde: 4,9:1 contra 4,2:1. */
.btn-primary {
  background: var(--brand-2);
  color: var(--bg-dark-2);
}
.btn-primary:hover {
  background: var(--mint);
  color: var(--bg-dark-2);
}
.btn:active { transform: translateY(1px); }
.btn-header {
  font-size: .88rem;
  padding: 11px 20px;
}
.btn-hero {
  font-size: 1rem;
  font-weight: 640;
  padding: 17px 30px;
}
.btn-ghost {
  border: 1px solid var(--dark-border-3);
  color: var(--ink-dark);
  font-weight: 600;
  font-size: 1rem;
  padding: 17px 30px;
}
.btn-ghost:hover {
  border-color: var(--mint);
  background: rgba(243,242,243,.06);
  color: var(--ink-dark);
}
.btn-ghost-sm {
  border: 1px solid var(--dark-border-3);
  color: var(--ink-dark);
  font-weight: 600;
  font-size: .92rem;
  padding: 13px 22px;
}
.btn-ghost-sm:hover {
  border-color: var(--mint);
  background: rgba(243,242,243,.06);
  color: var(--ink-dark);
}
.btn-light {
  background: var(--brand);
  color: #fff;
  font-weight: 640;
  font-size: .98rem;
  padding: 16px 28px;
}
.btn-light:hover {
  background: var(--deep);
  color: #fff;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--dark-border);
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background: var(--ink-dark);
  transition: transform .45s var(--ease-main), opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transition: opacity .15s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Menú mobile (overlay a pantalla completa)
   Vive fuera del <header> a propósito: el header usa backdrop-filter, y eso
   convierte a cualquier ancestro en "containing block" de sus hijos
   position:fixed, rompiendo un overlay pensado para cubrir todo el viewport.
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--deep);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  clip-path: circle(3% at calc(100% - 38px) 36px);
  will-change: clip-path;
  transition: clip-path .6s var(--ease-menu-close), visibility 0s .6s;
}
.mobile-menu.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 38px) 36px);
  transition: clip-path .75s var(--ease-menu-open);
}
.mobile-menu.is-closing {
  clip-path: circle(3% at calc(100% - 38px) 36px);
  transition: clip-path .5s var(--ease-menu-close), visibility 0s .5s;
}

.mobile-menu-brand {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
}

.mobile-menu-close {
  position: absolute;
  top: 14px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--dark-border);
  background: transparent;
  color: var(--ink-dark);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s, background .3s, transform .45s var(--ease-main);
}
.mobile-menu-close:hover { border-color: var(--mint); background: rgba(243,242,243,.07); }

.mobile-menu-inner {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: clamp(96px,16vh,128px) 28px clamp(28px,5vh,40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}

.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li {
  border-top: 1px solid var(--dark-hairline);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .3s ease, transform .35s var(--ease-main);
}
.mobile-nav li:last-child { border-bottom: 1px solid var(--dark-hairline); }
.mobile-menu.is-open .mobile-nav li { animation: osRise .65s var(--ease-menu-open) both; }
.mobile-menu.is-open .mobile-nav li:nth-child(1) { animation-delay: .22s; }
.mobile-menu.is-open .mobile-nav li:nth-child(2) { animation-delay: .29s; }
.mobile-menu.is-open .mobile-nav li:nth-child(3) { animation-delay: .36s; }
.mobile-menu.is-open .mobile-nav li:nth-child(4) { animation-delay: .43s; }
.mobile-menu.is-open .mobile-nav li:nth-child(5) { animation-delay: .5s; }
.mobile-menu.is-open .mobile-nav li:nth-child(6) { animation-delay: .57s; }
.mobile-menu.is-closing .mobile-nav li {
  animation: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .26s var(--ease-menu-close);
}

.mobile-nav a {
  display: flex;
  align-items: center;
  padding: 16px 4px;
  color: var(--ink-dark);
  transition: color .3s, transform .35s var(--ease-main);
}
.mobile-nav a:hover,
.mobile-nav a:active { color: var(--mint); transform: translateX(6px); }
.mobile-nav a[aria-current="page"] { color: var(--mint); }
.mobile-nav-label {
  font-size: clamp(1.5rem,6.2vw,2.05rem);
  font-weight: 600;
  letter-spacing: -.03em;
}

.mobile-menu-bottom {
  opacity: 0;
  transform: translateY(18px);
  margin-top: clamp(28px,5vh,40px);
  transition: opacity .3s ease, transform .35s var(--ease-main);
}
.mobile-menu.is-open .mobile-menu-bottom { animation: osRise .65s var(--ease-menu-open) .64s both; }
.mobile-menu.is-closing .mobile-menu-bottom {
  animation: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .24s var(--ease-menu-close);
}
.mobile-menu-cta { width: 100%; justify-content: center; margin-top: 8px; }

/* ==========================================================================
   Hero — "La línea que te construye"
   Desktop/tablet: grid de 2 columnas (texto | retrato) y 4 filas:
   [arriba del titular] [banda] [abajo del titular] [sub + CTA]. La banda
   cae al 38 % del alto y el retrato usa object-position 38 % en Y: con
   object-fit:cover ese punto de la foto (los ojos de Julián) queda SIEMPRE
   al 38 % de la caja, así que la banda los tapa en cualquier pantalla sin
   JS. El <h1> usa subgrid para que sus dos mitades caigan arriba y abajo
   de la banda sin dejar de ser un solo encabezado. Mobile: retrato arriba
   con la banda sobre los ojos y el texto debajo.
   ========================================================================== */

.hero {
  --band-h: clamp(56px, 8.5svh, 80px);
  --hero-eyes: 38%;
  --gutter: clamp(20px, 4vw, 56px);
  --jo-h: calc(var(--band-h) * .66);
  --jo-w: calc(var(--jo-h) * .8597); /* proporción del JO: 339.02 / 394.36 */
  position: relative;
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--light-hairline);
}

.hero-photo {
  position: relative;
  overflow: clip;
  background: var(--brand);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% var(--hero-eyes);
}
.hero-photo-mark {
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: var(--bg);
  font-size: .8rem;
  line-height: 1.45;
  text-align: right;
  opacity: .85;
}

/* Ejes verticales del JO (centro y punto): el único rastro de la lámina de
   construcción que queda en el hero. */
.hero-axes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-axes::before,
.hero-axes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  opacity: .12;
}
.hero-axes::before { left: calc(var(--gutter) + var(--jo-w) * .5); }
.hero-axes::after { left: calc(var(--gutter) + var(--jo-w) * .783); } /* x del punto: 265.55 / 339.02 */

/* position: relative en el texto para que pinte encima de los ejes (que
   son absolutos): sin esto los ejes cruzarían las letras. */
.hero-title,
.hero-foot { position: relative; }

.hero-title {
  font-size: clamp(2.6rem, min(7vw, 11.5svh), 6.5rem);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 630;
  color: var(--ink);
}
.hero-title-top,
.hero-title-bottom,
.hero-title .line { display: block; }

.hero-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--band-h);
  padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--jo-w) + 22px);
  background: var(--accent-deep);
  color: var(--mint);
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  font-weight: 350;
  line-height: 1.2;
  white-space: nowrap;
}
.hero-band-name strong {
  color: var(--bg);
  font-weight: 600;
  margin-right: .45em;
}

.hero-jo {
  width: var(--jo-w);
  height: var(--jo-h);
  overflow: visible;
}
.jo-mark { fill: var(--brand-2); }
.jo-guides {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  opacity: 0;
}
.jo-guides > * { stroke-dasharray: 1; stroke-dashoffset: 1; }

.hero-sub {
  max-width: 34ch;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  font-weight: 350;
  color: var(--light-text-secondary);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hero-availability {
  font-size: .88rem;
  color: var(--light-text-mute);
}
.hero-link {
  color: var(--ink);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
  padding-block: 12px;
  transition: color .3s;
}
.hero-link:hover { color: var(--brand-ink); }

@media (min-width: 768px) {
  /* --hero-h es el alto nominal (viewport menos header, entre 600 y 1000).
     La fila 1 es un largo fijo (38 % de ese alto) y no un %, y el hero usa
     min-height: si el texto no entra (pantallas muy bajas, zoom 200 %) el
     grid crece y nada se corta; en el caso normal mide justo --hero-h y la
     banda cae sobre los ojos. */
  .hero {
    --hero-h: clamp(600px, calc(100svh - var(--header-h)), 1000px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    grid-template-rows: minmax(calc(var(--hero-h) * .38 - var(--band-h) / 2), auto) var(--band-h) auto 1fr;
    min-height: var(--hero-h);
  }
  .hero-photo { grid-column: 2; grid-row: 1 / -1; }
  .hero-band { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; }
  .hero-jo {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin-left: var(--gutter);
    position: relative;
    z-index: 3;
  }
  .hero-title {
    grid-column: 1;
    grid-row: 1 / 4;
    display: grid;
    grid-template-rows: subgrid;
    padding-inline: var(--gutter) 24px;
  }
  .hero-title-top { grid-row: 1; align-self: end; padding-bottom: clamp(10px, 2svh, 22px); }
  .hero-title-bottom { grid-row: 3; padding-top: clamp(10px, 2svh, 22px); }
  .hero-foot {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px clamp(24px, 4vw, 64px);
    padding: clamp(18px, 3svh, 36px) 24px clamp(20px, 4svh, 48px) var(--gutter);
  }
}

/* Sin subgrid (navegadores viejos): el titular entero va debajo de la banda. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .hero-title { grid-row: 3; display: block; }
    .hero-title-top, .hero-title-bottom { padding: 0; }
  }
}

@media (max-width: 767px) {
  .hero {
    --band-h: 52px;
    /* Foto + titular + sub + CTA entran en 375×812 sin scroll. */
    --photo-h: min(46svh, 108vw);
    display: flex;
    flex-direction: column;
  }
  .hero-photo { height: var(--photo-h); }
  .hero-axes { display: none; }
  .hero-band,
  .hero-jo {
    position: absolute;
    z-index: 2;
  }
  .hero-band {
    left: 0;
    right: 0;
    top: calc(var(--photo-h) * .38 - var(--band-h) / 2);
    font-size: .95rem;
  }
  .hero-band-meta { display: none; }
  .hero-jo {
    z-index: 3;
    left: var(--gutter);
    top: calc(var(--photo-h) * .38 - var(--jo-h) / 2);
  }
  .hero-title {
    font-size: clamp(2.5rem, 12.5vw, 3.6rem);
    padding: 22px var(--gutter) 0;
  }
  .hero-foot { padding: 14px var(--gutter) 40px; }
  .hero-sub { margin-bottom: 18px; }
  .hero-actions { align-items: stretch; text-align: center; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-link { align-self: center; }
}

/* ==========================================================================
   Marquesina de clientes
   ========================================================================== */

.marquee-section {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(28px,3.5vw,40px) 0;
  overflow: hidden;
}
.marquee-title {
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--light-text-mute);
  margin-bottom: 22px;
}
.marquee-mask {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(40px,5vw,72px);
  animation: osMarquee 46s linear infinite;
  align-items: center;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track img {
  height: 52px;
  width: auto;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .3s, filter .3s;
}
.marquee-track img:hover { opacity: 1; filter: none; }

/* ==========================================================================
   Secciones genéricas
   ========================================================================== */

.section-light { background: var(--bg); color: var(--ink); padding: clamp(72px,10vw,150px) 0; }
.section-dark { background: var(--deep); padding: clamp(72px,10vw,150px) 0; }
.section-dark-2 { background: var(--bg-dark-2); padding: clamp(72px,10vw,150px) 0; }

/* Etiqueta de sección: sin numeración ni guiones, tracking moderado (el
   .4em anterior separaba tanto las letras que costaba leer la palabra). */
.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
}
.eyebrow--light { color: var(--light-text-mute); }

.h2 {
  font-size: clamp(1.9rem,4.2vw,3.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
}

/* Manifesto */
.manifesto-section {
  position: relative;
  overflow: hidden;
  --manifesto-dance-x: clamp(24px, 4vw, 60px);
}
.manifesto-section .container { position: relative; z-index: 1; }
.manifesto-logo {
  position: absolute;
  width: clamp(120px, 13vw, 190px);
  height: auto;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
  will-change: transform, top, bottom;
}
.manifesto-logo-1 {
  right: -2%;
  animation: manifestoDanceA 34s ease-in-out infinite;
}
.manifesto-logo-2 {
  left: -2%;
  width: clamp(100px, 10vw, 150px);
  animation: manifestoDanceB 40s ease-in-out infinite;
}
/* Recorre de arriba a abajo del sector sin nunca salir de él (top/bottom
   se mueven en % del alto de la sección, que varía con el contenido; los
   costados sí pueden asomarse un poco vía translateX, contenido por el
   overflow:hidden del padre). */
@keyframes manifestoDanceA {
  0%   { top: 6%;  transform: translateX(0); }
  25%  { top: 26%; transform: translateX(calc(var(--manifesto-dance-x) * -1)); }
  50%  { top: 52%; transform: translateX(0); }
  75%  { top: 26%; transform: translateX(var(--manifesto-dance-x)); }
  100% { top: 6%;  transform: translateX(0); }
}
@keyframes manifestoDanceB {
  0%   { bottom: 6%;  transform: translateX(0); }
  25%  { bottom: 26%; transform: translateX(var(--manifesto-dance-x)); }
  50%  { bottom: 52%; transform: translateX(0); }
  75%  { bottom: 26%; transform: translateX(calc(var(--manifesto-dance-x) * -1)); }
  100% { bottom: 6%;  transform: translateX(0); }
}
.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(32px,5vw,80px);
  align-items: start;
}
.manifesto-lead {
  font-size: clamp(1.05rem,1.4vw,1.3rem);
  line-height: 1.6;
  color: var(--light-text-secondary);
  max-width: 54ch;
}
.manifesto-right { display: flex; flex-direction: column; gap: 26px; }
.manifesto-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 20px;
}
.manifesto-mini {
  border-top: 1px solid var(--light-hairline-2);
  padding-top: 16px;
}
.manifesto-mini h3 {
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}
.manifesto-mini p {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--light-text-tertiary);
}

/* Servicios */
.services-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(40px,5vw,68px);
}
.services-header > div { flex: 1 1 480px; }
.services-header .h2 { max-width: 22ch; }
.services-lead {
  flex: 0 1 40ch;
  max-width: 40ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--dark-text-tertiary-2);
}
.hairline-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1px;
  background: var(--dark-hairline);
  border: 1px solid var(--dark-hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}
.service-card {
  background: var(--bg-dark-2);
  padding: clamp(26px,3vw,38px);
  transition: background .4s;
}
.service-card:hover { background: var(--bg-dark); }
/* La primera tarjeta (logotipos) es la especialidad: se distingue con un
   fondo apenas teñido de verde y una línea de marca arriba. */
.service-card--lead {
  background: linear-gradient(rgba(0,167,112,.07), rgba(0,167,112,.07)), var(--bg-dark-2);
  box-shadow: inset 0 2px 0 var(--brand-2);
}
.service-card--lead:hover { background: linear-gradient(rgba(0,167,112,.1), rgba(0,167,112,.1)), var(--bg-dark-2); }
.service-kicker {
  display: block;
  margin-bottom: 10px;
  font-size: .8rem;
  font-weight: 560;
  color: var(--mint);
}
.service-card h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
/* Sin kicker, el título arranca más abajo para alinearse con el de la
   tarjeta destacada. */
.service-card:not(.service-card--lead) h3 { margin-top: calc(.8rem * 1.6 + 10px); }
@media (max-width: 568px) {
  .service-card:not(.service-card--lead) h3 { margin-top: 0; }
}
.service-card p {
  font-size: .96rem;
  line-height: 1.6;
  color: var(--dark-text-tertiary);
}
.services-note {
  margin-top: 26px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--dark-text-mute);
  max-width: 70ch;
}
.services-note strong { color: var(--ink-dark); font-weight: 620; }

/* Trabajos */
.works-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.works-header .h2 { max-width: 24ch; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.filter-pill {
  border: 1px solid var(--dark-border-2);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: .86rem;
  font-weight: 560;
  background: transparent;
  color: var(--ink-dark);
  transition: all .3s;
  min-height: 44px;
}
.filter-pill:hover { border-color: var(--mint); }
.filter-pill[aria-pressed="true"] {
  background: var(--brand-2);
  color: var(--bg-dark-2);
  border-color: var(--brand-2);
}

.works-rows { border-top: 1px solid var(--dark-divider); }
/* .work-row es flex: sin esto, el atributo hidden (filtros / "Cargar más")
   no las ocultaría. */
.work-row[hidden] { display: none; }
.work-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px,2.4vw,30px) clamp(4px,1.6vw,22px);
  border-bottom: 1px solid var(--dark-divider);
  color: var(--ink-dark);
  transition: background .4s, padding-left .4s;
}
.work-row:hover {
  background: var(--dark-row-hover);
  padding-left: clamp(14px,2.6vw,38px);
}
.work-row-disabled {
  cursor: default;
}
.work-row-disabled:hover {
  background: none;
  padding-left: clamp(4px,1.6vw,22px);
}
.work-row-disabled .work-row-arrow {
  opacity: .35;
}
.work-row-left {
  display: flex;
  align-items: baseline;
  gap: clamp(14px,2.5vw,32px);
  min-width: 0;
}
.work-row-name {
  font-size: clamp(1.3rem,3.1vw,2.4rem);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.work-row-logo {
  height: clamp(38px,5.6vw,68px);
  width: auto;
  max-width: clamp(160px,28vw,320px);
  object-fit: contain;
  object-position: left center;
}
.work-row-logo--sm {
  height: clamp(24px,3.6vw,43px);
  max-width: clamp(100px,19vw,205px);
}
.work-row-logo--lg {
  height: clamp(43px,6.3vw,77px);
  max-width: clamp(180px,31vw,360px);
}
.work-row-right {
  display: flex;
  align-items: center;
  gap: clamp(12px,2vw,24px);
  flex-shrink: 0;
}
.work-row-tag {
  font-size: .84rem;
  color: var(--dark-text-mute);
}
.work-row-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--dark-border-2);
  display: grid;
  place-items: center;
  color: var(--mint);
  font-size: .9rem;
  transition: background .35s, color .35s, border-color .35s;
}
.work-row:hover .work-row-arrow,
.work-row:focus-visible .work-row-arrow {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--bg-dark-2);
}

.works-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.works-load-more-wrap.is-hidden { display: none; }

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: clamp(14px,1.6vw,22px);
}
.work-card {
  display: block;
  border-radius: var(--r-grid-card);
  overflow: hidden;
  background: var(--bg-dark);
  border: 1px solid var(--dark-hairline);
  color: var(--ink-dark);
  transition: transform .5s var(--ease-main), border-color .4s;
}
.work-card:hover { transform: translateY(-6px); border-color: rgba(194,220,175,.4); }
.work-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.work-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
}
.work-card-name { display: block; font-size: 1.06rem; font-weight: 600; letter-spacing: -.025em; }
.work-card-tag {
  display: block;
  margin-top: 5px;
  font-size: .8rem;
  color: var(--dark-text-mute);
}

.work-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 220px;
  border-radius: var(--r-badge);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.94);
  transition: opacity .35s ease, transform .45s var(--ease-main);
  z-index: 40;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.work-preview img { width: 100%; height: 100%; object-fit: cover; }
.work-preview.is-visible {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(-2deg);
}

/* Pull quote */
.pullquote-section {
  position: relative;
  overflow: hidden;
  padding: clamp(80px,11vw,170px) 0;
}
.pullquote-content { position: relative; text-align: center; }
.pullquote-eyebrow {
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 28px;
}
.pullquote {
  font-size: clamp(2rem,5.6vw,4.6rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 500;
  max-width: 24ch;
  margin-inline: auto;
}
/* Comillas tipográficas (“ ”) en vez de las rectas (") que había. */
.pullquote::before { content: "\201C"; color: var(--brand-2); }
.pullquote::after { content: "\201D"; color: var(--brand-2); }
.pullquote-sub {
  margin-top: 30px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--dark-text-tertiary);
  max-width: 56ch;
  margin-inline: auto;
}

/* Proceso */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(32px,5vw,80px);
  align-items: start;
}
.process-left { position: static; top: 100px; }
.process-left .h2 { max-width: 20ch; }
.process-left p {
  margin-top: 22px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--light-text-tertiary-2);
  max-width: 44ch;
}
.process-left .btn-light { margin-top: 30px; }

/* Línea de tiempo vertical: borde izquierdo de la lista como pista,
   más una segunda línea de color (.process-timeline-progress) que se
   "dibuja" de arriba hacia abajo a medida que se scrollea (ver main.js,
   updateProcessTimeline). Por defecto, sin JS, la línea y los puntos
   ya están completos: nunca depende de JS para mostrar contenido. */
.process-timeline-wrap { position: relative; }

.process-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(28px,4vw,40px);
  border-left: 1px solid var(--light-hairline-2);
  display: grid;
  gap: clamp(2.25rem,5vw,3.25rem);
}

.process-timeline-progress {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--brand);
  transform-origin: top;
  transform: scaleY(1);
  pointer-events: none;
}
.has-timeline-anim .process-timeline-progress { transform: scaleY(0); }

.process-step {
  position: relative;
  padding: 0;
}
.process-step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(28px,4vw,40px) - 6px);
  top: .45rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(0,131,88,.14);
  transition: background .35s var(--ease-main), box-shadow .35s var(--ease-main);
}
.has-timeline-anim .process-step::before {
  background: var(--paper);
  box-shadow: 0 0 0 5px transparent, inset 0 0 0 2px var(--light-hairline-2);
}
.has-timeline-anim .process-step.is-lit::before {
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(0,131,88,.14);
}

.process-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.process-stage {
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand-ink);
}
.process-duration {
  font-size: .8rem;
  color: var(--light-text-mute);
}
.process-step h3 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}
.process-step p {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--light-text-tertiary-2);
  max-width: 56ch;
  margin: 0;
}

/* Estudio */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px,1fr));
  gap: clamp(32px,5vw,72px);
  align-items: stretch;
}
.studio-left {
  position: relative;
  overflow: visible;
  margin-top: calc(-1 * clamp(72px,10vw,150px));
  padding-top: clamp(72px,10vw,150px);
}
.studio-left-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.studio-watermark {
  position: absolute;
  top: 0;
  right: 22%;
  height: 58%;
  width: auto;
  max-width: none;
  opacity: .15;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 700px) {
  .studio-watermark { display: none; }
}
.studio-left .h2 { max-width: 22ch; }
.studio-left p {
  margin-top: 24px;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--dark-text-secondary);
  max-width: 52ch;
}
.studio-left p.eyebrow { color: var(--mint); }
.studio-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.studio-portrait-wrap { position: relative; margin: 0; }
.studio-portrait {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 4/5;
  filter: saturate(.9);
}
.studio-badge {
  position: absolute;
  left: clamp(-8px,-1vw,0px);
  bottom: 22px;
  /* rgba manual de --deep (#24333A) — necesita el canal alpha para el backdrop-filter. */
  background: rgba(36,51,58,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-badge);
  padding: 16px 20px;
}
.studio-badge-role {
  display: block;
  font-size: .8rem;
  color: var(--mint);
}
.studio-badge-name {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -.02em;
}

/* Testimonios: columnas separadas por filetes en vez de tres tarjetas
   idénticas con avatar de iniciales. */
.testimonials-head { margin-bottom: clamp(36px,4.5vw,60px); }
.testimonials-head .h2 { max-width: 26ch; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(28px,3vw,40px) clamp(28px,4vw,56px);
}
.testimonial {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--dark-border-2);
}
.testimonial blockquote { flex: 1; }
.testimonial p {
  font-size: clamp(1.05rem,1.3vw,1.16rem);
  line-height: 1.58;
  letter-spacing: -.01em;
  color: var(--ink-dark);
}
.testimonial p::before { content: "\201C"; }
.testimonial p::after { content: "\201D"; }
.testimonial-foot { display: block; }
.testimonial-foot cite { display: block; font-style: normal; font-weight: 620; font-size: .98rem; }
.testimonial-foot .role { display: block; margin-top: 2px; font-size: .88rem; color: var(--dark-text-mute); }
.testimonial-brand { color: var(--mint); }

/* FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(32px,5vw,72px);
  align-items: start;
}
.faq-left .h2 { max-width: 18ch; font-size: clamp(1.9rem,4vw,3.2rem); line-height: 1.03; }
.faq-list { border-top: 1px solid var(--light-hairline-2); }
.faq-item { border-bottom: 1px solid var(--light-hairline-2); }
.faq-heading { font: inherit; margin: 0; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 2px;
  text-align: left;
  font-size: clamp(1.02rem,1.5vw,1.2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  background: transparent;
  border: none;
  transition: color .3s;
  min-height: 44px;
}
.faq-question:hover { color: var(--brand-ink); }
/* "+" dibujado con dos trazos (más prolijo que el glifo de la fuente);
   abierto, el trazo vertical se pliega y queda un "−". */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--light-hairline-2);
  color: var(--brand-ink);
  transition: background .3s, border-color .3s, color .3s;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.is-open .faq-icon { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%,-50%) rotate(0deg); }
/* Cerrada, la respuesta además queda fuera del árbol de accesibilidad
   (visibility), así el lector de pantalla no la lee ni se puede tabular. */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows .45s cubic-bezier(.65,0,.35,1), visibility 0s linear .45s;
}
.faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .45s cubic-bezier(.65,0,.35,1), visibility 0s;
}
.faq-answer-inner { overflow: hidden; }
.faq-answer {
  padding: 0 2px 24px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--light-text-tertiary-2);
  max-width: 60ch;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.faq-item.is-open .faq-answer { opacity: 1; transform: translateY(0); transition-delay: .1s; }

/* Contacto */
.contact-section { position: relative; overflow: hidden; }
.contact-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px,4.5vw,56px);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.contact-intro { position: relative; }
.contact-intro .h2 { max-width: 22ch; margin-inline: auto; font-size: clamp(1.9rem,4.6vw,3.8rem); letter-spacing: -.04em; }
.contact-email {
  display: inline-block;
  margin-top: 26px;
  font-size: clamp(1.05rem,2.4vw,1.9rem);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--mint);
  border-bottom: 1px solid rgba(194,220,175,.4);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.contact-email:hover { color: #fff; border-color: #fff; }

.contact-info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  background: var(--dark-hairline);
  border: 1px solid var(--dark-hairline);
  border-radius: var(--r-panel);
  overflow: hidden;
  text-align: left;
}
.contact-info-cell { background: var(--bg-dark-2); padding: 22px 24px; }
.contact-info-label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark-text-mute);
  margin-bottom: 7px;
}
.contact-socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.contact-social {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--dark-border-2);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: .9rem;
  color: var(--ink-dark);
  transition: border-color .3s, background .3s;
}
.contact-social:hover { border-color: var(--mint); background: rgba(243,242,243,.06); color: var(--ink-dark); }

.contact-cta { font-size: 1.05rem; padding: 18px 34px; }

.form-error {
  font-size: .85rem;
  color: #ffb4a8;
  text-align: center;
}

/* Modal "Empezar proyecto" */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px,4vw,40px);
  /* rgba manual de --deep (#24333A) — necesita el canal alpha para el backdrop-filter. */
  background: rgba(36,51,58,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-main), visibility 0s linear .35s;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease-main), visibility 0s;
}
.modal-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88vh, 900px);
  background: var(--bg-dark-2);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-panel);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(243,242,243,.04);
  transform: translateY(24px) scale(.98);
  opacity: 0;
  transition: transform .4s var(--ease-main), opacity .4s var(--ease-main);
}
.modal-overlay.is-open .modal-panel { transform: translateY(0) scale(1); opacity: 1; }
.modal-scroll {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: clamp(28px,4vw,44px);
  scrollbar-width: thin;
  scrollbar-color: rgba(243,242,243,.22) transparent;
}
.modal-title { font-size: clamp(1.5rem,3vw,2.1rem); margin-top: 10px; letter-spacing: -.03em; }
.modal-sub { color: var(--dark-text-secondary); font-size: .95rem; margin-top: 10px; margin-bottom: 26px; }
.modal-form { background: transparent; border: none; padding: 0; }
.modal-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--dark-border);
  background: var(--bg-dark);
  color: var(--ink-dark);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: border-color .3s, background .3s, transform .3s;
}
.modal-close:hover { border-color: var(--mint); background: var(--bg-dark-2); }

@media (max-width: 560px) {
  .modal-panel { border-radius: var(--r-card); }
}

/* Brief (formulario premium del popup "Empezar proyecto") */
.modal-panel--brief { background: var(--deep); }
.brief-scroll { padding: clamp(48px,8vw,72px) clamp(20px,4vw,44px) clamp(40px,6vw,56px); }

.brief-brand { display: flex; margin-bottom: 40px; }
.brief-logo { height: 22px; width: auto; display: block; }

.brief-eyebrow {
  font-size: .74rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 600;
  margin: 0 0 16px;
}
.brief-title {
  font-family: var(--font-display);
  font-size: clamp(2rem,5vw,3.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink-dark);
  margin: 0 0 24px;
}
.brief-intro {
  margin: 0 0 44px;
  max-width: 52ch;
  font-size: clamp(.98rem,3.5vw,1.08rem);
  line-height: 1.65;
  color: var(--dark-text-secondary);
}

.brief-form { display: block; }
.brief-section { margin-bottom: 44px; }
/* <legend> de cada <fieldset>: título de bloque con un filete a lo ancho. */
.brief-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 26px;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-dark);
}
.brief-section-head::after { content: ""; flex: 1; height: 1px; background: var(--dark-border-2); }

.brief-fields { display: grid; gap: 26px; }
.brief-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 26px; }
.brief-field { display: block; }
.brief-field--narrow { max-width: 320px; }
.brief-field > span {
  display: block;
  font-size: .9rem;
  color: var(--dark-text-secondary);
  font-weight: 500;
  margin-bottom: 9px;
  line-height: 1.4;
}
.brief-req { color: var(--mint); margin-left: 2px; }
.brief-field input,
.brief-field textarea {
  width: 100%;
  background: var(--dark-input-bg);
  border: none;
  border-bottom: 1px solid var(--dark-input-border);
  border-radius: 4px 4px 0 0;
  color: var(--ink-dark);
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 12px 12px 13px;
  transition: border-color .2s ease, background .2s ease;
}
.brief-field textarea { resize: vertical; min-height: 96px; }
/* El input recibe el foco del teclado y el borde inferior se ilumina; el
   anillo global de :focus-visible se mantiene para quien navega con Tab. */
.brief-field input:focus,
.brief-field textarea:focus { border-color: var(--brand-2); background: rgba(243,242,243,.14); }
.brief-field input:focus:not(:focus-visible),
.brief-field textarea:focus:not(:focus-visible) { outline: none; }
.brief-field input::placeholder,
.brief-field textarea::placeholder { color: var(--dark-placeholder); opacity: 1; }
/* Campos obligatorios vacíos o mal escritos, solo después de intentar enviar. */
.brief-form.was-validated [aria-invalid="true"] {
  border-color: #ffb4a8;
  background: rgba(255,180,168,.08);
}

.brief-budget-label {
  margin: 0 0 16px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dark-text-secondary);
}
.brief-budget-options { display: grid; gap: 10px; }
.brief-budget-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--dark-border-3);
  border-radius: var(--r-input);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.brief-budget-option:hover { border-color: var(--mint); }
.brief-budget-option.is-selected,
.brief-budget-option:has(input:checked) { border-color: var(--brand-2); background: rgba(0,167,112,.1); }
.brief-budget-option:has(input:focus-visible) { outline: 2px solid var(--brand-2); outline-offset: 3px; }
.brief-budget-option input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.brief-budget-text { font-size: 1rem; font-weight: 500; color: var(--ink-dark); font-variant-numeric: tabular-nums; }
.brief-budget-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--dark-border-3);
  flex-shrink: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.brief-budget-option.is-selected .brief-budget-dot,
.brief-budget-option:has(input:checked) .brief-budget-dot {
  border-color: var(--brand-2);
  background: radial-gradient(circle, var(--brand-2) 0 4px, transparent 4.5px);
}

.brief-note { font-size: .88rem; line-height: 1.6; color: var(--dark-text-mute); margin: 0 0 20px; text-align: center; }
.brief-submit {
  width: 100%;
  background: var(--brand-2);
  color: var(--bg-dark-2);
  border: none;
  border-radius: var(--r-pill);
  padding: clamp(16px,4vw,20px) 28px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .25s ease;
}
.brief-submit:hover { background: var(--mint); }
.brief-error { margin-top: 16px; }

.brief-thanks:not([hidden]) { display: flex; flex-direction: column; justify-content: center; min-height: 40vh; }
.brief-thanks .brief-title:focus { outline: none; }
.brief-thanks-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dark-text-secondary);
  margin: 0;
  max-width: 520px;
}

/* Footer */
.site-footer {
  background: var(--bg-dark-2);
  border-top: 1px solid var(--dark-hairline);
  padding: clamp(40px,5vw,64px) 0 28px;
}
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--dark-hairline);
}
.footer-logo { display: block; height: 26px; width: auto; align-self: flex-start; }
.footer-nav { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 4px; }
.footer-nav a {
  display: inline-block;
  padding-block: 10px;
  color: var(--dark-text-secondary);
  font-size: .92rem;
  transition: color .3s;
}
.footer-nav a:hover { color: var(--ink-dark); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 22px;
}
.footer-bottom p {
  font-size: .8rem;
  color: var(--dark-text-mute);
}
.footer-bottom p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .3s;
}
.footer-bottom p a:hover { color: var(--ink-dark); }

/* Dock flotante */
.floating-dock {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%,140%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 14px;
  /* rgba manual de --bg-dark-2 (#1B272C) — necesita el canal alpha para el backdrop-filter. */
  background: rgba(27,39,44,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-pill);
  padding: 10px 12px 10px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  max-width: calc(100vw - 32px);
  /* visibility además del transform: oculto, el dock no debe recibir foco. */
  visibility: hidden;
  transition: transform .6s var(--ease-main), visibility 0s linear .6s;
}
.floating-dock.is-visible {
  transform: translate(-50%,0);
  visibility: visible;
  transition: transform .6s var(--ease-main), visibility 0s;
}
.floating-dock-text {
  font-size: .9rem;
  color: var(--dark-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floating-dock .btn-primary {
  font-weight: 640;
  font-size: .88rem;
  padding: 11px 20px;
}

/* Volver arriba */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 54;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--dark-border);
  /* rgba manual de --bg-dark-2 (#1B272C) — necesita el canal alpha para el backdrop-filter. */
  background: rgba(27,39,44,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink-dark);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(140%);
  transition: transform .5s var(--ease-main), opacity .4s, visibility 0s linear .5s, background .3s, border-color .3s, color .3s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform .5s var(--ease-main), opacity .4s, visibility 0s, background .3s, border-color .3s, color .3s;
}
.back-to-top:hover {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--bg-dark-2);
}

/* ==========================================================================
   Responsive — mobile-first
   El layout base (arriba) ya está pensado para mobile: una sola columna,
   tipografía fluida con clamp() y grillas repeat(auto-fit/auto-fill,...).
   Estas media queries solo agregan comportamiento propio de pantallas
   más anchas (nav de escritorio, columna sticky de proceso, etc.).
   ========================================================================== */

/* Tablet en adelante: aparece la nav de escritorio, se oculta el toggle */
@media (min-width: 901px) {
  .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
  .header-actions .btn-header { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }

  .footer-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-logo { align-self: center; }
}

/* La columna sticky del proceso solo tiene sentido con suficiente alto/ancho */
@media (min-width: 721px) {
  .process-left { position: sticky; }
}

/* Dock flotante: en pantallas muy chicas se reduce solo al botón */
@media (max-width: 420px) {
  .floating-dock-text { display: none; }
  .floating-dock { padding: 8px; }
}

/* En mobile el dock ocupa casi todo el ancho inferior: subimos el botón
   de volver arriba para que no quede tapado detrás suyo */
@media (max-width: 640px) {
  .back-to-top { right: 16px; bottom: 90px; width: 42px; height: 42px; }
}

/* Filas de botones que envuelven en mobile: en vez de quedar sueltas con
   anchos dispares, se apilan a ancho completo y centradas. (El hero tiene
   su propia versión en su bloque.) */
@media (max-width: 640px) {
  .studio-links {
    flex-direction: column;
    align-items: stretch;
  }
  .studio-links .btn {
    width: 100%;
    justify-content: center;
  }
}

/* En mobile el clamp() de los logos de marca en "Trabajos" queda pegado a
   su piso (el 5.6vw no llega a superarlo en pantallas angostas): subimos
   ese piso un poco para que no se vean chicos, sin tocar el techo desktop. */
@media (max-width: 640px) {
  .work-row-logo { height: clamp(46px,11vw,68px); }
  .work-row-logo--sm { height: clamp(29px,7vw,43px); }
  .work-row-logo--lg { height: clamp(52px,12.5vw,77px); }
}

/* El preview que sigue al cursor no tiene sentido en touch */
@media (pointer: coarse) {
  .work-preview { display: none; }
}

/* ==========================================================================
   Página "Sobre mí" (sobre-mi.html) — agregado 2026-09-10
   ==========================================================================

   Página clara de punta a punta con dos cortes abruptos (la cita destacada
   en fondo oscuro y el detrás de escena en sage), siguiendo el mismo ritmo
   que el home. Reutiliza tokens, header, footer, modal y la línea de tiempo
   del Proceso (.process-timeline-*), que ya trae el efecto de dibujado en
   scroll desde main.js sin necesidad de JS propio.

   REGLAS PARA NO ROMPER NADA SI EDITÁS ESTE BLOQUE:

   1. Todo lo de acá abajo usa el prefijo `.about-*` o cuelga de
      `body.page-about` / `.about-timeline-section`. NO toques desde acá las
      clases compartidas (.h2, .eyebrow, .btn, .process-*, .container): las
      usa index.html y cualquier cambio suelto se le filtra al home.

   2. Las excepciones deliberadas al punto 1 son tres, y están acotadas:
        · `body.page-about`      — invierte el fondo del <body>, que en el
                                   sitio es oscuro por defecto.
        · `.about-timeline-section .process-year` / `.process-stage`
                                 — reestilan la línea de tiempo SOLO en esta
                                   página; el home queda intacto.
        · `.studio-link-cta`     — al final del archivo, es del home.

   3. `.btn-outline-dark` existe porque los `.btn-ghost` del sitio están
      pensados para fondo oscuro (texto claro) y acá el fondo es claro.
      Recordá que `.btn` trae `background: transparent`: si escribís un botón
      nuevo sin heredar de `.btn`, el navegador le mete su gris nativo y
      arruina el contraste.

   4. Este bloque va AL FINAL del archivo a propósito (gana por orden de
      cascada, sin necesidad de `!important` en ningún lado). Si movés cosas,
      mantenelo último.
   ========================================================================== */

/* El body del sitio es oscuro por defecto (el home abre con hero oscuro);
   acá el fondo base es claro y solo las secciones de corte son oscuras. */
body.page-about { background: var(--bg); color: var(--ink); }

.page-about ::selection { background: var(--brand); color: var(--bg); }

/* Botón de contorno para fondo claro (los .btn-ghost del home son para oscuro) */
.btn-outline-dark {
  border: 1px solid var(--light-hairline-2);
  color: var(--ink);
  font-weight: 600;
  font-size: .98rem;
  padding: 16px 26px;
}
.btn-outline-dark:hover {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
  background: rgba(0,131,88,.06);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.about-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px,8vw,110px) 0 clamp(64px,9vw,130px);
}

/* Monograma JO gigante como marca de agua, cortado por el borde derecho.
   Se sale del viewport a propósito; lo contiene el overflow:hidden de
   .about-hero. Opacidad muy baja y sin glow: la marca evita los efectos de
   neón. Va en z-index 0 y el contenido en z-index 1 para que no lo tape. */
.about-hero-mark {
  position: absolute;
  top: 50%;
  right: -6%;
  width: clamp(280px,38vw,620px);
  height: auto;
  transform: translateY(-50%);
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}

.about-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px,6vw,72px);
  align-items: center;
}

.about-hero-eyebrow {
  color: var(--brand-ink);
  animation: osFade 1s ease both;
}

.about-title {
  font-size: clamp(2.4rem,6.4vw,4.6rem);
  line-height: 1.01;
  letter-spacing: -.045em;
  font-weight: 600;
  margin-bottom: clamp(22px,3vw,30px);
}
.about-title .line { display: block; animation: osRise 1s var(--ease-main) both; }
.about-title .line:nth-child(1) { animation-delay: .05s; }
.about-title .line:nth-child(2) { animation-delay: .15s; }
.about-title .line:nth-child(3) { animation-delay: .25s; }
.about-title .line--accent { color: var(--brand); }

.about-lead {
  font-size: clamp(1.02rem,1.5vw,1.18rem);
  line-height: 1.6;
  color: var(--light-text-secondary);
  max-width: 46ch;
  animation: osRise 1s var(--ease-main) .35s both;
}

/* Fila de stats: hairlines sobre fondo claro, sin cajas ni sombras */
.about-stats {
  margin-top: clamp(36px,5vw,56px);
  display: grid;
  /* Fijo en 2×2: con auto-fit entran 3 en la columna del hero y el cuarto
     dato queda solo en una segunda fila, desbalanceado. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px,2.6vw,32px) clamp(20px,2.6vw,40px);
  animation: osRise 1s var(--ease-main) .45s both;
}
/* <div> con <dt> y <dd>: la etiqueta va primero en el HTML (lectura
   "Países: 6") pero se muestra debajo del número. */
.about-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  border-top: 1px solid var(--light-hairline-2);
  padding-top: 16px;
}
.about-stat-num {
  display: block;
  font-size: clamp(1.7rem,2.8vw,2.4rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}
.about-stat-num--accent { color: var(--brand); }
.about-stat-label {
  display: block;
  margin-top: 10px;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--light-text-mute);
}

.about-portrait-wrap {
  position: relative;
  animation: osRise 1.1s var(--ease-main) .25s both;
}
.about-portrait {
  position: relative;
  z-index: 4;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -34px rgba(36,51,58,.45);
  transition: transform .5s var(--ease-main), box-shadow .5s var(--ease-main);
}

/* Bocetos detrás del retrato: el abanico "nace" del retrato de Julián (el
   único que queda siempre arriba de todo, z-index 4) y cada hoja se apila
   detrás de la anterior en orden — i:0 pegada al retrato (z-index 3), i:1
   detrás de esa (z-index 2), i:2 la más al fondo (z-index 1). Son más
   chicas que el retrato (--sketch-scale) para no invadir el bloque de
   texto a la izquierda; se centran sobre el mismo punto que el retrato
   con top/left:50% + translate(-50%,-50%).
   A propósito NO usamos una sola fórmula lineal en base a --i (rotate/
   translateX proporcional al índice): eso se sentía "espejo reflejando un
   espejo" — perfecto y mecánico. En vez de eso cada hoja (nth-of-type)
   tiene su propio ángulo, su propio recorrido en X *y en Y* (antes nunca
   se movían en Y) y su propia curva/duración/delay de transición, como si
   alguien desplegara hojas de papel a mano: prolijo pero no idéntico.
   Si se agrega una 4ª hoja, sumar un bloque nth-of-type(4) con valores
   propios en vez de extender la fórmula. */
.about-sketches {
  position: absolute;
  inset: 0;
  z-index: 0;
  --sketch-scale: .74;
}
.about-sketch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% * var(--sketch-scale));
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: 0 30px 60px -30px rgba(36,51,58,.4);
  transform-origin: 50% 50%;
  z-index: calc(3 - var(--i, 0));
  transform: translate(-50%, -50%) translate(var(--rest-x), var(--rest-y)) rotate(var(--rest-rot));
  transition: transform .6s var(--sheet-ease, cubic-bezier(.22,.85,.32,1)), box-shadow .35s var(--ease-main);
  transition-delay: var(--sheet-delay, 0s);
  will-change: transform;
  cursor: pointer;
}
.about-sketch:nth-of-type(1) {
  --rest-rot: -2deg; --rest-x: -3%; --rest-y: 1.5%;
  --hover-rot: -9deg; --hover-x: -27%; --hover-y: -5%;
  --sheet-delay: .02s;
  --sheet-ease: cubic-bezier(.3,.9,.4,1);
}
.about-sketch:nth-of-type(2) {
  --rest-rot: -6deg; --rest-x: -5.5%; --rest-y: -2%;
  --hover-rot: -17deg; --hover-x: -44%; --hover-y: 8%;
  --sheet-delay: .08s;
  --sheet-ease: cubic-bezier(.34,1.32,.44,1);
}
.about-sketch:nth-of-type(3) {
  --rest-rot: -10deg; --rest-x: -7%; --rest-y: 3%;
  --hover-rot: -26deg; --hover-x: -60%; --hover-y: -10%;
  --sheet-delay: .15s;
  --sheet-ease: cubic-bezier(.26,1.1,.4,1);
}

/* Hover solo en desktop real: puntero fino + puede hacer hover + ancho de
   escritorio (min-width evita que una tablet con mouse/trackpad lo dispare).
   Las hojas de atrás se achican un 20% (scale .8) al desplegarse; el
   retrato de Julián se achica un poco más (.72) que ellas, a pedido de
   Axel — es el único que recibe ese shrink extra. */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .about-portrait-wrap:hover .about-portrait {
    transform: scale(.72) translateX(10%) rotate(2.5deg);
    box-shadow: 0 48px 90px -32px rgba(36,51,58,.5);
  }
  .about-portrait-wrap:hover .about-sketch {
    transform: translate(-50%, -50%) translate(var(--hover-x), var(--hover-y)) rotate(var(--hover-rot)) scale(.8);
  }

  /* Dentro del abanico ya desplegado, pasar el mouse sobre UN boceto puntual
     lo levanta apenas hacia arriba (como si alguien lo tomara de una punta
     con los dedos) sin tocar su z-index ni superponerlo a los demás — solo
     translateY + una sombra más marcada para vender el "despegue" del papel.
     transition-delay se resetea a 0 así responde al instante, sin heredar
     el delay escalonado del despliegue general. */
  .about-portrait-wrap:hover .about-sketch:hover {
    transition-delay: 0s;
    transform: translate(-50%, -50%) translate(var(--hover-x), var(--hover-y)) translateY(-5%) rotate(var(--hover-rot)) scale(.8);
    box-shadow: 0 40px 60px -22px rgba(36,51,58,.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-portrait,
  .about-sketch { transition: none; }
}

.about-portrait-badge {
  position: absolute;
  /* Tiene que quedar SIEMPRE arriba de todo el abanico (retrato z-index:4,
     bocetos z-index:1-3), en reposo y en hover — el hover no le toca el
     z-index a nada, así que un valor por encima del más alto del grupo
     (10) lo deja a salvo incluso si el abanico suma más hojas después. */
  z-index: 10;
  left: clamp(-8px,-1vw,0px);
  bottom: 22px;
  /* rgba manual de --deep (#24333A) — necesita el canal alpha para el backdrop-filter. */
  background: rgba(36,51,58,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-badge);
  padding: 16px 20px;
  color: var(--ink-dark);
}
.about-portrait-role {
  display: block;
  font-size: .8rem;
  color: var(--mint);
}
.about-portrait-name {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -.02em;
}
.about-portrait-place {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: var(--dark-text-tertiary);
}

/* --------------------------------------------------------------------------
   Lightbox de bocetos — mismo lenguaje visual que .modal-overlay/.modal-panel
   (overlay oscuro con blur, panel que entra con scale+fade) pero pensado
   para una imagen suelta: sin card de fondo detrás de la figura, botón de
   cerrar siempre a la vista arriba a la derecha y flechas prev/next a los
   costados. Un solo overlay reutilizado para los 3 bocetos (ver main.js).
   -------------------------------------------------------------------------- */
.sketch-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px,6vw,64px);
  background: rgba(27,39,44,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-main), visibility 0s linear .35s;
}
.sketch-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease-main), visibility 0s;
}
.sketch-lightbox-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(640px, 86vw);
  margin: 0;
  transform: translateY(18px) scale(.97);
  opacity: 0;
  transition: transform .4s var(--ease-main), opacity .4s var(--ease-main);
}
.sketch-lightbox.is-open .sketch-lightbox-figure { transform: translateY(0) scale(1); opacity: 1; }
.sketch-lightbox-img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 50px 100px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(243,242,243,.06);
  background: var(--bg-dark-2);
}
.sketch-lightbox-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: .85rem;
  color: var(--dark-text-secondary);
  text-align: center;
}
.sketch-lightbox-count {
  padding: 3px 10px;
  border: 1px solid var(--dark-border);
  border-radius: 100px;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--dark-text-tertiary);
  white-space: nowrap;
}
.sketch-lightbox-close {
  position: fixed;
  z-index: 2;
  top: clamp(16px,3vw,32px);
  right: clamp(16px,3vw,32px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--dark-border);
  background: var(--bg-dark);
  color: var(--ink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s;
}
.sketch-lightbox-close:hover { border-color: var(--mint); background: var(--bg-dark-2); }
.sketch-lightbox-nav {
  position: fixed;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--dark-border);
  background: var(--bg-dark);
  color: var(--ink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s;
}
.sketch-lightbox-nav:hover { border-color: var(--mint); background: var(--bg-dark-2); }
.sketch-lightbox-prev { left: clamp(12px,3vw,40px); }
.sketch-lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.sketch-lightbox-next { right: clamp(12px,3vw,40px); }
.sketch-lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

@media (max-width: 640px) {
  .sketch-lightbox-nav { width: 40px; height: 40px; }
  .sketch-lightbox-prev { left: 8px; }
  .sketch-lightbox-next { right: 8px; }
  .sketch-lightbox-close { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .sketch-lightbox,
  .sketch-lightbox-figure,
  .sketch-lightbox-close,
  .sketch-lightbox-nav { transition: none; }
}

/* --------------------------------------------------------------------------
   Bloques de texto + imagen
   -------------------------------------------------------------------------- */

.about-block { padding: clamp(64px,9vw,140px) 0; }

.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px,5vw,72px);
  align-items: center;
}
.about-h2 {
  font-size: clamp(1.6rem,3.2vw,2.5rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin-bottom: 22px;
  max-width: 22ch;
}
.about-body {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--light-text-tertiary-2);
  max-width: 52ch;
}
.about-body + .about-body { margin-top: 18px; }

.about-figure { position: relative; }
.about-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--r-card);
}
.about-figure--tall img { aspect-ratio: 3/4; }

/* Lista de países */
.about-countries { margin-top: clamp(30px,4vw,44px); }
.about-countries li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--light-hairline);
}
.about-countries li:first-child { border-top: 1px solid var(--light-hairline); }
.about-country-name {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--light-text-secondary);
}
.about-country-name--base { font-weight: 640; color: var(--ink); }
.about-country-tag {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--light-text-mute);
  text-align: right;
}
.about-countries li:first-child .about-country-tag { color: var(--brand); }

/* Oculta visualmente la lista (queda para lectores de pantalla / SEO) ahora
   que el mapa de abajo es la representación visual de los países. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Mapa de alcance (sección 02, reemplaza la imagen genérica de bocetos) */
.about-figure--map {
  display: flex;
  align-items: center;
  background: transparent;
}
.about-figure--map img.about-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  transform: scale(1.28);
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   Cita destacada — corte abrupto a fondo oscuro
   -------------------------------------------------------------------------- */

.about-quote-section {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  color: var(--ink-dark);
  padding: clamp(80px,11vw,160px) 0;
}
/* Anillos planos de contorno (sin glow: la marca evita efectos de neón) */
.about-quote-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--dark-hairline);
  pointer-events: none;
}
.about-quote-ring-1 { width: 420px; height: 420px; top: -180px; right: -120px; }
.about-quote-ring-2 { width: 340px; height: 340px; bottom: -160px; left: -110px; }

.about-quote-inner { position: relative; z-index: 1; text-align: center; }
.about-quote-mark {
  display: block;
  font-size: clamp(3.4rem,7vw,5.6rem);
  font-weight: 600;
  line-height: .6;
  color: var(--brand-2);
  margin-bottom: clamp(20px,3vw,32px);
}
.about-quote {
  font-size: clamp(1.4rem,3.4vw,2.55rem);
  line-height: 1.24;
  letter-spacing: -.035em;
  font-weight: 500;
  /* Tope en px y no en ch: a este cuerpo, un max-width en ch parte la cita en
     7 líneas angostas y la sección se estira de más. */
  max-width: min(900px, 100%);
  margin-inline: auto;
  text-wrap: balance;
}
.about-quote-author {
  margin-top: clamp(34px,4.5vw,52px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}
.about-quote-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.about-quote-author cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.02em;
}
.about-quote-role {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--dark-text-mute);
}

/* --------------------------------------------------------------------------
   Trayectoria — reutiliza la línea de tiempo del Proceso
   -------------------------------------------------------------------------- */

/* Estas dos reglas son las ÚNICAS que tocan clases del Proceso, y están
   scopeadas a `.about-timeline-section` justamente para no afectar al home.
   El markup de la línea de tiempo en sobre-mi.html usa las mismas clases a
   propósito: main.js hace $(".process-timeline-wrap") sin distinguir página,
   así que la animación de scroll funciona en ambas sin código nuevo. */
.about-timeline-section .process-left p { color: var(--light-text-tertiary-2); }

/* En el Proceso, la derecha del encabezado es la duración; acá es el año,
   que pasa a ser el dato jerárquico del hito. */
.about-timeline-section .process-year {
  font-size: clamp(1.4rem,2.2vw,1.8rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Detrás de escena — corte a fondo sage
   -------------------------------------------------------------------------- */

.about-bts {
  background: var(--mint);
  color: var(--ink);
  padding: clamp(72px,10vw,150px) 0;
}
/* Sobre el fondo sage los grises de texto pierden contraste: acá van más
   oscuros (≥ 4,5:1 sobre --mint). */
.about-bts .eyebrow--light { color: rgba(36,51,58,.82); }

.about-bts-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px,3vw,48px);
  align-items: end;
  margin-bottom: clamp(34px,4.5vw,56px);
}
.about-bts-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(36,51,58,.86);
  max-width: 40ch;
}

.about-bts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px,1.4vw,20px);
}
.about-bts-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-grid-card);
}
.about-bts-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform .8s var(--ease-main);
}
.about-bts-item--tall img { aspect-ratio: 3/4; }
.about-bts-item:hover img { transform: scale(1.04); }

.about-bts-quote {
  background: var(--deep);
  color: var(--ink-dark);
  display: flex;
  align-items: center;
  padding: clamp(26px,4vw,48px);
  min-height: 170px;
}
.about-bts-quote p {
  font-size: clamp(1.1rem,2vw,1.6rem);
  line-height: 1.3;
  letter-spacing: -.03em;
  font-weight: 500;
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */

.about-cta { padding: clamp(80px,11vw,170px) 0; }
.about-cta-inner { text-align: center; }
.about-cta .eyebrow { justify-content: center; }
.about-cta-title {
  font-size: clamp(2rem,5.2vw,3.8rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 600;
  max-width: 18ch;
  margin-inline: auto;
}
.about-cta-sub {
  margin-top: clamp(18px,2.4vw,26px);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--light-text-tertiary);
  max-width: 52ch;
  margin-inline: auto;
}
.about-cta-actions {
  margin-top: clamp(30px,4vw,44px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.about-cta-socials {
  margin-top: clamp(34px,4.5vw,54px);
  padding-top: clamp(22px,3vw,30px);
  border-top: 1px solid var(--light-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px,3vw,36px);
  justify-content: center;
}
.about-cta-socials a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--light-text-secondary);
  font-size: .92rem;
  transition: color .3s;
}
.about-cta-socials a:hover { color: var(--brand-ink); }

/* --------------------------------------------------------------------------
   Sobre mí — desde tablet/desktop
   (el layout base de arriba ya es mobile: todo en una columna)
   -------------------------------------------------------------------------- */

@media (min-width: 861px) {
  .about-hero-grid { grid-template-columns: 1.05fr .95fr; }
  .about-split { grid-template-columns: 1fr 1fr; }
  .about-split--image-left { grid-template-columns: .85fr 1.15fr; }
  .about-split--wide-left { grid-template-columns: 1.15fr .85fr; }

  .about-bts-head { grid-template-columns: 1.4fr .8fr; }
  /* Mosaico: la vertical ocupa las dos filas de la izquierda y la cita
     cierra la fila inferior a lo ancho de las dos columnas restantes.
     Depende del ORDEN del markup (colocación automática del grid): los 4
     hijos van sí o sí vertical → foto → foto → cita. Si los reordenás en el
     HTML, el mosaico se desarma.
     El `aspect-ratio: auto` de la vertical es necesario porque al ocupar dos
     filas su alto lo define el grid, no su proporción; sin esto pelea con el
     3/4 que tiene en mobile y deja un hueco abajo. */
  .about-bts-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .about-bts-item--tall { grid-row: span 2; }
  .about-bts-item--tall img { aspect-ratio: auto; min-height: 100%; }
  .about-bts-quote { grid-column: span 2; }
}

/* En mobile la imagen del bloque 02 va antes que la lista de países, para
   no dejar el encabezado colgando lejos de su propio texto. */
@media (max-width: 860px) {
  .about-split--wide-left .about-figure { order: -1; }
  .about-portrait-badge { left: 0; }
}

/* CTA a la página "Sobre mí" dentro de la sección Estudio del home: mismo
   tamaño que los .btn-ghost-sm que la acompañan en la fila. */
.studio-link-cta { font-size: .92rem; padding: 13px 22px; }

/* ==========================================================================
   Preloader (solo index.html) — "La línea que te construye"
   El <head> agrega .has-preloader y data-pl="full|short|calm" al <html>.
   Acá van el papel (dos mitades que se separan desde la banda, --cut lo
   pone el script), los estados iniciales del JO y la banda mientras corre
   y la red de seguridad. La secuencia: script inline después del hero.
   ========================================================================== */

.preloader { display: none; }

html.has-preloader .preloader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: pointer;
  /* Red de seguridad: si el script falla, el papel se va solo. */
  animation: plFailsafe .4s ease 5s forwards;
}
/* Sin scroll mientras corre. Si salta la red de seguridad, plUnlock lo
   devuelve al mismo tiempo que se va el papel. */
html.has-preloader:not(.preloader-done) {
  overflow: hidden;
  animation: plUnlock 0s 5s forwards;
}
/* Reserva el lugar de la barra de scroll: sin esto, al devolver el scroll
   la barra reaparece, la página se corre 15 px y suma CLS. */
html.has-preloader { scrollbar-gutter: stable; }

.pl-half {
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--bg);
  /* Papel milimetrado: grilla de 48 px en tinta al 5 %. */
  background-image:
    linear-gradient(rgba(36,51,58,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,51,58,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  will-change: transform;
}
/* +1px: las mitades se solapan para que no quede una costura subpíxel
   en el corte (dejaba ver la foto por debajo). */
.pl-half--top { top: 0; height: calc(var(--cut, 50vh) + 1px); }
/* Corre la grilla para que continúe la de arriba sin salto. */
.pl-half--bottom {
  top: var(--cut, 50vh);
  bottom: 0;
  background-position: 0 calc(var(--cut, 50vh) * -1);
}
.pl-label {
  position: absolute;
  left: var(--gutter, 24px);
  bottom: 24px;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--light-text-mute);
}
/* Solo se construye el signo en la versión completa. */
html:not([data-pl="full"]) .pl-label { display: none; }

/* El JO y la banda se dibujan por encima del papel mientras corre (no en
   la versión calma: ahí el papel solo se funde). */
html.has-preloader:not(.preloader-done):not([data-pl="calm"]) .hero-jo,
html.has-preloader:not(.preloader-done):not([data-pl="calm"]) .hero-band {
  position: relative;
  z-index: 10000;
}
@media (max-width: 767px) {
  html.has-preloader:not(.preloader-done):not([data-pl="calm"]) .hero-jo,
  html.has-preloader:not(.preloader-done):not([data-pl="calm"]) .hero-band { position: absolute; }
}
/* Banda plegada hasta que el script la estire. */
html.has-preloader:not(.preloader-done):not([data-pl="calm"]) .hero-band {
  transform: scale(0, .03);
  animation: plReveal 0s 5s forwards;
}
html.has-preloader:not(.preloader-done):not([data-pl="calm"]) .hero-band > * {
  opacity: 0;
  animation: plReveal 0s 5s forwards;
}
/* Primera visita: el JO arranca oculto hasta que el script lo centra, y su
   trazo arranca sin dibujar. */
html[data-pl="full"]:not(.preloader-done) .hero-jo {
  opacity: 0;
  animation: plReveal 0s 5s forwards;
}
html[data-pl="full"]:not(.preloader-done) .jo-mark {
  fill: var(--brand);
  fill-opacity: 0;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: plInk 0s 5s forwards;
}

@keyframes plFailsafe { to { opacity: 0; visibility: hidden; } }
@keyframes plReveal { to { opacity: 1; transform: none; } }
@keyframes plUnlock { to { overflow: visible; } }
@keyframes plInk { to { fill: var(--brand-2); fill-opacity: 1; stroke-opacity: 0; } }

/* ==========================================================================
   Preloader "afiche rasgado" (solo sobre-mi.html, en cada carga)
   Un afiche callejero pegado sobre la página: aparece el logo, el papel se
   rasga de izquierda a derecha y las dos mitades salen una hacia arriba y
   otra hacia abajo dejando ver el hero.
   · Lo activa un script inline en el <head> (.has-tear en el <html>); sin JS,
     con prefers-reduced-motion o con #hash en la URL no aparece.
   · La intro corre en UNA sola capa (.tl-intro). Las mitades son clones
     estáticos de esa capa ya terminada, recortados por la misma línea de
     rotura: así es imposible que las dos mitades se desfasen.
   · Todo lo que se mueve es transform/opacity (corre en la GPU). La línea de
     rotura y los clip-path los arma el script junto al markup #tear-loader.
   ========================================================================== */

.tear-loader { display: none; }

html.has-tear .tear-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  overflow: hidden;
  /* Tapa la costura antialiaseada entre las dos mitades; el script lo quita
     cuando la hoja se abre. */
  background: var(--bg-dark-2);
  /* En mobile no deja arrastrar la página de abajo mientras está. No se
     bloquea con overflow:hidden a propósito: al soltarlo aparece la barra
     de scroll y todo el layout salta 15 px justo en la apertura. */
  touch-action: none;
  cursor: pointer;
  /* Red de seguridad: si el script falla, el overlay se va solo. */
  animation: plFailsafe .4s ease 7s forwards;
}

/* El hero espera congelado y arranca cuando la hoja se abre. */
html.has-tear:not(.tear-open) .about-hero-eyebrow,
html.has-tear:not(.tear-open) .about-title .line,
html.has-tear:not(.tear-open) .about-lead,
html.has-tear:not(.tear-open) .about-stats,
html.has-tear:not(.tear-open) .about-portrait-wrap {
  animation-play-state: paused;
}

/* Mitades --------------------------------------------------------------- */
.tl-half {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.tl-half--top { transform-origin: 0 0; }
.tl-half--bottom { transform-origin: 100% 100%; }

/* Corte del papel: alma clara y fibrosa que asoma por el borde roto. */
.tl-fiber {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #EEEBE4, #D8D3C8);
}
/* Sombra que proyecta la mitad de arriba sobre la página al levantarse.
   El blur va en el contenedor y el recorte en el hijo (CSS aplica filter
   antes que clip-path; al revés el borde quedaría duro). */
.tl-shadow {
  position: absolute;
  inset: 0;
  filter: blur(9px);
}
.tl-shadow > span {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
/* Rasgado: banda angosta (no pantalla completa) que se descubre con dos
   translate opuestos — barato, sin repintar en cada frame. El script le
   ajusta el top para centrarla en la línea de rotura. */
.tl-rip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 90px);
  height: 180px;
  overflow: hidden;
  transform: translate3d(-101%,0,0);
  will-change: transform;
}
.tl-rip-inner {
  position: absolute;
  inset: 0;
  transform: translate3d(101%,0,0);
  will-change: transform;
}

/* Afiche --------------------------------------------------------------- */
.tl-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink-dark);
  font-family: var(--font-display);
  /* Arrugas del engrudo + viñeta. */
  background:
    linear-gradient(98deg, transparent 27%, rgba(255,255,255,.035) 27.4%, transparent 30%),
    linear-gradient(81deg, transparent 63%, rgba(0,0,0,.2) 63.3%, rgba(255,255,255,.025) 64.2%, transparent 67%),
    linear-gradient(176deg, transparent 78%, rgba(255,255,255,.03) 78.3%, transparent 81%),
    radial-gradient(120% 85% at 50% 45%, transparent 38%, rgba(0,0,0,.55) 100%),
    var(--bg-dark-2);
}
.tl-intro { z-index: 2; }
/* Grano del papel. */
.tl-face::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* "SOBRE MÍ" gigante en contorno, recortado por los bordes del afiche. */
.tl-big-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.tl-big {
  display: block;
  font-size: clamp(5.5rem, 27vw, 24rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243,242,243,.1);
  animation: tlBig 1.3s var(--ease-main) both;
}

.tl-brand {
  position: relative;
  z-index: 1;
  width: min(74vw, 560px);
}
.tl-logo-wrap {
  position: relative;
  overflow: hidden;
}
.tl-logo {
  display: block;
  width: 100%;
  height: auto;
  animation: tlSlit .9s var(--ease-main) .15s both;
}
/* Brillo de tinta fresca que barre el logo (máscara = el mismo SVG). */
.tl-gloss {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url("assets/brand/OrlandoStudio_Negativo.svg") 0 0 / 100% 100% no-repeat;
          mask: url("assets/brand/OrlandoStudio_Negativo.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.tl-gloss::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 10%, rgba(194,220,175,.95) 50%, transparent 90%);
  transform: translate3d(-110%,0,0);
  animation: tlGloss .75s cubic-bezier(.5,0,.25,1) .7s both;
}

.tl-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 2.8vw, 30px);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dark-text-secondary);
  animation: tlUp .7s var(--ease-main) .6s both;
}
.tl-meta span:last-child { color: var(--dark-text-mute); }

@keyframes tlBig   { from { opacity: 0; transform: translate3d(9%,0,0); } to { opacity: 1; transform: none; } }
@keyframes tlSlit  { from { transform: translate3d(0,105%,0); } to { transform: none; } }
@keyframes tlGloss { from { transform: translate3d(-110%,0,0); } to { transform: translate3d(380%,0,0); } }
@keyframes tlUp    { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }

/* La intro espera a que el logo y la tipografía estén listos. */
.tear-loader:not(.is-ready) .tl-intro *,
.tear-loader:not(.is-ready) .tl-intro *::before { animation-play-state: paused; }
/* Las mitades son el afiche ya terminado: sin animaciones propias. */
.tl-half .tl-face *,
.tl-half .tl-face *::before { animation: none !important; }