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

@font-face {
  font-family: 'Geist';
  src: 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;
  --mint: #C2DCAF;
  --ink: #24333A;
  --ink-dark: #F3F2F3;

  /* Alphas sobre oscuro */
  --dark-text-secondary: rgba(243,242,243,.72);
  --dark-text-tertiary: rgba(243,242,243,.62);
  --dark-text-tertiary-2: rgba(243,242,243,.66);
  --dark-text-mute: rgba(243,242,243,.5);
  --dark-placeholder: rgba(243,242,243,.42);
  --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 */
  --light-text-secondary: rgba(36,51,58,.78);
  --light-text-tertiary: rgba(36,51,58,.66);
  --light-text-tertiary-2: rgba(36,51,58,.68);
  --light-text-mute: rgba(36,51,58,.5);
  --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);

  /* Layout */
  --container-max: 1320px;
}

*, *::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(--brand-2); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--brand-2); color: var(--deep); }
::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(--deep);
  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;
}

/* ==========================================================================
   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");
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 55%, var(--mint));
  z-index: 70;
}

@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, .seal-ring--spin, .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 {
  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;
}
.btn-primary {
  background: var(--brand-2);
  color: var(--deep);
}
.btn-primary:hover {
  background: var(--mint);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,167,112,.28);
  color: var(--deep);
}
.btn-header {
  font-size: .88rem;
  padding: 11px 20px;
}
.btn-hero {
  font-size: 1rem;
  font-weight: 640;
  padding: 17px 30px;
}
.btn-hero.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0,167,112,.3);
}
.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);
  transform: translateY(-3px);
  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);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,131,88,.28);
  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 .3s, opacity .3s;
}
.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; }
.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:
    radial-gradient(circle at 100% 0%, rgba(0,167,112,.16), transparent 55%),
    var(--deep);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  clip-path: circle(3% at calc(100% - 38px) 36px);
  transition: clip-path .65s var(--ease-main), visibility 0s .65s;
}
.mobile-menu.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 38px) 36px);
  transition: clip-path .65s var(--ease-main);
}

.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 .4s var(--ease-main);
}
.mobile-menu-close:hover { border-color: var(--mint); background: rgba(243,242,243,.07); transform: rotate(90deg); }

.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 ol { display: flex; flex-direction: column; }
.mobile-nav li {
  border-top: 1px solid var(--dark-hairline);
  opacity: 0;
  transform: translateY(18px);
}
.mobile-nav li:last-child { border-bottom: 1px solid var(--dark-hairline); }
.mobile-menu.is-open .mobile-nav li { animation: osRise .6s var(--ease-main) both; }
.mobile-menu.is-open .mobile-nav li:nth-child(1) { animation-delay: .2s; }
.mobile-menu.is-open .mobile-nav li:nth-child(2) { animation-delay: .27s; }
.mobile-menu.is-open .mobile-nav li:nth-child(3) { animation-delay: .34s; }
.mobile-menu.is-open .mobile-nav li:nth-child(4) { animation-delay: .41s; }
.mobile-menu.is-open .mobile-nav li:nth-child(5) { animation-delay: .48s; }

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  color: var(--ink-dark);
  transition: gap .35s var(--ease-main), color .3s;
}
.mobile-nav a:hover,
.mobile-nav a:active { gap: 22px; color: var(--brand-2); }
.mobile-nav-index {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--dark-text-mute);
}
.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);
}
.mobile-menu.is-open .mobile-menu-bottom { animation: osRise .6s var(--ease-main) .58s both; }
.mobile-menu-cta { width: 100%; justify-content: center; margin-top: 8px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px,4vw,56px) 0 clamp(48px,6vw,88px);
}
.hero-glow-1 {
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(900px,90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,167,112,.14), rgba(0,131,88,.04) 46%, transparent 70%);
  filter: blur(20px);
}
.hero-glow-2 {
  position: absolute;
  left: -16%;
  bottom: -30%;
  width: min(700px,80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(194,220,175,.07), transparent 68%);
}

.hero-content { position: relative; }

.hero-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px,4vw,48px);
  animation: osFade 1s ease both;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(0,167,112,.4);
  background: rgba(0,167,112,.1);
  color: var(--mint);
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(0,167,112,.22);
}
.hero-meta-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(243,242,243,.22), transparent);
}
.hero-meta-location {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .12em;
  color: rgba(243,242,243,.42);
  white-space: nowrap;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(32px,5vw,72px);
  align-items: end;
}

.hero-title {
  font-size: clamp(2.9rem,6.6vw,5.6rem);
  line-height: .94;
  letter-spacing: -.045em;
  font-weight: 600;
  margin-bottom: clamp(24px,3vw,36px);
}
.hero-title .line {
  display: block;
  animation: osRise 1s var(--ease-main) both;
}
.hero-title .line:nth-child(2) { animation-delay: .1s; }
.hero-title .line--accent {
  color: var(--brand-2);
  font-style: italic;
  font-weight: 500;
  animation-delay: .2s;
}

.hero-sub {
  max-width: 52ch;
  font-family: var(--font-display);
  font-size: clamp(1.02rem,1.35vw,1.24rem);
  line-height: 1.62;
  color: var(--dark-text-secondary);
  margin-bottom: clamp(28px,3.5vw,40px);
  animation: osRise 1s var(--ease-main) .3s both;
}

@media (min-width: 641px) {
  .hero-sub { font-weight: 260; }
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: osRise 1s var(--ease-main) .4s both;
}

.hero-seal-wrap {
  position: relative;
  align-self: center;
  width: min(460px,82vw);
  aspect-ratio: 1;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(8px,2vw,18px);
}

/* A partir de acá el sello se saca del flujo del grid y se centra
   respecto a la altura visible de pantalla, no respecto al bloque de
   texto (que es más alto y lo empujaba hacia abajo). El padding
   reservado en el texto usa la MISMA medida que el ancho del sello
   para que nunca se superpongan, en cualquier ancho de pantalla. */
