/* =========================================================
   TuMarca – réplica local
   Base de diseño: 1920px. Todo lo "desktop" se expresa en
   --u (= 1px a 1920 de ancho) para que escale proporcional.
   ========================================================= */

:root {
  --gray:  #D9D9D9;
  --lime:  #EFFF84;
  --black: #000;
  --white: #fff;
  --mid:   #999;

  --display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --sans:    'Host Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --u: calc(100vw / 1920);
  --hx: 0px;   /* desplazamiento horizontal de las mitades del hero (JS) */
  --hy: 0px;   /* desplazamiento vertical del hero (JS) */

  /* Calibración de la tipografía display (Bebas Neue) */
  --cap-size: 220;   /* px a 1920: altura de versal real = 155px (0,718 em) */
  --cap-fix: 8.5;     /* ajuste vertical de la línea base */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--gray);
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }

/* Sin selección de texto ni arrastre de imágenes (los campos de formulario sí deben poder seleccionarse) */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* =========================================================
   CABECERA
   ========================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 76px; padding: 0 calc(32px + var(--sbw, 0px)) 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
  /* Las letras muestran el negativo de lo que hay detrás (logo y menú) */
  mix-blend-mode: difference; color: #fff;
  /* mostrar: 0,3 s power2.out */
  transition: transform .3s cubic-bezier(.25, .46, .45, .94), opacity .3s cubic-bezier(.25, .46, .45, .94);
}
.header > * { pointer-events: auto; }
/* Estado inicial (antes de la entrada, que la lanza el JS a los 2 s) */
.js .header:not(.is-on) { opacity: 0; transform: translateY(-100px); transition: none; }
/* Entrada al cargar: 0,5 s power3.out */
.header.is-entering { transition: transform .5s cubic-bezier(.215, .61, .355, 1), opacity .5s cubic-bezier(.215, .61, .355, 1); }
/* Ocultar: y −100 + opacidad, 0,3 s power2.in */
.header.is-hidden { opacity: 0; transform: translateY(-100px); transition-timing-function: cubic-bezier(.55, .085, .68, .53); }
.header.is-hidden > * { pointer-events: none; }

/* Resalte lima detrás del enlace del menú (mismo polígono que las etiquetas) */
.nav-hl {
  position: fixed; z-index: 40; pointer-events: none; left: 0; top: 0; width: 0; height: 0;
  background: var(--lime); opacity: 0; transition: opacity .3s;
  clip-path: polygon(8% 0%, 92% 0%, 98% 15%, 100% 35%, 100% 65%, 98% 85%, 92% 100%, 8% 100%, 2% 85%, 0% 65%, 0% 35%, 2% 15%);
}
.nav-hl.is-on { opacity: 1; }

