/* =========================================================
   FONTS
   Cada peso de Palmore vive en su propia familia con
   font-weight:400 declarado, para evitar que Safari
   sintetice un bold adicional sobre el Semibold real.
   ========================================================= */
@font-face {
  font-family: 'Palmore Regular';
  src: url('../assets/fonts/Palmore.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Palmore Semibold';
  src: url('../assets/fonts/Palmore_Semibold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('../assets/fonts/Urbanist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
/* Los estilos del autor (display:flex en .stage-viewport, etc.) le ganan
   en cascada a la regla nativa del navegador [hidden]{display:none}, así
   que la reforzamos explícitamente para que "hidden" siempre oculte de
   verdad, sin importar qué otras reglas de display tenga el elemento. */
[hidden] {
  display: none !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
html { width: 100%; }
body {
  width: 100%;
  min-height: 100%;
  font-family: 'Urbanist', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* Figma "Lento" easing approximation — refinar tras comparar con el original */
:root {
  --ease-slow: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-transition: 400ms;   /* hover states, opening sequence */
  --dur-page: 600ms;         /* navegación entre "páginas" (click en nav / logo) */
}

/* =========================================================
   STAGE SCALING WRAPPER
   El frame de Figma mide 2002x1117. Escalamos en modo "cover"
   (llena TODO el viewport, sin franjas de color del fondo
   exterior) ya que no hay breakpoints responsive en el archivo.
   ========================================================= */
.stage-viewport {
  position: fixed;
  inset: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: #FFC76D;
  transition: background-color var(--dur-transition) var(--ease-slow);
}
body[data-state="final"] .stage-viewport {
  background-color: #467EE0;
}

.stage {
  width: 2002px;
  height: 1117px;
  position: relative;
  flex-shrink: 0;
  transform-origin: top center;
}

/* =========================================================
   OPENING SEQUENCE — 3 estados
   [data-state="0"]      -> OPENING 1.0
   [data-state="1"]      -> OPENING 1.1
   [data-state="final"]  -> BIG HEADER / MAIN
   ========================================================= */
.stage.opening {
  background-color: #FFC76D;
  transition: background-color var(--dur-transition) var(--ease-slow);
  overflow: hidden;
}
body[data-state="final"] .stage.opening {
  background-color: #467EE0;
}

/* --- BOLA --- */
.bola {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FFFFFF;
  left: 1747px;
  top: -141px;
  transition: left var(--dur-transition) var(--ease-slow),
              top var(--dur-transition) var(--ease-slow),
              width var(--dur-transition) var(--ease-slow),
              height var(--dur-transition) var(--ease-slow),
              background-color var(--dur-transition) var(--ease-slow);
}
body[data-state="1"] .bola { left: 1298px; top: 209px; }
body[data-state="final"] .bola { left: 1680px; top: 209px; }

/* --- SOMBRA --- */
.sombra {
  position: absolute;
  width: 101px;
  height: 30px;
  border-radius: 50%;
  background-color: #000000;
  left: 1173px;
  top: 1223px;
  transition: left var(--dur-transition) var(--ease-slow),
              top var(--dur-transition) var(--ease-slow),
              width var(--dur-transition) var(--ease-slow),
              height var(--dur-transition) var(--ease-slow);
}
body[data-state="1"] .sombra { left: 1564px; top: 788px; }
body[data-state="final"] .sombra { left: 1679px; top: 875px; }

/* --- LOGO moneko --- */
.logo {
  position: absolute;
  left: 202px;
  top: 1083px;
  font-family: 'Palmore Semibold', serif;
  font-weight: 400; /* el peso real lo da la familia, no font-weight, para evitar bold sintético */
  font-size: 300.551px;
  line-height: normal;
  color: #000000;
  white-space: nowrap;
  transition: left var(--dur-transition) var(--ease-slow),
              top var(--dur-transition) var(--ease-slow),
              font-size var(--dur-transition) var(--ease-slow),
              color var(--dur-transition) var(--ease-slow);
}
body[data-state="1"] .logo {
  left: 202px;
  top: 559px;
  font-family: 'Palmore Regular', serif;
  font-size: 300px;
  line-height: 280px;
  color: #000000;
}
body[data-state="final"] .logo {
  left: 40px;
  top: 21px;
  font-family: 'Palmore Semibold', serif;
  font-size: 65px;
  line-height: 60px;
  color: #FFFFFF;
}

/* --- LOADING DESCRIPTION (loop: concept design / illustration / ux/ui) --- */
.loading-description {
  position: absolute;
  left: 202px;
  top: 788px;
  width: 265px;
  height: 42px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms ease;
}
/* Aparece con un pequeño delay controlado desde JS (clase .loop-visible),
   para que primero se asiente el logo "moneko" y luego entre el loop. */
.loading-description.loop-visible { opacity: 1; }

.loading-track {
  display: flex;
  flex-direction: column;
  /* Ciclo real del prototipo: 3 x (retraso 300ms + Smart Animate 400ms) = 2100ms, ease-in-out */
  animation: loadingLoop 2100ms ease-in-out infinite;
}
.loading-track span {
  height: 42px;
  line-height: 42px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 38.154px;
  color: #000000;
  white-space: nowrap;
}
/* Cada fase: 300ms de espera (hold) + 400ms de transición (Smart Animate ease-in-out) */
@keyframes loadingLoop {
  0%      { transform: translateY(0); }      /* concept design */
  14.29%  { transform: translateY(0); }       /* fin del hold (300ms) */
  33.33%  { transform: translateY(-42px); }   /* fin de la transición (400ms) -> illustration */
  47.62%  { transform: translateY(-42px); }   /* fin del hold (300ms) */
  66.67%  { transform: translateY(-84px); }   /* fin de la transición (400ms) -> ux/ui */
  80.95%  { transform: translateY(-84px); }   /* fin del hold (300ms) */
  100%    { transform: translateY(-126px); }  /* fin de la transición (400ms) -> vuelve a concept design */
}

/* --- NAV (aparece solo en el estado final) --- */
.main-nav {
  position: absolute;
  left: 40px;
  top: 470.5px;
  width: 1918.156px;
  height: 177px;
  display: flex;
  align-items: center;
  gap: 54.386px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-transition) var(--ease-slow);
}
body[data-state="final"] .main-nav {
  opacity: 1;
  pointer-events: auto;
}
.nav-item {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 148px;
  line-height: 177px;
  color: #FFFFFF;
  white-space: nowrap;
  transition: color var(--dur-transition) var(--ease-slow);
}

/* =========================================================
   SECCIÓN 2 — BIG HEADER hover interactions
   (BIG HEADER/WORK, /SERVICES, /ABOUT, /CONTACT)
   Al pasar el cursor sobre cada palabra del nav:
   - la palabra hovereada cambia a #FFC76D
   - BOLA y SOMBRA hacen Smart Animate hacia una versión
     reducida posicionada justo encima de esa palabra
   Al quitar el cursor, todo vuelve a BIG HEADER / MAIN.
   ========================================================= */
.nav-item:hover {
  color: #FFC76D;
}
body[data-page="work"] .nav-item:hover {
  color: inherit; /* el hover de la mini-nav se implementará en su propia sección */
}

/* work */
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="work"]:hover) .bola {
  left: 209px; top: 457px; width: 26px; height: 26px; background-color: #FFC76D;
}
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="work"]:hover) .sombra {
  left: 203px; top: 664px; width: 37px; height: 10px;
}

