@font-face {
  font-family: "Geist";
  src: url("fuentes/geist.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tinta: #030712;
  --gris: #6b7280;
  --gris-claro: #9ca3af;
  --filete: #e5e7eb;
  --pastilla: #eeedf3;
  --naranja: #fe6e0f;
  --px: 20px;
  --hero-cambio: 1.4s;
}
@media (min-width: 768px) { :root { --px: 64px; --hero-cambio: 1s; } }
@media (min-width: 1280px) { :root { --px: max(120px, calc((100vw - 1600px) / 2)); } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.3px;
}
body.sin-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: pretty; font-weight: 500; }
section[id] { scroll-margin-top: 68px; }

:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: #fff; padding: 8px 14px; border: 1px solid var(--tinta); border-radius: 999px; font-weight: 500; }
.skip:focus { top: 12px; }


nav#nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--px);
  background: #fff;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
nav#nav.nav--hidden { transform: translateY(-100%); }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand .signo { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.nav-brand-name { display: inline-block; min-width: 120px; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; white-space: nowrap; }
.nav-center { display: none; align-items: center; gap: 32px; }
.nav-contact { display: none; }
@media (min-width: 768px) {
  .nav-center { display: flex; }
  .nav-contact { display: block; }
  .nav-menu-btn { display: none; }
}
.nav-link { font-size: 15px; font-weight: 500; letter-spacing: -0.3px; white-space: nowrap; }
.nav-link-plus { display: inline-block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.nav-link:hover .nav-link-plus, .nav-link:focus-visible .nav-link-plus { transform: rotate(90deg); }
.nav-menu-btn { font-size: 15px; font-weight: 500; letter-spacing: -0.3px; padding: 0; }


.menu { position: fixed; inset: 0; z-index: 200; background: #fff; display: flex; flex-direction: column; padding: 0 var(--px); }
.menu[hidden] { display: none; }
.menu-top { height: 68px; display: flex; align-items: center; justify-content: space-between; flex: none; }
.menu-close { font-size: 15px; font-weight: 500; letter-spacing: -0.3px; }
.menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.menu-link { font-size: clamp(2.5rem, 12vw, 5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.045em; display: block; }


.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(68px + clamp(40px, 5.5vh, 100px)) var(--px) clamp(40px, 5.5vh, 100px);
  background: #fff;
}
@media (min-width: 768px) { .hero { justify-content: center; min-height: 100vh; } }
.hero-in { width: 100%; max-width: 700px; display: flex; flex-direction: column; }
.hero-h1 { font-size: clamp(2.5rem, 7.5vw, 6.25rem); font-weight: 500; line-height: .95; letter-spacing: -0.045em; margin: 0; }
.hl { display: block; overflow: hidden; padding-bottom: .15em; margin-bottom: -.15em; }
.hl-in { display: block; will-change: transform; }
.hl-in.gris { color: var(--gris-claro); }
.hl-in.negro { color: var(--tinta); }
.slot { display: inline-block; overflow: hidden; vertical-align: bottom; position: relative; }
.slot-fantasma { display: grid; visibility: hidden; white-space: nowrap; user-select: none; pointer-events: none; }
.slot-fantasma > span { grid-area: 1 / 1; }
.slot-actual, .slot-previa { display: block; position: absolute; top: 0; left: 0; white-space: nowrap; }
.hero-media {
  display: block; width: 100%; height: min(360px, 25vh); position: relative; overflow: hidden;
  margin: clamp(16px, 2.2vh, 40px) 0;
}
.hero-img { position: absolute; inset: 0; display: block; will-change: transform; }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.97) contrast(1.02); }
.hero-stats {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 40px;
  padding: clamp(16px, 3vh, 40px) 0;
  font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -0.3px;
}
.hero-stats-col { display: contents; }
.hero-stats .k { color: var(--gris); white-space: nowrap; }
.hero-stats .v { color: var(--tinta); }
@media (min-width: 768px) {
  .hero-stats { display: flex; gap: 57px; }
  .hero-stats-col { display: flex; flex-direction: column; flex: 1; }
}

.js .hero:not(.hero--listo) .hl-in { transform: translateY(110%); }
.js .hero:not(.hero--listo) .hero-img { transform: translateY(100%); }
.js .hero:not(.hero--listo) .hero-stats { opacity: 0; }


.section-inner { padding-top: 120px; }
.bloque { padding: 0 var(--px) clamp(48px, 8vw, 120px); background: #fff; }
.bordeado { border-top: 1px solid var(--filete); }
.section-label-row { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; margin-bottom: 32px; font-weight: 500; }
.section-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.prose { text-wrap: pretty; max-width: 740px; }
.label { font-weight: 500; }


.js [data-sr] { opacity: 0; transition: opacity 1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--sr-delay, 0s); }
.js [data-sr].sr-visible { opacity: 1; }
.line-clip { display: block; overflow: hidden; margin-bottom: -.12em; padding-bottom: .12em; }
.line-clip-inner { display: block; }
.js .line-clip-inner { transform: translateY(110%); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--sr-delay, 0s); }
.js [data-sr].sr-visible .line-clip-inner { transform: translateY(0); }
[data-curtain] { position: relative; overflow: hidden; }
.js [data-curtain]::after {
  content: ""; position: absolute; inset: 0; z-index: 2; background: #f9fafb; transform-origin: bottom;
  transform: scaleY(1); transition: transform .9s cubic-bezier(.76, 0, .24, 1);
}
.js [data-curtain].curtain-visible::after { transform: scaleY(0); }