.logo { display: inline-flex; align-items: center; color: #000; }
.logo svg { height: 42px; width: auto; aspect-ratio: 857 / 1032; }
.logo--w { color: #fff; }

/* Marca de texto de la cabecera */
.brand {
  font-family: var(--sans); font-weight: 600; font-size: 24px; line-height: 1;
  letter-spacing: -.03em; color: #fff; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 48px; margin-left: auto; }
.nav a {
  font-size: 15px; font-weight: 500; line-height: 28px;
  text-transform: uppercase; letter-spacing: 0;
  color: #fff; transition: opacity .2s;
}

.burger { display: none; }
.mnav { display: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; z-index: 10;
  min-height: 100vh;
  display: flex; align-items: center;
}
.hero__stage { position: relative; width: 100%; height: calc(855 * var(--u)); }

/* Estado inicial de la intro (lo libera main.js) */
.js .hero__stage [data-k], .js .slot { opacity: 0; }

.w {
  position: absolute;
  top: calc((var(--row) + var(--cap-fix)) * var(--u));
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: calc(var(--cap-size) * var(--u));
  line-height: calc(159 * var(--u));
  letter-spacing: -.016em;
  white-space: nowrap; color: var(--white);
  will-change: transform, opacity;
}
.w[data-k="tr"], .w[data-k="fo"] { --row: 157; }
.w[data-k="id"], .w[data-k="in"] { --row: 349; }
.w[data-k="ex"], .w[data-k="en"] { --row: 541; color: var(--lime); }
/* Cada palabra se ancla al borde de su icono con un hueco de 23px */
.w[data-k="tr"] { right: calc(100% - 849 * var(--u)); }
.w[data-k="fo"] { left:  calc(1054 * var(--u)); }
.w[data-k="id"] { right: calc(100% - 699 * var(--u)); }
.w[data-k="in"] { left:  calc(900 * var(--u)); }
.w[data-k="ex"] { right: calc(100% - 959 * var(--u)); }
.w[data-k="en"] { left:  calc(1157 * var(--u)); }

/* Huecos de icono (cada uno rota entre los tres iconos) */
.slot { position: absolute; width: calc(160 * var(--u)); height: calc(160 * var(--u)); overflow: visible; will-change: transform, opacity; }
.slot--1 { left: calc(872 * var(--u)); top: calc(157 * var(--u)); }
.slot--2 { left: calc(720 * var(--u)); top: calc(349 * var(--u)); }
.slot--3 { left: calc(978 * var(--u)); top: calc(541 * var(--u)); }
.lyr { transform-origin: 50px 50px; }

/* Etiquetas de servicio */
.lbl {
  position: absolute; z-index: 2;
  font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 500;
  color: var(--mid); letter-spacing: 0; will-change: transform, opacity;
}
.lbl--ai  { left: calc(1048 * var(--u)); top: calc(98 * var(--u)); }
.lbl--web { right: calc(100% - 441 * var(--u)); top: calc(266 * var(--u)); text-align: right; }
.lbl--sys { right: calc(100% - 501 * var(--u)); top: calc(540 * var(--u)); text-align: right; }
.lbl--mnt { left: calc(1250 * var(--u)); top: calc(708 * var(--u)); }

.hero__cta { position: absolute; left: calc(1307 * var(--u)); top: calc(393 * var(--u)); z-index: 3; will-change: transform, opacity; }

/* Botón píldora con extremos poligonales (el cuerpo se expande en la intro) */
.pill { display: flex; height: calc(70 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--sans); }
.pill__cap { width: calc(34 * var(--u)); background: var(--lime); transition: background .2s; }
/* Mismos polígonos que las esquinas del modal (34×35 por mitad), con 1px de solape */
.pill__cap--l { margin-right: calc(-1 * var(--u)); clip-path: polygon(97.75% 0, 37.32% 9.55%, 0 34.54%, 0 65.46%, 37.32% 90.45%, 97.75% 100%); }
.pill__cap--r { margin-left:  calc(-1 * var(--u)); clip-path: polygon(0 0, 1.77% 0, 62.16% 9.55%, 99.52% 34.54%, 99.52% 65.46%, 62.16% 90.45%, 1.77% 100%, 0 100%); }
.pill__body {
  position: relative; overflow: hidden; flex: none;
  width: calc(253 * var(--u)); background: var(--lime);
  display: flex; align-items: center;
  font-size: calc(16 * var(--u)); font-weight: 400; color: #000; text-align: left; white-space: nowrap;
  transition: background .2s;
}
.pill__arr {
  position: absolute; left: 0; top: 50%;
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(-10 * var(--u));
  transform: translateX(var(--ax, calc(225 * var(--u))));
  transition: translate .25s;
}
@media (hover: hover) { .pill:hover .pill__arr { translate: 3px -3px; } }
@media (hover: hover) { .pill:hover .pill__cap, .pill:hover .pill__body { background: #fff; } }
.pill--lg .pill__body { font-size: calc(20 * var(--u)); }

/* Barra lima fija inferior (entra al terminar la intro) */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 50px; z-index: 20;
  background: var(--lime); transform: translateY(100%);
  transition: transform .5s cubic-bezier(.215, .61, .355, 1);
  pointer-events: none;
}
.bar.is-in  { transform: none; }
.bar.is-out { transform: translateY(100%); transition: transform .3s cubic-bezier(.55, .055, .675, .19); }

.hero__mob { display: none; }
.hero__m { display: none; }

/* =========================================================
   SERVICIOS
   ========================================================= */
.services {
  position: relative; z-index: 30;
  height: 100vh; min-height: calc(855 * var(--u));
  display: grid; grid-template-rows: 1fr 2fr 1fr;
  background: #fff;
}
.services__row { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }

.svc {
  position: relative; overflow: hidden; min-height: 0;
  padding: 32px; outline-offset: -3px;
}
.svc--lime  { background: var(--lime); }
.svc--white { background: #fff; }
.svc--gray  { background: var(--gray); }
.svc--black { background: #000; color: #fff; }

.svc h2 {
  font-family: 'Oswald', var(--display); font-weight: 600; text-transform: uppercase;
  font-size: 32px; line-height: 40px; letter-spacing: 0;
}
.svc--white .svc__idle h2, .svc--gray .svc__idle h2 { font-size: 43px; line-height: 48px; }
.svc p { font-size: 16px; line-height: 24px; max-width: 672px; }

.svc__icon { position: absolute; left: 32px; width: 52px; height: 52px; }
.svc__icon svg { width: 100%; height: 100%; }
.svc--lime .svc__icon, .svc--black .svc__icon { top: 50%; margin-top: -26px; }
.svc--white .svc__icon, .svc--gray .svc__icon { top: 32px; }

/* Capa de reposo y capa abierta (fundido cruzado al pasar el ratón) */
.svc__idle, .svc__open { position: absolute; transition: opacity .35s ease, transform .35s ease; }
.svc__open { opacity: 0; pointer-events: none; }

.svc--lime .svc__idle, .svc--black .svc__idle { left: 120px; right: 260px; top: 50%; transform: translateY(-50%); }
.svc--lime .svc__open, .svc--black .svc__open { left: 120px; right: 260px; top: 50%; transform: translateY(-38%); }
.svc--white .svc__idle, .svc--gray .svc__idle { left: 32px; right: 32px; top: 218px; }
.svc--white .svc__open, .svc--gray .svc__open { left: 32px; right: 32px; bottom: 96px; transform: translateY(16px); }
.svc__open h2 { margin-bottom: 12px; }

.svc__tag, .svc__name {
  position: absolute; z-index: 2;
  font-size: 14px; line-height: 20px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .3em;
}
.svc--lime .svc__tag, .svc--black .svc__tag { right: 32px; top: 50%; transform: translateY(-50%); text-align: right; }
.svc--white .svc__tag, .svc--gray .svc__tag { left: 32px; bottom: 32px; }
.svc__tag .t-open { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; white-space: nowrap; transition: opacity .35s; }
.svc__tag .t-idle { transition: opacity .35s; }
.svc--white .svc__tag .t-open, .svc--gray .svc__tag .t-open { right: auto; left: 0; }
.svc__name { top: 32px; right: 32px; left: 96px; text-align: right; opacity: 0; transition: opacity .35s; }

.svc:focus-visible .svc__idle { opacity: 0; }
.svc:focus-visible .svc__open { opacity: 1; transform: none; }
@media (hover: hover) { .svc--white:hover .svc__idle, .svc--gray:hover .svc__idle { transform: translateY(-16px); } }
@media (hover: hover) { .svc:hover .svc__idle { opacity: 0; } }
@media (hover: hover) { .svc:hover .svc__open { opacity: 1; transform: none; } }
@media (hover: hover) { .svc--lime:hover .svc__open, .svc--black:hover .svc__open { transform: translateY(-50%); } }
@media (hover: hover) { .svc:hover .svc__name { opacity: 1; } }
@media (hover: hover) { .svc--lime:hover .t-idle, .svc--black:hover .t-idle { opacity: 0; } }
@media (hover: hover) { .svc--lime:hover .t-open, .svc--black:hover .t-open { opacity: 1; } }

/* Táctil (sin hover): los paneles se muestran siempre "abiertos" (todo el texto visible; la entrada se anima en JS) */
@media (hover: none) and (min-width: 768px) {
  .svc .svc__idle { opacity: 0; }
  .svc--white .svc__idle, .svc--gray .svc__idle { transform: translateY(-16px); }
  .svc .svc__open { opacity: 1; transform: none; pointer-events: auto; }
  .svc--lime .svc__open, .svc--black .svc__open { transform: translateY(-50%); }
  .svc .svc__name { opacity: 1; }
  .svc--lime .t-idle, .svc--black .t-idle { opacity: 0; }
  .svc--lime .t-open, .svc--black .t-open { opacity: 1; }
}

/* =========================================================
   PROYECTOS
   ========================================================= */
.projects {
  position: relative; z-index: 30; background: var(--gray);
  padding: calc(128 * var(--u)) calc(128 * var(--u));
}
.projects__eyebrow {
  display: block; font-size: 16px; line-height: 24px; letter-spacing: .3em; text-transform: uppercase;
}
.projects__kicker {
  margin-top: 8px;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 32px; line-height: 36px;
}
.projects__head {
  margin-top: calc(48 * var(--u));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.big {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: calc(197 * var(--u)); line-height: calc(172.8 * var(--u)); letter-spacing: -.02em;
}
.bline { display: block; white-space: nowrap; }
.bw { display: inline-block; will-change: transform, opacity; }
.bw--w { color: #fff; }
.bw--k { color: #000; }
.pslot {
  display: inline-block; vertical-align: middle; overflow: visible;
  width: calc(125 * var(--u)); height: calc(125 * var(--u));
  margin: 0 calc(-2 * var(--u)) calc(14 * var(--u)) calc(-2 * var(--u));
}
.bline > .pslot:first-child { margin-left: 0; }
.projects__lead { flex: 0 0 calc(384 * var(--u)); font-size: 18px; line-height: 28px; margin-bottom: calc(10 * var(--u)); }

.grid { display: flex; gap: calc(48 * var(--u)); margin-top: calc(148 * var(--u)); align-items: flex-start; }
.col { flex: 1 1 0; display: flex; flex-direction: column; gap: calc(64 * var(--u)); min-width: 0; }
.col--b { margin-top: calc(20 * var(--u)); }

.card { position: relative; display: block; overflow: hidden; border-radius: 8px; background: #fff; cursor: none; will-change: transform; }
.card img { width: 100%; height: auto; transition: transform .3s ease; }
@media (hover: hover) { .card:hover img { transform: scale(1.05); } }
.card__ov {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 24px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0)); color: #fff; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; z-index: 2;
}
.card:focus-visible .card__ov { opacity: 1; transform: none; }
@media (hover: hover) { .card:hover .card__ov { opacity: 1; transform: none; } }
.card__ov h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 32px; line-height: 1; margin-bottom: 8px; }
.card__tags { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--lime); }
.card__desc { font-size: 20px; line-height: 28px; max-width: 90%; }
/* Marco de captura con scroll al pasar el cursor (tarjetas de proyecto).
   La imagen es la web completa; se desplaza de arriba abajo con translateY. --dur lo fija build.py */
.sf { position: relative; overflow: hidden; container-type: size; aspect-ratio: var(--ar, 1.55); background: #ececec; }
.sf--fill { position: absolute; inset: 0; aspect-ratio: auto; }
.sf .sf__img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; pointer-events: none;
  transform: translate3d(0, 0, 0); transition: transform .9s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.card:focus-visible .sf .sf__img, .pcard:focus-visible .sf .sf__img, .sf.is-play .sf__img { transform: translate3d(0, min(0px, calc(-100% + 100cqh)), 0); transition: transform var(--dur, 5s) cubic-bezier(.45, .05, .3, 1); }
@media (hover: hover) { .card:hover .sf .sf__img, .pcard:hover .sf .sf__img { transform: translate3d(0, min(0px, calc(-100% + 100cqh)), 0); transition: transform var(--dur, 5s) cubic-bezier(.45, .05, .3, 1); } }
@media (hover: none) { .card__ov { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sf .sf__img { transition: none !important; transform: none !important; } }


/* Cursor personalizado */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  padding: 0 20px; height: 36px; display: flex; align-items: center;
  background: var(--lime); color: #000; border-radius: 999px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translate3d(-100px,-100px,0);
  transition: opacity .25s;
}
.cursor.is-on { opacity: 1; }

/* =========================================================
   CTA
   ========================================================= */
.cta {
  position: relative; z-index: 30; overflow: hidden;
  height: 100vh; min-height: calc(855 * var(--u));
  background: #000; color: #fff;
}
.crow {
  position: absolute; left: 0; width: 100%; text-align: center; height: calc(320 * var(--u));
  font-family: var(--sans); font-weight: 300; text-transform: uppercase;
  font-size: calc(270 * var(--u)); line-height: calc(320 * var(--u));
  white-space: nowrap; will-change: transform;
}
.crow--1 { top: calc(45 * var(--u));  --base: 0; }
.crow--2 { top: calc(317 * var(--u)); --base: 0; }
.crow--3 { top: calc(589 * var(--u)); --base: 0; }
.crow span { display: block; transform: translate3d(calc(var(--base) * var(--u) + var(--cx, 0px)), 0, 0); will-change: transform; }
.cta__btn { position: absolute; left: 50%; top: calc(442 * var(--u)); transform: translateX(-50%); z-index: 3; }

/* =========================================================
   PIE
   ========================================================= */
.footer { position: relative; z-index: 30; background: #000; padding: 40px 0; }
.footer__in { padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.footer__icons { display: flex; gap: 16px; }
.fi { width: 56px; height: 56px; display: block; }
.fi svg { width: 100%; height: 100%; }
.footer .logo svg { height: 56px; }

/* =========================================================
   MODAL · "Let's Work Together"
   Nace del botón "Work with us": cuatro capas (amarilla a pantalla
   completa + paneles superior, central e inferior). Las medidas y las
   esquinas cóncavas (34×35) son las de la referencia; los tiempos
   los controla js/main.js.
   ========================================================= */
:root { --err-bg: #7f1d1d; --err-fg: #fee2e2; --ok-bg: #14532d; --ok-fg: #dcfce7; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mm { position: relative; z-index: 45; --mbg: var(--lime); --k: 1; }
.mm__wash { position: fixed; z-index: 1; background: var(--lime); }
.mm__p { position: fixed; z-index: 2; background: var(--mbg); }
.mm__p--c { overflow: hidden; }

/* Esquinas cóncavas: cuelgan 33px fuera de los paneles superior/inferior */
.mm__c { position: absolute; display: block; width: calc(34px * var(--k)); height: calc(35px * var(--k)); max-width: none; }
.mm__c path { fill: var(--mbg); }
.mm__c--tl { left: calc(-33px * var(--k)); top: 0; }
.mm__c--tr { right: calc(-33px * var(--k)); top: 0; }
.mm__c--bl { left: calc(-33px * var(--k)); bottom: 0; }
.mm__c--br { right: calc(-33px * var(--k)); bottom: 0; }

.mm__x {
  position: absolute; top: 0; right: 32px; z-index: 3; width: 20px; height: 40px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: 400 36px/40px var(--sans); color: var(--lime); transition: color .2s;
}
@media (hover: hover) { .mm__x:hover { color: #fff; } }

.mm__scroll { height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; color: #fff; }
.mm__scroll::-webkit-scrollbar { display: none; }

/* El contenido aparece a los 800 ms (JS) con un fundido de 300 ms */
.mm__content {
  min-height: 100%; display: flex; flex-direction: column; padding: 32px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
}
.mm.is-ready .mm__content { opacity: 1; visibility: visible; transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility 0s; }

.mm__title { font: 700 24px/32px var(--sans); margin: 0 0 12px; letter-spacing: -.01em; }
.mm__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }

.mm__form { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; }
.mfield { display: block; position: relative; }
.mfield input, .mfield select, .mfield textarea {
  display: block; width: 100%; height: 34px; padding: 6px 8px;
  background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px;
  font: 400 14px/20px var(--sans); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.mfield input:focus, .mfield select:focus, .mfield textarea:focus {
  border-color: var(--lime); box-shadow: 0 0 0 1px rgba(239, 255, 132, .2);
}
.mfield ::placeholder { color: #9CA3AF; opacity: 1; }
.mfield select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
  background: #000 url("data:image/svg+xml;utf8,<svg fill='white' height='12' viewBox='0 0 20 20' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M4 7l6 6 6-6' fill='none' stroke='white' stroke-width='2'/></svg>") no-repeat right .5rem center / 1.2em 1.2em;
}
.mfield select option { background: #000; color: #fff; }
.mfield--area { flex: 1; display: flex; min-height: 96px; }
.mfield--area textarea { height: auto; align-self: stretch; resize: none; }
.mfield.is-invalid input, .mfield.is-invalid select, .mfield.is-invalid textarea { border-color: #f87171; }

.mbtn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 12px;
  border: 2px solid var(--lime); border-radius: 8px;
  font: 600 14px/20px var(--sans); text-align: center; cursor: pointer;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), background-color .15s, color .15s;
}
@media (hover: hover) { .mbtn:hover { transform: scale(1.02); } }
.mbtn--line { background: transparent; color: var(--lime); }
@media (hover: hover) { .mbtn--line:hover { background: var(--lime); color: #000; } }
.mbtn--fill { background: var(--lime); color: #000; }
@media (hover: hover) { .mbtn--fill:hover { background: transparent; color: var(--lime); } }
.mbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; background: #374151; border-color: #374151; color: #fff; }
.mbtn:focus-visible, .mm__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.mstatus { padding: 8px; border-radius: 8px; font-size: 12px; line-height: 16px; }
.mstatus:empty { display: none; }
.mstatus.is-ok  { background: var(--ok-bg);  color: var(--ok-fg); }
.mstatus.is-err { background: var(--err-bg); color: var(--err-fg); }

/* Tablet: los enlaces en castellano son más largos; entre 768 y 1023 px se usa el menú hamburguesa */
@media (min-width: 768px) and (max-width: 1023px) {
  .header { z-index: 60; }
  .nav { display: none; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 40px; height: 40px; padding: 8px; border: 0; background: none;
  }
  .burger span { display: block; height: 2px; background: #fff; transition: transform .25s; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }
  .mnav { position: fixed; inset: 0; z-index: 55; background: #000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
  .mnav.is-open { display: flex; }
  .mnav a { color: #fff; font-family: var(--display); font-size: 44px; text-transform: uppercase; }

  /* CTA final apilado (la composición de escritorio es horizontal y en vertical queda diminuta) */
  .cta { height: auto; min-height: 0; padding: 72px 0 96px; }
  .cta__rows { display: flex; flex-direction: column; }
  .crow { position: relative; top: auto !important; height: auto; font-size: 12vw; line-height: 1.05; white-space: nowrap; }
  .crow span { transform: none !important; padding: 0 32px; text-align: left; }
  .cta__btn { --u: 1px; position: static; transform: none; margin: 40px 32px 0; }
  .cta__btn .pill { height: 60px; }
  .cta__btn .pill__cap { width: 30px; }
  .cta__btn .pill__body { width: 240px; font-size: 18px; }
  .cta__btn .pill__body svg { width: 20px; height: 20px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .nav { gap: 32px; } }

@media (max-width: 640px) {
  .mm__content { padding: 24px 20px; }
  .mm__x { right: 16px; }
  .mm__grid { grid-template-columns: 1fr; }
  .mfield--area { min-height: 120px; }
}

/* =========================================================
   MÓVIL (< 768px)
   ========================================================= */
@media (max-width: 767px) {
  :root { --u: 1px; }
  .header { padding: 0 calc(16px + var(--sbw, 0px)) 0 16px; z-index: 60; }
  .brand { font-size: 22px; }
  .nav { display: none; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 40px; height: 40px; padding: 8px; border: 0; background: none;
  }
  .burger span { display: block; height: 2px; background: #fff; transition: transform .25s; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }
  .mnav { position: fixed; inset: 0; z-index: 55; background: #000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
  .mnav.is-open { display: flex; }
  .mnav a { color: #fff; font-family: var(--display); font-size: 44px; text-transform: uppercase; }
  .js .hero__stage [data-k], .js .slot { opacity: 1; }
  .bar { display: none; }

  .hero { min-height: 100svh; padding: 96px 16px 48px; }
  .hero__stage { display: none; }
  .hero__m { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: baseline; }
  .mw { font-family: var(--display); font-size: 64px; line-height: 64px; text-transform: uppercase; color: #fff; }
  .mw--lime { color: var(--lime); }
  .mwg { display: inline-flex; align-items: baseline; }
  .hero__mob { display: block; width: 100%; }
  .hero__mx { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .mslots { display: flex; gap: 12px; }
  .mslot { width: 64px; height: 64px; overflow: visible; }

  /* Animaciones táctiles: revelado al entrar en pantalla (lo activa home.js) */
  .m-rv { opacity: 0; transform: translate3d(var(--mx, 0), 36px, 0); }
  .m-rv.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.215, .61, .355, 1), transform .7s cubic-bezier(.215, .61, .355, 1); transition-delay: var(--md, 0s); }

  .services { height: auto; min-height: 0; grid-template-rows: none; }
  .services__row { grid-template-columns: 1fr; }
  /* Sin hover: cada panel muestra siempre nombre + titular + texto, en flujo normal */
  .svc { min-height: 0; padding: 32px 20px 36px; }
  .svc .svc__icon { display: block; position: static; top: auto; margin: 0 0 24px; width: 44px; height: 44px; }
  .svc .svc__idle, .svc .svc__open { position: static; transform: none !important; opacity: 1 !important; pointer-events: auto; }
  .svc .svc__idle { opacity: .65 !important; }
  .svc .svc__idle h2 { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .24em; margin-bottom: 12px; }
  .svc .svc__open h2 { font-size: 32px; line-height: 36px; margin-bottom: 14px; }
  .svc .svc__tag, .svc .svc__name { display: none; }
  .svc p { max-width: none; }
  .projects { padding: 80px 24px; }
  .big { font-size: 64px; line-height: 58px; }
  .bline { white-space: normal; }
  .projects__head { flex-direction: column; align-items: flex-start; }
  .projects__lead { flex: none; margin-top: 24px; }
  .pslot { width: 44px; height: 44px; margin: 0 6px 6px 2px; }
  .grid { flex-direction: column; align-items: stretch; margin-top: 56px; gap: 24px; }
  .col { flex: none; gap: 24px; }
  .col--b { margin-top: 0; }
  .card { cursor: pointer; }

  .cta { height: auto; min-height: 0; padding: 72px 0 96px; }
  .cta__rows { display: flex; flex-direction: column; }
  .crow { position: relative; top: auto !important; height: auto; font-size: 12vw; line-height: 1.05; white-space: nowrap; }
  .crow span { transform: none !important; padding: 0 16px; text-align: left; }
  .cta__btn { position: static; transform: none; margin: 32px 16px 0; }
  .pill { height: 60px; }
  .pill__cap { width: 30px; }
  .pill__body { width: 240px; font-size: 18px; }
  .pill__body svg { width: 20px; height: 20px; }
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}