/* services */
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="services"]:hover) .bola {
  left: 681px; top: 457px; width: 26px; height: 26px; background-color: #FFC76D;
}
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="services"]:hover) .sombra {
  left: 675px; top: 664px; width: 37px; height: 10px;
}

/* about */
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="about"]:hover) .bola {
  left: 1199px; top: 457px; width: 26px; height: 26px; background-color: #FFC76D;
}
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="about"]:hover) .sombra {
  left: 1192px; top: 668px; width: 37px; height: 10px;
}

/* contact */
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="contact"]:hover) .bola {
  left: 1699px; top: 457px; width: 26px; height: 26px; background-color: #FFC76D;
}
body:not([data-page="work"]) .stage.opening:has(.nav-item[data-key="contact"]:hover) .sombra {
  left: 1693px; top: 668px; width: 37px; height: 10px;
}

/* =========================================================
   SECCIÓN 3 — LANDING PAGE / WORK
   Página con scroll real. Usa el mismo sistema de escalado
   proporcional (referencia 2002px de ancho) que el resto del
   sitio, pero SIN "cover" vertical (aquí sí hay scroll).
   ========================================================= */
.page-screen {
  position: relative;
  z-index: 5;
  width: 100%;
  background-color: #FFFFFF;
  min-height: 100vh;
}