@media (min-width: 680px) {
  .hero-grid {
    --seal-size: clamp(260px, 34vw, 500px);
    min-height: min(680px, calc(100vh - 260px));
    min-height: min(680px, calc(100svh - 260px));
  }
  .hero-grid > :first-child { padding-right: calc(var(--seal-size) + 64px); }
  .hero-seal-wrap {
    position: absolute;
    top: 0;
    right: -16px;
    width: var(--seal-size);
    margin: 0;
  }
}
.seal-ring {
  position: absolute;
  border-radius: 50%;
}
.seal-ring--spin {
  width: min(500px,96%);
  aspect-ratio: 1;
  border: 1px solid rgba(243,242,243,.1);
  animation: osSpin 46s linear infinite;
}
.seal-ring-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  transform: translateX(-50%);
}
.seal-ring--dashed {
  width: min(430px,82%);
  aspect-ratio: 1;
  border: 1px dashed rgba(194,220,175,.16);
}
.hero-seal {
  position: relative;
  width: min(460px,87%);
  height: auto;
  animation: osFade 1.4s ease .3s both;
}

.stats-grid {
  margin-top: clamp(44px,6vw,80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap: 1px;
  background: var(--dark-hairline);
  border: 1px solid var(--dark-hairline);
  border-radius: 20px;
  overflow: hidden;
}
.stat-cell { background: var(--bg-dark-2); padding: 24px 26px; }
.stat-num {
  display: block;
  font-size: clamp(2rem,3.4vw,2.8rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink-dark);
}
.stat-num--accent { color: var(--brand-2); }
.stat-label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark-text-mute);
}

