/* =========================================================
   FONTS
   ========================================================= */
@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
   ========================================================= */
[hidden] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Urbanist', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }

:root {
  --ease-slow: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* =========================================================
   STAGE SCALING WRAPPER
   Frame de referencia mobile: 430 x 932 (Figma)
   ========================================================= */
.m-stage-viewport {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: #FFC76D;
}
.m-stage {
  width: 430px;
  height: 932px;
  position: relative;
  flex-shrink: 0;
  transform-origin: top center;
  background-color: #FFC76D;
  transition: background-color 400ms var(--ease-slow);
  overflow: hidden;
}
.m-stage[data-state="final"] {
  background-color: #467EE0;
}

/* =========================================================
   LOGO "moneko"
   Estado 0 (OPENING 1.0): invisible
   Estado 1 (OPENING 2.0): grande, rotado 90°, centrado, negro
   Estado final (BIG HEADER): chico, horizontal, abajo, blanco

   Truco de Figma: el texto rotado vive DENTRO de una caja
   contenedora sin rotar (300x690), con dimensiones invertidas
   (690x300) antes de rotar, para que al girar 90° quepa
   exactamente dentro de la caja sin desbordarse.
   ========================================================= */
.moneko-logo-box {
  position: absolute;
  left: 85.39px;
  top: 124px;
  width: 300px;
  height: 690px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 400ms var(--ease-slow),
              top 400ms var(--ease-slow),
              width 400ms var(--ease-slow),
              height 400ms var(--ease-slow);
}
.m-stage[data-state="final"] .moneko-logo-box {
  left: 155.68px;
  top: 820px;
  width: 119px;
  height: 51px;
}

.moneko-logo {
  margin: 0;
  white-space: nowrap;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  width: 690px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 320px;
  line-height: 1;
  color: #000000;
  opacity: 0;
  transform: rotate(90deg);
  transition: opacity 600ms var(--ease-slow),
              transform 400ms var(--ease-slow),
              font-size 400ms var(--ease-slow),
              color 400ms var(--ease-slow),
              width 400ms var(--ease-slow),
              height 400ms var(--ease-slow);
}
.m-stage[data-state="1"] .moneko-logo,
.m-stage[data-state="final"] .moneko-logo {
  opacity: 1;
}
.m-stage[data-state="final"] .moneko-logo {
  width: 119px;
  height: 51px;
  font-size: 55px;
  line-height: 50.894px;
  color: #FFFFFF;
  transform: rotate(0deg);
}

/* =========================================================
   NAV (aparece solo en el estado final)
   ========================================================= */
.mobile-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 95px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 69.732px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-slow);
}
.m-stage[data-state="final"] .mobile-nav {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-item {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 77px;
  line-height: 90px;
  color: #FFFFFF;
  white-space: nowrap;
}

/* =========================================================
   SISTEMA DE PÁGINAS CON SCROLL (LANDING PAGE / WORK, etc.)
   Mismo criterio que en desktop: lienzo de referencia (430px,
   el ancho real de los frames de Figma) escalado al viewport.
   ========================================================= */
html, body { overflow: visible; height: auto; }
.m-page-screen {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;
  min-height: 100vh;
}
.m-page-scale-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.m-page-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 430px;
  transform: translateX(-50%) scale(var(--m-page-scale, 1));
  transform-origin: top center;
}

/* --- Header (logo + hamburguesa), fluye con la página --- */
.mobile-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 430px;
  height: 70px;
  background-color: #FFFFFF;
}
.mobile-header .logo--mobile {
  position: absolute;
  left: 37.07px;
  top: 9px;
  font-family: 'Palmore Regular', serif;
  font-size: 55px;
  line-height: 50.894px;
  color: #467EE0;
  white-space: nowrap;
}
.hamburger-btn {
  position: absolute;
  left: 357px;
  top: 25px;
  width: 28px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #467EE0;
}