/* --- Logo + mini nav: fluyen con el scroll de la página (NO son sticky) --- */
.logo--page {
  position: absolute;
  left: 40px;
  top: 21px;
  font-family: 'Palmore Semibold', serif;
  font-size: 65px;
  line-height: 60px;
  color: #467EE0;
  white-space: nowrap;
  cursor: pointer;
}

.mini-nav {
  position: absolute;
  left: 1544px;
  top: 39px;
  width: 431px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36.285px;
}
.mini-nav-item {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #467EE0;
  white-space: nowrap;
  transition: color 200ms var(--ease-slow);
}
/* WORK: hover amarillo */
.mini-nav:not(.brand-mini-nav) .mini-nav-item:hover {
  color: #FFC76D;
}
/* BRAND / [proyecto]: ya son amarillos por defecto, hover azul */
.brand-mini-nav .mini-nav-item:hover {
  color: #467EE0;
}

/* --- Botón flecha arriba: este SÍ es fijo (no se mueve con el scroll) --- */
.page-fixed-ui {
  position: fixed;
  top: 0;
  left: 50%;
  width: 2002px;
  height: 0;
  transform: translateX(-50%) scale(var(--page-scale, 1));
  transform-origin: top center;
  z-index: 6;
  pointer-events: none;
}
.page-fixed-ui > * { pointer-events: auto; }

/* --- Contenido con scroll (hero, subtítulo, lista, footer) --- */
.page-scale-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.page-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2002px;
  transform: translateX(-50%) scale(var(--page-scale, 1));
  transform-origin: top center;
}

.page-hero {
  position: relative;
  height: 1174px; /* hasta donde empieza la lista de proyectos en Figma */
  pointer-events: none; /* invisible pero se superponía al header y le robaba el hover */
}

.work-heading {
  position: absolute;
  left: 70px;
  top: 174.36px;
  width: 1863px;
  height: 783px;
  margin: 0;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 450px;
  color: #467EE0;
  text-align: center;
  white-space: nowrap;
}
.work-heading span {
  display: block;
  line-height: 0.58;
}

.deco-bola {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FFC76D;
  transition: background-color 400ms var(--ease-slow);
  cursor: pointer;
  pointer-events: auto;
}
.deco-bola:hover {
  background-color: #467EE0;
}
.deco-bola--design  { left: 1610px; top: 236px; }
.deco-bola--words   { left: 628px;  top: 505px; }
.deco-bola--process { left: 1324px; top: 765px; }

.work-subtitle {
  position: absolute;
  left: 725px;
  top: 1011px;
  width: 553px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  text-align: center;
}

/* --- Lista de proyectos --- */
.project-list {
  width: 2002px;
}

.project-row {
  position: relative;
  display: block;
  width: 2002px;
  height: 272.335px;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 200ms var(--ease-slow);
}
.project-row:hover {
  background-color: #000000;
}

.project-title {
  position: absolute;
  left: 40px;
  top: 24.33px;
  margin: 0;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 266px;
  line-height: 0.92;
  color: #000000;
  white-space: nowrap;
  transition: color 200ms var(--ease-slow);
}
.project-row:hover .project-title {
  color: #FFFFFF;
}

.project-cover {
  position: absolute;
  top: 0;
  height: 272.335px;
  overflow: hidden;
}
.project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 200ms var(--ease-slow);
}
.project-row:hover .project-cover img {
  opacity: 0;
}

.project-hover-info {
  position: absolute;
  top: 107px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  opacity: 0;
  transition: opacity 200ms var(--ease-slow);
}
.project-row:hover .project-hover-info {
  opacity: 1;
}
.project-divider {
  width: 1px;
  height: 66.5px;
  background-color: #FFFFFF;
  flex-shrink: 0;
}
.project-col p,
.project-year p {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
  white-space: nowrap;
}
.project-year {
  text-align: center;
}

.work-closing-text {
  width: 727px;
  margin: 229px auto 277px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  text-align: center;
}