/* ==========================================================================
   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-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .16em;
  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; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .7rem;
  line-height: 1.7;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--dark-text-mute);
  margin-bottom: 20px;
}
.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 .h2 { max-width: 22ch; }
.services-lead {
  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); }
.service-num {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--brand-2);
}
.service-card h3 {
  margin: 20px 0 12px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
.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: rgba(243,242,243,.8); 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-selected="true"] {
  background: var(--brand-2);
  color: var(--deep);
  border-color: var(--brand-2);
}

.works-rows { border-top: 1px solid var(--dark-divider); }
.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-num {
  font-family: var(--font-display);
  font-size: .72rem;
  color: rgba(243,242,243,.4);
}
.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-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243,242,243,.45);
}
.work-row-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--dark-border-2);
  display: grid;
  place-items: center;
  color: var(--brand-2);
  font-size: .9rem;
}

.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-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243,242,243,.45);
}

.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-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(1000px,95vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,167,112,.16), transparent 62%);
}
.pullquote-content { position: relative; text-align: center; }
.pullquote-eyebrow {
  font-family: var(--font-display);
  font-size: .7rem;
  line-height: 1.7;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--dark-text-mute);
  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;
}
.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-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--brand);
}
.process-duration {
  font-family: var(--font-display);
  font-size: .7rem;
  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: rgba(243,242,243,.7);
  max-width: 52ch;
}
.studio-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.studio-portrait-wrap { position: relative; }
.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-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint);
}
.studio-badge-name {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -.02em;
}

/* Testimonios */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(14px,1.6vw,22px);
}
.testimonial {
  background: var(--bg-dark-2);
  border: 1px solid var(--dark-hairline);
  border-radius: var(--r-card);
  padding: clamp(26px,3vw,36px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color .4s, transform .5s var(--ease-main);
}
.testimonial:hover { border-color: rgba(194,220,175,.36); transform: translateY(-5px); }
.testimonial-mark {
  font-size: 2.4rem;
  line-height: .6;
  color: var(--brand-2);
}
.testimonial p {
  font-size: 1.02rem;
  line-height: 1.62;
  color: rgba(243,242,243,.82);
  flex: 1;
}
.testimonial-foot {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--dark-hairline);
  padding-top: 18px;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,167,112,.16);
  color: var(--mint);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 620;
  flex-shrink: 0;
}
.testimonial-foot cite { display: block; font-style: normal; font-weight: 620; font-size: .98rem; }
.testimonial-foot .role { display: block; font-size: .84rem; color: var(--dark-text-mute); }