/* --- Overlay de navegación (al tocar la hamburguesa) --- */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background-color: #000000;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 200ms var(--ease-slow), opacity 1ms 200ms;
}
.mobile-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform 200ms var(--ease-slow);
}
.mobile-nav-overlay .mobile-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 43.4px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 69.732px;
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-overlay .mobile-nav-item {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 77px;
  line-height: 90px;
  color: #FFFFFF;
  white-space: nowrap;
}
.mobile-nav-overlay .hamburger-btn {
  left: 50%;
  top: auto;
  bottom: 60px;
  transform: translateX(-50%);
  justify-content: center;
}
.mobile-nav-overlay .hamburger-btn span { background-color: #FFFFFF; }
.mobile-nav-overlay .hamburger-btn span:nth-child(1) {
  position: absolute;
  top: 10px;
  transform: rotate(45deg);
}
.mobile-nav-overlay .hamburger-btn span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-overlay .hamburger-btn span:nth-child(3) {
  position: absolute;
  top: 10px;
  transform: rotate(-45deg);
}

/* --- Hero: título + subtítulo + bolas --- */
.work-hero {
  position: relative;
  padding-top: 99px;
}
.work-heading-mobile {
  width: 100%;
  margin: 0;
  padding-left: 22px;
  text-align: left;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 158px;
  line-height: 0.66;
  color: #467EE0;
}
.work-heading-mobile span { display: block; }
.work-heading-mobile b { font-weight: inherit; font-style: normal; }
.deco-bola-work {
  position: absolute;
  width: 35.245px;
  height: 35.245px;
  border-radius: 50%;
  background-color: #FFC76D;
  transform: translate(-50%, -50%);
}
.work-subtitle-mobile {
  width: 305px;
  margin: 40px 0 0 22px;
  text-align: left;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
}

/* --- Lista de proyectos --- */
.project-mobile-list {
  margin-top: 122px;
}
.project-mobile-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 430px;
  overflow: hidden;
  background-color: #000000;
}
.project-mobile-btn--tall { height: 256px; }
.project-mobile-btn--short { height: 148px; }
.project-mobile-bg {
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(15px);
}
.project-mobile-title {
  position: relative;
  margin: 10px 0 0 22.41px;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 158px;
  line-height: 0.66;
  color: #FFFFFF;
  white-space: nowrap;
}
.project-mobile-title span { display: block; }

/* --- Texto de cierre --- */
.work-closing-mobile {
  width: 354px;
  margin: 92px 0 0 22px;
  text-align: left;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
}