/* --- Footer --- */
.site-footer {
  position: relative;
  width: 1922px;
  margin: 0 auto 40px;
  height: 108px;
}
.footer-logo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: 'Palmore Semibold', serif;
  font-size: 65px;
  line-height: 60px;
  color: #AFAFAF;
  white-space: nowrap;
  cursor: pointer;
}
.footer-socials {
  position: absolute;
  left: 0;
  top: 37px;
  display: flex;
  align-items: center;
  gap: 54px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #AFAFAF;
}
.footer-socials a { text-decoration: underline; }
.footer-copy {
  position: absolute;
  right: 0;
  top: 37px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #AFAFAF;
  white-space: nowrap;
}

/* --- Botón flecha arriba: rombo blanco de fondo + flecha negra --- */
.btn-back-to-top {
  position: absolute;
  left: 1891.67px;
  top: 953px;
  width: 64.66px;
  height: 64.66px;
  border: none;
  background: transparent;
  color: #000000;
  cursor: pointer;
  padding: 0;
}
.btn-back-to-top::before {
  content: '';
  position: absolute;
  inset: 9px;
  background-color: #FFFFFF;
  transform: rotate(45deg);
  z-index: -1;
}
.btn-back-to-top svg {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;
}

/* =========================================================
   SECCIÓN 4 — BRAND / [PROYECTO] (páginas de detalle)
   Fondo negro, acento de color por marca (aquí: amarillo
   #FFC76D para Pan y Pedazo). Navegación instantánea, sin
   Smart Animate, según lo indicado.
   ========================================================= */
.brand-screen {
  background-color: #000000;
}
.page-stage--brand {
  min-height: 1px; /* la altura real la define el contenido absoluto de abajo */
}

.brand-logo,
.brand-mini-nav .mini-nav-item {
  color: #FFC76D;
}

.brand-title {
  width: 100%;
  margin: 174.36px 0 0;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 450px;
  line-height: 0.58;
  color: #FFFFFF;
  text-align: center;
  white-space: nowrap;
}

.brand-description {
  width: 1259px;
  margin: 51.64px auto 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
  text-align: center;
}

.brand-description--placeholder {
  color: #FF5555;
  font-style: italic;
}

.brand-gallery {
  width: 2002px;
  margin-top: 131px;
}
.brand-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.33px; /* separación mínima horizontal original entre columnas */
  margin-bottom: 92px; /* espaciado vertical uniforme pedido */
}
.brand-row--last {
  margin-bottom: 0;
}
.brand-grid2x2 {
  margin-bottom: 92px;
}
.brand-grid2x2--last {
  margin-bottom: 0;
}
.brand-grid2x2 .brand-row--tight {
  margin-bottom: 0.33px; /* filas pegadas entre sí, mismo criterio que el gap horizontal */
}
.brand-grid2x2 .brand-row--tight:last-child {
  margin-bottom: 0;
}
.brand-row--2col img,
.brand-row--3col img {
  flex-shrink: 0;
}
.brand-img {
  display: block;
  object-fit: cover;
  border-radius: 24px;
}

.brand-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 214px; /* separación medida en Figma entre "previous" y "next" */
  margin-top: 342px; /* 92px original + 250px pedido */
}
.next-project-link,
.prev-project-link {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
  text-decoration: underline;
  white-space: nowrap;
}

.brand-footer {
  margin-top: 348px; /* 71px original + 277px pedido */
}
.brand-footer .footer-logo,
.brand-footer .footer-socials,
.brand-footer .footer-copy {
  color: #AFAFAF;
}

/* =========================================================
   SECCIÓN 4 — LANDING PAGE / SERVICES y LANDING PAGE / ABOUT
   Nota de fidelidad: el diagrama de SERVICES (rombos + líneas
   conectoras) se simplificó a una grilla de 2 columnas con un
   conector central genérico, en vez de replicar cada valor
   calc(%+px) exacto de Figma — el contenido y la estructura
   general (concept/design en dos ramas, luego union en un
   solo paso) sí son fieles.
   ========================================================= */

.services-screen,
.about-screen {
  background-color: #FFFFFF;
}
.about-screen {
  background-color: #467EE0;
}