.clients-section { background: #fff; padding: 0 var(--px) clamp(48px, 8vw, 120px); overflow: hidden; }
.clients-inner { border-top: 1px solid var(--filete); padding-top: clamp(80px, 8vw, 120px); }
.clients-grid { display: flex; flex-wrap: wrap; }
.clients-cell { width: 33.3333%; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; color: var(--tinta); }
.clients-cell span, .clients-marquee-item span { font-size: 13px; line-height: 1; color: var(--gris); letter-spacing: 0; }
@media (min-width: 768px) { .clients-cell { width: 25%; } }
.clients-marquee { margin-top: 24px; display: none; overflow: hidden; }
.clients-marquee-track { display: flex; width: max-content; animation: clients-scroll 20s linear infinite; }
.clients-marquee-item { flex: none; height: 160px; width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
@keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .clients-section { padding-left: 0; padding-right: 0; }
  .clients-inner { margin: 0 var(--px); }
  .clients-marquee { display: block; margin: 24px 0 0; }
  .clients-grid { display: none; }
}


.about-photo { width: 100%; max-width: 242px; aspect-ratio: 242 / 341; background: #fff; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.02); }
.about-text { display: flex; flex-direction: column; gap: 24px; }
.h2 { font-size: clamp(1.75rem, 5.3vw, 4.25rem); line-height: 1; letter-spacing: -0.045em; }
.h2-exp { font-size: clamp(2rem, 5.3vw, 4.25rem); }
.services { display: flex; gap: 24px; font-size: clamp(1rem, 1.7vw, 1.375rem); line-height: 1.5; margin-top: 16px; }
.services-col { flex: 1; display: flex; flex-direction: column; gap: 24px; }


.portfolio-row { padding: 32px 0; color: inherit; transition: opacity .4s; }
.portfolio-row--hoverable { cursor: pointer; }
.row-text { padding-right: 64px; display: flex; flex-direction: column; gap: 24px; }
.portfolio-row-title { font-size: clamp(1.25rem, 2.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.045em; }
.portfolio-row-title-inner {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(var(--tinta), var(--tinta)); background-position: 0 90%; background-repeat: no-repeat; background-size: 0 1px;
  transition: background-size .5s cubic-bezier(.16, 1, .3, 1);
}
.portfolio-row--link:hover .portfolio-row-title-inner, .portfolio-row--link:focus-visible .portfolio-row-title-inner { background-size: 100% 1px; }
.portfolio-listing-image { display: block; background: #fff; aspect-ratio: 3 / 2; position: relative; overflow: hidden; }
.portfolio-listing-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.97) contrast(1.02); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.portfolio-row--link:hover .portfolio-listing-image img, .portfolio-row--hoverable:hover .portfolio-listing-image img { transform: scale(1.04); }
#trabajos:has(.portfolio-row--link:hover, .portfolio-row--hoverable:hover) .portfolio-row:not(:hover) { opacity: .4; }
@media (hover: hover) { .portfolio-listing-image, .footer-rome { cursor: none; } }
.pill, .tag-pill {
  font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; letter-spacing: .07em;
}
.portfolio-tags-left { display: flex; flex-wrap: wrap; gap: 6px; }
.portfolio-tags-left .pill { background: var(--pastilla); border-radius: 999px; padding: 4px 12px; color: var(--tinta); }
.pill--soon { border: 1px solid var(--filete); border-radius: 999px; padding: 4px 12px; align-self: flex-start; color: var(--tinta); }
.portfolio-tags-overlay { display: none; }
@media (min-width: 768px) {
  .portfolio-tags-left { display: none; }
  .portfolio-tags-overlay { display: flex; position: absolute; top: 16px; left: 16px; z-index: 10; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
  .tag-pill {
    color: var(--tinta); background: #ffffffbf; -webkit-backdrop-filter: blur(.2em); backdrop-filter: blur(.2em);
    border-radius: 999px; padding: .45em .9em; opacity: 0; visibility: hidden; transform: translateY(20px); will-change: transform, opacity;
    transition: opacity .35s cubic-bezier(.17, .17, .2, 1), transform .35s cubic-bezier(.17, .17, .2, 1), visibility .35s cubic-bezier(.17, .17, .2, 1);
  }
  .tag-pill:nth-child(2) { transition-delay: 50ms; }
  .tag-pill:nth-child(3) { transition-delay: .1s; }
  .tag-pill:nth-child(4) { transition-delay: .15s; }
  .portfolio-row:hover .tag-pill, .portfolio-row:focus-visible .tag-pill { opacity: 1; visibility: visible; transform: translateY(0); }
  .portfolio-row:not(:hover) .tag-pill:nth-child(1) { transition-delay: 0s; }
  .portfolio-row:not(:hover) .tag-pill:nth-child(2) { transition-delay: 50ms; }
}


.exp-col { display: flex; flex-direction: column; gap: 40px; }
.exp-list { display: flex; flex-direction: column; gap: 24px; }
.exp-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-top: 1px solid var(--filete); padding-top: 24px; }
.exp-row:first-child { border-top: 0; padding-top: 0; }
.exp-main { display: flex; flex-direction: column; gap: 3px; }
.exp-company { font-size: 22px; font-weight: 400; line-height: 1.5; letter-spacing: -0.3px; }
.exp-sub, .exp-date { color: var(--gris); font-size: 15px; line-height: 1.5; letter-spacing: -0.3px; }
.exp-date { white-space: nowrap; }


.pie { background: #fff; overflow: hidden; }
.pie-in { padding: 0 var(--px); }
.footer-top-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-top: 1px solid var(--filete); padding-top: var(--pie-pt, 32px); padding-bottom: 40px;
}
@media (max-width: 1279px) { .pie { --pie-pt: 80px; } }
.pie-txt { font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.3px; color: var(--tinta); }
.nowrap { white-space: nowrap; }
.footer-social { display: flex; gap: 8px; }
.footer-link { padding: 4px 8px; }
.footer-wordmark { padding-bottom: 16px; padding-top: 0; }
@media (min-width: 768px) { .footer-wordmark { padding-top: 48px; } }
.footer-rome { display: block; color: var(--tinta); user-select: none; transition: color .5s cubic-bezier(.16, 1, .3, 1); }
.footer-rome:hover { color: var(--gris-claro); }
.footer-rome svg { width: 100%; height: auto; display: block; }
.aviso { padding: 8px 0 28px; }
.aviso a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .footer-cta { display: none; } }
@media (max-width: 767px) {
  .footer-top-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-social { justify-content: space-between; width: 100%; }
}


.custom-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; width: 120px; height: 120px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--naranja); color: #0c0c0c; font-size: 13px; font-weight: 500; letter-spacing: -.2px; line-height: 1.3;
  pointer-events: none; opacity: 0; will-change: left, top, transform;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .25s;
}
.custom-cursor.cursor--visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.custom-cursor.cursor--disabled { opacity: .5; }
@media (hover: none) { .custom-cursor { display: none; } }