/* --- Footer --- */
.mobile-footer {
  position: relative;
  width: 386px;
  height: 210px;
  margin: 140px auto 0;
  padding-bottom: 60px;
  color: #AFAFAF;
}
.mobile-footer .footer-socials-m {
  position: absolute;
  left: 0;
  top: 13px;
  display: flex;
  flex-direction: column;
  gap: 33px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.mobile-footer .footer-socials-m a { text-decoration: underline; }
.mobile-footer .footer-logo-m {
  position: absolute;
  left: 267px;
  top: 0;
  font-family: 'Palmore Regular', serif;
  font-size: 55px;
  line-height: 50.894px;
  white-space: nowrap;
}
.mobile-footer .footer-copy-m {
  position: absolute;
  right: 23px;
  top: 68px;
  white-space: nowrap;
  text-align: right;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}

/* --- Botón flecha arriba: fijo, rombo + flecha --- */
.m-page-fixed-ui {
  position: fixed;
  top: 0;
  left: 50%;
  width: 430px;
  height: 0;
  transform: translateX(-50%) scale(var(--m-page-scale, 1));
  transform-origin: top center;
  z-index: 40;
  pointer-events: none;
}
.m-page-fixed-ui > * { pointer-events: auto; }
.btn-back-to-top-m {
  position: absolute;
  left: 337px;
  top: 860px;
  width: 64.662px;
  height: 64.662px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: #000000;
}
.btn-back-to-top-m::before {
  content: '';
  position: absolute;
  inset: 9px;
  background-color: #FFFFFF;
  transform: rotate(45deg);
  z-index: -1;
}
.btn-back-to-top-m svg { width: 100%; height: 100%; padding: 18px; box-sizing: border-box; }

/* =========================================================
   BRAND / [PROYECTO] / MOBILE (empezamos con Pan y Pedazo)
   ========================================================= */
.brand-screen-m { background-color: #000000; }
.brand-header-m { background-color: #FFC76D; }
.brand-header-m .logo--mobile { color: #000000; }
.brand-header-m .hamburger-btn span { background-color: #000000; }

.brand-title-m {
  width: 100%;
  margin: 0;
  padding: 110px 22px 0;
  text-align: left;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 158px;
  line-height: 0.66;
  color: #FFFFFF;
}
.brand-title-m span { display: block; }

.brand-gallery-m { margin-top: 60px; }
.brand-row-m {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
}
.brand-row-m--last { margin-bottom: 0; }
.brand-row-m img { display: block; width: 100%; height: 100%; object-fit: cover; }

.brand-desc-m {
  width: 383px;
  margin: 92px auto 0;
  text-align: left;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
}
.brand-next-m {
  display: block;
  width: fit-content;
  margin: 140px auto 0;
  text-align: center;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  text-decoration: underline;
}
.brand-nav-links-m {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 140px;
  flex-wrap: wrap;
}
.brand-nav-links-m .brand-next-m,
.brand-nav-links-m .brand-prev-m {
  margin: 0;
}
.brand-prev-m {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  text-decoration: underline;
  white-space: nowrap;
}

/* =========================================================
   Texto corrido (Urbanist SemiBold, párrafos): solo la
   primera letra del párrafo en mayúscula, el resto respeta
   el texto tal como está escrito.
   ========================================================= */
.work-subtitle-mobile::first-letter,
.work-closing-mobile::first-letter,
.brand-desc-m::first-letter,
.footer-socials-m a::first-letter {
  text-transform: uppercase;
}

/* =========================================================
   INTERRUPTOR DESKTOP <-> MOBILE
   Por defecto se muestra la experiencia de escritorio; por
   debajo de 768px de ancho de viewport se muestra la mobile.
   Para previsualizar mobile en Chrome: DevTools -> Toggle
   device toolbar (Cmd+Shift+M / Ctrl+Shift+M).
   ========================================================= */
#mobile-experience {
  display: none;
}
@media (max-width: 768px) {
  #desktop-experience {
    display: none;
  }
  #mobile-experience {
    display: block;
  }
}

/* =========================================================
   SECCIÓN 3 MOBILE: SERVICES / ABOUT / CONTACT
   ========================================================= */

/* --- Header amarillo (usado en CONTACT, acento de marca) --- */
.m-header--yellow { background-color: #FFC76D; }
.m-header--yellow .logo--mobile { color: #000000; }
.m-header--yellow .hamburger-btn span { background-color: #000000; }

/* --- Título grande reutilizable (Palmore Regular 158px) --- */
.m-page-title {
  width: 100%;
  margin: 0;
  padding: 110px 22px 0;
  text-align: left;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 158px;
  line-height: 0.66;
  color: #467EE0;
}
.m-page-title span { display: block; }
.m-page-title--yellow { color: #FFC76D; }
.m-page-title--white { color: #FFFFFF; }

/* --- Subtítulo / párrafo reutilizable --- */
.m-page-subtitle {
  width: 379px;
  max-width: 88%;
  margin: 40px 0 0 22px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
}
.m-page-subtitle--white { color: #FFFFFF; }
.m-page-subtitle::first-letter { text-transform: uppercase; }

/* --- SERVICES: pestañas superiores + etapas + items --- */
.m-services-tabs {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  margin-top: 30px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
}
.m-stage-label {
  margin: 60px 0 0 22px;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 158px;
  line-height: 0.66;
  color: #000000;
}
.m-stage-label--white { color: #FFFFFF; }

.m-process-list { margin-top: 30px; }
.m-process-item {
  padding: 22px 22px 0;
  border-top: 1px solid rgba(0,0,0,0.35);
  margin-top: 22px;
}
.m-process-item:first-child { border-top: none; margin-top: 0; }
.m-process-item h3 {
  margin: 0 0 8px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #000000;
}
.m-process-item p {
  margin: 0;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #000000;
}
.m-process-list--white .m-process-item { border-top-color: rgba(255,255,255,0.35); }
.m-process-list--white .m-process-item h3,
.m-process-list--white .m-process-item p { color: #FFFFFF; }

.m-services-bolas { position: relative; height: 0; }
.m-services-bola {
  position: absolute;
  width: 35.24px;
  height: 35.24px;
  border-radius: 50%;
  background-color: #FFC76D;
}

.m-illustration-section {
  background-color: #000000;
  padding-bottom: 90px;
  margin-top: 80px;
}
.m-single-stage-title {
  margin: 60px 0 0 22px;
  font-family: 'Palmore Regular', serif;
  font-weight: 400;
  font-size: 158px;
  line-height: 0.66;
  color: #000000;
}

/* --- ABOUT --- */
.m-about-screen { background-color: #467EE0; }
.m-about-media {
  margin-top: 60px;
}
.m-about-media img,
.m-about-media video {
  display: block;
  width: 100%;
  object-fit: cover;
}
.m-about-media img { border-radius: 0; }

/* --- CONTACT --- */
.m-contact-screen { background-color: #000000; }
.m-contact-form { margin: 60px 22px 0; }
.m-contact-field { margin-bottom: 20px; }
.m-contact-field input,
.m-contact-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid #FFFFFF;
  border-radius: 4px;
  padding: 0 20px;
  height: 54px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #FFFFFF;
}
.m-contact-field textarea {
  height: 128px;
  padding: 16px 20px;
  resize: none;
}
.m-contact-field input::placeholder,
.m-contact-field textarea::placeholder {
  color: #858585;
  font-weight: 600;
}
.m-contact-submit {
  display: block;
  margin: 20px 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  text-decoration: underline;
}
.m-contact-email {
  margin: 40px 0 0 22px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #858585;
}
.m-contact-email a { color: #858585; }

.m-contact-status {
  margin-top: 16px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
  text-align: right;
  min-height: 20px;
}
.m-contact-status--error { color: #FF8888; }