.landing-logo {
  position: absolute;
  left: 40px;
  top: 21px;
  font-family: 'Palmore Semibold', serif;
  font-size: 65px;
  line-height: 60px;
  color: #467EE0;
  white-space: nowrap;
}
.about-screen .landing-logo { color: #FFFFFF; }

.landing-mini-nav {
  position: absolute;
  left: 1544px;
  top: 39px;
  width: 431px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36.285px;
}
.landing-mini-nav .mini-nav-item { color: #467EE0; }
.about-screen .landing-mini-nav .mini-nav-item { color: #FFFFFF; }
.contact-screen .landing-mini-nav .mini-nav-item { color: #FFC76D; }
.landing-mini-nav .mini-nav-item:hover { color: #FFC76D; }
/* CONTACT: los items ya son amarillos por defecto, así que el hover va a azul en vez de amarillo (que no se vería) */
.contact-screen .landing-mini-nav .mini-nav-item:hover { color: #467EE0; }
.contact-logo { color: #FFC76D; }

.services-title {
  position: relative;
  width: 100%;
  margin: 174.36px 0 0;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 450px;
  line-height: 0.58;
  color: #467EE0;
  text-align: center;
  white-space: nowrap;
}
.services-title--yellow { color: #FFC76D; }

.services-description {
  width: 1259px;
  margin: 51px auto 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  text-align: center;
}
.services-description--white { color: #FFFFFF; }

/* --- Encabezados de etapa (STAGE ONE / STAGE TWO / SINGLE STAGE) --- */
.stage-headers {
  position: relative;
  width: 2002px;
  height: 245px;
  margin: 140px auto 0;
}
.stage-headers--single {
  text-align: center;
}
.stage-headers .stage-label:nth-child(1) {
  position: absolute;
  left: 40px;
  top: 0;
}
.stage-headers .stage-label:nth-child(2) {
  position: absolute;
  left: 1151px;
  top: 0;
}
.stage-label {
  margin: 0;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 266px;
  line-height: 0.92;
  color: #000000;
  white-space: nowrap;
}
.stage-label--white { color: #FFFFFF; }

.stage-subtags {
  display: grid;
  grid-template-columns: 1fr 116px 1fr;
  column-gap: 40px;
  width: 1918px;
  margin: 40px auto 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  text-align: center;
}
.stage-subtags span:last-child {
  grid-column: 3;
}
.stage-subtags--white { color: #FFFFFF; }

/* --- Diagrama de proceso: filas de 2 columnas + conector central --- */
.process-diagram {
  width: 1918px;
  margin: 60px auto 0;
}
.process-row {
  display: grid;
  grid-template-columns: 1fr 116px 1fr;
  column-gap: 40px;
  align-items: start;
  margin-bottom: 62px;
}
.process-col {
  text-align: center;
}
.process-col h3 {
  margin: 0 0 8px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #000000;
}
.process-col p {
  margin: 0 auto;
  max-width: 633px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
}
.process-diagram--white .process-col h3,
.process-diagram--white .process-col p {
  color: #FFFFFF;
}
.process-connector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 116px;
}
.rombo {
  position: relative;
  z-index: 1;
  width: 82px;
  height: 82px;
  background-color: #FFC76D;
  transform: rotate(45deg);
  transition: background-color 400ms var(--ease-slow);
  cursor: pointer;
}
.rombo:hover {
  background-color: #467EE0;
}

/* --- Bola dentro del diagrama (decorativa, con hover) --- */
.diagram-bola {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FFC76D;
  transition: background-color 400ms var(--ease-slow);
  cursor: pointer;
}
.diagram-bola:hover {
  background-color: #467EE0;
}
/* Excepción pedida: la bola dentro de la "O" de ILLUSTRATION es azul (no amarilla) y pasa a blanco en hover */
.diagram-bola--illustration-o {
  background-color: #467EE0;
}
.diagram-bola--illustration-o:hover {
  background-color: #FFFFFF;
}
/* Bolas junto al título de ABOUT: como el fondo ya es azul, el hover es a blanco */
.diagram-bola--to-white:hover {
  background-color: #FFFFFF;
}

.illustration-section {
  position: relative;
  background-color: #000000;
  padding: 157px 0 190px;
  margin-top: 217px;
}

.single-stage-title {
  margin: 190px auto 0;
  text-align: center;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 266px;
  line-height: 0.92;
  color: #000000;
}

/* --- ABOUT --- */
.about-hero-title {
  position: relative;
  width: 100%;
  margin: 174.36px 0 0;
  text-align: center;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  color: #FFFFFF;
}
.about-hero-title p {
  margin: 0;
  font-size: 450px;
  line-height: 0.58;
}
.about-accent-letters span {
  position: absolute;
  font-family: 'Palmore Semibold', serif;
  font-weight: 600;
  font-size: 65.96px;
  color: #FFC76D;
  white-space: nowrap;
}

.about-media-row {
  display: flex;
  justify-content: center;
  gap: 42px;
  margin: 130px auto 0;
  width: 1927px;
}
.about-media-row img,
.about-media-row video {
  display: block;
  object-fit: cover;
  border-radius: 24px;
}

.about-bio {
  width: 1259px;
  margin: 220px auto 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
  text-align: center;
}

.about-small-image {
  display: block;
  width: 189px;
  height: 173px;
  margin: 180px auto 0;
  object-fit: cover;
  border-radius: 16px;
}

/* =========================================================
   SECCIÓN 5 — LANDING PAGE / CONTACT
   ========================================================= */
.contact-screen {
  background-color: #000000;
}

.contact-title {
  position: relative;
  width: 100%;
  margin: 174.36px 0 0;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 450px;
  line-height: 0.58;
  color: #FFFFFF;
  text-align: center;
  white-space: nowrap;
}
.contact-title p { margin: 0; }

.contact-subtitle {
  width: 965px;
  margin: 40px auto 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
  text-align: center;
}

.contact-body {
  position: relative;
  width: 2002px;
  margin-top: 179px;
  min-height: 700px;
}

.contact-clarity {
  position: absolute;
  left: 202px;
  top: 0;
  margin: 0;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 266px;
  line-height: 0.65;
  color: #FFC76D;
  white-space: nowrap;
}

.contact-form {
  position: absolute;
  left: 849px;
  top: 4px;
  width: 952px;
}
.contact-field {
  margin-bottom: 20px;
}
.contact-row {
  display: flex;
  gap: 20px;
}
.contact-row .contact-field { flex: 1; margin-bottom: 20px; }
.contact-field input,
.contact-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid #FFFFFF;
  border-radius: 4px;
  padding: 0 20px;
  height: 72px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
}
.contact-field textarea {
  height: 139px;
  padding: 18px 20px;
  resize: none;
  font-family: 'Urbanist', sans-serif;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #7A7A7A;
  font-weight: 600;
  opacity: 1;
}
.contact-field textarea::placeholder {
  /* alinea el placeholder arriba a la izquierda dentro del recuadro, como en Figma */
  line-height: 1;
}

.contact-submit {
  display: block;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
  text-decoration: underline;
}

.contact-email {
  width: 100%;
  margin: 90px auto 0;
  text-align: center;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #7A7A7A;
}
.contact-email a { color: #7A7A7A; text-decoration: none; }

.contact-bola {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FFC76D;
  transition: background-color 400ms var(--ease-slow);
  cursor: default;
}
.contact-bola:hover {
  background-color: #467EE0;
}

/* =========================================================
   MOBILE (max-width: 768px)
   Todo el sitio vive dentro de un lienzo de 2002px que se
   escala con transform (var(--page-scale)). Un "font-size:16px"
   normal, puesto dentro de ese lienzo, terminaría viéndose
   diminuto una vez aplicada la escala. Por eso, para lograr
   tamaños REALES y constantes en pantalla (texto legible,
   íconos con buen tamaño de toque) sin importar el ancho del
   celular, usamos calc(Npx / var(--page-scale)) — eso anula
   matemáticamente el efecto de la escala general.
   ========================================================= */
@media (max-width: 768px) {

  /* --- Footer: todo apilado y centrado --- */
  .site-footer {
    position: relative;
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24px / var(--page-scale, 1));
    text-align: center;
  }
  .footer-logo { position: relative; left: auto; top: auto; transform: none; }
  .footer-socials {
    position: relative; left: auto; top: auto;
    flex-direction: column;
    gap: calc(12px / var(--page-scale, 1));
  }
  .footer-copy { position: relative; right: auto; top: auto; }

  /* --- SERVICES: diagrama de proceso apilado en una columna --- */
  .stage-headers {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16px / var(--page-scale, 1));
  }
  .stage-headers .stage-label:nth-child(1),
  .stage-headers .stage-label:nth-child(2) {
    position: relative;
    left: auto;
    top: auto;
    font-size: calc(48px / var(--page-scale, 1));
  }
  .stage-subtags { display: none; } /* redundante una vez que todo está apilado y visible en orden */

  .process-diagram { width: 90%; }
  .process-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14px / var(--page-scale, 1));
    margin-bottom: calc(40px / var(--page-scale, 1));
    text-align: center;
  }
  .process-connector { min-height: 0; }
  .process-connector::before { display: none; }
  .rombo { width: calc(36px / var(--page-scale, 1)); height: calc(36px / var(--page-scale, 1)); }
  .process-col p { max-width: 100%; font-size: calc(15px / var(--page-scale, 1)); line-height: 1.5; }
  .process-col h3 { font-size: calc(16px / var(--page-scale, 1)); }

  .illustration-section { padding: calc(60px / var(--page-scale, 1)) 0 calc(80px / var(--page-scale, 1)); }

  /* --- Título / descripción: fuente propia y legible, no solo la escala general --- */
  .services-description,
  .contact-subtitle,
  .about-bio,
  .work-subtitle,
  .brand-description,
  .work-closing-text {
    width: 88%;
    font-size: calc(15px / var(--page-scale, 1));
    line-height: 1.5;
  }
  .contact-title, .services-title, .about-hero-title p, .brand-title, .work-heading, .contact-clarity {
    font-size: calc(72px / var(--page-scale, 1)) !important;
  }

  /* --- LANDING PAGE / WORK: info de categorías visible sin hover --- */
  .project-row { height: auto; min-height: unset; padding: calc(20px / var(--page-scale, 1)) calc(16px / var(--page-scale, 1)); }
  .project-title { position: relative; left: auto; top: auto; font-size: calc(48px / var(--page-scale, 1)); }
  .project-cover { position: relative; left: auto !important; top: auto; width: 100% !important; height: calc(180px / var(--page-scale, 1)); margin-top: calc(10px / var(--page-scale, 1)); }
  .project-hover-info {
    position: relative;
    left: auto !important;
    top: auto;
    opacity: 1; /* siempre visible: en touch no existe :hover */
    margin-top: calc(12px / var(--page-scale, 1));
    flex-wrap: wrap;
    gap: calc(16px / var(--page-scale, 1));
  }
  .project-divider { display: none; }
  .project-col p, .project-year p { font-size: calc(13px / var(--page-scale, 1)); }

  /* --- Filas de imágenes de marca (BRAND / *): siempre 1 columna --- */
  .brand-row,
  .brand-row--2col,
  .brand-row--3col {
    flex-direction: column;
    gap: calc(16px / var(--page-scale, 1)) !important;
  }
  .brand-row img { width: 100% !important; height: auto !important; }
  .brand-nav-links { flex-direction: column; gap: calc(20px / var(--page-scale, 1)); }

  /* --- ABOUT: media en columna, bolas más discretas --- */
  .about-media-row { flex-direction: column; width: 90%; gap: calc(20px / var(--page-scale, 1)); }
  .about-media-row img,
  .about-media-row video { width: 100% !important; height: auto !important; }
  .diagram-bola { width: calc(44px / var(--page-scale, 1)); height: calc(44px / var(--page-scale, 1)); }
  .about-accent-letters { display: none; } /* decoración fina que no se lee bien apilada sobre el título en mobile */

  /* --- CONTACT: formulario en una columna --- */
  .contact-body { display: flex; flex-direction: column; align-items: center; }
  .contact-clarity { position: relative; left: auto; top: auto; text-align: center; margin-bottom: calc(32px / var(--page-scale, 1)); }
  .contact-form { position: relative; left: auto; top: auto; width: 90%; }
  .contact-row { flex-direction: column; gap: calc(14px / var(--page-scale, 1)); }
  .contact-field { margin-bottom: calc(14px / var(--page-scale, 1)); }
  .contact-field input, .contact-field textarea { font-size: calc(15px / var(--page-scale, 1)); height: calc(52px / var(--page-scale, 1)); }
  .contact-bola { display: none; } /* decorativa dentro del título; en una columna no tiene un lugar natural */

  /* --- Diamante del botón volver arriba: tamaño real de toque cómodo --- */
  .btn-back-to-top {
    width: calc(48px / var(--page-scale, 1));
    height: calc(48px / var(--page-scale, 1));
  }
}