.panel { position: fixed; inset: 0; z-index: 400; background: #fff; overflow-y: auto; transform: translateY(100%); visibility: hidden; transition: transform .7s cubic-bezier(.76, 0, .24, 1), visibility 0s .7s; }
.panel.abierto { transform: translateY(0); visibility: visible; transition: transform .7s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
.panel[hidden] { display: block; }
.panel-top { position: sticky; top: 0; z-index: 2; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--px); background: #fff; }
.panel-in { padding: 64px var(--px) 96px; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.panel-text { display: flex; flex-direction: column; gap: 24px; }
.panel-titulo { font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: 1; letter-spacing: -0.045em; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-tags span { background: var(--pastilla); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.panel-media { aspect-ratio: 3 / 2; background: #f9fafb; overflow: hidden; }
.panel-media:empty { display: none; }
.panel-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.97) contrast(1.02); }
.panel-in.solo { grid-template-columns: 1fr; max-width: 1000px; }
.panel-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; max-width: 740px; }
.panel-form[hidden], .panel-gracias[hidden] { display: none; }
.panel-form label { font-weight: 500; }
.panel-form textarea { font: inherit; font-size: clamp(1rem, 1.7vw, 1.375rem); letter-spacing: -0.3px; line-height: 1.5; border: 0; border-bottom: 1px solid var(--tinta); border-radius: 0; padding: 8px 0 12px; resize: vertical; background: transparent; color: var(--tinta); outline-offset: 6px; }
.panel-form textarea::placeholder { color: var(--gris-claro); }
.panel-form button { align-self: flex-start; padding: 6px 0; }
.panel-gracias { font-size: clamp(1rem, 1.7vw, 1.375rem); }
@media (max-width: 1024px) {
  .section-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 60px; padding-bottom: 60px; }
  .section-label-row { display: flex; justify-content: space-between; gap: 0; }
  .section-inner { padding-top: 120px; }
  .portfolio-listing-image { margin-bottom: 24px; }
  .portfolio-row { padding: 60px 0; }
  .panel-in { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .exp-vacio { display: none; }
}
@media (max-width: 767px) {
  #estudio h2 { line-height: 1.1; }
  .exp-company { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-sr], .js .line-clip-inner, .js [data-curtain]::after, .js .hero:not(.hero--listo) .hl-in, .js .hero:not(.hero--listo) .hero-img, .js .hero:not(.hero--listo) .hero-stats {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js [data-curtain]::after { display: none; }
  .clients-marquee-track { animation: none; }
  .panel, .panel.abierto, .portfolio-listing-image img, .tag-pill, .nav-link-plus, nav#nav { transition: none !important; }
}