/* 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-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); }
.faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--light-hairline);
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--brand);
  transition: transform .4s cubic-bezier(.65,0,.35,1), background .3s;
}
.faq-item.is-open .faq-icon { transform: rotate(135deg); background: var(--brand); color: #fff; }
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .45s cubic-bezier(.65,0,.35,1);
}
.faq-item.is-open .faq-answer-wrap { grid-template-rows: 1fr; }
.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-glow {
  position: absolute;
  right: -10%;
  top: -20%;
  width: min(760px,80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,167,112,.2), transparent 65%);
}
.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-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,242,243,.45);
  margin-bottom: 7px;
}
.contact-socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.contact-social {
  border: 1px solid var(--dark-border-2);
  border-radius: var(--r-pill);
  padding: 9px 15px;
  font-size: .86rem;
  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); }
.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: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  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); transform: rotate(90deg); }

@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-family: var(--font-display);
  font-size: .72rem;
  line-height: 1.7;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--brand-2);
  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-quote {
  margin: 0 0 44px;
  padding-left: clamp(16px,4vw,24px);
  border-left: 2px solid var(--brand-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.97rem,3.5vw,1.1rem);
  line-height: 1.65;
  color: var(--dark-text-secondary);
}

.brief-form { display: block; }
.brief-section { margin-bottom: 44px; }
.brief-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 26px;
}
.brief-section-num {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--brand-2);
}
.brief-section-num--light { color: var(--mint); }
.brief-section-label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dark-text-mute);
}
.brief-section-line { flex: 1; height: 1px; background: var(--dark-border-3); }

.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: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dark-text-mute);
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.4;
}
.brief-field span em { color: var(--dark-text-tertiary-2); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.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; }
.brief-field input:focus,
.brief-field textarea:focus { outline: none; border-color: var(--brand-2); background: rgba(243,242,243,.14); }
.brief-field input::placeholder,
.brief-field textarea::placeholder { color: var(--dark-placeholder); opacity: 1; }

.brief-budget-label { margin-bottom: 16px; }
.brief-budget-options { display: grid; gap: 12px; }
.brief-budget-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--dark-border-3);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.brief-budget-option:hover { border-color: var(--dark-border-2); }
.brief-budget-option.is-selected { border-color: var(--brand-2); background: rgba(0,167,112,.1); }
.brief-budget-option input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.brief-budget-option span:last-child { font-size: 1rem; font-weight: 500; color: var(--ink-dark); }
.brief-budget-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--dark-border-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .2s ease;
}
.brief-budget-option.is-selected .brief-budget-dot { border-color: var(--brand-2); }
.brief-budget-dot-inner { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-2); opacity: 0; transition: opacity .15s ease; }
.brief-budget-option.is-selected .brief-budget-dot-inner { opacity: 1; }

.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(--deep);
  border: none;
  border-radius: 2px;
  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: opacity .2s ease, transform .2s ease;
}
.brief-submit:hover { opacity: .88; transform: translateY(-1px); }
.brief-error { margin-top: 16px; }

.brief-thanks:not([hidden]) { display: flex; flex-direction: column; justify-content: center; min-height: 40vh; }
.brief-thanks-text {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  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; gap: 20px; }
.footer-nav a {
  color: rgba(243,242,243,.6);
  font-size: .9rem;
  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-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .06em;
  color: rgba(243,242,243,.4);
}
.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);
  transition: transform .6s var(--ease-main);
  max-width: calc(100vw - 32px);
}
.floating-dock.is-visible { transform: translate(-50%,0); }
.floating-dock-text {
  font-size: .9rem;
  color: rgba(243,242,243,.8);
  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;
  pointer-events: none;
  transform: translateY(140%);
  transition: transform .5s var(--ease-main), opacity .4s, background .3s, border-color .3s, color .3s;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--deep);
}

/* ==========================================================================
   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; }
  .hero-sub { font-size: .95rem; font-weight: 340; }
}

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

/* La fila de meta del hero (badge + separador + ubicación) no entra en una
   sola línea en pantallas angostas: se corta el texto en vez de ajustarse. */
@media (max-width: 480px) {
  .hero-meta-row { flex-wrap: wrap; row-gap: 10px; }
  .hero-meta-line, .hero-meta-location { display: none; }
}

/* 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);
  color: var(--brand);
  background: rgba(0,131,88,.06);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   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 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brand);
  animation: osFade 1s ease both;
}
.about-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(0,131,88,.14);
  flex-shrink: 0;
}

.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;
}
.about-stat { border-top: 1px solid var(--light-hairline); 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: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--light-text-mute);
}

.about-portrait-wrap {
  position: relative;
  animation: osRise 1.1s var(--ease-main) .25s both;
}
.about-portrait {
  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);
}
.about-portrait-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,.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: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  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);
}

/* --------------------------------------------------------------------------
   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 {
  background: var(--deep);
  border-radius: var(--r-card);
  padding: clamp(10px,1.4vw,16px);
}
.about-map { display: block; width: 100%; height: auto; aspect-ratio: 1160/498; }
.about-map text {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 560;
  fill: var(--deep);
  letter-spacing: -.01em;
}
.about-map-pin { cursor: default; }

/* --------------------------------------------------------------------------
   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-family: 'Newsreader', Georgia, serif;
  font-size: clamp(3.4rem,7vw,5.6rem);
  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);
}
.about-timeline-section .process-stage {
  letter-spacing: .14em;
  text-transform: uppercase;
}

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

.about-bts {
  background: var(--mint);
  color: var(--ink);
  padding: clamp(72px,10vw,150px) 0;
}
.about-bts .eyebrow--light { color: rgba(36,51,58,.55); }

.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: var(--light-text-tertiary);
  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 {
  color: var(--light-text-tertiary);
  font-size: .88rem;
  letter-spacing: .04em;
  transition: color .3s;
}
.about-cta-socials a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   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; }